[25. 05. 26 / TASK-175] Feature - 전체 통계 그래프 퍼블리싱 (#38)

Author: six-standard

package.json

@@ -27,6 +27,7 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-query": "^5.69.0",
     "chart.js": "^4.4.7",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "holy-loader": "^2.3.13",
     "next": "14.2.18",
     "qrcode.react": "^4.2.0",

pnpm-lock.yaml

@@ -11,6 +11,7 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { COLORS, PATHS, SCREENS } from '@/constants';
@@ -19,8 +20,18 @@ import { PostDetailValue } from '@/types';
 import { useResponsive } from '@/hooks';
 import { postDetail } from '@/apis';
 import { convertDateToKST } from '@/utils/dateUtil';
+import { graphOptions } from '@/constants/graph.constant';
 
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels,
+);
 
 const datasets = {
   backgroundColor: COLORS.TEXT.MAIN,
@@ -132,17 +143,7 @@ export const Graph = ({ id, releasedAt }: IProp) => {
         )}
         <Line
           data={datas || defaultData}
-          options={{
-            responsive: true,
-            maintainAspectRatio: false,
-            animation: false,
-            interaction: { mode: 'nearest', intersect: false },
-            plugins: { legend: { display: false } },
-            scales: {
-              x: { axis: 'x', grid: { color: COLORS.BORDER.SUB }, ticks: { precision: 0 } },
-              y: { axis: 'y', grid: { color: COLORS.BORDER.SUB }, ticks: { precision: 0 } },
-            },
-          }}
+          options={graphOptions}
           className="w-[100%_!important] h-[auto_!important] max-h-[300px]"
         />
       </div>

src/app/(auth-required)/main/components/Section/Graph.tsx

@@ -1,6 +1,29 @@
 import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Modal as Layout } from '@/components';
 import { COLORS } from '@/constants';
+import { graphOptions } from '@/constants/graph.constant';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels,
+);
 
 export const table = {
   totalViews: '전체 조회수 통계',
@@ -34,20 +57,13 @@ const defaultData = {
 
 export const Modal = ({ name }: { name: keyof typeof table }) => {
   return (
-    <Layout title={table[name]} className="w-[1100px] h-fit max-TBL:w-[800px] transition-all">
+    <Layout
+      title={table[name]}
+      className="w-[1000px] max-w-full max-TBL:w-[700px] max-MBI:w-full transition-all overflow-hidden"
+    >
       <Line
         data={defaultData}
-        options={{
-          responsive: true,
-          maintainAspectRatio: false,
-          animation: false,
-          interaction: { mode: 'nearest', intersect: false },
-          plugins: { legend: { display: false } },
-          scales: {
-            x: { axis: 'x', grid: { color: COLORS.BORDER.SUB }, ticks: { precision: 0 } },
-            y: { axis: 'y', grid: { color: COLORS.BORDER.SUB }, ticks: { precision: 0 } },
-          },
-        }}
+        options={graphOptions}
         className="w-full h-[auto_!important] max-h-[300px]"
       />
     </Layout>

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

@@ -1,7 +1,6 @@
-// import { useModal } from '@/hooks';
+import { useModal } from '@/hooks';
 import { parseNumber } from '@/utils/numberUtil';
-// import { Modal, table } from './Modal';
-import { table } from './Modal';
+import { Modal, table } from './Modal';
 
 interface IProp {
   title: string;
@@ -15,13 +14,12 @@ const afterContent =
   'after:text-PRIMARY-SUB after:content-[attr(data-increasement)_"↑"] after:ml-2 after:text-ST3 max-TBL:after:text-ST4 transition-all';
 
 export const SidebarContent = ({ title, content, increasement, prefix = '개', id }: IProp) => {
-  // const { open } = useModal();
+  const { open } = useModal();
 
   return (
     <div
-      // onClick={() => open(<Modal name={id} />)}
-      // className="flex flex-col items-center justify-center gap-[10px] bg-BG-SUB w-[375px] hover:bg-BG-ALT cursor-pointer transition-all duration-300 p-4 rounded-[4px] h-full max-TBL:w-[280px]"
-      className="flex flex-col items-center justify-center gap-[10px] bg-BG-SUB w-[375px] duration-300 p-4 rounded-[4px] h-full max-TBL:w-[280px]"
+      onClick={() => open(<Modal name={id} />)}
+      className="flex flex-col items-center justify-center gap-[10px] bg-BG-SUB w-[375px] hover:bg-BG-ALT cursor-pointer transition-all duration-300 p-4 rounded-[4px] h-full max-TBL:w-[280px]"
     >
       <span className="text-TEXT-ALT text-T4 transition-all max-TBL:text-T5">{title}</span>
       <span
@@ -31,7 +29,7 @@ export const SidebarContent = ({ title, content, increasement, prefix = '개', i
       >
         {parseNumber(content) + prefix}
       </span>
-      {/* <span className="text-TEXT-ALT text-ST5">클릭해서 통계 그래프 보기</span> */}
+      <span className="text-TEXT-ALT text-ST5">클릭해서 통계 그래프 보기</span>
     </div>
   );
 };

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

@@ -0,0 +1,40 @@
+import { COLORS } from './colors.constant';
+
+export const graphOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: false,
+  interaction: { mode: 'nearest', intersect: false },
+  layout: {
+    padding: {
+      top: 30,
+      bottom: 10,
+      left: 10,
+      right: 10,
+    },
+  },
+  plugins: {
+    legend: { display: false },
+    tooltip: { enabled: false },
+    datalabels: {
+      display: true,
+      color: COLORS.TEXT.MAIN,
+      backgroundColor: COLORS.BG.MAIN,
+      borderColor: COLORS.BORDER.SUB,
+      borderWidth: 1,
+      borderRadius: 4,
+      padding: 4,
+      font: {
+        size: 12,
+        weight: 'normal',
+      },
+      formatter: (value: number) => value.toString(),
+      anchor: 'end',
+      align: 'top',
+    },
+  },
+  scales: {
+    x: { axis: 'x', grid: { color: COLORS.BORDER.SUB }, ticks: { precision: 0 } },
+    y: { axis: 'y', grid: { color: COLORS.BORDER.SUB }, ticks: { precision: 0 } },
+  },
+} as const;

src/constants/graph.constant.ts

@@ -4,4 +4,5 @@ export * from './colors.constant';
 export * from './sizes.constant';
 export * from './paths.constant';
 export * from './fonts.constant';
+export * from './graph.constant';
 export * from './env.constant';