QA 개선 사항 반영(issue #199)

src/components/common/sidebar/Sidebar.styled.ts

@@ -46,20 +46,17 @@ export const MenuList = styled.div`
   width: 100%;
   margin-top: 3rem;
 `;
-export const MenuItem = styled.div<{ $isActive: boolean }>`
-  display: flex;
+export const MenuItem = styled.div<{
+  $isActive: boolean;
+  $isHidden?: boolean;
+}>`
+  display: ${({ $isHidden }) => ($isHidden ? 'none' : 'flex')};
   align-items: center;
   padding: 0.625rem 1.25rem;
-  font-weight: 500;
-  color: #6d6d6d;
   margin: 0.5rem 0;
   background-color: ${({ $isActive }) =>
     $isActive ? '#f9f9f9' : 'transparent'};
 
-  @media ${({ theme }) => theme.mediaQuery.tablet} {
-    font-size: 0.9rem;
-  }
-
   &:hover {
     background-color: #f9f9f9;
   }
@@ -78,3 +75,11 @@ export const MenuItem = styled.div<{ $isActive: boolean }>`
 export const IconWrapper = styled.div`
   margin-right: 0.625rem;
 `;
+export const Label = styled.p`
+  font-weight: 500;
+  color: #6d6d6d;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 0.9rem;
+  }
+`;

src/components/common/sidebar/Sidebar.tsx

@@ -10,6 +10,7 @@ interface MenuItem {
   label: string;
   path: string;
   icon?: React.ReactNode;
+  isDone?: boolean;
 }
 
 interface SidebarProps {
@@ -47,14 +48,19 @@ const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
         <span>{nickname ? nickname : ''}</span>
       </S.AvartarContainer>
       <S.MenuList>
-        {menuItems.map(({ label, path, icon }, index) => (
-          <NavLink key={path} to={path}>
-            <S.MenuItem $isActive={getActiveIndex() === index}>
-              {icon && <S.IconWrapper>{icon}</S.IconWrapper>}
-              {label}
-            </S.MenuItem>
-          </NavLink>
-        ))}
+        {menuItems.map(({ label, path, icon, isDone = false }, index) => {
+          return (
+            <NavLink key={path} to={path}>
+              <S.MenuItem
+                $isActive={getActiveIndex() === index}
+                $isHidden={index === 2 && isDone}
+              >
+                {icon && <S.IconWrapper>{icon}</S.IconWrapper>}
+                {icon && <S.Label>{label}</S.Label>}
+              </S.MenuItem>
+            </NavLink>
+          );
+        })}
       </S.MenuList>
     </S.Container>
   );

src/components/manageProjects/CardList.styled.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const CardListWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: start;
   align-items: center;
   gap: 20px;
 `;

src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts

@@ -13,7 +13,6 @@ export const ItemWrapper = styled.li`
   &:hover {
     background-color: ${({ theme }) => theme.color.navy};
     color: ${({ theme }) => theme.color.white};
-    transition: all 0.2s ease;
   }
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {

src/constants/sidebarItems.tsx

@@ -5,7 +5,7 @@ import {
   UserPlusIcon,
 } from '@heroicons/react/24/outline';
 
-export const applicantsMenuItems = (projectId: number) => {
+export const applicantsMenuItems = (projectId: number, isDone?: boolean) => {
   return [
     {
       label: '지원자 보기',
@@ -21,6 +21,7 @@ export const applicantsMenuItems = (projectId: number) => {
       label: '공고 관리',
       path: `${ROUTES.modifyProject}/${projectId}`,
       icon: <PencilSquareIcon />,
+      isDone: isDone,
     },
   ];
 };

src/mock/mockProjectDetail.json

@@ -9,7 +9,7 @@
   "authorId": 8,
   "views": 1,
   "isBeginner": true,
-  "isDone": false,
+  "isDone": true,
   "recruitmentEndDate": "2025-02-15T00:00:00.000Z",
   "recruitmentStartDate": "2025-01-06T00:00:00.000Z",
   "createdAt": "2025-01-06T07:05:01.000Z",

src/mock/mockProjectList.json

@@ -65,6 +65,66 @@
     "createdAt": "2025-01-06T21:19:21.000Z",
     "updatedAt": "2025-01-06T21:19:21.000Z",
     "ProjectSkillTag": [
+      {
+        "projectId": 68,
+        "skillTagId": 12,
+        "SkillTag": {
+          "id": 12,
+          "name": "Kotlin",
+          "img": "스킬 태그 이미지 주소",
+          "createdAt": "2025-01-02T15:09:19.000Z"
+        }
+      },
+      {
+        "projectId": 68,
+        "skillTagId": 12,
+        "SkillTag": {
+          "id": 12,
+          "name": "Kotlin",
+          "img": "스킬 태그 이미지 주소",
+          "createdAt": "2025-01-02T15:09:19.000Z"
+        }
+      },
+      {
+        "projectId": 68,
+        "skillTagId": 12,
+        "SkillTag": {
+          "id": 12,
+          "name": "Kotlin",
+          "img": "스킬 태그 이미지 주소",
+          "createdAt": "2025-01-02T15:09:19.000Z"
+        }
+      },
+      {
+        "projectId": 68,
+        "skillTagId": 12,
+        "SkillTag": {
+          "id": 12,
+          "name": "Kotlin",
+          "img": "스킬 태그 이미지 주소",
+          "createdAt": "2025-01-02T15:09:19.000Z"
+        }
+      },
+      {
+        "projectId": 68,
+        "skillTagId": 12,
+        "SkillTag": {
+          "id": 12,
+          "name": "Kotlin",
+          "img": "스킬 태그 이미지 주소",
+          "createdAt": "2025-01-02T15:09:19.000Z"
+        }
+      },
+      {
+        "projectId": 68,
+        "skillTagId": 12,
+        "SkillTag": {
+          "id": 12,
+          "name": "Kotlin",
+          "img": "스킬 태그 이미지 주소",
+          "createdAt": "2025-01-02T15:09:19.000Z"
+        }
+      },
       {
         "projectId": 68,
         "skillTagId": 12,

src/pages/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx

@@ -31,8 +31,8 @@ const MyProjectVolunteersPass = () => {
     handleModalOpen
   );
   const sidebarMenuItem = useMemo(
-    () => applicantsMenuItems(Number(projectId)),
-    [projectId]
+    () => applicantsMenuItems(Number(projectId), projectData?.isDone),
+    [projectId, projectData]
   );
 
   return (

src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx

@@ -32,8 +32,8 @@ const MyProjectVolunteer = () => {
   );
 
   const sidebarMenuItem = useMemo(
-    () => applicantsMenuItems(Number(projectId)),
-    [projectId]
+    () => applicantsMenuItems(Number(projectId), projectData?.isDone),
+    [projectId, projectData]
   );
 
   const { applicantsData, isApplicantLoading } = useApllicantList(