Fix: #69 유저 설정 페이지 라우팅 관련 코드 수정

GU-99 · Aug 14, 2024 · 2078621 · 2078621
1 parent 1acd304
commit 2078621
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git a/src/components/sidebar/ListSetting.tsx b/src/components/sidebar/ListSetting.tsx
@@ -1,4 +1,4 @@
-import { NavLink, useParams } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
 type ListSettingProps = {
   navList: {
@@ -8,24 +8,20 @@ type ListSettingProps = {
 };
 
 export default function ListSetting({ navList }: ListSettingProps) {
-  const { teamId } = useParams();
   return (
     <ul>
-      {navList.map((item) => {
-        const routePath = item.route.includes(':teamId') ? item.route.replace(':teamId', teamId!) : item.route;
-        return (
-          <li key={item.label} className="relative cursor-pointer border-b bg-white hover:brightness-90">
-            <NavLink
-              to={`/setting/${routePath}`}
-              className={({ isActive }) =>
-                `flex h-30 flex-col justify-center border-l-4 px-10 ${isActive ? 'border-l-main' : 'border-l-transparent'}`
-              }
-            >
-              <span>{item.label}</span>
-            </NavLink>
-          </li>
-        );
-      })}
+      {navList.map((item) => (
+        <li key={item.label} className="relative cursor-pointer border-b bg-white hover:brightness-90">
+          <NavLink
+            to={`/setting/${item.route}`}
+            className={({ isActive }) =>
+              `flex h-30 flex-col justify-center border-l-4 px-10 ${isActive ? 'border-l-main' : 'border-l-transparent'}`
+            }
+          >
+            <span>{item.label}</span>
+          </NavLink>
+        </li>
+      ))}
     </ul>
   );
 }
diff --git a/src/layouts/page/SettingLayout.tsx b/src/layouts/page/SettingLayout.tsx
@@ -14,7 +14,7 @@ const navList = [
   },
   {
     label: 'My Teams',
-    route: 'team/:teamId',
+    route: 'teams',
   },
 ];
 
@@ -23,9 +23,8 @@ export default function SettingLayout() {
 
   const getTitle = () => {
     const currentPath = location.pathname.split('/').slice(-1)[0];
-    const currentNavItem = navList.find((item) =>
-      item.route.includes(':teamId') && location.pathname.includes('team') ? 'My Teams' : item.route === currentPath,
-    );
+    const currentNavItem = navList.find((item) => item.route === currentPath);
+
     return currentNavItem ? currentNavItem.label : '이메일 인증';
   };
 
@@ -41,7 +40,7 @@ export default function SettingLayout() {
           </div>
         </header>
         <div
-          className={`flex flex-col overflow-auto ${!location.pathname.includes('team') ? 'h-screen items-center justify-center' : ''}`}
+          className={`flex flex-col overflow-auto ${!location.pathname.includes('teams') ? 'h-screen items-center justify-center' : ''}`}
         >
           <Outlet />
         </div>

diff --git a/src/routes/MainRouter.tsx b/src/routes/MainRouter.tsx
@@ -62,7 +62,7 @@ export default function MainRouter() {
             { path: 'auth', element: <UserAuthenticatePage /> },
             { path: 'user', element: <UserSettingPage /> },
             { path: 'password', element: <UserPasswordSettingPage /> },
-            { path: 'team/:teamId', element: <TeamSettingPage /> },
+            { path: 'teams', element: <TeamSettingPage /> },
           ],
         },
         {