10주차 산출물 (#120)

* 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

* Feat/#74 사인 등록 페이지 구현 (#75)

* 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

* chore: react-signature-canvas 설치

* feat: 사인 등록 페이지 구현
- 사인을 이미지를 파일로 만든 후 서버로 전송합니다.
- 요청 로직도 같이 구현했습니다.
- 요청 완료 후 리다이렉트는 로그인 이후 구현

* feat: 사인 등록 페이지 api 연동(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]>

* Feat/#77 회사 등록 페이지 구현 (#78)

* "refactor: default function 컴포넌트로 변경"

* feat: 회사 등록 페이지 구현

* feat: 회사 등록 페이지 라우터 설정

* style: 회사 이미지 업로드기능 구현

* 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]>

* Feat/#69 API 연동 (#80)

* feat: 고용주 마이페이지 API 연결

* feat: 내 회사 페이지 API 연결

* feat: 지원자 목록 페이지 API 연결

* feat: 계약하기 팝업창 API 연결

* feat: 외국인 번호 및 비자 발급 일자 등록 페이지 API 연결

* chore: 의존성 재설치

* chore: 의존성 업데이트

* chore: CI 일관성 확보를 위해 의존성 업데이트

---------

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

* feat: 근로계약서 path 설정

* Feat/#81 구인 글 상세 화면 수정 및 API 연결 (#83)

* 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: 구인글 상세 정보 반환 페이지 수정
- 데이터 타입을 api 명세에 맞게 변경했습니다.
- recruitmentsDetail 컴포넌트의 스타일을 변경했습니다.
- 타입을 별도로 분리했습니다.

* feat: 구인글 상세화면 api 연동(msw)
- api 명세서에 맞게 요청 로직을 구현했습니다.
- 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]>

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

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

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

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

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

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

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

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

* Feat/#85 Header 컴포넌트 기능 추가 및 개선 (#87)

* feat: 로그인 여부 및 사용자 타입에 따라 Header 구성 변경

- 로그인 여부에 따라 로그인/로그아웃 버튼 표시
- 고용주인 경우 '채용공고 등록' 버튼 추가
- 로컬스토리지에서 사용자 정보를 가져와 반영

* feat: Header 네비게이션 기능 추가

- 로고 클릭 시 홈 화면으로 이동
- 로그인 버튼 클릭 시 로그인 페이지로 이동
- 채용공고 등록 버튼 클릭 시 구인글 업로드 페이지로 이동
- 프로필 이미지 클릭 시 마이페이지로 이동

* feat: 근로자 마이페이지 path 연결 완료

* feat: 구인글 업로드 path 연결 완료

* feat: 회사 등록 API 연결

* feat: i18n 번역 데이터 - 구인글 업로드, 근로자 마이페이지, 회사 등록 페이지

* refactor: 구인글 업로드 및 근로자 마이페이지 폴더구조 정리

* feat: 고용주 근로계약서 작성 API 연결 및 구인글 작성 API 폴더구조 정리

* feat: 근로자 근로계약서 불러오기 API 연결

* feat: 근로자 근로계약서 저장하기 API 연결

* feat: 근로계약서 다운로드 API 연결

* fix: 이전 merge된 코드에서 발생한 오류 및 잘못된 부분 수정

* chore: npm 패키지 업데이트

* refactor: 지원자 목록 페이지 경로 수정 및 불필요한 버튼 제거

- 내 회사 페이지에서 회사 수정 버튼 제거
- 지원자 목록 페이지에서 이력서 버튼 제거
- 지원자 목록 페이지 경로를 '/company/:companyId/recruitment/:recruitmentId/applicants'에서 'applicants/:companyId/:recruitmentId'로 변경

* refactor: 근로계약서 페이지 이동 시 applyId 전달 기능 추가

* refactor: 로컬 스토리지의 user 정보 변경에 따라 새로고침 없이 Header가 변경되도록 수정

* feat: 구인글 마감 API 연결

* refactor: 로컬 스토리지 접근 추상화

* feat: 번역 데이터 작성

