Refactor: [#25] Navbar 라우터연결

UMC-FITple · Aug 6, 2024 · ca06ce4 · ca06ce4
1 parent a5f9794
commit ca06ce4
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 146 deletions.
diff --git 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 />
+      {/* 특정 경로에서만 Navbar 렌더링 */}
+      {!excludeNavbarPaths.includes(location.pathname) && <Navbar />}
       {/* 각자 route 설정하기 */}
       <Routes>
-        {/* 로그인페이지 */}
-        <Route path="/login" element={<LoginPage />} />
-        {/* 회원가입페이지 */}
+        <Route path="/" element={<LoginPage />} />
         <Route path="/signup" element={<SignupPage />} />
-        {/* 상품디테일 */}
-        <Route path="/product" element={<ClothdetailPage />} />
-        {/* 이게 메인페이지? */}
-        <Route path="/" element={<ClothmainPage />} />
+        <Route path="/user" element={<UserInfoPage />} />
+        <Route path="/cloth" element={<ClothmainPage />} />
+        <Route path="/detail" element={<ClothdetailPage />} />
       </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,13 +22,13 @@ const Navbar = () => {
         {/* 로고 & 메뉴 영역 */}
         <MainBox>
           {/* 로고 */}
-          <LogoBox>
+          <LogoBox to="/cloth">
             <img src={Logo} />
             <LogoTitle>FITple</LogoTitle>
           </LogoBox>
           {/* 메뉴 */}
           <MenuBox>
-            <MenuItem>옷장</MenuItem>
+            <MenuItem to="/cloth">옷장</MenuItem>
             <MenuItem>추천</MenuItem>
             <MenuItem>검색</MenuItem>
             <MenuItem>프로필</MenuItem>

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;