From 9b2bf88b43c684412ca2c9342f1616c11a4bd03b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A7=80=EC=9C=A4?= <asdfasdf001234@ajou.ac.kr>
Date: Sun, 8 Dec 2024 19:07:01 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=98=81=EC=83=81=20=ED=81=B4=EB=A6=AD?=
 =?UTF-8?q?=20=EC=8B=9C=20=EC=9C=A0=ED=8A=9C=EB=B8=8C=20=EC=B0=BD=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/assets/explains.json                  |  3 ++-
 front/src/components/HabitTracker/SideBar.jsx   |  2 +-
 front/src/components/common/Thumbnails.jsx      |  6 +++++-
 front/src/components/index.css                  | 16 ++++++++++------
 front/src/components/user/SignUp.jsx            |  4 ++--
 front/src/components/workout/VideoDetails.jsx   |  1 -
 front/src/components/workout/VideoSelection.jsx | 16 ++++++++--------
 front/src/pages/Workout.jsx                     |  3 +--
 front/src/pages/index.css                       |  2 +-
 9 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/front/src/assets/explains.json b/front/src/assets/explains.json
index 9b45d0b..e2021cf 100644
--- a/front/src/assets/explains.json
+++ b/front/src/assets/explains.json
@@ -1,6 +1,7 @@
 [
     {
-        "name": ""
+        "name": "Fit Ur Ring Today!",
+        "explains": "우측의 부위명을 클릭해서 각 근육에 대한 설명을 보세요. 검색 옵션으로 맞춤 영상을 찾아 새롭게 시도해 보세요. 영상 블록을 클릭하면 영상에 관한 세부 정보 열람 및 루틴 추가 기능을 사용하실 수 있습니다. 오늘도 즐겁게 운동하세요!"
     },
     {
         "id" : "calf",
diff --git a/front/src/components/HabitTracker/SideBar.jsx b/front/src/components/HabitTracker/SideBar.jsx
index 4b05abf..143d20a 100644
--- a/front/src/components/HabitTracker/SideBar.jsx
+++ b/front/src/components/HabitTracker/SideBar.jsx
@@ -111,7 +111,7 @@ function SideBar({side, day, records, onDetail}){
         goal_weekly: null,
         goal_daily: [null, null, null, null, null, null, null],
         goal_daily_time: '00:00',
-        goal_weight: null,}
+        goal_weight: 0,}
     );
     const [user, setUser] = useState({
         user_id: null,
diff --git a/front/src/components/common/Thumbnails.jsx b/front/src/components/common/Thumbnails.jsx
index 0458d00..03794c3 100644
--- a/front/src/components/common/Thumbnails.jsx
+++ b/front/src/components/common/Thumbnails.jsx
@@ -1,8 +1,12 @@
 import react from 'react';
 
 function Thumbnails({video_id, video_title, mode}){
+    function handleClick(){
+        const url = `https://youtu.be/${video_id}`;
+        window.open(url, '_blank', 'noopener noreferrer');
+    }
     return (
-        <img className={`thumbnails-${mode}`} src={`https://img.youtube.com/vi/${video_id}/${mode}.jpg`} alt={video_title}/>
+        <img onClick={handleClick} className={`thumbnails-${mode}`} src={`https://img.youtube.com/vi/${video_id}/${mode}.jpg`} alt={video_title}/>
     )
 }
 
diff --git a/front/src/components/index.css b/front/src/components/index.css
index db03726..1f07ab2 100644
--- a/front/src/components/index.css
+++ b/front/src/components/index.css
@@ -150,7 +150,7 @@ ul{
 }
 
 #timeSelection input{
-    width: 2em;
+    width: 2.5em;
 }
 
 #videoSelection h3{
@@ -163,6 +163,7 @@ ul{
 
 #searchResults{
     background-color: #FFFFFF;
+    bottom: 0;
 }
 
 #videoLists{
@@ -243,17 +244,14 @@ input[type='date']{
     font-size: large;
     font-weight: bold;
 }
-input[type='radio']{
+#radio[type='radio']{
     min-width: 1rem;
     width: 2em;
     height: 2em;
     margin: 1em;
 }
 
-input[type='radio']:checked {
-    -webkit-appearance: none; 
-    -moz-appearance: none; 
-    appearance: none;
+#radio[type='radio']:checked {
     background-color: #B87EED; 
     border: 0.3em solid #FFFFFF; 
 }
@@ -310,3 +308,9 @@ input[type='radio']:checked {
     background-color: lightgray;
     margin: 10px;
 }
+
+#level{
+    width: 1em;
+    height: 1em;
+    margin: 10px;
+}
diff --git a/front/src/components/user/SignUp.jsx b/front/src/components/user/SignUp.jsx
index 811b7e0..2e1e3f0 100644
--- a/front/src/components/user/SignUp.jsx
+++ b/front/src/components/user/SignUp.jsx
@@ -61,9 +61,9 @@ function SignUp(){
                         onChange={(e) => setEmail(e.target.value)}></input>
                 <div className='inputbox'>
                     <label>남</label>
-                    <input type="radio" name="gender" value={"male"} onChange={(e) => setGender(e.target.value)}></input>
+                    <input id="radio" type="radio" name="gender" value={"male"} onChange={(e) => setGender(e.target.value)}></input>
                     <label>여</label>
-                    <input type="radio" name="gender" value={"female"} onChange={(e) => setGender(e.target.value)}></input>
+                    <input id="radio" type="radio" name="gender" value={"female"} onChange={(e) => setGender(e.target.value)}></input>
                 </div>
                 <div className='inputbox'>
                     <label>생년월일</label>
diff --git a/front/src/components/workout/VideoDetails.jsx b/front/src/components/workout/VideoDetails.jsx
index e34aaad..9c0d752 100644
--- a/front/src/components/workout/VideoDetails.jsx
+++ b/front/src/components/workout/VideoDetails.jsx
@@ -22,7 +22,6 @@ function VideoDetails({video, routines}) {
     return (
         <div className='videoDetails'>
         <Thumbnails video_id={video.video_id} video_title={video.video_title} mode="maxresdefault" />
-            {/*머있어야되지,, 일단  드롭다운 메뉴에서 루틴 선택하기 루틴에 추가하는 API부르기*/}
             <div className='left-align'>
                 <h2>{video.video_title}</h2>
                 <span className='details'>{video.channel_title}</span>
diff --git a/front/src/components/workout/VideoSelection.jsx b/front/src/components/workout/VideoSelection.jsx
index 8ace8a1..40bdd28 100644
--- a/front/src/components/workout/VideoSelection.jsx
+++ b/front/src/components/workout/VideoSelection.jsx
@@ -67,32 +67,32 @@ function VideoSelection({dispatch, setSelected}){
 
     return (
         <div id="videoSelection" className="col center">
-                <div className='col padding'>
+                <div className='col'>
                     <h3>난이도</h3>
                     <label>상
-                        <input type="radio" value="advanced" name="level" onClick={handleLevel} checked={currentLevel === 'advanced'} ></input>
+                        <input id="level" type="radio" value="advanced" name="level" onClick={handleLevel} checked={currentLevel === 'advanced'} ></input>
                     </label>
                     <label>하 
-                        <input type="radio" value="beginner" name="level" onClick={handleLevel} checked={currentLevel === 'beginner'}></input>
+                        <input id="level" type="radio" value="beginner" name="level" onClick={handleLevel} checked={currentLevel === 'beginner'}></input>
                     </label>
                 </div>
-                <div id="timeSelection" className="col center padding">
+                <div id="timeSelection" className="col center">
                     <h3>시간</h3>
                     <span> 
-                    <input type="number" name="startMin" onChange={handleChange} min={0}></input>
+                    <input type="number" name="startMin" onChange={(e) => setStartMin(parseInt(e.target.value))} min={0} defaultValue={0}></input>
                     {/* <input type="number" name="start"  value={startMin !== null ? startMin : ""}
                     onChange={(e) => {
                         const value = e.target.value;
                         setStartMin(value === "" ? null : parseInt(value, 10));
                     }}></input> */}
                     <span> 분</span>
-                    <input type="number" name="start" onChange={(e) => e.target.value === 0 ? setStartSec(null) : setStartSec(e.target.value)} min={0}></input>
+                    <input type="number" name="start" onChange={(e) => setStartSec(parseInt(e.target.value))} min={0} defaultValue={0}></input>
                     <span> 초</span>
                     </span>
                     <span> ~
-                    <input type="number" name="end" onChange={(e) => e.target.value === 1440 ? setEndMin(null) : setEndMin(e.target.value)} min={0}></input>
+                    <input type="number" name="end" onChange={(e) => setEndMin(parseInt(e.target.value))} min={0} defaultValue={1440}></input>
                     <span> 분 </span>
-                    <input type="number" name="start" onChange={(e) => e.target.value === 0 ? setEndSec(null) : e.target.value} min={0}></input>
+                    <input type="number" name="start" onChange={(e) => setEndSec(parseInt(e.target.value))} min={0} defaultValue={0}></input>
                     <span> 초</span>
                     </span>
                     <p>{warning}</p>
diff --git a/front/src/pages/Workout.jsx b/front/src/pages/Workout.jsx
index 5d5a618..49e907d 100644
--- a/front/src/pages/Workout.jsx
+++ b/front/src/pages/Workout.jsx
@@ -82,14 +82,13 @@ function Workout(){
             case 'tag': {
                     const newFilter = {...filter, video_tag: action.tag};
                     console.log(newFilter);
-                    return newFilter;
+                    return newFilter;   
             }
             case 'time': {
                 const newFilter = {...filter, video_time_from: action.start, video_time_to: action.end};
                 return newFilter;
             }
             case 'level':{
-                //레벨 다시 눌렀을때 없어질 수 있어야함...
                 const newFilter = {...filter, video_level: action.level};
                 return newFilter;
             }
diff --git a/front/src/pages/index.css b/front/src/pages/index.css
index 4ef7bee..c8c48ea 100644
--- a/front/src/pages/index.css
+++ b/front/src/pages/index.css
@@ -175,7 +175,7 @@ input::placeholder{
 #explains{
     margin: 10px;
     padding: 10px;
-    max-height: 15em; 
+    height: 15em;
     overflow-y: scroll; 
 }
 
-- 
GitLab