From 97f63fa85b63e07ae6fd5abdfff66a1db3803bf3 Mon Sep 17 00:00:00 2001
From: Abiria <abiria.dev@gmail.com>
Date: Fri, 5 Jul 2024 13:40:05 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EC=A7=91=EA=B3=B5=EA=B3=A0?=
 =?UTF-8?q?=EA=B0=80=20=EC=97=86=EC=9D=84=20=EC=8B=9C,=20=EC=A7=80?=
 =?UTF-8?q?=EC=9B=90=EC=9E=90=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EB=AA=A8=EC=A7=91=EA=B3=B5=EA=B3=A0=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EB=B2=84=ED=8A=BC=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Pages/Applicants/index.tsx | 94 +++++++++++++++++++++++-----------
 1 file changed, 64 insertions(+), 30 deletions(-)

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 = () => {
       </Header>
       <RowDivider />
       <Main>
-        {isLoading ? (
-          <Loading />
-        ) : (
-          <MainInner>
-            <ParentNav studyTitle={study.title} />
-            <InfoSection>
-              <InfoFields>
-                <InfoField title="현재 인원수" content={study.participantCount} flexDirection="column" />
-                <InfoField title="목표 인원수" content={study.participantLimit} flexDirection="column" />
-              </InfoFields>
-              <Applicants>
-                {applicants.map((applicant) => (
-                  <ApplicantLi key={applicant.id}>
-                    <ApplicantCard
-                      studyId={studyId}
-                      id={applicant.id}
-                      title={study.title}
-                      nickname={applicant.nickname}
-                      email={applicant.email}
-                      position={applicant.position}
-                      isOwner={user?.id === study.owner.id}
-                      reviewStatistics={applicant.reviewStatistics}
-                    />
-                  </ApplicantLi>
-                ))}
-              </Applicants>
-            </InfoSection>
-          </MainInner>
-        )}
+        {match([status, isSuccess])
+          .with(['pending', P._], () => <Loading />)
+          .with(['success', P._], () => (
+            <MainInner>
+              <ParentNav studyTitle={study.title} />
+              <InfoSection>
+                <InfoFields>
+                  <InfoField title="현재 인원수" content={study.participantCount} flexDirection="column" />
+                  <InfoField title="목표 인원수" content={study.participantLimit} flexDirection="column" />
+                </InfoFields>
+                <Applicants>
+                  {applicants.map((applicant) => (
+                    <ApplicantLi key={applicant.id}>
+                      <ApplicantCard
+                        studyId={studyId}
+                        id={applicant.id}
+                        title={study.title}
+                        nickname={applicant.nickname}
+                        email={applicant.email}
+                        position={applicant.position}
+                        isOwner={user?.id === study.owner.id}
+                        reviewStatistics={applicant.reviewStatistics}
+                      />
+                    </ApplicantLi>
+                  ))}
+                </Applicants>
+              </InfoSection>
+            </MainInner>
+          ))
+          .with(['error', true], () => (
+            <MainInner>
+              <ParentNav studyTitle={studyDetail.study.title} />
+              <InfoSection>
+                <InfoFields>
+                  <InfoField title="현재 인원수" content={studyDetail.study.participantCount} flexDirection="column" />
+                </InfoFields>
+                <PlaceHolder>
+                  <PlaceHolderTitle>아직 스터디 모집 공고를 작성하지 않았어요!</PlaceHolderTitle>
+                  <Button scheme="primary">
+                    <Link to={`/studies/${studyDetail.study.id}/recruitments/create`}>모집공고 작성하기</Link>
+                  </Button>
+                </PlaceHolder>
+              </InfoSection>
+            </MainInner>
+          ))
+          .run()}
       </Main>
       {user?.id === study?.owner.id && (
         <CloseSection>
@@ -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};
+`;