Graph components bracnh (#69)

* feat : 주차를 구하는 util 생성

* feat : title 생성

* chore : title 수정

* feat : api 호출 param 추가

* env : rechart 설치

* fix : 절대경로를 스토북이 인지 못하는 오류 수정

* env : storybook 에러 수정

* feat : chart 컴포넌트

* refactor : 재사용성을 위해 INFO 컴포넌트로 분리

* feat : 사용자의 현재 주차를 구하는 유틸

* chore : 경로 변경 및 코드 위치 변경

* feat : 평균 감정을 불러오는 hook  생성

* feat : api를 불러와 연결

* env : date-fns 의존성 추가

* feat : char 필터링 구현

* chore : 스토리북 경로 수정

* env : 의존성 에러 제거

* chore : 차트 스타일링 수정

.storybook/main.ts

@@ -1,4 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
+import path from 'path';
+import React from 'react';
 
 const config: StorybookConfig = {
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -14,6 +16,18 @@ const config: StorybookConfig = {
         name: '@storybook/react-webpack5',
         options: {}
     },
-    staticDirs: ['../public']
+    staticDirs: ['../public'], // 정적 파일 디렉토리
+    webpackFinal: async (config) => {
+        // Webpack alias 설정 추가
+        config.resolve = config.resolve || {};
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            '@': path.resolve(__dirname, '../src'), // '@'를 src 폴더로 매핑
+            '@/components': path.resolve(__dirname, '../src/components') // '@/components'를 src/components로 매핑
+        };
+
+        return config;
+    }
 };
+
 export default config;

.storybook/preview.tsx

@@ -0,0 +1,25 @@
+import type { Preview } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+
+const queryClient = new QueryClient();
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i
+            }
+        }
+    },
+    decorators: [
+        (Story) => (
+            <QueryClientProvider client={queryClient}>
+                <Story />
+            </QueryClientProvider>
+        )
+    ]
+};
+
+export default preview;

eslint.config.mjs

