Merge pull request #105 from KimJi-An/refactor/#102

Refactor/#102, #106 번역 데이터 수정 및 적용, 회사 등록 버튼 추가

src/assets/translator/Applicants/ContractModal/contractModalData.ts

@@ -0,0 +1,35 @@
+import { Languages } from '../../Languages';
+
+export const contractModalData = {
+  [Languages.KO]: {
+    title: '고용주님께 드리는 주의사항',
+    warning: '불법 체류자를 고용할 시 최대 200만원의 범칙금이 부과될 수 있습니다.',
+    applicant_info: '지원자 정보',
+    foreigner_number: '외국인 등록 번호',
+    visa_generate_date: '비자 발급 일자',
+    message: {
+      part1: '이 지원자의 정보를 활용하여 <0>Hi Korea</0>에서 지원자에 대한 불법 체류 여부를 검증할 수 있습니다.',
+      part2: '안전한 고용을 위해 확인 후 진행하는 것을 권장합니다.',
+    },
+    buttons: {
+      confirm: '확인하였습니다.',
+      cancel: '취소',
+    },
+  },
+  [Languages.VE]: {
+    title: 'Lời khuyên dành cho nhà tuyển dụng',
+    warning: 'Nếu thuê người lưu trú bất hợp pháp, bạn có thể bị phạt tối đa 2 triệu won.',
+    applicant_info: 'Thông tin ứng viên',
+    foreigner_number: 'Số đăng ký người nước ngoài',
+    visa_generate_date: 'Ngày cấp visa',
+    message: {
+      part1:
+        'Bạn có thể sử dụng thông tin của người này để kiểm tra tình trạng cư trú bất hợp pháp tại <0>Hi Korea</0>.',
+      part2: 'Chúng tôi khuyến nghị bạn kiểm tra kỹ trước khi tiến hành để đảm bảo an toàn trong việc tuyển dụng.',
+    },
+    buttons: {
+      confirm: 'Tôi đã hiểu',
+      cancel: 'Hủy bỏ',
+    },
+  },
+};

src/assets/translator/Applicants/applicantsData.ts

