From 6d2d80e5d1c4c3d38c31feb1f956ed76b641d132 Mon Sep 17 00:00:00 2001 From: Kim Jian <81233665+KimJi-An@users.noreply.github.com> Date: Wed, 30 Oct 2024 18:02:41 +0900 Subject: [PATCH] =?UTF-8?q?Refactor/#71=209=EC=A3=BC=EC=B0=A8=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81=20(#84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: 컴포넌트 이름과 일치하도록 파일 이름 변경 * refactor: 고용주 마이페이지에 사인등록 버튼 추가 및 디자인 변경 * feat: 고용주 마이페이지의 사인 등록 버튼 클릭 시 사인 등록 페이지로 이동 기능 추가 * feat: 회사 목록 로딩 중 Spinner 추가 및 위치 조정 * feat: 공고글 목록 로딩 중 Spinner 추가 * refactor: ContractModal의 버튼들을 ModalButtons로 분리 * feat: 계약 팝업창 확인 버튼 클릭 시 근로계약서 페이지로 이동 기능 추가 --- src/apis/apiPath.ts | 2 +- .../applicants/hooks/useRegisterVisaInfo.ts | 2 +- .../applicants/mocks/foreignerMockHandler.ts | 2 +- .../mocks/myApplicantsMockHandler.ts | 2 +- src/apis/applicants/mocks/visaMockHandler.ts | 2 +- .../companies/mocks/myCompaniesMockHandler.ts | 2 +- .../mocks/myRecruitmentsMockHandler.ts | 2 +- .../{index.tsx => ApplicantList.tsx} | 2 +- ...ex.styles.ts => ApplicantsTable.styles.ts} | 0 .../{index.tsx => ApplicantsTable.tsx} | 4 +- .../{index.mock.ts => ContractModal.mock.ts} | 0 .../ContractModal/ContractModal.tsx | 29 +++++++++ .../ModalButtons.styles.ts} | 4 -- .../ModalButtons/ModalButtons.tsx | 30 ++++++++++ .../{index.styles.ts => ModalText.styles.ts} | 0 .../ModalText/{index.tsx => ModalText.tsx} | 2 +- .../ApplicantList/ContractModal/index.tsx | 41 ------------- ...{index.styles.ts => CompanyInfo.styles.ts} | 0 .../{index.tsx => CompanyInfo.tsx} | 2 +- ...dex.styles.ts => CompaniesTable.styles.ts} | 0 .../{index.tsx => CompaniesTable.tsx} | 4 +- .../{index.tsx => CompanyList.tsx} | 2 +- ...ex.styles.ts => RecruitmentInfo.styles.ts} | 0 .../{index.tsx => RecruitmentInfo.tsx} | 2 +- .../{index.tsx => RecruitmentList.tsx} | 2 +- ....styles.ts => RecruitmentsTable.styles.ts} | 0 .../{index.tsx => RecruitmentsTable.tsx} | 2 +- .../VisaRegistrationForm.styles.ts} | 0 .../VisaRegistrationForm.tsx} | 2 +- .../validateForeignerNumber.ts | 0 .../{index.mock.ts => Applicants.mock.ts} | 0 ...dex.stories.tsx => Applicants.stories.tsx} | 4 +- src/pages/applicants/Applicants.styles.ts | 9 +++ .../applicants/{index.tsx => Applicants.tsx} | 19 ++++-- .../myAccount/employer/index.stories.tsx | 14 ----- src/pages/myAccount/employer/index.styles.ts | 30 ---------- src/pages/myAccount/employer/index.tsx | 24 -------- .../{index.mock.ts => MyCompany.mock.ts} | 0 ...ndex.stories.tsx => MyCompany.stories.tsx} | 4 +- .../{index.styles.ts => MyCompany.styles.ts} | 8 +++ .../myCompany/{index.tsx => MyCompany.tsx} | 31 +++++++--- src/pages/myPage/employer/EmPloyerMyPage.tsx | 47 +++++++++++++++ .../employer/EmployerMyPage.mock.ts} | 0 .../employer/EmployerMyPage.stories.tsx | 14 +++++ .../myPage/employer/EmployerMyPage.styles.ts | 59 +++++++++++++++++++ .../registerVisa/RegisterVisa.stories.tsx | 14 +++++ .../RegisterVisa.styles.ts} | 0 .../RegisterVisa.tsx} | 6 +- src/pages/visaRegistration/index.stories.tsx | 14 ----- src/routes/path.ts | 8 +-- src/routes/router.tsx | 12 ++-- 51 files changed, 283 insertions(+), 176 deletions(-) rename src/features/applicants/ApplicantList/{index.tsx => ApplicantList.tsx} (90%) rename src/features/applicants/ApplicantList/ApplicantsTable/{index.styles.ts => ApplicantsTable.styles.ts} (100%) rename src/features/applicants/ApplicantList/ApplicantsTable/{index.tsx => ApplicantsTable.tsx} (95%) rename src/features/applicants/ApplicantList/ContractModal/{index.mock.ts => ContractModal.mock.ts} (100%) create mode 100644 src/features/applicants/ApplicantList/ContractModal/ContractModal.tsx rename src/features/applicants/ApplicantList/ContractModal/{index.styles.ts => ModalButtons/ModalButtons.styles.ts} (84%) create mode 100644 src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.tsx rename src/features/applicants/ApplicantList/ContractModal/ModalText/{index.styles.ts => ModalText.styles.ts} (100%) rename src/features/applicants/ApplicantList/ContractModal/ModalText/{index.tsx => ModalText.tsx} (95%) delete mode 100644 src/features/applicants/ApplicantList/ContractModal/index.tsx rename src/features/companies/CompanyInfo/{index.styles.ts => CompanyInfo.styles.ts} (100%) rename src/features/companies/CompanyInfo/{index.tsx => CompanyInfo.tsx} (98%) rename src/features/companies/CompanyList/CompaniesTable/{index.styles.ts => CompaniesTable.styles.ts} (100%) rename src/features/companies/CompanyList/CompaniesTable/{index.tsx => CompaniesTable.tsx} (91%) rename src/features/companies/CompanyList/{index.tsx => CompanyList.tsx} (91%) rename src/features/recruitments/RecruitmentInfo/{index.styles.ts => RecruitmentInfo.styles.ts} (100%) rename src/features/recruitments/RecruitmentInfo/{index.tsx => RecruitmentInfo.tsx} (97%) rename src/features/recruitments/RecruitmentList/{index.tsx => RecruitmentList.tsx} (90%) rename src/features/recruitments/RecruitmentList/RecruitmentsTable/{index.styles.ts => RecruitmentsTable.styles.ts} (100%) rename src/features/recruitments/RecruitmentList/RecruitmentsTable/{index.tsx => RecruitmentsTable.tsx} (97%) rename src/features/{visaRegistration/index.styles.ts => registerVisa/VisaRegistrationForm.styles.ts} (100%) rename src/features/{visaRegistration/index.tsx => registerVisa/VisaRegistrationForm.tsx} (96%) rename src/features/{visaRegistration => registerVisa}/validateForeignerNumber.ts (100%) rename src/pages/applicants/{index.mock.ts => Applicants.mock.ts} (100%) rename src/pages/applicants/{index.stories.tsx => Applicants.stories.tsx} (75%) create mode 100644 src/pages/applicants/Applicants.styles.ts rename src/pages/applicants/{index.tsx => Applicants.tsx} (67%) delete mode 100644 src/pages/myAccount/employer/index.stories.tsx delete mode 100644 src/pages/myAccount/employer/index.styles.ts delete mode 100644 src/pages/myAccount/employer/index.tsx rename src/pages/myCompany/{index.mock.ts => MyCompany.mock.ts} (100%) rename src/pages/myCompany/{index.stories.tsx => MyCompany.stories.tsx} (75%) rename src/pages/myCompany/{index.styles.ts => MyCompany.styles.ts} (90%) rename src/pages/myCompany/{index.tsx => MyCompany.tsx} (68%) create mode 100644 src/pages/myPage/employer/EmPloyerMyPage.tsx rename src/pages/{myAccount/employer/index.mock.ts => myPage/employer/EmployerMyPage.mock.ts} (100%) create mode 100644 src/pages/myPage/employer/EmployerMyPage.stories.tsx create mode 100644 src/pages/myPage/employer/EmployerMyPage.styles.ts create mode 100644 src/pages/registerVisa/RegisterVisa.stories.tsx rename src/pages/{visaRegistration/index.styles.ts => registerVisa/RegisterVisa.styles.ts} (100%) rename src/pages/{visaRegistration/index.tsx => registerVisa/RegisterVisa.tsx} (83%) delete mode 100644 src/pages/visaRegistration/index.stories.tsx diff --git a/src/apis/apiPath.ts b/src/apis/apiPath.ts index 9d8833d..b9b74e4 100644 --- a/src/apis/apiPath.ts +++ b/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', }; diff --git a/src/apis/applicants/hooks/useRegisterVisaInfo.ts b/src/apis/applicants/hooks/useRegisterVisaInfo.ts index 1d88c88..b290111 100644 --- a/src/apis/applicants/hooks/useRegisterVisaInfo.ts +++ b/src/apis/applicants/hooks/useRegisterVisaInfo.ts @@ -6,7 +6,7 @@ import { useMutation } from '@tanstack/react-query'; type VisaRequest = Pick; const registerVisaInfo = async (req: VisaRequest) => { - const res = await clientInstance.put(APIPath.setVisa, req); + const res = await clientInstance.put(APIPath.registerVisa, req); return res.data; }; diff --git a/src/apis/applicants/mocks/foreignerMockHandler.ts b/src/apis/applicants/mocks/foreignerMockHandler.ts index 32b4d5c..194dff3 100644 --- a/src/apis/applicants/mocks/foreignerMockHandler.ts +++ b/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))]; diff --git a/src/apis/applicants/mocks/myApplicantsMockHandler.ts b/src/apis/applicants/mocks/myApplicantsMockHandler.ts index 6d88dc7..1e7162b 100644 --- a/src/apis/applicants/mocks/myApplicantsMockHandler.ts +++ b/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))]; diff --git a/src/apis/applicants/mocks/visaMockHandler.ts b/src/apis/applicants/mocks/visaMockHandler.ts index 35ffd44..78580e6 100644 --- a/src/apis/applicants/mocks/visaMockHandler.ts +++ b/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 }); }), diff --git a/src/apis/companies/mocks/myCompaniesMockHandler.ts b/src/apis/companies/mocks/myCompaniesMockHandler.ts index ee41429..52febe9 100644 --- a/src/apis/companies/mocks/myCompaniesMockHandler.ts +++ b/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))]; diff --git a/src/apis/recruitments/mocks/myRecruitmentsMockHandler.ts b/src/apis/recruitments/mocks/myRecruitmentsMockHandler.ts index d620c5a..032282b 100644 --- a/src/apis/recruitments/mocks/myRecruitmentsMockHandler.ts +++ b/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 = [ diff --git a/src/features/applicants/ApplicantList/index.tsx b/src/features/applicants/ApplicantList/ApplicantList.tsx similarity index 90% rename from src/features/applicants/ApplicantList/index.tsx rename to src/features/applicants/ApplicantList/ApplicantList.tsx index a355b49..0281a3f 100644 --- a/src/features/applicants/ApplicantList/index.tsx +++ b/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 = { diff --git a/src/features/applicants/ApplicantList/ApplicantsTable/index.styles.ts b/src/features/applicants/ApplicantList/ApplicantsTable/ApplicantsTable.styles.ts similarity index 100% rename from src/features/applicants/ApplicantList/ApplicantsTable/index.styles.ts rename to src/features/applicants/ApplicantList/ApplicantsTable/ApplicantsTable.styles.ts diff --git a/src/features/applicants/ApplicantList/ApplicantsTable/index.tsx b/src/features/applicants/ApplicantList/ApplicantsTable/ApplicantsTable.tsx similarity index 95% rename from src/features/applicants/ApplicantList/ApplicantsTable/index.tsx rename to src/features/applicants/ApplicantList/ApplicantsTable/ApplicantsTable.tsx index 1fed6e9..2ba5352 100644 --- a/src/features/applicants/ApplicantList/ApplicantsTable/index.tsx +++ b/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[]; diff --git a/src/features/applicants/ApplicantList/ContractModal/index.mock.ts b/src/features/applicants/ApplicantList/ContractModal/ContractModal.mock.ts similarity index 100% rename from src/features/applicants/ApplicantList/ContractModal/index.mock.ts rename to src/features/applicants/ApplicantList/ContractModal/ContractModal.mock.ts diff --git a/src/features/applicants/ApplicantList/ContractModal/ContractModal.tsx b/src/features/applicants/ApplicantList/ContractModal/ContractModal.tsx new file mode 100644 index 0000000..12ebcb1 --- /dev/null +++ b/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 && ( + + } + buttonChildren={} + onClose={onClose} + style={{ padding: '15px' }} + /> + )} + + ); +} diff --git a/src/features/applicants/ApplicantList/ContractModal/index.styles.ts b/src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.styles.ts similarity index 84% rename from src/features/applicants/ApplicantList/ContractModal/index.styles.ts rename to src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.styles.ts index 42599dd..226ec40 100644 --- a/src/features/applicants/ApplicantList/ContractModal/index.styles.ts +++ b/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}; diff --git a/src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.tsx b/src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.tsx new file mode 100644 index 0000000..6252511 --- /dev/null +++ b/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 ( + + + + + ); +} diff --git a/src/features/applicants/ApplicantList/ContractModal/ModalText/index.styles.ts b/src/features/applicants/ApplicantList/ContractModal/ModalText/ModalText.styles.ts similarity index 100% rename from src/features/applicants/ApplicantList/ContractModal/ModalText/index.styles.ts rename to src/features/applicants/ApplicantList/ContractModal/ModalText/ModalText.styles.ts diff --git a/src/features/applicants/ApplicantList/ContractModal/ModalText/index.tsx b/src/features/applicants/ApplicantList/ContractModal/ModalText/ModalText.tsx similarity index 95% rename from src/features/applicants/ApplicantList/ContractModal/ModalText/index.tsx rename to src/features/applicants/ApplicantList/ContractModal/ModalText/ModalText.tsx index 6b8dcce..371e5a4 100644 --- a/src/features/applicants/ApplicantList/ContractModal/ModalText/index.tsx +++ b/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; diff --git a/src/features/applicants/ApplicantList/ContractModal/index.tsx b/src/features/applicants/ApplicantList/ContractModal/index.tsx deleted file mode 100644 index e64eda2..0000000 --- a/src/features/applicants/ApplicantList/ContractModal/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Button, Flex, Icon, Modal, Typo } from '@/components/common'; -import ModalText from './ModalText'; -import { buttonTextStyle, customButtonStyle, modalStyle } from './index.styles'; -import { useGetForeigner } from '@/apis/applicants/hooks/useGetForeigner'; - -interface ContractModalProps { - isOpen: boolean; - onClose: () => void; - userId: number; -} - -export default function ContractModal({ isOpen, onClose, userId }: ContractModalProps) { - const { data: foreigner } = useGetForeigner(userId); - - return ( - <> - {isOpen && foreigner && ( - - } - buttonChildren={ - - - - - } - onClose={onClose} - style={modalStyle} - /> - )} - - ); -} diff --git a/src/features/companies/CompanyInfo/index.styles.ts b/src/features/companies/CompanyInfo/CompanyInfo.styles.ts similarity index 100% rename from src/features/companies/CompanyInfo/index.styles.ts rename to src/features/companies/CompanyInfo/CompanyInfo.styles.ts diff --git a/src/features/companies/CompanyInfo/index.tsx b/src/features/companies/CompanyInfo/CompanyInfo.tsx similarity index 98% rename from src/features/companies/CompanyInfo/index.tsx rename to src/features/companies/CompanyInfo/CompanyInfo.tsx index ad90e69..bef4fbe 100644 --- a/src/features/companies/CompanyInfo/index.tsx +++ b/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; diff --git a/src/features/companies/CompanyList/CompaniesTable/index.styles.ts b/src/features/companies/CompanyList/CompaniesTable/CompaniesTable.styles.ts similarity index 100% rename from src/features/companies/CompanyList/CompaniesTable/index.styles.ts rename to src/features/companies/CompanyList/CompaniesTable/CompaniesTable.styles.ts diff --git a/src/features/companies/CompanyList/CompaniesTable/index.tsx b/src/features/companies/CompanyList/CompaniesTable/CompaniesTable.tsx similarity index 91% rename from src/features/companies/CompanyList/CompaniesTable/index.tsx rename to src/features/companies/CompanyList/CompaniesTable/CompaniesTable.tsx index afd1a1c..ae4e78b 100644 --- a/src/features/companies/CompanyList/CompaniesTable/index.tsx +++ b/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'; diff --git a/src/features/companies/CompanyList/index.tsx b/src/features/companies/CompanyList/CompanyList.tsx similarity index 91% rename from src/features/companies/CompanyList/index.tsx rename to src/features/companies/CompanyList/CompanyList.tsx index 3975af0..e977566 100644 --- a/src/features/companies/CompanyList/index.tsx +++ b/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 = { diff --git a/src/features/recruitments/RecruitmentInfo/index.styles.ts b/src/features/recruitments/RecruitmentInfo/RecruitmentInfo.styles.ts similarity index 100% rename from src/features/recruitments/RecruitmentInfo/index.styles.ts rename to src/features/recruitments/RecruitmentInfo/RecruitmentInfo.styles.ts diff --git a/src/features/recruitments/RecruitmentInfo/index.tsx b/src/features/recruitments/RecruitmentInfo/RecruitmentInfo.tsx similarity index 97% rename from src/features/recruitments/RecruitmentInfo/index.tsx rename to src/features/recruitments/RecruitmentInfo/RecruitmentInfo.tsx index 5918801..fe40fd3 100644 --- a/src/features/recruitments/RecruitmentInfo/index.tsx +++ b/src/features/recruitments/RecruitmentInfo/RecruitmentInfo.tsx @@ -11,7 +11,7 @@ import { infoFlexStyle, infoGroupStyle, recruitmentFlexStyle, -} from './index.styles'; +} from './RecruitmentInfo.styles'; type Props = Pick; diff --git a/src/features/recruitments/RecruitmentList/index.tsx b/src/features/recruitments/RecruitmentList/RecruitmentList.tsx similarity index 90% rename from src/features/recruitments/RecruitmentList/index.tsx rename to src/features/recruitments/RecruitmentList/RecruitmentList.tsx index cb3ccdd..40de9ea 100644 --- a/src/features/recruitments/RecruitmentList/index.tsx +++ b/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 = { diff --git a/src/features/recruitments/RecruitmentList/RecruitmentsTable/index.styles.ts b/src/features/recruitments/RecruitmentList/RecruitmentsTable/RecruitmentsTable.styles.ts similarity index 100% rename from src/features/recruitments/RecruitmentList/RecruitmentsTable/index.styles.ts rename to src/features/recruitments/RecruitmentList/RecruitmentsTable/RecruitmentsTable.styles.ts diff --git a/src/features/recruitments/RecruitmentList/RecruitmentsTable/index.tsx b/src/features/recruitments/RecruitmentList/RecruitmentsTable/RecruitmentsTable.tsx similarity index 97% rename from src/features/recruitments/RecruitmentList/RecruitmentsTable/index.tsx rename to src/features/recruitments/RecruitmentList/RecruitmentsTable/RecruitmentsTable.tsx index 8c0bfac..714a460 100644 --- a/src/features/recruitments/RecruitmentList/RecruitmentsTable/index.tsx +++ b/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'; diff --git a/src/features/visaRegistration/index.styles.ts b/src/features/registerVisa/VisaRegistrationForm.styles.ts similarity index 100% rename from src/features/visaRegistration/index.styles.ts rename to src/features/registerVisa/VisaRegistrationForm.styles.ts diff --git a/src/features/visaRegistration/index.tsx b/src/features/registerVisa/VisaRegistrationForm.tsx similarity index 96% rename from src/features/visaRegistration/index.tsx rename to src/features/registerVisa/VisaRegistrationForm.tsx index 0692701..40af84b 100644 --- a/src/features/visaRegistration/index.tsx +++ b/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'; diff --git a/src/features/visaRegistration/validateForeignerNumber.ts b/src/features/registerVisa/validateForeignerNumber.ts similarity index 100% rename from src/features/visaRegistration/validateForeignerNumber.ts rename to src/features/registerVisa/validateForeignerNumber.ts diff --git a/src/pages/applicants/index.mock.ts b/src/pages/applicants/Applicants.mock.ts similarity index 100% rename from src/pages/applicants/index.mock.ts rename to src/pages/applicants/Applicants.mock.ts diff --git a/src/pages/applicants/index.stories.tsx b/src/pages/applicants/Applicants.stories.tsx similarity index 75% rename from src/pages/applicants/index.stories.tsx rename to src/pages/applicants/Applicants.stories.tsx index 3259506..b58048f 100644 --- a/src/pages/applicants/index.stories.tsx +++ b/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 = { title: 'pages/Applicants', diff --git a/src/pages/applicants/Applicants.styles.ts b/src/pages/applicants/Applicants.styles.ts new file mode 100644 index 0000000..dd4de9b --- /dev/null +++ b/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; +`; diff --git a/src/pages/applicants/index.tsx b/src/pages/applicants/Applicants.tsx similarity index 67% rename from src/pages/applicants/index.tsx rename to src/pages/applicants/Applicants.tsx index eb8d585..3a9ae1a 100644 --- a/src/pages/applicants/index.tsx +++ b/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,7 +27,7 @@ export default function Applicants({ recruitment, applicantList }: MyApplicantPr - + - {applicantsData && } + {isLoading ? ( + + + + ) : ( + applicantsData && + )} diff --git a/src/pages/myAccount/employer/index.stories.tsx b/src/pages/myAccount/employer/index.stories.tsx deleted file mode 100644 index 3f5ba5d..0000000 --- a/src/pages/myAccount/employer/index.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; -import EmployerMyAccount from '.'; - -const meta: Meta = { - title: 'pages/MyAccount/Employer', - component: EmployerMyAccount, - tags: ['autodocs'], -}; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/src/pages/myAccount/employer/index.styles.ts b/src/pages/myAccount/employer/index.styles.ts deleted file mode 100644 index beb492d..0000000 --- a/src/pages/myAccount/employer/index.styles.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { responsiveStyle } from '@/utils/responsive'; -import { css } from '@emotion/react'; - -export const innerContainerStyle = css` - ${responsiveStyle({ - default: { - padding: '60px 0 80px 0', - }, - tablet: { - padding: '60px 0 80px 0', - }, - mobile: { - padding: '40px 0 80px 0', - }, - })} -`; - -export const typoStyle = { - ...responsiveStyle({ - default: { - fontWeight: 'bold', - }, - tablet: { - fontSize: '33px', - }, - mobile: { - fontSize: '30px', - }, - }), -}; diff --git a/src/pages/myAccount/employer/index.tsx b/src/pages/myAccount/employer/index.tsx deleted file mode 100644 index d8d085f..0000000 --- a/src/pages/myAccount/employer/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Flex, InnerContainer, Typo } from '@/components/common'; -import Layout from '@/features/layout'; -import CompanyList from '@/features/companies/CompanyList'; -import { innerContainerStyle, typoStyle } from './index.styles'; -import { useGetMyCompanies } from '@/apis/companies/hooks/useGetMyCompanies'; - -export default function EmployerMyAccount() { - const { data: companyList } = useGetMyCompanies(); - - return ( - -
- - - - 사장님, 안녕하세요! - - {companyList && } - - -
- - ); -} diff --git a/src/pages/myCompany/index.mock.ts b/src/pages/myCompany/MyCompany.mock.ts similarity index 100% rename from src/pages/myCompany/index.mock.ts rename to src/pages/myCompany/MyCompany.mock.ts diff --git a/src/pages/myCompany/index.stories.tsx b/src/pages/myCompany/MyCompany.stories.tsx similarity index 75% rename from src/pages/myCompany/index.stories.tsx rename to src/pages/myCompany/MyCompany.stories.tsx index 1f5109f..a350db8 100644 --- a/src/pages/myCompany/index.stories.tsx +++ b/src/pages/myCompany/MyCompany.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; -import MyCompany from '.'; -import { company, recruitmentList } from './index.mock'; +import MyCompany from './MyCompany'; +import { company, recruitmentList } from './MyCompany.mock'; const meta: Meta = { title: 'pages/MyCompany', diff --git a/src/pages/myCompany/index.styles.ts b/src/pages/myCompany/MyCompany.styles.ts similarity index 90% rename from src/pages/myCompany/index.styles.ts rename to src/pages/myCompany/MyCompany.styles.ts index 597708d..c432700 100644 --- a/src/pages/myCompany/index.styles.ts +++ b/src/pages/myCompany/MyCompany.styles.ts @@ -53,3 +53,11 @@ export const buttonStyle = css` border-radius: 4px; white-space: nowrap; `; + +export const spinnerFlexStyle = css` + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +`; diff --git a/src/pages/myCompany/index.tsx b/src/pages/myCompany/MyCompany.tsx similarity index 68% rename from src/pages/myCompany/index.tsx rename to src/pages/myCompany/MyCompany.tsx index ec36858..adcccb2 100644 --- a/src/pages/myCompany/index.tsx +++ b/src/pages/myCompany/MyCompany.tsx @@ -1,10 +1,16 @@ import Layout from '@/features/layout'; -import { Flex, InnerContainer, Image, Typo, Button, Icon } from '@/components/common'; +import { Flex, InnerContainer, Image, Typo, Button, Icon, Spinner } from '@/components/common'; import CompanyLogo from '@assets/images/coupang.png'; -import CompanyInfo from '@/features/companies/CompanyInfo'; +import CompanyInfo from '@/features/companies/CompanyInfo/CompanyInfo'; import { palettes } from '@/assets/styles/global/palettes'; -import { buttonStyle, imageStyle, companyWrapperStyle, innerContainerStyle } from './index.styles'; -import RecruitmentList from '@/features/recruitments/RecruitmentList'; +import { + buttonStyle, + imageStyle, + companyWrapperStyle, + innerContainerStyle, + spinnerFlexStyle, +} from './MyCompany.styles'; +import RecruitmentList from '@/features/recruitments/RecruitmentList/RecruitmentList'; import { useParams } from 'react-router-dom'; import { useGetMyCompanies } from '@/apis/companies/hooks/useGetMyCompanies'; import { CompanyData, RecruitmentItem } from '@/types'; @@ -18,7 +24,7 @@ interface MyCompanyProps { export default function MyCompany({ company, recruitmentList }: MyCompanyProps) { const { companyId } = useParams(); const { data: companyList } = useGetMyCompanies(); - const { data: recruitments } = useGetMyRecruitments(Number(companyId)); + const { data: recruitments, isLoading } = useGetMyRecruitments(Number(companyId)); const companyData = company || companyList?.find((c: CompanyData) => c.companyId.toString() === companyId); const recruitmentsData = recruitmentList || recruitments; @@ -27,7 +33,12 @@ export default function MyCompany({ company, recruitmentList }: MyCompanyProps)
- + - {recruitmentsData && } + {isLoading ? ( + + + + ) : ( + recruitmentsData && + )}
diff --git a/src/pages/myPage/employer/EmPloyerMyPage.tsx b/src/pages/myPage/employer/EmPloyerMyPage.tsx new file mode 100644 index 0000000..d50a89b --- /dev/null +++ b/src/pages/myPage/employer/EmPloyerMyPage.tsx @@ -0,0 +1,47 @@ +import { Button, Flex, Icon, InnerContainer, Spinner, Typo } from '@/components/common'; +import Layout from '@/features/layout'; +import CompanyList from '@/features/companies/CompanyList/CompanyList'; +import { flexStyle, innerContainerStyle, signButtonStyle, spinnerFlexStyle, typoStyle } from './EmployerMyPage.styles'; +import { useGetMyCompanies } from '@/apis/companies/hooks/useGetMyCompanies'; +import { useNavigate } from 'react-router-dom'; +import ROUTE_PATH from '@/routes/path'; + +export default function EmployerMyPage() { + const { data: companyList, isLoading } = useGetMyCompanies(); + const navigate = useNavigate(); + + const handleSignButtonClick = () => { + navigate(ROUTE_PATH.REGISTERSIGN); + }; + + return ( + +
+ + + + + 사장님, 안녕하세요! + + + + {isLoading ? ( + + + + ) : ( + companyList && + )} + + +
+ + ); +} diff --git a/src/pages/myAccount/employer/index.mock.ts b/src/pages/myPage/employer/EmployerMyPage.mock.ts similarity index 100% rename from src/pages/myAccount/employer/index.mock.ts rename to src/pages/myPage/employer/EmployerMyPage.mock.ts diff --git a/src/pages/myPage/employer/EmployerMyPage.stories.tsx b/src/pages/myPage/employer/EmployerMyPage.stories.tsx new file mode 100644 index 0000000..a710cfd --- /dev/null +++ b/src/pages/myPage/employer/EmployerMyPage.stories.tsx @@ -0,0 +1,14 @@ +import { Meta, StoryObj } from '@storybook/react'; +import EmployerMyPage from './EmPloyerMyPage'; + +const meta: Meta = { + title: 'pages/MyPage/Employer', + component: EmployerMyPage, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/pages/myPage/employer/EmployerMyPage.styles.ts b/src/pages/myPage/employer/EmployerMyPage.styles.ts new file mode 100644 index 0000000..55667b9 --- /dev/null +++ b/src/pages/myPage/employer/EmployerMyPage.styles.ts @@ -0,0 +1,59 @@ +import { palettes } from '@/assets/styles/global/palettes'; +import { responsiveStyle } from '@/utils/responsive'; +import { css } from '@emotion/react'; + +export const innerContainerStyle = css` + ${responsiveStyle({ + default: { + padding: '60px 0 80px 0', + }, + tablet: { + padding: '60px 0 80px 0', + }, + mobile: { + padding: '40px 0 80px 0', + }, + })} +`; + +export const flexStyle = css` + background-color: ${palettes.blue}; + padding: 30px; + border-radius: 8px; + + ${responsiveStyle({ + mobile: { + flexDirection: 'column', + gap: '27px', + justifyContent: 'center', + }, + })} +`; + +export const typoStyle = { + ...responsiveStyle({ + default: { + color: `${palettes.white}`, + }, + tablet: { + fontSize: '33px', + }, + mobile: { + fontSize: '30px', + }, + }), +}; + +export const signButtonStyle = css` + width: 300px; + padding: 25px; + border-radius: 8px; +`; + +export const spinnerFlexStyle = css` + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +`; diff --git a/src/pages/registerVisa/RegisterVisa.stories.tsx b/src/pages/registerVisa/RegisterVisa.stories.tsx new file mode 100644 index 0000000..2caf693 --- /dev/null +++ b/src/pages/registerVisa/RegisterVisa.stories.tsx @@ -0,0 +1,14 @@ +import { Meta, StoryObj } from '@storybook/react'; +import RegisterVisa from './RegisterVisa'; + +const meta: Meta = { + title: 'pages/RegisterVisa', + component: RegisterVisa, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/pages/visaRegistration/index.styles.ts b/src/pages/registerVisa/RegisterVisa.styles.ts similarity index 100% rename from src/pages/visaRegistration/index.styles.ts rename to src/pages/registerVisa/RegisterVisa.styles.ts diff --git a/src/pages/visaRegistration/index.tsx b/src/pages/registerVisa/RegisterVisa.tsx similarity index 83% rename from src/pages/visaRegistration/index.tsx rename to src/pages/registerVisa/RegisterVisa.tsx index 91967e4..2df9e07 100644 --- a/src/pages/visaRegistration/index.tsx +++ b/src/pages/registerVisa/RegisterVisa.tsx @@ -1,9 +1,9 @@ import { Flex, InnerContainer, Typo } from '@/components/common'; import Layout from '@/features/layout'; -import VisaRegistrationForm from '@/features/visaRegistration'; -import { BreakableText, innerContainerStyle, titleStyle } from './index.styles'; +import VisaRegistrationForm from '@/features/registerVisa/VisaRegistrationForm'; +import { BreakableText, innerContainerStyle, titleStyle } from './RegisterVisa.styles'; -export default function VisaRegistration() { +export default function RegisterVisa() { return (
diff --git a/src/pages/visaRegistration/index.stories.tsx b/src/pages/visaRegistration/index.stories.tsx deleted file mode 100644 index a624151..0000000 --- a/src/pages/visaRegistration/index.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; -import VisaRegistration from '.'; - -const meta: Meta = { - title: 'pages/VisaRegistration', - component: VisaRegistration, - tags: ['autodocs'], -}; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/src/routes/path.ts b/src/routes/path.ts index 55cfe85..4d735cc 100644 --- a/src/routes/path.ts +++ b/src/routes/path.ts @@ -9,8 +9,8 @@ export const APPLY = { APPLYPAGE: '/apply', }; -export const MY_ACCOUNT = { - EMPLOYER: '/employer-my-account', +export const MY_PAGE = { + EMPLOYER: '/employer-my-page', }; export const EMPLOYEE = { @@ -32,8 +32,8 @@ const ROUTE_PATH = { EMPLOYEE, RESUME: '/resume', MY_COMPANY: '/my-company/:companyId', - VISA_REGISTRATION: '/visa-registration', - MY_ACCOUNT, + REGISTER_VISA: '/register-visa', + MY_PAGE, REGISTERSIGN: '/registersign', REGISTERCOMPANY: '/register-company', CONTRACT, diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 1199648..5d2015d 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -5,18 +5,18 @@ import SignUp from '@pages/auth/SignUp'; import LoadingPage from '@/pages/auth/Loading'; import App from '@/App'; import Recruit from '@/pages/recruit'; -import VisaRegistration from '@/pages/visaRegistration'; +import RegisterVisa from '@/pages/registerVisa/RegisterVisa'; import PostNotice from '@/pages/employer/postNotice/PostNotice'; import Home from '@/pages/home'; import ApplyGuide from '@/pages/apply/applyguide/ApplyGuide'; import ApplyPage from '@/pages/apply/applypage/ApplyPage'; -import MyCompany from '@/pages/myCompany'; -import Applicants from '@/pages/applicants'; +import MyCompany from '@/pages/myCompany/MyCompany'; +import Applicants from '@/pages/applicants/Applicants'; import Resume from '@/pages/resume/Resume'; -import EmployerMyAccount from '@/pages/myAccount/employer'; import EmployeeMyPage from '@/pages/employee/myPage/EmployeeMyPage'; import RegisterSign from '@/pages/registerSign/RegisterSign'; import RegisterCompany from '@/pages/registerCompany/RegisterCompany'; +import EmployerMyPage from '@/pages/myPage/employer/EmPloyerMyPage'; import EmployeeContract from '@/pages/contract/EmployeeContract/EmployeeContract'; import EmployerContract from '@/pages/contract/EmployerContract/EmployerContract'; @@ -40,13 +40,13 @@ export const router = createBrowserRouter([ { path: ROUTE_PATH.APPLY.GUIDE, element: }, { path: ROUTE_PATH.APPLY.APPLYPAGE, element: }, { path: ROUTE_PATH.RECRUIT, element: }, - { path: ROUTE_PATH.VISA_REGISTRATION, element: }, + { path: ROUTE_PATH.REGISTER_VISA, element: }, { path: ROUTE_PATH.EMPLOYEE.EMPLOYEE_PAGE, element: }, { path: ROUTE_PATH.POST_NOTICE, element: }, { path: ROUTE_PATH.MY_COMPANY, element: }, { path: ROUTE_PATH.APPLICANTS, element: }, { path: ROUTE_PATH.RESUME, element: }, - { path: ROUTE_PATH.MY_ACCOUNT.EMPLOYER, element: }, + { path: ROUTE_PATH.MY_PAGE.EMPLOYER, element: }, { path: ROUTE_PATH.REGISTERSIGN, element: }, { path: ROUTE_PATH.REGISTERCOMPANY, element: }, { path: ROUTE_PATH.CONTRACT.EMPLOYEE, element: },