Merge pull request #118 from kakao-tech-campus-2nd-step3/feat/#86

Feat/#86 메인페이지 필터 API 구현, Pagination 컴포넌트 추가 및 GoogleOAuth API 연동 작업

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`,
@@ -35,4 +39,5 @@ export const getDynamicAPIPath = {
     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/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/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),
+  });
+};

src/apis/home/queries/useFetchSlides.tsx → src/apis/home/hooks/queries/useFetchSlides.tsx

@@ -1,12 +1,13 @@
 import { AxiosError } from 'axios';
 import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
 import { clientInstance } from '@apis/instance';
-import { HOME_PATH } from '../path';
-import { SlidesResponse } from '../types/response';
+
+import { SlidesResponse } from '../../types/response';
 import { QUERY_KEYS } from './queryKeys';
+import { APIPath } from '@/apis/apiPath';
 
 const getSlides = async (): Promise<SlidesResponse[]> => {
-  const res = await clientInstance.get<SlidesResponse[]>(HOME_PATH.SLIDER);
+  const res = await clientInstance.get<SlidesResponse[]>(APIPath.getSlides);
   return res.data;
 };
 

src/apis/home/mocks/recruitmentsMockHandler.ts

@@ -1,8 +1,8 @@
+import { APIPath } from '@/apis/apiPath';
 import { http, HttpResponse } from 'msw';
-import { HOME_PATH } from '../path';
 
 export const recruitmentsMockHandler = [
-  http.get(HOME_PATH.RECRUITMENTS, () => HttpResponse.json(RECRUITMENTS_RESPONSE_DATA)),
+  http.get(APIPath.getRecruitments, () => HttpResponse.json(RECRUITMENTS_RESPONSE_DATA)),
 ];
 
 const RECRUITMENTS_RESPONSE_DATA = [

src/apis/home/mocks/slidesMockHandler.ts

@@ -1,7 +1,7 @@
+import { APIPath } from '@/apis/apiPath';
 import { http, HttpResponse } from 'msw';
-import { HOME_PATH } from '../path';
 
-export const slidesMockHandler = [http.get(HOME_PATH.SLIDER, () => HttpResponse.json(SLIDER_RESPONSE_DATA))];
+export const slidesMockHandler = [http.get(APIPath.getSlides, () => HttpResponse.json(SLIDER_RESPONSE_DATA))];
 
 const SLIDER_RESPONSE_DATA = [
   {

src/assets/translator/Auth/signInData.ts

@@ -0,0 +1,12 @@
+import { Languages } from '../Languages';
+
+export const signInData = {
+  [Languages.KO]: {
+    heading: '지금 바로 시작하세요. 🚀',
+    description: '안정적이고 투명한 고용 관계의 시작, 지금 바로 경험해보세요!',
+  },
+  [Languages.VE]: {
+    heading: 'Bắt đầu ngay bây giờ. 🚀',
+    description: 'Trải nghiệm sự khởi đầu của mối quan hệ lao động ổn định và minh bạch, ngay bây giờ!',
+  },
+};

src/assets/translator/Auth/signUpData.ts

@@ -0,0 +1,20 @@
+import { Languages } from '../Languages';
+
+export const signUpData = {
+  [Languages.KO]: {
+    heading: '가입자 정보 선택',
+    description: '대상에 해당하는 가입자 정보를 선택해주세요.',
+    buttons: {
+      employer: '사업주 가입',
+      employee: '근로자 가입',
+    },
+  },
+  [Languages.VE]: {
+    heading: 'Chọn thông tin người đăng ký',
+    description: 'Vui lòng chọn thông tin người đăng ký phù hợp với đối tượng.',
+    buttons: {
+      employer: 'Đăng ký chủ doanh nghiệp',
+      employee: 'Đăng ký người lao động',
+    },
+  },
+};

src/assets/translator/Auth/signUpModalData.ts

@@ -0,0 +1,32 @@
+import { Languages } from '../Languages';
+
+export const signUpModalData = {
+  [Languages.KO]: {
+    common: {
+      requiredMessage: '정보를 입력해주세요.',
+      laterMessage: '* 추후 마이페이지에서 수정 할 수 있습니다.',
+    },
+    detailMessage: {
+      employer: `이력서에 대한 정보가 필요해요.\n이력서 정보를 등록하러 가실까요?`,
+      employee: `사업장에 대한 정보가 필요해요.\n사업주 정보를 등록하러 가실까요?`,
+    },
+    buttons: {
+      submit: '등록할게요',
+      cancel: '괜찮아요',
+    },
+  },
+  [Languages.VE]: {
+    common: {
+      requiredMessage: 'Vui lòng nhập thông tin.',
+      laterMessage: '* Bạn có thể chỉnh sửa sau trong trang cá nhân.',
+    },
+    detailMessage: {
+      employer: `Cần thông tin về hồ sơ.\nBạn có muốn đăng ký thông tin hồ sơ không?`,
+      employee: `Cần thông tin về doanh nghiệp.\nBạn có muốn đăng ký thông tin doanh nghiệp không?`,
+    },
+    buttons: {
+      submit: 'Tôi sẽ đăng ký',
+      cancel: 'Không sao đâu',
+    },
+  },
+};

src/assets/translator/Home/homeData.ts

@@ -0,0 +1,34 @@
+import { Languages } from '../Languages';
+
+export const homeData = {
+  [Languages.KO]: {
+    greeting: {
+      heading: `사장님,\n 공고 등록은 하셨나요? 🤔`,
+      button: `등록하러 가기`,
+    },
+    recruitmentHeader: {
+      heading: '어떤 일자리를 구하시나요?',
+      description: '조건을 선택하고 원하는 일자리를 골라보세요.',
+    },
+    recruitmentFilter: {
+      all: '전체',
+      salary: '급여순',
+      latestRegistration: '최신등록순',
+    },
+  },
+  [Languages.VE]: {
+    greeting: {
+      heading: `Sếp ơi,\n đã đăng tin tuyển dụng chưa? 🤔`,
+      button: `Đi đăng ký`,
+    },
+    recruitmentHeader: {
+      heading: 'Bạn đang tìm công việc như thế nào?',
+      description: 'Hãy chọn điều kiện và tìm công việc bạn muốn.',
+    },
+    recruitmentFilter: {
+      all: 'Tất cả',
+      salary: 'Theo lương',
+      latestRegistration: 'Mới đăng ký',
+    },
+  },
+};

src/assets/translator/i18n.ts

@@ -1,6 +1,7 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { KO, VE } from '.';
+import { userLocalStorage } from '@/utils/storage';
 
 const resources = {
   ko: { translation: { ...KO } },
@@ -9,8 +10,8 @@ const resources = {
 
 i18n.use(initReactI18next).init({
   resources,
-  lng: 'ko',
-  fallbackLng: 've',
+  fallbackLng: 'ko',
+  lng: userLocalStorage.getLanguage() || 'ko',
   interpolation: {
     escapeValue: false,
   },