[25.06.03 / TASK-197] Feature - 총 통계 그래프 API 연동 (#40)

* feature: 임시 퍼블리싱 완료
* refactor: 호버 없이도 정보가 뜨도록 수정
* refactor: 반복된 객체 분리
* modify: 모달 주석 제거
* modify: 총 통계 API 연동
* refactor: id 값 변경
추가로 필요없는 id prop 제거
* refactor: 그래프 일부 영역이 잘리는 문제 해결
* refactor: 타입 변경
* refactor: 타입 정리
다만 네이밍이나 위치 등이 조금 애매하여 나중에 전체적인 리팩토링이 필요할 것으로 보임

Author: six-standard

src/apis/dashboard.request.ts

@@ -1,5 +1,6 @@
-import { PostDetailDto, PostListDto, PostSummaryDto } from '@/types';
-import { PATHS } from '@/constants';
+import { PostDetailDto, PostListDto, PostSummaryDto, TotalStatsDto } from '@/types';
+import { PATHS, SidebarIdType } from '@/constants';
+
 import { instance } from './instance.request';
 
 type SortType = {
@@ -18,3 +19,6 @@ export const postSummary = async () => await instance<null, PostSummaryDto>(PATH
 
 export const postDetail = async (path: string, start: string, end: string) =>
   await instance<null, PostDetailDto>(`${PATHS.DETAIL}/${path}?start=${start}&end=${end}`);
+
+export const totalStats = async (type: SidebarIdType, period: number = 7) =>
+  await instance<null, TotalStatsDto>(`${PATHS.TOTALSTATS}?period=${period}&type=${type}`);

src/app/(auth-required)/main/components/Summary/BarContent.tsx

@@ -5,20 +5,18 @@ interface IProp {
   content: number;
   increasement?: number;
   prefix?: string;
-  id?: string;
 }
 
 const afterContent =
   'before:text-PRIMARY-SUB before:content-[attr(data-increasement)_"↑"] before:mr-2 before:text-T5';
 
-export const BarContent = ({ title, content, increasement, prefix = '개', id }: IProp) => {
+export const BarContent = ({ title, content, increasement, prefix = '개' }: IProp) => {
   return (
     <div className="w-full flex justify-between items-center">
       <span className="text-ST5 text-TEXT-ALT">{title}</span>
       <span
         className={`flex items-center text-TEXT-MAIN text-T4 ${increasement ? afterContent : ''}`}
         data-increasement={parseNumber(increasement ? increasement : 0)}
-        id={id}
       >
         {parseNumber(content) + prefix}
       </span>

src/app/(auth-required)/main/components/Summary/Modal.tsx

@@ -10,9 +10,12 @@ import {
   Legend,
 } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { useQuery } from '@tanstack/react-query';
 import { Modal as Layout } from '@/components';
-import { COLORS } from '@/constants';
+import { COLORS, PATHS, sidebarId, SidebarIdType } from '@/constants';
 import { graphOptions } from '@/constants/graph.constant';
+import { totalStats } from '@/apis/dashboard.request';
+import { convertDateToKST } from '@/utils/dateUtil';
 
 ChartJS.register(
   CategoryScale,
@@ -25,47 +28,45 @@ ChartJS.register(
   ChartDataLabels,
 );
 
-export const table = {
-  totalViews: '전체 조회수 통계',
-  totalLikes: '전체 좋아요 통계',
-  totalPosts: '총 게시글 통계',
-};
-
 const datasets = {
   backgroundColor: COLORS.TEXT.MAIN,
   borderColor: COLORS.PRIMARY.MAIN,
 };
 
 const defaultData = {
-  labels: [
-    '2025-03-01',
-    '2025-03-02',
-    '2025-03-03',
-    '2025-03-04',
-    '2025-03-05',
-    '2025-03-06',
-    '2025-03-07',
-  ],
+  labels: [],
   datasets: [
     {
-      label: 'Temp',
-      data: [10, 11, 14, 23, 36, 50, 79],
+      label: 'default',
+      data: [],
       ...datasets,
     },
   ],
 };
 
-export const Modal = ({ name }: { name: keyof typeof table }) => {
+export const Modal = ({ name }: { name: SidebarIdType }) => {
+  const { data } = useQuery({
+    queryKey: [PATHS.TOTALSTATS, name],
+    queryFn: async () => await totalStats(name),
+    select: (res) => ({
+      labels: res.map((i) => convertDateToKST(i.date)?.short),
+      datasets: [{ label: name, data: res.map((i) => i.value), ...datasets }],
+    }),
+  });
+
   return (
     <Layout
-      title={table[name]}
-      className="w-[1000px] max-w-full max-TBL:w-[700px] max-MBI:w-full transition-all overflow-hidden"
+      title={sidebarId[name]}
+      className="w-[1000px] max-w-full gap-1 max-TBL:w-[700px] max-MBI:w-full transition-all overflow-hidden"
     >
       <Line
-        data={defaultData}
+        data={data || defaultData}
         options={graphOptions}
         className="w-full h-[auto_!important] max-h-[300px]"
       />
+      <span className="text-ST5 self-end text-PRIMARY-MAIN">
+        * 7일 전까지의 데이터만 표시됩니다
+      </span>
     </Layout>
   );
 };

src/app/(auth-required)/main/components/Summary/SidebarContent.tsx

@@ -1,13 +1,14 @@
 import { useModal } from '@/hooks';
 import { parseNumber } from '@/utils/numberUtil';
-import { Modal, table } from './Modal';
+import { SidebarIdType } from '@/constants';
+import { Modal } from './Modal';
 
 interface IProp {
   title: string;
   content: number;
   increasement?: number;
   prefix?: string;
-  id: keyof typeof table;
+  id: SidebarIdType;
 }
 
 const afterContent =

src/app/(auth-required)/main/components/Summary/index.tsx

@@ -20,15 +20,15 @@ export const Summary = ({ totalPostCount, stats }: PostSummaryDto) => {
           content={stats?.totalViews}
           prefix="회"
           increasement={stats?.totalViews - stats?.yesterdayViews}
-          id="totalViews"
+          id="view"
         />
         <SidebarContent
           title="전체 좋아요 수"
           content={stats?.totalLikes}
           increasement={stats?.totalLikes - stats?.yesterdayLikes}
-          id="totalLikes"
+          id="like"
         />
-        <SidebarContent title="총 게시글 수" content={totalPostCount} id="totalPosts" />
+        <SidebarContent title="총 게시글 수" content={totalPostCount} id="post" />
       </aside>
       <section
         className={`flex flex-col w-full px-5 bg-BG-SUB rounded-[4px] cursor-pointer MBI:hidden`}
@@ -45,15 +45,13 @@ export const Summary = ({ totalPostCount, stats }: PostSummaryDto) => {
               content={stats?.totalViews}
               prefix="회"
               increasement={stats?.totalViews - stats?.yesterdayViews}
-              id="totalViews"
             />
             <BarContent
               title="전체 좋아요 수"
               content={stats?.totalLikes}
               increasement={stats?.totalLikes - stats?.yesterdayLikes}
-              id="totalLikes"
             />
-            <BarContent title="총 게시글 수" content={totalPostCount} id="totalPosts" />
+            <BarContent title="총 게시글 수" content={totalPostCount} />
           </div>
         )}
       </section>

src/constants/graph.constant.ts

@@ -7,10 +7,10 @@ export const graphOptions = {
   interaction: { mode: 'nearest', intersect: false },
   layout: {
     padding: {
-      top: 30,
+      top: 40,
       bottom: 10,
-      left: 10,
-      right: 10,
+      left: 15,
+      right: 15,
     },
   },
   plugins: {

src/constants/index.ts

@@ -1,4 +1,5 @@
 export * from './searchParams.constant';
+export * from './sidebar.constant';
 export * from './screens.constant';
 export * from './colors.constant';
 export * from './sizes.constant';

src/constants/paths.constant.ts

@@ -10,5 +10,6 @@ export const PATHS = {
   ME: '/me',
   LOGOUT: '/logout',
   DETAIL: '/post',
+  TOTALSTATS: '/total-stats',
   LEADERBOARD: '/leaderboard',
 };

src/constants/sidebar.constant.ts

@@ -0,0 +1,7 @@
+export const sidebarId = {
+  view: '전체 조회수 통계',
+  like: '전체 좋아요 통계',
+  post: '총 게시글 통계',
+};
+
+export type SidebarIdType = keyof typeof sidebarId;

src/types/dashboard.type.ts

@@ -35,3 +35,5 @@ export type PostDetailValue = {
 export type PostDetailDto = {
   post: PostDetailValue[];
 };
+
+export type TotalStatsDto = Array<{ date: string; value: number }>;