Refactor/#71 9주차 기능 개선 및 리팩토링 (#84)

* refactor: 컴포넌트 이름과 일치하도록 파일 이름 변경

* refactor: 고용주 마이페이지에 사인등록 버튼 추가 및 디자인 변경

* feat: 고용주 마이페이지의 사인 등록 버튼 클릭 시 사인 등록 페이지로 이동 기능 추가

* feat: 회사 목록 로딩 중 Spinner 추가 및 위치 조정

* feat: 공고글 목록 로딩 중 Spinner 추가

* refactor: ContractModal의 버튼들을 ModalButtons로 분리

* feat: 계약 팝업창 확인 버튼 클릭 시 근로계약서 페이지로 이동 기능 추가

src/apis/apiPath.ts

@@ -11,7 +11,7 @@ export const APIPath = {
   getMyRecruitments: `${BASE_URL}/recruitments/company/:companyId`,
   getMyApplicants: `${BASE_URL}/application/:recruitmentId`,
   getForeigner: `${BASE_URL}/visa/:userId`,
-  setVisa: `${BASE_URL}/visa`,
+  registerVisa: `${BASE_URL}/visa`,
   apply: '/api/application/',
   recruitmentsDetail: '/api/recruitments/:postId',
 };

src/apis/applicants/hooks/useRegisterVisaInfo.ts

@@ -6,7 +6,7 @@ import { useMutation } from '@tanstack/react-query';
 type VisaRequest = Pick<ForeignerData, 'foreignerIdNumber' | 'visaGenerateDate'>;
 
 const registerVisaInfo = async (req: VisaRequest) => {
-  const res = await clientInstance.put(APIPath.setVisa, req);
+  const res = await clientInstance.put(APIPath.registerVisa, req);
   return res.data;
 };
 

src/apis/applicants/mocks/foreignerMockHandler.ts

@@ -1,5 +1,5 @@
 import { APIPath } from '@/apis/apiPath';
-import { foreigner } from '@/features/applicants/ApplicantList/ContractModal/index.mock';
+import { foreigner } from '@/features/applicants/ApplicantList/ContractModal/ContractModal.mock';
 import { http, HttpResponse } from 'msw';
 
 export const foreignerMockHandler = [http.get(APIPath.getForeigner, () => HttpResponse.json(foreigner))];

src/apis/applicants/mocks/myApplicantsMockHandler.ts

@@ -1,5 +1,5 @@
 import { APIPath } from '@/apis/apiPath';
-import { applicantList } from '@/pages/applicants/index.mock';
+import { applicantList } from '@/pages/applicants/Applicants.mock';
 import { http, HttpResponse } from 'msw';
 
 export const myApplicantsMockHandler = [http.get(APIPath.getMyApplicants, () => HttpResponse.json(applicantList))];

src/apis/applicants/mocks/visaMockHandler.ts

