diff --git a/front/src/api/routineAPI.js b/front/src/api/routineAPI.js index 3aa88941cdbf68c18b60bbf012ad3ccb778b6d2c..aebbcf8ec1efcfad6de006b4c55f13b01d88b3d2 100644 --- a/front/src/api/routineAPI.js +++ b/front/src/api/routineAPI.js @@ -35,7 +35,7 @@ async function fetchWithOptions(url, options) { method: 'GET', }); - // 빈 루틴도 표시할 수 있도록 변환 + // 빈 루틴도 표시할 수 있도록 ��환 return response.map(routine => ({ _id: routine._id, user_id: routine.user_id, @@ -50,6 +50,12 @@ async function fetchWithOptions(url, options) { }; const getRoutineVideos = async (routineName) => { + // routineName이 null이거나 undefined인 경우 빈 배열 반환 + if (!routineName) { + console.log("루틴 이름이 제공되지 않았습니다."); + return []; + } + try { const response = await fetchWithOptions(`/api/routine/videos?routine_name=${encodeURIComponent(routineName)}`, { method: 'GET', @@ -81,7 +87,7 @@ async function fetchWithOptions(url, options) { }); } - async function addRoutineVideo(data){ +async function addRoutineVideo(data){ try{ const uri = `/api/routine/add` const response = await fetch(uri, { @@ -93,11 +99,13 @@ async function fetchWithOptions(url, options) { body: JSON.stringify(data), }); const responseData = await response.json(); - if(!responseData || !response.ok) + if(!response.ok) { throw new Error(responseData.message || '루틴을 불러오는데 실패했습니다.'); - else return data; + } + return responseData; // 성공 시 응답 데이터 반환 } catch(err){ - console.log(err.message); + console.error("루틴 추가 중 오류:", err.message); + throw err; // 에러를 상위로 전파 } } diff --git a/front/src/components/routine/List.jsx b/front/src/components/routine/List.jsx index f5456e33377e6fa321096ff7ee69c2940031d3ab..0e6dd5c81ae34072029eab526348b213f394c8dc 100644 --- a/front/src/components/routine/List.jsx +++ b/front/src/components/routine/List.jsx @@ -43,27 +43,11 @@ function List({ onRoutineSelect, isActive }) { // 루틴 데이터와 비디오 데이터 함께 가져오기 const fetchRoutines = async () => { try { - const routineData = await getUserRoutines(); - if (routineData) { - // 각 루틴에 대해 비디오 정보 가져오기 - const routinesWithVideos = await Promise.all( - routineData.map(async (routine) => { - const videos = await getRoutineVideos(routine.routine_name); - return { - ...routine, - exercises: videos.map(video => ({ - title: video.video_title, - duration: video.video_time, - link: video.video_url, - thumbnail: video.video_thumbnail - })) - }; - }) - ); - setRoutines(routinesWithVideos); - } - } catch (err) { - console.error("루틴 데이터 가져오기 실패:", err); + const data = await getUserRoutines(); + setRoutines(data || []); // 데이터가 없는 경우 빈 배열 설정 + } catch (error) { + console.error("루틴 목록 가져오기 실패:", error); + setRoutines([]); // 에러 발생 시 빈 배열로 설정 } }; @@ -71,14 +55,21 @@ function List({ onRoutineSelect, isActive }) { fetchRoutines(); }, []); - const handleRoutineClick = (routine) => { - if (!modify) { + const handleRoutineClick = async (routine) => { + if (!modify && routine) { + try { + const videos = await getRoutineVideos(routine.routine_name); const formattedRoutine = { - name: routine.routine_name, - exercises: [] + name: routine.routine_name, + exercises: videos }; setSelectedRoutine(formattedRoutine); onRoutineSelect(formattedRoutine); + } catch (error) { + console.error("루틴 비디오 가져오기 실패:", error); + // 에러 발생 시 사용자에게 알림 + alert("루틴 정보를 가져오는데 실패했습니다."); + } } }; @@ -120,9 +111,13 @@ function List({ onRoutineSelect, isActive }) { <div id="list-content"> <ul> {routines && routines.length > 0 ? ( - routines.map((routine) => ( - <li key={routine._id} onClick={() => handleRoutineClick(routine)}> - <span>{truncateText(routine.routine_name, 10)}</span> + routines.map((routine, index) => ( + <li + key={index} + onClick={() => handleRoutineClick(routine)} + className={selectedRoutine?.name === routine.routine_name ? 'pick' : ''} + > + <span>{truncateText(routine.routine_name || '')}</span> {modify && ( <button onClick={(e) => { e.stopPropagation(); diff --git a/front/src/components/workout/VideoDetails.jsx b/front/src/components/workout/VideoDetails.jsx index c3e0bff77ba64d2167938e1c41c94debfb4d0626..f159a3175329924d6d4fbce0b5ebc6e819217797 100644 --- a/front/src/components/workout/VideoDetails.jsx +++ b/front/src/components/workout/VideoDetails.jsx @@ -9,13 +9,17 @@ import {addRoutineVideo} from '../../api/routineAPI'; function VideoDetails({video, routines}) { async function addRoutine(e){ const data = { - routine_name : e.target.value, - video_id : video.video_id + routine_name: e.target.value, + video_id: video.video_id } try{ - const response = await addRoutineVideo(data); + const response = await addRoutineVideo(data); + if (response) { + alert("루틴에 성공적으로 추가되었습니다."); + } } catch(err) { - alert(err.message); + console.error("루틴 추가 실패:", err); + alert(err.message || "루틴 추가에 실패했습니다."); } } diff --git a/front/src/index.js b/front/src/index.js index 72c3a266deddd6b52f50243069f6e61a3bdce82e..d237f9a1fd09d87d6872d75850f8dcc6c4cec72e 100644 --- a/front/src/index.js +++ b/front/src/index.js @@ -1,12 +1,13 @@ import React from 'react'; -import ReactDOM from 'react-dom'; -//import './index.css'; +import ReactDOM from 'react-dom/client'; // React 18 API 사용 import App from './App'; import reportWebVitals from './reportWebVitals'; -ReactDOM.render( - <App />, - document.getElementById('root') +const root = ReactDOM.createRoot(document.getElementById('root')); // createRoot로 변경 +root.render( + <React.StrictMode> + <App /> + </React.StrictMode> ); // If you want to start measuring performance in your app, pass a function