Merge pull request #32 from UMC-FITple/refactor/#25

Refactor/#25 Navbar에 페이지 연결하기 & Layout 수정
UMC-FITple · Aug 8, 2024 · c07de97 · c07de97
2 parents 692e7fc + 5a70083
commit c07de97
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 27 deletions.
diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx
@@ -1,36 +1,37 @@
 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";
 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";
-import ChangepwdPage from "./pages/ChangepwdPage/ChangepwdPage";
+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() {
   return (
     <>
-      {/* Navbar */}
-      <Navbar />
-      {/* 각자 route 설정하기 */}
       <Routes>
-        {/* 로그인페이지 */}
-        <Route path="/login" element={<LoginPage />} />
-        {/* 회원가입페이지 */}
-        <Route path="/signup" element={<SignupPage />} />
-        {/* 상품디테일 */}
-        <Route path="/product" element={<ClothdetailPage />} />
-        {/* 이게 메인페이지? */}
-        <Route path="/" element={<ClothmainPage />} />
-        {/* 프로필페이지 */}
-        <Route path="/profile" element={<ProfilePage />} />
-        <Route path="/user" element={<UserInfoPage />} />
-        <Route path="/change" element={<ChangepwdPage />} />
-        <Route path="/check" element={<RecomUserFeedPage />} />
+        {/* Navbar 없는 layout */}
+        <Route element={<LayoutNonNav />}>
+          <Route path="/" element={<LoginPage />} />
+          <Route path="/signup" element={<SignupPage />} />
+          <Route path="/user" element={<UserInfoPage />} />
+        </Route>
+        {/* Navbar 있는 layout */}
+        <Route element={<Layout />}>
+          <Route path="/cloth" element={<ClothmainPage />} />
+          <Route path="/detail" element={<ClothdetailPage />} />
+          <Route path="/profile" element={<ProfilePage />} />
+          <Route path="/recommend" element={<RecomMainPage />} />
+          <Route path="/recommendall" element={<RecomAllPage />} />
+        </Route>
       </Routes>
     </>
   );

diff --git 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,16 +22,16 @@ const Navbar = () => {
         {/* 로고 & 메뉴 영역 */}
         <MainBox>
           {/* 로고 */}
-          <LogoBox>
+          <LogoBox to="/cloth">
             <img src={Logo} />
             <LogoTitle>FITple</LogoTitle>
           </LogoBox>
           {/* 메뉴 */}
           <MenuBox>
-            <MenuItem>옷장</MenuItem>
-            <MenuItem>추천</MenuItem>
+            <MenuItem to="/cloth">옷장</MenuItem>
+            <MenuItem to="/recommend">추천</MenuItem>
             <MenuItem>검색</MenuItem>
-            <MenuItem>프로필</MenuItem>
+            <MenuItem to="/profile">프로필</MenuItem>
           </MenuBox>
         </MainBox>
         {/* 오른쪽 검색 영역 */}
@@ -47,5 +46,4 @@ const Navbar = () => {
   );
 };
 
-
 export default Navbar;
diff --git 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/layout/Layout.jsx 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 (
+    <>
+      <Navbar />
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;
diff --git a/FITple-Frontend/src/layout/LayoutNonNav.jsx b/FITple-Frontend/src/layout/LayoutNonNav.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+
+const LayoutNonNav = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+};
+
+export default LayoutNonNav;