Feat: 근육 설명 추가

front/src/assets/explains.json

+[
+    {
+        "name" : "가자미근 (Soleus muscle)",
+        "explains" : "정강이 뒤에 있는 하퇴삼두근을 구성하고 있는 가자미모양의 근육입니다. 종아리 근육인 비복근과 함께 발을 아래로 굽히는 동작을 도와주고 서 있을 때는 자세를 유지하는데 쓰이며, 걷는 동안 몸을 안정적으로 지탱해줍니다. 굽이 높은 신발을 신는 경우 해당 부위의 근육이 더 많이 사용됩니다. 가자미근이 피로해지면 통증이 주로 가자미근의 안쪽 아래 부분, 발뒤꿈치, 그리고 아킬레스건에 나타날 수 있습니다. 발끝을 잡아 발목을 몸 쪽으로 당기는 스트레칭이나, 계단 끝에 발을 올려 뒤꿈치를 내리는 동작을 통해 가자미근의 피로를 풀어줄 수 있습니다.",
+        "source" : "[네이버 지식백과] [넙치근](https://terms.naver.com/entry.naver?docId=1076186) [soleus muscle] (두산백과 두피디아, 두산백과) "
+
+    },
+    {
+        "id" : "thighs",
+        "name" : "대퇴사두근 (Quadriceps femoris)",
+        "explains" : "앞 허벅지로 잘 알려진  대퇴사두근은 넓적다리 안 쪽의 큰 근육으로 네 가지 주요 근육(대퇴직근·외측광근·중간광근·내측광근) 으로 구성됩니다. 이 근육은 주로 무릎을 피는 동작을 담당하며 이동할 때 골반과 무릎을 안정시키고 체중을 지지하는데  매우 중요한 역할을 합니다. 대퇴사두근의 유연성이 부족하거나 적절한 스트레칭을 하지 않으면 골반이 앞으로 기울어지는 현상이 발생할 수 있으며 체중을 지지하는 능력을 약화시킵니다. 대퇴사두근을 강화하기 위한 대표적인 운동으로는 레그 익스텐션, 바벨 스쿼트, 덤벨 스쿼트, 레그 프레스, 바벨 런지, 덤벨 스텝업 등이 있습니다.",
+        "source" : " [네이버 지식백과] [대퇴사두근](https://terms.naver.com/entry.naver?docId=1081589) [musculus quadriceps femoris, 大腿四頭筋] (두산백과 두피디아, 두산백과)"
+    },
+    {
+        "name" : "비복근 (Gastrocnemius muscle)",
+        "explains" : "종아리 뒤쪽에 위치한 두 갈래로 나뉜 근육을 비복근이라 하며 허벅지뼈(넓적다리뼈)에서 시작해 발뒤꿈치까지 이어집니다. 비복근은 발뒤꿈치를 들거나 무릎을 굽히는 역할을 합니다. 이로 인해 걷기, 달리기, 점프 같은 다양한 움직임을 가능하게 해줍니다. 특히 단거리 달리기와 점프처럼 순간적으로 강한 힘이 필요한 동작에서 사용됩니다. 뛰다가 갑작스럽게 방향을 바꾸거나 과도한 움직임을 할 경우, 비복근이 손상되거나 파열될 위험이 있습니다. 평상시에도 벽을 향해 서서 한쪽 다리를 뒤로 뻗고 앞다리를 살짝 구부린 채 뒷다리의 종아리가 늘어나도록 하는 등의 스트레칭을 통해 충분히 풀어주어야 합니다.",
+        "source" : "[네이버 지식백과] [비복근](https://terms.naver.com/entry.naver?docId=1106015) [gastrocnemius, 腓腹筋] (두산백과 두피디아, 두산백과)"
+    },
+    {
+        "id" : "chest",
+        "name" : "대흉근 (Pectoralis major muscle)",
+        "explains" : "대흉근은 가슴 앞부분에 위치한 크고 평평한 근육으로, 쇄골 중앙과 흉골, 늑연골, 복직근초에서 시작해 상완골에 붙어 상체의 운동을 담당하고 있습니다. 이 근육은 팔을 안쪽으로 돌리고 팔을 앞으로 밀거나 당기는 역할을 합니다. 주로 역도 선수나 근육을 많이 사용하는 사람들에게 잘 발달되어 있는 근육입니다. 대흉근을 강화하면 밀고 당기는 힘이 강해지고 가슴과 어깨의 안정성이 향상됩니다. 대표적인 강화 운동으로는 푸시업, 벤치프레스, 덤벨 플라이 등이 있으며 이 운동들은 가슴 근육을 발달시키는 데 효과적입니다.  또한, 손을 대고 팔꿈치를 구부린 상태로 팔을 벽에 대고 가슴을 앞으로 밀어 스트레칭을 해줄 수 있습니다.",
+        "source" : "[네이버 지식백과] [대흉근](https://terms.naver.com/entry.naver?docId=1081884) [musculus pectoralis major, 大胸筋] (두산백과 두피디아, 두산백과)"
+    },
+    {
+        "id" :  "glutes",
+        "name" : "둔근 (Gluteal muscle)",
+        "explains" : "둔근은 엉덩이를 형성하는 근육으로, 엉덩뼈의 바깥면에 위치하며 다리 근육 중 가장 윗부분에 속합니다. 둔근은 고관절의 움직임에 중요한 역할을 합니다. 큰볼기근은 다리를 고정하고 골반과 몸통을 뒤로 당겨서 우리가 똑바로 서 있을 수 있게 도와줍니다. 중간볼기근은 허벅지를 몸의 바깥쪽으로 움직여서 걷거나 달릴 때 균형을 잡는 데 중요한 역할을 합니다. 대표적인 강화 운동으로는 스쿼트, 힙쓰러스트, 런지 등이 있으며, 이 운동들은 둔근을 효과적으로 발달시킬 수 있습니다.",
+        "source" : "[네이버 지식백과] [대둔근](https://terms.naver.com/entry.naver?docId=1080751) [Gluteus maximus, 大臀筋] (두산백과 두피디아, 두산백과)"
+    },
+    {
+        "id" : "abs",
+        "name" : "복직근 (Rectus Abdominis)",
+        "explains" : "복직근은 배 앞쪽에 위치한 긴 사각형 모양의 근육으로 복부의 전면을 덮고 있습니다. 이 근육은 몸통을 앞으로 굽히는 역할을 하며 주로 몸을 구부리거나 앉을 때 사용됩니다. 복직근을 강화하면 허리 통증을 줄이고, 체형 개선에 도움이 됩니다. 대표적인 운동으로는 윗몸일으키기, 플랭크, 복부 압력을 높이지 않는 운동 등이 있으며, 복횡근을 사용하는 운동도 효과적입니다.",
+        "source" : "[네이버 지식백과] [복직근](https://terms.naver.com/entry.naver?docId=1103126) [腹直筋] (두산백과 두피디아, 두산백과)"
+    },
+    {
+        "id" : "shoulders",
+        "name" : "삼각근 (Deltoid)",
+        "explains" : "삼각근은 어깨를 덮고 있는 삼각형 모양의 근육으로 어깨관절의 움직임에 중요한 역할을 합니다. 삼각근은 어깨를 위로 올리고, 앞으로 혹은 뒤로 움직이는 기능을 하며, 어깨의 전반적인 움직임을 돕습니다. 삼각근을 강화하면 어깨의 안정성과 힘을 향상시킬 수 있 대표적인 운동으로는 덤벨 숄더 프레스, 랫 풀, 프론트 레이즈, 사이드 레이즈 등이 있습니다.",
+        "source" : "[네이버 지식백과] [삼각근](https://terms.naver.com/entry.naver?docId=1109047) [deltoid muscle, 三角筋] (두산백과 두피디아, 두산백과)"
+    },
+    {
+        "name" : "삼두근 (Triceps Brachii)",
+        "explains" : "삼두근은 팔꿈치 뒤쪽에 위치한 근육으로, 팔꿈치를 펴는 역할을 합니다. 팔꿈치를 굽히고 펴는 동작에서 삼두근은 팔이두근과 함께 작용하며 팔꿈치를 수축하는 기능을 수행합니다. 이 근육은 팔꿈치를 펴는 것뿐만 아니라, 어깨 근육의 수축을 도와 팔이 몸통 쪽으로 움직이는 동작을 가능하게 합니다. 삼두근을 강화하면 팔꿈치를 펴는 힘이 강해지고 팔의 전반적인 힘과 형태가 개선됩니다. 대표적인 강화 운동으로는 트라이셉스 푸시다운, 트라이셉스 익스텐션, 덤벨 킥백 등이 있습니다.",
+        "source" : "[네이버 지식백과] [팔삼두근](https://terms.naver.com/entry.naver?docId=1109933) [triceps brachii muscle] (두산백과 두피디아, 두산백과)"
+    },
+    {
+        "id" : "back",
+        "name" : "등근육 (Latissimus Dorsi, Rhomboids, Trapezius)",
+        "explains" : "등근육은 등과 어깨를 덮고 있는 여러 근육(광배근, 척추기립근, 승모근)들을 의미합니다. 몸통을 뒤로 당기고 어깨를 아래로 내리는 역할을 담당하며, 등근육을 강화하면 등과 어깨의 안정성이 향상되고 체형 개선에도 도움이 됩니다. 등근육의 강화는디스크와 거북목, 라운드 숄더 등 여러 질환을 예방하고, 전반적인 신체 기능을 향상시키는 데 매우 효과적입니다. 대표적인 운동으로는 풀업, 랫 풀다운, 데드리프트, 바벨 로우 등이 있으며, 이 운동들은 등근육을 효과적으로 발달시킬 수 있습니다.",
+        "source" : "[네이버 지식백과] [등근육](https://terms.naver.com/entry.naver?docId=938722) [muscles of back] (서울대학교병원 신체기관정보)"
+    },
+    {
+        "name" : "전완근 (Forearm Muscles)",
+        "explains" : "전완근은 팔꿈치에서 손목 사이에 위치한 근육을 의미합니다. 이 근육은 다중관절근육으로 손을 펴고 쥐는 동작, 손목을 움직여 손을 올리고 내리는 동작, 팔꿈치를 움직여 아래팔을 올리고 내리는 역할을 합니다. 전완근을 강화하면 손목의 힘이 증가하고, 손목 부상 예방에 도움이 됩니다. 전완근을 강화하는 대표적인 운동으로는 바벨 컬, 리스트 등이 있으며 이 운동들은 전완근을 효과적으로 발달시킬 수 있습니다.",
+        "source" : "[네이버 지식백과] [전완근](https://terms.naver.com/entry.naver?docId=6209915) (건강용어사전)"
+    },
+    {
+        "name" : "이두근 (Biceps Brachii)",
+        "explains" : "이두근(biceps brachii)은 팔꿈치 위쪽에 위치한 주요 근육으로, 팔꿈치를 굽히는 동작과 팔을 회전시키는 역할을 합니다. 이 근육은 팔꿈치 굴곡을 도와 물건을 들어 올리거나 팔꿈치를 구부리는 동작에서 작용하기에 많은 운동에서 중요한 역할을 합니다. 예를 들어, 수영, 조정, 레슬링 등 다양한 스포츠에서 이두근의 강화는 성능을 향상시키는 데 기여하게 됩니다. 이두근이 약하면 던지기, 밀기, 들기 등 기능을 수행하기가 어려워집니. 이두근을 강화하기 위한 대표적인 운동으로는 덤벨 컬, 바벨 컬, 프리처 컬 등이 있으며, 이 운동들은 이두근을 효과적으로 발달시킬 수 있습니다.",
+        "source" : "[네이버 지식백과] [위팔 두 갈래근](https://terms.naver.com/entry.naver?docId=1109934) [biceps brachii muscle] (두산백과 두피디아, 두산백과)"
+    },
+    {
+        "name" : "햄스트링 (Hamstring Muscles)",
+        "explains" : "햄스트링은 허벅지 뒤쪽 부분의 엉덩이와 무릎관절을 연결하는 반건양근, 반막양근, 대퇴이두근 등 3개의 근육으로 이루어져있으며 걷기, 달리기, 점프하기, 볼기의 움직임 조절과 같은 여러 일상적인 활동을 할 때 햄스트링 사용됩니다. 햄스트링을 강화하는 것은 전반적인 다리의 안정성과 부상을 예방하는 데 매우 중요합니다. 대표적인 운동으로는 데드리프트, 런지, 레그 컬 등이 있는데 이를 통해 햄스트링을 효과적으로 발달시킬 수 있습니다.",
+        "source" : "[네이버 지식백과] [햄스트링](https://terms.naver.com/entry.naver?docId=933587) (시사상식사전, pmg 지식엔진연구소)"
+    }
+]
\ No newline at end of file

