Merge pull request #211 from prgrms-web-devcourse-final-project/feat/204-edit-profile-videoid

[feat] 프로필 수정 비디오아이디 추가

Author: yoo-nji

src/pages/editprofile/components/ProfileEditForm.tsx

@@ -8,6 +8,7 @@ import NicknameInput from '@/pages/signup/components/NicknameInput';
 import { useModalStore } from '@/store/modalStore';
 import { useMusicCardStore } from '@/store/MusicCardStore';
 import { useSheetStore } from '@/store/sheetStore';
+import { fetchSpotifyVideoId } from '@/utils/fetchSpotifyVideoId';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router';
@@ -20,6 +21,7 @@ type ProfileFormType = {
   title: string;
   artist: string;
   albumImage: string;
+  videoId: string;
 };
 
 // 노래, 닉네임 변경폼
@@ -45,6 +47,7 @@ function ProfileEditForm() {
 
   const handleProfileSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+
     try {
       setIsLoading(true);
       // 업데이트 된 것만 전송
@@ -56,10 +59,19 @@ function ProfileEditForm() {
       if (selectedProfileMusic !== prevProfileMusic.current) {
         // 프로필 뮤직이 선택되어있을 경우
         if (selectedProfileMusic) {
+          // videoId 조회
+          const videoId = await fetchSpotifyVideoId(
+            selectedProfileMusic?.spotifyId,
+            selectedProfileMusic?.artist,
+            selectedProfileMusic?.title,
+          );
+          console.log('videoId:', videoId);
+
           updatedData.spotifyId = selectedProfileMusic.spotifyId;
           updatedData.title = selectedProfileMusic.title;
           updatedData.artist = selectedProfileMusic.artist;
           updatedData.albumImage = selectedProfileMusic.album;
+          updatedData.videoId = videoId;
         }
         // 프로필 뮤직이 선택되지않아서 삭제하는 로직
         else {

src/pages/post/Post.tsx

@@ -4,19 +4,14 @@ import MusicCard from '@/components/MusicCard';
 import Comment from '@/pages/post/components/Comment';
 import { useEffect, useState } from 'react';
 import { useSheetStore } from '@/store/sheetStore';
-import {
-  getEmotionRecordById,
-  getSpotifyVideoId,
-  postEmotionRecord,
-  putEmotionRecord,
-} from '@/apis/emotionRecord';
+import { getEmotionRecordById, postEmotionRecord, putEmotionRecord } from '@/apis/emotionRecord';
 import { useModalStore } from '@/store/modalStore';
 import { useNavigate, useParams } from 'react-router';
 import { useMusicCardStore } from '@/store/MusicCardStore';
 import SpinLoading from '@/components/loading/SpinLoading';
 import Complete from '@/components/loading/Complete';
 import ErrorShake from '@/components/loading/ErrorShake';
-import { searchYoutubeVideo } from '@/apis/youtube';
+import { fetchSpotifyVideoId } from '@/utils/fetchSpotifyVideoId';
 
 export default function Post() {
   const navigate = useNavigate();
@@ -117,31 +112,11 @@ export default function Post() {
     });
   };
 
-  // spotifyId로 videoId 조회
-  const fetchSpotifyVideoId = async (spotifyId: string, artist: string, title: string) => {
-    try {
-      const data = await getSpotifyVideoId(spotifyId); // 서버에 videoId 조회
-      console.log('videoId 조회 결과:', data);
-
-      // 서버에 videoId 가 있으면
-      if (data.code === 200 && data.data) return data.videoId;
-      // 서버에 videoId 가 없으면
-      else {
-        // youtube 검색
-        const videoId = await searchYoutubeVideo(`${artist} - ${title} lyrics`);
-        console.log('유튜브 videoId:', videoId);
-        return videoId;
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
   // 기록 완료
   const onCompletePost = async () => {
     if (!isCompletePost) return;
 
-    // 음악 선택 시 videoId 조회
+    // videoId 조회
     const videoId = await fetchSpotifyVideoId(
       selectedPostMusic?.spotifyId,
       selectedPostMusic?.artistName,

src/utils/fetchSpotifyVideoId.ts

@@ -0,0 +1,25 @@
+import { getSpotifyVideoId } from '@/apis/emotionRecord';
+import { searchYoutubeVideo } from '@/apis/youtube';
+
+export const fetchSpotifyVideoId = async (spotifyId: string, artist: string, title: string) => {
+  try {
+    const data = await getSpotifyVideoId(spotifyId); // 서버에 videoId 조회
+    console.log('videoId 조회 결과:', data);
+
+    // 서버에 videoId 가 있으면
+    if (data.code === 200 && data.data) {
+      console.log('서버 videoId 존재함!:', data.data);
+      return data.data;
+    }
+    // 서버에 videoId 가 없으면
+    else {
+      // youtube 검색
+      const newVideoId = await searchYoutubeVideo(`${artist} - ${title} lyrics`);
+      console.log('유튜브 videoId:', newVideoId);
+      return newVideoId;
+    }
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};