Merge pull request #99 from KimJi-An/feat/#88

Feat/#88, #95, #96 구인글 마감 API 연동, 번역 데이터 작성 및 코드 리뷰 리팩토링

package.json

@@ -36,6 +36,7 @@
     "buffer": "^6.0.3",
     "csstype": "^3.1.3",
     "jquery": "^3.7.1",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",

src/apis/apiPath.ts

@@ -16,6 +16,7 @@ export const APIPath = {
   registerCompany: `${BASE_URL}/company`,
   apply: '/api/application/',
   recruitmentsDetail: '/api/recruitments/:postId',
+  closeRecruitment: `${BASE_URL}/recruitment/hiringClose/:recruitmentId`,
 };
 
 export const getDynamicAPIPath = {
@@ -26,4 +27,6 @@ export const getDynamicAPIPath = {
     APIPath.getMyApplicants.replace(':recruitmentId', recruitmentId.toString()),
   getForeigner: (userId: number) => APIPath.getForeigner.replace(':userId', userId.toString()),
   recruitmentsDetail: (postId: string) => APIPath.recruitmentsDetail.replace(':postId', postId.toString()),
+  closeRecruitment: (recruitmentId: number) =>
+    APIPath.closeRecruitment.replace(':recruitmentId', recruitmentId.toString()),
 };

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/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/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/recruitments/hooks/useCloseRecruitment.ts

@@ -0,0 +1,13 @@
+import { getDynamicAPIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useMutation } from '@tanstack/react-query';
+
+export const closeRecruitment = async (recruitmentId: number) => {
+  const response = await clientInstance.post(getDynamicAPIPath.closeRecruitment(recruitmentId));
+  return response.data;
+};
+
+export const useCloseRecruitment = () =>
+  useMutation({
+    mutationFn: closeRecruitment,
+  });

src/apis/recruitments/mocks/closeRecruitmentMockHandler.ts

@@ -0,0 +1,14 @@
+import { APIPath } from '@/apis/apiPath';
+import { http, HttpResponse } from 'msw';
+
+export const closeRecruitmentMockHandler = [
+  http.post(APIPath.closeRecruitment, async ({ params }) => {
+    const { recruitmentId } = params;
+
+    if (!recruitmentId) {
+      return HttpResponse.json({ message: '잘못된 요청입니다.' }, { status: 400 });
+    }
+
+    return HttpResponse.json({ message: '마감 완료' }, { status: 200 });
+  }),
+];

src/apis/recruitments/mocks/myRecruitmentsMockHandler.ts

@@ -1,5 +1,5 @@
 import { APIPath } from '@/apis/apiPath';
-import { recruitmentList } from '@/pages/myCompany/MyCompany.mock';
+import { recruitmentList } from '@/pages/myCompanyPage/MyCompany.mock';
 import { http, HttpResponse } from 'msw';
 
 export const myRecruitmentsMockHandler = [

src/assets/translator/Applicants/ko.ts

@@ -0,0 +1,14 @@
+export const Applicants = {
+  APPLICANT_LIST: '지원자 목록',
+  TOTAL_APPLICANTS: (count: number) => `총 ${count}명`,
+  VIEW_DETAILS: '자세히 보러가기',
+  TABLE_HEADERS: {
+    NAME: '이름',
+    NATION: '국적',
+    KOREAN_LANGUAGE_LEVEL: '한국어 실력',
+  },
+  BUTTONS: {
+    VIEW_RESUME: '지원서',
+    CREATE_CONTRACT: '계약하기',
+  },
+};

src/assets/translator/Applicants/ve.ts

@@ -0,0 +1,14 @@
+export const Applicants = {
+  APPLICANT_LIST: 'Danh sách ứng viên',
+  TOTAL_APPLICANTS: (count: number) => `Tổng cộng ${count} người`,
+  VIEW_DETAILS: 'Xem chi tiết',
+  TABLE_HEADERS: {
+    NAME: 'Tên',
+    NATION: 'Quốc tịch',
+    KOREAN_LANGUAGE_LEVEL: 'Trình độ tiếng Hàn',
+  },
+  BUTTONS: {
+    VIEW_RESUME: 'Hồ sơ ứng tuyển',
+    CREATE_CONTRACT: 'Ký hợp đồng',
+  },
+};

src/assets/translator/EmployerMyPage/ko.ts

@@ -0,0 +1,7 @@
+export const EmployerMyPage = {
+  GREETING: '사장님, 안녕하세요!',
+  REGISTER_SIGN: '사인 등록',
+  MY_COMPANIES: '내 회사',
+  TOTAL_COMPANIES: (count: number) => `총 ${count} 곳`,
+  COMPANY_INFO: '회사 정보',
+};

src/assets/translator/EmployerMyPage/ve.ts

@@ -0,0 +1,7 @@
+export const EmployerMyPage = {
+  GREETING: 'Chủ doanh nghiệp, xin chào!',
+  REGISTER_SIGN: 'Đăng ký chữ ký',
+  MY_COMPANIES: 'Công ty của tôi',
+  TOTAL_COMPANIES: (count: number) => `Tổng cộng ${count} công ty`,
+  COMPANY_INFO: 'Thông tin công ty',
+};

src/assets/translator/MyCompany/ko.ts

@@ -0,0 +1,13 @@
+export const MyCompany = {
+  MY_RECRUITMENTS: '내 공고글',
+  TOTAL_RECRUITMENTS: (count: number) => `총 ${count}건`,
+  TABLE_HEADERS: {
+    LOCATION: '근무지',
+    TITLE: '공고 제목',
+  },
+  BUTTONS: {
+    VIEW_APPLICANTS: '지원자 보러가기',
+    CLOSE_RECRUITMENT: '마감하기',
+    CLOSED_RECRUITMENT: '마감완료',
+  },
+};

src/assets/translator/MyCompany/ve.ts

@@ -0,0 +1,13 @@
+export const MyCompany = {
+  MY_RECRUITMENTS: 'Thông báo tuyển dụng của tôi',
+  TOTAL_RECRUITMENTS: (count: number) => `Tổng cộng ${count} bài`,
+  TABLE_HEADERS: {
+    LOCATION: 'Nơi làm việc',
+    TITLE: 'Tiêu đề thông báo',
+  },
+  BUTTONS: {
+    VIEW_APPLICANTS: 'Xem người ứng tuyển',
+    CLOSE_RECRUITMENT: 'Đóng tuyển dụng',
+    CLOSED_RECRUITMENT: 'Đã đóng tuyển dụng',
+  },
+};

src/assets/translator/RegisterVisa/ko.ts

@@ -0,0 +1,8 @@
+export const RegisterVisa = {
+  TITLE: '외국인 번호 및 비자 발급 일자 등록',
+  LABELS: {
+    FOREIGNER_NUMBER: '외국인 번호',
+    VISA_GENERATE_DATE: '비자 발급 일자',
+  },
+  SUBMIT: '등록하기',
+};

src/assets/translator/RegisterVisa/ve.ts

@@ -0,0 +1,8 @@
+export const RegisterVisa = {
+  TITLE: 'Đăng ký số người nước ngoài và ngày cấp thị thực',
+  LABELS: {
+    FOREIGNER_NUMBER: 'Số người nước ngoài',
+    VISA_GENERATE_DATE: 'Ngày cấp thị thực',
+  },
+  SUBMIT: 'Đăng ký',
+};

src/components/providers/Language.provider.tsx

@@ -0,0 +1,42 @@
+import { userLocalStorage } from '@/utils/storage';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+
+type LanguageContextType = {
+  language: string;
+  setLanguage: (language: string) => void;
+};
+
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
+
+export const LanguageProvider = ({ children }: { children: ReactNode }) => {
+  const [language, setLanguage] = useState<string>(() => userLocalStorage.getLanguage() || 'korean');
+
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === 'language') {
+        const newLanguage = event.newValue ? JSON.parse(event.newValue) : 'korean';
+        setLanguage(newLanguage);
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => window.removeEventListener('storage', handleStorageChange);
+  }, []);
+
+  const updateLanguage = (newLanguage: string) => {
+    userLocalStorage.setLanguage(newLanguage);
+    setLanguage(newLanguage);
+  };
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage: updateLanguage }}>{children}</LanguageContext.Provider>
+  );
+};
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  if (!context) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+};

