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

* refactor: DRY 원칙 맞춤 * hotfix: process.env 관련 오류 수정 process.env의 동작 방식으로 인해 구조분해할당이 안 된다고 합니다.. * modify: 타입 단언 * feature: 빠른 조회 기능 구현

Author: six-standard

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',
  },

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]"

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>;
 })();