✨feat: 공고에 대한 지원자 목록 페이지 상단 공고 요약 파트 구현하기 #50

Team-inglo · Oct 26, 2024 · 886722c · 886722c
1 parent 7dc99d1
commit 886722c
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 5 deletions.
diff --git a/src/components/Common/Header/BaseHeader.tsx b/src/components/Common/Header/BaseHeader.tsx
@@ -17,7 +17,7 @@ const BaseHeader = ({
   title,
 }: HeaderProps) => {
   return (
-    <section className="w-full h-[3.5rem] px-[0.75rem] py-[0.5rem] flex justify-between items-center bg-white">
+    <section className="w-full h-[3.5rem] px-[0.75rem] py-[0.5rem] flex justify-between items-center bg-white opacity-70">
       {hasBackButton ? (
         <button
           className="p-[0.5rem] rounded-[0.75rem] border border-solid border-[#ECECEC]"

diff --git a/src/components/Employer/ApplicantList/EmployerApplicantListTitle.tsx b/src/components/Employer/ApplicantList/EmployerApplicantListTitle.tsx
@@ -0,0 +1,115 @@
+import Tag from '@/components/Common/Tag';
+import LocationIcon from '@/assets/icons/LocationIcon.svg?react';
+import ClockIcon from '@/assets/icons/ClockIcon.svg?react';
+import MoneyIcon from '@/assets/icons/MoneyIcon.svg?react';
+import TopRightArrowIcons from '@/assets/icons/Home/TopRightArrowIcon.svg?react';
+import { PostSummaryItemType } from '@/types/post/postSummaryItem';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+// 더미데이터 4.7로 불러오기
+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,
+  },
+};
+
+const EmployerApplicantListTitle = () => {
+  const navigate = useNavigate();
+  const { id } = useParams();
+
+  const [postData, setPostData] = useState<PostSummaryItemType>();
+
+  useEffect(() => {
+    setPostData(POST_SUMMARY_ITEM);
+  }, []);
+
+  if (!postData) return <></>;
+
+  return (
+    <section className="flex flex-col items-center gap-[0.25rem] w-full pt-[0.5rem]">
+      <div className='w-[5.125rem] h-[5.125rem] rounded-full bg-cover bg-center bg-[url("/src/assets/images/JobIconExample.jpeg")]'></div>
+      <div className="flex flex-col gap-[0.5rem] text-center">
+        <p className="button-2 text-[#656565]">{postData.company_name}</p>
+        <h2 className="text-[#33384B] font-bold text-lg">{postData.title}</h2>
+      </div>
+      <div className="flex gap-[0.25rem] my-[0.5rem]">
+        <Tag
+          value={postData.tags.is_recruiting ? 'Opening' : 'Closed'}
+          padding="0.375rem 0.75rem"
+          isRounded={true}
+          hasCheckIcon={false}
+          backgroundColor="#1E1926"
+          color="#F4F4F9"
+          fontStyle="caption-1"
+        />
+        <Tag
+          value={postData.tags.job_category.replace(/_/g, ' ').toLowerCase()}
+          padding="0.375rem 0.75rem"
+          isRounded={true}
+          hasCheckIcon={false}
+          backgroundColor="#1E1926"
+          color="#F4F4F9"
+          fontStyle="caption-1"
+        />
+        <Tag
+          value={postData.tags.visa.replace(/_/g, '-')}
+          padding="0.375rem 0.75rem"
+          isRounded={true}
+          hasCheckIcon={false}
+          backgroundColor="#1E1926"
+          color="#F4F4F9"
+          fontStyle="caption-1"
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-[0.5rem] py-[0.375rem] px-[1.5rem]">
+        <div className="flex justify-end gap-[0.5rem] px-[0.5rem]">
+          <LocationIcon className="min-w-[0.5rem]" />
+          <p className="text-[#464646] caption-1">
+            {postData.summaries.address}
+          </p>
+        </div>
+        <div className="flex gap-[0.5rem] px-[0.5rem]">
+          <ClockIcon className="min-w-[0.5rem]" />
+          <p className="text-[#464646] caption-1">
+            {postData.summaries.work_days_per_week} days a week
+          </p>
+        </div>
+        <div className="flex justify-end gap-[0.5rem] px-[0.5rem]">
+          <MoneyIcon className="min-w-[0.5rem]" />
+          <p className="text-[#464646] caption-1">
+            ${postData.summaries.houlry_rate}
+          </p>
+        </div>
+        <div className="flex gap-[0.5rem] px-[0.5rem]">
+          <ClockIcon className="min-w-[0.5rem]" />
+          <p className="text-[#464646] caption-1">
+            {postData.summaries.work_period.replace(/_/g, ' ').toLowerCase()}
+          </p>
+        </div>
+      </div>
+      <div className="w-full px-[1.5rem] py-[0.5rem] flex justify-end items-center gap-[0.625rem] bg-[#FFFFFF3D]">
+        <p className="caption-1 text-black">See my post</p>
+        <button
+          className="px-[0.625rem] py-[0.125rem] bg-[#1B1B1B] rounded-[1.313rem]"
+          onClick={() => navigate(`/employer/post/${id}`)}
+        >
+          <TopRightArrowIcons />
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default EmployerApplicantListTitle;
diff --git a/src/pages/Employer/ApplicantList/EmployerApplicantListPage.tsx b/src/pages/Employer/ApplicantList/EmployerApplicantListPage.tsx
@@ -0,0 +1,23 @@
+import BaseHeader from '@/components/Common/Header/BaseHeader';
+import EmployerApplicantListTitle from '@/components/Employer/ApplicantList/EmployerApplicantListTitle';
+import { useNavigate } from 'react-router-dom';
+
+const EmployerApplicantListPage = () => {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <div className="w-full bg-[#FEF387] rounded-b-[1.5rem]">
+        <BaseHeader
+          hasBackButton={true}
+          onClickBackButton={() => navigate('/employer/post')}
+          hasMenuButton={true}
+          title="지원자 조회"
+        />
+        <EmployerApplicantListTitle />
+      </div>
+    </>
+  );
+};
+
+export default EmployerApplicantListPage;
diff --git a/src/router.tsx b/src/router.tsx
@@ -21,6 +21,7 @@ import ApplicationDetailPage from '@/pages/ApplicationDetail/ApplicationDetailPa
 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();
@@ -69,6 +70,10 @@ const Router = () => {
             path="/employer/post/:id"
             element={<EmployerPostDetailPage />}
           />
+          <Route
+            path="/employer/post/:id/applicant"
+            element={<EmployerApplicantListPage />}
+          />
           <Route path="/write-documents" element={<WriteDocumentsPage />} />
 
           <Route path="/application" element={<ApplicationPage />} />

diff --git a/src/types/post/postSummaryItem.ts 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
@@ -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;