Feat: total user count api 연결 및 쿼리 무효화 로직 수정 (#195)

* feat: user count api 연결 및 캐싱 재정비

* refactor: 코드리뷰 반영

* refactor: 코드리뷰 반영

Author: seueooo

app/(main)/_components/home-caption-section/index.tsx

@@ -1,10 +1,16 @@
 import ShakeYMotion from "@/shared/ui/motion/shakeY-motion";
 import * as styles from "./home-caption-section.css";
 
-const HomeCaptionSection = () => {
+interface HomeCaptionSectionProps {
+  totalUserCount: number;
+}
+
+const HomeCaptionSection = ({ totalUserCount }: HomeCaptionSectionProps) => {
   return (
     <ShakeYMotion>
-      <p className={styles.caption}>7명이 이야기를 주고 받는 중</p>
+      <p className={styles.caption}>
+        {totalUserCount}명이 이야기를 주고 받는 중
+      </p>
     </ShakeYMotion>
   );
 };

app/(main)/page.tsx

@@ -7,10 +7,18 @@ import HomeCaptionSection from "./_components/home-caption-section";
 import HomeTitleSection from "./_components/home-title-section";
 
 import FloatingStarsContainer from "@/shared/ui/floating-stars-container";
+import { useQuery } from "@tanstack/react-query";
+import { userQueryOptions } from "@/shared/api/queries/user";
 
 import * as styles from "./home.css";
 
 const Home = () => {
+  const { data } = useQuery(
+    userQueryOptions.totalUserCount()
+  );
+
+  const totalUserCount = data?.result.userTotalCount;
+
   return (
     <div>
       <main>
@@ -26,7 +34,7 @@ const Home = () => {
         />
         <HomeTitleSection />
         <HomeButtonSection />
-        <HomeCaptionSection />
+        <HomeCaptionSection totalUserCount={totalUserCount || 0} />
         <div className={styles.physicsContainer}>
           <Physics
             gravX={0}

app/(sub)/capsule-detail/_components/write-modal/index.tsx

@@ -13,7 +13,7 @@ import type { CapsuleDetailRes } from "@/shared/types/api/capsule";
 import type { WriteLetterReq } from "@/shared/types/api/letter";
 import { formatOpenDateString } from "@/shared/utils/date";
 import Image from "next/image";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useForm, useController } from "react-hook-form";
 import Modal from "../modal";
 import { useImageUpload } from "./_hooks/use-image-upload";

shared/api/mutations/capsule.ts

@@ -17,7 +17,7 @@ export const useCreateCapsule = () => {
       });
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.all() });
+      queryClient.invalidateQueries({ queryKey: ["capsule", "my"] });
     },
   });
 };
@@ -31,9 +31,15 @@ export const useLikeToggle = () => {
       } else {
         await apiClient.put(ENDPOINTS.LIKE_TOGGLE(id));
       }
+      return id;
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.all() });
+    onSuccess: async (id: string) => {
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: capsuleQueryKeys.detail(id),
+        }),
+        queryClient.invalidateQueries({ queryKey: ["capsule", "my"] }),
+      ]);
     },
   });
 };
@@ -44,8 +50,13 @@ export const useLeaveCapsule = () => {
     mutationFn: (id: string) => {
       return apiClient.delete(ENDPOINTS.LEAVE_CAPSULE(id));
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.all() });
+    onSuccess: async (_data, id: string) => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["capsule", "my"] }),
+        queryClient.invalidateQueries({
+          queryKey: capsuleQueryKeys.detail(id),
+        }),
+      ]);
     },
   });
 };

shared/api/queries/capsule.ts

@@ -96,10 +96,10 @@ const getCapsuleLists = (
 const getSearchCapsuleLists = (
   keyword: string,
   page?: number,
-  size?: number,
+  size?: number
 ) => {
   return apiClient.get<CapsuleListsRes>(
-    ENDPOINTS.CAPSULE_SEARCH_LISTS(keyword, page, size),
+    ENDPOINTS.CAPSULE_SEARCH_LISTS(keyword, page, size)
   );
 };
 

shared/api/queries/user.ts

@@ -1,11 +1,13 @@
 import { apiClient } from "@/shared/api/api-client";
 import { ENDPOINTS } from "@/shared/constants/endpoints";
-import type { UserInfo } from "@/shared/types/api/user";
+import type { UserInfo, TotalUserCountRes } from "@/shared/types/api/user";
 import { queryOptions } from "@tanstack/react-query";
+import { CACHE_TIME } from "@/shared/constants/api";
 
 const userQueryKeys = {
   all: () => ["user"],
   userInfo: () => [...userQueryKeys.all(), "userInfo"],
+  totalUserCount: () => [...userQueryKeys.all(), "totalUserCount"],
 } as const;
 
 export const userQueryOptions = {
@@ -20,4 +22,17 @@ export const userQueryOptions = {
       },
       ...options,
     }),
+
+  totalUserCount: (options?: {
+    enabled?: boolean;
+    onError?: (error: Error) => void;
+  }) =>
+    queryOptions({
+      queryKey: userQueryKeys.totalUserCount(),
+      queryFn: () => {
+        return apiClient.get<TotalUserCountRes>(ENDPOINTS.TOTAL_USER_COUNT);
+      },
+      ...options,
+      staleTime: CACHE_TIME.LONG,
+    }),
 };

shared/constants/api.ts

@@ -7,3 +7,9 @@ export const HTTP_STATUS_CODE = {
   CONFLICT: 409,
   INTERNAL_SERVER_ERROR: 500,
 } as const;
+
+export const CACHE_TIME = {
+  SHORT: 1000 * 60 * 3,
+  MEDIUM: 1000 * 60 * 5,
+  LONG: 1000 * 60 * 10,
+} as const;

shared/constants/endpoints.ts

@@ -14,7 +14,9 @@ export const ENDPOINTS = {
       type === "all" ? "" : `&type=${type}`
     }`,
   CAPSULE_SEARCH_LISTS: (keyword: string, page = 0, size = 20) =>
-    `api/v1/capsules/search?keyword=${encodeURIComponent(keyword)}&page=${page}&size=${size}`,
+    `api/v1/capsules/search?keyword=${encodeURIComponent(
+      keyword
+    )}&page=${page}&size=${size}`,
 
   LEAVE_CAPSULE: (id: string) => `api/v1/capsules/${id}/leave`,
   LIKE_TOGGLE: (id: string) => `api/v1/capsules/${id}/like`,
@@ -26,7 +28,9 @@ export const ENDPOINTS = {
   ) =>
     `api/v1/capsules/my?page=${page}&size=${size}&sort=${sort}&filter=${filter}`,
 
+  // 유저
   USER_INFO: "api/v1/users/my-info",
+  TOTAL_USER_COUNT: "api/v1/users/total-count",
 
   // 편지
   WRITE_LETTER: "api/v1/letters",

shared/types/api/user.ts

@@ -5,3 +5,9 @@ export interface UserInfo {
     email: string;
   };
 }
+
+export interface TotalUserCountRes {
+  result: {
+    userTotalCount: number;
+  };
+}