From 6794598922b8b4b282a47a0230e66e49a27edabe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A7=84=ED=98=B8?= <rlawlsgh1227@gmail.com>
Date: Thu, 25 Jul 2024 09:57:13 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EC=9D=B4=EB=8F=99=20=EC=98=A4=EB=A5=98=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TopNav/TopNav.stories.ts   |  9 ++++++--
 HDesign/src/components/TopNav/TopNav.tsx      | 22 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/HDesign/src/components/TopNav/TopNav.stories.ts b/HDesign/src/components/TopNav/TopNav.stories.ts
index 3413bbd58..1f639bab3 100644
--- a/HDesign/src/components/TopNav/TopNav.stories.ts
+++ b/HDesign/src/components/TopNav/TopNav.stories.ts
@@ -11,7 +11,12 @@ const meta = {
   decorators: [withRouter],
   parameters: {
     reactRouter: reactRouterParameters({
-      routing: './',
+      location: {
+        pathParams: {
+          eventId: '123123',
+        },
+      },
+      routing: {path: '/event/:eventId/home'},
     }),
     layout: 'centered',
   },
@@ -22,7 +27,7 @@ const meta = {
     },
   },
   args: {
-    navType: 'back',
+    navType: 'home',
   },
 } satisfies Meta<typeof TopNav>;
 
diff --git a/HDesign/src/components/TopNav/TopNav.tsx b/HDesign/src/components/TopNav/TopNav.tsx
index 9a58d12f4..f6f2316d8 100644
--- a/HDesign/src/components/TopNav/TopNav.tsx
+++ b/HDesign/src/components/TopNav/TopNav.tsx
@@ -6,11 +6,26 @@ import {TopNavProps} from './TopNav.type';
 import Switch from '../Switch/Switch';
 import {useState} from 'react';
 
-const PATH_TABLE: Record<string, {display: string; path: string}> = {
+export interface Path {
+  display: string;
+  path: string;
+}
+
+const PATH_TABLE: Record<string, Path> = {
   home: {display: '홈', path: 'home'},
   admin: {display: '관리', path: 'admin'},
 };
 
+const getPathByDisplay = (displayName: string): string | undefined => {
+  for (const key in PATH_TABLE) {
+    if (PATH_TABLE[key].display === displayName) {
+      return PATH_TABLE[key].path;
+    }
+  }
+
+  return undefined;
+};
+
 const TopNav = ({navType}: TopNavProps) => {
   const navigate = useNavigate();
   const location = useLocation();
@@ -18,12 +33,13 @@ const TopNav = ({navType}: TopNavProps) => {
   const pathArray = location.pathname.split('/');
   const basePath = pathArray.slice(0, -1).join('/');
   const lastPath = pathArray[pathArray.length - 1];
+  const displayName = PATH_TABLE[lastPath].display;
 
-  const [nav, setNav] = useState(PATH_TABLE[lastPath].display);
+  const [nav, setNav] = useState(displayName);
 
   const handleRoute = (nav: string) => {
     setNav(nav);
-    navigate(`${basePath}/${PATH_TABLE[nav].path}`);
+    navigate(`${basePath}/${getPathByDisplay(nav)}`);
   };
 
   const TopNavByType = () => {