From 6b2f805c76e6597852a6ca75d453949c13aa573d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=B1=84=EB=AF=BC?= <87525734+cmlim0070@users.noreply.github.com> Date: Tue, 5 Nov 2024 14:30:11 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=9E=AC=EC=B6=94=EC=B2=9C=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=9E=91=EC=84=B1=20(#171)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/repeatarrow.svg | 6 +++ src/entities/music/api/fetchMusicList.ts | 3 -- src/entities/music/index.ts | 1 + src/entities/music/model/type.ts | 4 ++ .../music/ui/ReRecommendGptButton.styled.tsx | 16 ++++++++ .../music/ui/ReRecommendGptButton.tsx | 12 ++++++ .../musicList/ui/MusicCardList.tsx | 4 -- .../DiaryWritePage/ui/DiaryWritePage.tsx | 31 ++++++++++----- src/widgets/select-music/model/type.ts | 1 + .../ui/SelectMusicContainer.styled.tsx | 8 ++++ .../select-music/ui/SelectMusicContainer.tsx | 38 ++++++++++++------- 11 files changed, 94 insertions(+), 30 deletions(-) create mode 100644 public/repeatarrow.svg create mode 100644 src/entities/music/ui/ReRecommendGptButton.styled.tsx create mode 100644 src/entities/music/ui/ReRecommendGptButton.tsx diff --git a/public/repeatarrow.svg b/public/repeatarrow.svg new file mode 100644 index 0000000..10624cd --- /dev/null +++ b/public/repeatarrow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/entities/music/api/fetchMusicList.ts b/src/entities/music/api/fetchMusicList.ts index 7bbbd31..eb39043 100644 --- 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 index 13700fd..0a36a7a 100644 --- 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 index 5cbcd6f..9a723b6 100644 --- 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 new file mode 100644 index 0000000..e6cf184 --- /dev/null +++ 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 new file mode 100644 index 0000000..350089c --- /dev/null +++ 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 ( + + + + ); +}; diff --git a/src/features/diary-write/musicList/ui/MusicCardList.tsx b/src/features/diary-write/musicList/ui/MusicCardList.tsx index 662351c..2649c20 100644 --- 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 ; - // } - return responseMusicList.map((music) => ( { - 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,7 +187,6 @@ export const DiaryWritePage = () => { - { isActive={currentStep === 3} disabled={currentStep !== 3} isLoading={isLoading} + onRecommend={callFetchRecommendations} /> diff --git a/src/widgets/select-music/model/type.ts b/src/widgets/select-music/model/type.ts index 7f40e93..78df5fe 100644 --- 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 index aaf32a2..306f7d0 100644 --- 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 index cc70cc4..4ce7c58 100644 --- 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( SEARCH_TYPE.GPT @@ -72,17 +77,22 @@ export const SelectMusicContainer = ({ - + + {selectedType === SEARCH_TYPE.GPT ? ( + + ) : null} + + ); };