합/ 불합 페이지 구현 (issue #144)

src/api/applicant.api.ts

@@ -26,3 +26,10 @@ export const patchPassNonPassStatus = async (
   );
   return response.data;
 };
+
+export const getPassNonPassList = async (projectId: number) => {
+  const response = await httpClient.get(
+    `/project/${projectId}/applicant/summary`
+  );
+  return response.data;
+};

src/components/common/noContent/NoContent.tsx

@@ -2,13 +2,14 @@ import * as S from './NoContent.styled';
 import { DocumentTextIcon } from '@heroicons/react/24/outline';
 
 interface NoContentProps {
-  type: 'projects' | 'applicants';
+  type: 'projects' | 'applicants' | 'passNonPass';
 }
 
 export default function NoContent({ type }: NoContentProps) {
   const INPUT_CONTENT = {
     projects: '공고가',
     applicants: '지원자가',
+    passNonPass: '합/불합격자 리스트가',
   };
 
   return (

src/components/manageProjects/ProjectHeader.styled.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  width: 100%;
+`;
+
+export const RecruitmentEnd = styled.h3`
+  margin-left: 1.2rem;
+  font-size: 1rem;
+  font-weight: 400;
+  color: ${({ theme }) => theme.color.red};
+`;

src/components/manageProjects/ProjectHeader.tsx

@@ -0,0 +1,21 @@
+import * as S from './ProjectHeader.styled';
+import Title from '../common/title/Title';
+import { ProjectDetailExtended } from '../../models/projectDetail';
+import RecruitmentDate from './RecruitmentDate';
+interface ProjectHeaderProps {
+  projectData: ProjectDetailExtended;
+}
+
+function ProjectHeader({ projectData }: ProjectHeaderProps) {
+  return (
+    <>
+      <S.TitleWrapper>
+        {projectData && <Title size='semiLarge'>{projectData.title} </Title>}
+        {projectData?.isDone && <S.RecruitmentEnd>공고 마감</S.RecruitmentEnd>}
+      </S.TitleWrapper>
+      {projectData && <RecruitmentDate ProjectData={projectData} />}
+    </>
+  );
+}
+
+export default ProjectHeader;

src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const ItemWrapper = styled.li`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+  border: 1px solid ${({ theme }) => theme.color.grey};
+  border-radius: ${({ theme }) => theme.borderRadius.primary};
+  &:hover {
+    background-color: ${({ theme }) => theme.color.navy};
+    color: ${({ theme }) => theme.color.white};
+  }
+
+  svg {
+    color: #e69191;
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+`;
+
+export const NickName = styled.p`
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
+  font-weight: 400;
+`;
+
+export const DeleteButton = styled.button``;

src/components/manageProjects/passNonPassList/PassNonPassItem.tsx

@@ -0,0 +1,20 @@
+import { ApplicantInfo } from '../../../models/applicant';
+import * as S from './PassNonPassItem.styled';
+import { XCircleIcon } from '@heroicons/react/24/outline';
+
+interface PassNonPassItemProps {
+  userInfo: ApplicantInfo;
+}
+
+function PassNonPassItem({ userInfo }: PassNonPassItemProps) {
+  return (
+    <S.ItemWrapper>
+      <S.NickName>{userInfo.User.nickname}</S.NickName>
+      <S.DeleteButton>
+        <XCircleIcon />
+      </S.DeleteButton>
+    </S.ItemWrapper>
+  );
+}
+
+export default PassNonPassItem;

src/components/manageProjects/passNonPassList/PassNonPassList.styled.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.ul`
+  width: 100%;
+  height: 27rem;
+  min-width: 22rem;
+  border-radius: ${({ theme }) => theme.borderRadius.primary};
+  border: 1px solid ${({ theme }) => theme.color.border};
+  padding: 1.6rem 2rem;
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  overflow: hidden;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

src/components/manageProjects/passNonPassList/PassNonPassList.tsx

@@ -0,0 +1,19 @@
+import { ApplicantInfo } from '../../../models/applicant';
+import PassNonPassItem from './PassNonPassItem';
+import * as S from './PassNonPassList.styled';
+
+interface PassNonPassListProps {
+  passNonPassListData: ApplicantInfo[];
+}
+
+function PassNonPassList({ passNonPassListData }: PassNonPassListProps) {
+  return (
+    <S.Wrapper>
+      {passNonPassListData.map((data) => (
+        <PassNonPassItem key={data.userId} userInfo={data} />
+      ))}
+    </S.Wrapper>
+  );
+}
+
+export default PassNonPassList;

src/hooks/queries/keys.ts

@@ -5,6 +5,7 @@ export const managedProjectsKey = {
 export const applicantKey = {
   all: ['applicantList'],
   info: ['applicantInfo'],
+  passNonPass: ['passNonPassList'],
 };
 
 export const myInfoKey = {

src/hooks/usePassNonPassList.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { applicantKey } from './queries/keys';
+import { getPassNonPassList } from '../api/applicant.api';
+
+export const usePassNonPassList = (projectId: number) => {
+  const { data } = useQuery({
+    queryKey: applicantKey.passNonPass,
+    queryFn: () => getPassNonPassList(projectId),
+    staleTime: 1 * 60 * 1000,
+  });
+
+  return { passNonPassListData: data };
+};

src/hooks/usePassNonPass.ts → src/hooks/usePassNonPassMutation.ts

@@ -9,7 +9,7 @@ interface useMutationParams {
   userId: number;
 }
 
-export const usePassNonPass = (
+export const usePassNonPassMutation = (
   projectId: number,
   openModal: (message: string) => void
 ) => {

src/mock/applicant.ts

@@ -1,6 +1,7 @@
 import { http, HttpResponse } from 'msw';
 import mockApplicantsData from './mockApplicantsData.json';
 import mockApplicantData from './mockApplicantData.json';
+import mockPassNonPassListData from './mockPassNonPassListData.json';
 
 export const applicantList = http.get(
   `${import.meta.env.VITE_API_BASE_URL}/project/:projectId/applicant`,
@@ -20,6 +21,15 @@ export const applicantInfo = http.get(
   }
 );
 
+export const passNonPassList = http.get(
+  `${import.meta.env.VITE_API_BASE_URL}/project/:projectId/applicant/summary`,
+  () => {
+    return HttpResponse.json(mockPassNonPassListData, {
+      status: 200,
+    });
+  }
+);
+
 export const passNonPass = http.patch(
   `${
     import.meta.env.VITE_API_BASE_URL

src/mock/browser.ts

@@ -1,6 +1,11 @@
 import { setupWorker } from 'msw/browser';
 import { myProjectList } from './manageProjectList';
-import { applicantInfo, applicantList, passNonPass } from './applicant';
+import {
+  applicantInfo,
+  applicantList,
+  passNonPass,
+  passNonPassList,
+} from './applicant';
 import { projectDetail } from './projectDetail';
 
 export const handlers = [
@@ -9,6 +14,7 @@ export const handlers = [
   projectDetail,
   applicantInfo,
   passNonPass,
+  passNonPassList,
 ];
 
 export const worker = setupWorker(...handlers);