feat: 사이드바 Link NavLink로 변경

frontend/src/components/SideBar/SideLink.jsx

@@ -1,15 +1,15 @@
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import styles from './SideLink.module.css';
 
-export default function SideLink({ children, path }) {
+export default function SideLink({ children, to }) {
   return (
     <li className={styles.list}>
-      <Link
-        to={path}
-        className={styles.link}
+      <NavLink
+        to={to}
+        className={({ isActive }) => (isActive ? styles.active : styles.link)}
       >
         {children}
-      </Link>
+      </NavLink>
     </li>
   );
 }

frontend/src/components/SideBar/SideLink.module.css

@@ -3,7 +3,8 @@
   margin-bottom: 16px;
 }
 
-.link {
+.link,
+.active {
   width: 100%;
   text-decoration: none;
   color: var(--text-color);
@@ -11,3 +12,8 @@
   line-height: 1.2;
   font-weight: 400;
 }
+
+.active {
+  font-weight: 700;
+  text-decoration: underline;
+}