From a6b7304fc498f5fcfc17b20bddbc9c23266f094b Mon Sep 17 00:00:00 2001 From: kangsuyeong Date: Sun, 4 Aug 2024 20:40:59 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20[#16]=ED=94=84=EB=A1=9C=ED=95=84?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=EC=84=B1=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FITple-Frontend/assets/FavorCloth-black.svg | 8 +++ FITple-Frontend/assets/FavorCloth-blue.svg | 8 +++ FITple-Frontend/assets/LoveCloth-black.svg | 8 +++ FITple-Frontend/assets/LoveCloth-blue.svg | 8 +++ FITple-Frontend/assets/MyBody-black.svg | 8 +++ FITple-Frontend/assets/MyBody-blue.svg | 8 +++ FITple-Frontend/assets/Option.svg | 5 ++ FITple-Frontend/src/App.jsx | 3 + .../components/ProfileFavor/ProfileFavor.jsx | 7 ++ .../ProfileFavor/ProfileFavor.style.js | 0 .../components/ProfileLove/ProfileLove.jsx | 7 ++ .../ProfileLove/ProfileLove.style.js | 0 .../ProfileMyBody/ProfileMyBody.jsx | 7 ++ .../ProfileMyBody/ProfileMyBody.style.js | 0 .../src/components/TabBox/TabBox.jsx | 60 +++++++++++++++++ .../src/components/TabBox/TabBox.style.js | 33 ++++++++++ .../src/pages/ProfilePage/ProfilePage.jsx | 66 +++++++++++++++++++ .../pages/ProfilePage/ProfilePage.style.js | 50 ++++++++++++++ 18 files changed, 286 insertions(+) create mode 100644 FITple-Frontend/assets/FavorCloth-black.svg create mode 100644 FITple-Frontend/assets/FavorCloth-blue.svg create mode 100644 FITple-Frontend/assets/LoveCloth-black.svg create mode 100644 FITple-Frontend/assets/LoveCloth-blue.svg create mode 100644 FITple-Frontend/assets/MyBody-black.svg create mode 100644 FITple-Frontend/assets/MyBody-blue.svg create mode 100644 FITple-Frontend/assets/Option.svg create mode 100644 FITple-Frontend/src/components/ProfileFavor/ProfileFavor.jsx create mode 100644 FITple-Frontend/src/components/ProfileFavor/ProfileFavor.style.js create mode 100644 FITple-Frontend/src/components/ProfileLove/ProfileLove.jsx create mode 100644 FITple-Frontend/src/components/ProfileLove/ProfileLove.style.js create mode 100644 FITple-Frontend/src/components/ProfileMyBody/ProfileMyBody.jsx create mode 100644 FITple-Frontend/src/components/ProfileMyBody/ProfileMyBody.style.js create mode 100644 FITple-Frontend/src/components/TabBox/TabBox.jsx create mode 100644 FITple-Frontend/src/components/TabBox/TabBox.style.js create mode 100644 FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx create mode 100644 FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js diff --git a/FITple-Frontend/assets/FavorCloth-black.svg b/FITple-Frontend/assets/FavorCloth-black.svg new file mode 100644 index 0000000..6b148b6 --- /dev/null +++ b/FITple-Frontend/assets/FavorCloth-black.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/FITple-Frontend/assets/FavorCloth-blue.svg b/FITple-Frontend/assets/FavorCloth-blue.svg new file mode 100644 index 0000000..1fada5d --- /dev/null +++ b/FITple-Frontend/assets/FavorCloth-blue.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/FITple-Frontend/assets/LoveCloth-black.svg b/FITple-Frontend/assets/LoveCloth-black.svg new file mode 100644 index 0000000..1a27754 --- /dev/null +++ b/FITple-Frontend/assets/LoveCloth-black.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/FITple-Frontend/assets/LoveCloth-blue.svg b/FITple-Frontend/assets/LoveCloth-blue.svg new file mode 100644 index 0000000..baf3eb7 --- /dev/null +++ b/FITple-Frontend/assets/LoveCloth-blue.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/FITple-Frontend/assets/MyBody-black.svg b/FITple-Frontend/assets/MyBody-black.svg new file mode 100644 index 0000000..fa19997 --- /dev/null +++ b/FITple-Frontend/assets/MyBody-black.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/FITple-Frontend/assets/MyBody-blue.svg b/FITple-Frontend/assets/MyBody-blue.svg new file mode 100644 index 0000000..65b099e --- /dev/null +++ b/FITple-Frontend/assets/MyBody-blue.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/FITple-Frontend/assets/Option.svg b/FITple-Frontend/assets/Option.svg new file mode 100644 index 0000000..6aa14ce --- /dev/null +++ b/FITple-Frontend/assets/Option.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx index ffac598..c45a75d 100644 --- a/FITple-Frontend/src/App.jsx +++ b/FITple-Frontend/src/App.jsx @@ -6,6 +6,7 @@ import LoginPage from "./pages/LoginPage/LoginPage"; import SignupPage from "./pages/SignupPage/SignupPage"; import ClothdetailPage from "./pages/ClothdetailPage/ClothdetailPage"; import ClothmainPage from "./pages/ClothmainPage/ClothmainPage"; +import ProfilePage from "./pages/ProfilePage/ProfilePage"; function App() { return ( @@ -22,6 +23,8 @@ function App() { } /> {/* 이게 메인페이지? */} } /> + {/* 프로필페이지 */} + } /> ); diff --git a/FITple-Frontend/src/components/ProfileFavor/ProfileFavor.jsx b/FITple-Frontend/src/components/ProfileFavor/ProfileFavor.jsx new file mode 100644 index 0000000..4383ee7 --- /dev/null +++ b/FITple-Frontend/src/components/ProfileFavor/ProfileFavor.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const ProfileFavor = () => { + return
두번째 화면
; +}; + +export default ProfileFavor; diff --git a/FITple-Frontend/src/components/ProfileFavor/ProfileFavor.style.js b/FITple-Frontend/src/components/ProfileFavor/ProfileFavor.style.js new file mode 100644 index 0000000..e69de29 diff --git a/FITple-Frontend/src/components/ProfileLove/ProfileLove.jsx b/FITple-Frontend/src/components/ProfileLove/ProfileLove.jsx new file mode 100644 index 0000000..5c21947 --- /dev/null +++ b/FITple-Frontend/src/components/ProfileLove/ProfileLove.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const ProfileLove = () => { + return
첫번째 화면
; +}; + +export default ProfileLove; diff --git a/FITple-Frontend/src/components/ProfileLove/ProfileLove.style.js b/FITple-Frontend/src/components/ProfileLove/ProfileLove.style.js new file mode 100644 index 0000000..e69de29 diff --git a/FITple-Frontend/src/components/ProfileMyBody/ProfileMyBody.jsx b/FITple-Frontend/src/components/ProfileMyBody/ProfileMyBody.jsx new file mode 100644 index 0000000..84e79c8 --- /dev/null +++ b/FITple-Frontend/src/components/ProfileMyBody/ProfileMyBody.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const ProfileMyBody = () => { + return
3번째 페이지
; +}; + +export default ProfileMyBody; diff --git a/FITple-Frontend/src/components/ProfileMyBody/ProfileMyBody.style.js b/FITple-Frontend/src/components/ProfileMyBody/ProfileMyBody.style.js new file mode 100644 index 0000000..e69de29 diff --git a/FITple-Frontend/src/components/TabBox/TabBox.jsx b/FITple-Frontend/src/components/TabBox/TabBox.jsx new file mode 100644 index 0000000..fb58993 --- /dev/null +++ b/FITple-Frontend/src/components/TabBox/TabBox.jsx @@ -0,0 +1,60 @@ +import React from "react"; +import { Container, TabItem, TabMenu, TabText } from "./TabBox.style"; +import LoveClothBlue from "/assets/LoveCloth-blue.svg"; +import LoveClothBlack from "/assets/LoveCloth-black.svg"; +import FavorClothBlue from "/assets/FavorCloth-blue.svg"; +import FavorClothBlack from "/assets/FavorCloth-black.svg"; +import MyBodyBlue from "/assets/MyBody-blue.svg"; +import MyBodyBlack from "/assets/MyBody-black.svg"; + +const TabBox = ({ selectItem, setSelectItem }) => { + const tabData = [ + { + id: 0, + content: "좋아하는 옷", + selectImg: LoveClothBlue, + deSelectImg: LoveClothBlack, + }, + { + id: 1, + content: "관심있는 옷", + selectImg: FavorClothBlue, + deSelectImg: FavorClothBlack, + }, + { + id: 2, + content: "내 체형정보", + selectImg: MyBodyBlue, + deSelectImg: MyBodyBlack, + }, + ]; + + const handleItem = (e, idx) => { + setSelectItem(idx); + }; + return ( + + {tabData.map((item) => ( + // 가운데 이거나 선택된 버튼 css수정 + handleItem(e, item.id)} + key={item.id} + $isCenter={item.id === 1} + selected={selectItem === item.id} + > + + {selectItem === item.id ? ( + + ) : ( + + )} + + {item.content} + + + ))} + + ); +}; + +export default TabBox; diff --git a/FITple-Frontend/src/components/TabBox/TabBox.style.js b/FITple-Frontend/src/components/TabBox/TabBox.style.js new file mode 100644 index 0000000..5f13857 --- /dev/null +++ b/FITple-Frontend/src/components/TabBox/TabBox.style.js @@ -0,0 +1,33 @@ +import styled from "styled-components"; +export const Container = styled.div` + display: flex; + /* 드레그 막기 */ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +`; +export const TabMenu = styled.div` + cursor: pointer; + height: 96px; + width: 33.3%; + display: flex; + justify-content: center; + align-items: center; + border-left: ${(props) => (props.$isCenter ? "1px solid #D9D9D9" : "none")}; + border-right: ${(props) => (props.$isCenter ? "1px solid #D9D9D9" : "none")}; + border-bottom: ${(props) => (props.selected ? "none" : "1px solid #D9D9D9")}; +`; +export const TabItem = styled.div` + width: fit-content; + height: fit-content; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +`; +export const TabText = styled.div` + font-size: 16px; + font-weight: 500; + color: ${(props) => (props.selected ? "#0276FE" : "#838383")}; +`; diff --git a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx new file mode 100644 index 0000000..9d3f93f --- /dev/null +++ b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx @@ -0,0 +1,66 @@ +import React from "react"; +import OptionIcon from "../../../assets/Option.svg"; +import { + Box, + ProfileContainer, + ClothContainer, + OptionBtn, + ProfileBox, + OptionBox, + OptionItem, +} from "./ProfilePage.style"; +import TabBox from "../../components/TabBox/TabBox"; +import { useState } from "react"; +import ProfileLove from "../../components/ProfileLove/ProfileLove"; +import ProfileFavor from "../../components/ProfileFavor/ProfileFavor"; +import ProfileMyBody from "../../components/ProfileMyBody/ProfileMyBody"; + +const ProfilePage = () => { + const [selectItem, setSelectItem] = useState(0); + const [isOpen, setIsOpen] = useState(false); + + const renderContent = () => { + switch (selectItem) { + case 0: + return ; + case 1: + return ; + case 2: + return ; + } + }; + + const showOptionBox = () => { + setIsOpen(!isOpen); + console.log(isOpen); + }; + + return ( + <> + {/* 위에 box */} + + + {/* 컴포넌트 사용 */} + 컴포넌트 사용 + {/* 옵션 버튼 */} + showOptionBox()}> + + + {/* 옵션 내용 띄워줄 div */} + + 설정 + 문의하기 + 로그아웃 + + + + {/* 아래 box */} + + + {renderContent()} + + + ); +}; + +export default ProfilePage; diff --git a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js new file mode 100644 index 0000000..a42d293 --- /dev/null +++ b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js @@ -0,0 +1,50 @@ +import styled from "styled-components"; +export const ProfileContainer = styled.div` + display: flex; + justify-content: center; + margin: 42px 0px; +`; +export const ProfileBox = styled.div` + display: flex; + position: relative; +`; +export const ClothContainer = styled.div` + box-shadow: 8px -8px 20px 0px #c9c7c730; + border-radius: 30px 30px 0 0; +`; + +export const Box = styled.div` + width: 748px; + height: 204px; + border: 1px solid red; +`; +export const OptionBtn = styled.button` + cursor: pointer; + width: fit-content; + height: fit-content; + background: none; + border: none; + padding: 0px; + margin-left: 88px; +`; + +export const OptionBox = styled.div` + width: 230px; + height: 138px; + position: absolute; + right: 0; + top: 29px; + margin-top: 4px; + border-radius: 10px; + box-shadow: 8px 8px 20px 0px #c9c7c730; + background-color: #efefef; + display: ${(props) => (props.$active ? "block" : "none")}; +`; + +export const OptionItem = styled.div` + width: 230px; + height: 46px; + padding: 13px 0 13px 36px; + box-sizing: border-box; + border-bottom: ${(props) => (props.$last ? "none" : "1px solid #d9d9d9")}; +`; From c5cb9bfa5d2460844164c042ad777510f954bcba Mon Sep 17 00:00:00 2001 From: kangsuyeong Date: Mon, 5 Aug 2024 09:48:00 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FITple-Frontend/src/App.jsx | 2 + .../src/pages/ChangepwdPage/ChangepwdPage.jsx | 0 .../ChangepwdPage/ChangepwdPage.style.js | 0 .../src/pages/UserInfoPage/UserInfoPage.jsx | 303 ++++++++++-------- 4 files changed, 173 insertions(+), 132 deletions(-) create mode 100644 FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.jsx create mode 100644 FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.style.js diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx index c45a75d..4352cf7 100644 --- a/FITple-Frontend/src/App.jsx +++ b/FITple-Frontend/src/App.jsx @@ -7,6 +7,7 @@ import SignupPage from "./pages/SignupPage/SignupPage"; import ClothdetailPage from "./pages/ClothdetailPage/ClothdetailPage"; import ClothmainPage from "./pages/ClothmainPage/ClothmainPage"; import ProfilePage from "./pages/ProfilePage/ProfilePage"; +import UserInfoPage from "./pages/UserInfoPage/UserInfoPage"; function App() { return ( @@ -25,6 +26,7 @@ function App() { } /> {/* 프로필페이지 */} } /> + } /> ); diff --git a/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.jsx b/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.jsx new file mode 100644 index 0000000..e69de29 diff --git a/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.style.js b/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.style.js new file mode 100644 index 0000000..e69de29 diff --git a/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.jsx b/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.jsx index df4d045..95ef362 100644 --- a/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.jsx +++ b/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.jsx @@ -1,144 +1,183 @@ -import profile from '../../assets/profile.svg' -import { useState } from 'react' +import profile from "../../../assets/profile.svg"; +import { useState } from "react"; import { - UserInfoPageWrapper, - MainText, - SubText, - Container, - InfoContainer, - InfoWrapper, - TextWrapper, - InputWrapper, - InputBox, - GenderWrapper, - GenderButton, - FitWrapper, - FitButton, - StyleWrapper, - StyleButton, - BodyInfoContainer, - BodyInputWrapper, - BodyInputBox, - UnitText, - SubmitButton -} from './UserInfoPage.style'; + UserInfoPageWrapper, + MainText, + SubText, + Container, + InfoContainer, + InfoWrapper, + TextWrapper, + InputWrapper, + InputBox, + GenderWrapper, + GenderButton, + FitWrapper, + FitButton, + StyleWrapper, + StyleButton, + BodyInfoContainer, + BodyInputWrapper, + BodyInputBox, + UnitText, + SubmitButton, +} from "./UserInfoPage.style"; function UserInfoPage() { - const [selectedGender, setSelectedGender] = useState(null); - const [selectedFits, setSelectedFits] = useState([]); - const [selectedStyles, setSelectedStyles] = useState([]); + const [selectedGender, setSelectedGender] = useState(null); + const [selectedFits, setSelectedFits] = useState([]); + const [selectedStyles, setSelectedStyles] = useState([]); - const handleStyleClick = (style) => { - setSelectedStyles((prevSelectedStyles) => - prevSelectedStyles.includes(style) - ? prevSelectedStyles.filter((selectedStyle) => selectedStyle !== style) - : [...prevSelectedStyles, style] - ); - }; - - const handleFitClick = (fit) => { - setSelectedFits((prevSelectedFits) => - prevSelectedFits.includes(fit) - ? prevSelectedFits.filter((selectedFit) => selectedFit !== fit) - : [...prevSelectedFits, fit] - ); - }; + const handleStyleClick = (style) => { + setSelectedStyles((prevSelectedStyles) => + prevSelectedStyles.includes(style) + ? prevSelectedStyles.filter((selectedStyle) => selectedStyle !== style) + : [...prevSelectedStyles, style] + ); + }; - const fits = ['슬림', '레귤러', '세미오버', '오버']; - const styles = [ - '심플베이직', '캐주얼', '시크', '러블리', '빈티지', '보헤미안', - '모던', '펑크', '오피스룩', '로맨틱' - ]; + const handleFitClick = (fit) => { + setSelectedFits((prevSelectedFits) => + prevSelectedFits.includes(fit) + ? prevSelectedFits.filter((selectedFit) => selectedFit !== fit) + : [...prevSelectedFits, fit] + ); + }; - return( - - 회원정보 + const fits = ["슬림", "레귤러", "세미오버", "오버"]; + const styles = [ + "심플베이직", + "캐주얼", + "시크", + "러블리", + "빈티지", + "보헤미안", + "모던", + "펑크", + "오피스룩", + "로맨틱", + ]; - - 기본 정보 - - proflie-icon - - 이름 - 성별 - 선호 핏 - 스타일 - - 한줄소개 - - - - - setSelectedGender('male')}>남성 - setSelectedGender('female')}>여성 - - - {fits.map((fit) => ( - handleFitClick(fit)}>{fit} - ))} - - - {styles.map((style) => ( - handleStyleClick(style)} - > - {style} - - ))} - - - - - + return ( + + 회원정보 - - 체형정보 - - - 키 - 몸무게 - 어깨너비 - 가슴둘레 - 팔길이 - 허리둘레 - 허벅지둘레 - 엉덩이둘레 - - - - cm - - - kg - - - cm - - - cm - - - cm - - - cm - - - cm - - - cm - - - - + + 기본 정보 + + proflie-icon + + 이름 + 성별 + 선호 핏 + 스타일 + + 한줄소개 + + + + + setSelectedGender("male")} + > + 남성 + + setSelectedGender("female")} + > + 여성 + + + + {fits.map((fit) => ( + handleFitClick(fit)} + > + {fit} + + ))} + + + {styles.map((style) => ( + handleStyleClick(style)} + > + {style} + + ))} + + + + + - 저장 + + 체형정보 + + + 키 + 몸무게 + 어깨너비 + 가슴둘레 + 팔길이 + 허리둘레 + 허벅지둘레 + 엉덩이둘레 + + + + + cm + + + + kg + + + + cm + + + + cm + + + + cm + + + + cm + + + + cm + + + + cm + + + + - - ); + 저장 + + ); } -export default UserInfoPage \ No newline at end of file +export default UserInfoPage; From fd72e3bb6e7a7071069dc38d853ccde3de6b736b Mon Sep 17 00:00:00 2001 From: kangsuyeong Date: Mon, 5 Aug 2024 11:03:40 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:[#16]=20=EB=B9=84=EB=B0=80=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FITple-Frontend/src/App.jsx | 2 + .../src/pages/ChangepwdPage/ChangepwdPage.jsx | 26 ++++++++++ .../ChangepwdPage/ChangepwdPage.style.js | 51 +++++++++++++++++++ 3 files changed, 79 insertions(+) diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx index 4352cf7..74fd359 100644 --- a/FITple-Frontend/src/App.jsx +++ b/FITple-Frontend/src/App.jsx @@ -8,6 +8,7 @@ import ClothdetailPage from "./pages/ClothdetailPage/ClothdetailPage"; import ClothmainPage from "./pages/ClothmainPage/ClothmainPage"; import ProfilePage from "./pages/ProfilePage/ProfilePage"; import UserInfoPage from "./pages/UserInfoPage/UserInfoPage"; +import ChangepwdPage from "./pages/ChangepwdPage/ChangepwdPage"; function App() { return ( @@ -27,6 +28,7 @@ function App() { {/* 프로필페이지 */} } /> } /> + } /> ); diff --git a/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.jsx b/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.jsx index e69de29..22a8e12 100644 --- a/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.jsx +++ b/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.jsx @@ -0,0 +1,26 @@ +import React from "react"; +import { + EditBox, + PWDContainer, + Container, + SaveBTN, + SubTitle, + InputPWD, +} from "./ChangepwdPage.style"; + +const ChangepwdPage = () => { + return ( + + + + 비밀번호 수정 + + + + 저장하기 + + + ); +}; + +export default ChangepwdPage; diff --git a/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.style.js b/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.style.js index e69de29..e2250eb 100644 --- a/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.style.js +++ b/FITple-Frontend/src/pages/ChangepwdPage/ChangepwdPage.style.js @@ -0,0 +1,51 @@ +import styled from "styled-components"; +export const Container = styled.div` + display: flex; + justify-content: center; +`; +export const PWDContainer = styled.form` + width: 1000px; + height: 416px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border: 1px solid #838383; + border-radius: 20px; +`; +export const EditBox = styled.div` + width: 920px; + height: 205px; + margin-bottom: 48px; + display: flex; + flex-direction: column; +`; + +export const SaveBTN = styled.button` + width: 920px; + height: 71px; + border-radius: 10px; + color: white; + background-color: #0276fe; + font-size: 20px; + font-weight: 700; + border: none; +`; + +export const SubTitle = styled.div` + font-size: 28px; + font-weight: 700; + color: #0276fe; + margin-bottom: 4px; +`; + +export const InputPWD = styled.input` + height: 71px; + font-size: 20px; + font-weight: 600; + margin-top: 12px; + border-radius: 10px; + border: 1px solid #838383; + padding-left: 24px; + color: #838383; +`; From 3daa35a01d1492a5d08288b5b0c27dd59fb425cc Mon Sep 17 00:00:00 2001 From: kangsuyeong Date: Tue, 6 Aug 2024 19:27:20 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20[#16]=20infom=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20width=20=EB=B0=8F=20padding=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FITple-Frontend/assets/back.svg | 4 +- FITple-Frontend/src/App.jsx | 2 + .../src/components/Infom/Infom.style.js | 49 +++++++------ .../src/pages/ProfilePage/ProfilePage.jsx | 2 + .../RecomUserFeedPage/RecomUserFeedPage.jsx | 14 +++- .../RecomUserFeedPage.style.js | 68 ++++++++++--------- 6 files changed, 78 insertions(+), 61 deletions(-) diff --git a/FITple-Frontend/assets/back.svg b/FITple-Frontend/assets/back.svg index 8bd94ba..408a97e 100644 --- a/FITple-Frontend/assets/back.svg +++ b/FITple-Frontend/assets/back.svg @@ -1,4 +1,4 @@ - - + + diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx index 74fd359..f1fd6a5 100644 --- a/FITple-Frontend/src/App.jsx +++ b/FITple-Frontend/src/App.jsx @@ -9,6 +9,7 @@ import ClothmainPage from "./pages/ClothmainPage/ClothmainPage"; import ProfilePage from "./pages/ProfilePage/ProfilePage"; import UserInfoPage from "./pages/UserInfoPage/UserInfoPage"; import ChangepwdPage from "./pages/ChangepwdPage/ChangepwdPage"; +import RecomUserFeedPage from "./pages/RecomUserFeedPage/RecomUserFeedPage"; function App() { return ( @@ -29,6 +30,7 @@ function App() { } /> } /> } /> + } /> ); diff --git a/FITple-Frontend/src/components/Infom/Infom.style.js b/FITple-Frontend/src/components/Infom/Infom.style.js index 4d5fcb3..2de5bc3 100644 --- a/FITple-Frontend/src/components/Infom/Infom.style.js +++ b/FITple-Frontend/src/components/Infom/Infom.style.js @@ -1,35 +1,34 @@ import styled from "styled-components"; +// 수영 : width 100% -> width 717px으로 수정하고 padding제거했습니다! export const Container = styled.div` - margin-top:42px; - position:relative; - box-sizing:border-box; - width:100%; - display:flex; - flex-direction:column; - justify-content:center; - gap:20px; - padding: 0 25%; -` + margin-top: 42px; + position: relative; + box-sizing: border-box; + width: 717px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 20px; +`; export const Wrap = styled.div` - display:flex; - justify-content:space-between; - align-items:center; - -` + display: flex; + justify-content: space-between; + align-items: center; +`; export const SubWrap = styled.div` - display:flex; - align-items:center; - gap:28px; -` + display: flex; + align-items: center; + gap: 28px; +`; export const UserImg = styled.img` - width:140px; - height:140px; -` + width: 140px; + height: 140px; +`; export const UserName = styled.h3` - font-size:32px; - font-weight:bold; -` + font-size: 32px; + font-weight: bold; +`; diff --git a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx index 9d3f93f..b5a43c0 100644 --- a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx +++ b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx @@ -14,6 +14,7 @@ import { useState } from "react"; import ProfileLove from "../../components/ProfileLove/ProfileLove"; import ProfileFavor from "../../components/ProfileFavor/ProfileFavor"; import ProfileMyBody from "../../components/ProfileMyBody/ProfileMyBody"; +import Infom from "../../components/Infom/Infom"; const ProfilePage = () => { const [selectItem, setSelectItem] = useState(0); @@ -41,6 +42,7 @@ const ProfilePage = () => { {/* 컴포넌트 사용 */} + 컴포넌트 사용 {/* 옵션 버튼 */} showOptionBox()}> diff --git a/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.jsx b/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.jsx index 47cfabe..4791790 100644 --- a/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.jsx +++ b/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.jsx @@ -1,4 +1,10 @@ -import { Container, Wrap,SubWrap, IndividualWrap } from "./RecomUserFeedPage.style"; +import { + Container, + Wrap, + SubWrap, + IndividualWrap, + InformWrap, +} from "./RecomUserFeedPage.style"; import Infom from "../../components/Infom/Infom"; import FeedButton from "../../components/FeedButton/FeedButton"; import FeedNav from "../../components/FeedNav/FeedNav"; @@ -12,7 +18,11 @@ import HeartIconEmpty from "/assets/HeartEmpty.svg"; function RecomUserFeedPage() { return ( - + {/* Infom을 한번더 inFormWrap으로 감싸서 위 영역과 아래 영역을 나눴습니다! */} + + + + diff --git a/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.style.js b/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.style.js index 660f70e..acf1f8e 100644 --- a/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.style.js +++ b/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.style.js @@ -1,43 +1,47 @@ import styled from "styled-components"; export const Container = styled.div` - position:relative; - box-sizing:border-box; - width:100%; - display:flex; - flex-direction:column; - justify-content:center; -` + position: relative; + box-sizing: border-box; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; +`; export const Wrap = styled.div` - margin-top:40px; - box-sizing: border-box; - display:flex; - flex-direction:column; - border-top-left-radius: 30px; - border-top-right-radius: 30px; - box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.5); -` + margin-top: 40px; + box-sizing: border-box; + display: flex; + flex-direction: column; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.5); +`; export const SubWrap = styled.div` - box-sizing:border-box; - width:100%; - display:flex; - justify-content:space-between; - padding:60px 48px; -` + box-sizing: border-box; + width: 100%; + display: flex; + justify-content: space-between; + padding: 60px 48px; +`; +export const InformWrap = styled.div` + display: flex; + justify-content: center; +`; export const IndividualWrap = styled.div` - width:100%; - display:flex; - padding-top:48px; - padding-bottom:25px; -` + width: 100%; + display: flex; + padding-top: 48px; + padding-bottom: 25px; +`; export const ClosetImg = styled.img` - width:40px; - height:40px; -` + width: 40px; + height: 40px; +`; export const HeartImg = styled.img` - width:40px; - height:40px; -` \ No newline at end of file + width: 40px; + height: 40px; +`; From 18dd68dc35b0b9394a2d25c95f7766387c34b9e4 Mon Sep 17 00:00:00 2001 From: kangsuyeong Date: Tue, 6 Aug 2024 19:31:55 +0900 Subject: [PATCH 5/7] =?UTF-8?q?refactor:=20infom=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20margin=EC=82=AD=EC=A0=9C=ED=9B=84=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4=EC=97=90=20margin?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FITple-Frontend/src/components/Infom/Infom.style.js | 3 ++- FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx | 1 - FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js | 1 + .../src/pages/RecomUserFeedPage/RecomUserFeedPage.style.js | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/FITple-Frontend/src/components/Infom/Infom.style.js b/FITple-Frontend/src/components/Infom/Infom.style.js index 2de5bc3..4237e1a 100644 --- a/FITple-Frontend/src/components/Infom/Infom.style.js +++ b/FITple-Frontend/src/components/Infom/Infom.style.js @@ -1,8 +1,9 @@ import styled from "styled-components"; // 수영 : width 100% -> width 717px으로 수정하고 padding제거했습니다! +// 컴포넌트에서 margin삭제하고 informWarp에 마진추가하였습니다 export const Container = styled.div` - margin-top: 42px; + border: 1px solid blue; position: relative; box-sizing: border-box; width: 717px; diff --git a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx index b5a43c0..abad031 100644 --- a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx +++ b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx @@ -43,7 +43,6 @@ const ProfilePage = () => { {/* 컴포넌트 사용 */} - 컴포넌트 사용 {/* 옵션 버튼 */} showOptionBox()}> diff --git a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js index a42d293..5070627 100644 --- a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js +++ b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js @@ -7,6 +7,7 @@ export const ProfileContainer = styled.div` export const ProfileBox = styled.div` display: flex; position: relative; + border: 1px solid red; `; export const ClothContainer = styled.div` box-shadow: 8px -8px 20px 0px #c9c7c730; diff --git a/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.style.js b/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.style.js index acf1f8e..753689e 100644 --- a/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.style.js +++ b/FITple-Frontend/src/pages/RecomUserFeedPage/RecomUserFeedPage.style.js @@ -29,6 +29,7 @@ export const SubWrap = styled.div` export const InformWrap = styled.div` display: flex; justify-content: center; + margin-top: 42px; `; export const IndividualWrap = styled.div` From 9ddbb6604f067adea4b3f0681e609797ffce8927 Mon Sep 17 00:00:00 2001 From: kangsuyeong Date: Tue, 6 Aug 2024 19:55:00 +0900 Subject: [PATCH 6/7] =?UTF-8?q?feat:=20infom=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=9E=AC=EC=82=AC=EC=9A=A9=EC=9D=84=20=EC=9C=84?= =?UTF-8?q?=ED=95=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/FollowButton/FollowButton.jsx | 4 ++-- .../FollowButton/FollowButton.style.js | 11 +++++----- .../src/components/Infom/Infom.jsx | 21 +++++++++++++------ .../src/components/Infom/Infom.style.js | 1 - .../src/components/OneLine/OneLine.jsx | 13 +++++------- .../src/components/OneLine/OneLine.style.js | 21 ++++++++++--------- .../src/pages/ProfilePage/ProfilePage.jsx | 2 +- .../pages/ProfilePage/ProfilePage.style.js | 1 - 8 files changed, 40 insertions(+), 34 deletions(-) diff --git a/FITple-Frontend/src/components/FollowButton/FollowButton.jsx b/FITple-Frontend/src/components/FollowButton/FollowButton.jsx index 3811281..e7a141b 100644 --- a/FITple-Frontend/src/components/FollowButton/FollowButton.jsx +++ b/FITple-Frontend/src/components/FollowButton/FollowButton.jsx @@ -1,5 +1,5 @@ -import { useState } from 'react'; -import { Container } from "./FollowButton.style" +import { useState } from "react"; +import { Container } from "./FollowButton.style"; function FollowButton() { const [isClicked, setIsClicked] = useState(false); diff --git a/FITple-Frontend/src/components/FollowButton/FollowButton.style.js b/FITple-Frontend/src/components/FollowButton/FollowButton.style.js index decf559..1c23dd6 100644 --- a/FITple-Frontend/src/components/FollowButton/FollowButton.style.js +++ b/FITple-Frontend/src/components/FollowButton/FollowButton.style.js @@ -1,18 +1,19 @@ import styled from "styled-components"; +// margin-left : auto-> 54px로 수정 export const Container = styled.button` font-size: 20px; font-weight: 700; - margin-left:auto; - width:222px; + margin-left: 54px; + width: 222px; padding: 9px 0; border-radius: 10px; - background-color: ${props => (props.isClicked ? '#0276FE' : 'black')}; + background-color: ${(props) => (props.isClicked ? "#0276FE" : "black")}; color: white; border: none; - text-align:center; + text-align: center; cursor: pointer; - + &:focus { outline: none; } diff --git a/FITple-Frontend/src/components/Infom/Infom.jsx b/FITple-Frontend/src/components/Infom/Infom.jsx index 01a8d90..6d6f554 100644 --- a/FITple-Frontend/src/components/Infom/Infom.jsx +++ b/FITple-Frontend/src/components/Infom/Infom.jsx @@ -7,7 +7,7 @@ import Follower from "../../components/Follower/Follower"; import OneLine from "../../components/OneLine/OneLine"; import FollowButton from "../../components/FollowButton/FollowButton"; -function Infom() { +function Infom({ showFollowButton = true }) { return ( @@ -16,16 +16,25 @@ function Infom() { 핏플3 - + - - + + - - + {/* showFollowButton이 True면 기본 값유지 False면 FollowButton제거하고 OneLine 크기증가*/} + {showFollowButton ? ( + <> + + + + ) : ( + <> + + + )} ); diff --git a/FITple-Frontend/src/components/Infom/Infom.style.js b/FITple-Frontend/src/components/Infom/Infom.style.js index 4237e1a..9d60473 100644 --- a/FITple-Frontend/src/components/Infom/Infom.style.js +++ b/FITple-Frontend/src/components/Infom/Infom.style.js @@ -3,7 +3,6 @@ import styled from "styled-components"; // 수영 : width 100% -> width 717px으로 수정하고 padding제거했습니다! // 컴포넌트에서 margin삭제하고 informWarp에 마진추가하였습니다 export const Container = styled.div` - border: 1px solid blue; position: relative; box-sizing: border-box; width: 717px; diff --git a/FITple-Frontend/src/components/OneLine/OneLine.jsx b/FITple-Frontend/src/components/OneLine/OneLine.jsx index 3d5c698..be7f34f 100644 --- a/FITple-Frontend/src/components/OneLine/OneLine.jsx +++ b/FITple-Frontend/src/components/OneLine/OneLine.jsx @@ -1,11 +1,8 @@ -import { Container } from "./OneLine.style" +import { Container } from "./OneLine.style"; -function OneLine() { - return ( - - 페미닌 무드의 옷들을 좋아해요! - - ) +function OneLine({ width }) { + // width를 props로 주면 그에 따라 변경 + return 페미닌 무드의 옷들을 좋아해요!; } -export default OneLine \ No newline at end of file +export default OneLine; diff --git a/FITple-Frontend/src/components/OneLine/OneLine.style.js b/FITple-Frontend/src/components/OneLine/OneLine.style.js index dbfd676..110a9a8 100644 --- a/FITple-Frontend/src/components/OneLine/OneLine.style.js +++ b/FITple-Frontend/src/components/OneLine/OneLine.style.js @@ -1,13 +1,14 @@ import styled from "styled-components"; +// width props가 없으면 기본 437px +// margin followButton으로 이동 export const Container = styled.div` - box-sizing:border-box; - max-width:100%; - width:437px; - padding:12px 24px; - border-radius:50px; - border: solid 1px #D9D9D9; - font-size:16px; - font-weight:bold; - margin-right:54px; - ` \ No newline at end of file + box-sizing: border-box; + max-width: 100%; + width: ${(props) => props.width || "437px"}; + padding: 12px 24px; + border-radius: 50px; + border: solid 1px #d9d9d9; + font-size: 16px; + font-weight: bold; +`; diff --git a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx index abad031..b766d05 100644 --- a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx +++ b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx @@ -42,7 +42,7 @@ const ProfilePage = () => { {/* 컴포넌트 사용 */} - + {/* 옵션 버튼 */} showOptionBox()}> diff --git a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js index 5070627..a42d293 100644 --- a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js +++ b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js @@ -7,7 +7,6 @@ export const ProfileContainer = styled.div` export const ProfileBox = styled.div` display: flex; position: relative; - border: 1px solid red; `; export const ClothContainer = styled.div` box-shadow: 8px -8px 20px 0px #c9c7c730; From 8b09e9396992fd8056db7ff312b4fc4375346e89 Mon Sep 17 00:00:00 2001 From: kangsuyeong Date: Tue, 6 Aug 2024 20:42:16 +0900 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20[#16]=ED=94=84=EB=A1=9C=ED=95=84?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20infom=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx | 1 - FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js | 5 ----- 2 files changed, 6 deletions(-) diff --git a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx index b766d05..e14f88f 100644 --- a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx +++ b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx @@ -1,7 +1,6 @@ import React from "react"; import OptionIcon from "../../../assets/Option.svg"; import { - Box, ProfileContainer, ClothContainer, OptionBtn, diff --git a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js index a42d293..f2ce1af 100644 --- a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js +++ b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.style.js @@ -13,11 +13,6 @@ export const ClothContainer = styled.div` border-radius: 30px 30px 0 0; `; -export const Box = styled.div` - width: 748px; - height: 204px; - border: 1px solid red; -`; export const OptionBtn = styled.button` cursor: pointer; width: fit-content;