Feat: i18n 번역 데이터 작성, 폴더 및 코드 구조 리팩토링

src/apis/apiPath.ts

@@ -1,23 +1,26 @@
 const BASE_URL = '/api';
 
 export const APIPath = {
-  postNotice: '/api/recruitments',
-  allApplication: '/api/application/all',
-  signEmployeeContract: '/api/contract',
-  makeEmployerContract: '/api/categories',
-  downloadContract: '/api/contract/:applyId/download',
+  postNotice: `${BASE_URL}/recruitments`,
+  allApplication: `${BASE_URL}/application/all`,
+  signEmployeeContract: `${BASE_URL}/contract/employee`,
+  makeContract: `${BASE_URL}/contract`,
+  getContract: `${BASE_URL}/contract/:applyId`,
+  downloadContract: `${BASE_URL}/contract/:applyId/download`,
   registerSign: '/api/sign',
   getMyCompanies: `${BASE_URL}/company`,
   getMyRecruitments: `${BASE_URL}/recruitments/company/:companyId`,
   getMyApplicants: `${BASE_URL}/application/:recruitmentId`,
   getForeigner: `${BASE_URL}/visa/:userId`,
   registerVisa: `${BASE_URL}/visa`,
+  registerCompany: `${BASE_URL}/company`,
   apply: '/api/application/',
   recruitmentsDetail: '/api/recruitments/:postId',
 };
 
 export const getDynamicAPIPath = {
   downloadContract: (applyId: number) => APIPath.downloadContract.replace(':applyId', applyId.toString()),
+  getContract: (applyId: number) => APIPath.getContract.replace(':applyId', applyId.toString()),
   getMyRecruitments: (companyId: number) => APIPath.getMyRecruitments.replace(':companyId', companyId.toString()),
   getMyApplicants: (recruitmentId: number) =>
     APIPath.getMyApplicants.replace(':recruitmentId', recruitmentId.toString()),

src/apis/contract/hooks/useGetMyContract.tsx

@@ -0,0 +1,15 @@
+import { getDynamicAPIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useQuery } from '@tanstack/react-query';
+
+export const getMyContractPath = (applyId: number) => `${getDynamicAPIPath.getContract(applyId)}`;
+const getMyContract = async (applyId: number) => {
+  const res = await clientInstance.get(getMyContractPath(applyId));
+  return res.data;
+};
+
+export const useGetMyContract = (applyId: number) =>
+  useQuery({
+    queryKey: [getMyContractPath],
+    queryFn: () => getMyContract(applyId),
+  });

src/apis/contract/hooks/usePostContract.tsx

@@ -0,0 +1,26 @@
+import { APIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useMutation } from '@tanstack/react-query';
+
+export type ContractRequestData = {
+  salary?: string;
+  workingHours?: string;
+  dayOff?: string;
+  annualPaidLeave?: string;
+  workingPlace?: string;
+  responsibilities?: string;
+  rule?: string;
+  applyId?: number;
+};
+
+export const getPostContractPath = () => `${APIPath.makeContract}`;
+
+export const postContract = async (req: ContractRequestData) => {
+  const response = await clientInstance.post(getPostContractPath(), req);
+  return response.data;
+};
+
+export const useFetchPostContract = () =>
+  useMutation({
+    mutationFn: postContract,
+  });

src/apis/contract/hooks/usePostEmployeeSign.tsx

@@ -0,0 +1,19 @@
+import { APIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useMutation } from '@tanstack/react-query';
+
+export type SignEmployeeContractRequestData = {
+  applyId?: number;
+};
+
+export const getPostSignEmployeeContractPath = () => `${APIPath.signEmployeeContract}`;
+
+export const postSignEmployeeContract = async (req: SignEmployeeContractRequestData) => {
+  const response = await clientInstance.post(getPostSignEmployeeContractPath(), req);
+  return response.data;
+};
+
+export const useFetchPostContract = () =>
+  useMutation({
+    mutationFn: postSignEmployeeContract,
+  });

src/apis/contract/mock/contract.mock.ts

@@ -0,0 +1,28 @@
+import { http, HttpResponse } from 'msw';
+import { getPostContractPath } from '../hooks/usePostContract';
+import { getMyContractPath } from '../hooks/useGetMyContract';
+import { getPostSignEmployeeContractPath } from '../hooks/usePostEmployeeSign';
+
+export const contractsMockHandler = [
+  http.post(getPostContractPath(), async ({ request }) => {
+    const req = await request.json();
+    return HttpResponse.json(req, { status: 201 });
+  }),
+
+  http.get(getMyContractPath(1), () => HttpResponse.json(CONTRACT_DATA)),
+
+  http.post(getPostSignEmployeeContractPath(), async ({ request }) => {
+    const req = await request.json();
+    return HttpResponse.json(req, { status: 201 });
+  }),
+];
+
+const CONTRACT_DATA = {
+  salary: '월 2백만원',
+  workingHours: '월화수 10:00 ~ 15:00, 목금 12:00 ~ 16:00',
+  dayOff: '매월 마지막주 화요일',
+  annualPaidLeave: '통상근로자의 근로시간에 비례하여 연차유급휴가를 부여한다.',
+  workingPlace: '대전 유성구 궁동 대학로99',
+  responsibilities: '개발하기',
+  rule: '열심히 일하기!',
+};

src/apis/employee/mock/getMyApplication.mock.ts

@@ -1,6 +1,6 @@
 import { http, HttpResponse } from 'msw';
 import { getMyApplicationPath } from '../hooks/useGetMyApplication';
-import { myRecruitList } from '@/pages/employee/myPage/data/index.mock';
+import { myRecruitList } from '@/pages/myPage/employee/data/index.mock';
 
 export const EmployeePageMockHandler = [
   http.get(getMyApplicationPath(), () => {

src/apis/employer/hooks/usePostNotice.ts → src/apis/postNotice/hooks/usePostNotice.ts

@@ -26,7 +26,7 @@ export const postNotice = async (req: NoticeRequestData) => {
   return response.data;
 };
 
-export const FetchPostNotice = () =>
+export const useFetchPostNotice = () =>
   useMutation({
     mutationFn: postNotice,
   });

src/apis/registerCompany/registerCompany.mock.ts

@@ -0,0 +1,9 @@
+import { http, HttpResponse } from 'msw';
+import { getPostCompanyPath } from './useRegisterCompany';
+
+export const registerCompanyMockHandler = [
+  http.post(getPostCompanyPath(), async ({ request }) => {
+    const req = await request.json();
+    return HttpResponse.json(req, { status: 201 });
+  }),
+];

src/apis/registerCompany/useRegisterCompany.ts

@@ -0,0 +1,23 @@
+import { APIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useMutation } from '@tanstack/react-query';
+
+export type CompanyRequestData = {
+  name?: string;
+  industryOccupation?: string;
+  brand?: string;
+  revenuePerYear?: number;
+  logoImage?: string;
+};
+
+export const getPostCompanyPath = () => `${APIPath.registerCompany}`;
+
+export const postCompany = async (req: CompanyRequestData) => {
+  const response = await clientInstance.post(getPostCompanyPath(), req);
+  return response.data;
+};
+
+export const useFetchPostCompany = () =>
+  useMutation({
+    mutationFn: postCompany,
+  });

src/assets/translator/EmployeeMyPage/ko.ts

@@ -0,0 +1,7 @@
+export const EmployeeMyPage = {
+  UPDATE_PROFILE: '프로필 수정하기',
+  REGISTER_RESUME: '이력서 등록하기',
+  REGISTER_SIGN: '사인 등록',
+  REGISTER_VISA: '외국인 번호 및 비자 발급 일자 등록',
+  MYRECRUITLIST: '내가 지원한 공고',
+};

src/assets/translator/EmployeeMyPage/ve.ts

@@ -0,0 +1,7 @@
+export const EmployeeMyPage = {
+  UPDATE_PROFILE: 'Cập nhật hồ sơ',
+  REGISTER_RESUME: 'Đăng ký hồ sơ',
+  REGISTER_SIGN: 'Đăng ký chữ ký',
+  REGISTER_VISA: 'Đăng ký số người nước ngoài và ngày cấp visa',
+  MYRECRUITLIST: 'Công việc tôi đã ứng tuyển',
+};

src/assets/translator/PostNotice/ko.ts

@@ -0,0 +1,11 @@
+export const PostNotice = {
+  TITLE: '구인 글 등록하기',
+  SALARY: '급여',
+  WORKINGDURATION: '근무기간',
+  WORKDAYS: '근무요일',
+  WORKHOURS: '근무시간',
+  WORKTYPE: '고용형태',
+  ELIGIBILITY_CRITERIA: '비자조건',
+  PREFERRED_CONDITIONS: '우대사항',
+  SUBMIT: '등록하기',
+};

src/assets/translator/PostNotice/ve.ts

@@ -0,0 +1,11 @@
+export const PostNotice = {
+  TITLE: 'Đăng bài tuyển dụng',
+  SALARY: 'Lương',
+  WORKINGDURATION: 'Thời gian làm việc',
+  WORKDAYS: 'Ngày làm việc',
+  WORKHOURS: 'Giờ làm việc',
+  WORKTYPE: 'Hình thức làm việc',
+  ELIGIBILITY_CRITERIA: 'Điều kiện visa',
+  PREFERRED_CONDITIONS: 'Ưu tiên',
+  SUBMIT: 'Đăng',
+};

src/assets/translator/RegisterCompany/ko.ts

@@ -0,0 +1,9 @@
+export const RegisterCompany = {
+  TITLE: '회사 등록',
+  LOGOIMAGE: '회사 이미지 업로드(선택)',
+  COMPANYNAME: '회사명',
+  INDUSTRY_OCCUPATION: '업직종',
+  BRAND: '브랜드',
+  REVENUE_PERYEAR: '연 평균 매출액',
+  SUBMIT: '등록하기',
+};

src/assets/translator/RegisterCompany/ve.ts

@@ -0,0 +1,9 @@
+export const RegisterCompany = {
+  TITLE: 'Đăng ký công ty',
+  LOGOIMAGE: 'Tải lên logo công ty (tùy chọn)',
+  COMPANYNAME: 'Tên công ty',
+  INDUSTRY_OCCUPATION: 'Ngành nghề',
+  BRAND: 'Thương hiệu',
+  REVENUE_PERYEAR: 'Doanh thu hàng năm',
+  SUBMIT: 'Đăng ký',
+};

src/features/employee/myPage/CardButton.tsx

@@ -1,12 +1,12 @@
 import { Button } from '@/components/common';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 type Props = {
   design?: 'default' | 'outlined' | 'textbutton' | 'deactivate';
   children: ReactNode;
-};
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-export default function CardButton({ design, children }: Props) {
+export default function CardButton({ design, children, ...rest }: Props) {
   return (
     <Button
       design={design}
@@ -17,6 +17,7 @@ export default function CardButton({ design, children }: Props) {
         justifyContent: 'space-between',
         padding: '10px 20px',
       }}
+      {...rest}
     >
       {children}
     </Button>

src/features/employee/myPage/MyRecruitCard.tsx

@@ -1,24 +1,26 @@
 import { Card, Image, Typo, Button } from '@/components/common';
 import styled from '@emotion/styled';
-import { MyRecruitListProps, StateProps } from '@/types';
+import { MyRecruitListProps, StateProps, TextProps } from '@/types';
+import { useNavigate } from 'react-router-dom';
+import ROUTE_PATH from '@/routes/path';
 
 type DesignProps = {
   design: 'default' | 'outlined' | 'textbutton' | 'deactivate';
-  text: string;
+  text?: TextProps;
 };
 
 function getStateStyle(state: StateProps): DesignProps {
   switch (state) {
-    case '근로계약서 서명하기':
+    case 'LetsSign':
       return { design: 'default', text: '근로계약서 서명하기' };
-    case '채용 마감':
+    case 'Closed':
       return { design: 'deactivate', text: '채용 마감' };
-    case '지원서 검토중':
+    case 'Waiting':
       return { design: 'outlined', text: '지원서 검토중' };
-    case '채용 완료':
+    case 'Completed':
       return { design: 'deactivate', text: '채용 완료' };
     default:
-      return { design: 'deactivate', text: '알 수 없음' }; // 상태가 정의되지 않은 경우
+      return { design: 'deactivate' }; // 상태가 정의되지 않은 경우
   }
 }
 
@@ -27,8 +29,9 @@ type Props = {
 };
 
 export default function MyRecruitCard({ myRecruit }: Props) {
-  const { image, title, area, state } = myRecruit;
+  const { image, title, area, state, applyId } = myRecruit;
   const buttonStyle = getStateStyle(state);
+  const navigate = useNavigate();
 
   return (
     <Card
@@ -57,7 +60,15 @@ export default function MyRecruitCard({ myRecruit }: Props) {
         </Typo>
         <Typo size="14px">{area}</Typo>
       </TextSection>
-      <Button design={buttonStyle.design} style={{ width: '200px', padding: '10px 20px' }}>
+      <Button
+        design={buttonStyle.design}
+        style={{ width: '200px', padding: '10px 20px' }}
+        onClick={() => {
+          if (state == 'LetsSign') {
+            navigate(ROUTE_PATH.CONTRACT.EMPLOYEE.replace(':applyId', applyId.toString()));
+          }
+        }}
+      >
         {buttonStyle.text}
       </Button>
     </Card>

src/features/employee/myPage/MyRecruitList.tsx

@@ -10,7 +10,7 @@ export default function MyRecruitList({ myRecruitList }: Props) {
   return (
     <List
       items={myRecruitList}
-      renderItem={(myRecruit) => <MyRecruitCard myRecruit={myRecruit} key={myRecruit.id} />}
+      renderItem={(myRecruit) => <MyRecruitCard myRecruit={myRecruit} key={myRecruit.applyId} />}
     />
   );
 }

src/mocks/handlers.ts

@@ -1,7 +1,7 @@
 import { recruitmentsMockHandler } from '@/apis/home/mocks/recruitmentsMockHandler';
 import { slidesMockHandler } from '@/apis/home/mocks/slidesMockHandler';
 import { EmployeePageMockHandler } from '@/apis/employee/mock/getMyApplication.mock';
-import { noticesMockHandler } from '@/apis/employer/mock/postNotice.mock';
+import { noticesMockHandler } from '@/apis/postNotice/mock/postNotice.mock';
 import { registerSignMockHandler } from '@/apis/registerSign/registerSign.mock';
 import { myCompaniesMockHandler } from '@/apis/companies/mocks/myCompaniesMockHandler';
 import { myRecruitmentsMockHandler } from '@/apis/recruitments/mocks/myRecruitmentsMockHandler';
@@ -10,6 +10,8 @@ import { foreignerMockHandler } from '@/apis/applicants/mocks/foreignerMockHandl
 import { visaMockHandler } from '@/apis/applicants/mocks/visaMockHandler';
 import { postApplyMockHandler } from '@apis/apply/postApply.mock';
 import { recruitmentsDetailMockHandler } from '@apis/recruitmentsDetail/recruitmentsDetailMockHandler';
+import { registerCompanyMockHandler } from '@/apis/registerCompany/registerCompany.mock';
+import { contractsMockHandler } from '@/apis/contract/mock/contract.mock';
 
 export const handlers = [
   ...recruitmentsMockHandler,
@@ -24,4 +26,6 @@ export const handlers = [
   ...visaMockHandler,
   ...postApplyMockHandler,
   ...recruitmentsDetailMockHandler,
+  ...registerCompanyMockHandler,
+  ...contractsMockHandler,
 ];