diff --git a/front/src/assets/explains.json b/front/src/assets/explains.json
index 9b45d0b7e490750264983caa39c776b96406a8db..e2021cf7351665f23d72de307831941cdc22a51e 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 4b05abf47ac6c9f5a29da546fd3f22170413a27d..143d20a8464848f208be5ca5f27304c6d31edf98 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 0458d00bc16ca7618f73e419643c9ba050c185b2..03794c3d93f6d6749bb5bd14f19d84f2694ed98c 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 db03726db9128656670ac7cc07edac5836b5f6a7..1f07ab214dfd91d6a5766fa7dbc0746e52830305 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 811b7e0e75872ad8831c94bc5de2e903889ae0ba..2e1e3f098a6e4edfee1a2dc3780397abf66b59b6 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 e34aaadb81bd73f3bf39d5777119c2145fb7ed5d..9c0d752f3eef15a90dc9e81398823e505d50d2a2 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 8ace8a131a5820cdb8257979b5734e7040782f0f..40bdd2826b7da27f82986b8d6ed1dfc92c1d0c04 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 5d5a618cfd7fbdfa00ac849749b79d93698e7a85..49e907dd55fa1a973145705f9b9799944186e537 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 4ef7bee642fb442da19014dfccd285be78c79768..c8c48eaa1c9d6ad404d4826a007a19539cc29643 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;
}