[김보경] week20

src/apis/index.ts

@@ -125,3 +125,21 @@ export async function getLinksData(token: string) {
     throw error;
   }
 }
+
+// FolderId LinksData
+export async function getFolderIdLinksData(folderId: number | null) {
+  if (!folderId) {
+    return null;
+  }
+
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/folders/${folderId}/links`
+    );
+
+    return await response.json();
+  } catch (error) {
+    console.error("getFolderIdLinksData 실패", error);
+    throw error;
+  }
+}

src/components/folder/Folder.tsx

@@ -1,17 +1,32 @@
+import { Suspense, useState } from "react";
+
 import { FavoriteButtonList } from "./LinksList/FavoriteButtonList";
 import type { Favorite, TLink } from "@/src/types/type";
 import LinksList from "./LinksList/LinksList";
+import { useQuery } from "@tanstack/react-query";
+import { getFolderIdLinksData } from "@/src/apis";
 
 interface FolderProps {
   favorites?: Favorite[];
   linksData?: TLink[];
 }
 
 export default function Folder({ favorites, linksData }: FolderProps) {
-  // console.log(linksData);
+  const [folderId, setFolderId] = useState<number | null>(null);
+
+  const { data: folderIdLinksData } = useQuery({
+    queryKey: ["linksData", folderId],
+    queryFn: () => getFolderIdLinksData(folderId),
+    enabled: folderId !== null,
+  });
 
   const handleFavoriteClick = (favorite?: Favorite | null) => {
-    console.log(favorite);
+    if (favorite) {
+      setFolderId(favorite.id);
+      return;
+    }
+
+    setFolderId(null);
   };
 
   return (
@@ -20,7 +35,10 @@ export default function Folder({ favorites, linksData }: FolderProps) {
         favorites={favorites}
         handleFavoriteClick={handleFavoriteClick}
       />
-      <LinksList linksData={linksData} />
+
+      <Suspense fallback={<div>로딩중이에요~</div>}>
+        <LinksList linksData={folderId ? folderIdLinksData : linksData} />
+      </Suspense>
     </>
   );
 }

src/components/folder/LinksList/LinksList.tsx

@@ -11,6 +11,8 @@ interface LinksListProps {
 }
 
 export default function LinksList({ linksData }: LinksListProps) {
+  console.log(linksData);
+
   return (
     <section className={cn("linkList")}>
       {linksData?.map((link) => (