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};
+`;