Merge pull request #25 from osohyun0224/master

[Feat/FE] 관리자 운동 등록 시, 해당 강의 확인 가능하도록 구현 및 자동으로 강좌의 time 등록
MotuS-Web · Aug 28, 2023 · f94de16 · f94de16
2 parents 46be28b + ffa88bf
commit f94de16
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 37 deletions.
diff --git a/src/components/CourseCard.jsx b/src/components/CourseCard.jsx
@@ -100,7 +100,7 @@ const CourseCard = ({ id, image, title, description, time, tags }) => {
         <CourseInfo>
           <CourseTitle>{title}</CourseTitle>
           <CourseDescription>{description}</CourseDescription>
-          <CourseTime>{time / 60} 초</CourseTime>
+          <CourseTime>{time } 초</CourseTime>
           <HorizontalLine />
           <TagContainer>
             {tags && tags.map((tag, index) => (

diff --git a/src/librarys/exercise-api.js b/src/librarys/exercise-api.js
@@ -8,31 +8,31 @@ const courseList = [
         id: 1,
         title: "거북목 탈출코스",
         description: "이 코스는 목과 어깨의 근육을 이완시켜주는 운동을 포함하고 있습니다.",
-        time: 900,
+        time: 15,
         image: shoulder,
         tags: ["어깨", "앉은 자세"]
     },
     {
         id: 2,
         title: "코어 강화 코스",
         description: "코어 근육을 강화하는데 초점을 둔 운동을 학습합니다.",
-        time: 900,
+        time: 15,
         image: arms,
         tags: ["팔", "선 자세"]
     },
     { 
       id: 3,
       title: "하체 강화 코스",
       description: "다리와 엉덩이 근육을 강화하는 운동을 진행합니다.",
-      time: 900,
+      time: 15,
       image: thigh,
       tags: ["허벅지", "선 자세"]
     },
     { 
       id: 4,
       title: "유연성 향상 코스",
       description: "몸의 유연성을 높이는 스트레칭 운동을 포함하고 있습니다.",
-      time: 900,
+      time: 15,
       image: shoulder,
       tags: ["어깨", "앉은 자세"]
     },
@@ -41,31 +41,31 @@ const courseList = [
       id: 5,
       title: "유산소 운동 코스",
       description: "심장 건강과 체력 향상을 위한 유산소 운동을 합니다.",
-      time: 900,
+      time: 15,
       image: shoulder,
       tags: ["어깨", "선 자세"]
     },
     { 
       id: 6,
       title: "근력 운동 코스",
       description: "체중을 이용한 근력 운동을 중점적으로 합니다.",
-      time:  900,
+      time:  15,
       image: thigh,
       tags: ["허벅지", "선 자세", "앉은 자세"]
     },
     { 
       id: 7,
       title: "밸런스 트레이닝",
       description: "몸의 균형 능력을 향상시키기 위한 운동 코스입니다.",
-      time:  900,
+      time:  15,
       image: shoulder,
       tags: ["어깨", "앉은 자세"]
     },
     { 
       id: 8,
       title: "포스쳐 교정 코스",
       description: "올바른 자세를 유지하기 위한 교정 운동을 포함하고 있습니다.",
-      time: 900,
+      time: 15,
       image: knee,
       tags: ["무릎", "선 자세"]
     },

diff --git a/src/pages/AddExercise.jsx b/src/pages/AddExercise.jsx
@@ -1,7 +1,12 @@
 import Header from "../components/Header";
 import styled from "styled-components";
 import dumbbell from "../assets/images/dumbbell.png";
-import { useState } from "react";
+import { useState , useRef } from "react";
+
+import arms from "../assets/images/arms-up.webp";
+import knee from "../assets/images/knee.webp";
+import shoulder from "../assets/images/shoulder-up.webp";
+import thigh from "../assets/images/thigh.webp";
 
 const Background = styled.div`
   width: 100%;
@@ -23,7 +28,7 @@ const ProgramText = styled.p`
   bottom: 20px;
   left: 118px;
   font-family: "SUIT Variable";
-  font-weight:bold;
+  font-weight: bold;
 `;
 
 const ContentContainer = styled.div`
@@ -98,7 +103,7 @@ const TagTitle = styled.h3`
   font-weight: bold;
   margin-top: 30px;
   margin-bottom: 20px;
-  margin-left: -110px; 
+  margin-left: -110px;
 `;
 
 const TagRow = styled.div`
@@ -108,7 +113,7 @@ const TagRow = styled.div`
 
 const TagTitleInline = styled(TagTitle)`
   margin-right: 20px;
-  margin-left: 0; 
+  margin-left: 0;
 `;
 
 const TagButton = styled.button`
@@ -141,7 +146,7 @@ const TagsContainer = styled.div`
 const RegisterButton = styled.button`
   width: 200px;
   height: 50px;
-  background-color: #AD5DFD;
+  background-color: #ad5dfd;
   color: white;
   border-radius: 10px;
   border: none;
@@ -150,26 +155,84 @@ const RegisterButton = styled.button`
   margin-bottom: 20px;
 
   &:hover {
-    background-color: #8F47D4;  
+    background-color: #8f47d4;
   }
 
   &:focus {
     outline: none;
   }
 `;
 
+const categoryImages = {
+  "팔": arms,
+  "어깨": shoulder,
+  "무릎": knee,
+  "허벅지": thigh
+};
+
+
 const AddExercise = () => {
   const [videoSrc, setVideoSrc] = useState(null);
   const [selectedCategory, setSelectedCategory] = useState(null);
   const [selectedPose, setSelectedPose] = useState(null);
 
+  // videoRef 생성 > 관리자가 비디오를 등록하면 자동으로 해당 비디오의 길이를 time정보로 넘겨주는 기능을 구현함.
+  const videoRef = useRef(null);
   const handleVideoChange = (event) => {
     const file = event.target.files[0];
     if (file) {
       setVideoSrc(URL.createObjectURL(file));
     }
   };
 
+  const handleVideoMetadataLoaded = () => {
+    // 비디오 길이를 가져와서 courseData에 저장함
+    const videoDuration = Math.round(videoRef.current.duration);
+    setCourseData((prev) => ({ ...prev, time: videoDuration }));
+  };
+
+  /* 백엔드 api 연결 프론트단에서 임시로 구현*/
+  const [courseData, setCourseData] = useState({
+    video: null,
+    title: "",
+    description: "",
+    category: null,
+    posture: null,
+  });
+
+  const handleTitleChange = (e) => {
+    setCourseData((prev) => ({ ...prev, title: e.target.value }));
+  };
+
+  const handleDescriptionChange = (e) => {
+    setCourseData((prev) => ({ ...prev, description: e.target.value }));
+  };
+
+  const handleRegister = () => {
+    let existingCourses = JSON.parse(localStorage.getItem("courses")) || [];
+    existingCourses.push({
+      id: new Date().getTime(),
+      ...courseData,
+      category: selectedCategory,
+      posture: selectedPose,
+      image: categoryImages[selectedCategory], 
+      tags: [selectedCategory, selectedPose]
+    });
+    localStorage.setItem("courses", JSON.stringify(existingCourses));
+    alert("운동이 등록되었습니다.");
+
+    // 초기화해둠요
+    setCourseData({
+      video: null,
+      title: "",
+      description: "",
+      category: null,
+      posture: null,
+    });
+    setSelectedCategory(null);
+    setSelectedPose(null);
+  };
+
   return (
     <div>
       <Header />
@@ -179,29 +242,38 @@ const AddExercise = () => {
       </Background>
 
       <ContentContainer>
-        <UploadContainer>
-          <VideoTitleText>가이드 영상 업로드</VideoTitleText>
-          <VideoUploadLabel>
-            {videoSrc ? (
-              <VideoPreview controls src={videoSrc}></VideoPreview>
-            ) : (
-              "등록하기"
-            )}
-            <VideoUploadBox onChange={handleVideoChange} />
-          </VideoUploadLabel>
-        </UploadContainer>
+      <UploadContainer>
+        <VideoTitleText>가이드 영상 업로드</VideoTitleText>
+        <VideoUploadLabel>
+  {videoSrc ? (
+    <VideoPreview
+      controls
+      src={videoSrc}
+      ref={videoRef}
+      onLoadedMetadata={handleVideoMetadataLoaded}
+      key={videoSrc} 
+    ></VideoPreview>
+  ) : (
+    "등록하기"
+  )}
+  <VideoUploadBox onChange={handleVideoChange} />
+</VideoUploadLabel>
+      </UploadContainer>
 
         <TextContainer>
           <TitleText>운동 제목 등록</TitleText>
           <StyledInput
             placeholder="최대 50글자까지 입력 가능합니다."
             maxLength={50}
+            value={courseData.title}
+            onChange={handleTitleChange}
           />
-
-          <TitleText style={{ marginTop: "10px" }}>운동 설명 등록</TitleText>
+          <TitleText>운동 설명 등록</TitleText>
           <StyledTextarea
             placeholder="최대 200글자까지 입력 가능합니다."
             maxLength={200}
+            value={courseData.description}
+            onChange={handleDescriptionChange}
           />
         </TextContainer>
       </ContentContainer>
@@ -258,8 +330,8 @@ const AddExercise = () => {
         </TagRow>
       </TagsContainer>
       <ContentContainer>
-      <RegisterButton>등록하기</RegisterButton>
-    </ContentContainer>
+        <RegisterButton onClick={handleRegister}>등록하기</RegisterButton>
+      </ContentContainer>
     </div>
   );
 };

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -70,32 +70,36 @@ const CardContainer = styled.div`
   max-width: 1200px;
 `;
 
+
 const MainPage = () => {
   const [selectedCategory, setSelectedCategory] = useState(null);
   const [selectedPosture, setSelectedPosture] = useState(null);
   const [courses, setCourses] = useState([]);
 
   useEffect(() => {
     const fetchCourses = async () => {
-      const allCourses = await getAllCourses();
-      setCourses(allCourses);
+      const apiCourses = await getAllCourses();
+      const localCourses = JSON.parse(localStorage.getItem('courses')) || [];
+      setCourses([...apiCourses, ...localCourses]);
     };
-
+  
     fetchCourses();
   }, []);
 
   const filteredCourses = courses.filter((course) => {
     if (!selectedCategory && !selectedPosture) return true;
     if (selectedCategory && !selectedPosture)
-      return course.tags.includes(selectedCategory);
+      return course.category === selectedCategory;
     if (!selectedCategory && selectedPosture)
-      return course.tags.includes(selectedPosture);
+      return course.posture === selectedPosture;
     return (
-      course.tags.includes(selectedCategory) &&
-      course.tags.includes(selectedPosture)
+      course.category === selectedCategory &&
+      course.posture === selectedPosture
     );
   });
 
+
+
   return (
     <div>
       <Header />