Refactor: NavLinks 공통 컴포넌트로 리팩토링

8-Sprinters · Dec 9, 2024 · c763156 · c763156
1 parent f267a49
commit c763156
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/src/app/admin/_components/NavLinks.tsx b/src/app/admin/_components/NavLinks.tsx
@@ -5,27 +5,23 @@ import Link from 'next/link';
 
 import * as styles from './NavLinks.css';
 
-export default function NavLinks() {
+interface NavLinksProps {
+  links: Array<Record<string, string>>;
+}
+
+export default function NavLinks({ links }: NavLinksProps) {
   const pathname = usePathname();
 
   return (
     <nav className={styles.nav}>
-      <Link
-        href="/admin/topics"
-        className={
-          pathname && pathname.startsWith('/admin/topics') ? styles.variantLink.selected : styles.variantLink.default
-        }
-      >
-        요청 주제
-      </Link>
-      <Link
-        href="/admin/notice"
-        className={
-          pathname && pathname.startsWith('/admin/notice') ? styles.variantLink.selected : styles.variantLink.default
-        }
-      >
-        게시물
-      </Link>
+      {links.map((link) => {
+        const isActive = pathname && pathname.startsWith(link.path);
+        return (
+          <Link href={link.path} className={isActive ? styles.variantLink.selected : styles.variantLink.default}>
+            {link.label}
+          </Link>
+        );
+      })}
     </nav>
   );
 }
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
@@ -12,7 +12,18 @@ export default function AdminNoticeLayout({ children }: AdminNoticeLayoutProps)
     <section className={styles.container}>
       <div className={styles.nav}>
         <h1 className={styles.title}>🤍 리스티웨이브 관리</h1>
-        <NavLinks />
+        <NavLinks
+          links={[
+            {
+              label: '요청 주제',
+              path: '/admin/topics',
+            },
+            {
+              label: '게시물',
+              path: '/admin/notice',
+            },
+          ]}
+        />
       </div>
       <main className={styles.main}>{children}</main>
     </section>