diff --git a/src/Pages/Applicants/index.tsx b/src/Pages/Applicants/index.tsx index 5d19ebf0..3daa0096 100644 --- a/src/Pages/Applicants/index.tsx +++ b/src/Pages/Applicants/index.tsx @@ -10,11 +10,15 @@ import { useApplicantsDetail } from '@/Hooks/study/useApplicantsDetail'; import { useCloseRecruitmentMutation } from '@/Hooks/recruitments/useCloseRecruitmentMutation'; import { RowDivider } from '@/Components/Common/Divider/RowDivider'; import Footer from '@/Components/Footer'; +import { P, match } from 'ts-pattern'; +import { useStudyDetail } from '@/Hooks/study/useStudyDetail'; export const ApplicantsPage = () => { const studyId = Number(useParams().studyId); const { user } = useUserStore(); - const { data: ApplicantsDetail, isLoading } = useApplicantsDetail(studyId); + const { data: ApplicantsDetail, status } = useApplicantsDetail(studyId); + const { data: studyDetail, isSuccess } = useStudyDetail(studyId); + const study = ApplicantsDetail?.study; const applicants: Applicant[] = ApplicantsDetail?.applicants; const navigate = useNavigate(); @@ -35,35 +39,52 @@ export const ApplicantsPage = () => {
- {isLoading ? ( - - ) : ( - - - - - - - - - {applicants.map((applicant) => ( - - - - ))} - - - - )} + {match([status, isSuccess]) + .with(['pending', P._], () => ) + .with(['success', P._], () => ( + + + + + + + + + {applicants.map((applicant) => ( + + + + ))} + + + + )) + .with(['error', true], () => ( + + + + + + + + 아직 스터디 모집 공고를 작성하지 않았어요! + + + + + )) + .run()}
{user?.id === study?.owner.id && ( @@ -288,3 +309,16 @@ const FooterSection = styled.div` justify-content: center; background: ${({ theme }) => theme.color.gray1}; `; + +const PlaceHolder = styled.div` + padding: 72px 24px; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +`; + +const PlaceHolderTitle = styled.span` + color: ${({ theme }) => theme.color.black4}; + ${({ theme }) => theme.typo.ListLabel}; +`;