src/components/providers/User.provider.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+import { UserData } from '@/types';
+import { userLocalStorage } from '@/utils/storage';
+
+type UserContextType = {
+  user: UserData | undefined;
+  setUser: React.Dispatch<React.SetStateAction<UserData | undefined>>;
+};
+
+export const UserContext = createContext<UserContextType | undefined>(undefined);
+
+export const UserProvider = ({ children }: { children: ReactNode }) => {
+  const [user, setUser] = useState<UserData | undefined>(() => userLocalStorage.getUser());
+
+  useEffect(() => {
+    const changeUser = () => {
+      const updatedUser = userLocalStorage.getUser();
+      setUser(updatedUser);
+    };
+
+    window.addEventListener('storage', changeUser);
+
+    return () => window.removeEventListener('storage', changeUser);
+  }, []);
+
+  return <UserContext.Provider value={{ user, setUser }}>{children}</UserContext.Provider>;
+};
+
+export const useUser = () => {
+  const context = useContext(UserContext);
+  if (!context) {
+    throw new Error('useUser must be used within a UserProvider');
+  }
+  return context;
+};

src/components/providers/index.provider.tsx

@@ -4,15 +4,21 @@ import ModalsProvider from './Modals.provider';
 import Modals from '../common/Modal/Modals';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from '@/apis/instance';
