게시글 좋아요시 낙관적 업데이트 적용 (12.06)

seoko97 · Dec 5, 2023 · 1c6b79e · 1c6b79e
2 parents d20c29a + 368237c
commit 1c6b79e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -26,11 +26,12 @@ const getToken = async (tokeName: string) => {
 const setForwardedForByServer = async (config: AxiosRequestConfig) => {
   if (!isServer || !config.headers) return;
 
-  config.headers["x-forwarded-for"] = (await import("next/headers"))
-    .headers()
-    .get("x-forwarded-for");
+  const ips = (await import("next/headers")).headers().get("x-forwarded-for")?.split(", ") ?? [];
 
-  config.headers["x-real-ip"] = (await import("next/headers")).headers().get("x-real-ip");
+  if (ips.length === 0) return;
+
+  config.headers["x-forwarded-for"] = ips[0];
+  config.headers["x-real-ip"] = ips[0];
 };
 
 api.interceptors.request.use(async (config) => {

diff --git a/src/hooks/query/post.ts b/src/hooks/query/post.ts
@@ -101,18 +101,34 @@ const useLikePostMutation = (nid: number) => {
     onMutate: () => {
       queryClient.cancelQueries(["post", nid]);
 
-      const prev = queryClient.getQueryData<IPost>(["post", nid]);
+      const post = queryClient.getQueryData<IPost>(["post", nid]);
+      const posts = queryClient.getQueryData<IPost[]>(["posts"]);
 
       queryClient.setQueryData<IPost | undefined>(["post", nid], (prev) => {
         if (!prev) return prev;
 
         return { ...prev, isLiked: true, likeCount: prev.likeCount + 1 };
       });
 
-      return prev;
+      queryClient.setQueryData<IPost[] | undefined>(["posts"], (prev) => {
+        if (!prev) return prev;
+
+        return prev.map((post) => {
+          if (post.nid !== nid) return post;
+
+          return { ...post, isLiked: true, likeCount: post.likeCount + 1 };
+        });
+      });
+
+      return { post, posts };
     },
     onError: (err, _, prev) => {
-      queryClient.setQueryData<IPost | undefined>(["post", nid], prev);
+      if (!prev) return;
+
+      const { post, posts } = prev;
+
+      queryClient.setQueryData<IPost | undefined>(["post", nid], post);
+      queryClient.setQueryData<IPost[] | undefined>(["posts"], posts);
     },
     onSettled: () => {
       queryClient.invalidateQueries(["post", nid]);
@@ -128,18 +144,34 @@ const useUnlikePostMutation = (nid: number) => {
     onMutate: () => {
       queryClient.cancelQueries(["post", nid]);
 
-      const prev = queryClient.getQueryData<IPost>(["post", nid]);
+      const post = queryClient.getQueryData<IPost>(["post", nid]);
+      const posts = queryClient.getQueryData<IPost[]>(["posts"]);
 
       queryClient.setQueryData<IPost | undefined>(["post", nid], (prev) => {
         if (!prev) return prev;
 
         return { ...prev, isLiked: false, likeCount: prev.likeCount - 1 };
       });
 
-      return prev;
+      queryClient.setQueryData<IPost[] | undefined>(["posts"], (prev) => {
+        if (!prev) return prev;
+
+        return prev.map((post) => {
+          if (post.nid !== nid) return post;
+
+          return { ...post, isLiked: false, likeCount: post.likeCount - 1 };
+        });
+      });
+
+      return { post, posts };
     },
     onError: (err, _, prev) => {
-      queryClient.setQueryData<IPost | undefined>(["post", nid], prev);
+      if (!prev) return;
+
+      const { post, posts } = prev;
+
+      queryClient.setQueryData<IPost | undefined>(["post", nid], post);
+      queryClient.setQueryData<IPost[] | undefined>(["posts"], posts);
     },
     onSettled: () => {
       queryClient.invalidateQueries(["post", nid]);

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -74,7 +74,7 @@
   body {
     overflow: overlay;
 
-    @apply m-0 bg-primary text-base transition-[background-color];
+    @apply m-0 bg-primary text-base;
   }
 
   a {
@@ -119,11 +119,11 @@
 
   ::-webkit-scrollbar-track {
     box-shadow: none;
-    background-color: none;
+    background: none;
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: theme(textColor.secondary);
+    background: theme(textColor.secondary);
 
     @apply rounded-lg;
   }