diff --git a/front/src/api/routineAPI.js b/front/src/api/routineAPI.js index 7f77d75d16eb14def1192e4c32ac6b7af0b1aacc..3aa88941cdbf68c18b60bbf012ad3ccb778b6d2c 100644 --- a/front/src/api/routineAPI.js +++ b/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,21 +67,21 @@ 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 }), }); } -async function addRoutineVideo(data){ + async function addRoutineVideo(data){ try{ const uri = `/api/routine/add` const response = await fetch(uri, { @@ -102,4 +102,4 @@ async function addRoutineVideo(data){ } -export { addRoutineVideo, addExerciseRecord, getUserRoutines, getRoutineVideos, deleteRoutine }; +export { addRoutineVideo, addExerciseRecord, getUserRoutines, getRoutineVideos, createRoutine, deleteRoutine }; diff --git a/front/src/components/routine/List.jsx b/front/src/components/routine/List.jsx index 774bf71bec55b8c4db24954ce321ebd75c4fd175..f5456e33377e6fa321096ff7ee69c2940031d3ab 100644 --- a/front/src/components/routine/List.jsx +++ b/front/src/components/routine/List.jsx @@ -1,7 +1,7 @@ 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); diff --git a/front/src/components/workout/VideoDetails.jsx b/front/src/components/workout/VideoDetails.jsx index 367789d7e4071a13417342cecfd6dfbe36d1244b..c3e0bff77ba64d2167938e1c41c94debfb4d0626 100644 --- a/front/src/components/workout/VideoDetails.jsx +++ b/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> );