[김한샘] Week15

next.config.js

@@ -16,6 +16,7 @@ const nextConfig = {
       "ssl.pstatic.net",
       "data1.pokemonkorea.co.kr",
       "jasonwatmore.com",
+      "avatars.githubusercontent.com",
     ],
   },
 };

pages/folder/[id].tsx

@@ -0,0 +1,97 @@
+import Search from "@/src/components/Search/Search";
+import React, { useEffect, useState } from "react";
+import AddLinkForm from "@/src/components/AddLinkForm/AddLinkForm";
+import { getFolderIdLinks, getSharedFolderIdData } from "@/src/fetchUtils/index";
+import FolderTabList from "@/src/components/FolderTabList/FolderTabList";
+import CardList from "@/src/components/CardList/CardList";
+import useModal from "@/src/hooks/useModal";
+import ModalContext from "@/src/components/Modal/ModalContext";
+import ModalContainer from "@/src/components/Modal/ModalContainer";
+import Header from "@/src/components/Header/Header";
+import Footer from "@/src/components/Footer/Footer";
+import { useRouter } from "next/router";
+import { getAccessToken } from "@/src/utils/constants";
+
+function Folder() {
+  const [folderTabDataList, setFolderTabDataList] = useState<FolderTabDataList[]>([]);
+  const [userFolderDataList, setUserFolderDataList] = useState<UserFolderdataList[]>();
+
+  const { isOpen, openModal, closeModal } = useModal();
+  const [modalType, setModalType] = useState("");
+  const [cardUrl, setCardUrl] = useState("");
+  const [folderTabName, setFolderTabName] = useState<string | null>("");
+  const [searchInputValue, setSearchInputValue] = useState<string>("");
+  const [folderDataId, setFolderDataId] = useState<number>(0);
+  const [name, setName] = useState<string>("");
+
+  const router = useRouter();
+  const { id } = router.query;
+
+  useEffect(() => {
+    const token = getAccessToken();
+    if (!token) {
+      router.push("/signin");
+    }
+  }, [router]);
+
+  useEffect(() => {
+    if (!router.isReady) return;
+
+    async function fetchDataAndSetState() {
+      const folderTabDataListPromise = getSharedFolderIdData();
+      const userFolderDataListPromise = getFolderIdLinks(Number(id));
+
+      const [fetchedFolderTabDataList, fetchedUserFolderDataList] = await Promise.all([
+        folderTabDataListPromise,
+        userFolderDataListPromise,
+      ]);
+
+      fetchedFolderTabDataList.data.folder.filter((item: FolderTabDataList) => {
+        if (item.id === Number(id)) {
+          setName(item.name);
+        }
+      });
+      setFolderTabDataList(fetchedFolderTabDataList.data.folder);
+      setUserFolderDataList(fetchedUserFolderDataList?.data.folder);
+      setFolderDataId(Number(id));
+    }
+    fetchDataAndSetState();
+  }, [id, router]);
+
+  const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchInputValue(e.target.value);
+  };
+
+  return (
+    <>
+      <Header setFolderDataId={setFolderDataId} />
+      <div className="content-wrap">
+        <ModalContext.Provider
+          value={{ isOpen, openModal, closeModal, setModalType, setCardUrl, folderDataId }}
+        >
+          <AddLinkForm />
+          <ModalContainer
+            modalType={modalType}
+            folderTabDataList={folderTabDataList}
+            cardUrl={cardUrl}
+            folderTabName={folderTabName}
+          />
+          <div className="wrap">
+            <Search searchInputValue={searchInputValue} onChangeValue={onChangeValue} />
+            <FolderTabList
+              folderTabDataList={folderTabDataList}
+              setUserFolderDataList={setUserFolderDataList}
+              setFolderTabName={setFolderTabName}
+              name={name}
+              setName={setName}
+            />
+            <CardList userFolderDataList={userFolderDataList} searchInputValue={searchInputValue} />
+          </div>
+        </ModalContext.Provider>
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export default Folder;

pages/folder.tsx → pages/folder/index.tsx

@@ -1,14 +1,16 @@
 import Search from "@/src/components/Search/Search";
 import React, { useEffect, useState } from "react";
 import AddLinkForm from "@/src/components/AddLinkForm/AddLinkForm";
-import { tabDataList, userFoldersData } from "@/src/fetchUtils/index";
+import { getFolderIdLinks, getSharedFolderIdData } from "@/src/fetchUtils/index";
 import FolderTabList from "@/src/components/FolderTabList/FolderTabList";
 import CardList from "@/src/components/CardList/CardList";
 import useModal from "@/src/hooks/useModal";
 import ModalContext from "@/src/components/Modal/ModalContext";
 import ModalContainer from "@/src/components/Modal/ModalContainer";
 import Header from "@/src/components/Header/Header";
 import Footer from "@/src/components/Footer/Footer";
+import { useRouter } from "next/router";
+import { getAccessToken } from "@/src/utils/constants";
 
 function Folder() {
   const [folderTabDataList, setFolderTabDataList] = useState<FolderTabDataList[]>([]);
@@ -19,20 +21,29 @@ function Folder() {
   const [cardUrl, setCardUrl] = useState("");
   const [folderTabName, setFolderTabName] = useState<string | null>("");
   const [searchInputValue, setSearchInputValue] = useState<string>("");
-  const [forderDataId, setForderDataId] = useState<number>(0);
+  const [folderDataId, setFolderDataId] = useState<number>(0);
+  const [name, setName] = useState<string>("");
+  const router = useRouter();
+
+  useEffect(() => {
+    const token = getAccessToken();
+    if (!token) {
+      router.push("/signin");
+    }
+  }, [router]);
 
   useEffect(() => {
     async function fetchDataAndSetState() {
-      const folderTabDataListPromise = tabDataList();
-      const userFolderDataListPromise = userFoldersData();
+      const folderTabDataListPromise = getSharedFolderIdData();
+      const userFolderDataListPromise = getFolderIdLinks();
 
-      const [folderTabDataList, userFolderDataList] = await Promise.all([
+      const [fetchedFolderTabDataList, fetchedUserFolderDataList] = await Promise.all([
         folderTabDataListPromise,
         userFolderDataListPromise,
       ]);
 
-      setFolderTabDataList(folderTabDataList.data);
-      setUserFolderDataList(userFolderDataList.data);
+      setFolderTabDataList(fetchedFolderTabDataList.data.folder);
+      setUserFolderDataList(fetchedUserFolderDataList?.data.folder);
     }
     fetchDataAndSetState();
   }, []);
@@ -43,10 +54,10 @@ function Folder() {
 
   return (
     <>
-      <Header />
+      <Header setFolderDataId={setFolderDataId} />
       <div className="content-wrap">
         <ModalContext.Provider
-          value={{ isOpen, openModal, closeModal, setModalType, setCardUrl, forderDataId }}
+          value={{ isOpen, openModal, closeModal, setModalType, setCardUrl, folderDataId }}
         >
           <AddLinkForm />
           <ModalContainer
@@ -61,8 +72,8 @@ function Folder() {
               folderTabDataList={folderTabDataList}
               setUserFolderDataList={setUserFolderDataList}
               setFolderTabName={setFolderTabName}
-              forderDataId={forderDataId}
-              setForderDataId={setForderDataId}
+              name={name}
+              setName={setName}
             />
             <CardList userFolderDataList={userFolderDataList} searchInputValue={searchInputValue} />
           </div>

pages/shared/[id].tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import ConHeader from "@/src/components/ConHeader/ConHeader";
+import Search from "@/src/components/Search/Search";
+import CardList from "@/src/components/CardList/CardList";
+import { useEffect, useState } from "react";
+import {
+  getSharedData,
+  getSharedFolderIdData,
+  getSharedFolderUserData,
+} from "@/src/fetchUtils/index";
+import Header from "@/src/components/Header/Header";
+import Footer from "@/src/components/Footer/Footer";
+import { useRouter } from "next/router";
+
+function Shared() {
+  const [folderData, setFolderData] = useState<SharedAuthData | null>(null);
+  const [cardListData, setCardListData] = useState<FolderLinks[]>([]);
+  const [searchInputValue, setSearchInputValue] = useState<string>("");
+  const [folderInfo, setFolderInfo] = useState({
+    userId: 0,
+    name: "",
+  });
+  const router = useRouter();
+  const { id } = router.query; // folderId
+
+  // 폴더 이름 id 세팅.
+  useEffect(() => {
+    if (!router.isReady) return;
+    async function fetchDataAndSetState() {
+      const response = await getSharedFolderIdData(Number(id));
+      if (response) {
+        const { data } = response;
+
+        setFolderInfo((prev) => ({
+          ...prev,
+          userId: data[0].userId,
+        }));
+        setFolderInfo((prev) => ({
+          ...prev,
+          name: data[0].name,
+        }));
+      }
+    }
+    fetchDataAndSetState();
+  }, [router, id]);
+
+  // UserId 코드잇 이름정보, 이미지 세팅
+  useEffect(() => {
+    if (!router.isReady) return;
+    async function fetchDataAndSetState() {
+      const response = await getSharedFolderUserData(folderInfo.userId);
+      if (response) {
+        const { data } = response;
+        setFolderData(data[0]);
+      }
+    }
+    fetchDataAndSetState();
+  }, [folderInfo.userId, router]);
+
+  // 카드정보
+  useEffect(() => {
+    if (!router.isReady) return;
+    async function fetchDataAndSetState() {
+      const response = await getSharedData(folderInfo.userId, Number(id));
+      if (response) {
+        const { data } = response;
+        setCardListData(data);
+      }
+    }
+    fetchDataAndSetState();
+  }, [id, folderInfo.userId, router]);
+
+  const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchInputValue(e.target.value);
+  };
+
+  return (
+    <>
+      <Header />
+      <div className="content-wrap">
+        <ConHeader folderData={folderData} folderInfo={folderInfo} />
+        <div className="wrap">
+          <Search searchInputValue={searchInputValue} onChangeValue={onChangeValue} />
+          <CardList cardListData={cardListData} searchInputValue={searchInputValue} />
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export default Shared;

src/components/AuthHeader/index.tsx

@@ -17,15 +17,15 @@ function AuthHeader() {
       {router.pathname === "/signin" && (
         <p>
           회원이 아니신가요?
-          <Link href="./signup" className="underline">
+          <Link href="/signup" className="underline">
             회원 가입하기
           </Link>
         </p>
       )}
       {router.pathname === "/signup" && (
         <p>
           이미 회원이신가요?
-          <Link href="./signin" className="underline">
+          <Link href="/signin" className="underline">
             로그인 하기
           </Link>
         </p>

src/components/CardList/CardList.tsx

@@ -24,7 +24,7 @@ function CardList({
   searchInputValue: string;
 }) {
   const router = useRouter();
-  const isFolder = router.pathname === "/folder";
+  const isFolder = router.pathname.includes("/folder");
   const searchValue = searchInputValue.toLowerCase();
 
   const filteredCardData = () => {
@@ -47,7 +47,7 @@ function CardList({
       return cardListData.filter((card) => {
         return (
           card.title?.includes(searchValue) ||
-          card.url.includes(searchValue) ||
+          card.url?.includes(searchValue) ||
           card.description?.includes(searchValue)
         );
       });

src/components/ConHeader/ConHeader.tsx

@@ -1,18 +1,25 @@
 import styles from "@/src/components/ConHeader/ConHeader.module.css";
 import Image from "next/image";
 
-function ConHeader({ folderData }: { folderData: FolderData | null }) {
-  const owner = folderData?.owner;
-
+function ConHeader({
+  folderData,
+  folderInfo,
+}: {
+  folderData: SharedAuthData | null;
+  folderInfo: {
+    userId: number;
+    name: string;
+  };
+}) {
   return (
     <div className={styles.conHeaderWrap}>
       <div className={styles.conHeader}>
-        {owner?.profileImageSource && (
-          <Image width={60} height={60} src={owner.profileImageSource} alt={owner.name} />
+        {folderData?.imageSource && (
+          <Image width={60} height={60} src={folderData?.imageSource} alt={folderData?.name} />
         )}
-        <h3 className={styles.h3}>{owner?.name}</h3>
+        <h3 className={styles.h3}>{folderData?.name}</h3>
       </div>
-      <h2 className={styles.h2}>{folderData?.name}</h2>
+      <h2 className={styles.h2}>{folderInfo.name}</h2>
     </div>
   );
 }