Refactor: Profile 페이지 내 리액트 쿼리 적용

src/app/(home)/_components/FloatingBtn/FloatingBtn.tsx

@@ -37,42 +37,31 @@ const FloatingBtn = ({
       setIsLoginModalOpened(true);
     }
   };
+
+  const updateQueryData = (bookmarked: boolean) =>
+    queryClient.setQueryData(
+      ["shuffledContents", searchParams],
+      (oldData: InfiniteData<{ content: IContentData[] }, unknown>) => {
+        const updatedPages = oldData.pages.map((page) => {
+          const updatedContent = page.content.map((item) => {
+            if (item.id === contentId) {
+              return { ...item, bookmarked }; // 새로운 객체 반환
+            }
+            return item; // 원본 객체 반환
+          });
+          return { ...page, content: updatedContent }; // 새로운 페이지 객체 반환
+        });
+        return { ...oldData, pages: updatedPages }; // 새로운 oldData 객체 반환
+      }
+    );
   const closeSaveModal = (isSaved: boolean | null) => {
     setIsSaveModalOpened(false);
     if (isSaved === true) {
       setIsSavedContent(true);
-      queryClient.setQueryData(
-        ["shuffledContents", searchParams],
-        (oldData: InfiniteData<{ content: IContentData[] }, unknown>) => {
-          const updatedPages = oldData.pages.map((page) => {
-            const updatedContent = page.content.map((item) => {
-              if (item.id === contentId) {
-                return { ...item, bookmarked: true }; // 새로운 객체 반환
-              }
-              return item; // 원본 객체 반환
-            });
-            return { ...page, content: updatedContent }; // 새로운 페이지 객체 반환
-          });
-          return { ...oldData, pages: updatedPages }; // 새로운 oldData 객체 반환
-        }
-      );
+      updateQueryData(true);
     } else if (isSaved === false) {
       setIsSavedContent(false);
-      queryClient.setQueryData(
-        ["shuffledContents", searchParams],
-        (oldData: InfiniteData<{ content: IContentData[] }, unknown>) => {
-          const updatedPages = oldData.pages.map((page) => {
-            const updatedContent = page.content.map((item) => {
-              if (item.id === contentId) {
-                return { ...item, bookmarked: false }; // 새로운 객체 반환
-              }
-              return item; // 원본 객체 반환
-            });
-            return { ...page, content: updatedContent }; // 새로운 페이지 객체 반환
-          });
-          return { ...oldData, pages: updatedPages }; // 새로운 oldData 객체 반환
-        }
-      );
+      updateQueryData(false);
     }
   };
 

src/app/_components/NewGroupModal/NewGroupModal.tsx

@@ -3,25 +3,31 @@ import Image from "next/image";
 import Check_White from "../../../../public/assets/check_white.svg";
 import { useState } from "react";
 import { createGroup } from "../../_utils/api";
