Feat/#109 페이지 연결 및 API 연동

src/apis/apiPath.ts

@@ -14,14 +14,17 @@ export const APIPath = {
   getForeigner: `${BASE_URL}/visa/:userId`,
   registerVisa: `${BASE_URL}/visa`,
   registerCompany: `${BASE_URL}/company`,
-  apply: '/api/application/',
+  apply: `${BASE_URL}/application/:recruitmentId`,
+  resume: `${BASE_URL}/resumes`,
   recruitmentsDetail: '/api/recruitments/:recruitmentId',
   getApplicantProfile: '/api/resumes/:resumeId/:applyId',
   closeRecruitment: `${BASE_URL}/recruitment/hiringClose/:recruitmentId`,
+  requiredFieldCheck: `${BASE_URL}/application`,
 };
 
 export const getDynamicAPIPath = {
   downloadContract: (applyId: number) => APIPath.downloadContract.replace(':applyId', applyId.toString()),
+  apply: (recruitmentId: number) => APIPath.apply.replace(':recruitmentId', recruitmentId.toString()),
   getContract: (applyId: number) => APIPath.getContract.replace(':applyId', applyId.toString()),
   getMyRecruitments: (companyId: number) => APIPath.getMyRecruitments.replace(':companyId', companyId.toString()),
   getMyApplicants: (recruitmentId: number) =>

src/apis/apply/postApply.mock.ts

@@ -1,8 +1,8 @@
 import { http, HttpResponse } from 'msw';
-import { getApply } from '../apply/useApplyHook';
+import { APIPath } from '@/apis/apiPath';
 
 export const postApplyMockHandler = [
-  http.post(`${getApply()}/:id`, async ({ request, params }) => {
+  http.post(`${APIPath.apply}`, async ({ request, params }) => {
     const { id } = params;
     const req = await request.json();
     return HttpResponse.json({ req, id }, { status: 201 });

src/apis/apply/useApplyHook.tsx

@@ -1,23 +1,23 @@
-import { APIPath } from '@/apis/apiPath';
+import { getDynamicAPIPath } from '@/apis/apiPath';
 import { clientInstance } from '@/apis/instance';
 import { useMutation } from '@tanstack/react-query';
-// import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
-export const getApply = () => `${APIPath.registerSign}`;
+export const getApply = (recruitmentId: number) => `${getDynamicAPIPath.apply(recruitmentId)}`;
 
-export const Apply = async ({ req, recruitmentId }: { req: string; recruitmentId: string }) => {
-  const response = await clientInstance.post(`${getApply()}/${recruitmentId}`, req);
+export const Apply = async ({ req, recruitmentId }: { req: string; recruitmentId: number }) => {
+  const response = await clientInstance.post(`${getApply(recruitmentId)}`, req);
   return response.data;
 };
 
 export const FetchApply = () => {
-  // const nav = useNavigate();
+  const nav = useNavigate();
 
   return useMutation({
-    mutationFn: ({ data, recruitmentId }: { data: string; recruitmentId: string }) =>
+    mutationFn: ({ data, recruitmentId }: { data: string; recruitmentId: number }) =>
       Apply({ req: data, recruitmentId }),
     onSuccess: () => {
-      // nav('/');
+      nav('/');
     },
   });
 };

src/apis/recruitmentsDetail/mock/requiredFieldCheckData.ts

@@ -0,0 +1,5 @@
+export const requiredFieldCheckData = {
+  resumeExistence: true,
+  visaExistence: true,
+  foreignerIdNumberExistence: true,
+};

src/apis/recruitmentsDetail/mock/requiredFieldCheckHandler.ts

@@ -0,0 +1,7 @@
+import { APIPath } from '@/apis/apiPath';
+import { requiredFieldCheckData } from './requiredFieldCheckData';
+import { http, HttpResponse } from 'msw';
+
+export const requiredFieldCheckMockHandler = [
+  http.get(APIPath.requiredFieldCheck, () => HttpResponse.json(requiredFieldCheckData)),
+];

src/apis/recruitmentsDetail/useRequiredFieldCheck.ts

@@ -0,0 +1,15 @@
+import { APIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useQuery } from '@tanstack/react-query';
+import { type RequiredFieldCheckProps } from '@/pages/recruit/RecruitType';
+
+const getRequiredFieldCheck = async () => {
+  const res = await clientInstance.get(APIPath.requiredFieldCheck);
+  return res.data;
+};
+
+export const useGetRequiredFieldCheck = (recruitmentId: number) =>
+  useQuery<RequiredFieldCheckProps, Error>({
+    queryKey: ['RequiredFieldCheckProps', recruitmentId],
+    queryFn: () => getRequiredFieldCheck(),
+  });

src/apis/registerSign/useRegisterSign.ts

@@ -1,7 +1,7 @@
 import { APIPath } from '@/apis/apiPath';
 import { clientInstance } from '@/apis/instance';
 import { useMutation } from '@tanstack/react-query';
-// import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 export const getRegisterSign = () => `${APIPath.registerSign}`;
 
@@ -14,14 +14,19 @@ export const RegisterSign = async (req: FormData) => {
   return response.data;
 };
 
-export const FetchRegisterSign = () => {
-  // const nav = useNavigate();
+export const FetchRegisterSign = (userType: string) => {
+  const nav = useNavigate();
 
   return useMutation({
     mutationFn: (req: FormData) => RegisterSign(req),
     onSuccess: () => {
-      // 고용주, 근로자 구분 리다이렉트 추후 구현
-      // nav('/');
+      if (userType === 'employer') {
+        nav('/employer-my-page');
+      } else if (userType === 'employee') {
+        nav('/employee-my-page');
+      } else {
+        alert('오류');
+      }
     },
   });
 };

src/apis/resume/postResume.mock.ts

@@ -0,0 +1,9 @@
+import { http, HttpResponse } from 'msw';
+import { APIPath } from '@/apis/apiPath';
+
+export const postResumeMockHandler = [
+  http.post(`${APIPath.resume}`, async ({ request }) => {
+    const req = await request.json();
+    return HttpResponse.json({ req }, { status: 201 });
+  }),
+];

src/apis/resume/useResumeHook.tsx

@@ -0,0 +1,22 @@
+import { APIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+
+export const getResumePath = () => `${APIPath.resume}`;
+
+export const Resume = async ({ req }: { req: string }) => {
+  const response = await clientInstance.post(`${getResumePath()}`, req);
+  return response.data;
+};
+
+export const FetchResume = () => {
+  const nav = useNavigate();
+
+  return useMutation({
+    mutationFn: ({ data }: { data: string }) => Resume({ req: data }),
+    onSuccess: () => {
+      nav('/employee-my-page');
+    },
+  });
+};

src/assets/translator/Recruit/recruitData.ts

@@ -17,6 +17,15 @@ export const recruitData = {
     detailedDescription: '상세설명',
     mainResponsibilities: '주요업무',
     PreferredRequirements: '우대사항',
+    Modal: {
+      resumeExistence: '이력서',
+      visaExistence: '비자 발급 일자',
+      foreignerIdNumberExistence: '외국인 번호',
+      close: '닫기',
+      alert: '미등록!',
+      ment: '필수 정보를 등록해야 지원서를 작성할 수 있어요',
+      myPage: '마이페이지',
+    },
   },
   [Languages.VE]: {
     recruit: 'Ứng tuyển',
@@ -34,5 +43,14 @@ export const recruitData = {
     detailedDescription: 'Mô tả chi tiết',
     mainResponsibilities: 'Nhiệm vụ chính',
     PreferredRequirements: 'Yêu cầu ưu tiên',
+    Modal: {
+      resumeExistence: 'Sơ yếu lý lịch',
+      visaExistence: 'Ngày cấp visa',
+      foreignerIdNumberExistence: 'Số đăng ký người nước ngoài',
+      close: 'Đóng',
+      alert: 'Chưa đăng ký!',
+      ment: 'Bạn cần đăng ký thông tin bắt buộc để có thể tạo hồ sơ ứng tuyển',
+      myPage: 'Trang của tôi',
+    },
   },
 };

src/assets/translator/Resume/resumeData.ts

@@ -21,7 +21,7 @@ export const resumeData = {
       introduction: '자기소개를 입력하세요.',
       koreanLevel: '한국어 실력을 선택해주세요!',
     },
-    error: '을(를) 입력해주세요!',
+    errors: '을(를) 입력해주세요!',
     submit: '제출하기',
     btnSubmit: '정말 제출하시겠습니까?',
   },
@@ -45,7 +45,7 @@ export const resumeData = {
       introduction: 'Vui lòng nhập giới thiệu bản thân.',
       koreanLevel: 'Vui lòng chọn trình độ tiếng Hàn!',
     },
-    error: 'Vui lòng nhập ',
+    errors: 'Vui lòng nhập ',
     submit: 'Nộp',
     btnSubmit: 'Bạn có chắc muốn nộp không?',
   },

src/mocks/handlers.ts

@@ -9,11 +9,13 @@
 import { foreignerMockHandler } from '@/apis/applicants/mocks/foreignerMockHandler';
 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/mocks/registerCompany.mock';
+import { recruitmentsDetailMockHandler } from '@/apis/recruitmentsDetail/mock/recruitmentsDetailMockHandler';
+import { registerCompanyMockHandler } from '@/apis/registerCompany/registerCompany.mock';
 import { contractsMockHandler } from '@/apis/contract/mock/contract.mock';
 import { getProfileInfoHandler } from '@/apis/applicants/mocks/getApplicantProfile';
 import { closeRecruitmentMockHandler } from '@/apis/recruitments/mocks/closeRecruitmentMockHandler';
+import { requiredFieldCheckMockHandler } from '@/apis/recruitmentsDetail/mock/requiredFieldCheckHandler';
+import { postResumeMockHandler } from '@/apis/resume/postResume.mock';
 
 export const handlers = [
   ...recruitmentsMockHandler,
@@ -32,4 +34,6 @@
   ...contractsMockHandler,
   ...getProfileInfoHandler,
   ...closeRecruitmentMockHandler,
+  ...requiredFieldCheckMockHandler,
+  ...postResumeMockHandler,
 ];

src/pages/apply/applyguide/ApplyGuide.tsx

@@ -2,7 +2,7 @@ import Layout from '@/features/layout';
 import styled from '@emotion/styled';
 import { Typo, Button } from '@/components/common';
 import { ReactNode } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 const IndentText = ({ children }: { children: ReactNode }) => <Typo style={{ marginLeft: '20px' }}>{children}</Typo>;
@@ -15,9 +15,9 @@ const SpacingText = ({ children, bold }: { children: ReactNode; bold?: boolean }
 
 export default function ApplyGuide() {
   const nav = useNavigate();
-
+  const { recruitmentId } = useParams();
   const navigateToApply = () => {
-    nav('/apply');
+    nav(`/apply/${recruitmentId}`);
   };
   const { t } = useTranslation();
 

src/pages/apply/applypage/ApplyInput.tsx

@@ -2,6 +2,7 @@ import { Flex, Typo } from '@/components/common';
 import { Path, UseFormRegister, FieldErrors } from 'react-hook-form';
 import styled from '@emotion/styled';
 import type { ApplyInfoProps } from './useApplyHook';
+import { useTranslation } from 'react-i18next';
 
 type InputProps = {
   title: string;
@@ -14,16 +15,20 @@ type InputProps = {
   patternMessage?: string;
 };
 
-const ApplyInput = ({ title, label, register, required, errors, placeholder, pattern, patternMessage }: InputProps) => (
-  <Flex direction="column" gap={{ y: '10px' }}>
-    <Typo size="18px" bold={true}>
-      {title}
-    </Typo>
-    <StyledInput {...register(label, { required, pattern })} placeholder={placeholder} />
-    {errors[label]?.type === 'required' && <Warring>{title}을(를) 입력해주세요!</Warring>}
-    {errors[label]?.type === 'pattern' && <Warring>{patternMessage}</Warring>}
-  </Flex>
-);
+const ApplyInput = ({ title, label, register, required, errors, placeholder, pattern, patternMessage }: InputProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex direction="column" gap={{ y: '10px' }}>
+      <Typo size="18px" bold={true}>
+        {title}
+      </Typo>
+      <StyledInput {...register(label, { required, pattern })} placeholder={placeholder} />
+      {errors[label]?.type === 'required' && <Warring>{`${title}${t('apply.errors')}`}</Warring>}
+      {errors[label]?.type === 'pattern' && <Warring>{patternMessage}</Warring>}
+    </Flex>
+  );
+};
 
 const StyledInput = styled.input`
   width: 100%;

src/pages/apply/applypage/ApplyPage.tsx

@@ -4,10 +4,12 @@ import { Flex, Typo, Button, Modal } from '@/components/common';
 import { useApplyHook } from './useApplyHook';
 import ApplyInput from './ApplyInput';
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
 
 export default function ApplyPage() {
   const { toggle, isToggle, register, handleSubmit, onSubmit, handleApplySubmit, errors } = useApplyHook();
   const { t } = useTranslation();
+  const { recruitmentId } = useParams();
   return (
     <Layout>
       <Flex justifyContent="center" alignItems="center">
@@ -53,10 +55,12 @@ export default function ApplyPage() {
             <CustomBtn type="submit">{t('apply.submit')}</CustomBtn>
           </StyledForm>
         </ApplyCard>
-        {isToggle && (
+        {isToggle && recruitmentId && (
           <Modal
             textChildren={<ModalContainer>{t('apply.submitMent')}</ModalContainer>}
-            buttonChildren={<CustomBtn onClick={handleApplySubmit}>{t('apply.submit')}</CustomBtn>}
+            buttonChildren={
+              <CustomBtn onClick={() => handleApplySubmit(Number(recruitmentId))}>{t('apply.submit')}</CustomBtn>
+            }
             onClose={toggle}
           />
         )}

src/pages/apply/applypage/useApplyHook.tsx

@@ -25,11 +25,10 @@ export function useApplyHook() {
     toggle();
   };
 
-  const handleApplySubmit = () => {
+  const handleApplySubmit = (recruitmentId: number) => {
     if (formData) {
       const data = JSON.stringify(formData);
-      mutation.mutate({ data, recruitmentId: '1' });
-      alert('지원 완료!');
+      mutation.mutate({ data, recruitmentId });
       toggle();
     }
   };