From 06306ab632fe643e82679fe8be643102232e5f82 Mon Sep 17 00:00:00 2001
From: "wonsic3686@gmail.com" <wonsic3686@gmail.com>
Date: Wed, 26 Jun 2024 09:07:53 +0900
Subject: [PATCH] =?UTF-8?q?feat(Sprint5):=20=EB=84=A4=EB=B9=84=EA=B2=8C?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=ED=97=A4=EB=8D=94=20NavLink=20=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../navigationBar/NavigationBar.css           | 16 +++++----
 .../navigationBar/NavigationBar.jsx           | 36 +++++++++++++------
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/components/navigationBar/NavigationBar.css b/src/components/navigationBar/NavigationBar.css
index d4f2845ca..e43bbd72d 100644
--- 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
index ccbd95479..9b616613d 100644
--- 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>