Fix: Fix Routine API

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',
@@ -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; // 에러를 상위로 전파
     }
 }
 

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: []
+          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();

front/src/components/workout/VideoDetails.jsx

@@ -14,8 +14,12 @@ function VideoDetails({video, routines}) {
         }
         try{ 
             const response = await addRoutineVideo(data);
+            if (response) {
+                alert("루틴에 성공적으로 추가되었습니다.");
+            }
         } catch(err) {
-            alert(err.message);
+            console.error("루틴 추가 실패:", err);
+            alert(err.message || "루틴 추가에 실패했습니다.");
         } 
     }
     

front/src/index.js

 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