fix-fe: 사이드바 셀렉트 된 메뉴 스타일 수정 (#786)

Co-authored-by: Jeongwoo Park <[email protected]>
woowacourse-teams · Oct 10, 2024 · d51a48c · d51a48c
1 parent b0b02e1
commit d51a48c
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 37 deletions.
diff --git a/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx b/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx
@@ -26,8 +26,8 @@ const meta: Meta<typeof DashboardSidebar> = {
       {
         text: '첫번째 옵션',
         isSelected: false,
-        dashboardId: '1',
-        applyFormId: '10',
+        dashboardId: 1,
+        applyFormId: 10,
         status: {
           isClosed: true,
           isPending: false,
@@ -38,8 +38,8 @@ const meta: Meta<typeof DashboardSidebar> = {
       {
         text: '두번째 옵션',
         isSelected: false,
-        dashboardId: '2',
-        applyFormId: '11',
+        dashboardId: 2,
+        applyFormId: 11,
         status: {
           isClosed: true,
           isPending: false,
@@ -50,8 +50,8 @@ const meta: Meta<typeof DashboardSidebar> = {
       {
         text: '세번째 옵션',
         isSelected: true,
-        dashboardId: '2',
-        applyFormId: '12',
+        dashboardId: 2,
+        applyFormId: 12,
         status: {
           isClosed: false,
           isPending: false,
@@ -62,8 +62,8 @@ const meta: Meta<typeof DashboardSidebar> = {
       {
         text: '네번째 옵션',
         isSelected: false,
-        dashboardId: '2',
-        applyFormId: '13',
+        dashboardId: 2,
+        applyFormId: 13,
         status: {
           isClosed: false,
           isPending: true,

diff --git a/frontend/src/components/dashboard/DashboardSidebar/index.tsx b/frontend/src/components/dashboard/DashboardSidebar/index.tsx
@@ -20,8 +20,8 @@ import S from './style';
 interface Option {
   text: string;
   isSelected: boolean;
-  applyFormId: string;
-  dashboardId: string;
+  applyFormId: number;
+  dashboardId: number;
   status: RecruitmentStatusObject;
 }
 
@@ -113,28 +113,31 @@ export default function DashboardSidebar({ sidebarStyle, options }: DashboardSid
             return (
               <Fragment key={title}>
                 <S.ContentSubTitle>{sidebarStyle.isSidebarOpen ? title : <S.Circle />}</S.ContentSubTitle>
-                {posts?.map(({ text, isSelected, applyFormId, dashboardId, status }) => {
-                  const Icon = IconObj[status.status];
-
-                  return (
-                    <S.SidebarItem key={applyFormId}>
-                      <Link to={routes.dashboard.post({ dashboardId, applyFormId })}>
-                        <S.SidebarItemLink
-                          isSelected={isSelected}
-                          isSidebarOpen={sidebarStyle.isSidebarOpen}
-                        >
-                          <S.IconContainer>
-                            <Icon
-                              size={16}
-                              strokeWidth={4}
-                            />
-                          </S.IconContainer>
-                          {sidebarStyle.isSidebarOpen && <S.SidebarItemText>{text}</S.SidebarItemText>}
-                        </S.SidebarItemLink>
-                      </Link>
-                    </S.SidebarItem>
-                  );
-                })}
+                {posts?.map(
+                  ({ text, isSelected, applyFormId: applyFormIdNum, dashboardId: dashboardIdNum, status }) => {
+                    const Icon = IconObj[status.status];
+                    const dashboardId = String(dashboardIdNum);
+                    const applyFormId = String(applyFormIdNum);
+                    return (
+                      <S.SidebarItem key={applyFormId}>
+                        <Link to={routes.dashboard.post({ dashboardId, applyFormId })}>
+                          <S.SidebarItemLink
+                            isSelected={isSelected}
+                            isSidebarOpen={sidebarStyle.isSidebarOpen}
+                          >
+                            <S.IconContainer>
+                              <Icon
+                                size={16}
+                                strokeWidth={4}
+                              />
+                            </S.IconContainer>
+                            {sidebarStyle.isSidebarOpen && <S.SidebarItemText>{text}</S.SidebarItemText>}
+                          </S.SidebarItemLink>
+                        </Link>
+                      </S.SidebarItem>
+                    );
+                  },
+                )}
               </Fragment>
             );
           })}

diff --git a/frontend/src/pages/DashBoardList/index.tsx b/frontend/src/pages/DashBoardList/index.tsx
@@ -19,12 +19,12 @@ export default function DashboardList() {
         {data?.dashboards.map((dashboard) => (
           <RecruitmentCard
             key={`${dashboard.dashboardId}-${dashboard.applyFormId}`}
-            dashboardId={dashboard.dashboardId}
+            dashboardId={String(dashboard.dashboardId)}
             title={dashboard.title}
             postStats={dashboard.stats}
             startDate={dashboard.startDate}
             endDate={dashboard.endDate}
-            onClick={() => handleCardClick(dashboard.dashboardId, dashboard.applyFormId)}
+            onClick={() => handleCardClick(String(dashboard.dashboardId), String(dashboard.applyFormId))}
           />
         ))}
         <S.AddCard onClick={() => navigate(routes.dashboard.create())}>

diff --git a/frontend/src/pages/DashboardLayout/index.tsx b/frontend/src/pages/DashboardLayout/index.tsx
@@ -16,7 +16,7 @@ export default function DashboardLayout() {
 
   const applyFormList = data?.dashboards.map(({ title, dashboardId, applyFormId, startDate, endDate }) => ({
     text: title,
-    isSelected: !!currentPostId && currentPostId === applyFormId,
+    isSelected: !!currentPostId && currentPostId === String(applyFormId),
     status: getTimeStatus({ startDate, endDate }),
     applyFormId,
     dashboardId,

diff --git a/frontend/src/types/dashboard.ts b/frontend/src/types/dashboard.ts
@@ -43,8 +43,8 @@ interface Stats {
 }
 
 interface Dashboard {
-  dashboardId: string;
-  applyFormId: string;
+  dashboardId: number;
+  applyFormId: number;
   title: string;
   stats: Stats;
   startDate: string;