feat : 재추천 버튼 작성 (#171)

prgrms-fe-devcourse · Nov 5, 2024 · 6b2f805 · 6b2f805
1 parent eb93de3
commit 6b2f805
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 30 deletions.
diff --git a/public/repeatarrow.svg b/public/repeatarrow.svg
diff --git a/src/entities/music/api/fetchMusicList.ts b/src/entities/music/api/fetchMusicList.ts
@@ -73,7 +73,6 @@ export const spotifySearch = async (
         });
         return spotifyResponse.data.tracks.items[0] as SpotifyResponse;
     } catch (error) {
-        console.log('스포티파이 데이터 패치 에러 : ', error);
         throw new Error('스포티파이 검색 실패');
     }
 };
@@ -91,7 +90,6 @@ export const youtubeSearch = async ({
     artistName: string;
 }) => {
     try {
-        console.log('유튜브 검색이 실행되다.');
         const youtubeResponse = await youtubeApi.get('/search', {
             params: {
                 q: `${trackName} ${artistName}`,
@@ -103,7 +101,6 @@ export const youtubeSearch = async ({
         const youtubeVideo = youtubeResponse.data.items[0] as YouTubeResponse;
         return youtubeVideo.id.videoId;
     } catch (error) {
-        console.log('유튜브 데이터 패치 에러 : ', error);
         throw new Error('유튜브 검색 실패');
     }
 };
diff --git a/src/entities/music/index.ts b/src/entities/music/index.ts
@@ -1,4 +1,5 @@
 export { fetchGptRecommend } from './api/fetchGptRecommend';
+export { ReRecommendGptButton } from './ui/ReRecommendGptButton';
 export { youtubeSearch } from './api/fetchMusicList';
 export { spotifySearch } from './api/fetchMusicList';
 export { fetchMusicRecommendation } from './api/fetchMusicRecommendation';

diff --git a/src/entities/music/model/type.ts b/src/entities/music/model/type.ts
@@ -55,3 +55,7 @@ export interface MoodDataType {
     emotion: string | null;
     subEmotions: (string | null)[];
 }
+
+export interface ReRecommendGptButtonProps {
+    onClick: () => void;
+}
diff --git a/src/entities/music/ui/ReRecommendGptButton.styled.tsx b/src/entities/music/ui/ReRecommendGptButton.styled.tsx
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    &:hover {
+        cursor: pointer;
+    }
+`;
+
+export const StyledImg = styled.img`
+    display: flex;
+`;
diff --git a/src/entities/music/ui/ReRecommendGptButton.tsx b/src/entities/music/ui/ReRecommendGptButton.tsx
@@ -0,0 +1,12 @@
+import { ReRecommendGptButtonProps } from '../model/type';
+import { Container, StyledImg } from './ReRecommendGptButton.styled';
+
+export const ReRecommendGptButton = ({
+    onClick
+}: ReRecommendGptButtonProps) => {
+    return (
+        <Container onClick={onClick}>
+            <StyledImg src="/repeatarrow.svg" />
+        </Container>
+    );
+};
diff --git a/src/features/diary-write/musicList/ui/MusicCardList.tsx b/src/features/diary-write/musicList/ui/MusicCardList.tsx
@@ -52,10 +52,6 @@ export const MusicCardList = ({
             );
         }
 
-        // if (responseMusicList.length === 0) {
-        //     return <EmptyMusicCard />;
-        // }
-
         return responseMusicList.map((music) => (
             <MusicCard
                 key={`${music.youtubeId}-${music.title}`}

diff --git a/src/pages/DiaryWritePage/ui/DiaryWritePage.tsx b/src/pages/DiaryWritePage/ui/DiaryWritePage.tsx
@@ -16,10 +16,11 @@ import {
     WidgetWrapper
 } from './DiaryWritePage.styled';
 import { useEffect, useRef } from 'react';
+import { useAuthStore } from '@/features/login/hooks/useAuthStore';
 
 // TODO - 이미 일기가 작성되어있는 날의 경우 수정, 삭제가 가능하도록 처리
 export const DiaryWritePage = () => {
-    const testUserEmail = 'wookgod01@naver.com.com';
+    const userEmail = useAuthStore((state) => state.email);
     const { date } = useParams();
     const navigate = useNavigate();
     const { addToast } = useToastStore();
@@ -76,10 +77,12 @@ export const DiaryWritePage = () => {
                 userDiaryState!,
                 userEmotionState!,
                 selectedMusic!,
-                testUserEmail,
+                userEmail,
                 date || ''
             );
 
+            console.log(diaryData);
+
             const { success, error } =
                 await diaryService.submitDiary(diaryData);
 
@@ -94,17 +97,27 @@ export const DiaryWritePage = () => {
         }
     };
 
+    const callFetchRecommendations = async () => {
+        try {
+            await fetchRecommendations(
+                userDiaryState,
+                userEmotionState,
+                (errorMessage) => addToast(errorMessage, 'error')
+            );
+        } catch (error) {
+            addToast(
+                '음악 추천에 실패했어요. 잠시 후 다시 시도해주세요.',
+                'error'
+            );
+        }
+    };
+
     const handleEmotionNext = async () => {
         if (!validators.isEmotionValid(userEmotionState)) {
             return;
         }
-
         handleNextStep();
-        await fetchRecommendations(
-            userDiaryState,
-            userEmotionState,
-            (errorMessage) => addToast(errorMessage, 'error')
-        );
+        callFetchRecommendations();
     };
 
     return (
@@ -174,14 +187,14 @@ export const DiaryWritePage = () => {
                         </Button>
                     </ButtonContainer>
                 </WidgetWrapper>
-
                 <WidgetWrapper ref={musicRef}>
                     <SelectMusicContainer
                         onMusicSelect={setSelectedMusic}
                         gptRecommendMusicList={recommendedMusicList}
                         isActive={currentStep === 3}
                         disabled={currentStep !== 3}
                         isLoading={isLoading}
+                        onRecommend={callFetchRecommendations}
                     />
                     <DisabledOverlay disabled={currentStep !== 3} />
                     <ButtonContainer>

diff --git a/src/widgets/select-music/model/type.ts b/src/widgets/select-music/model/type.ts
@@ -2,6 +2,7 @@ import { MusicItem } from '@/entities/music/model/type';
 
 export interface SelectMusicContainerProps {
     onMusicSelect: (music: MusicItem | null) => void;
+    onRecommend: () => void;
     gptRecommendMusicList: string[];
     isActive: boolean;
     disabled: boolean;

diff --git a/src/widgets/select-music/ui/SelectMusicContainer.styled.tsx b/src/widgets/select-music/ui/SelectMusicContainer.styled.tsx
@@ -15,3 +15,11 @@ export const SearchInputWrapper = styled.div<{ isVisible: boolean }>`
     overflow: hidden;
     transition: all 0.2s ease-in-out;
 `;
+
+export const MusicListContainer = styled.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    position: relative;
+`;
diff --git a/src/widgets/select-music/ui/SelectMusicContainer.tsx b/src/widgets/select-music/ui/SelectMusicContainer.tsx
@@ -1,5 +1,9 @@
 import React, { useMemo, useState } from 'react';
-import { Container, SearchInputWrapper } from './SelectMusicContainer.styled';
+import {
+    Container,
+    MusicListContainer,
+    SearchInputWrapper
+} from './SelectMusicContainer.styled';
 import {
     MusicSearchInput,
     SearchModeButtonGroup,
@@ -9,7 +13,7 @@ import {
     SearchType,
     SEARCH_TYPE
 } from '@/features/diary-write/search-mode-selector/model/type';
-import { useMusicSearch } from '@/entities/music';
+import { ReRecommendGptButton, useMusicSearch } from '@/entities/music';
 import { SelectMusicContainerProps } from '../model/type';
 import { MusicItem } from '@/entities/music/model/type';
 
@@ -19,7 +23,8 @@ export const SelectMusicContainer = ({
     gptRecommendMusicList,
     isLoading,
     isActive,
-    disabled
+    disabled,
+    onRecommend
 }: SelectMusicContainerProps) => {
     const [selectedType, setSelectedType] = useState<SearchType>(
         SEARCH_TYPE.GPT
@@ -72,17 +77,22 @@ export const SelectMusicContainer = ({
             <SearchInputWrapper isVisible={selectedType === SEARCH_TYPE.USER}>
                 <MusicSearchInput onSearch={handleSearchChange} />
             </SearchInputWrapper>
-            <MusicCardList
-                type={selectedType}
-                selectedMusic={selectedMusic}
-                responseMusicList={
-                    selectedType === SEARCH_TYPE.USER
-                        ? userMusicList
-                        : gptMusicList
-                }
-                onChange={handleMusicSelect}
-                isLoading={isLoading}
-            />
+            <MusicListContainer>
+                {selectedType === SEARCH_TYPE.GPT ? (
+                    <ReRecommendGptButton onClick={onRecommend} />
+                ) : null}
+                <MusicCardList
+                    type={selectedType}
+                    selectedMusic={selectedMusic}
+                    responseMusicList={
+                        selectedType === SEARCH_TYPE.USER
+                            ? userMusicList
+                            : gptMusicList
+                    }
+                    onChange={handleMusicSelect}
+                    isLoading={isLoading}
+                />
+            </MusicListContainer>
         </Container>
     );
 };