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