[박기범] Week20

components/CardList.tsx

@@ -7,13 +7,15 @@ import star_icon from "@/public/images/star.svg";
 import kebab_icon from "@/public/images/kebab.svg";
 
 interface CardListProps {
+  linkId: number;
   url: string;
   createdAt: string;
   desc: string;
   imgUrl: string;
 }
 
 export default function CardList({
+  linkId,
   url,
   createdAt,
   desc,
@@ -74,7 +76,9 @@ export default function CardList({
 
   return (
     <div className={styles.CardList}>
-      {isDeleteLinkModal && <DeleteLink link={url} onClose={clickDeleteLink} />}
+      {isDeleteLinkModal && (
+        <DeleteLink linkId={linkId} link={url} onClose={clickDeleteLink} />
+      )}
       {isAddModal && <Add linkUrl={url} onClose={clickAdd} />}
       <img
         id={styles.cardImg}

components/CardSection.tsx

@@ -1,35 +1,21 @@
 import React from "react";
-import { useEffect, useState } from "react";
-import { getFolder } from "@/pages/api/api";
+import { useQuery } from "@tanstack/react-query";
 import CardList from "@/components/CardList";
 import SearchBar from "@/components/SearchBar";
 import styles from "@/styles/CardSection.module.css";
 
 interface CardListType {
   id: number;
-  createdAt: string;
+  created_at: string;
   url: string;
   description: string;
-  imageSource: string;
+  image_source: string;
 }
 
-export default function CardSection() {
-  const [cardList, setCardList] = useState<CardListType[]>([]);
-
-  useEffect(() => {
-    async function getProfileFolder() {
-      try {
-        const {
-          folder: { links },
-        } = await getFolder();
-        setCardList(links);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-
-    getProfileFolder();
-  }, []);
+export default function CardSection({ id }: any) {
+  const cardList = useQuery({
+    queryKey: ["individualList", Number(id)],
+  });
 
   const dummyFunc = () => {};
 
@@ -38,17 +24,26 @@ export default function CardSection() {
       <div className={styles.cardFrame}>
         <SearchBar onInputChange={dummyFunc} />
         <div className={styles.card_list}>
-          {cardList.map(({ id, createdAt, url, description, imageSource }) => {
-            return (
-              <CardList
-                key={id}
-                url={url}
-                createdAt={createdAt}
-                desc={description}
-                imgUrl={imageSource}
-              />
-            );
-          })}
+          {Array.isArray(cardList.data) &&
+            cardList.data.map(
+              ({
+                id,
+                created_at,
+                url,
+                description,
+                image_source,
+              }: CardListType) => {
+                return (
+                  <CardList
+                    key={id}
+                    url={url}
+                    createdAt={created_at}
+                    desc={description}
+                    imgUrl={image_source}
+                  />
+                );
+              }
+            )}
         </div>
       </div>
     </div>

components/FolderBar.tsx

@@ -1,35 +1,38 @@
 import React from "react";
-import { useEffect, useState } from "react";
-import { getFolder } from "@/pages/api/api";
+import { useQuery } from "@tanstack/react-query";
+import { getFolder, getFolderUser } from "@/pages/api/api";
 import styles from "@/styles/FolderBar.module.css";
 
-export default function FolderBar() {
-  const [folderName, setFolderName] = useState<string>("");
-  const [userName, setUserName] = useState<string>("");
-  const [profileImage, setProfileImage] = useState<string>("");
+export default function FolderBar({ id }: any) {
+  //폴더 이름을 가져오기 위한 쿼리
+  const folderInfo = useQuery({
+    queryKey: ["folderInfo"],
+    queryFn: () => getFolder(id),
+    staleTime: 0,
+    enabled: id !== undefined,
+  });
 
-  useEffect(() => {
-    async function getProFileFolder() {
-      try {
-        const {
-          folder: { name, owner },
-        } = await getFolder();
-        setFolderName(name);
-        setUserName(owner.name);
-        setProfileImage(owner.profileImageSource);
-      } catch (error) {
-        console.error(error);
-      }
-    }
+  //폴더 소유자를 가져오기 위한 쿼리
+  const folderOwner = useQuery({
+    queryKey: ["folderOwner"],
+    queryFn: () => getFolderUser(folderInfo.data[0].user_id),
+    enabled: !!folderInfo.data,
+  });
 
-    getProFileFolder();
-  }, []);
   return (
     <div className={styles.FolderBar}>
       <div className={styles.user}>
-        <img id={styles.folderImg} src={profileImage} alt="폴더 이미지"></img>
-        <span id={styles.userName}>@{userName}</span>
-        <span id={styles.folderName}>{folderName}</span>
+        <img
+          id={styles.folderImg}
+          src={folderOwner.data && folderOwner.data[0]?.image_source}
+          alt="폴더 이미지"
+        ></img>
+        <span id={styles.userName}>
+          @{folderOwner.data && folderOwner.data[0]?.name}
+        </span>
+        <span id={styles.folderName}>
+          {folderInfo.data && folderInfo.data[0]?.name}
+        </span>
       </div>
     </div>
   );

components/FolderSection.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import { getFolderList, getAllLinks, getFolderLink } from "@/pages/api/api";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import CardList from "@/components/CardList";
 import SearchBar from "@/components/SearchBar";
 import addImg from "@/public/images/add.svg";
@@ -28,69 +29,99 @@ interface CardListType {
 }
 
 export default function FolderSection() {
-  const [folderName, setFolderName] = useState("폴더를 선택해주세요");
-  const [folderList, setFolderList] = useState<FolderListType[]>([]);
+  const [folderName, setFolderName] = useState<string | undefined>(
+    "폴더를 선택해주세요"
+  );
+  const [folderId, setFolderId] = useState<number | null>(null);
+  //카드리스트에 관한
   const [cardList, setCardList] = useState<CardListType[]>([]);
+  const [filteredCardList, setFilteredCardList] = useState<CardListType[]>([]);
+  //모달에 관한
   const [isEditNameModal, setIsEditNameModal] = useState<boolean>(false);
   const [isAddFolderModal, setIsAddFolderModal] = useState<boolean>(false);
   const [isShareModal, setIsShareModal] = useState<boolean>(false);
   const [isDeleteFolderModal, setIsDeleteFolderModal] =
     useState<boolean>(false);
+  //선택한 id 버튼 활성화를 위해
   const [selectedFolderId, setSelectedFolderId] = useState<number | string>();
+  //선택한 id 개별 폴더 링크를 가져오기 위해
+  const [selectedId, setSelectedId] = useState<number>();
   const [searchInput, setSearchInput] = useState<string>("");
-  const [filteredCardList, setFilteredCardList] = useState<CardListType[]>([]);
 
-  //전체 폴더 클릭
-
-  async function getAllList() {
-    try {
-      const { data } = await getAllLinks();
-      setCardList(data);
-      setFilteredCardList(data);
-      setFolderName("전체");
-      console.log(folderList);
-    } catch (error) {
-      console.error(error);
-    }
-  }
+  const queryClient = useQueryClient();
 
-  async function folderAllNameClick(all: string) {
-    setFolderName(all);
-    await getAllList();
-  }
-  //전체 폴더 클릭
+  //현재 폴더 이름을 최신으로 가져오기 위한
+  const currentFolderName = useQuery<string>({
+    queryKey: ["folderName"],
+  });
 
-  //개별 폴더 클릭
+  //전체 폴더 가져오기
+  const allList = useQuery({
+    queryKey: ["allList"],
+    queryFn: async () => await getAllLinks(),
+  });
 
-  async function getList(id: number) {
-    try {
-      const { data } = await getFolderLink(id);
-      setCardList(data);
-    } catch (error) {
-      console.error(error);
-    }
+  //전체 폴더 클릭
+  async function folderAllNameClick() {
+    setFolderId(null);
+    queryClient.setQueryData(["folderId"], null);
+    queryClient.setQueryData(["folderName"], "전체");
   }
 
-  async function folderNameClick(name: string, id: number) {
-    setFolderName(name);
-    await getList(id);
-  }
+  //개별 폴더 가져오기
+  const individualList = useQuery({
+    queryKey: ["individualList", selectedId],
+    queryFn: async () => {
+      if (selectedId) {
+        const data = await getFolderLink(selectedId);
+        return data;
+      } else {
+        return []; // 선택된 폴더가 없는 경우 빈 배열 반환
+      }
+    },
+  });
 
   //개별 폴더 클릭
-
-  //폴더 버튼
+  async function folderNameClick(name: string, id: number) {
+    setFolderId(id);
+    queryClient.setQueryData(["folderId"], id);
+    queryClient.setQueryData(["folderName"], name);
+  }
+  //폴더이름을 클릭했을 때 즉각적으로 링크 데이터들이 바뀌도록
   useEffect(() => {
-    async function getList() {
-      try {
-        const { data } = await getFolderList();
-        setFolderList(data);
-      } catch (error) {
-        console.error(error);
-      }
+    setFolderName(currentFolderName.data);
+    if (individualList.data && currentFolderName.data !== "전체") {
+      setCardList(individualList.data);
+      setFilteredCardList(individualList.data);
+    } else if (currentFolderName.data === "전체") {
+      setCardList(allList.data);
+      setFilteredCardList(allList.data);
     }
+  }, [individualList.data, currentFolderName.data, allList.data]);
+
+  //폴더 버튼
+  const folderList = useQuery({
+    queryKey: ["folderList"],
+    queryFn: async () => await getFolderList(),
+  });
+
+  //링크 추가를 위해 현재 폴더 id를 쿼리에 저장
+  //처음 랜더링 될때 한번
+  useQuery({
+    queryKey: ["folderId"],
+    queryFn: async () => {
+      return folderId;
+    },
+  });
 
-    getList();
-  }, []);
+  //폴더 이름 변경을 위해 현재 폴더 이름을 쿼리에 저장
+  //처음 랜더링 될때 한번
+  useQuery({
+    queryKey: ["folderName"],
+    queryFn: async () => {
+      return folderName;
+    },
+  });
 
   //이름변경 아이콘 클릭시 뜨는 모달창 함수
   const clickEditName = () => {
@@ -137,32 +168,48 @@ export default function FolderSection() {
       <div className={styles.FolderSection_Frame}>
         <SearchBar onInputChange={handleInputChange} />
         {isEditNameModal && (
-          <Edit folderName={folderName} onClose={clickEditName} />
+          <Edit
+            folderId={folderId}
+            folderName={folderName}
+            onClose={clickEditName}
+          />
         )}
         {isAddFolderModal && <AddFolder onClose={clickAddFolder} />}
-        {isShareModal && <Share folderName={folderName} onClose={clickShare} />}
+        {isShareModal && (
+          <Share
+            folderId={folderId}
+            folderName={folderName}
+            onClose={clickShare}
+          />
+        )}
         {isDeleteFolderModal && (
-          <DeleteFolder folderName={folderName} onClose={clickDeleteFolder} />
+          <DeleteFolder
+            folderId={folderId}
+            folderName={folderName}
+            onClose={clickDeleteFolder}
+          />
         )}
         <div className={styles.FolderBtnList}>
           <div className={styles.FolderBtn}>
             <button
               className={selectedFolderId === "전체" ? styles.active : ""}
               onClick={() => {
-                folderAllNameClick("전체");
+                folderAllNameClick();
                 setSelectedFolderId("전체");
+                setSelectedId(undefined);
               }}
             >
               전체
             </button>
-            {folderList.map(({ name, id }) => {
+            {folderList.data?.map(({ name, id }: FolderListType) => {
               return (
                 <button
                   key={id}
                   className={selectedFolderId === id ? styles.active : ""}
                   onClick={() => {
                     folderNameClick(name, id);
                     setSelectedFolderId(id);
+                    setSelectedId(id);
                   }}
                 >
                   {name}
@@ -180,7 +227,7 @@ export default function FolderSection() {
             />
           </div>
         </div>
-        {cardList[0] ? (
+        {cardList && cardList[0] ? (
           <>
             <div className={styles.FolderNameBar}>
               <span>{folderName}</span>
@@ -207,6 +254,7 @@ export default function FolderSection() {
                   return (
                     <CardList
                       key={id}
+                      linkId={id}
                       url={url}
                       createdAt={created_at}
                       desc={description}