Fix: 데이터 없을 시 에러처리

front/src/api/routineAPI.js

@@ -21,15 +21,15 @@ async function fetchWithOptions(url, options) {
     }
 }
 
-// 개별 함수들을 export
-export const addExerciseRecord = async (record) => {
+// 개별 함수들을 
+ const addExerciseRecord = async (record) => {
     return await fetchWithOptions('/api/routine/records', {
         method: 'POST',
         body: JSON.stringify(record),
     });
 };
 
-export const getUserRoutines = async () => {
+ const getUserRoutines = async () => {
     try {
         const response = await fetchWithOptions('/api/routine', {
             method: 'GET',
@@ -49,7 +49,7 @@ export const getUserRoutines = async () => {
     }
 };
 
-export const getRoutineVideos = async (routineName) => {
+ const getRoutineVideos = async (routineName) => {
     try {
         const response = await fetchWithOptions(`/api/routine/videos?routine_name=${encodeURIComponent(routineName)}`, {
             method: 'GET',
@@ -67,14 +67,14 @@ export const getRoutineVideos = async (routineName) => {
     }
 };
 
-export const createRoutine = async (routineName) => {
+ const createRoutine = async (routineName) => {
     return await fetchWithOptions('/api/routine', {
         method: 'POST',
         body: JSON.stringify({ routine_name: routineName }),
     });
 };
 
-export const deleteRoutine = async (routineName) => {
+ const deleteRoutine = async (routineName) => {
     return await fetchWithOptions('/api/routine', {
         method: 'DELETE',
         body: JSON.stringify({ routine_name: routineName }),
@@ -102,4 +102,4 @@ async function addRoutineVideo(data){
 }
 
 
-export { addRoutineVideo, addExerciseRecord, getUserRoutines, getRoutineVideos, deleteRoutine };
+export { addRoutineVideo, addExerciseRecord, getUserRoutines, getRoutineVideos, createRoutine, deleteRoutine };

front/src/components/routine/List.jsx

 import React, { useState, useEffect } from "react";
 import "./List.css";
 import truncateText from './truncateText';
-import routineAPI from '../../api/routineAPI';
+import {getUserRoutines, getRoutineVideos, deleteRoutine, createRoutine} from '../../api/routineAPI';
 
 function List({ onRoutineSelect, isActive }) {
   const [routines, setRoutines] = useState([]);
@@ -43,12 +43,12 @@ function List({ onRoutineSelect, isActive }) {
   // 루틴 데이터와 비디오 데이터 함께 가져오기
   const fetchRoutines = async () => {
     try {
-      const routineData = await routineAPI.getUserRoutines();
+      const routineData = await getUserRoutines();
       if (routineData) {
         // 각 루틴에 대해 비디오 정보 가져오기
         const routinesWithVideos = await Promise.all(
           routineData.map(async (routine) => {
-            const videos = await routineAPI.getRoutineVideos(routine.routine_name);
+            const videos = await getRoutineVideos(routine.routine_name);
             return {
               ...routine,
               exercises: videos.map(video => ({
@@ -88,7 +88,7 @@ function List({ onRoutineSelect, isActive }) {
 
   const handledelete = async (name) => {
     try {
-      await routineAPI.deleteRoutine(name);
+      await deleteRoutine(name);
       setIsModalOpen(false);
       await fetchRoutines(); // 삭제 후 목록 새로고침
     } catch (err) {
@@ -101,7 +101,7 @@ function List({ onRoutineSelect, isActive }) {
       const routineName = prompt("새로운 루틴의 이름을 입력하세요:");
       if (!routineName) return;
       
-      await routineAPI.createRoutine(routineName);
+      await createRoutine(routineName);
       await fetchRoutines();
     } catch (err) {
       console.error("루틴 추가 실패:", err);

front/src/components/workout/VideoDetails.jsx

@@ -30,14 +30,20 @@ function VideoDetails({video, routines}) {
                     <span>{secToTime(video.video_length)}</span> 
                     <span><FontAwesomeIcon icon={faHeart} /> {video.video_likes}<br/></span>
                 </span>
-                <select name="routines" id="routines">
-                {routines.map((item) => (
+                {routines ? (
                     <>
-                    <option value={item}>{item}</option>
-                    </>
+                <select>
+                    {routines.map((item, index) => (
+                    <option key={index} value={item}>
+                        {item}
+                    </option>
                     ))}
                 </select>
                 <button className="addbutton" onClick={addRoutine}>추가</button>
+                </>
+                ) : (
+                <label>추가할 루틴이 없습니다.</label>
+                )}
             </div>
         </div>
     );