diff --git a/src/components/common/sidebar/Sidebar.styled.ts b/src/components/common/sidebar/Sidebar.styled.ts
index 3cd47911..01d6c88f 100644
--- a/src/components/common/sidebar/Sidebar.styled.ts
+++ b/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;
+ }
+`;
diff --git a/src/components/common/sidebar/Sidebar.tsx b/src/components/common/sidebar/Sidebar.tsx
index 45531a60..98b7311b 100644
--- a/src/components/common/sidebar/Sidebar.tsx
+++ b/src/components/common/sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { NavLink, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
import Avatar from '../avatar/Avatar';
import * as S from './Sidebar.styled';
import React, { useCallback } from 'react';
@@ -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) => {
{nickname ? nickname : ''}
- {menuItems.map(({ label, path, icon }, index) => (
-
-
- {icon && {icon}}
- {label}
-
-
- ))}
+ {menuItems.map(({ label, path, icon, isDone = false }, index) => {
+ return (
+
+
+ {icon && {icon}}
+ {icon && {label}}
+
+
+ );
+ })}
);
diff --git a/src/components/manageProjects/CardList.styled.ts b/src/components/manageProjects/CardList.styled.ts
index 16ddc17c..f968346f 100644
--- a/src/components/manageProjects/CardList.styled.ts
+++ b/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;
`;
diff --git a/src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts b/src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts
index cc5c1e7f..f34d2d24 100644
--- a/src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts
+++ b/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} {
diff --git a/src/constants/sidebarItems.tsx b/src/constants/sidebarItems.tsx
index 5693921b..dd76a964 100644
--- a/src/constants/sidebarItems.tsx
+++ b/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: ,
+ isDone: isDone,
},
];
};
diff --git a/src/mock/mockProjectDetail.json b/src/mock/mockProjectDetail.json
index 052edf9a..d71fcedb 100644
--- a/src/mock/mockProjectDetail.json
+++ b/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",
diff --git a/src/mock/mockProjectList.json b/src/mock/mockProjectList.json
index c7bd61ff..16c09abb 100644
--- a/src/mock/mockProjectList.json
+++ b/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,
diff --git a/src/pages/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx b/src/pages/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx
index b8663373..15d83b7e 100644
--- a/src/pages/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx
+++ b/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 (
diff --git a/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx b/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx
index c889e9db..7f671530 100644
--- a/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx
+++ b/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(