Feat/#76 지원서 페이지 API 연동(msw) (#79)

* 7, 8주차 산출물 (#70)

* Update README.md

* Refactor/#47 6주차 코드리뷰 리팩토링 (#48)

* refactor: separate style and prop-related constants

* refactor: remove lambda function

* refactor: restructure SignUp and RecruitmentHeader components

* feat: separate Button and Text component of SignIn

* feat: add SignUpText component

* refactor: remove auth page's barrel file

* Feat/#42, #43 지원자 목록 페이지 및 팝업 구현 (#51)

* feat: 지원자 목록 페이지 구현

* feat: 지원자 목록 페이지 스토리북 생성

* refactor: ApplicantList 테이블 컴포넌트 분리

* feat: Applicants path 설정

* feat: 지원자 목록 페이지에 계약 관련 팝업 추가

* fix: 이미지 경로 수정 및 불필요한 태그 제거

* refactor: MyAccount 페이지 구조 변경 및 CompanyRecruitments로 파일명 변경

- 기존 MyAccount 페이지를 CompanyRecruitments로 이름 변경
- 새로운 MyAccount 페이지 구현을 위해 기존 페이지의 역할 변경

* refactor: visaRegistration 관련 파일 구조 변경

- visaRegistration 페이지를 src/pages/employee에서 src/pages로 이동
- 관련 기능을 src/features/employee/visaRegistration에서 src/features/visaRegistration으로 이동

* feat: Table 컴포넌트 구현

* feat: 변경된 고용주 마이페이지 구현

* refactor: 회사 관련 공통 기능을 features/companies로 이동 및 CompanyInfo 수정

* refactor: CompanyRecruitments 페이지 이름을 MyCompany로 변경

* feat: EmployerMyAccount path 설정

* refactor: 불필요한 코드 삭제 및 폴더명 일관성 있게 변경

* Feat/#50 Select 컴포넌트 구현 (#53)

* feat: add Select component

* feat: add useGlobalSelect and useSelect

* refactor: move directory

* refactor: EmployerMyAccount 페이지에서 mock 데이터 분리 및 코드 정리

* refactor: visaRegistration 및 applicants 페이지의 mock, style 파일 분리

* refactor: RecruitmentList 컴포넌트 리팩토링 및 RecruitmentsTable 분리

* refactor: CompanyInfo 반응형 디자인 수정

* refactor: 외국인 번호 및 비자 발급 일자 등록 페이지 스타일 수정

* refactor: Header 컴포넌트의 닉네임 버튼을 사용자 프로필 이미지로 변경

* Refactor/#54 Modal 컴포넌트 재설계 (#55)

* chore: add loadable component package

* feat: implement modal management system with context and dynamic loading

* refactor: 코드 리뷰 반영

- formValid를 useMemo로 관리
- validateForeignerNumber 함수를 별도 파일로 분리

* Feat/#56 메인 페이지 API 연동 (#57)

* chore: setting mockServiceWorker

* feat: add useFetchRecruitments hooks and recruitmentsMockHandler

* feat: add useFetchSlides hooks and slidesMockHandler

* feat: add Spinner component

* feat: add AsyncBoundary component

* chore: add msw-storybook-addon

* Feat/#58 OAuth 구글 로그인 구현 (#59)

* feat: add useGoogleOAuth hook

* feat: add Loading page

* chore: add MemoryRouter to decorators

* Feat/#60 가입자 정보 선택 API 연동 (#61)

* feat: add useRegister hook

* fix: change role prop value

* style: Button 컴포넌트 Props 이름변경 theme->design

* feat: 근로자마이페이지 아이콘 설정

* feat: 근로자 마이페이지 구현

* feat: 근로자마이페이지 라우터 설정

* style: Button props 이름 변경

* feat: msw 세팅 및 API path 작성

* feat: 구인글 등록 API 연결 및 msw 세팅

* fix: 구인글 업로드 mock 핸들러 수정

* feat: 근로자 마이페이지 mock 핸들러 추가

* feat: 근로자 마이페이지 API 연결 및 msw 설정

* feat: 이력서 페이지 구현 (#63)

- react-hook-form 을 사용했습니다.
- api 명세서에 맞게 이름,주소,번호,경력,자기소개,한국어실력을 필수값으로 받게 했습니다.

Co-authored-by: kangkibong <[email protected]>

* fix: change button prop

* feat: add GitHub Actions workflow for linting and type checking

---------

Co-authored-by: yimsebin <[email protected]>
Co-authored-by: Kim Jian <[email protected]>
Co-authored-by: KimJi-An <[email protected]>
Co-authored-by: LEE YONGJIN <[email protected]>

* docs: update README.md

* docs: update README.md

* docs: update README.md

* refactor: 지원서 페이지 버튼 수정
- 버튼 스타일을 수정했습니다.

* feat: 지원서 페이지 api 연동(msw)
- recruitmentId를 Path Parameter로 사용했습니다.
- msw로 성공 요청만 받을 수 있게 했습니다.

---------

Co-authored-by: kangkibong <[email protected]>
Co-authored-by: yimsebin <[email protected]>
Co-authored-by: Kim Jian <[email protected]>
Co-authored-by: KimJi-An <[email protected]>

src/apis/apiPath.ts

@@ -5,6 +5,7 @@ export const APIPath = {
   makeEmployerContract: '/api/categories',
   downloadContract: '/api/contract/:applyId/download',
   registerSign: '/api/sign',
+  apply: '/api/application/',
 };
 
 export const getDynamicAPIPath = {

src/apis/apply/postApply.mock.ts

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

src/apis/apply/useApplyHook.tsx

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

src/mocks/handlers.ts

@@ -3,11 +3,13 @@ import { slidesMockHandler } from '@/apis/home/mocks/slidesMockHandler';
 import { EmployeePageMockHandler } from '@/apis/employee/mock/getMyApplication.mock';
 import { noticesMockHandler } from '@/apis/employer/mock/postNotice.mock';
 import { registerSignMockHandler } from '@/apis/registerSign/registerSign.mock';
+import { postApplyMockHandler } from '@apis/apply/postApply.mock';
 
 export const handlers = [
   ...recruitmentsMockHandler,
   ...slidesMockHandler,
   ...noticesMockHandler,
   ...EmployeePageMockHandler,
   ...registerSignMockHandler,
+  ...postApplyMockHandler,
 ];

src/pages/apply/applyguide/ApplyGuide.tsx

@@ -4,6 +4,7 @@ import { Typo } from '@/components/common';
 import { ReactNode } from 'react';
 import { guideMent } from './guideMent';
 import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/common';
 
 const IndentText = ({ children }: { children: ReactNode }) => <Typo style={{ marginLeft: '20px' }}>{children}</Typo>;
 
@@ -76,20 +77,22 @@ const TextArea = styled.div`
   gap: 10px;
 `;
 
-const CustomBtn = styled.button`
+const CustomBtn = styled(Button)`
   width: 220px;
   border-radius: 4px;
   background-color: #0a65cc;
   color: #fff;
   font-size: 16px;
   padding: 20px;
-  margin-top: 20px;
+  margin: 20px;
+
+  width: 220px;
+  color: white;
+  border: 1px solid #e4e5e8;
   &:hover {
-    background-color: #fff;
+    border: '2px solid #0A65CC';
+    background: white;
     color: #0a65cc;
-    border: 1px solid #0a65cc;
-    padding: 19px;
-    cursor: pointer;
-    transition: 'background-color 200ms';
   }
+  align-self: center;
 `;

src/pages/apply/applypage/ApplyPage.tsx

@@ -85,11 +85,13 @@ const ApplyCard = styled.div`
 `;
 
 const CustomBtn = styled(Button)`
-  background-color: #0a65cc;
-  height: 50px;
-  color: #fff;
+  background: #0a65cc;
+  color: white;
+  border: 1px solid #e4e5e8;
   &:hover {
-    opacity: 0.7;
+    border: '2px solid #0A65CC';
+    background: white;
+    color: #0a65cc;
   }
   align-self: center;
 `;

src/pages/apply/applypage/useApplyHook.tsx

@@ -1,6 +1,7 @@
 import useToggle from '@/hooks/useToggle';
 import { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
+import { FetchApply } from '@/apis/apply/useApplyHook';
 
 export interface ApplyInfoProps {
   name: string;
@@ -18,15 +19,16 @@ export function useApplyHook() {
     formState: { errors },
   } = useForm<ApplyInfoProps>();
 
+  const mutation = FetchApply();
   const onSubmit: SubmitHandler<ApplyInfoProps> = (data) => {
     setFormData(data);
     toggle();
   };
 
   const handleApplySubmit = () => {
-    // 추후 post 요청 여기서 하면 됨!.!
     if (formData) {
-      console.log(formData);
+      const data = JSON.stringify(formData);
+      mutation.mutate({ data, recruitmentId: '1' });
       alert('지원 완료!');
       toggle();
     }