[김윤수] week13

components/AddLink/index.tsx

@@ -0,0 +1,15 @@
+import Image from "next/image";
+
+import * as F from "./styled";
+
+export default function AddLink() {
+  return (
+    <F.addLink>
+      <div style={{ width: "20px", height: "20px", position: "relative" }}>
+        <Image src="/img/link.png" alt="linkimg" fill style={{ objectFit: "cover" }} />
+      </div>
+      <F.addInput placeholder="링크를 추가해 보세요" />
+      <F.addButton>추가하기</F.addButton>
+    </F.addLink>
+  );
+}

components/AddLink/styled.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+export const addLink = styled.form`
+  max-width: 80rem;
+  width: 100%;
+  padding: 0 2rem;
+  border-radius: 1rem;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin: 0 auto;
+  border: 1px solid var(--linkbrary-primary-color, #6d6afe);
+`;
+export const addInput = styled.input`
+  width: 100%;
+  padding: 1.6rem 2rem;
+  border-radius: 1.5rem;
+`;
+export const addButton = styled.button`
+  width: 8rem;
+  height: 3.7rem;
+  font-size: 1.4rem;
+  /* padding: 1rem 1.6rem; */
+  border-radius: 0.8rem;
+  background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%));
+  color: #fff;
+  cursor: pointer;
+`;

components/Card/index.tsx

@@ -1,8 +1,11 @@
 import { useState } from "react";
-import * as S from "./styled";
+import Link from "next/link";
+import Image from "next/image";
+
 import { formatDateYMD } from "../../utils/formatDateYMD";
 import { sortAgo } from "../../utils/sortAgo";
