[김은재] Week15

api/folder.ts

@@ -1,9 +1,8 @@
 import { BASE_URL } from "@/constants/url";
-import navEntireTab from "@/constants/folderNav";
 
-export const getFolderNavInfo = async () => {
+export const getFolderNavInfo = async (userId: number) => {
   try {
-    const response = await fetch(`${BASE_URL}/api/users/1/folders`);
+    const response = await fetch(`${BASE_URL}/api/users/${userId}/folders`);
     if (!response.ok) {
       throw new Error(`${response.status}`);
     }
@@ -16,15 +15,25 @@ export const getFolderNavInfo = async () => {
   }
 };
 
-export const getFolderListInfo = async (id: number) => {
-  let query = "/api/users/1/links";
-  if (id !== navEntireTab) {
-    query = `${query}?folderId=${id}`;
+export const getFolderListInfo = async (
+  navId: string | string[] | undefined,
+  userToken: string | undefined
+) => {
+  let query = "/api/links";
+  if (navId) {
+    query += `?folderId=${navId}`;
   }
 
   try {
-    const response = await fetch(BASE_URL + query);
+    const response = await fetch(BASE_URL + query, {
+      headers: {
+        Authorization: `Bearer ${userToken}`,
+      },
+    });
     if (!response.ok) {
+      if (response.status === 401) {
+        throw new Error("로그인 인증 ");
+      }
       throw new Error(`${response.status}`);
     }
 

api/shared.ts

@@ -1,16 +1,38 @@
 import { BASE_URL } from "../constants/url";
 
-export const getSharedInfo = async () => {
+export const getSharedFolderInfo = async (
+  folderId: string | string[] | undefined
+) => {
   try {
-    const response = await fetch(`${BASE_URL}/api/sample/folder`);
+    const response = await fetch(`${BASE_URL}/api/folders/${folderId}`);
     if (!response.ok) {
       throw new Error(`${response.status}`);
     }
 
     const result = await response.json();
     return result;
   } catch (error) {
-    if (error instanceof Error) alert(`${error.message}에러 발생!`);
+    if (error instanceof Error) alert(`${error.message}에러 발생!!`);
+    return false;
+  }
+};
+
+export const getSharedLinkList = async (
+  userId: string,
+  folderId: string | string[]
+) => {
+  try {
+    const response = await fetch(
+      `${BASE_URL}/api/users/${userId}/links?folderId=${folderId}`
+    );
+    if (!response.ok) {
+      throw new Error(`${response.status}`);
+    }
+
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    if (error instanceof Error) alert(`${error.message}에러 발생2!`);
     return false;
   }
 };

api/user.ts

@@ -30,6 +30,23 @@ export const getSignInProfile = async (userToken: string) => {
   return result;
 };
 
+export const getUserInfo = async (userId: string) => {
+  let result = null;
+
+  try {
+    const response = await fetch(`${BASE_URL}/api/users/${userId}`);
+    if (!response.ok) {
+      throw new Error(`${response.status}`);
+    }
+
+    result = await response.json();
+  } catch (error) {
+    if (error instanceof Error) alert(`${error.message}에러 발생!`);
+  }
+
+  return result;
+};
+
 export const postSign = async (apiUrl: string, userData: SignUserData) => {
   let result = null;
 

components/common/Link.tsx

@@ -26,7 +26,7 @@ const Link = ({ linkInfo, isSetting }: LinkItemParam) => {
           <Image
             width={400}
             height={400}
-            src={linkInfo.imageSource ? linkInfo.imageSource : noImg}
+            src={linkInfo.image_source ? linkInfo.image_source : noImg}
             alt="링크 이미지"
           />
         </S.ImgBox>
@@ -42,7 +42,7 @@ const Link = ({ linkInfo, isSetting }: LinkItemParam) => {
         )}
         <S.ContentBox className="content-box">
           <S.AgoBox>
-            {getTimeAgo(linkInfo.createdAt)}
+            {getTimeAgo(linkInfo.created_at)}
             {isSetting && (
               <button onClick={handleKebabClick}>
                 <Image width={20} height={20} src={kebab} alt="케밥 아이콘" />
@@ -54,7 +54,7 @@ const Link = ({ linkInfo, isSetting }: LinkItemParam) => {
           </S.AgoBox>
           <S.ContentParagraph>{linkInfo.description}</S.ContentParagraph>
           <S.CreateParagraph>
-            {formatDate(linkInfo.createdAt)}
+            {formatDate(linkInfo.created_at)}
           </S.CreateParagraph>
         </S.ContentBox>
       </LinkTag>

components/common/modal/ModalLayout.styled.ts

@@ -11,24 +11,25 @@ export const ModalWrapper = styled.div`
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: rgba(0,0,0,0.4);
-`
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 101;
+`;
 
 export const ModalContent = styled.div`
   width: 360px;
   background-color: white;
-  border: 1px solid #DEE2E6;
+  border: 1px solid #dee2e6;
   border-radius: 15px;
   position: relative;
-`
+`;
 
 export const CloseButton = styled.button`
   width: 24px;
   height: 24px;
   position: absolute;
   top: 16px;
   right: 20px;
-`
+`;
 
 export const FolerInfo = styled.div`
   display: flex;
@@ -42,7 +43,7 @@ export const FolerInfo = styled.div`
     line-height: 23.87px;
   }
   > span {
-    color: #9FA6B2;
+    color: #9fa6b2;
     line-height: 22px;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -51,11 +52,11 @@ export const FolerInfo = styled.div`
     overflow: hidden;
     word-break: break-word;
   }
-`
+`;
 
 export const ShareInfo = styled.div`
   padding: 24px 34px 32px;
   display: flex;
   justify-content: center;
   gap: 32px;
-`
+`;

components/common/modal/modalContent/LinkAddContent.tsx

@@ -1,22 +1,26 @@
 import * as S from "./LinkAddContent.styled";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useContext } from "react";
 import Button from "@/components/common/Button";
 import { getFolderNavInfo } from "@/api/folder";
 import checkIcon from "@/public/image/icon/check.svg";
 import { INavItem } from "@/types/FolderNav";
 import Image from "next/image";
+import { UserInfoContext } from "@/context/User";
 
 const LinkAddContent = () => {
   const [navList, setNavList] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [currentSelectedFolder, setFolder] = useState(null);
   const selectedFoler: React.MutableRefObject<any> = useRef({});
+  const userInfo = useContext(UserInfoContext);
 
   useEffect(() => {
     const folderNavInfo = async () => {
       try {
         setIsLoading(true);
-        const response = await getFolderNavInfo();
+
+        if (!userInfo) return;
+        const response = await getFolderNavInfo(userInfo?.id);
 
         if (response !== null) {
           setNavList(response.data);
@@ -39,6 +43,7 @@ const LinkAddContent = () => {
     <S.Content>
       <S.FolderList>
         {navList.map((navItem: INavItem, i) => {
+          console.log(navItem);
           return (
             <li
               key={navItem.id}

components/common/modal/modalContent/ShareModalContent.tsx

@@ -74,15 +74,15 @@ const ShareModalContent = () => {
 
   return (
     <>
-      {SHARE_OPTION.map((itme) => {
+      {SHARE_OPTION.map((item) => {
         return (
           <>
             <S.ShareContent
-              key={itme.keyId}
-              onClick={() => handleShareIcon(itme.keyId)}
+              key={item.keyId}
+              onClick={() => handleShareIcon(item.keyId)}
             >
-              <Image src={itme.img} alt={itme.imgAlt} />
-              <span>{itme.buttonName}</span>
+              <Image src={item.img} alt={item.imgAlt} />
+              <span>{item.buttonName}</span>
             </S.ShareContent>
           </>
         );

components/folder/NavBox.styled.tsx

@@ -5,12 +5,6 @@ export const NavWrapBox = styled.div`
   align-items: center;
   justify-content: space-between;
 
-  > ul {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
-
   > button {
     display: flex;
     flex-shrink: 0;
@@ -22,11 +16,6 @@ export const NavWrapBox = styled.div`
     }
   }
 
-  > div {
-    display: flex;
-    align-items: center;
-  }
-
   & span {
     font-size: 16px;
     color: #6d6afe;
@@ -62,6 +51,12 @@ export const NavWrapBox = styled.div`
   }
 `;
 
+export const NavList = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
 export const NavSettingBox = styled.div`
   padding-top: 24px;
   display: flex;

components/folder/NavBox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { getFolderNavInfo } from "@/api/folder";
 import * as S from "./NavBox.styled";
 import useModal from "@/hooks/useModal";
@@ -11,40 +11,45 @@ import deleteIcon from "@/public/image/icon/delete.svg";
 import { ModalParam } from "@/types/Modal";
 import { INavItem } from "@/types/FolderNav";
 import Image from "next/image";
-import navEntireTab from "@/constants/folderNav";
+import { UserInfoContext } from "@/context/User";
 
 interface FolderNav {
-  navId?: number;
-  onClickNavItem: (navId: number) => void;
+  pageNavId?: string | string[];
 }
 
-const NavBox = ({ navId, onClickNavItem }: FolderNav) => {
+const NavBox = ({ pageNavId }: FolderNav) => {
   const { openModal } = useModal();
   const [navList, setNavList] = useState<INavItem[]>([]);
   const [currentNav, setCurrentNav] = useState("전체");
+  const userInfo = useContext(UserInfoContext);
 
-  const handleLoadInfo = async () => {
-    const folderNavInfo = await getFolderNavInfo();
+  const handleGetNavData = async () => {
+    if (!userInfo) return;
+    const folderNavInfo = await getFolderNavInfo(userInfo.id);
 
     if (folderNavInfo !== null) {
-      setNavList(folderNavInfo.data);
+      setNavList(folderNavInfo.data.folder);
     }
   };
 
   useEffect(() => {
-    handleLoadInfo();
-  }, []);
+    handleGetNavData();
+  }, [userInfo]);
 
   useEffect(() => {
-    if (navId === navEntireTab) {
+    if (!pageNavId) {
       setCurrentNav("전체");
     }
 
     navList.forEach((navListItem: INavItem) => {
-      if (navListItem.name && navListItem.id === navId)
+      if (
+        navListItem.name &&
+        pageNavId &&
+        navListItem.id === parseInt(pageNavId[0])
+      )
         setCurrentNav(navListItem.name);
     });
-  }, [navId, navList]);
+  }, [pageNavId]);
 
   const handleOpenModal = ({ type, props }: ModalParam) => {
     openModal({ type, props });
@@ -53,26 +58,24 @@ const NavBox = ({ navId, onClickNavItem }: FolderNav) => {
   return (
     <>
       <S.NavWrapBox>
-        <ul>
-          <NavItem
-            navName="전체"
-            onClick={onClickNavItem}
-            navId={navEntireTab}
-            isCurrentNav={navId === navEntireTab}
-          />
+        <S.NavList>
+          <NavItem navName="전체" isCurrentNav={!pageNavId} />
           {navList &&
             navList.map((navItem) => {
               return (
                 <NavItem
                   key={navItem.id}
                   navName={navItem.name}
                   navId={navItem.id}
-                  onClick={onClickNavItem}
-                  isCurrentNav={navItem.id === navId ? true : false}
+                  isCurrentNav={
+                    pageNavId && navItem.id?.toString() === pageNavId[0]
+                      ? true
+                      : false
+                  }
                 />
               );
             })}
-        </ul>
+        </S.NavList>
         <button
           onClick={() =>
             handleOpenModal({
@@ -88,7 +91,7 @@ const NavBox = ({ navId, onClickNavItem }: FolderNav) => {
       </S.NavWrapBox>
       <S.NavSettingBox>
         <span>{currentNav}</span>
-        {navId !== navEntireTab && (
+        {pageNavId && (
           <div>
             <button
               onClick={() =>