* feat: 이력서 열람 모달 구현
- 모달이 열릴 때 resumeId와 applyId에 따라 다른 요청을 보내도록 구현했습니다.
- msw를 통해 mock 데이터를 받게 했습니다.
- ApplicantsTable.tsx가 수정 예정이므로, 수정 이후 코드를 변경해야합니다.

* refactor: 언어 관련 기능 및 UI 적용

- LanguageProvider context를 통해 동적 언어 변경
- LanguageFilter 컴포넌트에서 선택된 언어에 따라 언어가 변경되도록 구현

* feat: 자세히 보러가기 버튼 클릭 시 해당 구인글 상세 페이지로 이동

* refactor: 파일명 및 폴더 구조 개선

- features/applicants/ContractModal/ContractModal.mock.ts를 apis/applicants/mocks/foreigner.mock.ts로 변경
- pages/applicants/Applicants.mock.ts를 apis/applicants/mocks/applicants.mock.ts로 변경
- pages/myPage/employer/EmployerMyPage.mock.ts를 apis/companies/mocks/myCompanies.mock.ts로 변경

* refactor: 폴더 구조 개선

- features/applicants의 내용을 pages/applicants로 이동
- features/companies의 내용을 pages/myPage/employer로 이동
- features/recruitments의 내용을 pages/myCompany로 이동

* refactor: 페이지 이동 기능 함수 이름 변경

* fix: 로그인/로그아웃 시 기본 언어 설정 문제 해결

* refactor: 내 회사 및 지원자 목록 페이지에 로딩 상태 추가

* refactor: MyCompany 및 Applicants 페이지 분리

* fix: 폴더구조 정리 및 훅 이름 변경

* fix: 훅 이름 변경

* fix: default_inputs 컴포넌트 밖에 정의

* chore: i18n 라이브러리 설치

* refactor: 구인글 상세 페이지 path 및 path 타입 변경
- postId -> recruitmentId
- 타입 string -> number

* feat: i18n 세팅
- i18n 설정 파일을 생성했습니다.
- 헤더 컴포넌트에 언어 변경 로직을 추가했습니다.

* feat: 이력서 페이지 i18n 적용

* refactor: 번역 데이터 수정

- 고용주 마이페이지, 내 회사 페이지, 지원자 목록 페이지, 외국인 번호 및 비자 발급 일자 등록 페이지 번역 데이터 수정

* feat: 고용주 마이페이지 번역 기능 추가

* feat: 내 회사 페이지 번역 기능 추가

* feat: 지원자 목록 페이지 번역 기능 추가

* feat: 외국인 번호 및 비자 발급 일자 등록 페이지 번역 기능 추가

* feat: 계약하기 팝업창 번역 기능 추가

* feat: Header 번역 기능 추가

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

* fix: 대소문자 인식 문제 해결로 인한 경로 오류 수정

* refactor: 불필요한 코드 삭제 및 Header의 태블릿 환경 너비 조정

* feat: 고용주 마이페이지에 회사 등록 버튼 추가

* feat: Footer 컴포넌트 번역 데이터 적용

* feat: 구인글 상세화면 번역 데이터 적용

* feat: 지원 프로세스 번역 데이터 적용
- guideMent 파일을 삭제했습니다.

* feat: 지원서 페이지 번역 데이터 적용

* feat: 사인 등록 페이지 번역 데이터 적용

* feat: 번역데이터 구조 정리 및 근로계약서 번역데이터 작성

* feat: 번역데이터 적용 - 근로계약서, 회사등록, 근로자마이페이지

* feat: Input 컴포넌트에 labelstyle props 추가

* feat: NoticeRequestData type파일로 이동 및 PostNotice 페이지 입력값 수정

* Feat/#108 번역데이터 적용 및 Input 컴포넌트 수정 (#110)

* feat: 근로계약서 다운로드 API 연결

* fix: 폴더구조 정리 및 훅 이름 변경

* fix: 훅 이름 변경

* fix: default_inputs 컴포넌트 밖에 정의

