feat: 모집공고가 없을 시, 지원자 페이지에서 모집공고 생성 버튼 표시

[abiriadev]

#338 부분 해결

💡 다음 이슈를 해결했어요.

기존 코드의 경우, 모집 공고가 없을 시 지원자 페이지를 불러오는 도중 API 실패가 발생하며 에러 화면이 나왔지만, 이제 모집 공고가 없을 시 임시로 '모집 공고 생성 버튼' 등을 표시해 사용자가 에러를 마주하지 않도록 도와줍니다.

💡 이슈를 처리하면서 추가된 코드가 있어요.

• 지원자 API뿐만 아니라, 기존의 스터디 상세 정보까지 fallback으로 가져옵니다.
  이는 좋지 않은 동작이며, 백엔드가 이 기능을 지원하게 된다면 추후 리팩토링 필요.
  

  ludo-frontend/src/Pages/Applicants/index.tsx

  Lines 19 to 20 in 97f63fa

  	const { data: ApplicantsDetail, status } = useApplicantsDetail(studyId);
  	const { data: studyDetail, isSuccess } = useStudyDetail(studyId);

• 지원자 정보를 불러오는 중이라면 <Loading />을, 불러오기에 실패했다면 <PlaceHolder />를, 성공했다면 기존과 같은 화면을 보여줍니다.
  

  ludo-frontend/src/Pages/Applicants/index.tsx

  Lines 41 to 88 in 97f63fa

  	<Main>
  	{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>

  
  
  
  

💡 필요한 후속작업이 있어요.

• 임시 작업이므로 백엔드, 디자인 분들과 의견 공유
  
  
  

💡 다음 자료를 참고하면 좋아요.

• hotFix: 지원자 페이지 owner undefined 에러 해결 및 건의사항 반영 #338
  
  
  

✅ 셀프 체크리스트

• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
• 커밋 메세지를 컨벤션에 맞추었습니다.
• 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
• 변경 후 코드는 기존의 테스트를 통과합니다.
• 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
• docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.