Bug: 북마크 업데이트 시 쿼리 데이터 업데이트

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

@@ -10,19 +10,24 @@ import NewGroupModal from "@/app/_components/NewGroupModal/NewGroupModal";
 import ShareModal from "@/app/_components/ShareModal/ShareModal";
 import LoginModal from "@/app/_components/LoginModal/LoginModal";
 import CheckToken from "../../../_utils/CheckToken";
+import queryClient from "@/app/_utils/queryClient";
+import useParams from "@/app/_hooks/useParams";
+import { InfiniteData } from "@tanstack/react-query";
+import { IContentData } from "@/app";
 
 const FloatingBtn = ({
   isSaved,
   contentId,
 }: {
   isSaved: boolean;
-  contentId: string;
+  contentId: number;
 }) => {
   const [isLoginModalOpened, setIsLoginModalOpened] = useState(false);
   const [isSaveModalOpened, setIsSaveModalOpened] = useState(false);
   const [isShareModalOpened, setIsShareModalOpened] = useState(false);
   const [isNewGroupModalOpened, setIsNewGroupModalOpened] = useState(false);
   const [isSavedContent, setIsSavedContent] = useState(isSaved);
+  const searchParams = useParams("categories").getParamsToString();
 
   const handleSaveBtnClick = async () => {
     const isLogin = await CheckToken();
@@ -36,8 +41,38 @@ const FloatingBtn = ({
     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 객체 반환
+        }
+      );
     } 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 객체 반환
+        }
+      );
     }
   };
 

src/app/_components/SaveContentModal/SaveContentModal.tsx

@@ -19,7 +19,7 @@ const SaveContent = ({
 }: {
   closeSaveModal: (isSaved: boolean | null) => void;
   openNewGroupModal: () => void;
-  contentId: string;
+  contentId: number;
 }) => {
   const [groupListData, setGroupListData] = useState<{
     content: IGroup[];

src/app/_components/ShareModal/ShareModal.tsx

@@ -9,7 +9,7 @@ const ShareModal = ({
   contentId,
 }: {
   closeShareModal: () => void;
-  contentId: string;
+  contentId: number;
 }) => {
   // const [href, setHref] = useState("");
   const [isCopied, setIsCopied] = useState(false);

src/app/_hooks/useReactQuery.tsx

@@ -1,23 +1,12 @@
 "use client";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { useEffect } from "react";
 import analytics from "../_utils/firebase";
+import queryClient from "../_utils/queryClient";
 
 export default function ReactQueryProvider({
   children,
 }: React.PropsWithChildren) {
-  const [queryClient] = useState(
-    () =>
-      new QueryClient({
-        defaultOptions: {
-          queries: {
-            staleTime: 60 * 1000,
-            throwOnError: true,
-            retry: 1,
-          },
-        },
-      })
-  );
   useEffect(() => {
     analytics();
   }, []);

src/app/_utils/queryClient.ts

@@ -0,0 +1,14 @@
+import { QueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60 * 1000,
+      throwOnError: true,
+      retry: 1,
+    },
+  },
+});
+
+export default queryClient;

src/app/index.ts

@@ -9,6 +9,7 @@ export interface IContentData {
   providerTitle: string;
   providerUrl: string;
   providerIconUrl: string;
+  bookmarked: boolean;
 }
 export interface ITokenData {
   userId: string;