front/src/components/index.css

@@ -74,6 +74,7 @@ ul{
 }
 
 #videoLists{
+    border-top: solid 3px #B87EED;
     display: flex;
     flex-wrap: wrap;
     max-height: 25em; 

front/src/components/workout/VideoSelection.jsx

@@ -54,7 +54,7 @@ function VideoSelection({dispatch, setSelected}){
             setCurrentLevel(e.target.value);
             dispatch({
                 type: 'level',
-                level: e.target.value,
+                level: currentLevel,
             });
         }
     }

front/src/pages/Workout.jsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useReducer } from 'react';
 import VideoLists from '../components/workout/VideoLists';
 import VideoSelection from '../components/workout/VideoSelection';
 import Images from '../components/workout/Images';
+import explain from '../assets/explains.json';
 
 import { getEntireVideos, searchVideos} from '../api/workoutAPI';
 
@@ -13,8 +14,9 @@ function Explains({data, selected}){
     //p로 설명
     return (
         <div id="explains">
-            <h1>{selected}</h1>
-            {/* <p>{data[selected]}</p>   */}
+            <h1>{explain.find(item => item.id === selected)?.name}</h1>
+            <p className="content">{explain.find(item => item.id === selected)?.explains}</p>
+            <p className="source">{explain.find(item => item.id === selected)?.source}</p>  
         </div>
 
     );

front/src/pages/index.css

@@ -91,8 +91,8 @@ button{
 }
 
 #searchResults{
-    display: grid;
-    grid-template-rows: 1fr;
+    /* display: grid;
+    grid-template-rows: 1fr; */
 }
 
 input::placeholder{
@@ -147,3 +147,19 @@ input::placeholder{
     width: 100%;
     margin: 10px 0;
 }
+
+#explains{
+    margin: 10px;
+    padding: 10px;
+    max-height: 15em; 
+    overflow-y: scroll; 
+}
+
+.content{
+    color: black;
+}
+
+.source{
+    color: black;
+    font-size: small;
+}
\ No newline at end of file