-import Link from "next/link";
+
+import * as S from "./styled";
 
 interface CardData {
   created_at?: string;
@@ -17,7 +20,7 @@ interface CardData {
 
 interface CardProps {
   data: CardData;
-  modalOpen: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  modalOpen: any;
 }
 
 function Card({ data, modalOpen }: CardProps) {
@@ -49,28 +52,34 @@ function Card({ data, modalOpen }: CardProps) {
         <S.cardImgWrap>
           {!image ? (
             <>
-              <S.img src="/img/nullimg.png" alt={`${title}`} />
-              <S.nullImg src="/img/logo.png" alt="logo" />
+              <div style={{ width: "100%", height: "100%", position: "relative" }}>
+                <S.img src="/img/nullimg.png" alt={`${title}`} fill />
+              </div>
+              <div style={{ width: "130px", height: "20px", position: "absolute" }}>
+                <S.nullImg src="/img/logo.png" alt="logo" fill />
+              </div>
             </>
           ) : (
-            <S.img src={`${image}`} alt={`${title}`} />
+            <div style={{ width: "100%", height: "100%", position: "relative" }}>
+              <S.img src={`${image}`} alt={`${title}`} fill />
+            </div>
           )}
         </S.cardImgWrap>
-        <S.star src="/img/star.png" />
+        <div style={{ width: "34px", height: "34px", position: "absolute", top: "15px", right: "15px" }}>
+          <S.star src="/img/star.png" fill alt="star" />
+        </div>
         <S.cardText>
           <S.kebabAgo>
             <S.ago>{`${ago}`}</S.ago>
             <S.kebab onClick={handleKebabClick}>
-              <img src="/img/kebab.png" alt="kebab" />
+              <div style={{ width: "21px", height: "17px", position: "relative" }}>
+                <Image src="/img/kebab.png" alt="kebab" fill />
+              </div>
             </S.kebab>
             {kebabOpen ? (
               <S.kebabSelect>
-                <S.kebabSelectList onClick={modalOpen} data-title="링크 삭제" data-stat={url}>
-                  삭제하기
-                </S.kebabSelectList>
-                <S.kebabSelectList onClick={modalOpen} data-title="폴더에 추가" data-stat="링크 주소">
-                  폴더에 추가
-                </S.kebabSelectList>
+                <S.kebabSelectList onClick={modalOpen("링크 삭제", url)}>삭제하기</S.kebabSelectList>
+                <S.kebabSelectList onClick={modalOpen("폴더에 추가", "링크 주소")}>폴더에 추가</S.kebabSelectList>
               </S.kebabSelect>
             ) : null}
           </S.kebabAgo>

components/Card/styled.tsx

@@ -1,11 +1,11 @@
 import styled from "styled-components";
+import Image from "next/image";
 
-export const star = styled.img`
+export const star = styled(Image)`
   width: 3.4rem;
   height: 3.4rem;
   position: absolute;
-  top: 1.5rem;
-  right: 1.5rem;
+  object-fit: cover;
 `;
 export const kebabAgo = styled.div`
   display: flex;
@@ -68,12 +68,13 @@ export const cardImgWrap = styled.div`
     transition: all 1s;
   }
 `;
-export const nullImg = styled.img`
+export const nullImg = styled(Image)`
   position: absolute;
   width: 13rem;
   opacity: 0.5;
+  object-fit: cover;
 `;
-export const img = styled.img`
+export const img = styled(Image)`
   width: 100%;
   height: 100%;
   object-fit: cover;

components/Choice/index.tsx

@@ -39,6 +39,8 @@ function Choice({ data, clickList, selectList }: TChoice) {
             value={item.id}
             title={item.name}
             onClick={clickList}
+            // styleId={item.id}
+            // 왜 위에 props가 스타일드 컴포넌트로 안넘어가지..
             style={{
               backgroundColor: selectList === item.id ? "var(--blue)" : "#fff",
               color: selectList === item.id ? "#fff" : "black",

components/Footer/index.tsx

@@ -1,5 +1,5 @@
-import * as Foot from "./styled";
 import Link from "next/link";
+import * as Foot from "./styled";
 
 function Footer() {
   return (

components/Header/index.tsx

@@ -1,5 +1,5 @@
-import * as H from "./styled";
 import Link from "next/link";
+import * as H from "./styled";
 
 interface UserData {
   auth_id: string;
@@ -32,9 +32,9 @@ function Header({ userData }: THeader) {
             {userData.email}
           </H.userdata>
         ) : (
-          <H.login>
-            <Link href="/signin/1">로그인</Link>
-          </H.login>
+          <Link href="/signin">
+            <H.login>로그인</H.login>
+          </Link>
         )}
       </H.header_inner>
     </H.header>

components/modal/index.tsx

@@ -1,7 +1,7 @@
-import * as M from "./styled";
 import { memo } from "react";
 import { useRouter } from "next/router";
 import { useState } from "react";
+import * as M from "./styled";
 
 interface Link {
   count: number;
@@ -45,6 +45,19 @@ function Modal({ setModal, modalValue, modalSub, foldData }: TModal) {
     setAddBoxToggle(Number(addBoxNum));
   };
 
+  const modalSwitch = (modalValue: string) => {
+    switch (modalValue) {
+      case "폴더 공유":
+      case "폴더에 공유":
+        return null;
+      case "폴더 삭제":
+      case "링크 삭제":
+        return <M.modalDeleteButton>삭제하기</M.modalDeleteButton>;
+      default:
+        return <M.modalButton>변경하기</M.modalButton>;
+    }
+  };
+
   return (
     <>
       <M.backGround>
@@ -75,18 +88,7 @@ function Modal({ setModal, modalValue, modalSub, foldData }: TModal) {
             </>
           ) : null}
 
-          {(() => {
-            switch (modalValue) {
-              case "폴더 공유":
-              case "폴더에 공유":
-                return null;
-              case "폴더 삭제":
-              case "링크 삭제":
-                return <M.modalDeleteButton>삭제하기</M.modalDeleteButton>;
-              default:
-                return <M.modalButton>변경하기</M.modalButton>;
-            }
-          })()}
+          {modalSwitch(modalValue)}
 
           {modalValue === "폴더 공유" ? (
             <M.shareBox>

hooks/useToggle.tsx

@@ -0,0 +1,11 @@
+import { useState } from "react";
+
+export const useToggle = (initialValue: boolean) => {
+  const [value, setValue] = useState(initialValue);
+
+  const toggleValue = (): void => {
+    setValue((currentValue) => !currentValue);
+  };
+
+  return [value, toggleValue];
+};

next.config.js

@@ -1,6 +1,70 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "s.pstatic.net",
+        port: "",
+        pathname: "/static/**",
+      },
+      {
+        protocol: "https",
+        hostname: "tanstack.com",
+        port: "",
+        pathname: "/build/**",
+      },
+      {
+        protocol: "https",
+        hostname: "storybook.js.org",
+        port: "",
+        pathname: "/images/**",
+      },
+      {
+        protocol: "https",
+        hostname: "codeit-frontend.codeit.com",
+        port: "",
+        pathname: "/static/**",
+      },
+      {
+        protocol: "https",
+        hostname: "assets.vercel.com",
+        port: "",
+        pathname: "/image/**",
+      },
+      {
+        protocol: "https",
+        hostname: "reactjs.org",
+        port: "",
+        pathname: "/**",
+      },
+      {
+        protocol: "https",
+        hostname: "jasonwatmore.com",
+        port: "",
+        pathname: "/_content/**",
+      },
+      {
+        protocol: "https",
+        hostname: "codeit.kr",
+        port: "",
+        pathname: "/static/**",
+      },
+      {
+        protocol: "https",
+        hostname: "testing-library.com",
+        port: "",
+        pathname: "/img/**",
+      },
+      {
+        protocol: "https",
+        hostname: "static.cdninstagram.com",
+        port: "",
+        pathname: "/rsrc.php/**",
+      },
+    ],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;