[백승렬] Week 19

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
+    "@tanstack/react-query": "^5.48.0",
     "axios": "^1.6.8",
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",

pages/_app.tsx

@@ -1,6 +1,12 @@
+import { queryClient } from "@/src/util";
 import "@/styles/reset.css";
+import { QueryClientProvider } from "@tanstack/react-query";
 import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Component {...pageProps} />
+    </QueryClientProvider>
+  );
 }

pages/folder/[[...folderId]]/index.tsx

@@ -0,0 +1,65 @@
+import { CardList, FolderToolBar, LinkForm } from "@/src/feature";
+import { Layout, SearchBar } from "@/src/ui";
+import { FolderLayout } from "@/src/page-layout/FolderLayout";
+import {
+  useIntersectionObserver,
+  useSearchLink,
+  ALL_LINKS_ID,
+} from "@/src/util";
+import { useGetLinks, useGetFolders } from "@/src/data-access";
+import { ROUTE } from "@/src/util";
+import { useRouter } from "next/router";
+import { useEffect, useMemo } from "react";
+
+const FolderPage = () => {
+  const router = useRouter();
+  const { folderId } = router.query;
+  const currentFolderId = useMemo(() => {
+    if (router.isReady) {
+      return folderId?.[0] ? parseInt(folderId?.[0]) : ALL_LINKS_ID;
+    }
+    return undefined;
+  }, [router.isReady, folderId]);
+  const { data: folders } = useGetFolders();
+  const { data: links, loading } = useGetLinks(currentFolderId);
+  const { searchValue, handleChange, handleCloseClick, result } =
+    useSearchLink(links);
+  const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>();
+
+  useEffect(() => {
+    const accessToken = localStorage.getItem("accessToken");
+    if (!accessToken) {
+      router.replace(ROUTE.로그인);
+    }
+  }, [router]);
+
+  return (
+    <Layout isSticky={false} footerRef={ref}>
+      <FolderLayout
+        linkForm={
+          <LinkForm
+            hideFixedLinkForm={isIntersecting}
+            currentFolderId={currentFolderId}
+          />
+        }
+        searchBar={
+          <SearchBar
+            value={searchValue}
+            onChange={handleChange}
+            onCloseClick={handleCloseClick}
+          />
+        }
+        folderToolBar={
+          <FolderToolBar folders={folders} selectedFolderId={currentFolderId} />
+        }
+        cardList={
+          loading ? null : (
+            <CardList links={result} currentFolderId={currentFolderId} />
+          )
+        }
+      />
+    </Layout>
+  );
+};
+
+export default FolderPage;

pages/shared/index.tsx → pages/shared/[folderId]/index.tsx

