[25.02.27 / TASK-130] Feature - 빠른 조회 기능 구현 및 오류 수정 (#17)

six-standard · web-flow · commit 60920e6a1491 · 2025-02-28T21:54:20.000+09:00
* refactor: DRY 원칙 맞춤

* hotfix: process.env 관련 오류 수정
process.env의 동작 방식으로 인해 구조분해할당이 안 된다고 합니다..

* modify: 타입 단언

* feature: 빠른 조회 기능 구현
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -17,13 +17,13 @@ export const metadata: Metadata = {
   description: '어디서든 편리하게 확인하는 Velog 통계 서비스, Velog Dashboard',
   icons: { icon: '/favicon.png' },
   alternates: {
-    canonical: 'https://velog-dashboard.kro.kr/',
+    canonical: BASE,
   },
   openGraph: {
     siteName: 'Velog Dashboard',
     description:
       '어디서든 편리하게 확인하는 Velog 통계 서비스, Velog Dashboard',
-    url: 'https://velog-dashboard.kro.kr/',
+    url: BASE,
     images: [{ url: '/opengraph-image.png', alt: 'Velog Dashboard' }],
     type: 'website',
   },
diff --git a/src/components/auth-required/main/Section/Graph.tsx b/src/components/auth-required/main/Section/Graph.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { Line } from 'react-chartjs-2';
-
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -13,12 +12,12 @@ import {
   Legend,
 } from 'chart.js';
 import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { COLORS, PATHS, SCREENS } from '@/constants';
 import { Dropdown, Input } from '@/components';
+import { PostDetailValue } from '@/types';
 import { useResponsive } from '@/hooks';
 import { postDetail } from '@/apis';
-import { PostDetailValue } from '@/types';
 
 ChartJS.register(
   CategoryScale,
@@ -45,60 +44,94 @@ interface IProp {
   releasedAt: string;
 }
 
+type ModeType = 'none' | 'weekly' | 'monthly' | 'custom';
+
 export const Graph = ({ id, releasedAt }: IProp) => {
   const width = useResponsive();
 
   const isMBI = width < SCREENS.MBI;
 
-  const [type, setType] = useState({
-    start: '',
-    end: '',
-    type: 'View',
-  });
+  const [type, setType] = useState({ start: '', end: '', type: 'View' });
+  const [mode, setMode] = useState<ModeType>('none');
 
   const { data: datas } = useQuery({
     queryKey: [PATHS.DETAIL, type],
     queryFn: async () => await postDetail(id, type.start, type.end),
-    select: ({ post }) => ({
-      labels: post.map((i) => i.date.split('T')[0]),
-      datasets: [
-        {
-          label: type.type,
-          data: post.map(
-            (i) => i[`daily${type.type}Count` as keyof PostDetailValue],
-          ),
-          ...datasets,
-        },
-      ],
-    }),
+    select: ({ post }) => {
+      post = post.sort(
+        (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
+      );
+      return {
+        labels: post.map((i) => i.date.split('T')[0]),
+        datasets: [
+          {
+            label: type.type,
+            data: post.map(
+              (i) => i[`daily${type.type}Count` as keyof PostDetailValue],
+            ),
+            ...datasets,
+          },
+        ],
+      };
+    },
     enabled: !!type.start && !!type.end,
   });
 
+  useEffect(() => {
+    if (mode === 'none' || mode === 'custom') {
+      setType((prev) => ({ ...prev, start: '', end: '' }));
+    } else {
+      const start = new Date();
+      if (mode === 'monthly') start.setMonth(start.getMonth() - 1);
+      else start.setDate(start.getDate() - 7);
+
+      setType((prev) => ({
+        ...prev,
+        start: start.toISOString().split('T')[0],
+        end: new Date().toISOString().split('T')[0],
+      }));
+    }
+  }, [mode]);
+
   return (
     <div className="w-full bg-BG-SUB flex flex-col items-center px-[25px] pb-[30px] gap-[30px] max-MBI:px-5 max-MBI:pb-10">
       <div className="flex items-center gap-[20px] flex-wrap justify-center max-TBL:gap-[10px]">
-        <Input
-          size={isMBI ? 'SMALL' : 'MEDIUM'}
-          form="SMALL"
-          value={type.start}
-          min={releasedAt.split('T')[0]}
-          onChange={(e) => setType({ ...type, start: e.target.value })}
-          placeholder="시작 날짜"
-          type="date"
-        />
-        <span className="text-ST4 max-TBL:text-T5 text-TEXT-MAIN">~</span>
-        <Input
-          size={isMBI ? 'SMALL' : 'MEDIUM'}
-          form="SMALL"
-          value={type.end}
-          min={type.start ? type.start : releasedAt.split('T')[0]}
-          onChange={(e) => setType({ ...type, end: e.target.value })}
-          placeholder="종료 날짜"
-          type="date"
+        {mode === 'custom' && (
+          <>
+            <Input
+              size={isMBI ? 'SMALL' : 'MEDIUM'}
+              form="SMALL"
+              value={type.start}
+              min={releasedAt.split('T')[0]}
+              onChange={(e) => setType({ ...type, start: e.target.value })}
+              placeholder="시작 날짜"
+              type="date"
+            />
+            <span className="text-ST4 max-TBL:text-T5 text-TEXT-MAIN">~</span>
+            <Input
+              size={isMBI ? 'SMALL' : 'MEDIUM'}
+              form="SMALL"
+              value={type.end}
+              min={type.start ? type.start : releasedAt.split('T')[0]}
+              onChange={(e) => setType({ ...type, end: e.target.value })}
+              placeholder="종료 날짜"
+              type="date"
+            />
+          </>
+        )}
+        <Dropdown
+          onChange={(e) => setMode(e as ModeType)}
+          defaultValue="미선택"
+          options={[
+            ['미선택', 'none'],
+            ['지난 7일', 'weekly'],
+            ['지난 30일', 'monthly'],
+            ['직접선택', 'custom'],
+          ]}
         />
         <Dropdown
           onChange={(e) => setType({ ...type, type: e as string })}
-          defaultValue={'조회수'}
+          defaultValue="조회수"
           options={[
             ['조회수', 'View'],
             ['좋아요', 'Like'],
@@ -120,24 +153,10 @@ export const Graph = ({ id, releasedAt }: IProp) => {
             maintainAspectRatio: false,
             animation: false,
             interaction: { mode: 'nearest', intersect: false },
-            plugins: {
-              legend: {
-                display: false,
-              },
-            },
+            plugins: { legend: { display: false } },
             scales: {
-              x: {
-                axis: 'x',
-                grid: {
-                  color: COLORS.BORDER.SUB,
-                },
-              },
-              y: {
-                axis: 'y',
-                grid: {
-                  color: COLORS.BORDER.SUB,
-                },
-              },
+              x: { axis: 'x', grid: { color: COLORS.BORDER.SUB } },
+              y: { axis: 'y', grid: { color: COLORS.BORDER.SUB } },
             },
           }}
           className="w-[100%_!important] h-[auto_!important] max-h-[300px]"
diff --git a/src/constants/env.constant.ts b/src/constants/env.constant.ts
@@ -1,18 +1,16 @@
 import { EnvNotFoundError } from '../errors/fetch.error';
 
 export const env = (() => {
-  const requiredEnv = process?.env as Record<string, string>;
-
   const env = {
-    NODE_ENV: requiredEnv.NODE_ENV,
-    BASE_URL: requiredEnv.NEXT_PUBLIC_BASE_URL,
-    ABORT_MS: requiredEnv.NEXT_PUBLIC_ABORT_MS,
-    EVENT_LOG: requiredEnv.NEXT_PUBLIC_EVENT_LOG,
-    VELOG_URL: requiredEnv.NEXT_PUBLIC_VELOG_URL,
-    CHANNELTALK_PLUGIN_KEY: requiredEnv.NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY,
-    GA_ID: requiredEnv.NEXT_PUBLIC_GA_ID,
-    SENTRY_AUTH_TOKEN: requiredEnv.NEXT_PUBLIC_SENTRY_AUTH_TOKEN,
-    SENTRY_DSN: requiredEnv.NEXT_PUBLIC_SENTRY_DSN,
+    NODE_ENV: process.env.NODE_ENV,
+    BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
+    ABORT_MS: process.env.NEXT_PUBLIC_ABORT_MS,
+    EVENT_LOG: process.env.NEXT_PUBLIC_EVENT_LOG,
+    VELOG_URL: process.env.NEXT_PUBLIC_VELOG_URL,
+    CHANNELTALK_PLUGIN_KEY: process.env.NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY,
+    GA_ID: process.env.NEXT_PUBLIC_GA_ID,
+    SENTRY_AUTH_TOKEN: process.env.NEXT_PUBLIC_SENTRY_AUTH_TOKEN,
+    SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
   } as const;
 
   if (env.NODE_ENV) {
@@ -21,5 +19,5 @@ export const env = (() => {
     });
   }
 
-  return env;
+  return env as Record<string, string>;
 })();