* feat: 번역데이터 구조 정리 및 근로계약서 번역데이터 작성

* feat: add prev path

* feat: translate to auth, home pages

* fix: 근로자 마이페이지 프로필 수정 버튼 삭제

* feat: 구인글 등록 페이지 번역데이터 적용

* style: 근로계약서 서명버튼 스타일 변경

* feat: 구인글 상세 페이지 비자,이력서,외국인 번호 등록 여부 조회 구현
- 추후 고용주 구별 로직을 구현해야합니다.
- 등록되지 않은 값이 있으면 모달을 통해 해당 값을 알려줍니다.

* feat: 지원서 페이지 연결
- path parameter를 변경했습니다.
- 제출 성공 시 홈페이지로 리다이렉트 됩니다.
- 구인글 상세 -> 지원 가이드 -> 지원서 페이지 순서로 연결했습니다.

* feat: 이력서 제출 성공 시 마이페이지 리다이렉트 구현

* refactor: 지원서 페이지 번역 추가

* feat: 사인 등록 성공 시 리다이렉트 구현
- localstorage 값에 따라 근로자 또는 고용주 마이페이지로 리다이렉트

* feat: 근로자 마이페이지 인삿말 추가 및 입력 오류 수정

* fix: 입력 오류 수정

* feat: 구인글 상세 페이지 고용주 버튼 클릭 금지 구현
- 고용주는 지원하기 버튼을 누를 수 없습니다.

* fix: 근로계약서 입력 오류 수정

* fix: handlers.ts import 오류 수정

* feat: add Pagination component

* refactor: move to hooks

* fix: change select action type to optional

* feat: 고용주 마이페이지에 사용자 이름 표시

* feat: add useRecruitmentData hooks

* feat: success GoogleOAuth API