@@ -1,4 +1,4 @@
-import { useGetFolder } from "@/src/data-access";
+import { useGetFolder, useGetUser, useGetSharedLinks } from "@/src/data-access";
 import {
   CardList,
   Layout,
@@ -8,10 +8,15 @@ import {
 } from "@/src/ui";
 import { SharedLayout } from "@/src/page-layout/SharedLayout";
 import { useSearchLink } from "@/src/util";
+import { useRouter } from "next/router";
 
 const SharedPage = () => {
-  const { data } = useGetFolder();
-  const { profileImage, ownerName, folderName, links } = data || {};
+  const router = useRouter();
+  const { folderId } = router.query;
+  const { data: folder } = useGetFolder(folderId as string);
+  const { data: owner } = useGetUser(folder.userId);
+  const { data: links } = useGetSharedLinks(folder.userId, folderId as string);
+
   const { searchValue, handleChange, handleCloseClick, result } =
     useSearchLink(links);
 
@@ -20,9 +25,9 @@ const SharedPage = () => {
       <SharedLayout
         folderInfo={
           <FolderInfo
-            profileImage={profileImage}
-            ownerName={ownerName}
-            folderName={folderName}
+            profileImage={owner.imageSource}
+            ownerName={owner.name}
+            folderName={folder.name}
           />
         }
         searchBar={

src/data-access/index.js

@@ -4,4 +4,13 @@ export * from "./useGetFolders";
 export * from "./useGetLinks"
 export * from "./useSignIn";
 export * from "./useSignUp";
-export * from "./useCheckEmailDuplicate";
+export * from "./useCheckEmailDuplicate";
+export * from "./useGetSharedLinks"
+export * from "./useGetCurrentUser"
+export * from "./useDeleteLink"
+export * from "./useAddLink"
+export * from "./useAddFolder"
+export * from "./useDeleteFolder"
+export * from "./useUpdateFolderName"
+export * from "./useSignIn"
+export * from "./useSignUp"

src/data-access/useAddFolder.ts

@@ -0,0 +1,23 @@
+import { instance } from "../util";
+import { FolderRawData } from "../type";
+import { useMutation } from "@tanstack/react-query";
+import { useGetFolders } from ".";
+
+type Params = { name: string };
+
+export const useAddFolder = () => {
+  const { refetch } = useGetFolders();
+  const addFolder = ({ name }: Params) =>
+    instance.post<FolderRawData[]>("/folders", {
+      name,
+    });
+
+  const { mutate } = useMutation({
+    mutationKey: ["addFolder"],
+    mutationFn: addFolder,
+    onSuccess: () => refetch(),
+    retry: false,
+  });
+
+  return { mutate };
+};

src/data-access/useAddLink.ts

@@ -0,0 +1,28 @@
+import { instance } from "../util";
+import { useMutation } from "@tanstack/react-query";
+import { useGetLinks, useGetFolders } from ".";
+import { LinkRawData, SelectedFolderId } from "../type";
+
+type Params = { url: string; folderId: number };
+
+export const useAddLink = (folderId?: SelectedFolderId) => {
+  const { refetch: getLinks } = useGetLinks(folderId);
+  const { refetch: getFolders } = useGetFolders();
+  const addLink = ({ url, folderId }: Params) =>
+    instance.post<LinkRawData[]>("/links", {
+      url,
+      folderId,
+    });
+
+  const { mutate } = useMutation({
+    mutationKey: ["addLink"],
+    mutationFn: addLink,
+    onSuccess: () => {
+      getLinks();
+      getFolders();
+    },
+    retry: false,
+  });
+
+  return { mutate };
+};

src/data-access/useCheckEmailDuplicate.tsx

@@ -1,4 +1,6 @@
-import { instance, useAsync } from "@/src/util";
+import { instance } from "../util";
+import { useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
 import { useCallback } from "react";
 
 /**
@@ -21,16 +23,25 @@ import { useCallback } from "react";
 export const useCheckEmailDuplicate = (email: string) => {
   const checkEmailDuplicate = useCallback(
     () =>
-      instance.post<{ data: { isUsableNickname: boolean } }>("check-email", {
+      instance.post<Response>("/users/check-email", {
         email,
       }),
     [email]
   );
-  const { execute, loading, error, data } = useAsync(checkEmailDuplicate, true);
+  const { data, error, isLoading, refetch } = useQuery<
+    { data: Response },
+    AxiosError
+  >({
+    queryKey: ["check-email"],
+    queryFn: checkEmailDuplicate,
+    enabled: false,
+    retry: false,
+    networkMode: "always",
+  });
 
   return {
-    execute,
-    loading,
+    refetch,
+    isLoading,
     error,
     data,
   };

src/data-access/useDeleteFolder.ts

@@ -0,0 +1,21 @@
+import { instance } from "../util";
+import { FolderRawData } from "../type";
+import { useMutation } from "@tanstack/react-query";
+import { useGetFolders } from ".";
+
+type Params = { folderId: number };
+
+export const useDeleteFolder = () => {
+  const { refetch } = useGetFolders();
+  const deleteFolder = ({ folderId }: Params) =>
+    instance.delete<FolderRawData[]>(`/folders/${folderId}`);
+
+  const { mutate } = useMutation({
+    mutationKey: ["deleteFolder"],
+    mutationFn: deleteFolder,
+    onSuccess: () => refetch(),
+    retry: false,
+  });
+
+  return { mutate };
+};

src/data-access/useDeleteLink.ts

@@ -0,0 +1,26 @@
+import { instance, queryClient } from "../util"
+import { useMutation } from "@tanstack/react-query";
+import { useGetLinks, useGetFolders } from ".";
+import { LinkRawData, SelectedFolderId } from "../type";
+
+type Params = { linkId: number };
+
+export const useDeleteLink = (folderId?: SelectedFolderId) => {
+  const { refetch: getLinks } = useGetLinks(folderId);
+  const { refetch: getFolders } = useGetFolders();
+  const deleteLink = ({ linkId }: Params) =>
+    instance.delete<LinkRawData[]>(`/links/${linkId}`);
+
+  const { mutate } = useMutation({
+    mutationKey: ["deleteLink"],
+    mutationFn: deleteLink,
+    onSuccess: () => {
+      getLinks();
+      getFolders();
+      queryClient.invalidateQueries({ queryKey: ["getLinks", folderId] });
+    },
+    retry: false,
+  });
+
+  return { mutate };
+};