From 9b266f8bf46992c3e91531ef0f3080c8a808f418 Mon Sep 17 00:00:00 2001 From: osohyun0224 Date: Mon, 2 Oct 2023 16:16:35 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Refactor:=20App.jsx=20=EB=AA=A8=EB=93=A0=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=9E=AC=EC=A0=95=EB=B9=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 2 -- src/App.scss | 2 +- src/index.scss | 2 +- src/pages/MainPage.jsx | 26 +++++++++++++++++++++----- 4 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 43e0970..b0b1d87 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,7 +7,6 @@ import { ModalProvider } from "./librarys/context.jsx"; import PlayerPage from "./pages/PlayerPage.jsx"; import store from "./redux/store.js"; -import LoginModal from "./components/LoginModal.jsx"; import { useEffect } from "react"; import { loadToken } from "./librarys/login-api.js"; import { login } from "./redux/userSlice.js"; @@ -53,7 +52,6 @@ function App() { - {routerList.map((item, index) => ( diff --git a/src/App.scss b/src/App.scss index a75022f..5dd5204 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,6 +2,6 @@ width: 100%; height: 100vh; margin: 0 auto; - background-color: #fff; + background-color: #1E1E1E; font-family: "SUIT Variable", sans-serif; } diff --git a/src/index.scss b/src/index.scss index d3f9f43..6784a79 100644 --- a/src/index.scss +++ b/src/index.scss @@ -21,7 +21,7 @@ html { } @font-face { - font-family: "SUITE Variable"; + font-family: "SUIT Variable"; font-weight: 300 900; src: url("https://cdn.jsdelivr.net/gh/sunn-us/SUITE/fonts/variable/woff2/SUITE-Variable.woff2") format("woff2-variations"); diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index c49a010..3b5b028 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -1,12 +1,28 @@ -import Header from "../components/Header"; +import styled from 'styled-components'; +const PageContainer = styled.div` + display: flex; + flex-direction: column; + height: 100vh; +`; + +const CenteredContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1; + margin-top: 50px; +`; const MainPage = () => { return ( -
-
-
+ + + + + ); -}; +} export default MainPage; From 101d50c07edd24c1581c1b7a019a9c2878f718ea Mon Sep 17 00:00:00 2001 From: osohyun0224 Date: Mon, 2 Oct 2023 16:34:22 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Feat:=20=EC=97=85=EB=A1=9C=EB=93=9C=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC,=20=EA=B2=80=EC=83=89=EB=B0=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/LOGO.png | Bin 0 -> 2571 bytes src/assets/icons/iconsearch.png | Bin 0 -> 520 bytes src/assets/icons/iconupload.png | Bin 0 -> 486 bytes src/components/SearchBar.jsx | 45 +++++++++++++++++++++++++++++ src/components/UploadButton.jsx | 36 +++++++++++++++++++++++ src/components/player/Subtitle.jsx | 4 ++- 6 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 src/assets/LOGO.png create mode 100644 src/assets/icons/iconsearch.png create mode 100644 src/assets/icons/iconupload.png create mode 100644 src/components/SearchBar.jsx create mode 100644 src/components/UploadButton.jsx diff --git a/src/assets/LOGO.png b/src/assets/LOGO.png new file mode 100644 index 0000000000000000000000000000000000000000..2198d04f26c0fbf2fcbbad4ae77cc0ffebf34f80 GIT binary patch literal 2571 zcmb`J_d6R3AH}0W6_;LV%%C>4LlIkuQ7cA@TwF6n?U+TiRIH-*b_JzWDXuC)({imw zj4G-|TM{F&YrFb-|AY63_xn8ObDnda=llCfMOvBs#>&qM004e7Gc~fk^qos-voK%M zF<#x}(yj%YI$;3-Hqd{?04OQry(}59wkB{u6B)988G!c;EDZpFmMpe&cc#mSN;4w^ z`zVIZ@?WU0rq>5~;1@$NW=i0)ri3C^EBoNuD;7-pOv+&WTSWWdnuJ*}#K9m8Jp1Il zPeWV0y6Fmp!v zSjZ;#mbqHm+9=P{ZDV(-lrm(=HhzHlIWgGU-k#5gh!*t-_n>GWqFJDS6{2DhW;s4R z<26qQ)AN$~%&Az+4NAPx4J*0#c@POE8IQsOG20RB-UBN`EAgc5^wDf5Vi{Fgz3lcj zy;oT8;Zqyy@|goF6+?X4w!e1D=@TE=ad}sJv1>=*pru~H5`Or{*7iv;KK;P2v4ZM) z@fU=&&unAa$@AGKdOt(jU(|KS_H0lw%^My2yAayezmAohu{TB=_yjiWEE_8K+f`Z20#s7M^K{H*`ij|C6I@vP#2ex(- zSBrbr`coiNIjpi(aMk%7C$<4(^^1*Zc@jVVri4M0300>|VUq z)#?&WkH+Xv#u3hA)?-QTp zpnfJin77f7mOiCpCXV7Nh2oP*Qws7hUEj0Fxj!ZIh&8Jf7YtsR-i|&8MpIuq&Q500 zZZAEFrMwaJ-Gd|F^@%;L!GKp>iYs=GS2Ib9anL%$=fxuU^28%wr{yugYCtGbopl81?7c83Nw?U}>jWcXz#B1@`+A z*skbSo2;s_VgoCFqUE-dlDw#4tR=K=IXPlM3fn-Fu2GO~Z~T}H>fxPs3O3!%ziY{E z{oSX}l>YRJ;9#G2Vp~P%A_S-5H|snS)i$v#qXnuG=yS{|rlbc21PG$QtOq}uL25@T zixB1^$e;<~->AKo`TaVs;)1Z%{dX4i(2B@0=crbRV_pPg(#-{leNn?gP- z`>D4n-A(xg6vXl7tkil}q1+-caofzy3*5uV!`5QsLehu1iJwLaI5JN(m4lYU=w}1c1wA30z2wyQ^4|vihb{t1R2ld_l|(j{D6>V|d7TO_kUUt_sRY!uL1(y7}SY7cnO#B{kUPmn z)_NuDSubavAcQvP>$J0B-X`CQakg;pmjj`DaGe7gEUUs_Q?CpW>qjs@_|zu(peySs z1Ld6`RDAq-tIh*Y-}cXz_3o>m_Ljv^k%V!-6O(dVncP4NNN{`Rl*>rhvrq?>QfV5 z>ry-@tC<92Vy>_nW#dK3EYu;f{*gkq!YP z7kf}~B3TBoe<#GRXz~>!Tb}IuaaedLc@(53E5lVpqWhf(92}@JF|Ib;)>(F23j+BW z{L2;f?=D((p$8F>qNer0EE%ly?~%u6=QT;;kJy{cE6VeeF9IvhUk_U8Ex~3T1{OS# zuI4wazwsWQ9^5aq=pxN$HPj$)%2~}0$ESY^xxIA=tb2EUQ7XqxjVy{Saf?9xb6YE%dNms{kL3=|8m9LR|ZvHc)4B zemDu0GoiMyhlEF!xG9kN)O(mz5%!PsSH3wO3EBD~OmD67oA9;5= z$2zQ^#BrRNKg3o*zO{D6n7EYB=X1&k0Uv$?dKa)h zUVQ+2jAwV7&Bii6us7q(mkzqis~*ZTDY86bJiZoM7=|(6IePLmc6x}ywh2rU zMNvT5?>G=Csv3~ZsX|ehO_DAF7{~$aq8hN%>8Jo1xk^k!;o_sb1lU(clz<$_?bNgs zRh&sMzXZ%TKTUfnTBqzGL+Ty%7K=roR%0a9v(A3M{~8X5-yA*<1_Q(Q?i!4jGC}v1WkRd1tLOIO z))mu|FfzuBP|{1qyx*3*kRT6PdbO8jE1^tf#PDUnoZ*eSK;fwf%GV2NN&s)!H&v)L z4iOl|QT`-lq#UOL6-CH@C^e`P*i>B5n}9Cp&A@P)b%bUugjnHQpwDB~_x%Ci3;O#wjw_!Z;WKF4_5lvJ8emh^bzKf%;jkg; znrxcp382CQVkJ__XSR14StCR0*6e_OC`5RV2+LV8eLfjLyvt;25u$y=+1=5!6o5AX zs_zqW1WA-qJ3wk3QDSkHM^Th=YndO4X=*|m5CE^(ZANb8VHj?>quWVf5Ckiop;H)x z$R5cF$jAmnnp4gYGW8DVF#ySha1O`^WbvH@bZ4qmfX?Yl=?u_VaL6{+(nrxO1&nHP z+#{r<8uhuX4`z(4q}b^3dZ3@!{9tZ>MV<>gb^uu9ns*6n7ZN`obQwhqE9o+-IE@9q z$C(Qq7R}R9yrC*2(4?aqO cw&suZ6T>mLwCdFB1(f|Me literal 0 HcmV?d00001 diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx new file mode 100644 index 0000000..def963b --- /dev/null +++ b/src/components/SearchBar.jsx @@ -0,0 +1,45 @@ +import styled from 'styled-components'; +import Iconsearch from '../assets/icons/iconsearch.png'; + +const SearchContainer = styled.div` + width: 750px; + height: 50px; + background-color: #242424; + border: 1px solid #444444; + border-radius: 50px; + display: flex; + align-items: center; +`; + +const SearchIcon = styled.img` + width: 20px; + height: 20px; + margin-left: 10px; +`; + +const SearchInput = styled.input` + width: calc(100% - 40px); + height: 100%; + border: none; + background-color: transparent; + font-size: 14px; + color: #000; + padding-left: 10px; + &::placeholder { + color: #C8C8C8; + } + &:focus { + outline: none; + } +`; + +const SearchBar = () => { + return ( + + + + + ); +}; + +export default SearchBar; diff --git a/src/components/UploadButton.jsx b/src/components/UploadButton.jsx new file mode 100644 index 0000000..481596a --- /dev/null +++ b/src/components/UploadButton.jsx @@ -0,0 +1,36 @@ +import styled from 'styled-components'; +import Iconupload from '../assets/icons/iconupload.png'; + +const ButtonContainer = styled.button` + width: 170px; + height: 44px; + background-color: #6968CC; + border-radius: 10px; + display: flex; + align-items: center; + border: none; + padding: 0 10px; + cursor: pointer; +`; + +const ButtonIcon = styled.img` + width: 20px; + height: 20px; + margin-right: 10px; +`; + +const ButtonText = styled.span` + font-size: 16px; + color: #F2F2F2; +`; + +const UploadButton = () => { + return ( + + + 영상 게시하기 + + ); +}; + +export default UploadButton; diff --git a/src/components/player/Subtitle.jsx b/src/components/player/Subtitle.jsx index debdc48..0f6ff70 100644 --- a/src/components/player/Subtitle.jsx +++ b/src/components/player/Subtitle.jsx @@ -1,4 +1,6 @@ -import { useState, useEffect, useRef } from "react"; +import SearchBar from "../SearchBar"; +import UploadButton from "../UploadButton"; +import LogoImage from "../../assets/LOGO.png"; import styled from "styled-components"; import PropTypes from "prop-types"; From b0b4d6269529eb0c5571fec95168664ad2ef40b4 Mon Sep 17 00:00:00 2001 From: osohyun0224 Date: Mon, 2 Oct 2023 16:48:35 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Feat:=20=ED=97=A4=EB=8D=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/{ => icons}/LOGO.png | Bin src/components/Header.jsx | 118 +++++------------------------ src/components/SearchBar.jsx | 1 + src/components/UploadButton.jsx | 6 +- src/components/player/Subtitle.jsx | 4 +- src/pages/MainPage.jsx | 3 +- 6 files changed, 25 insertions(+), 107 deletions(-) rename src/assets/{ => icons}/LOGO.png (100%) diff --git a/src/assets/LOGO.png b/src/assets/icons/LOGO.png similarity index 100% rename from src/assets/LOGO.png rename to src/assets/icons/LOGO.png diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 135bafa..9b6690f 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,116 +1,32 @@ +import SearchBar from "./SearchBar"; +import UploadButton from "./UploadButton"; import styled from "styled-components"; -import { Link } from "react-router-dom"; -import { useDispatch, useSelector } from "react-redux"; -import { - selectName, - selectIsLoggedIn, - selectIsAdmin, - logout, -} from "../redux/userSlice.js"; -import { show } from "../redux/modalSlice.js"; -import { clearToken } from "../librarys/login-api.js"; +import LogoImage from "../assets/icons/LOGO.png"; -const HeaderWrapper = styled.header` +const HeaderContainer = styled.div` display: flex; align-items: center; - padding: 10px 20px; - font-weight: bold; - position: relative; - margin-top: 20px; -`; - -const Logo = styled.div` - font-size: 24px; - font-weight: bold; - position: absolute; - left: 100px; - top: 50%; - transform: translateY(-50%); -`; - -const Nav = styled.nav` - display: flex; - position: absolute; - right: 70px; - align-items: center; `; -const MainLink = styled(Link)` - text-decoration: none; - color: black; - &:hover, - &:active, - &:focus { - text-decoration: none; - outline: none; - } +const Logo = styled.img` + margin-top: 20px; + margin-left: 420px; + margin-right: 10px; `; -const Divider = styled.div` - height: 30px; - width: 1px; - background-color: black; - margin-left: 20px; - margin-right: 30px; +const Spacer = styled.div` + width: 10px; `; const Header = () => { - const dispatch = useDispatch(); - - const userName = useSelector(selectName); - const isLoggedIn = useSelector(selectIsLoggedIn); - const isAdmin = useSelector(selectIsAdmin); - - const handleLoginClick = () => { - if (isLoggedIn) { - if (confirm("로그아웃 하시겠습니끼?")) { - clearToken(); - dispatch(logout()); - } - } else { - dispatch(show("login")); // 로그인 모달을 표시 - } - }; - return ( - - - Re:Hab - - - + + + + + + + ); }; diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx index def963b..7c26b08 100644 --- a/src/components/SearchBar.jsx +++ b/src/components/SearchBar.jsx @@ -9,6 +9,7 @@ const SearchContainer = styled.div` border-radius: 50px; display: flex; align-items: center; + margin-top: 20px; `; const SearchIcon = styled.img` diff --git a/src/components/UploadButton.jsx b/src/components/UploadButton.jsx index 481596a..a3471e2 100644 --- a/src/components/UploadButton.jsx +++ b/src/components/UploadButton.jsx @@ -11,12 +11,14 @@ const ButtonContainer = styled.button` border: none; padding: 0 10px; cursor: pointer; + margin-top: 20px; `; const ButtonIcon = styled.img` - width: 20px; + width: 30px; height: 20px; - margin-right: 10px; + margin-left:10px; + margin-right: 10px; `; const ButtonText = styled.span` diff --git a/src/components/player/Subtitle.jsx b/src/components/player/Subtitle.jsx index 0f6ff70..debdc48 100644 --- a/src/components/player/Subtitle.jsx +++ b/src/components/player/Subtitle.jsx @@ -1,6 +1,4 @@ -import SearchBar from "../SearchBar"; -import UploadButton from "../UploadButton"; -import LogoImage from "../../assets/LOGO.png"; +import { useState, useEffect, useRef } from "react"; import styled from "styled-components"; import PropTypes from "prop-types"; diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index 3b5b028..a43f334 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import Header from '../components/Header'; const PageContainer = styled.div` display: flex; @@ -18,7 +19,7 @@ const CenteredContainer = styled.div` const MainPage = () => { return ( - +
From 80f6688bdd74925632c8d2137f1ef61160467b4e Mon Sep 17 00:00:00 2001 From: osohyun0224 Date: Mon, 2 Oct 2023 17:06:16 +0900 Subject: [PATCH 4/6] =?UTF-8?q?Feat:=20=ED=95=84=ED=84=B0=EB=A7=81=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FilterButtons.jsx | 82 ++++++++++++++++++++++++++++++++ src/pages/MainPage.jsx | 2 + 2 files changed, 84 insertions(+) create mode 100644 src/components/FilterButtons.jsx diff --git a/src/components/FilterButtons.jsx b/src/components/FilterButtons.jsx new file mode 100644 index 0000000..e46b3a3 --- /dev/null +++ b/src/components/FilterButtons.jsx @@ -0,0 +1,82 @@ +import { useState } from 'react'; +import styled from 'styled-components'; + +const FilterSection = styled.div` + display: flex; + align-items: center; + margin-right: 10px; + margin-top: 20px +`; + +const Title = styled.span` + font-size: 20px; + font-weight: bold; + color: #5F5F5F; + width: 120px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 10px; +`; + + +const Divider = styled.div` + width: 2px; + height: 20px; + background-color: #5F5F5F; + margin-right: 10px; +`; + +const Button = styled.button` + width: 100px; + height: 36px; + background-color: ${props => (props.selected ? '#6968CC' : '#1E1E1E')}; + color: #F2F2F2; + border-radius: 10px; + font-size: 16px; + border: none; + margin-right: 5px; + + &:focus { + outline: none; + } +`; + +const FilterButtons = () => { + const [selectedCategory, setSelectedCategory] = useState('전체'); + const [selectedPose, setSelectedPose] = useState('전체'); + + return ( +
+ + 카테고리 + + {['전체', '팔', '어깨', '무릎', '허벅지'].map(category => ( + + ))} + + + + 자세 + + {['전체', '선 자세', '앉은 자세', '누운 자세'].map(pose => ( + + ))} + +
+ ); +}; + +export default FilterButtons; diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index a43f334..36efb84 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -1,5 +1,6 @@ import styled from 'styled-components'; import Header from '../components/Header'; +import FilterButtons from '../components/FilterButtons'; const PageContainer = styled.div` display: flex; @@ -21,6 +22,7 @@ const MainPage = () => {
+ ); From b999dad1f9f3b1eb8288bab8c00d4f035461827e Mon Sep 17 00:00:00 2001 From: osohyun0224 Date: Mon, 2 Oct 2023 18:03:33 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Feat:=20=EC=9A=B4=EB=8F=99=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20(login-api=EC=9E=84=EC=8B=9C=20=EC=97=B0=EA=B2=B0?= =?UTF-8?q?=20=ED=99=95=EC=9D=B8=EC=9A=A9=EC=9C=BC=EB=A1=9C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ExerciseCard.jsx | 93 ++++++++++++++++++++++++++++++++ src/components/ExerciseList.jsx | 36 +++++++++++++ src/components/FilterButtons.jsx | 2 +- src/components/Header.jsx | 1 + src/pages/MainPage.jsx | 29 +++++++--- 5 files changed, 153 insertions(+), 8 deletions(-) create mode 100644 src/components/ExerciseCard.jsx create mode 100644 src/components/ExerciseList.jsx diff --git a/src/components/ExerciseCard.jsx b/src/components/ExerciseCard.jsx new file mode 100644 index 0000000..c7480c1 --- /dev/null +++ b/src/components/ExerciseCard.jsx @@ -0,0 +1,93 @@ +import { Link } from 'react-router-dom'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; + +const CourseCardContainer = styled.div` + width: 360px; + height: 310px; +`; + + +const CourseImage = styled.div` + height: 240px; + width: 360px; + background-image: url(${props => props.image}); + background-size: cover; + position: relative; + margin-bottom: 10px; +`; + + +const TimeInfo = styled.div` + width: 57px; + height: 23px; + background-color: rgba(14, 13, 13, 0.8); + border-radius: 4px; + position: absolute; + bottom: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; +`; + +const TimeText = styled.span` + color: #F2F2F2; + font-size: 12px; +`; + +const CourseTitle = styled.span` + font-size: 20px; + color: #F2F2F2; +`; + +const TagButton = styled.span` + margin-top: 10px; + height: 28px; + padding: 0 10px; + background-color: #242424; + border-radius: 50px; + border: 1px solid #444444; + font-size: 16px; + color: #F2F2F2; + margin-right: 5px; + display: inline-flex; + align-items: center; +`; + +const Hash = styled.span` + color: #727272; +`; + +const ExerciseCard = ({ id, image, title, tags }) => { + return ( + + + + + 00:00 + + + + {title} +
+ {tags && tags.map((tag, index) => ( + + # + {tag} + + ))} +
+ + + ); +}; + +ExerciseCard.propTypes = { + id: PropTypes.number.isRequired, + image: PropTypes.string, + title: PropTypes.string.isRequired, + tags: PropTypes.arrayOf(PropTypes.string) +}; + +export default ExerciseCard; diff --git a/src/components/ExerciseList.jsx b/src/components/ExerciseList.jsx new file mode 100644 index 0000000..29cfd1b --- /dev/null +++ b/src/components/ExerciseList.jsx @@ -0,0 +1,36 @@ +import { useState, useEffect } from "react"; +import { getAllCourses } from "../librarys/exercise-api"; +import ExerciseCard from "../components/ExerciseCard"; +import styled from "styled-components"; + +const Container = styled.div` + width: 1200px; + display: flex; + flex-wrap: wrap; + gap: 20px; + margin-top: 20px; + margin-left:10px; +`; + +function ExerciseList() { + const [courses, setCourses] = useState([]); + + useEffect(() => { + async function fetchCourses() { + const data = await getAllCourses(); + setCourses(data); + } + + fetchCourses(); + }, []); + + return ( + + {courses.map((course) => ( + + ))} + + ); +} + +export default ExerciseList; diff --git a/src/components/FilterButtons.jsx b/src/components/FilterButtons.jsx index e46b3a3..b385a79 100644 --- a/src/components/FilterButtons.jsx +++ b/src/components/FilterButtons.jsx @@ -5,7 +5,7 @@ const FilterSection = styled.div` display: flex; align-items: center; margin-right: 10px; - margin-top: 20px + margin-top: 20px; `; const Title = styled.span` diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 9b6690f..9cff5e0 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -6,6 +6,7 @@ import LogoImage from "../assets/icons/LOGO.png"; const HeaderContainer = styled.div` display: flex; align-items: center; + margin-bottom:-10px; `; const Logo = styled.img` diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index 36efb84..3889e53 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -1,6 +1,7 @@ -import styled from 'styled-components'; -import Header from '../components/Header'; -import FilterButtons from '../components/FilterButtons'; +import styled from "styled-components"; +import Header from "../components/Header"; +import FilterButtons from "../components/FilterButtons"; +import ExerciseList from "../components/ExerciseList"; const PageContainer = styled.div` display: flex; @@ -14,18 +15,32 @@ const CenteredContainer = styled.div` justify-content: center; align-items: center; flex: 1; - margin-top: 50px; + margin-top: 50px; +`; + +const FilterGroup = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1; + margin-top: -10px; + margin-left: -500px; + margin-bottom: 20px; `; const MainPage = () => { return ( -
+
- + + + + ); -} +}; export default MainPage; From d5a3158d65b226ff737cd5da34a034e9301bda89 Mon Sep 17 00:00:00 2001 From: osohyun0224 Date: Mon, 2 Oct 2023 18:06:07 +0900 Subject: [PATCH 6/6] =?UTF-8?q?Feat:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FilterButtons.jsx | 33 ++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/src/components/FilterButtons.jsx b/src/components/FilterButtons.jsx index b385a79..6e91168 100644 --- a/src/components/FilterButtons.jsx +++ b/src/components/FilterButtons.jsx @@ -1,5 +1,5 @@ -import { useState } from 'react'; -import styled from 'styled-components'; +import { useState } from "react"; +import styled from "styled-components"; const FilterSection = styled.div` display: flex; @@ -11,27 +11,26 @@ const FilterSection = styled.div` const Title = styled.span` font-size: 20px; font-weight: bold; - color: #5F5F5F; - width: 120px; + color: #5f5f5f; + width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; `; - const Divider = styled.div` width: 2px; height: 20px; - background-color: #5F5F5F; + background-color: #5f5f5f; margin-right: 10px; `; const Button = styled.button` width: 100px; height: 36px; - background-color: ${props => (props.selected ? '#6968CC' : '#1E1E1E')}; - color: #F2F2F2; + background-color: ${(props) => (props.selected ? "#6968CC" : "#1E1E1E")}; + color: #f2f2f2; border-radius: 10px; font-size: 16px; border: none; @@ -43,19 +42,23 @@ const Button = styled.button` `; const FilterButtons = () => { - const [selectedCategory, setSelectedCategory] = useState('전체'); - const [selectedPose, setSelectedPose] = useState('전체'); + const [selectedCategory, setSelectedCategory] = useState("전체"); + const [selectedPose, setSelectedPose] = useState("전체"); return (
카테고리 - {['전체', '팔', '어깨', '무릎', '허벅지'].map(category => ( + {["전체", "팔", "어깨", "무릎", "허벅지"].map((category) => ( @@ -65,11 +68,13 @@ const FilterButtons = () => { 자세 - {['전체', '선 자세', '앉은 자세', '누운 자세'].map(pose => ( + {["전체", "선 자세", "앉은 자세", "누운 자세"].map((pose) => (