fix : "회원 상세 조회" 부분에서 지원/참여/기획한 프로젝트 탭 부분의 선택된 탭에 적용되는 스타일 버그 해결

Author: layout-SY

src/components/user/mypage/ContentTab.tsx

@@ -4,6 +4,7 @@ import { Link, Outlet, useLocation } from 'react-router-dom';
 import ScrollWrapper from './ScrollWrapper';
 import MovedInquiredLink from '../customerService/MoveInquiredLink';
 import useAuthStore from '../../../store/authStore';
+import { ADMIN_ROUTE, ROUTES } from '../../../constants/routes';
 
 interface Filter {
   title: string;
@@ -23,15 +24,26 @@ export default function ContentTab({ filter, $justifyContent }: ContentProps) {
   const [filterId, setFilterId] = useState<number>();
 
   useEffect(() => {
-    const currentFilter = filter.find((item) =>
-      pathname.includes(item.url.split('/').pop() || '')
-    );
-    if (currentFilter && currentFilter.id !== undefined) {
-      setFilterId(currentFilter.id);
+    if (
+      pathname.includes(ROUTES.notificationsAppliedProjects) ||
+      pathname.includes(ROUTES.activityInquiries) ||
+      pathname.includes(ADMIN_ROUTE.appliedProject)
+    ) {
+      return setFilterId(1);
+    } else if (
+      pathname.includes(ROUTES.notificationsCheckedApplicants) ||
+      pathname.includes(ADMIN_ROUTE.joinedProject)
+    ) {
+      return setFilterId(2);
+    } else if (
+      pathname.includes(`${ROUTES.myPageNotifications}/${ROUTES.comments}`) ||
+      pathname.includes(ADMIN_ROUTE.createdProject)
+    ) {
+      return setFilterId(3);
     } else {
-      setFilterId(filter[0]?.id || 0);
+      return setFilterId(0);
     }
-  }, [pathname, filter]);
+  }, [setFilterId, pathname]);
 
   function handleChangeId(id: number) {
     setFilterId(id);
@@ -46,6 +58,7 @@ export default function ContentTab({ filter, $justifyContent }: ContentProps) {
             to={filter.url}
             onClick={() => handleChangeId(filter.id as number)}
           >
+            {' '}
             <S.WrapperTitle $selected={filter?.id === filterId}>
               <S.FilterTitle>{filter.title}</S.FilterTitle>
             </S.WrapperTitle>

src/constants/admin/userDetailContentHeader.ts

@@ -0,0 +1,19 @@
+import { ADMIN_ROUTE } from '../routes';
+
+export const PROJECT_TABS = [
+  {
+    title: '지원한 프로젝트',
+    url: `${ADMIN_ROUTE.appliedProject}`,
+    id: 1,
+  },
+  {
+    title: '참여한 프로젝트',
+    url: `${ADMIN_ROUTE.joinedProject}`,
+    id: 2,
+  },
+  {
+    title: '기획한 프로젝트',
+    url: `${ADMIN_ROUTE.createdProject}`,
+    id: 3,
+  },
+] as const;

src/pages/admin/adminUser/AdminUserProjectsLayout.tsx

@@ -1,36 +1,10 @@
-import { useParams } from 'react-router-dom';
 import ContentTab from '../../../components/user/mypage/ContentTab';
-import { ADMIN_ROUTE } from '../../../constants/routes';
-
-const PROJECT_TABS = [
-  {
-    title: '지원한 프로젝트',
-    url: `/admin/users/:userId/${ADMIN_ROUTE.projects}/${ADMIN_ROUTE.appliedProject}`,
-    id: 0,
-  },
-  {
-    title: '참여한 프로젝트',
-    url: `/admin/users/:userId/${ADMIN_ROUTE.projects}/${ADMIN_ROUTE.joinedProject}`,
-    id: 1,
-  },
-  {
-    title: '기획한 프로젝트',
-    url: `/admin/users/:userId/${ADMIN_ROUTE.projects}/${ADMIN_ROUTE.createdProject}`,
-    id: 2,
-  },
-];
+import { PROJECT_TABS } from '../../../constants/admin/userDetailContentHeader';
 
 export default function AdminUserProjectsLayout() {
-  const { userId } = useParams();
-
-  const filter = PROJECT_TABS.map((tab) => ({
-    ...tab,
-    url: tab.url.replace(':userId', userId ?? ''),
-  }));
-
   return (
     <div>
-      <ContentTab filter={filter} $justifyContent='space-evenly' />
+      <ContentTab filter={PROJECT_TABS} $justifyContent='space-evenly' />
     </div>
   );
 }