✨feat: 지원 상태 상세 조회 페이지 퍼블리싱하기 #41

src/components/ApplicationDetail/ApplicationDetailCard.tsx

@@ -0,0 +1,32 @@
+import Tag from '@/components/Common/Tag';
+
+const ApplicationDetailCard = () => {
+  return (
+    <article className="w-full border-[0.031rem] border-[#1E19263D] rounded-[1.125rem]">
+      <div className="flex flex-col gap-[1.25rem] w-full px-[1.5rem] pt-[1.5rem] pb-[1rem]">
+        <div className="flex gap-[0.75rem]">
+          <div className='w-[2.5rem] h-[2.5rem] rounded-[0.5rem] bg-cover bg-[url("/src/assets/images/JobIconExample.jpeg")]'></div>
+          <div>
+            <h3 className="pb-[0.25rem] head-3 text-[#1E1926]">공고 제목</h3>
+            <p className="body-3 text-[#464646]">주소</p>
+          </div>
+        </div>
+        <div className="flex justify-between items-end pt-[0.25rem]">
+          <Tag
+            value={`10000 KRW`}
+            padding="0.375rem 0.75rem"
+            isRounded={true}
+            hasCheckIcon={false}
+            backgroundColor="white"
+            color="#1E1926"
+            borderColor="#1E1926"
+            fontStyle="caption-1"
+          />
+          <p className="body-3 text-[#656565]">3 Days After</p>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default ApplicationDetailCard;

src/components/ApplicationDetail/ApplicationDetailInfo.tsx

@@ -0,0 +1,29 @@
+const ApplicationDetailInfo = () => {
+  return (
+    <section className="w-full flex gap-[0.25rem]">
+      <div className="flex-1 flex flex-col gap-[0.25rem]">
+        <div className="px-[0.75rem] py-[0.5rem] bg-[#F4F4F9] rounded-[0.5rem] text-center">
+          <h5 className="pb-[0.25rem] caption-1-sb text-black">Hourly wage</h5>
+          <p className="caption-1 text-[#656565]">10,000 KRW</p>
+        </div>
+        <div className="px-[0.75rem] py-[0.5rem] bg-[#F4F4F9] rounded-[0.5rem] text-center">
+          <h5 className="pb-[0.25rem] caption-1-sb text-black">
+            Working Period
+          </h5>
+          <p className="caption-1 text-[#656565]">6 months - 1 year</p>
+        </div>
+      </div>
+      <div className="flex-1 flex flex-col justify-center items-center px-[0.75rem] py-[0.5rem] bg-[#F4F4F9] rounded-[0.5rem]">
+        <h5 className="pb-[0.5rem] caption-1-sb text-black">
+          Working days/Hours
+        </h5>
+        <p className="caption-1 text-[#656565]">Mon 9:00-17:00</p>
+        <p className="caption-1 text-[#656565]">Mon 9:00-17:00</p>
+        <p className="caption-1 text-[#656565]">Mon 9:00-17:00</p>
+        <p className="caption-1 text-[#656565]">Mon 9:00-17:00</p>
+      </div>
+    </section>
+  );
+};
+
+export default ApplicationDetailInfo;

src/components/ApplicationDetail/ApplicationDetailSteps.tsx

@@ -0,0 +1,117 @@
+import CheckStepIcon from '@/assets/icons/ApplicationDetail/CheckStepIcon.svg?react';
+import CurrentStepIcon from '@/assets/icons/ApplicationDetail/CurrentStepIcon.svg?react';
+import UncheckStepIcon from '@/assets/icons/ApplicationDetail/UncheckStepIcon.svg?react';
+
+const ApplicationDetailSteps = () => {
+  const step = 3; // 1 ~6
+
+  const stepIconStyler = (currentStep: number) => {
+    if (step > currentStep) {
+      return <CheckStepIcon />;
+    } else if (step === currentStep) {
+      return <CurrentStepIcon />;
+    } else {
+      return <UncheckStepIcon />;
+    }
+  };
+
+  return (
+    <section>
+      <h3 className="pb-[1.5rem] head-3 text-black">Application Steps</h3>
+      <div className="flex gap-[1.125rem]">
+        <div className="flex flex-col items-center">
+          {stepIconStyler(1)}
+          <div
+            className={`w-[0.125rem] h-[3.5rem] ${step > 1 ? 'bg-[#1E1926]' : 'bg-[#F2F2F2]'}`}
+          ></div>
+        </div>
+        <div>
+          <h5 className={`${step > 1 ? 'head-3' : 'body-1'} text-[#464646]`}>
+            Resume Verification
+          </h5>
+          <p className="caption-2 text-[#656565]">
+            The employer is currently reviewing your resume.
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-[1.125rem]">
+        <div className="flex flex-col items-center">
+          {stepIconStyler(2)}
+          <div
+            className={`w-[0.125rem] h-[3.5rem] ${step > 2 ? 'bg-[#1E1926]' : 'bg-[#F2F2F2]'}`}
+          ></div>
+        </div>
+        <div>
+          <h5 className={`${step > 2 ? 'head-3' : 'body-1'} text-[#464646]`}>
+            Interview Preparation
+          </h5>
+          <p className="caption-2 text-[#656565]">
+            Please check the employment contract and work conditions.
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-[1.125rem]">
+        <div className="flex flex-col items-center">
+          {stepIconStyler(3)}
+          <div
+            className={`w-[0.125rem] h-[3.5rem] ${step > 3 ? 'bg-[#1E1926]' : 'bg-[#F2F2F2]'}`}
+          ></div>
+        </div>
+        <div>
+          <h5 className={`${step > 3 ? 'head-3' : 'body-1'} text-[#464646]`}>
+            Document Preparation
+          </h5>
+          <p className="caption-2 text-[#656565]">
+            Please prepare the documents required for a part-time work permit.
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-[1.125rem]">
+        <div className="flex flex-col items-center">
+          {stepIconStyler(4)}
+          <div
+            className={`w-[0.125rem] h-[3.5rem] ${step > 4 ? 'bg-[#1E1926]' : 'bg-[#F2F2F2]'}`}
+          ></div>
+        </div>
+        <div>
+          <h5 className={`${step > 4 ? 'head-3' : 'body-1'} text-[#464646]`}>
+            Document Review by the International Student Coordinator
+          </h5>
+          <p className="caption-2 text-[#656565]">
+            Get the documents reviewed by the international student coordinator
+            at your school.
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-[1.125rem]">
+        <div className="flex flex-col items-center">
+          {stepIconStyler(5)}
+          <div
+            className={`w-[0.125rem] h-[3.5rem] ${step > 5 ? 'bg-[#1E1926]' : 'bg-[#F2F2F2]'}`}
+          ></div>
+        </div>
+        <div>
+          <h5 className={`${step > 5 ? 'head-3' : 'body-1'} text-[#464646]`}>
+            HiKorea e-Government Applica
+          </h5>
+          <p className="caption-2 text-[#656565]">
+            Apply for a part-time work permit through HiKorea.
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-[1.125rem] pb-[2.75rem]">
+        {stepIconStyler(6)}
+        <div>
+          <h5 className={`${step > 6 ? 'head-3' : 'body-1'} text-[#464646]`}>
+            Result Registration
+          </h5>
+          <p className="caption-2 text-[#656565]">
+            Please register the results.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ApplicationDetailSteps;

src/pages/ApplicationDetail/ApplicationDetailPage.tsx

@@ -0,0 +1,27 @@
+import ApplicationDetailCard from '@/components/ApplicationDetail/ApplicationDetailCard';
+import ApplicationDetailInfo from '@/components/ApplicationDetail/ApplicationDetailInfo';
+import ApplicationDetailSteps from '@/components/ApplicationDetail/ApplicationDetailSteps';
+import BaseHeader from '@/components/Common/Header/BaseHeader';
+import { useNavigate } from 'react-router-dom';
+
+// TODO: enum에 따라서 몇번째 step인지 숫자로 반환하도록 하기! 그에 따른 step과 하단 버튼 구현하기
+const ApplicationDetailPage = () => {
+  const navigate = useNavigate();
+  return (
+    <>
+      <BaseHeader
+        hasBackButton={true}
+        onClickBackButton={() => navigate('/application')}
+        hasMenuButton={false}
+        title="Applicants"
+      />
+      <div className="w-full flex flex-col gap-[2.25rem] p-[1.5rem]">
+        <ApplicationDetailCard />
+        <ApplicationDetailInfo />
+        <ApplicationDetailSteps />
+      </div>
+    </>
+  );
+};
+
+export default ApplicationDetailPage;

src/router.tsx

@@ -14,6 +14,7 @@ import PostDetailPage from '@/pages/PostDetail/PostDetailPage';
 import PostApplyPage from '@/pages/PostApply/PostApplyPage';
 import ScrollToTop from '@/components/Common/ScrollToTop';
 import ApplicationPage from '@/pages/Application/ApplicationPage';
+import ApplicationDetailPage from '@/pages/ApplicationDetail/ApplicationDetailPage';
 
 const Router = () => {
   return (
@@ -37,6 +38,7 @@ const Router = () => {
         <Route path="/post/:id" element={<PostDetailPage />} />
         <Route path="/post/apply/:id" element={<PostApplyPage />} />
         <Route path="/application" element={<ApplicationPage />} />
+        <Route path="/application/:id" element={<ApplicationDetailPage />} />
       </Routes>
     </BrowserRouter>
   );