From ca06ce40adadce9aa7564985f833b3c8b3193c50 Mon Sep 17 00:00:00 2001 From: kangsuyeong Date: Tue, 6 Aug 2024 19:03:14 +0900 Subject: [PATCH] =?UTF-8?q?Refactor:=20[#25]=20Navbar=20=EB=9D=BC=EC=9A=B0?= =?UTF-8?q?=ED=84=B0=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FITple-Frontend/src/App.jsx | 21 +- .../src/components/Navbar/Navbar.jsx | 5 +- .../src/components/Navbar/Navbar.style.js | 9 +- .../src/pages/UserInfoPage/UserInfoPage.jsx | 303 ++++++++++-------- 4 files changed, 192 insertions(+), 146 deletions(-) diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx index ffac598..3baafcf 100644 --- a/FITple-Frontend/src/App.jsx +++ b/FITple-Frontend/src/App.jsx @@ -6,22 +6,25 @@ 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 UserInfoPage from "./pages/UserInfoPage/UserInfoPage"; +import { useLocation } from "react-router-dom"; function App() { + const location = useLocation(); + console.log("Current path:", location.pathname); + // Navbar를 제외할 경로 목록 + const excludeNavbarPaths = ["/", "/SignUp", "/user"]; return ( <> - {/* Navbar */} - + {/* 특정 경로에서만 Navbar 렌더링 */} + {!excludeNavbarPaths.includes(location.pathname) && } {/* 각자 route 설정하기 */} - {/* 로그인페이지 */} - } /> - {/* 회원가입페이지 */} + } /> } /> - {/* 상품디테일 */} - } /> - {/* 이게 메인페이지? */} - } /> + } /> + } /> + } /> ); diff --git a/FITple-Frontend/src/components/Navbar/Navbar.jsx b/FITple-Frontend/src/components/Navbar/Navbar.jsx index be4ceca..d168732 100644 --- a/FITple-Frontend/src/components/Navbar/Navbar.jsx +++ b/FITple-Frontend/src/components/Navbar/Navbar.jsx @@ -4,7 +4,6 @@ import SearchIcon from "/assets/SearchIcon.svg"; import { NavBarBox, MenuBox, - LogoItem, LogoBox, MainBox, MenuItem, @@ -23,13 +22,13 @@ const Navbar = () => { {/* 로고 & 메뉴 영역 */} {/* 로고 */} - + FITple {/* 메뉴 */} - 옷장 + 옷장 추천 검색 프로필 diff --git a/FITple-Frontend/src/components/Navbar/Navbar.style.js b/FITple-Frontend/src/components/Navbar/Navbar.style.js index 146b342..c44a359 100644 --- a/FITple-Frontend/src/components/Navbar/Navbar.style.js +++ b/FITple-Frontend/src/components/Navbar/Navbar.style.js @@ -1,3 +1,4 @@ +import { Link } from "react-router-dom"; import styled from "styled-components"; export const Container = styled.div` display: flex; @@ -17,11 +18,13 @@ export const MainBox = styled.div` justify-content: space-between; width: 57%; `; -export const LogoBox = styled.div` +export const LogoBox = styled(Link)` + color: black; display: flex; align-items: center; font-size: 28px; font-weight: 900; + text-decoration: none; `; export const LogoTitle = styled.p` margin-left: 0.8em; @@ -38,8 +41,10 @@ export const MenuBox = styled.div` width: 65%; `; -export const MenuItem = styled.div` +export const MenuItem = styled(Link)` cursor: pointer; + text-decoration: none; + color: black; &:hover { color: #0276fe; font-weight: 800; 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;