[박소현] week19

next.config.js

@@ -6,6 +6,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "codeit-images.codeit.com",
       },
+      {
+        protocol: "https",
+        hostname: "cloudflare-ipfs.com",
+      },
     ],
   },
   compiler: {

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.17.9",
+    "@tanstack/react-query-devtools": "^5.17.9",
     "classnames": "^2.3.2",
     "next": "13.5.6",
     "react": "^18",

pages/_app.tsx

@@ -1,9 +1,9 @@
 import "styles/globals.css";
 
 import type { AppProps } from "next/app";
-import { FolderContextProvider } from "@/context/FolderContext";
 import { SWRConfig } from "swr";
 import { DOMAIN_URL } from "@/common/constants";
+import { FolderContextProvider } from "@/context/SelectedFolderContext";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (

pages/folder/FolderContainer.tsx

@@ -1,42 +1,34 @@
-import { ChangeEvent, useContext, useEffect, useState } from "react";
 import { useRouter } from "next/router";
+import { ChangeEvent, useContext, useEffect, useState } from "react";
 
-import { FolderContext } from "@/context/FolderContext";
 import FolderUI from "./FolderPresenter";
-import { FolderData, FolderNameData, LinkData, SharedFolderData } from "@/types/folder";
-import { useFolder } from "@/hooks/useFolder";
 
-export const DEFAULT = "전체";
-// const USER_ID = 1;
-
-/**
- * @TODO
- * /folders, /links api로 변경
- * 토큰을 가져와서 hearder에 함께 보내기
- * 다른 폴더를 선택한 경우 folder/folderId 페이지로 이동
- */
+import { Folder } from "@/types/folder";
+import { LinkData } from "@/types/link";
+import { useFolder } from "@/hooks/useFolder";
+import { FolderContext } from "@/context/SelectedFolderContext";
+import { checkMatchedAllLinks } from "@/common/utils/matchedKeyword";
 
 export default function Folder() {
   const router = useRouter();
+  const { selectedFolderName, updateFolderName } = useContext(FolderContext);
 
-  const [links, setLinks] = useState<LinkData[]>([]);
-  const [filteredLinks, setFilteredLinks] = useState<LinkData[]>([]);
-  const [folders, setFolders] = useState<SharedFolderData[]>([]);
-  const [selected, setSelected] = useState(DEFAULT);
-  const [selectedFolderId, setSelectedFolderId] = useState("");
+  const [selected, setSelected] = useState(selectedFolderName);
   const [addLinkValue, setAddLinkValue] = useState("");
   const [keyword, setKeyword] = useState("");
+  const [folderNames, setFolderNames] = useState<string[]>([]);
+
+  const { data: foldersData, isLoading } = useFolder("/folders");
+  const { data: linksData } = useFolder("/links");
 
-  const { data: foldersData, isLoading } = useFolder("/api/folders");
-  const { data: linksData } = useFolder("/api/links");
-  console.log(foldersData); // 삭제예정
-  console.log(linksData); // 삭제예정
+  const folders: Folder[] = foldersData ?? [];
+  const links: LinkData[] = linksData ?? [];
 
-  const { handleFolderUpdate } = useContext(FolderContext);
+  const [filteredLinks, setFilteredLinks] = useState<LinkData[]>([]);
 
   const handleOnChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
     setKeyword(e.target.value);
-    const searchedLinks = checkMatchedAllLinks(e.target.value, links);
+    const searchedLinks = checkMatchedAllLinks(e.target.value, linksData);
     setFilteredLinks(searchedLinks.length !== 0 ? searchedLinks : []);
   };
 
@@ -45,34 +37,13 @@ export default function Folder() {
     setFilteredLinks(links);
   };
 
-  const checkMatchedAllLinks = (keyword: string, links: LinkData[]) => {
-    const filteredLinks = links.filter((link) => {
-      return (
-        (link.title && link.title.includes(keyword)) ||
-        (link.description && link.description.includes(keyword)) ||
-        (link.url && link.url.includes(keyword))
-      );
-    });
-    return filteredLinks;
-  };
-
   const handleSelectedFolder = (category: string) => {
     setSelected(category);
-    changeFolderId(category);
-  };
-
-  const changeFolderId = (category: string) => {
-    const selectedFolder =
-      folders.find((folder: SharedFolderData) => folder.name === category)?.id ?? "";
-    setSelectedFolderId(selectedFolder as string);
-  };
-
-  const updateFolderList = (data: FolderData[]) => {
-    handleFolderUpdate(data);
+    const selectedFolderId = folders.find((folder: Folder) => folder.name === category)?.id ?? "";
+    updateFolderName(category);
+    router.push(`/folder/${selectedFolderId}`);
   };
 
-  const folderNames = folders.map((folder) => folder.name);
-
   const handleAddLink = (link: string) => {
     setAddLinkValue(link);
   };
@@ -85,17 +56,14 @@ export default function Folder() {
   }, [router]);
 
   useEffect(() => {
-    if (linksData && foldersData) {
-      setLinks(linksData.data.folder);
-      setFilteredLinks(linksData.data.folder);
-      setFolders(foldersData.data.folder);
-      // updateFolderList(foldersData.data.folder);
+    if (linksData) {
+      setFilteredLinks(linksData);
     }
-  }, [linksData, foldersData, selectedFolderId]);
-
-  // if (linkError || folderError) {
-  //   console.log(linkError || folderError);
-  // }
+    if (foldersData) {
+      const folders = foldersData.map((folder: Folder) => folder.name);
+      setFolderNames(folders);
+    }
+  }, [linksData, foldersData]);
 
   return (
     <FolderUI

pages/folder/FolderPresenter.tsx

@@ -13,7 +13,6 @@ import Loading from "@/components/Loading";
 import Options from "@/components/Options";
 
 import { FolderUIProps } from "./FolderTypes";
-import { DEFAULT } from "./FolderContainer";
 import { useIntersectionObserver } from "@/hooks/useIntersectionObserver";
 
 export default function FolderUI(props: FolderUIProps) {
@@ -26,7 +25,7 @@ export default function FolderUI(props: FolderUIProps) {
       {isOpenModal && (
         <ModalPortal>
           <ModalContainer onClose={handleCloseModal}>
-            <AddFolders />
+            <AddFolders onClose={handleCloseModal} />
           </ModalContainer>
         </ModalPortal>
       )}
@@ -51,7 +50,7 @@ export default function FolderUI(props: FolderUIProps) {
           )}
           <S.MenuContainer>
             <Categories
-              categories={[DEFAULT, ...props.folderNames]}
+              categories={["전체", ...props.folderNames]}
               selected={props.selected}
               onClick={props.handleSelectedFolder}
             />
@@ -67,7 +66,7 @@ export default function FolderUI(props: FolderUIProps) {
             <>
               <S.MenuContainer>
                 <S.SubTitle>{props.selected}</S.SubTitle>
-                {props.selected !== DEFAULT && <Options selected={props.selected} />}
+                {props.selected !== "전체" && <Options selected={props.selected} />}
               </S.MenuContainer>
               <CardList links={props.filteredLinks} />
             </>

pages/folder/FolderTypes.ts

@@ -1,5 +1,5 @@
+import { LinkData } from "@/types/link";
 import { ChangeEvent } from "react";
-import { LinkData } from "@/types/folder";
 
 export interface FolderUIProps {
   addLinkValue: string;

pages/folder/[id]/index.tsx

@@ -0,0 +1,127 @@
+import { useRouter } from "next/router";
+import { ChangeEvent, useContext, useEffect, useState } from "react";
+import useSWR from "swr";
+import * as S from "../FolderStyles";
+
+import Layout from "@/components/layout/Layout";
+import ModalPortal from "@/components/ModalPortal";
+import AddFolders from "@/components/modal/AddFolders";
+import ModalContainer from "@/components/modal/ModalContainer";
+import FolderHero from "@/components/hero/HeroAboutFolder";
+import Searchbar from "@/components/inputs/Searchbar";
+import Categories from "@/components/Categories";
+import CardList from "@/components/card/CardList";
+import Options from "@/components/Options";
+import Loading from "@/components/Loading";
+
+import { useFolder } from "@/hooks/useFolder";
+import { useIntersectionObserver } from "@/hooks/useIntersectionObserver";
+import { Folder } from "@/types/folder";
+import { LinkData } from "@/types/link";
+import { FolderContext } from "@/context/SelectedFolderContext";
+import { checkMatchedAllLinks } from "@/common/utils/matchedKeyword";
+
+export default function FolderPage() {
+  const router = useRouter();
+  const { selectedFolderName, updateFolderName } = useContext(FolderContext);
+  const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>();
+
+  const [selected, setSelected] = useState(selectedFolderName);
+  const [addLinkValue, setAddLinkValue] = useState("");
+  const [keyword, setKeyword] = useState("");
+  const [isOpenModal, setIsOpenModal] = useState(false);
+  const [filteredLinks, setFilteredLinks] = useState<LinkData[]>([]);
+
+  const { data: foldersData, isLoading } = useFolder("/folders");
+  const { data: linksData } = useSWR(`/folders/${router.query.id}/links`);
+
+  const folders: Folder[] = foldersData ?? [];
+  const links: LinkData[] = linksData ?? [];
+
+  const folderNames = folders.map((folder) => folder.name);
+
+  const handleAddLink = (link: string) => {
+    setAddLinkValue(link);
+  };
+
+  const handleCloseModal = () => setIsOpenModal(false);
+
+  const handleOnChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setKeyword(e.target.value);
+    const searchedLinks = checkMatchedAllLinks(e.target.value, links);
+    setFilteredLinks(searchedLinks.length !== 0 ? searchedLinks : []);
+  };
+
+  const handleDeletekeyword = () => {
+    setKeyword("");
+    setFilteredLinks(links);
+  };
+
+  const handleSelectedFolder = (category: string) => {
+    setSelected(category);
+    const selectedFolderId = folders.find((folder: Folder) => folder.name === category)?.id ?? "";
+    updateFolderName(category);
+    router.push(`/folder/${selectedFolderId}`);
+  };
+
+  useEffect(() => {
+    if (linksData) {
+      setFilteredLinks(linksData);
+    }
+    setSelected(selectedFolderName);
+  }, [linksData, selectedFolderName]);
+
+  return (
+    <>
+      {isOpenModal && (
+        <ModalPortal>
+          <ModalContainer onClose={handleCloseModal}>
+            <AddFolders onClose={handleCloseModal} />
+          </ModalContainer>
+        </ModalPortal>
+      )}
+
+      <Layout footerRef={ref}>
+        <FolderHero
+          onChangeAddLink={handleAddLink}
+          addLinkValue={addLinkValue}
+          isFixedInput={isIntersecting}
+        />
+        <S.Contents>
+          <Searchbar
+            keyword={keyword}
+            handleOnChangeInput={handleOnChangeInput}
+            handleDelete={handleDeletekeyword}
+          />
+          {keyword && (
+            <S.SearchInfo>
+              <S.SearchKeyword>{keyword}</S.SearchKeyword>
+              으로 검색한 결과입니다.
+            </S.SearchInfo>
+          )}
+          <S.MenuContainer>
+            <Categories
+              categories={["전체", ...folderNames]}
+              selected={selected}
+              onClick={handleSelectedFolder}
+            />
+            <S.AddFolderBtn onClick={() => setIsOpenModal(true)}>
+              <span>폴더 추가</span>
+              <S.IconAdd />
+            </S.AddFolderBtn>
+          </S.MenuContainer>
+          {isLoading && <Loading />}
+          <S.MenuContainer>
+            <S.SubTitle>{selected}</S.SubTitle>
+            {selected !== "전체" && <Options selected={selected} />}
+          </S.MenuContainer>
+          {!isLoading && links.length === 0 ? (
+            <S.Blank>저장된 링크가 없습니다</S.Blank>
+          ) : (
+            <CardList links={filteredLinks} />
+          )}
+        </S.Contents>
+      </Layout>
+    </>
+  );
+}