@@ -2,7 +2,7 @@ import { APIPath } from '@/apis/apiPath';
 import { http, HttpResponse } from 'msw';
 
 export const visaMockHandler = [
-  http.put(APIPath.setVisa, async ({ request }) => {
+  http.put(APIPath.registerVisa, async ({ request }) => {
     const req = await request.json();
     return HttpResponse.json(req, { status: 200 });
   }),

src/apis/companies/mocks/myCompaniesMockHandler.ts

@@ -1,5 +1,5 @@
 import { APIPath } from '@/apis/apiPath';
-import { companyList } from '@/pages/myAccount/employer/index.mock';
+import { companyList } from '@/pages/myPage/employer/EmployerMyPage.mock';
 import { http, HttpResponse } from 'msw';
 
 export const myCompaniesMockHandler = [http.get(APIPath.getMyCompanies, () => HttpResponse.json(companyList))];

src/apis/recruitments/mocks/myRecruitmentsMockHandler.ts

@@ -1,5 +1,5 @@
 import { APIPath } from '@/apis/apiPath';
-import { recruitmentList } from '@/pages/myCompany/index.mock';
+import { recruitmentList } from '@/pages/myCompany/MyCompany.mock';
 import { http, HttpResponse } from 'msw';
 
 export const myRecruitmentsMockHandler = [

src/features/applicants/ApplicantList/index.tsx → src/features/applicants/ApplicantList/ApplicantList.tsx

@@ -1,5 +1,5 @@
 import { Flex, Typo } from '@/components/common';
-import ApplicantsTable from './ApplicantsTable';
+import ApplicantsTable from './ApplicantsTable/ApplicantsTable';
 import { ApplicantData } from '@/types';
 
 type Props = {

src/features/applicants/ApplicantList/ApplicantsTable/index.tsx → src/features/applicants/ApplicantList/ApplicantsTable/ApplicantsTable.tsx

@@ -1,8 +1,8 @@
 import { Button, Flex, List, Table, Td, Th } from '@/components/common';
 import { useState } from 'react';
-import ContractModal from '../ContractModal';
+import ContractModal from '../ContractModal/ContractModal';
 import { ApplicantData } from '@/types';
-import { buttonGroupStyle, buttonsCellStyle, buttonStyle } from './index.styles';
+import { buttonGroupStyle, buttonsCellStyle, buttonStyle } from './ApplicantsTable.styles';
 
 type Props = {
   applicantList: ApplicantData[];

src/features/applicants/ApplicantList/ContractModal/ContractModal.tsx

@@ -0,0 +1,29 @@
+import { Modal } from '@/components/common';
+import ModalText from './ModalText/ModalText';
+import { useGetForeigner } from '@/apis/applicants/hooks/useGetForeigner';
+import ModalButtons from './ModalButtons/ModalButtons';
+
+interface ContractModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  userId: number;
+}
+
+export default function ContractModal({ isOpen, onClose, userId }: ContractModalProps) {
+  const { data: foreigner } = useGetForeigner(userId);
+
+  return (
+    <>
+      {isOpen && foreigner && (
+        <Modal
+          textChildren={
+            <ModalText foreignerIdNumber={foreigner.foreignerIdNumber} visaGenerateDate={foreigner.visaGenerateDate} />
+          }
+          buttonChildren={<ModalButtons onClose={onClose} />}
+          onClose={onClose}
+          style={{ padding: '15px' }}
+        />
+      )}
+    </>
+  );
+}

src/features/applicants/ApplicantList/ContractModal/index.styles.ts → src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.styles.ts

@@ -1,10 +1,6 @@
 import { palettes } from '@/assets/styles/global/palettes';
 import { css } from '@emotion/react';
 
-export const modalStyle = {
-  padding: '15px',
-};
-
 export const customButtonStyle = css`
   background-color: ${palettes.blue};
   color: ${palettes.white};

src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.tsx

@@ -0,0 +1,30 @@
+import { Button, Flex, Icon, Typo } from '@/components/common';
+import { buttonTextStyle, customButtonStyle } from './ModalButtons.styles';
+import { useNavigate } from 'react-router-dom';
+import ROUTE_PATH from '@/routes/path';
+
+interface ModalButtonsProps {
+  onClose: () => void;
+}
+
+export default function ModalButtons({ onClose }: ModalButtonsProps) {
+  const navigate = useNavigate();
+
+  const handleConfirmClick = () => {
+    navigate(ROUTE_PATH.CONTRACT.EMPLOYER);
+  };
+
+  return (
+    <Flex justifyContent="space-between">
+      <Button onClick={onClose}>취소</Button>
+      <Button onClick={handleConfirmClick} css={customButtonStyle}>
+        <Flex gap={{ x: '15px' }}>
+          <Typo size="16px" style={buttonTextStyle}>
+            확인하였습니다.
+          </Typo>
+          <Icon.Arrow.RightWhite />
+        </Flex>
+      </Button>
+    </Flex>
+  );
+}

src/features/applicants/ApplicantList/ContractModal/ModalText/index.tsx → src/features/applicants/ApplicantList/ContractModal/ModalText/ModalText.tsx

@@ -1,7 +1,7 @@
 import { palettes } from '@/assets/styles/global/palettes';
 import { ForeignerData } from '@/types';
 import { Typo } from '@/components/common';
-import { headingStyle, paragraphStyle, titleStyle } from './index.styles';
+import { headingStyle, paragraphStyle, titleStyle } from './ModalText.styles';
 
 type Props = Pick<ForeignerData, 'foreignerIdNumber' | 'visaGenerateDate'>;
 

src/features/companies/CompanyInfo/index.tsx → src/features/companies/CompanyInfo/CompanyInfo.tsx

@@ -3,7 +3,7 @@ import { CompanyData } from '@/types';
 import IndustryIcon from '@assets/icons/companyInfo/industry.svg?react';
 import BrandIcon from '@assets/icons/companyInfo/brand.svg?react';
 import RevenueIcon from '@assets/icons/companyInfo/revenue.svg?react';
-import { companyNameStyle, infoStyle, infoWrapperStyle } from './index.styles';
+import { companyNameStyle, infoStyle, infoWrapperStyle } from './CompanyInfo.styles';
 
 type Props = Pick<CompanyData, 'name' | 'industryOccupation' | 'brand' | 'revenuePerYear'>;
 

src/features/companies/CompanyList/CompaniesTable/index.tsx → src/features/companies/CompanyList/CompaniesTable/CompaniesTable.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex, Icon, List, Image, Table, Th, Td } from '@/components/common';
 import { CompanyData } from '@/types';
-import CompanyInfo from '@/features/companies/CompanyInfo';
-import { cellStyle, imageSize, imageStyle } from './index.styles';
+import CompanyInfo from '@/features/companies/CompanyInfo/CompanyInfo';
+import { cellStyle, imageSize, imageStyle } from './CompaniesTable.styles';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
 

src/features/companies/CompanyList/index.tsx → src/features/companies/CompanyList/CompanyList.tsx

@@ -1,5 +1,5 @@
 import { Flex, Typo } from '@/components/common';
-import CompaniesTable from './CompaniesTable';
+import CompaniesTable from './CompaniesTable/CompaniesTable';
 import { CompanyData } from '@/types';
 
 type Props = {

src/features/recruitments/RecruitmentInfo/index.tsx → src/features/recruitments/RecruitmentInfo/RecruitmentInfo.tsx

@@ -11,7 +11,7 @@ import {
   infoFlexStyle,
   infoGroupStyle,
   recruitmentFlexStyle,
-} from './index.styles';
+} from './RecruitmentInfo.styles';
 
 type Props = Pick<RecruitmentItem, 'image' | 'companyName' | 'koreanTitle' | 'area' | 'salary'>;
 

src/features/recruitments/RecruitmentList/index.tsx → src/features/recruitments/RecruitmentList/RecruitmentList.tsx

@@ -1,5 +1,5 @@
 import { Flex, Typo } from '@/components/common';
-import RecruitmentsTable from './RecruitmentsTable';
+import RecruitmentsTable from './RecruitmentsTable/RecruitmentsTable';
 import { RecruitmentItem } from '@/types';
 
 type Props = {

src/features/recruitments/RecruitmentList/RecruitmentsTable/index.tsx → src/features/recruitments/RecruitmentList/RecruitmentsTable/RecruitmentsTable.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, List, Table, Td, Th, Typo } from '@/components/common';
 import { RecruitmentItem } from '@/types';
-import { buttonGroupStyle, buttonStyle, recruitmentStyle, recruitmentTitleStyle } from './index.styles';
+import { buttonGroupStyle, buttonStyle, recruitmentStyle, recruitmentTitleStyle } from './RecruitmentsTable.styles';
 import { useNavigate, useParams } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
 

src/features/visaRegistration/index.tsx → src/features/registerVisa/VisaRegistrationForm.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, Input, Modal } from '@/components/common';
 import { ChangeEvent, useMemo, useState } from 'react';
-import { buttonStyle, ErrorMessage, Form, inputStyle } from './index.styles';
+import { buttonStyle, ErrorMessage, Form, inputStyle } from './VisaRegistrationForm.styles';
 import { validateForeignerNumber } from './validateForeignerNumber';
 import { useRegisterVisaInfo } from '@/apis/applicants/hooks/useRegisterVisaInfo';
 

src/pages/applicants/index.stories.tsx → src/pages/applicants/Applicants.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import Applicants from '.';
-import { recruitment, applicantList } from './index.mock';
+import Applicants from './Applicants';
+import { recruitment, applicantList } from './Applicants.mock';
 
 const meta: Meta<typeof Applicants> = {
   title: 'pages/Applicants',

src/pages/applicants/Applicants.styles.ts

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+
+export const spinnerFlexStyle = css`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`;

src/pages/applicants/index.tsx → src/pages/applicants/Applicants.tsx

@@ -1,12 +1,13 @@
-import { Flex, InnerContainer } from '@/components/common';
-import ApplicantList from '@/features/applicants/ApplicantList';
-import RecruitmentsInfo from '@/features/recruitments/RecruitmentInfo';
+import { Flex, InnerContainer, Spinner } from '@/components/common';
+import ApplicantList from '@/features/applicants/ApplicantList/ApplicantList';
+import RecruitmentsInfo from '@/features/recruitments/RecruitmentInfo/RecruitmentInfo';
 import Layout from '@/features/layout';
 import styled from '@emotion/styled';
 import { useGetMyRecruitments } from '@/apis/recruitments/hooks/useGetMyRecruitments';
 import { useParams } from 'react-router-dom';
 import { useGetMyApplicants } from '@/apis/applicants/hooks/useGetMyApplicants';
 import { ApplicantData, RecruitmentItem } from '@/types';
+import { spinnerFlexStyle } from './Applicants.styles';
 
 interface MyApplicantProps {
   recruitment?: RecruitmentItem;
@@ -16,7 +17,7 @@ interface MyApplicantProps {
 export default function Applicants({ recruitment, applicantList }: MyApplicantProps) {
   const { companyId, recruitmentId } = useParams();
   const { data: recruitmentList } = useGetMyRecruitments(Number(companyId));
-  const { data: applicants } = useGetMyApplicants(Number(recruitmentId));
+  const { data: applicants, isLoading } = useGetMyApplicants(Number(recruitmentId));
 
   const recruitmentData =
     recruitment || recruitmentList?.find((r: RecruitmentItem) => r.recruitmentId.toString() === recruitmentId);
@@ -26,15 +27,21 @@ export default function Applicants({ recruitment, applicantList }: MyApplicantPr
     <Layout>
       <MainContainer>
         <InnerContainer>
-          <Flex direction="column" gap={{ y: '60px' }}>
+          <Flex direction="column" gap={{ y: '60px' }} css={{ position: 'relative', minHeight: '600px' }}>
             <RecruitmentsInfo
               image={recruitmentData.image}
               companyName={recruitmentData.companyName}
               koreanTitle={recruitmentData.koreanTitle}
               area={recruitmentData.area}
               salary={recruitmentData.salary}
             />
-            {applicantsData && <ApplicantList applicantList={applicantsData} />}
+            {isLoading ? (
+              <Flex justifyContent="center" alignItems="center" css={spinnerFlexStyle}>
+                <Spinner />
+              </Flex>
+            ) : (
+              applicantsData && <ApplicantList applicantList={applicantsData} />
+            )}
           </Flex>
         </InnerContainer>
       </MainContainer>