Merge pull request #161 from kakao-tech-campus-3rd-step3/refactor/applicant-filter-api#140

[REFACTOR] 대시보드 지원자 목록 실시간 동기화 및 필터링 개선 (#140)

Author: aaaaaattt

src/mocks/repositories/applicant.ts

@@ -9,7 +9,7 @@ const applicants: ApplicantData[] = [
     department: '소프트웨어공학과',
     phoneNumber: '010-1010-1010',
     email: 'ddd@naver.com',
-    status: '미정',
+    status: 'PENDING',
   },
   {
     id: 2,
@@ -18,7 +18,7 @@ const applicants: ApplicantData[] = [
     department: '소프트웨어공학과',
     phoneNumber: '010-1010-1010',
     email: 'ddd@naver.com',
-    status: '합격',
+    status: 'APPROVED',
   },
   {
     id: 3,
@@ -27,7 +27,7 @@ const applicants: ApplicantData[] = [
     department: '소프트웨어공학과',
     phoneNumber: '010-1010-1010',
     email: 'ddd@naver.com',
-    status: '불합격',
+    status: 'REJECTED',
   },
   {
     id: 4,
@@ -36,7 +36,7 @@ const applicants: ApplicantData[] = [
     department: '소프트웨어공학과',
     phoneNumber: '010-1010-1010',
     email: 'ddd@naver.com',
-    status: '미정',
+    status: 'PENDING',
   },
 ];
 

src/pages/admin/ApplicationDetail/components/ApplicantProfileSection/ApplicantStatusButton.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
-import type { ApplicantData, ApplicantStatus } from '@/pages/admin/Dashboard/types/dashboard';
+import type { StatusLabel, ApplicationStatus } from '@/pages/admin/Dashboard/types/dashboard';
 
 type Props = {
-  label: ApplicantData['status'];
-  value: ApplicantStatus;
+  label: StatusLabel;
+  value: ApplicationStatus;
   selected: boolean;
-  onClick: (status: ApplicantStatus) => void;
+  onClick: (status: ApplicationStatus) => void;
 };
 
 export const ApplicantStatusButton = ({ label, value, selected, onClick }: Props) => {

src/pages/admin/ApplicationDetail/components/ApplicantProfileSection/ApplicantStatusToggle.tsx

@@ -1,17 +1,17 @@
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { ApplicantStatusButton } from './ApplicantStatusButton';
-import type { ApplicantStatus } from '@/pages/admin/Dashboard/types/dashboard';
+import type { ApplicationStatus } from '@/pages/admin/Dashboard/types/dashboard';
 
 type Props = {
-  status?: ApplicantStatus;
-  updateStatus: (status: ApplicantStatus) => void;
+  status?: ApplicationStatus;
+  updateStatus: (status: ApplicationStatus) => void;
 };
 
 export const ApplicantStatusToggle = ({ status, updateStatus }: Props) => {
   const [statusOption, setStatusOption] = useState(status);
 
-  const handleClick = (newStatus: ApplicantStatus) => {
+  const handleClick = (newStatus: ApplicationStatus) => {
     setStatusOption(newStatus);
     updateStatus(newStatus);
   };
@@ -20,8 +20,8 @@ export const ApplicantStatusToggle = ({ status, updateStatus }: Props) => {
     <Container>
       <ApplicantStatusButton
         label={'합격'}
-        value={'ACCEPTED'}
-        selected={statusOption === 'ACCEPTED'}
+        value={'APPROVED'}
+        selected={statusOption === 'APPROVED'}
         onClick={handleClick}
       />
       <ApplicantStatusButton

src/pages/admin/ApplicationDetail/components/ApplicantProfileSection/index.tsx

@@ -2,14 +2,14 @@ import styled from '@emotion/styled';
 import { Text } from '@/shared/components/Text';
 import { ApplicantStarRating } from './ApplicantStarRating';
 import { ApplicantStatusToggle } from './ApplicantStatusToggle';
-import type { ApplicantStatus } from '@/pages/admin/Dashboard/types/dashboard';
+import type { ApplicationStatus } from '@/pages/admin/Dashboard/types/dashboard';
 
 type Props = {
   name?: string;
   department?: string;
-  status?: ApplicantStatus;
+  status?: ApplicationStatus;
   rating?: number;
-  updateStatus: (status: ApplicantStatus) => void;
+  updateStatus: (status: ApplicationStatus) => void;
 };
 
 export const ApplicantProfileSection = ({

src/pages/admin/ApplicationDetail/types/detailApplication.ts

@@ -1,8 +1,8 @@
-import type { ApplicantStatus } from '@/pages/admin/Dashboard/types/dashboard';
+import type { ApplicationStatus } from '@/pages/admin/Dashboard/types/dashboard';
 
 export type DetailApplication = {
   applicationId: number;
-  status: ApplicantStatus;
+  status: ApplicationStatus;
   rating: number;
   applicantInfo: {
     applicantId: number;

src/pages/admin/Dashboard/api/dashboard.ts

@@ -0,0 +1,11 @@
+import type { DashboardSummary } from '@/pages/admin/Dashboard/types/dashboard';
+
+export const fetchDashboardSummary = async (clubId: number): Promise<DashboardSummary> => {
+  const response = await fetch(`/api/clubs/${clubId}/dashboard`);
+
+  if (!response.ok) {
+    throw new Error('대시보드 요약 정보를 불러오는 데 실패했습니다.');
+  }
+
+  return response.json();
+};

src/pages/admin/Dashboard/components/ApplicantListSection/ApplicantList.tsx

@@ -31,23 +31,33 @@ export const ApplicantList = ({ filterOption }: Props) => {
         ))}
       </ApplicantInfoCategoryList>
       <ApplicantInfoDataList>
-        {applicants.map((applicant) => (
-          <ApplicantListItem
-            key={applicant.id}
-            id={applicant.id}
-            name={applicant.name}
-            studentId={applicant.studentId}
-            department={applicant.department}
-            phoneNumber={applicant.phoneNumber}
-            email={applicant.email}
-            status={applicant.status}
-            onClick={handleItemClick}
-          />
-        ))}
+        {applicants.length > 0 ? (
+          applicants.map((applicant) => (
+            <ApplicantListItem
+              key={applicant.id}
+              id={applicant.id}
+              name={applicant.name}
+              studentId={applicant.studentId}
+              department={applicant.department}
+              phoneNumber={applicant.phoneNumber}
+              email={applicant.email}
+              status={applicant.status}
+              onClick={handleItemClick}
+            />
+          ))
+        ) : (
+          <EmptyMessage>
+            {filterOption === 'ALL'
+              ? '아직 지원자가 없습니다.'
+              : `${filterOption === 'PENDING' ? '심사중' : filterOption === 'APPROVED' ? '합격' : '불합격'} 지원자가 없습니다.`}
+          </EmptyMessage>
+        )}
       </ApplicantInfoDataList>
-      <ButtonWrapper>
-        <Button width={'15rem'}>결과 전송하기</Button>
-      </ButtonWrapper>
+      {applicants.length > 0 && (
+        <ButtonWrapper>
+          <Button width={'15rem'}>결과 전송하기</Button>
+        </ButtonWrapper>
+      )}
     </Container>
   );
 };
@@ -82,6 +92,13 @@ const ButtonWrapper = styled.div({
   width: '100%',
 });
 
+const EmptyMessage = styled.div(({ theme }) => ({
+  padding: '4rem',
+  textAlign: 'center',
+  color: theme.colors.gray500,
+  fontSize: '1.4rem',
+}));
+
 type ApplicateInfoCategory = '이름' | '학번' | '학과' | '전화번호' | '이메일' | '결과';
 const INFO_CATEGORY: ApplicateInfoCategory[] = [
   '이름',

src/pages/admin/Dashboard/components/ApplicantListSection/ApplicantListItem.tsx

@@ -5,6 +5,12 @@ type Props = ApplicantData & {
   onClick: (id: number) => void;
 };
 
+const STATUS_LABEL: Record<ApplicantData['status'], string> = {
+  PENDING: '미정',
+  REJECTED: '불합격',
+  APPROVED: '합격',
+};
+
 export const ApplicantListItem = ({
   id,
   name,
@@ -22,7 +28,7 @@ export const ApplicantListItem = ({
       <InfoText>{department || '-'}</InfoText>
       <InfoText>{phoneNumber || '-'}</InfoText>
       <InfoText>{email || '-'}</InfoText>
-      <StatusBadge status={status}>{status || '-'}</StatusBadge>
+      <StatusBadge status={status}>{STATUS_LABEL[status] || '-'}</StatusBadge>
     </ItemWrapper>
   );
 };
@@ -47,15 +53,15 @@ const InfoText = styled.p(({ theme }) => ({
 
 const StatusBadge = styled.p<Pick<ApplicantData, 'status'>>(({ theme, status }) => {
   const styles = {
-    합격: {
+    APPROVED: {
       backgroundColor: theme.colors.primary100,
       color: theme.colors.primary800,
     },
-    불합격: {
+    REJECTED: {
       backgroundColor: theme.colors.red100,
       color: theme.colors.red600,
     },
-    미정: {
+    PENDING: {
       backgroundColor: theme.colors.gray100,
       color: theme.colors.gray600,
     },

src/pages/admin/Dashboard/components/ApplicantListSection/ApplicationFilter.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useApplicants } from '@/pages/admin/Dashboard/hooks/useApplicants';
 import { ApplicantFilterButton } from './ApplicationFilterButton';
 import type { ApplicationFilterOption } from '@/pages/admin/Dashboard/types/dashboard';
 
@@ -8,29 +9,31 @@ export type Props = {
 };
 
 export const ApplicationStatusFilter = ({ option, onOptionChange }: Props) => {
+  const { counts } = useApplicants(1);
+
   return (
     <Wrapper>
       <ApplicantFilterButton
         value={'ALL'}
-        label={'전체'}
+        label={`전체 (${counts.ALL})`}
         selected={option === 'ALL'}
         onClick={onOptionChange}
       />
       <ApplicantFilterButton
-        value={'ACCEPTED'}
-        label={'합격'}
-        selected={option === 'ACCEPTED'}
+        value={'APPROVED'}
+        label={`합격 (${counts.APPROVED})`}
+        selected={option === 'APPROVED'}
         onClick={onOptionChange}
       />
       <ApplicantFilterButton
         value={'REJECTED'}
-        label={'불합격'}
+        label={`불합격 (${counts.REJECTED})`}
         selected={option === 'REJECTED'}
         onClick={onOptionChange}
       />
       <ApplicantFilterButton
         value={'PENDING'}
-        label={'심사중'}
+        label={`심사중 (${counts.PENDING})`}
         selected={option === 'PENDING'}
         onClick={onOptionChange}
       />

src/pages/admin/Dashboard/components/DashboardSummarySection/SummaryCard.tsx

@@ -1,15 +1,18 @@
 import styled from '@emotion/styled';
 import type { DashboardCard } from '@/pages/admin/Dashboard/types/dashboard';
 
-type Props = Omit<DashboardCard, 'id'>;
+type Props = Omit<DashboardCard, 'id'> & {
+  isEmpty?: boolean;
+};
 
-export const SummaryCard = ({ label, value, image }: Props) => {
+export const SummaryCard = ({ label, value, image, isEmpty = false }: Props) => {
   return (
     <Wrapper>
-      <IconWrapper>{image}</IconWrapper>
+      <IconWrapper isEmpty={isEmpty}>{image}</IconWrapper>
       <TextWrapper>
         <Label>{label}</Label>
-        <Value>{value}</Value>
+        <Value isEmpty={isEmpty}>{value}</Value>
+        {isEmpty && <EmptyText>예정된 모집이 없습니다</EmptyText>}
       </TextWrapper>
     </Wrapper>
   );
@@ -26,8 +29,9 @@ const Wrapper = styled.div(({ theme }) => ({
   borderRadius: theme.radius.lg,
 }));
 
-const IconWrapper = styled.div(({ theme }) => ({
-  color: theme.colors.gray900,
+const IconWrapper = styled.div<{ isEmpty?: boolean }>(({ theme, isEmpty }) => ({
+  color: isEmpty ? theme.colors.gray400 : theme.colors.gray900,
+  transition: 'color 0.2s',
 }));
 
 const TextWrapper = styled.div({
@@ -41,8 +45,15 @@ const Label = styled.p(({ theme }) => ({
   color: theme.colors.gray900,
 }));
 
-const Value = styled.p(({ theme }) => ({
-  fontSize: '2.2rem',
+const Value = styled.p<{ isEmpty?: boolean }>(({ theme, isEmpty }) => ({
+  fontSize: '2rem',
   fontWeight: theme.font.weight.bold,
-  color: theme.colors.gray900,
+  color: isEmpty ? theme.colors.gray400 : theme.colors.gray900,
+  transition: 'color 0.2s',
+}));
+
+const EmptyText = styled.span(({ theme }) => ({
+  fontSize: '1.1rem',
+  color: theme.colors.gray500,
+  marginTop: '-0.3rem',
 }));