fix: 링크 active시 색상변경

Author: Jiii-Eun

src/components/layout/Header.jsx

@@ -1,11 +1,14 @@
-import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink, useLocation } from "react-router-dom";
 
 import pandaLogo from "@/assets/logo.png";
 import UserIcon from "@/assets/ic_user.svg";
 import { HeaderStyle } from "@/components/layout/Header.style";
 import { WidthContainer } from "@/styles/commonStyle";
 
 function Header() {
+  const { pathname } = useLocation();
+
+  const itemsActive = pathname.startsWith("/items") || pathname === "/additem";
   return (
     <HeaderStyle>
       <WidthContainer>
@@ -27,7 +30,9 @@ function Header() {
               <li>
                 <NavLink
                   to="/items"
-                  className={({ isActive }) => (isActive ? "active" : "")}
+                  className={({ isActive }) =>
+                    isActive || itemsActive ? "active" : ""
+                  }
                 >
                   중고마켓
                 </NavLink>

src/components/layout/Header.style.js

@@ -66,6 +66,7 @@ export const HeaderStyle = styled.header`
     text-decoration: underline;
     text-underline-offset: 4px;
     text-decoration-thickness: 2px;
+    color: var(--primary-100);
   }
 
   .user_img {