onSelect(option)}
>
{option}
diff --git a/src/components/Employer/ApplicantList/EmployerApplicantCard.tsx b/src/components/Employer/ApplicantList/EmployerApplicantCard.tsx
new file mode 100644
index 00000000..ac5c4fcd
--- /dev/null
+++ b/src/components/Employer/ApplicantList/EmployerApplicantCard.tsx
@@ -0,0 +1,108 @@
+import { APPLICATION_STEP } from '@/constants/application';
+import {
+ ApplicantItemType,
+ ApplicationStepType,
+} from '@/types/application/applicationItem';
+import ClockIcon from '@/assets/icons/ClockIcon.svg?react';
+import MoneyIcon from '@/assets/icons/MoneyIcon.svg?react';
+import RightArrowIcon from '@/assets/icons/RightArrowIcon.svg?react';
+import Tag from '@/components/Common/Tag';
+import { useNavigate } from 'react-router-dom';
+
+const statusStyler = (status: ApplicationStepType) => {
+ switch (status) {
+ case APPLICATION_STEP.APPLICATION_SUCCESS:
+ return 'bg-[#C7C6F6]';
+ case APPLICATION_STEP.RESUME_REJECTED:
+ return 'bg-[#FFC6C0]';
+ case APPLICATION_STEP.APPLICATION_REJECTED:
+ return 'bg-[#FFC6C0]';
+ case APPLICATION_STEP.PENDING:
+ return 'bg-[#BDBDBD]';
+ default:
+ return 'bg-[#FEF387]';
+ }
+};
+
+type EmployerApplicantCardPropsType = {
+ applicantData: ApplicantItemType;
+};
+
+const EmployerApplicantCard = ({
+ applicantData,
+}: EmployerApplicantCardPropsType) => {
+ const navigate = useNavigate();
+ return (
+
+
+
+
+ {applicantData.step.replace(/_/g, ' ').toLowerCase()}
+
+
+
+
navigate(`/employer/application/${applicantData.id}`)}
+ />
+
+
+
+
+
+ {applicantData.name}
+
+
{applicantData.nationality}
+
+
+
+
+
+
+
{applicantData.gender}
+
+
+
+
+ {applicantData.school_name}
+
+
+
+
+
+ {applicantData.visa.replace(/_/g, '-')}
+
+
+
+
+
+
+
+ );
+};
+
+export default EmployerApplicantCard;
diff --git a/src/components/Employer/ApplicantList/EmployerApplicantList.tsx b/src/components/Employer/ApplicantList/EmployerApplicantList.tsx
new file mode 100644
index 00000000..0b9d0df8
--- /dev/null
+++ b/src/components/Employer/ApplicantList/EmployerApplicantList.tsx
@@ -0,0 +1,61 @@
+import SearchSortDropdown from '@/components/Common/SearchSortDropdown';
+import EmployerApplicationCard from '@/components/Employer/ApplicantList/EmployerApplicantCard';
+import {
+ APPLICANT_LIST_DATA,
+ KO_APPLICATION_STATUS_TYPE,
+} from '@/constants/application';
+import { KO_ASCENDING_SORT_TYPE } from '@/constants/sort';
+import { ApplicantItemType } from '@/types/application/applicationItem';
+import { KoApplicationStatusType } from '@/types/application/applicationStatus';
+import { KoAscendingSortType } from '@/types/common/sort';
+import { useEffect, useState } from 'react';
+
+type EmployerApplicationListPropsType = {
+ title: string;
+};
+
+const EmployerApplicationList = ({
+ title,
+}: EmployerApplicationListPropsType) => {
+ const [applicantList, setApplicantList] = useState
([]);
+ const [selectedSort, setSelectedSort] = useState(
+ KO_ASCENDING_SORT_TYPE.ASCENDING,
+ );
+ const [selectedStatus, setSelectedStatus] = useState(
+ KO_APPLICATION_STATUS_TYPE.INPROGRESS,
+ );
+
+ useEffect(() => {
+ // TODO: 4.6 호출하기
+ setApplicantList(APPLICANT_LIST_DATA);
+ }, [selectedSort, selectedStatus]);
+
+ return (
+
+
+
+ {title}의 지원자
+
+
+ setSelectedSort(sort as KoAscendingSortType)}
+ />
+
+ setSelectedStatus(sort as KoApplicationStatusType)
+ }
+ />
+
+
+
{postData.company_name}
+
{postData.title}
+
+
+
+
+
+
+
+
+
+ {postData.summaries.address}
+
+
+
+
+
+ {postData.summaries.work_days_per_week} days a week
+
+
+
+
+
+ ${postData.summaries.houlry_rate}
+
+
+
+
+
+ {postData.summaries.work_period.replace(/_/g, ' ').toLowerCase()}
+
+
+
+
See my post
+
+
+
+
+
+
+ {postData.title}
+
+
{postData.address_name}
+
+
+
+
+
+ {postData.duration_of_days} Days After
+
+
+
+
+
+
+
+ );
+};
+
+export default EmployerPostCard;
diff --git a/src/components/Employer/Post/EmployerPostCardList.tsx b/src/components/Employer/Post/EmployerPostCardList.tsx
new file mode 100644
index 00000000..69c3edc4
--- /dev/null
+++ b/src/components/Employer/Post/EmployerPostCardList.tsx
@@ -0,0 +1,23 @@
+import { EMPLOYER_POST_LIST } from '@/constants/post';
+import { KoAscendingSortType } from '@/types/common/sort';
+import EmployerPostCard from '@/components/Employer/Post/EmployerPostCard';
+import { useEffect } from 'react';
+
+type EmployerPostCardListProps = {
+ selectedSort: KoAscendingSortType;
+};
+
+const EmployerPostCardList = ({ selectedSort }: EmployerPostCardListProps) => {
+ useEffect(() => {
+ // 6.6 api 호출하기
+ }, [selectedSort]);
+ return (
+ <>
+ {EMPLOYER_POST_LIST.map((data) => (
+
+ ))}
+
+ );
+};
+
+export default EmployerPostCardList;
diff --git a/src/constants/application.ts b/src/constants/application.ts
index 05cd1dfa..c4867b78 100644
--- a/src/constants/application.ts
+++ b/src/constants/application.ts
@@ -1,3 +1,5 @@
+import { ApplicantItemType } from '@/types/application/applicationItem';
+
export const enum APPLICATION_STEP {
RESUME_UNDER_REVIEW = 'RESUME_UNDER_REVIEW',
WAITING_FOR_INTERVIEW = 'WAITING_FOR_INTERVIEW',
@@ -11,11 +13,6 @@ export const enum APPLICATION_STEP {
REGISTRATION_RESULTS = 'REGISTRATION_RESULTS',
}
-export const APPLICATION_SORT_TYPE = {
- ASCENDING: 'Ascending',
- DESCENDING: 'Descending',
-} as const;
-
export const APPLICATION_STATUS_TYPE = {
INPROGRESS: 'Inprogress',
APPLICATION_SUCCESSFUL: 'Applicatioin successful',
@@ -23,3 +20,70 @@ export const APPLICATION_STATUS_TYPE = {
RESUME_REJECTED: 'resume rejected',
PENDING: 'pending',
} as const;
+
+export const KO_APPLICATION_STATUS_TYPE = {
+ INPROGRESS: '진행중',
+ APPLICATION_SUCCESSFUL: '계약 성공',
+ APPLICATION_REJECTED: '시간제취업허가 실패',
+ RESUME_REJECTED: '이력서 거절',
+ PENDING: '대기',
+} as const;
+
+// 지원자 리스트 더미데이터
+export const APPLICANT_LIST_DATA: ApplicantItemType[] = [
+ {
+ id: 1001,
+ profile_img_url: 'https://example.com/images/applicant1.jpg',
+ name: 'John Doe',
+ nationality: 'USA',
+ gender: 'Male',
+ visa: 'D_2_1',
+ school_name: 'Seoul National University',
+ duration_of_days: 30,
+ step: 'RESUME_UNDER_REVIEW',
+ },
+ {
+ id: 1002,
+ profile_img_url: 'https://example.com/images/applicant2.jpg',
+ name: 'Jane Smith',
+ nationality: 'Canada',
+ gender: 'Female',
+ visa: 'D_2_3',
+ school_name: 'Korea University',
+ duration_of_days: 60,
+ step: 'WAITING_FOR_INTERVIEW',
+ },
+ {
+ id: 1003,
+ profile_img_url: 'https://example.com/images/applicant3.jpg',
+ name: 'Samuel Green',
+ nationality: 'UK',
+ gender: 'Male',
+ visa: 'F_2',
+ school_name: 'Yonsei University',
+ duration_of_days: 90,
+ step: 'APPLICATION_SUCCESS',
+ },
+ {
+ id: 1004,
+ profile_img_url: 'https://example.com/images/applicant4.jpg',
+ name: 'Emily White',
+ nationality: 'Australia',
+ gender: 'Female',
+ visa: 'D_4_1',
+ school_name: 'Sogang University',
+ duration_of_days: 120,
+ step: 'APPLICATION_IN_PROGRESS',
+ },
+ {
+ id: 1005,
+ profile_img_url: 'https://example.com/images/applicant5.jpg',
+ name: 'Michael Brown',
+ nationality: 'Germany',
+ gender: 'Male',
+ visa: 'D_2_2',
+ school_name: 'Hanyang University',
+ duration_of_days: 45,
+ step: 'PENDING',
+ },
+];
diff --git a/src/constants/post.ts b/src/constants/post.ts
new file mode 100644
index 00000000..f48b521b
--- /dev/null
+++ b/src/constants/post.ts
@@ -0,0 +1,48 @@
+import { EmployerPostItemType } from '@/types/post/employerPostItem';
+import { PostSummaryItemType } from '@/types/post/postSummaryItem';
+
+// 더미데이터
+export const EMPLOYER_POST_LIST: EmployerPostItemType[] = [
+ {
+ id: 1,
+ icon_img_url: 'https://example.com/image1.png',
+ title: 'Barista',
+ address_name: '123 Main St, City',
+ hourly_rate: 15,
+ duration_of_days: 30,
+ },
+ {
+ id: 2,
+ icon_img_url: 'https://example.com/image2.png',
+ title: 'Delivery Driver',
+ address_name: '456 Side St, City',
+ hourly_rate: 18,
+ duration_of_days: 15,
+ },
+ {
+ id: 3,
+ icon_img_url: 'https://example.com/image3.png',
+ title: 'Tutor',
+ address_name: '789 Park Ave, City',
+ hourly_rate: 25,
+ duration_of_days: 45,
+ },
+];
+
+// 4.7 더미데이터
+export const POST_SUMMARY_ITEM: PostSummaryItemType = {
+ icon_img_url: 'https://example.com/icon.png',
+ company_name: 'Global Translations Ltd.',
+ title: 'General Interpretation & Translation',
+ tags: {
+ is_recruiting: true,
+ visa: 'D_2_1',
+ job_category: 'GENERAL_INTERPRETATION_TRANSLATION',
+ },
+ summaries: {
+ address: '123 Translation Ave, Seoul',
+ houlry_rate: 15000,
+ work_period: 'ONE_MONTH_TO_THREE_MONTHS',
+ work_days_per_week: 5,
+ },
+};
diff --git a/src/constants/postDetail.ts b/src/constants/postDetail.ts
index 6ebe09fc..6ac9a565 100644
--- a/src/constants/postDetail.ts
+++ b/src/constants/postDetail.ts
@@ -52,7 +52,6 @@ export const POST_DETAIL_DATA: PostDetailItemType = {
workplace_information: {
main_address: '123 Main St, Seoul',
detailed_address: '5th Floor, Room 501',
- school_name: 'Seoul National University',
distance: 1.5,
latitude: 37.5665,
longitude: 126.978,
diff --git a/src/constants/sort.ts b/src/constants/sort.ts
new file mode 100644
index 00000000..4e45e7c1
--- /dev/null
+++ b/src/constants/sort.ts
@@ -0,0 +1,9 @@
+export const ASCENDING_SORT_TYPE = {
+ ASCENDING: 'Ascending',
+ DESCENDING: 'Descending',
+} as const;
+
+export const KO_ASCENDING_SORT_TYPE = {
+ ASCENDING: '오름차순',
+ DESCENDING: '내림차순',
+} as const;
diff --git a/src/hooks/api/usePost.ts b/src/hooks/api/usePost.ts
index 44c0f0f1..d0b10709 100644
--- a/src/hooks/api/usePost.ts
+++ b/src/hooks/api/usePost.ts
@@ -1,4 +1,11 @@
-import { deletePost, getPostDetail } from '@/api/post';
+import {
+ deletePost,
+ getApplicantList,
+ getEmployerPostList,
+ getPostDetail,
+ getPostSummary,
+} from '@/api/post';
+import { AscendingSortType } from '@/types/common/sort';
import { useMutation, useQuery } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
@@ -7,6 +14,26 @@ export const useGetPostDetail = (id: number) => {
return useQuery({ queryKey: ['post', id], queryFn: () => getPostDetail(id) });
};
+// 4.6 (고용주) 공고에 대한 지원자 리스트 조회 훅
+export const useGetApplicantList = (
+ id: number,
+ sorting: string,
+ status: string,
+) => {
+ return useQuery({
+ queryKey: ['post', id],
+ queryFn: () => getApplicantList(id, sorting, status),
+ });
+};
+
+// 4.7 (유학생/고용주) 공고 요약 정보 조회하기 훅
+export const useGetPostSummary = (id: number) => {
+ return useQuery({
+ queryKey: ['post', id],
+ queryFn: () => getPostSummary(id),
+ });
+};
+
// 4.13 (고용주) 공고 삭제하기 훅
export const useDeletePost = () => {
const navigate = useNavigate();
@@ -21,3 +48,11 @@ export const useDeletePost = () => {
},
});
};
+
+// 6.6 (고용주) 등록한 공고 리스트 조회하기 훅
+export const useGetEmployerPostList = (sorting: AscendingSortType) => {
+ return useQuery({
+ queryKey: ['post'],
+ queryFn: () => getEmployerPostList(sorting),
+ });
+};
diff --git a/src/pages/Application/ApplicationPage.tsx b/src/pages/Application/ApplicationPage.tsx
index 583b6ea2..611c6b78 100644
--- a/src/pages/Application/ApplicationPage.tsx
+++ b/src/pages/Application/ApplicationPage.tsx
@@ -1,19 +1,13 @@
import ApplicationCardList from '@/components/Application/ApplicationCardList';
import BaseHeader from '@/components/Common/Header/BaseHeader';
import SearchSortDropdown from '@/components/Common/SearchSortDropdown';
-import {
- APPLICATION_SORT_TYPE,
- APPLICATION_STATUS_TYPE,
-} from '@/constants/application';
+import { APPLICATION_STATUS_TYPE } from '@/constants/application';
+import { ASCENDING_SORT_TYPE } from '@/constants/sort';
import { AppicationItemType } from '@/types/application/applicationItem';
+import { ApplicationStatusType } from '@/types/application/applicationStatus';
+import { AscendingSortType } from '@/types/common/sort';
import { useState } from 'react';
-type SortType =
- (typeof APPLICATION_SORT_TYPE)[keyof typeof APPLICATION_SORT_TYPE];
-
-type StatusType =
- (typeof APPLICATION_STATUS_TYPE)[keyof typeof APPLICATION_STATUS_TYPE];
-
// 더미데이터
const APPLICATION_LIST_DATA: AppicationItemType[] = [
{
@@ -59,10 +53,10 @@ const APPLICATION_LIST_DATA: AppicationItemType[] = [
];
const ApplicationPage = () => {
- const [selectedSort, setSelectedSort] = useState(
- APPLICATION_SORT_TYPE.ASCENDING,
+ const [selectedSort, setSelectedSort] = useState(
+ ASCENDING_SORT_TYPE.ASCENDING,
);
- const [selectedStatus, setSelectedStatus] = useState(
+ const [selectedStatus, setSelectedStatus] = useState(
APPLICATION_STATUS_TYPE.INPROGRESS,
);
@@ -76,14 +70,16 @@ const ApplicationPage = () => {
setSelectedSort(sort as SortType)}
+ onSelect={(sort) => setSelectedSort(sort as AscendingSortType)}
/>
setSelectedStatus(sort as StatusType)}
+ onSelect={(sort) =>
+ setSelectedStatus(sort as ApplicationStatusType)
+ }
/>
diff --git a/src/pages/Employer/ApplicantList/EmployerApplicantListPage.tsx b/src/pages/Employer/ApplicantList/EmployerApplicantListPage.tsx
new file mode 100644
index 00000000..ee21dff0
--- /dev/null
+++ b/src/pages/Employer/ApplicantList/EmployerApplicantListPage.tsx
@@ -0,0 +1,37 @@
+import BaseHeader from '@/components/Common/Header/BaseHeader';
+import EmployerApplicantListTitle from '@/components/Employer/ApplicantList/EmployerApplicantListTitle';
+import EmployerApplicantList from '@/components/Employer/ApplicantList/EmployerApplicantList';
+import { useNavigate } from 'react-router-dom';
+import { PostSummaryItemType } from '@/types/post/postSummaryItem';
+import { useEffect, useState } from 'react';
+import { POST_SUMMARY_ITEM } from '@/constants/post';
+
+const EmployerApplicantListPage = () => {
+ const navigate = useNavigate();
+
+ const [postData, setPostData] = useState
();
+
+ useEffect(() => {
+ // TODO: 4.7로 조회하기
+ setPostData(POST_SUMMARY_ITEM);
+ }, []);
+
+ if (!postData) return <>;
+
+ return (
+ <>
+
+ navigate('/employer/post')}
+ hasMenuButton={false}
+ title="지원자 조회"
+ />
+
+
+
+
+ );
+};
+
+export default EmployerApplicantListPage;
diff --git a/src/pages/Employer/Post/EmployerPostPage.tsx b/src/pages/Employer/Post/EmployerPostPage.tsx
new file mode 100644
index 00000000..402a0e21
--- /dev/null
+++ b/src/pages/Employer/Post/EmployerPostPage.tsx
@@ -0,0 +1,36 @@
+import BaseHeader from '@/components/Common/Header/BaseHeader';
+import SearchSortDropdown from '@/components/Common/SearchSortDropdown';
+import EmployerPostCardList from '@/components/Employer/Post/EmployerPostCardList';
+import { KO_ASCENDING_SORT_TYPE } from '@/constants/sort';
+import { KoAscendingSortType } from '@/types/common/sort';
+import { useState } from 'react';
+
+const EmployerPostPage = () => {
+ const [selectedSort, setSelectedSort] = useState(
+ KO_ASCENDING_SORT_TYPE.ASCENDING,
+ );
+ return (
+ <>
+
+
+
+ 공고를 클릭해서 지원자를 확인해보세요 !
+
+
+ setSelectedSort(sort as KoAscendingSortType)}
+ />
+
+
+
+
+ );
+};
+
+export default EmployerPostPage;
diff --git a/src/router.tsx b/src/router.tsx
index 03b043b0..d90f2976 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -28,6 +28,8 @@ import PatchWorkExperiencePage from '@/pages/SetWorkExperience/PatchWorkExperien
import ApplicationDetailPage from '@/pages/ApplicationDetail/ApplicationDetailPage';
import ApplicationResultPage from '@/pages/ApplicationResult/ApplicationResultPage';
import EmployerPostDetailPage from '@/pages/Employer/PostDetail/EmployerPostDetailPage';
+import EmployerPostPage from '@/pages/Employer/Post/EmployerPostPage';
+import EmployerApplicantListPage from '@/pages/Employer/ApplicantList/EmployerApplicantListPage';
const Layout = () => {
const location = useLocation();
@@ -89,10 +91,15 @@ const Router = () => {
} />
} />
+ } />
}
/>
+ }
+ />
} />
} />
diff --git a/src/types/application/applicationItem.ts b/src/types/application/applicationItem.ts
index 44461340..9b76f536 100644
--- a/src/types/application/applicationItem.ts
+++ b/src/types/application/applicationItem.ts
@@ -1,5 +1,6 @@
import {
DayOfWeekType,
+ VisaType,
WorkPeriodType,
} from '@/types/postDetail/postDetailItem';
@@ -68,3 +69,16 @@ export type ApplicationCoordinaterItemType = {
coordinator_phone_number: string;
address: SchoolAddressType;
};
+
+// 공고에 대한 지원자 리스트
+export type ApplicantItemType = {
+ id: number;
+ profile_img_url: string;
+ name: string;
+ nationality: string;
+ gender: string;
+ visa: VisaType;
+ school_name: string;
+ duration_of_days: number;
+ step: ApplicationStepType;
+};
diff --git a/src/types/application/applicationStatus.ts b/src/types/application/applicationStatus.ts
new file mode 100644
index 00000000..ed97ef87
--- /dev/null
+++ b/src/types/application/applicationStatus.ts
@@ -0,0 +1,10 @@
+import {
+ APPLICATION_STATUS_TYPE,
+ KO_APPLICATION_STATUS_TYPE,
+} from '@/constants/application';
+
+export type ApplicationStatusType =
+ (typeof APPLICATION_STATUS_TYPE)[keyof typeof APPLICATION_STATUS_TYPE];
+
+export type KoApplicationStatusType =
+ (typeof KO_APPLICATION_STATUS_TYPE)[keyof typeof KO_APPLICATION_STATUS_TYPE];
diff --git a/src/types/common/sort.ts b/src/types/common/sort.ts
new file mode 100644
index 00000000..9ca203df
--- /dev/null
+++ b/src/types/common/sort.ts
@@ -0,0 +1,7 @@
+import { ASCENDING_SORT_TYPE, KO_ASCENDING_SORT_TYPE } from '@/constants/sort';
+
+export type AscendingSortType =
+ (typeof ASCENDING_SORT_TYPE)[keyof typeof ASCENDING_SORT_TYPE];
+
+export type KoAscendingSortType =
+ (typeof KO_ASCENDING_SORT_TYPE)[keyof typeof KO_ASCENDING_SORT_TYPE];
diff --git a/src/types/post/employerPostItem.ts b/src/types/post/employerPostItem.ts
new file mode 100644
index 00000000..eef66942
--- /dev/null
+++ b/src/types/post/employerPostItem.ts
@@ -0,0 +1,8 @@
+export type EmployerPostItemType = {
+ id: number;
+ icon_img_url: string;
+ title: string;
+ address_name: string;
+ hourly_rate: number;
+ duration_of_days: number;
+};
diff --git a/src/types/post/postSummaryItem.ts b/src/types/post/postSummaryItem.ts
new file mode 100644
index 00000000..51f9064e
--- /dev/null
+++ b/src/types/post/postSummaryItem.ts
@@ -0,0 +1,9 @@
+import { SummariesType, TagType } from '@/types/postDetail/postDetailItem';
+
+export type PostSummaryItemType = {
+ icon_img_url: string;
+ company_name: string;
+ title: string;
+ tags: TagType;
+ summaries: SummariesType;
+};
diff --git a/src/types/postDetail/postDetailItem.ts b/src/types/postDetail/postDetailItem.ts
index 26215604..8e68deb4 100644
--- a/src/types/postDetail/postDetailItem.ts
+++ b/src/types/postDetail/postDetailItem.ts
@@ -1,4 +1,4 @@
-type VisaType =
+export type VisaType =
| 'D_2_1'
| 'D_2_2'
| 'D_2_3'
@@ -10,7 +10,7 @@ type VisaType =
| 'D_4_7'
| 'F_2';
-type JobCategoryType =
+export type JobCategoryType =
| 'GENERAL_INTERPRETATION_TRANSLATION'
| 'FOOD_SERVICE_ASSISTANT'
| 'GENERAL_ADMINISTRATIVE_SUPPORT'
@@ -52,13 +52,13 @@ export type CompanyImageUrlType = {
img_url: string;
};
-type TagType = {
+export type TagType = {
is_recruiting: boolean;
visa: VisaType;
job_category: JobCategoryType;
};
-type SummariesType = {
+export type SummariesType = {
address: string;
houlry_rate: number;
work_period: WorkPeriodType;
@@ -77,7 +77,6 @@ type RecruitmentConditionsType = {
type WorkplaceInformationType = {
main_address: string;
detailed_address: string;
- school_name: string;
distance: number;
latitude: number;
longitude: number;