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(