+import { UserProvider } from './User.provider';
+import { LanguageProvider } from './Language.provider';
 
 export default function AppProviders({ children }: { children: ReactNode }) {
   return (
     <GlobalStylesProvider>
       <QueryClientProvider client={queryClient}>
-        <ModalsProvider>
-          {children}
-          <Modals />
-        </ModalsProvider>
+        <LanguageProvider>
+          <ModalsProvider>
+            <UserProvider>
+              {children}
+              <Modals />
+            </UserProvider>
+          </ModalsProvider>
+        </LanguageProvider>
       </QueryClientProvider>
     </GlobalStylesProvider>
   );

src/features/layout/Header/components/LanguageFilter.tsx

@@ -1,8 +1,13 @@
 import theme from '@/assets/theme';
 import { Select, Icon, List } from '@/components/common';
-import useGlobalSelect from '@/components/common/Select/hooks/useGlobalSelect';
+import { useLanguage } from '@/components/providers/Language.provider';
 import { responsiveStyle } from '@/utils/responsive';
 
+type LanguageOptionType = {
+  value: string;
+  text: string;
+};
+
 const triggerStyle = {
   minWidth: '80px',
   fontSize: '16px',
@@ -30,18 +35,22 @@ const languageOptions = [
 ];
 
 export default function LanguageFilter() {
-  const { selectedOption, handleSelect } = useGlobalSelect(languageOptions[0]);
+  const { language, setLanguage } = useLanguage();
+
+  const changeLanguage = (option: LanguageOptionType) => {
+    setLanguage(option.value);
+  };
 
   return (
     <Select.Root>
       <Select.Trigger icon={<Icon.Arrow.DownBlue />} css={triggerStyle}>
-        {selectedOption.text}
+        {languageOptions.find((opt) => opt.value === language)?.text}
       </Select.Trigger>
       <Select.Content>
         <List
           items={languageOptions}
           renderItem={(option) => (
-            <Select.Option key={option.value} value={option.value} onClick={() => handleSelect(option)}>
+            <Select.Option key={option.value} value={option.value} onClick={() => changeLanguage(option)}>
               {option.text}
             </Select.Option>
           )}