From ca06ce40adadce9aa7564985f833b3c8b3193c50 Mon Sep 17 00:00:00 2001 From: kangsuyeong Date: Tue, 6 Aug 2024 19:03:14 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Refactor:=20[#25]=20Navbar=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=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; From 3e6350055999e92dfa6edd67fe6049d30ef37b68 Mon Sep 17 00:00:00 2001 From: kangsuyeong Date: Thu, 8 Aug 2024 12:46:55 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20[#25]=20layout=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/App.jsx | 38 +++++++++++-------- .../src/components/Navbar/Navbar.jsx | 5 +-- FITple-Frontend/src/layout/Layout.jsx | 14 +++++++ FITple-Frontend/src/layout/LayoutNonNav.jsx | 12 ++++++ 4 files changed, 50 insertions(+), 19 deletions(-) create mode 100644 FITple-Frontend/src/layout/Layout.jsx create mode 100644 FITple-Frontend/src/layout/LayoutNonNav.jsx diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx index a727745..6d140a7 100644 --- a/FITple-Frontend/src/App.jsx +++ b/FITple-Frontend/src/App.jsx @@ -1,5 +1,4 @@ import "./App.css"; -import Navbar from "./components/Navbar/Navbar"; import { Routes } from "react-router-dom"; import { Route } from "react-router-dom"; import LoginPage from "./pages/LoginPage/LoginPage"; @@ -7,27 +6,34 @@ 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"; import ProfilePage from "./pages/ProfilePage/ProfilePage"; import RecomMainPage from "./pages/RecomMainPage/RecomMainPage"; +import RecomAllPage from "./pages/RecomAllPage/RecomAllPage"; +import RecomUserFeedPage from "./pages/RecomUserFeedPage/RecomUserFeedPage"; +// import RecomAllPage from "./pages/RecomAllPage/RecomAllPage"; + +import LayoutNonNav from "./layout/LayoutNonNav"; +import Layout from "./layout/Layout"; function App() { - const location = useLocation(); - console.log("Current path:", location.pathname); - // Navbar를 제외할 경로 목록 - const excludeNavbarPaths = ["/", "/SignUp", "/user"]; return ( <> - {/* 특정 경로에서만 Navbar 렌더링 */} - {!excludeNavbarPaths.includes(location.pathname) && } - {/* 각자 route 설정하기 */} - } /> - } /> - } /> - } /> - } /> - } /> - } /> + {/* Navbar 없는 layout */} + }> + } /> + } /> + } /> + + {/* Navbar 있는 layout */} + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + ); diff --git a/FITple-Frontend/src/components/Navbar/Navbar.jsx b/FITple-Frontend/src/components/Navbar/Navbar.jsx index 6a6408e..4c70ea3 100644 --- a/FITple-Frontend/src/components/Navbar/Navbar.jsx +++ b/FITple-Frontend/src/components/Navbar/Navbar.jsx @@ -29,9 +29,9 @@ const Navbar = () => { {/* 메뉴 */} 옷장 - 추천 + 추천 검색 - 프로필 + 프로필 {/* 오른쪽 검색 영역 */} @@ -46,5 +46,4 @@ const Navbar = () => { ); }; - export default Navbar; diff --git a/FITple-Frontend/src/layout/Layout.jsx b/FITple-Frontend/src/layout/Layout.jsx new file mode 100644 index 0000000..08f2c9c --- /dev/null +++ b/FITple-Frontend/src/layout/Layout.jsx @@ -0,0 +1,14 @@ +import React from "react"; +import { Outlet } from "react-router-dom"; +import Navbar from "../components/Navbar/Navbar"; + +const Layout = () => { + return ( + <> + + + + ); +}; + +export default Layout; diff --git a/FITple-Frontend/src/layout/LayoutNonNav.jsx b/FITple-Frontend/src/layout/LayoutNonNav.jsx new file mode 100644 index 0000000..c4cebc2 --- /dev/null +++ b/FITple-Frontend/src/layout/LayoutNonNav.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import { Outlet } from "react-router-dom"; + +const LayoutNonNav = () => { + return ( + <> + + + ); +}; + +export default LayoutNonNav; From 5a70083577af5334f5477c1fca0c1c17456ac1a3 Mon Sep 17 00:00:00 2001 From: kangsuyeong Date: Thu, 8 Aug 2024 12:47:24 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20[#25]=20layout=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/App.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx index 6d140a7..5b8ea63 100644 --- a/FITple-Frontend/src/App.jsx +++ b/FITple-Frontend/src/App.jsx @@ -31,8 +31,6 @@ function App() { } /> } /> } /> - } /> - } />