rename : 기분 타입 이름 변경 (#109)

src/entities/chart/lib/isDailyEmotion.ts

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

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

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Chart from './Chart';
 import {
-  DailyEmotionType,
-} from '@/shared/model/moodTypes';
+  DailyConditionType,
+} from '@/shared/model/conditionTypes';
 
 const meta: Meta<typeof Chart> = {
   component: Chart,
@@ -14,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof Chart>;
 
-const dailyEmotionData : DailyEmotionType[]  = [
+const dailyEmotionData : DailyConditionType[]  = [
   { day: 'Mon' as const, mood: null },
   { day: 'Tue' as const, mood: '나쁨' },
   { day: 'Wed' as const, mood: '나쁨' },

src/entities/chart/ui/Chart.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-    DailyEmotionType,
-    WeeklyEmotionSummaryType
-} from '@/shared/model/moodTypes';
+    DailyConditionType,
+    WeeklyConditionSummaryType
+} from '@/shared/model/conditionTypes';
 
 import {
     LineChart,
@@ -18,7 +18,7 @@ import isDailyEmotion from '../lib/isDailyEmotion';
 const emotions = ['매우 나쁨', '나쁨', '보통', '좋음', '매우 좋음'];
 
 interface ChartProps {
-    data: DailyEmotionType[] | WeeklyEmotionSummaryType[];
+    data: DailyConditionType[] | WeeklyConditionSummaryType[];
 }
 
 const Chart = ({ data }: ChartProps) => {

src/entities/music/api/fetchMusicRecommendation.ts

@@ -0,0 +1,35 @@
+import { createGptRequestQuery } from '../lib/createGptRequestQuery';
+import { gptAnswerType, MoodDataType } from '../model/type';
+import { fetchGptRecommend } from './fetchGptRecommend';
+
+/**
+ * 음악 아이텝을 반환합니다.
+ * @param emotionData d
+ * @param param1
+ * @returns
+ */
+export const fetchMusicRecommendation = async (
+    emotionData: MoodDataType | null,
+    {
+        onSuccess,
+        onError,
+        onValidationError
+    }: {
+        onSuccess: (data: gptAnswerType) => void;
+        onError: () => void;
+        onValidationError: () => void;
+    }
+) => {
+    if (!emotionData) {
+        onValidationError();
+        return;
+    }
+    try {
+        const requestQuery = createGptRequestQuery(emotionData);
+        const recommendedMusic = await fetchGptRecommend(requestQuery);
+        onSuccess(recommendedMusic);
+    } catch (error) {
+        onError();
+        throw error;
+    }
+};

src/entities/music/index.ts

@@ -1,3 +1,8 @@
+export { fetchGptRecommend } from './api/fetchGptRecommend';
+export { youtubeSearch } from './api/fetchMusicList';
+export { spotifySearch } from './api/fetchMusicList';
+export { fetchMusicRecommendation } from './api/fetchMusicRecommendation';
+export { useMusicSearch } from './hooks/useMusicSearch';
+export { createGptRequestQuery } from './lib/createGptRequestQuery';
 export { MusicCard } from './ui/MusicCard';
 export { EmptyMusicCard } from './ui/EmptyMusicCard';
-export { useMusicSearch } from './hooks/useMusicSearch';

src/entities/music/lib/createGptRequestQuery.ts

@@ -0,0 +1,28 @@
+import { gptQueryParamsType, MoodDataType } from '../model/type';
+
+// 테스트 다이러리
+const INITIAL_DIARY = {
+    title: '우울해',
+    content: '너무 우울해서 빵샀어'
+};
+
+/**
+ * 감정데이터, 일기데이터를 조합해 쿼리 데이터를 생성
+ * @param emotionData
+ * @returns
+ */
+export const createGptRequestQuery = (
+    emotionData: MoodDataType
+): gptQueryParamsType => {
+    return {
+        title: INITIAL_DIARY.title,
+        content: INITIAL_DIARY.content,
+        ...(emotionData?.mood && { mood: emotionData.mood }),
+        ...(emotionData?.emotion && { emotion: emotionData.emotion }),
+        ...(emotionData?.subEmotion && {
+            subemotion: emotionData.subEmotion.filter(
+                (emotion): emotion is string => emotion !== null
+            )
+        })
+    };
+};

src/entities/music/model/type.ts

@@ -1,3 +1,5 @@
+import { ConditionType } from '@/shared/model/conditionTypes';
+
 export interface MusicItem {
     youtubeId: string;
     thumbnailUrl: string;
@@ -48,3 +50,8 @@ export interface gptQueryParamsType {
 }
 
 export type gptAnswerType = string[];
+export interface MoodDataType {
+    mood: ConditionType;
+    emotion: string | null;
+    subEmotion: (string | null)[];
+}

src/features/chart/lib/isWeekly.ts

@@ -1,7 +1,7 @@
 import {
     WeeklyDataType,
     MonthlyDataType
-} from '../../../shared/model/moodTypes';
+} from '../../../shared/model/conditionTypes';
 
 const isWeekly = (
     data: WeeklyDataType | MonthlyDataType

src/features/diary-write/musicList/ui/MusicCardList.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { Container, HiddenYoutubeContainer } from './MusicCardList.styled';
 import { MusicItem, MusicCardListProps } from '../model/type';
 import { EmptyMusicCard, MusicCard } from '../../../../entities/music';
-import useMusicStore from '@/entities/music/model/useMusicStore';
 
 export const MusicCardList = ({
     responseMusicList,
@@ -38,7 +37,6 @@ export const MusicCardList = ({
         }
     };
 
-    // TODO - iframe 유튜브 api 모듈로 변경
     return (
         <Container>
             <HiddenYoutubeContainer>

src/pages/DiaryWritePage/model/type.ts

@@ -1,7 +1,7 @@
-import { EmotionType } from '@/shared/model/moodTypes';
+import { ConditionType } from '@/shared/model/conditionTypes';
 
 export interface MoodDataType {
-    mood: EmotionType;
+    mood: ConditionType;
     emotion: string | null;
     subEmotion: (string | null)[];
 }

src/pages/DiaryWritePage/ui/DiaryWritePage.tsx

@@ -1,87 +1,59 @@
-import React, { useEffect, useState } from 'react';
-import { SelectMusicContainer } from '@/widgets/select-music/ui/SelectMusicContainer';
-import Header from '@/widgets/header/ui/Header';
-import { Container, Section } from './DiaryWritePage.styled';
+import React, { useState } from 'react';
+import { fetchMusicRecommendation } from '@/entities/music';
+import { gptAnswerType, MusicItem } from '@/entities/music/model/type';
+import { useToastStore } from '@/features/Toast/hooks/useToastStore';
+import { SelectMusicContainer } from '@/widgets/select-music';
 import { SelectEmotionContainer } from '@/widgets/select-emotion';
-import { WriteDiaryContainer } from '@/widgets/write-diary';
-import { fetchGptRecommend } from '@/entities/music/api/fetchGptRecommend';
-import {
-    gptAnswerType,
-    gptQueryParamsType,
-    MusicItem
-} from '@/entities/music/model/type';
-import { EmotionType } from '@/shared/model/moodTypes';
-import { Emotions } from '@/shared/model/EmotionEnum';
+import { Container, Section } from './DiaryWritePage.styled';
 import { MoodDataType } from '../model/type';
 
 // TODO - 리팩토링 (로직 분리)
 export const DiaryWritePage = () => {
-    // 테스트 다이러리
-    const diary = {
-        title: '우울해',
-        content: '너무 우울해서 빵샀어'
-    };
-
+    const { addToast } = useToastStore();
     // const [diaryData, setDiaryData] = useState();
-    const [emotionData, setEmotionData] = useState<MoodDataType | null>(null);
-    const [musicData, setMusicData] = useState<MusicItem | null>(null);
-
-    const [gptRecommendMusicList, setGptRecommendMusicList] =
+    const [userEmotionState, setUserEmotionState] =
+        useState<MoodDataType | null>(null);
+    const [selectedMusic, setSelectedMusic] = useState<MusicItem | null>(null);
+    const [recommendedMusicList, setRecommendedMusicList] =
         useState<gptAnswerType>([]);
 
     // // 일기 데이터가 넘어오면 셋팅
     // const handleDiarySubmit = (diaryData) => {
     //     setDiaryData(diaryData);
     // };
 
-    const handleMoodSelect = (moodState: MoodDataType) => {
-        console.log('감정 데이터 셋팅 : ', moodState);
-        setEmotionData(moodState);
-    };
-
-    const handleMusicSelect = (music: MusicItem | null) => {
-        console.log('음악 데이터 셋팅 : ', music);
-        setMusicData(music);
+    const handleEmotionSubmit = (submittedEmotion: MoodDataType) => {
+        console.log('사용자 감정 데이터 저장:', submittedEmotion);
+        setUserEmotionState(submittedEmotion);
     };
 
-    // TODO - diary 파라미터 넣어야함
-    const createGptQuery = (mood: MoodDataType) => {
-        const gptQuery: gptQueryParamsType = {
-            title: '우울해',
-            content: '너무 우울해서 빵샀어',
-            ...(mood?.mood && { mood: mood.mood }),
-            ...(mood?.emotion && { emotion: mood.emotion }),
-            ...(mood?.subEmotion && {
-                subemotion: mood.subEmotion.filter(
-                    (item): item is string => item !== null
-                )
-            })
-        };
-        return gptQuery;
+    const handleMusicSelection = (selectedMusicItem: MusicItem | null) => {
+        console.log('선택된 음악 데이터 저장:', selectedMusicItem);
+        setSelectedMusic(selectedMusicItem);
     };
 
-    const testFunction = async (mood: MoodDataType | null) => {
-        console.log('테스트 함수 실행됨');
-        if (mood === null) {
-            console.log('감정 선택을 먼저 완료해주세요');
-        } else {
-            const gptQuery = createGptQuery(mood);
-            const recommendations = await fetchGptRecommend(gptQuery);
-            setGptRecommendMusicList(recommendations);
-        }
+    const handleFetchRecommendations = async (
+        emotionData: MoodDataType | null
+    ) => {
+        await fetchMusicRecommendation(emotionData, {
+            onSuccess: setRecommendedMusicList,
+            onError: () => addToast('음악 추천 요청에 실패했습니다.', 'error'),
+            onValidationError: () =>
+                addToast('먼저 감정을 선택해주세요!', 'warning')
+        });
     };
 
     return (
         <Container>
             <Section>
-                {/* <WriteDiaryContainer onDiarySubmit={handleDiarySubmit} /> */}
+                {/* <WriteDiaryContainer onSubmit={handleDiarySubmit} /> */}
                 <SelectEmotionContainer
-                    onMoodSelect={handleMoodSelect}
-                    onNext={testFunction}
+                    onMoodSelect={handleEmotionSubmit}
+                    onNext={handleFetchRecommendations}
                 />
                 <SelectMusicContainer
-                    onMusicSelect={handleMusicSelect}
-                    gptRecommendMusicList={gptRecommendMusicList}
+                    onMusicSelect={handleMusicSelection}
+                    gptRecommendMusicList={recommendedMusicList}
                 />
             </Section>
         </Container>

src/shared/api/mood.ts

@@ -1,4 +1,4 @@
-import { WeeklyDataType, MonthlyDataType } from '../model/moodTypes';
+import { WeeklyDataType, MonthlyDataType } from '../model/conditionTypes';
 import { moodQueryParamType } from '../model/moodQueryParamType';
 import defaultApi from '@/shared/api/api';
 

src/shared/hooks/useGetMood.ts

@@ -1,4 +1,4 @@
-import { WeeklyDataType, MonthlyDataType } from '../model/moodTypes';
+import { WeeklyDataType, MonthlyDataType } from '../model/conditionTypes';
 import { useQuery } from '@tanstack/react-query';
 import { moodQueryParamType } from '../model/moodQueryParamType';
 import { getMoodApi } from '../api/mood';

src/shared/model/moodTypes.ts → src/shared/model/conditionTypes.ts

@@ -1,31 +1,31 @@
-export type EmotionType =
+export type ConditionType =
     | '좋음'
     | '나쁨'
     | '보통'
     | '매우 좋음'
     | '매우 나쁨'
     | null;
 
-export interface DailyEmotionType {
+export interface DailyConditionType {
     day: 'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri' | 'Sat' | 'Sun';
-    mood: EmotionType;
+    mood: ConditionType;
 }
 
 export interface WeeklyDataType {
     period: string;
-    mostFrequentEmotion: EmotionType;
+    mostFrequentEmotion: ConditionType;
     frequency: number | null;
-    allEmotions: DailyEmotionType[];
+    allEmotions: DailyConditionType[];
 }
 
-export interface WeeklyEmotionSummaryType {
+export interface WeeklyConditionSummaryType {
     week: number;
-    mostFrequentEmotion: EmotionType;
+    mostFrequentEmotion: ConditionType;
 }
 
 export interface MonthlyDataType {
     period: string;
-    weeklyResults: WeeklyEmotionSummaryType[];
+    weeklyResults: WeeklyConditionSummaryType[];
     frequency: number | null;
-    mostFrequentEmotion: EmotionType;
+    mostFrequentEmotion: ConditionType;
 }

src/widgets/select-emotion/model/type.ts

@@ -1,13 +1,13 @@
 import { MoodDataType } from '@/pages/DiaryWritePage/model/type';
-import { EmotionType } from '@/shared/model/moodTypes';
+import { ConditionType } from '@/shared/model/conditionTypes';
 
 export interface SelectEmotionContainerProps {
     onMoodSelect: (mood: MoodDataType) => void;
     onNext?: (mood: MoodDataType) => void;
 }
 
 export interface MoodState {
-    mood: EmotionType;
+    mood: ConditionType;
     emotion: string | null;
     subEmotion: (string | null)[];
 }