diff --git a/src/pages/auth/SignIn.tsx b/src/pages/auth/SignIn.tsx
index c1bfd025..8e165591 100644
--- a/src/pages/auth/SignIn.tsx
+++ b/src/pages/auth/SignIn.tsx
@@ -77,19 +77,24 @@ export default function SignIn() {
-
+
-
-
-
+ {/* // FIXME: 구글 간편 로그인 리다이렉트시 500에러가 발생하는 부분으로 주석 처리하였음 */}
+ {/*
*/}
+
+ {/* */}
diff --git a/src/pages/auth/redirect/google-callback/index.ts b/src/pages/auth/redirect/google-callback/index.ts
new file mode 100644
index 00000000..1f925901
--- /dev/null
+++ b/src/pages/auth/redirect/google-callback/index.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import useGoogleLogin from '@/hooks/useGoogleLogin';
+
+export default function Google() {
+ const searchParams = useSearchParams();
+ const code = searchParams.get('code');
+ const { mutate: login } = useGoogleLogin();
+
+ useEffect(() => {
+ if (code) {
+ login(code);
+ } else {
+ /* eslint-disable no-console */
+ console.log(code); // code가 없을 때 콘솔에 출력
+ }
+ }, [code, login]);
+}
+
+// code가 없는 경우의 예시 http://localhost:3000/auth/redirect/kakao
+// 토스트로 에러 메시지 띄우고, 로그인 페이지로 리다이렉트
diff --git a/src/pages/auth/redirect/naver/index.ts b/src/pages/auth/redirect/naver/index.ts
new file mode 100644
index 00000000..ff844a3d
--- /dev/null
+++ b/src/pages/auth/redirect/naver/index.ts
@@ -0,0 +1,19 @@
+import useNaverLogin from '@/hooks/useNaverLogin';
+import { useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function Naver() {
+ const searchParams = useSearchParams();
+ const code = searchParams.get('code');
+ const state = searchParams.get('state');
+ const { mutate: login } = useNaverLogin();
+
+ useEffect(() => {
+ if (code && state) {
+ login({ code, state });
+ } else {
+ /* eslint-disable no-console */
+ console.log(code, state); // code가 없을 때 콘솔에 출력
+ }
+ }, [code, state, login]);
+}
diff --git a/src/pages/epigrams/[id]/index.tsx b/src/pages/epigrams/[id]/index.tsx
index 9f5424ae..ffbd6f79 100644
--- a/src/pages/epigrams/[id]/index.tsx
+++ b/src/pages/epigrams/[id]/index.tsx
@@ -22,7 +22,7 @@ function DetailPage() {
return (
-
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}
- )}
-
- );
- })}
-
- ))}
-
-
- );
-}
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 (
-
-
감정 차트
-
-
-
- {/* 중앙에 가장 많이 나타나는 감정 출력 */}
-
-
-
{iconPaths[maxEmotion].name}
-
-
-
-
- {EMOTIONS.map((emotion) => {
- const count = emotionCounts[emotion] || 0;
- const percentage = TOTAL_COUNT > 0 ? Math.floor((count / TOTAL_COUNT) * 100) : 0; // 퍼센트 계산 및 소수점 버리기
-
- return (
-
- );
- })}
-
-
-
-
- );
-}
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 (
- <>
-
-
- >
- );
-}