Merge pull request #84 from UMC-FITple/feat/#83

[FEAT] Navbar path에 따라서 변하도록 개발
UMC-FITple · Aug 21, 2024 · 54017ac · 54017ac
2 parents 4be5024 + 77a92e8
commit 54017ac
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/FITple-Frontend/src/components/Navbar/Navbar.jsx b/FITple-Frontend/src/components/Navbar/Navbar.jsx
@@ -11,10 +11,14 @@ import {
   LogoTitle,
   LogoImg,
   LoginBTN,
+  MenuItemWhite,
 } from "./Navbar.style";
 import SearchBox from "../SearchBox/SearchBox";
+import { useLocation } from "react-router-dom";
 
 const Navbar = ({ ...props }) => {
+  const location = useLocation();
+
   return (
     <Container {...props}>
       {/* 전체 Navbar 가운데 정렬 */}
@@ -28,16 +32,16 @@ const Navbar = ({ ...props }) => {
           </LogoBox>
           {/* 메뉴 */}
           <MenuBox {...props}>
-            <MenuItem to="/cloth" {...props}>
+            <MenuItem to="/cloth" {...props} $active={location.pathname === "/cloth"}>
               옷장
             </MenuItem>
-            <MenuItem to="/recommend" {...props}>
+            <MenuItem to="/recommend" {...props} $active={location.pathname === "/recommend"}>
               추천
             </MenuItem>
-            <MenuItem to="/search" {...props}>
+            <MenuItemWhite to="/search" {...props} $active={location.pathname === "/search"}>
               검색
-            </MenuItem>
-            <MenuItem to="/profile" {...props}>
+            </MenuItemWhite>
+            <MenuItem to="/profile" {...props} $active={location.pathname === "/profile"}>
               프로필
             </MenuItem>
           </MenuBox>

diff --git a/FITple-Frontend/src/components/Navbar/Navbar.style.js b/FITple-Frontend/src/components/Navbar/Navbar.style.js
@@ -51,15 +51,31 @@ export const MenuBox = styled.div`
 `;
 
 export const MenuItem = styled(Link)`
-  color: black;
+  color: ${(props) => (props.$active ? "#0276fe" : "black")};
   cursor: pointer;
   text-decoration: none;
+  font-weight: ${(props) => (props.$active ? "800" : "700")};
+  transform: ${(props) => (props.$active ? "scale(1.2)" : "none")};
   &:hover {
     transform: scale(1.2);
     color: ${(props) => (props.$blue ? "white" : "#0276fe")};
     font-weight: 800;
   }
 `;
+
+export const MenuItemWhite = styled(Link)`
+  color: ${(props) => (props.$active ? "#FFFFFF" : "black")};
+  cursor: pointer;
+  text-decoration: none;
+  font-weight: ${(props) => (props.$active ? "800" : "700")};
+  transform: ${(props) => (props.$active ? "scale(1.2)" : "none")};
+  &:hover {
+    transform: scale(1.2);
+    color: ${(props) => (props.$blue ? "white" : "#0276fe")};
+    font-weight: 800;
+  }
+`;
+
 export const SearchContainer = styled.div`
   display: ${(props) => (props.$login ? "flex" : "none")};
   align-items: center;