@@ -0,0 +1,34 @@
+import { Languages } from '../Languages';
+
+export const applicantsData = {
+  [Languages.KO]: {
+    salary: '시급',
+    applicant_list: '지원자 목록',
+    total_applicants: '총 {{count}}명',
+    view_details: '자세히 보러가기',
+    table_headers: {
+      name: '이름',
+      nation: '국적',
+      korean_language_level: '한국어 실력',
+    },
+    buttons: {
+      view_resume: '지원서',
+      create_contract: '계약하기',
+    },
+  },
+  [Languages.VE]: {
+    salary: 'Lương theo giờ',
+    applicant_list: 'Danh sách ứng viên',
+    total_applicants: '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/employerMyPageData.ts

@@ -0,0 +1,20 @@
+import { Languages } from '../Languages';
+
+export const employerMyPageData = {
+  [Languages.KO]: {
+    greeting: '사장님, 안녕하세요!',
+    register_company: '회사 등록',
+    register_sign: '사인 등록',
+    my_companies: '내 회사',
+    total_companies: '총 {{count}} 곳',
+    company_info: '회사 정보',
+  },
+  [Languages.VE]: {
+    greeting: 'Chủ doanh nghiệp, xin chào!',
+    register_company: 'Đăng ký công ty',
+    register_sign: 'Đăng ký chữ ký',
+    my_companies: 'Công ty của tôi',
+    total_companies: 'Tổng cộng {{count}} công ty',
+    company_info: 'Thông tin công ty',
+  },
+};

src/assets/translator/Header/headerData.ts

@@ -0,0 +1,14 @@
+import { Languages } from '../Languages';
+
+export const headerData = {
+  [Languages.KO]: {
+    post_notice: '채용공고 등록',
+    login: '로그인',
+    logout: '로그아웃',
+  },
+  [Languages.VE]: {
+    post_notice: 'Đăng thông báo tuyển dụng',
+    login: 'Đăng nhập',
+    logout: 'Đăng xuất',
+  },
+};

src/assets/translator/MyCompany/myCompanyData.ts

@@ -0,0 +1,30 @@
+import { Languages } from '../Languages';
+
+export const myCompanyData = {
+  [Languages.KO]: {
+    my_recruitments: '내 공고글',
+    total_recruitments: '총 {{count}}건',
+    table_headers: {
+      location: '근무지',
+      title: '공고 제목',
+    },
+    buttons: {
+      view_applicants: '지원자 보러가기',
+      close_recruitment: '마감하기',
+      closed_recruitment: '마감완료',
+    },
+  },
+  [Languages.VE]: {
+    my_recruitments: 'Thông báo tuyển dụng của tôi',
+    total_recruitments: '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/registerVisaData.ts

@@ -0,0 +1,26 @@
+import { Languages } from '../Languages';
+
+export const registerVisaData = {
+  [Languages.KO]: {
+    title: '외국인 번호 및 비자 발급 일자 등록',
+    labels: {
+      foreigner_number: '외국인 번호',
+      visa_generate_date: '비자 발급 일자',
+    },
+    error_message: '올바른 형식으로 입력해주세요. (형식: 000000-0000000)',
+    submit: '등록하기',
+    complete_message: '등록이 완료되었습니다.',
+    button: '확인',
+  },
+  [Languages.VE]: {
+    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',
+    },
+    error_message: 'Vui lòng nhập đúng định dạng. (định dạng: 000000-0000000)',
+    submit: 'Đăng ký',
+    complete_message: 'Đăng ký đã hoàn tất.',
+    button: 'Xác nhận',
+  },
+};

src/assets/translator/index.ts

@@ -1,6 +1,28 @@
+import { applicantsData } from './Applicants/applicantsData';
+import { contractModalData } from './Applicants/ContractModal/contractModalData';
+import { employerMyPageData } from './EmployerMyPage/employerMyPageData';
+import { headerData } from './Header/headerData';
 import { Languages } from './Languages';
+import { myCompanyData } from './MyCompany/myCompanyData';
+import { registerVisaData } from './RegisterVisa/registerVisaData';
 import { resumeData } from './Resume/resumeData';
 
-export const KO = { resume: { ...resumeData[Languages.KO] } };
+export const KO = {
+  resume: { ...resumeData[Languages.KO] },
+  employerMyPage: { ...employerMyPageData[Languages.KO] },
+  myCompany: { ...myCompanyData[Languages.KO] },
+  applicants: { ...applicantsData[Languages.KO] },
+  registerVisa: { ...registerVisaData[Languages.KO] },
+  contractModal: { ...contractModalData[Languages.KO] },
+  header: { ...headerData[Languages.KO] },
+};
 
-export const VE = { resume: { ...resumeData[Languages.VE] } };
+export const VE = {
+  resume: { ...resumeData[Languages.VE] },
+  employerMyPage: { ...employerMyPageData[Languages.VE] },
+  myCompany: { ...myCompanyData[Languages.VE] },
+  applicants: { ...applicantsData[Languages.VE] },
+  registerVisa: { ...registerVisaData[Languages.VE] },
+  contractModal: { ...contractModalData[Languages.VE] },
+  header: { ...headerData[Languages.VE] },
+};

src/features/layout/Header/index.styles.ts

@@ -74,11 +74,12 @@ export const Nav = styled.nav<NavProps>`
 
   ${responsiveStyle({
     tablet: {
-      width: '100%',
+      width: '80%',
       justifyContent: 'center',
       marginTop: '10px',
     },
     mobile: {
+      width: '100%',
       flexDirection: 'column',
       alignItems: 'stretch',
       textAlign: 'center',

src/features/layout/Header/index.tsx

@@ -19,11 +19,13 @@ import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
 import { useUser } from '@/components/providers/User.provider';
 import { userLocalStorage } from '@/utils/storage';
+import { useTranslation } from 'react-i18next';
 
 export default function Header() {
   const navigate = useNavigate();
   const [menuOpen, toggleMenu] = useToggle();
   const { user, setUser } = useUser();
+  const { t } = useTranslation();
 
   const goToHome = () => {
     startTransition(() => {
@@ -65,20 +67,20 @@ export default function Header() {
           <LanguageFilter />
           {!user ? (
             <Button style={customButtonStyle} onClick={login}>
-              로그인
+              {t('header.login')}
             </Button>
           ) : (
             <>
               {user.type === 'employer' && (
                 <Button design="outlined" style={commonButtonStyle} onClick={goToPostNotice}>
-                  채용공고 등록
+                  {t('header.post_notice')}
                 </Button>
               )}
               <Flex justifyContent="center" alignItems="center" onClick={goToMyPage}>
                 <Image url={user.profileImage} size={{ width: '40px', height: '40px' }} css={imageStyle} />
               </Flex>
               <Button style={customButtonStyle} onClick={logout}>
-                로그아웃
+                {t('header.logout')}
               </Button>
             </>
           )}

src/features/registerVisa/VisaRegistrationForm.tsx

@@ -3,6 +3,7 @@ import { ChangeEvent, useMemo, useState } from 'react';
 import { useRegisterVisaInfo } from '@/apis/applicants/hooks/useRegisterVisaInfo';
 import { buttonStyle, ErrorMessage, Form, inputStyle } from './VisaRegistrationForm.styles';
 import { validateForeignerNumber } from './validateForeignerNumber';
+import { useTranslation } from 'react-i18next';
 
 export default function VisaRegistrationForm() {
   const [foreignerIdNumber, setForeignerNumber] = useState('');
@@ -12,11 +13,12 @@ export default function VisaRegistrationForm() {
   const formValid = useMemo(() => !error, [error]);
 
   const registerVisaMutation = useRegisterVisaInfo();
+  const { t } = useTranslation();
 
   const handleForeignerNumberChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
     if (!validateForeignerNumber(value) && value !== '') {
-      setError('올바른 형식으로 입력해주세요. (형식: 000000-0000000)');
+      setError(t('registerVisa.error_message'));
     } else {
       setError('');
     }
@@ -49,7 +51,7 @@ export default function VisaRegistrationForm() {
       <Form onSubmit={handleSubmit}>
         <Flex direction="column" gap={{ y: '10px' }}>
           <Input
-            label="외국인 번호"
+            label={t('registerVisa.labels.foreigner_number')}
             type="text"
             value={foreignerIdNumber}
             onChange={handleForeignerNumberChange}
@@ -60,7 +62,7 @@ export default function VisaRegistrationForm() {
         </Flex>
         <Flex direction="column" gap={{ y: '10px' }}>
           <Input
-            label="비자 발급 일자"
+            label={t('registerVisa.labels.visa_generate_date')}
             type="date"
             value={visaGenerateDate}
             onChange={(e) => setVisaGenerateDate(e.target.value)}
@@ -70,14 +72,14 @@ export default function VisaRegistrationForm() {
         </Flex>
         <Flex justifyContent="center">
           <Button type="submit" css={buttonStyle} disabled={!formValid}>
-            등록하기
+            {t('registerVisa.submit')}
           </Button>
         </Flex>
       </Form>
       {isModalOpen && (
         <Modal
-          textChildren="등록이 완료되었습니다."
-          buttonChildren={<Button onClick={closeModal}>확인</Button>}
+          textChildren={t('registerVisa.complete_message')}
+          buttonChildren={<Button onClick={closeModal}>{t('registerVisa.button')}</Button>}
           onClose={closeModal}
         />
       )}