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