[김윤수] Week 14

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

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import * as F from "./styled";
 
 interface Data {
@@ -15,9 +16,15 @@ interface TChoice {
   data: FolderData;
   clickList: (e: React.MouseEvent<HTMLButtonElement>) => void;
   selectList: number;
+  setSelectList: (value: number) => void;
 }
 
-function Choice({ data, clickList, selectList }: TChoice) {
+function Choice({ data, clickList, selectList, setSelectList }: TChoice) {
+  useEffect(() => {
+    if (selectList !== 0 && !data.some((item) => item.id === selectList)) {
+      setSelectList(0);
+    }
+  }, [selectList, data, setSelectList]);
   return (
     <F.choiceBtnWrap>
       <F.choiceBtn
@@ -39,6 +46,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/Favor/index.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import * as S from "./styled";
 
 interface Owner {
@@ -11,17 +12,28 @@ interface User {
   name: string;
   userName: string;
 }
+interface Folder {
+  created_at: string;
+  favorite: boolean;
+  id: number;
+  name: string;
+  user_id: number;
+}
 
 interface TFavor {
   user: User;
+  folder: Folder;
 }
 
-function Favor({ user }: TFavor) {
+function Favor({ user, folder }: TFavor) {
+  console.log(user);
   return (
     <S.shared>
-      <S.userimg src={user.owner.profileImageSource} alt="userimg" />
-      <S.pfirst>{`${user.owner.name}`}</S.pfirst>
-      <S.psecond>{`${user.name}`}</S.psecond>
+      <S.userimg>
+        <Image src={user.image_source} alt="userimg" fill />
+      </S.userimg>
+      <S.pfirst>{`${user.name}`}</S.pfirst>
+      <S.psecond>{`${folder.name}`}</S.psecond>
     </S.shared>
   );
 }

components/Favor/styled.tsx

@@ -6,9 +6,15 @@ export const shared = styled.div`
   text-align: center;
   background-color: var(--gray5);
 `;
-export const userimg = styled.img`
+export const userimg = styled.div`
   width: 6rem;
   height: 6rem;
+  position: relative;
+  left: 50%;
+  transform: translatex(-50%);
+  & image {
+    object-fit: cover;
+  }
 `;
 export const pfirst = styled.p`
   font-size: 1.6rem;

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 = <T extends boolean>(initialValue: T): [T, () => void] => {
+  const [value, setValue] = useState<T>(initialValue);
+
+  const toggleValue = () => {
+    setValue((currentValue) => !currentValue as T);
+  };
+
+  return [value, toggleValue];
+};

lib/axios.tsx

@@ -4,28 +4,23 @@ const instance = axios.create({
   baseURL: "https://bootcamp-api.codeit.kr/api/",
 });
 
-export default instance;
-
-// async function fetcher(url: string) {
-//   const response = await fetch(`${BASE_URL}${url}`);
-//   if (!response.ok) {
-//     throw new Error(`HTTP error! status: ${response.status}`);
-//   }
-//   return response.json();
-// }
-
-// export async function UserApi(id: number) {
-//   return instance(`/users/${id}`);
-// }
+// 요청 인터셉터를 추가해 토큰을 헤더에 설정
+instance.interceptors.request.use(
+  (config) => {
+    if (typeof window !== "undefined") {
+      // 로컬 스토리지에서 토큰을 가져옴
+      const token = localStorage.getItem("login");
+      if (token) {
+        // 헤더에 토큰을 추가
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+    }
+    return config;
+  },
+  (error) => {
+    // 요청 오류 처리
+    return Promise.reject(error);
+  }
+);
 
-// export function getFolders() {
-//   return instance("/sample/folder");
-// }
-
-// export async function folderData() {
-//   return instance("/users/1/folders");
-// }
-
-// export async function foldLinks() {
-//   return instance("/users/1/links");
-// }
+export default instance;