feat(Sprint5): 네비게이션 헤더 NavLink 추가

codeit-bootcamp-frontend · Jun 26, 2024 · 06306ab · 06306ab
1 parent 2c48f4b
commit 06306ab
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/src/components/navigationBar/NavigationBar.css b/src/components/navigationBar/NavigationBar.css
@@ -12,33 +12,37 @@
   border-bottom: 1px solid #dfdfdf;
 }
 
-.navbarLeft {
+.navbar-left {
   display: flex;
   align-items: center;
 }
 
-.navbarHomeLogo {
+.navbar-home-logo {
   width: 153px;
 }
 
-.navbarMenu {
+.navbar-menu {
   margin: 0 15px;
   text-decoration: none;
 }
 
-.navbarMenu ol {
+.navbar-menu ol {
   list-style-type: none;
   padding-left: 0;
 }
 
-.navbarMenuItem {
+.navbar-menu-item {
   display: inline-block;
   margin: 10px;
   font-size: 18px;
   font-weight: bold;
 }
 
-.navbarMenuItem.active {
+.navbar-menu-item.active {
+  color: var(--blue);
+}
+
+.nav-bar-menu-link.active {
   color: var(--blue);
 }
 

diff --git a/src/components/navigationBar/NavigationBar.jsx b/src/components/navigationBar/NavigationBar.jsx
@@ -1,29 +1,45 @@
-import { useEffect, useState } from 'react';
+import { NavLink } from 'react-router-dom';
 import imgPandaMarketLogo from '../../assets/images/logo/panda-market-logo.png';
 import './NavigationBar.css';
 
 function NavigationBar() {
   return (
     <header className="navbar">
-      <div className="navbarLeft">
+      <div className="navbar-left">
         <a href="/">
           <img
-            className="navbarHomeLogo"
+            className="navbar-home-logo"
             src={imgPandaMarketLogo}
             alt="판다마켓 홈"
           />
         </a>
-        <nav className="navbarMenu">
+        <nav className="navbar-menu">
           <ol>
-            <li className="navbarMenuItem navbar-menu-board">
-              <a href="/board" value="board">
+            <li className="navbar-menu-item navbar-menu-board">
+              {/* <a href="/board" value="board">
                 자유게시판
-              </a>
+              </a> */}
+              <NavLink
+                to={'/community'}
+                className={({ isActive }) =>
+                  `nav-bar-menu-link ${isActive ? 'active' : ''}`
+                }
+              >
+                자유게시판
+              </NavLink>
             </li>
-            <li className="navbarMenuItem navbar-menu-items">
-              <a href="/items" value="items">
+            <li className="navbar-menu-item navbar-menu-items">
+              {/* <a href="/items" value="items">
+                중고마켓
+              </a> */}
+              <NavLink
+                to={'/items'}
+                className={({ isActive }) =>
+                  `nav-bar-menu-link ${isActive ? 'active' : ''}`
+                }
+              >
                 중고마켓
-              </a>
+              </NavLink>
             </li>
           </ol>
         </nav>