Skip to content

Commit

Permalink
♻️ refactor: 서류 지원 step bar 레이아웃 컴포넌트 분리하기 #41
Browse files Browse the repository at this point in the history
  • Loading branch information
@naarang
naarang committed Oct 25, 2024
1 parent 0a9c36e commit 10bccc3
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 93 deletions.
42 changes: 42 additions & 0 deletions src/components/ApplicationDetail/ApplicationDetailStepBarLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
type ApplicationDetailStepBarLayoutProps = {
stepIcon: JSX.Element;
step: number; // 현재 진행 step
currentStep: number; // 레이아웃이 나타내는 step 번호
title: string;
explain: string;
isLastStep?: boolean; // 마지막 stepBar인지
};

const ApplicationDetailStepBarLayout = ({
stepIcon,
step,
currentStep,
title,
explain,
isLastStep = false,
}: ApplicationDetailStepBarLayoutProps) => {
return (
<div className={`flex gap-[1.125rem] ${isLastStep && 'pb-[2.75rem]'}`}>
{isLastStep ? (
<>{stepIcon}</>
) : (
<div className="flex flex-col items-center">
{stepIcon}
<div
className={`w-[0.125rem] h-[3.5rem] ${step > currentStep ? 'bg-[#1E1926]' : 'bg-[#F2F2F2]'}`}
></div>
</div>
)}
<div>
<h5
className={`${step > currentStep ? 'head-3' : 'body-1'} text-[#464646]`}
>
{title}
</h5>
<p className="caption-2 text-[#656565]">{explain}</p>
</div>
</div>
);
};

export default ApplicationDetailStepBarLayout;
137 changes: 45 additions & 92 deletions src/components/ApplicationDetail/ApplicationDetailSteps.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
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';
import ApplicationDetailStepBarLayout from '@/components/ApplicationDetail/ApplicationDetailStepBarLayout';

type ApplicationDetailStepsProps = {
step: number;
Expand All @@ -20,98 +21,50 @@ const ApplicationDetailSteps = ({ step }: ApplicationDetailStepsProps) => {
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>
<ApplicationDetailStepBarLayout
stepIcon={stepIconStyler(1)}
step={step}
currentStep={1}
title="Resume Verification"
explain="The employer is currently reviewing your resume."
/>
<ApplicationDetailStepBarLayout
stepIcon={stepIconStyler(2)}
step={step}
currentStep={2}
title="Interview Preparation"
explain="Please check the employment contract and work conditions."
/>
<ApplicationDetailStepBarLayout
stepIcon={stepIconStyler(3)}
step={step}
currentStep={3}
title="Document Preparation"
explain="Please prepare the documents required for a part-time work permit."
/>
<ApplicationDetailStepBarLayout
stepIcon={stepIconStyler(4)}
step={step}
currentStep={4}
title="Document Review by the International Student Coordinator"
explain="Get the documents reviewed by the international student coordinator
at your school."
/>
<ApplicationDetailStepBarLayout
stepIcon={stepIconStyler(5)}
step={step}
currentStep={5}
title="HiKorea e-Government Applica"
explain="Apply for a part-time work permit through HiKorea."
/>
<ApplicationDetailStepBarLayout
stepIcon={stepIconStyler(6)}
step={step}
currentStep={6}
title="Result Registration"
explain="Please register the results."
isLastStep={true}
/>
</section>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ApplicationDetail/ApplicationDetailPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const APPICATION_DETAIL_DATA: ApplicationDetailItemType = {
},
],
},
step: 'PENDING',
step: 'DOCUMENT_UNDER_REVIEW',
};

// TODO: enum에 따라서 몇번째 step인지 숫자로 반환하도록 하기! 그에 따른 step과 하단 버튼 구현하기
Expand Down

0 comments on commit 10bccc3

Please sign in to comment.