@@ -11,7 +11,8 @@ export default [
             '**/*stories*',
             '**/webpack*.js',
             '**/webpack/**/*.js',
-            'src/stories/**'
+            'src/stories/**',
+            '.storybook'
         ]
     },
     ...compat.config({
@@ -45,15 +46,8 @@ export default [
                 1,
                 { extensions: ['.jsx', '.tsx'] }
             ],
-            'import/extensions': [
-                'error',
-                'ignorePackages',
-                { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' }
-            ],
-            'import/no-extraneous-dependencies': [
-                'error',
-                { devDependencies: true }
-            ],
+            'import/extensions': 'off',
+            'import/no-extraneous-dependencies': 'off',
             'react/function-component-definition': [
                 'error',
                 {

package.json

@@ -4,13 +4,15 @@
         "@tanstack/react-query-devtools": "^5.59.0",
         "axios": "^1.7.7",
         "axios-mock-adapter": "^2.1.0",
+        "date-fns": "^4.1.0",
         "husky": "^9.1.6",
         "init": "^0.1.2",
         "jest": "^29.7.0",
         "moment": "^2.30.1",
         "react": "^18.3.1",
         "react-calendar": "^5.1.0",
         "react-dom": "^18.3.1",
+        "recharts": "^2.13.0",
         "storybook": "^8.3.0",
         "styled-components": "^6.1.13",
         "webpack-merge": "^6.0.1",

src/entities/chart/lib/calculateWeek.ts

@@ -0,0 +1,7 @@
+// 주차를 계산하는 유틸 함수
+export const calculateWeekOfYear = (date: Date): number => {
+    const startOfYear = new Date(date.getFullYear(), 0, 1);
+    const pastDaysOfYear =
+        (date.getTime() - startOfYear.getTime()) / (24 * 60 * 60 * 1000);
+    return Math.ceil((pastDaysOfYear + startOfYear.getDay() + 1) / 7);
+};

src/entities/chart/lib/isDailyEmotion.ts

@@ -0,0 +1,12 @@
+import {
+    DailyEmotionType,
+    WeeklyEmotionSummaryType
+} from '@/shared/model/moodTypes';
+
+const isDailyEmotion = (
+    data: DailyEmotionType[] | WeeklyEmotionSummaryType[]
+): data is DailyEmotionType[] => {
+    return (data as DailyEmotionType[])[0]?.day !== undefined;
+};
+
+export default isDailyEmotion;

src/entities/chart/ui/Chart.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Chart from './Chart';
+
+const meta: Meta<typeof Chart> = {
+  component: Chart,
+  title: 'entities/UI/CHART',
+  tags: ['autodocs'],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Chart>;
+
+const dailyEmotionData = [
+  { day: 'Mon' as const, mood: null },
+  { day: 'Tue' as const, mood: '나쁨' },
+  { day: 'Wed' as const, mood: '나쁨' },
+  { day: 'Thu' as const, mood: null },
+  { day: 'Fri' as const, mood: null },
+  { day: 'Sat' as const, mood: null },
+  { day: 'Sun' as const, mood: null },
+];
+
+
+export const Default: Story = {
+  args: {
+    data: dailyEmotionData,
+  },
+};

src/entities/chart/ui/Chart.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+    DailyEmotionType,
+    WeeklyEmotionSummaryType
+} from '@/shared/model/moodTypes';
+
+import {
+    LineChart,
+    Line,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    ResponsiveContainer
+} from 'recharts';
+import isDailyEmotion from '../lib/isDailyEmotion';
+
+const emotions = ['매우 나쁨', '나쁨', '보통', '좋음', '매우 좋음'];
+
+interface ChartProps {
+    data: DailyEmotionType[] | WeeklyEmotionSummaryType[];
+}
+
+const Chart = ({ data }: ChartProps) => {
+    return (
+        <ResponsiveContainer width="100%" height={400}>
+            <LineChart
+                data={data}
+                margin={{ top: 20, right: 10, left: 10, bottom: 20 }}
+            >
+                <CartesianGrid vertical={false} />
+                {isDailyEmotion(data) ? (
+                    <>
+                        <XAxis
+                            dataKey="day"
+                            angle={0}
+                            dy={10}
+                            height={50}
+                            axisLine={false}
+                        />
+                        <YAxis
+                            type="category"
+                            dataKey="mood"
+                            tickLine={false}
+                            axisLine={false}
+                            domain={emotions}
+                            ticks={emotions}
+                            allowDuplicatedCategory={false}
+                        />
+                        <Line
+                            type="monotone"
+                            dataKey="mood"
+                            stroke="#FF480E"
+                            activeDot={{ r: 8 }}
+                            connectNulls
+                        />
+                    </>
+                ) : (
+                    <>
+                        <XAxis
+                            dataKey="week"
+                            angle={0}
+                            dy={10}
+                            height={50}
+                            axisLine={false}
+                        />
+                        <YAxis
+                            type="category"
+                            dataKey="mostFrequentEmotion"
+                            tickLine={false}
+                            axisLine={false}
+                            domain={emotions}
+                            ticks={emotions}
+                            allowDuplicatedCategory={false}
+                        />
+                        <Line
+                            type="monotone"
+                            dataKey="mostFrequentEmotion"
+                            stroke="#FF480E"
+                            activeDot={{ r: 8 }}
+                            connectNulls
+                        />
+                    </>
+                )}
+                <Tooltip
+                    formatter={(value) =>
+                        value === '정보 없음' || value === null
+                            ? '정보 없음'
+                            : value
+                    }
+                />
+            </LineChart>
+        </ResponsiveContainer>
+    );
+};
+
+export default Chart;

src/entities/dataSldier/DateSlider.stories.tsx

@@ -0,0 +1,27 @@
+// Storybook configuration for DateSlider
+import type { Meta, StoryObj } from '@storybook/react';
+import DateSlider from "./DateSlider"
+const meta: Meta<typeof DateSlider> = {
+    component: DateSlider,
+    title: 'entities/ui/DateSlider',
+    tags: ['autodocs'],
+    argTypes: {
+        year: { control: 'number', defaultValue: 2023 },
+        month: { control: 'number', defaultValue: 10 },
+        week: { control: 'number', defaultValue: 1 },
+        viewMode: { control: 'radio', options: ['week', 'month'], defaultValue: 'week' },
+        onDateChange: { action: 'dateChanged' },
+    },
+};
+export default meta;
+
+type Story = StoryObj<typeof DateSlider>;
+
+export const Default: Story = {
+    args: {
+        year: 2023,
+        month: 10,
+        week: 1,
+        viewMode: 'week',
+    },
+};

src/entities/dataSldier/DateSlider.styled.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const MonthWeekSelectorWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+`;
+
+export const ArrowButton = styled.button`
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+
+    &:focus {
+        outline: none;
+    }
+`;
+
+export const Display = styled.span`
+    margin: 0 140px;
+    font-size: 20px;
+`;
+
+export const SliderInfoContainer = styled.div`
+    margin-bottom: 100px;
+`;