+import queryClient from "@/app/_utils/queryClient";
+import { useMutation } from "@tanstack/react-query";
 
 const NewGroup = ({
   closeNewGroupModal,
 }: {
   closeNewGroupModal: () => void;
 }) => {
+  const localTokenData = localStorage.getItem("tokenData");
+  if (localTokenData === null) throw new Error("Token is not found");
+  const tokenData = JSON.parse(localTokenData);
+
   const [groupName, setGroupName] = useState("");
 
-  const handleCreateGroup = async () => {
-    const localTokenData = localStorage.getItem("tokenData");
-    if (localTokenData !== null) {
-      if (groupName === "") {
-        alert("그룹 이름을 입력해주세요.");
-        return;
-      }
-      const tokenData = JSON.parse(localTokenData);
-      await createGroup(groupName, tokenData.accessToken);
-      closeNewGroupModal();
+  const { mutate: createNewGroup } = useMutation({
+    mutationFn: () => createGroup(groupName, tokenData.accessToken),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ["groupListData"] }),
+  });
+
+  const handleCreateGroup = () => {
+    if (groupName !== "") {
+      createNewGroup();
     }
+    closeNewGroupModal();
   };
   return (
     <div className={styles.background} onClick={closeNewGroupModal}>

src/app/_components/SaveContentModal/SaveContentModal.tsx

@@ -11,6 +11,7 @@ import {
   saveContentToGroup,
 } from "../../_utils/api";
 import { IGroup } from "../../index";
+import { useMutation, useQuery } from "@tanstack/react-query";
 
 const SaveContent = ({
   closeSaveModal,
@@ -21,13 +22,65 @@ const SaveContent = ({
   openNewGroupModal: () => void;
   contentId: number;
 }) => {
-  const [groupListData, setGroupListData] = useState<{
-    content: IGroup[];
-  } | null>(null);
+  const localTokenData = localStorage.getItem("tokenData");
+  if (localTokenData === null) throw new Error("Token is not found");
+  const tokenData = JSON.parse(localTokenData);
+
+  const { data: groupListData } = useQuery<{ content: IGroup[] }>({
+    queryKey: ["groupListData"],
+    queryFn: () => getGroupList(tokenData.accessToken),
+    enabled: !!tokenData,
+  });
+
+  const { data: containedGroupList, refetch: refetchContainedGroupList } =
+    useQuery({
+      queryKey: ["containedGroupList", contentId],
+      queryFn: () =>
+        getContainedGroupList(contentId.toString(), tokenData.accessToken),
+      enabled: !!groupListData,
+    });
+
+  const { mutate: saveContent } = useMutation({
+    mutationFn: ({
+      index,
+      contentId,
+    }: {
+      index: number;
+      contentId: number;
+    }) => {
+      if (groupListData === undefined)
+        throw new Error("GroupListData is not found");
+      return saveContentToGroup(
+        groupListData.content[index].name,
+        contentId,
+        tokenData.accessToken
+      );
+    },
+    onSuccess: () => refetchContainedGroupList(),
+  });
+
+  const { mutate: deleteContent } = useMutation({
+    mutationFn: ({
+      index,
+      contentId,
+    }: {
+      index: number;
+      contentId: number;
+    }) => {
+      if (groupListData === undefined)
+        throw new Error("GroupListData is not found");
+      return deleteContentInGroup(
+        groupListData.content[index].name,
+        contentId,
+        tokenData.accessToken
+      );
+    },
+    onSuccess: () => refetchContainedGroupList(),
+  });
+
   const [checkList, setCheckList] = useState<boolean[]>(
     new Array(groupListData?.content.length).fill(false)
   );
-  const [containedGroupList, setContainedGroupList] = useState<boolean[]>([]);
 
   const handleGroupClick = (index: number) => {
     const updatedCheckList = [...checkList];
@@ -36,72 +89,33 @@ const SaveContent = ({
   };
 
   const handleSaveGroupClick = async () => {
-    const queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
-    const contentId = urlParams.get("id");
-
-    const localTokenData = localStorage.getItem("tokenData");
-    if (localTokenData === null) throw new Error("Token is not found");
-    const tokenData = JSON.parse(localTokenData);
-
     let isSaved = false;
     checkList.forEach((v, index) => {
       if (v === true) {
-        if (groupListData === null)
-          throw new Error("GroupListData is not found");
         // 그룹 추가
-        if (containedGroupList[index] === false) {
-          saveContentToGroup(
-            groupListData.content[index].name,
-            contentId,
-            tokenData.accessToken
-          );
+        if (containedGroupList.content[index].contains === false) {
+          saveContent({ index, contentId });
         }
         isSaved = true;
       } else {
-        if (containedGroupList[index] === true) {
-          if (groupListData === null)
-            throw new Error("GroupListData is not found");
-          // 그룹 삭제
-          deleteContentInGroup(
-            groupListData.content[index].name,
-            contentId,
-            tokenData.accessToken
-          );
+        // 그룹 삭제
+        if (containedGroupList.content[index].contains === true) {
+          deleteContent({ index, contentId });
         }
       }
     });
     closeSaveModal(isSaved);
   };
 
   useEffect(() => {
-    const getGroupListData = async () => {
-      const localTokenData = localStorage.getItem("tokenData");
-      if (localTokenData !== null) {
-        const tokenData = JSON.parse(localTokenData);
-        const groupListData = await getGroupList(tokenData.accessToken);
-        setGroupListData(groupListData);
-        setCheckList(new Array(groupListData.content.length).fill(false));
-        getContainedGroupListData();
-      }
-    };
-    const getContainedGroupListData = async () => {
-      const localTokenData = localStorage.getItem("tokenData");
-      if (localTokenData === null) throw new Error("Token is not found");
-      const tokenData = JSON.parse(localTokenData);
-      const containedGroupList = await getContainedGroupList(
-        contentId.toString(),
-        tokenData.accessToken
-      );
-
+    if (containedGroupList) {
       const updatedCheckList = containedGroupList.content.map(
         (group: { name: string; contains: boolean }) => group.contains
       );
-      setContainedGroupList(updatedCheckList);
+
       setCheckList(updatedCheckList);
-    };
-    getGroupListData();
-  }, []);
+    }
+  }, [containedGroupList]);
 
   return (
     <div className={styles.background} onClick={() => closeSaveModal(null)}>

src/app/_utils/api.ts

@@ -276,7 +276,7 @@ const saveContentToGroup_Deprecated = async (
 
 const saveContentToGroup = async (
   groupName: string | null,
-  contentId: string | null,
+  contentId: number | null,
   access_token: string
 ) => {
   fetchUrl.pathname = `/api/bookmark/v1/groups/${groupName}/contents/${contentId}`;
@@ -338,7 +338,7 @@ const deleteGroup = async (groupName: string, access_token: string) => {
 
 const deleteContentInGroup = async (
   groupName: string,
-  contentId: string | null,
+  contentId: number | null,
   access_token: string
 ) => {
   fetchUrl.pathname = `/api/bookmark/v1/groups/${groupName}/contents/${contentId}`;

src/app/groupContents/[id]/page.tsx

@@ -37,11 +37,7 @@ const GroupContents = ({ params }: { params: { id: string } }) => {
     const localTokenData = localStorage.getItem("tokenData");
     if (localTokenData === null) throw new Error("Token is not found");
     const tokenData = JSON.parse(localTokenData);
-    await deleteContentInGroup(
-      params.id,
-      contentId.toString(),
-      tokenData.accessToken
-    );
+    await deleteContentInGroup(params.id, contentId, tokenData.accessToken);
 
     const newContentsData: { content: IContentData[] } =
       await getContentListInGroup(params.id, tokenData.accessToken);

src/app/profile/page.module.css

@@ -110,6 +110,7 @@
   top: 20px;
   border-radius: 5px;
   padding: 5px;
+  z-index: 3;
   background-color: #fff;
   box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
 }