* refactor: RecruitDetail storybook 오류 수정 (#119)

* docs: update README.md

---------

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

README.md

@@ -1,26 +1 @@
 # 🍪 내가 먹은 쿠키 - 18조 FE
-
-## 🙋‍♂️ 9주차 코드리뷰 질문
-
-컴포넌트에는 개발하면서 페이지 내에서 임시로 만들어 사용하는 컴포넌트가 있고, 공통 컴포넌트로 개발해둔 것이 있고, 라이브러리에서 가져와서 사용하는 컴포넌트가 있습니다. 그런데 이런 컴포넌트를 필요에 따라 혼용해서 사용하니까 헷갈리기도 합니다. 이런 컴포넌트 사용에 있어서 지키면 좋을 규칙같은 게 있을까요?
-
-예를 들어 아래에서 Section은 제가 해당 컴포넌트 내에서만 사용하려고 만든 컴포넌트이고, Typo는 공통컴포넌트로 이전에 개발한 컴포넌트입니다.
-```tsx
-        <Section>
-          <Typo bold element="h3" size="20px" style={{ marginBottom: '24px' }}>
-            내가 지원한 공고
-          </Typo>
-          {myRecruitList && <MyRecruitList myRecruitList={myRecruitList} />}
-        </Section>
-      </InnerContainer>
-    </Layout>
-  );
-}
-
-const Section = styled.div`
-  width: 100%;
-  direction: column;
-  align-items: center;
-  margin-bottom: 52px;
-`;
-

package.json

@@ -35,11 +35,14 @@
     "axios": "^1.7.7",
     "buffer": "^6.0.3",
     "csstype": "^3.1.3",
+    "i18next": "^23.16.4",
     "jquery": "^3.7.1",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react-hook-form": "^7.53.0",
+    "react-i18next": "^15.1.0",
     "react-router-dom": "^6.26.2",
     "react-signature-canvas": "^1.0.6",
     "zustand": "^4.5.5"

src/App.tsx

@@ -1,5 +1,6 @@
 import AppProviders from '@components/providers/index.provider';
 import { Outlet } from 'react-router-dom';
+import '@/assets/translator/i18n';
 
 function App() {
   return (

src/apis/apiPath.ts

@@ -1,7 +1,11 @@
 const BASE_URL = '/api';
 
 export const APIPath = {
+  postRegister: `${BASE_URL}/register`,
+  postOAuth: `${BASE_URL}/oauth`,
   postNotice: `${BASE_URL}/recruitments`,
+  getSlides: `${BASE_URL}/slides`,
+  getRecruitments: `${BASE_URL}/recruitments/:filter`,
   allApplication: `${BASE_URL}/application/all`,
   signEmployeeContract: `${BASE_URL}/contract/employee`,
   makeContract: `${BASE_URL}/contract`,
@@ -14,16 +18,26 @@ export const APIPath = {
   getForeigner: `${BASE_URL}/visa/:userId`,
   registerVisa: `${BASE_URL}/visa`,
   registerCompany: `${BASE_URL}/company`,
-  apply: '/api/application/',
-  recruitmentsDetail: '/api/recruitments/:postId',
+  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) =>
     APIPath.getMyApplicants.replace(':recruitmentId', recruitmentId.toString()),
   getForeigner: (userId: number) => APIPath.getForeigner.replace(':userId', userId.toString()),
-  recruitmentsDetail: (postId: string) => APIPath.recruitmentsDetail.replace(':postId', postId.toString()),
+  recruitmentsDetail: (postId: number) => APIPath.recruitmentsDetail.replace(':recruitmentId', postId.toString()),
+  getApplicantProfile: (resumeId: number, applyId: number) =>
+    APIPath.getApplicantProfile.replace(':resumeId', resumeId.toString()).replace(':applyId', applyId.toString()),
+  closeRecruitment: (recruitmentId: number) =>
+    APIPath.closeRecruitment.replace(':recruitmentId', recruitmentId.toString()),
+  getRecruitments: (filter: string) => APIPath.getRecruitments.replace(':filter', filter),
 };

src/apis/applicants/hooks/useGetProfileInfo.tsx

@@ -0,0 +1,19 @@
+import { getDynamicAPIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useQuery } from '@tanstack/react-query';
+
+type IdProps = {
+  resumeId: number;
+  applyId: number;
+};
+
+export const getProfileInfo = async ({ resumeId, applyId }: IdProps) => {
+  const response = await clientInstance.get(getDynamicAPIPath.getApplicantProfile(resumeId, applyId));
+  return response.data;
+};
+
+export const useGetProfileInfo = ({ resumeId, applyId }: IdProps) =>
+  useQuery({
+    queryKey: [getDynamicAPIPath.getApplicantProfile(resumeId, applyId)],
+    queryFn: () => getProfileInfo({ resumeId, applyId }),
+  });

src/pages/applicants/Applicants.mock.ts → src/apis/applicants/mocks/applicants.mock.ts

@@ -4,7 +4,7 @@ export const recruitment = {
   recruitmentId: 1,
   image: CompanyImage,
   koreanTitle: '쿠팡 유성점에서 아르바이트 모집합니다.',
-  vietnameseTitle: '',
+  vietnameseTitle: 'Coupang đang tuyển dụng làm việc bán thời gian tại chi nhánh Yuseong.',
   companyName: '쿠팡 유성점',
   salary: 50000000,
   workHours: '',

src/apis/applicants/mocks/foreignerMockHandler.ts

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

src/apis/applicants/mocks/getApplicantProfile.ts

@@ -0,0 +1,18 @@
+import { http, HttpResponse } from 'msw';
+import { APIPath } from '@/apis/apiPath';
+
+const mockData = {
+  applicantName: '임세빈',
+  address: '충남대학교',
+  phoneNumber: '010-1111-1111',
+  career: `카페에서 1년 알바했습니다. 클럽에서 30년 근무했습니다.`,
+  koreanLanguageLevel: '고급',
+  introduction: `맡은 업무에 항상 최선을 다하는 인재입니다. 안녕하세용안녕하세용안녕하세용안녕하세용안녕하세용안녕하세용`,
+  motivation: '돈',
+};
+
+export const getProfileInfoHandler = [
+  http.get(APIPath.getApplicantProfile, () => {
+    return HttpResponse.json(mockData);
+  }),
+];

src/apis/applicants/mocks/myApplicantsMockHandler.ts

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

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/auth/hooks/mutations/useGoogleOAuthMutation.tsx

@@ -0,0 +1,30 @@
+import { clientInstance } from '@apis/instance';
+import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { OAuthRequest } from '../../types/request';
+import { OAuthResponse } from '../../types/response';
+import { APIPath } from '@/apis/apiPath';
+
+const postOAuth = async ({ code }: OAuthRequest): Promise<OAuthResponse> => {
+  const res = await clientInstance.post(APIPath.postOAuth, { code });
+
+  const authorizationHeader = res.headers['authorization'];
+  const accessToken = authorizationHeader.replace('Bearer ', '');
+
+  if (!accessToken) {
+    throw new Error('Authorization header is missing in the response');
+  }
+
+  return {
+    accessToken,
+    type: res.data.type,
+    profileImage: res.data.profileImage,
+    name: res.data.name,
+  };
+};
+
+export function useGoogleOAuthMutation() {
+  return useMutation<OAuthResponse, AxiosError, OAuthRequest>({
+    mutationFn: postOAuth,
+  });
+}

src/apis/auth/mutations/useRegister.tsx → src/apis/auth/hooks/mutations/useRegisterMutation.tsx

@@ -1,16 +1,16 @@
 import { clientInstance } from '@apis/instance';
 import { useMutation, UseMutationResult } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { AUTH_PATH } from '../path';
-import { RegisterRequest } from '../types/request';
-import { RegisterResponse } from '../types/response';
+import { RegisterRequest } from '../../types/request';
+import { RegisterResponse } from '../../types/response';
+import { APIPath } from '@/apis/apiPath';
 
 const postRegister = async ({ type }: RegisterRequest): Promise<RegisterResponse> => {
-  const res = await clientInstance.post(AUTH_PATH.REGISTER, { type });
+  const res = await clientInstance.post(APIPath.postRegister, { type });
   return res.data;
 };
 
-export const useRegister = (): UseMutationResult<RegisterResponse, AxiosError, RegisterRequest> => {
+export const useRegisterMutation = (): UseMutationResult<RegisterResponse, AxiosError, RegisterRequest> => {
   return useMutation<RegisterResponse, AxiosError, RegisterRequest>({
     mutationFn: postRegister,
   });

src/apis/auth/types/request.ts

@@ -1,5 +1,5 @@
 export interface OAuthRequest {
-  token: string;
+  code: string;
 }
 
 export interface RegisterRequest {

src/apis/auth/types/response.ts

@@ -2,6 +2,7 @@ export interface OAuthResponse {
   accessToken: string;
   type: 'first' | 'employee' | 'employer';
   profileImage: string;
+  name: string;
 }
 
 export interface RegisterResponse {

src/apis/companies/mocks/myCompaniesMockHandler.ts

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

src/apis/contract/hooks/useGetContractImg.tsx

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

src/apis/home/hooks/queries/useFetchRecruitments.tsx

@@ -0,0 +1,22 @@
+import { AxiosError } from 'axios';
+import { RecruitmentResponse } from '../../types/response';
+import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
+import { clientInstance } from '@apis/instance';
+import { QUERY_KEYS } from './queryKeys';
+import { getDynamicAPIPath } from '@/apis/apiPath';
+
+const getRecruitments = async (filter: string, page: number): Promise<RecruitmentResponse[]> => {
+  const url = `${getDynamicAPIPath.getRecruitments(filter)}?page=${page}`;
+  const res = await clientInstance.get<RecruitmentResponse[]>(url);
+  return res.data;
+};
+
+export const useFetchRecruitments = (
+  filter: string,
+  page: number,
+): UseSuspenseQueryResult<RecruitmentResponse[], AxiosError> => {
+  return useSuspenseQuery<RecruitmentResponse[], AxiosError>({
+    queryKey: [QUERY_KEYS.RECRUITMENTS, filter, page],
+    queryFn: () => getRecruitments(filter, page),
+  });
+};