diff --git a/src/user/ui-profile/Calendar.tsx b/src/user/ui-profile/Calendar.tsx deleted file mode 100644 index 4ce6d06a..00000000 --- a/src/user/ui-profile/Calendar.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import React, { useState } from 'react'; -import Image from 'next/image'; -import { subMonths } from 'date-fns'; -import { EmotionLog, EmotionTypeEN } from '@/types/emotion'; -import useCalendar from '../../hooks/useCalendar'; -import { DAY_LIST, DATE_MONTH_FIXER, iconPaths } from '../utill/constants'; -import CalendarHeader from './CalendarHeader'; - -interface CalendarProps { - currentDate: Date; // 현재 날짜 - setCurrentDate: React.Dispatch>; // 현재 날짜를 설정하는 함수 - monthlyEmotionLogs: EmotionLog[]; -} - -export default function Calendar({ currentDate, setCurrentDate, monthlyEmotionLogs }: CalendarProps) { - // 캘린더 함수 호출 - const { weekCalendarList } = useCalendar(currentDate); - // 감정 필터 - const [selectedEmotion, setSelectedEmotion] = useState(null); - - // 달력에 출력할 수 있게 매핑 - const emotionMap: Record = Array.isArray(monthlyEmotionLogs) - ? monthlyEmotionLogs.reduce>((acc, log) => { - const date = new Date(log.createdAt); - const dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`; - acc[dateString] = log.emotion as EmotionTypeEN; - return acc; - }, {}) - : {}; - - // 이전 달 클릭 - const handlePrevMonth = () => setCurrentDate((prevDate) => subMonths(prevDate, DATE_MONTH_FIXER)); - // 다음 달 클릭 - const handleNextMonth = () => setCurrentDate((prevDate) => subMonths(prevDate, -DATE_MONTH_FIXER)); - - // 감정 필터 - const handleEmotionSelect = (emotion: EmotionTypeEN) => { - // 현재 선택된 감정과 같으면 초기화 - if (selectedEmotion === emotion) { - setSelectedEmotion(null); - } else { - setSelectedEmotion(emotion); - } - }; - - // 필터링된 감정 맵 생성 - const filteredEmotionMap = selectedEmotion ? Object.fromEntries(Object.entries(emotionMap).filter(([, value]) => value === selectedEmotion)) : emotionMap; - - return ( -
- {/* 캘린더 헤더 */} - - {/* 캘린더 */} -
-
- {DAY_LIST.map((day) => ( -
- {day} -
- ))} -
- {weekCalendarList.map((week, weekIndex) => ( - // TODO: index 값 Lint error. 임시로 주석 사용. 추후 수정 예정 - // eslint-disable-next-line react/no-array-index-key -
- {week.map((day, dayIndex) => { - // 현재 날짜와 비교 - const isToday = day === currentDate.getDate() && currentDate.getMonth() === new Date().getMonth() && currentDate.getFullYear() === new Date().getFullYear(); - const dateString = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; - const emotion: EmotionTypeEN = filteredEmotionMap[dateString]; // 날짜에 해당하는 감정 가져오기 - const iconPath = emotion && iconPaths[emotion] ? iconPaths[emotion].path : '/icon/BW/SmileFaceBWIcon.svg'; - - return ( -
- {emotion ? ( -
-

{day}

- 감정 -
- ) : ( -

{day}

- )} -
- ); - })} -
- ))} -
-
- ); -} diff --git a/src/user/ui-profile/CalendarHeader.tsx b/src/user/ui-profile/CalendarHeader.tsx deleted file mode 100644 index 2c337e1c..00000000 --- a/src/user/ui-profile/CalendarHeader.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuGroup, DropdownMenu } from '@/components/ui/dropdown-menu'; -import { Button } from '@/components/ui/button'; -import Image from 'next/image'; -import { EmotionTypeEN } from '@/types/emotion'; -import ARROW_BOTTOM_ICON from '../../../public/icon/arrow-bottom-icon.svg'; -import ARROW_RIGHT_ICON from '../../../public/icon/arrow-right-icon.svg'; -import ARROW_LEFT_ICON from '../../../public/icon/arrow-left-icon.svg'; -import { iconPaths } from '../utill/constants'; - -interface CalendarHeaderProps { - currentDate: Date; - onPrevMonth: () => void; - onNextMonth: () => void; - onEmotionSelect: (emotion: EmotionTypeEN) => void; - selectEmotion: EmotionTypeEN | null; -} - -export default function CalendarHeader({ currentDate, onPrevMonth, onNextMonth, onEmotionSelect, selectEmotion }: CalendarHeaderProps) { - return ( -
-
-
{`${currentDate.getFullYear()}년 ${currentDate.getMonth() + 1}월`}
- - - - - - - {Object.entries(iconPaths).map(([emotionKey, { path, name }]) => ( - - - - ))} - - - -
-
- - -
-
- ); -} diff --git a/src/user/ui-profile/Chart.tsx b/src/user/ui-profile/Chart.tsx deleted file mode 100644 index 6e89af4c..00000000 --- a/src/user/ui-profile/Chart.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { EmotionLog, EmotionTypeEN } from '@/types/emotion'; -import Image from 'next/image'; -import { iconPaths } from '../utill/constants'; - -interface ChartProps { - monthlyEmotionLogs: EmotionLog[]; -} - -export default function Chart({ monthlyEmotionLogs }: ChartProps) { - // 감정별 빈도수 계산 - const emotionCounts = monthlyEmotionLogs.reduce( - (count, log) => { - const { emotion } = log; - return { - ...count, // 기존의 count를 복사 - [emotion]: (count[emotion] || 0) + 1, // 현재 감정의 개수 증가 - }; - }, - {} as Record, - ); - - // 감정 종류 및 총 감정 수 계산 - const TOTAL_COUNT = monthlyEmotionLogs.length; - const EMOTIONS: EmotionTypeEN[] = ['MOVED', 'HAPPY', 'WORRIED', 'SAD', 'ANGRY']; - const RADIUS = 90; // 원의 반지름 - const CIRCUMFERENCE = 2 * Math.PI * RADIUS; - - // 가장 많이 나타나는 감정 찾기 - const maxEmotion = EMOTIONS.reduce((max, emotion) => (emotionCounts[emotion] > emotionCounts[max] ? emotion : max), EMOTIONS[0]); - - // 원형 차트의 각 감정에 대한 strokeDasharray와 strokeDashoffset 계산 - let offset = 0; - - return ( -
-

감정 차트

-
-
- - - {EMOTIONS.map((emotion) => { - const count = emotionCounts[emotion] || 0; - const percentage = TOTAL_COUNT > 0 ? count / TOTAL_COUNT : 0; // 0으로 나누기 방지 - const strokeDasharray = `${CIRCUMFERENCE * percentage} ${CIRCUMFERENCE * (1 - percentage)}`; - - // 색상 설정 - let strokeColor; - switch (emotion) { - case 'HAPPY': - strokeColor = '#FBC85B'; - break; - case 'SAD': - strokeColor = '#E3E9F1'; - break; - case 'WORRIED': - strokeColor = '#C7D1E0'; - break; - case 'ANGRY': - strokeColor = '#EFF3F8'; - break; - default: - strokeColor = '#48BB98'; - } - - const circle = ; - - offset += CIRCUMFERENCE * percentage; // 다음 원을 위한 offset 업데이트 - return circle; - })} - - {/* 중앙에 가장 많이 나타나는 감정 출력 */} -
- 감정 -

{iconPaths[maxEmotion].name}

-
-
-
-
- {EMOTIONS.map((emotion) => { - const count = emotionCounts[emotion] || 0; - const percentage = TOTAL_COUNT > 0 ? Math.floor((count / TOTAL_COUNT) * 100) : 0; // 퍼센트 계산 및 소수점 버리기 - - return ( -
-

- 감정 -

{percentage}%

-
- ); - })} -
-
-
-
- ); -} diff --git a/src/user/ui-profile/EmotionMonthlyLogs.tsx b/src/user/ui-profile/EmotionMonthlyLogs.tsx deleted file mode 100644 index 18d4ada8..00000000 --- a/src/user/ui-profile/EmotionMonthlyLogs.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useMonthlyEmotionLogs } from '@/hooks/useGetEmotion'; -import { Emotion } from '@/types/emotion'; -import { useEffect, useState } from 'react'; -import Calendar from './Calendar'; -import Chart from './Chart'; - -interface EmotionMonthlyLogsProps { - userId: number; -} - -export default function EmotionMonthlyLogs({ userId }: EmotionMonthlyLogsProps) { - // 현재 날짜를 상태로 관리 - const [currentDate, setCurrentDate] = useState(new Date()); - - // 감정 달력 객체 상태 추가 - const [emotionRequest, setEmotionRequest] = useState({ - userId, - year: currentDate.getFullYear(), - month: currentDate.getMonth() + 1, - }); - - // '월'이 변경될 때마다 request 업데이트 - useEffect(() => { - setEmotionRequest({ - userId, - year: currentDate.getFullYear(), - month: currentDate.getMonth() + 1, - }); - }, [currentDate]); - - // 월별 감정 로그 조회 - const { data: monthlyEmotionLogs = [] } = useMonthlyEmotionLogs(emotionRequest); - - return ( - <> - - - - ); -}