From 3feef38eeb7a31b74480ccf04de8980ecfd6fd09 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 1 Jun 2024 01:29:26 +0900
Subject: [PATCH] refactor: replace Link in MainLayout to RouteObject map

---
 packages/react/src/MainLayout.tsx | 37 +++++++++++--------------------
 packages/react/src/RouteObject.ts | 19 ++++++++++++++++
 2 files changed, 32 insertions(+), 24 deletions(-)
 create mode 100644 packages/react/src/RouteObject.ts

diff --git a/packages/react/src/MainLayout.tsx b/packages/react/src/MainLayout.tsx
index 3d32f0f..5875dbf 100644
--- a/packages/react/src/MainLayout.tsx
+++ b/packages/react/src/MainLayout.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Link, Outlet, useLocation } from "react-router-dom";
 import { Button } from "../components/Button";
+import RouteObject from "./RouteObject";
 
 type Theme = "light" | "dark";
 
@@ -61,30 +62,18 @@ function TopNav() {
             <Link to="/" className="font-bold">
               PSW/UI
             </Link>
-            <Link
-              to="/docs"
-              data-active={
-                location.pathname.startsWith("/docs") &&
-                !location.pathname.startsWith("/docs/components")
-              }
-              className="font-light text-base data-[active=true]:text-current text-neutral-500 hover:text-neutral-700"
-            >
-              Docs
-            </Link>
-            <Link
-              to="/docs/components"
-              data-active={location.pathname.startsWith("/docs/components")}
-              className="font-light text-base data-[active=true]:text-current text-neutral-500 hover:text-neutral-700"
-            >
-              Components
-            </Link>
-            <Link
-              data-comment="external"
-              to="/github"
-              className="font-light text-base text-neutral-500 hover:text-neutral-700"
-            >
-              Github
-            </Link>
+            {RouteObject.mainNav.map((link) => {
+              return (
+                <Link
+                  key={link.path}
+                  to={link.path}
+                  data-active={link.eq(location.pathname)}
+                  className="font-light text-base data-[active=true]:text-current text-neutral-500 hover:text-neutral-700"
+                >
+                  {link.name}
+                </Link>
+              );
+            })}
           </div>
           <div data-role="controls" className="flex flex-row items-center">
             <ThemeButton />
diff --git a/packages/react/src/RouteObject.ts b/packages/react/src/RouteObject.ts
new file mode 100644
index 0000000..4f2aa93
--- /dev/null
+++ b/packages/react/src/RouteObject.ts
@@ -0,0 +1,19 @@
+export default {
+  mainNav: [
+    {
+      path: "/docs",
+      name: "Docs",
+      eq: (pathname: string) => pathname.startsWith("/docs") && !pathname.startsWith("/docs/components")
+    },
+    {
+      path: "/docs/components",
+      name: "Components",
+      eq: (pathname: string) => pathname.startsWith("/docs/components")
+    },
+    {
+      path: "https://github.com/p-sw/ui",
+      name: "Github",
+      eq: () => false
+    }
+  ]
+}
\ No newline at end of file