Merge pull request #107 from tteokbokki-master/feat/#104

Feat/#104 i18n 번역 데이터 생성 및 적용

src/assets/translator/Apply/applyData.ts

@@ -0,0 +1,38 @@
+import { Languages } from '../Languages';
+
+export const applyData = {
+  [Languages.KO]: {
+    title: '지원서 작성',
+    name: '이름',
+    address: '주소',
+    phoneNumber: '번호',
+    applyMotivation: '지원동기',
+    description: {
+      name: '이름을 입력해주세요.',
+      address: '주소를 입력해주세요 (예: 대전광역시 유성구 궁동)',
+      phoneNumber: '번호를 입력해주세요 (예: 010-0000-0000)',
+      applyMotivation: '지원동기를 입력해주세요',
+    },
+    errors: '을(를) 입력해주세요!',
+    numberError: '올바른 전화번호 형식이 아닙니다. (예: 010-0000-0000)',
+    submit: '지원하기',
+    submitMent: '정말 지원하시겠습니까?',
+  },
+  [Languages.VE]: {
+    title: 'Đơn ứng tuyển',
+    name: 'Họ và tên',
+    address: 'Địa chỉ',
+    phoneNumber: 'Số điện thoại',
+    applyMotivation: 'Động lực ứng tuyển',
+    description: {
+      name: 'Vui lòng nhập họ và tên.',
+      address: 'Vui lòng nhập địa chỉ (ví dụ: Quận Cẩm Lệ, Thành phố Đà Nẵng)',
+      phoneNumber: 'Vui lòng nhập số điện thoại (ví dụ: 010-0000-0000)',
+      applyMotivation: 'Vui lòng nhập động lực ứng tuyển',
+    },
+    errors: 'Vui lòng nhập!',
+    numberError: 'Số điện thoại không đúng định dạng. (ví dụ: 010-0000-0000)',
+    submit: 'Nộp đơn',
+    submitMent: 'Bạn có chắc chắn muốn ứng tuyển không?',
+  },
+};

src/assets/translator/Apply/applyGuideData.ts

@@ -0,0 +1,64 @@
+import { Languages } from '../Languages';
+
+export const applyGuideData = {
+  [Languages.KO]: {
+    section1: {
+      title: '🙌 채용 절차 안내',
+      description: '여러분의 채용 절차를 더욱 원활하게 진행할 수 있도록, 아래의 내용을 꼭 확인해주세요.',
+    },
+    section2: {
+      title: '1. 채용 절차 설명',
+      description:
+        '- 채용 과정 전반에 대한 안내를 드립니다. 채용의 모든 단계에서 어떤 일들이 일어날지에 대해 명확히 이해하고 준비할 수 있도록 도와드립니다.',
+    },
+    section3: {
+      title: '2. 주의 사항 및 표준 근로계약서 안내',
+      description: {
+        description1:
+          '- 고용주가 채용을 희망하는 경우, 채용 과정과 별도로 등록하신 이메일로 표준 근로계약서와 주의사항이 안내됩니다.',
+        description2:
+          ' - 채용 절차가 진행되는 동안, 근로계약서 작성 시 유의할 점을 반드시 확인하시고 필요한 경우 참고하시기 바랍니다.',
+        description3:
+          ' - 해당 과정은 여러분과 고용주 모두가 이해하고 동의하는 투명하고 신뢰할 수 있는 계약서를 작성하는 데 도움을 드리기 위한 것입니다.',
+      },
+    },
+    section4: {
+      description:
+        '이 안내사항들은 여러분이 채용 절차를 성공적으로 마무리하고, 근로 계약이 원활하게 체결될 수 있도록 지원하기 위한 것입니다.',
+    },
+    section5: { description: '필요한 정보가 정확히 전달될 수 있도록 항상 주의하시기 바랍니다.' },
+    section6: { description: '지원서 작성하러 가기' },
+  },
+  [Languages.VE]: {
+    section1: {
+      title: '🙌 Quy trình tuyển dụng',
+      description: 'Để quá trình tuyển dụng của bạn diễn ra thuận lợi hơn, vui lòng kiểm tra nội dung dưới đây.',
+    },
+    section2: {
+      title: '1. Giải thích quy trình tuyển dụng',
+      description:
+        '- Chúng tôi cung cấp thông tin về toàn bộ quy trình tuyển dụng. Điều này giúp bạn hiểu rõ và chuẩn bị sẵn sàng cho từng bước của quy trình.',
+    },
+    section3: {
+      title: '2. Lưu ý và hướng dẫn về hợp đồng lao động tiêu chuẩn',
+      description: {
+        description1:
+          '- Khi nhà tuyển dụng mong muốn tuyển dụng, thông tin về hợp đồng lao động tiêu chuẩn và các lưu ý sẽ được gửi đến email đã đăng ký của bạn.',
+        description2:
+          '- Trong suốt quá trình tuyển dụng, hãy kiểm tra kỹ các điều cần lưu ý khi ký kết hợp đồng lao động và tham khảo nếu cần thiết.',
+        description3:
+          '- Quá trình này nhằm giúp cả bạn và nhà tuyển dụng hiểu và đồng thuận trong việc tạo ra một hợp đồng minh bạch và đáng tin cậy.',
+      },
+    },
+    section4: {
+      description:
+        'Những hướng dẫn này giúp bạn hoàn thành quy trình tuyển dụng thành công và ký kết hợp đồng lao động một cách suôn sẻ.',
+    },
+    section5: {
+      description: 'Hãy luôn cẩn thận để đảm bảo thông tin cần thiết được truyền tải chính xác.',
+    },
+    section6: {
+      description: 'Điền đơn ứng tuyển',
+    },
+  },
+};

src/assets/translator/Footer/footerData.ts

@@ -0,0 +1,20 @@
+import { Languages } from '../Languages';
+
+export const footerData = {
+  [Languages.KO]: {
+    info_1: '(주)Hire Higher 임세빈',
+    info_2: '대전광역시 유성구 궁동',
+    info_3: '전화번호: 042-821-5114',
+    info_4: '사업자등록번호: 111-11-00000',
+    info_5: '통신판매번호: 2024-대전유성-0000',
+    info_6: '유료직업소개사업등록번호: (국내) 제2024-1111111-11-1-00011호',
+  },
+  [Languages.VE]: {
+    info_1: 'Công ty TNHH Hire Higher 임세빈',
+    info_2: 'Quận Yuseong, Daejeon, Gungdong',
+    info_3: 'Số điện thoại: 042-821-5114',
+    info_4: 'Mã số doanh nghiệp: 111-11-00000',
+    info_5: 'Số đăng ký kinh doanh thương mại điện tử: 2024-Daejeon Yuseong-0000',
+    info_6: 'Số đăng ký dịch vụ giới thiệu việc làm có phí (trong nước): Số 2024-1111111-11-1-00011',
+  },
+};

src/assets/translator/Recruit/recruitData.ts

@@ -0,0 +1,38 @@
+import { Languages } from '../Languages';
+
+export const recruitData = {
+  [Languages.KO]: {
+    recruit: '지원하기',
+    conditions: '근무조건',
+    conditions_detail: {
+      salary: '급여',
+      workDuration: '근무기간',
+      workDays: '근무요일',
+      workHours: '근무시간',
+      employerName: '대표',
+      companyName: '회사명',
+      workType: '고용형태',
+    },
+    eligibilityRequirements: '지원자격',
+    detailedDescription: '상세설명',
+    mainResponsibilities: '주요업무',
+    PreferredRequirements: '우대사항',
+  },
+  [Languages.VE]: {
+    recruit: 'Ứng tuyển',
+    conditions: 'Điều kiện làm việc',
+    conditions_detail: {
+      salary: 'Lương',
+      workDuration: 'Thời gian làm việc',
+      workDays: 'Ngày làm việc',
+      workHours: 'Giờ làm việc',
+      employerName: 'Người đại diện',
+      companyName: 'Tên công ty',
+      workType: 'Loại hình công việc',
+    },
+    eligibilityRequirements: 'Yêu cầu ứng tuyển',
+    detailedDescription: 'Mô tả chi tiết',
+    mainResponsibilities: 'Nhiệm vụ chính',
+    PreferredRequirements: 'Yêu cầu ưu tiên',
+  },
+};

src/assets/translator/index.ts

@@ -1,11 +1,16 @@
 import { applicantsData } from './Applicants/applicantsData';
 import { contractModalData } from './Applicants/ContractModal/contractModalData';
+import { applyGuideData } from './Apply/applyGuideData';
+import { applyData } from './Apply/applyData';
 import { employerMyPageData } from './EmployerMyPage/employerMyPageData';
+import { footerData } from './Footer/footerData';
 import { headerData } from './Header/headerData';
 import { Languages } from './Languages';
 import { myCompanyData } from './MyCompany/myCompanyData';
+import { recruitData } from './Recruit/recruitData';
 import { registerVisaData } from './RegisterVisa/registerVisaData';
 import { resumeData } from './Resume/resumeData';
+import { registerSignData } from './registerSign/registerSignData';
 
 export const KO = {
   resume: { ...resumeData[Languages.KO] },
@@ -15,6 +20,11 @@ export const KO = {
   registerVisa: { ...registerVisaData[Languages.KO] },
   contractModal: { ...contractModalData[Languages.KO] },
   header: { ...headerData[Languages.KO] },
+  footer: { ...footerData[Languages.KO] },
+  recruit: { ...recruitData[Languages.KO] },
+  applyGuide: { ...applyGuideData[Languages.KO] },
+  apply: { ...applyData[Languages.KO] },
+  registerSign: { ...registerSignData[Languages.KO] },
 };
 
 export const VE = {
@@ -25,4 +35,9 @@ export const VE = {
   registerVisa: { ...registerVisaData[Languages.VE] },
   contractModal: { ...contractModalData[Languages.VE] },
   header: { ...headerData[Languages.VE] },
+  footer: { ...footerData[Languages.VE] },
+  recruit: { ...recruitData[Languages.VE] },
+  applyGuide: { ...applyGuideData[Languages.VE] },
+  apply: { ...applyData[Languages.VE] },
+  registerSign: { ...registerSignData[Languages.VE] },
 };

src/assets/translator/registerSign/registerSignData.ts

@@ -0,0 +1,6 @@
+import { Languages } from '../Languages';
+
+export const registerSignData = {
+  [Languages.KO]: { registerSign: '사인 등록하기', reset: '초기화' },
+  [Languages.VE]: { registerSign: 'Đăng ký chữ ký', reset: 'Đặt lại' },
+};

src/features/layout/Footer/index.tsx

@@ -1,21 +1,23 @@
 import { Icon } from '@components/common';
 import styled from '@emotion/styled';
 import Logo from '@assets/images/hirehigher-logo.svg?react';
+import { useTranslation } from 'react-i18next';
 
 const Footer = () => {
+  const { t } = useTranslation();
   return (
     <Container>
       <Wrapper>
         <Content>
           <Logo />
           <Gap height="24px" />
-          <p>(주)Hire Higher 임OO</p>
-          <p>대전광역시 유성구 궁동</p>
-          <p>전화번호: 042-821-5114</p>
+          <p>{t('footer.info_1')}</p>
+          <p>{t('footer.info_2')}</p>
+          <p>{t('footer.info_3')}</p>
           <Gap height="12px" />
-          <p>사업자등록번호: 111-11-00000</p>
-          <p>통신판매번호: 2024-대전유성-3147</p>
-          <p>유료직업소개사업등록번호: (국내) 제2024-1111111-11-1-00011호</p>
+          <p>{t('footer.info_4')}</p>
+          <p>{t('footer.info_5')}</p>
+          <p>{t('footer.info_6')}</p>
         </Content>
       </Wrapper>
       <Gap border="0.1px solid #767f8c;" />

src/pages/apply/applyguide/ApplyGuide.tsx

@@ -1,10 +1,9 @@
 import Layout from '@/features/layout';
 import styled from '@emotion/styled';
-import { Typo } from '@/components/common';
+import { Typo, Button } from '@/components/common';
 import { ReactNode } from 'react';
-import { guideMent } from './guideMent';
 import { useNavigate } from 'react-router-dom';
-import { Button } from '@/components/common';
+import { useTranslation } from 'react-i18next';
 
 const IndentText = ({ children }: { children: ReactNode }) => <Typo style={{ marginLeft: '20px' }}>{children}</Typo>;
 
@@ -20,24 +19,25 @@ export default function ApplyGuide() {
   const navigateToApply = () => {
     nav('/apply');
   };
+  const { t } = useTranslation();
 
   return (
     <Layout>
       <ApplyContainer>
         <Wrapper>
           <TextArea>
-            <SpacingText bold={true}>{guideMent[0].title}</SpacingText>
-            <Typo>{guideMent[0].description}</Typo>
-            <SpacingText bold={true}>{guideMent[1].title}</SpacingText>
-            <IndentText>{guideMent[1].description}</IndentText>
-            <SpacingText bold={true}>{guideMent[2].title}</SpacingText>
-            {(guideMent[2].description as string[]).map((desc: string, index: number) => {
-              return <IndentText key={index}>{desc}</IndentText>;
-            })}
-            <SpacingText>{guideMent[3].description}</SpacingText>
-            <SpacingText>{guideMent[4].description}</SpacingText>
+            <SpacingText bold={true}>{t('applyGuide.section1.title')}</SpacingText>
+            <Typo>{t('applyGuide.section1.description')}</Typo>
+            <SpacingText bold={true}>{t('applyGuide.section2.title')}</SpacingText>
+            <IndentText>{t('applyGuide.section2.description')}</IndentText>
+            <SpacingText bold={true}>{t('applyGuide.section3.title')}</SpacingText>
+            <IndentText>{t('applyGuide.section3.description.description1')}</IndentText>
+            <IndentText>{t('applyGuide.section3.description.description2')}</IndentText>
+            <IndentText>{t('applyGuide.section3.description.description3')}</IndentText>
+            <SpacingText>{t('applyGuide.section4.description')}</SpacingText>
+            <SpacingText>{t('applyGuide.section5.description')}</SpacingText>
           </TextArea>
-          <CustomBtn onClick={navigateToApply}>{guideMent[5].description}</CustomBtn>
+          <CustomBtn onClick={navigateToApply}>{t('applyGuide.section6.description')}</CustomBtn>
         </Wrapper>
       </ApplyContainer>
     </Layout>

src/pages/apply/applypage/ApplyPage.tsx

@@ -3,59 +3,60 @@ import styled from '@emotion/styled';
 import { Flex, Typo, Button, Modal } from '@/components/common';
 import { useApplyHook } from './useApplyHook';
 import ApplyInput from './ApplyInput';
+import { useTranslation } from 'react-i18next';
 
 export default function ApplyPage() {
   const { toggle, isToggle, register, handleSubmit, onSubmit, handleApplySubmit, errors } = useApplyHook();
-
+  const { t } = useTranslation();
   return (
     <Layout>
       <Flex justifyContent="center" alignItems="center">
         <ApplyCard>
           <Typo size="24px" bold={true}>
-            지원서 작성
+            {t('apply.title')}
           </Typo>
           <StyledForm onSubmit={handleSubmit(onSubmit)}>
             <ApplyInput
               errors={errors}
-              title="이름"
+              title={t('apply.name')}
               label="name"
               register={register}
-              placeholder="이름을 입력해주세요."
+              placeholder={t('apply.description.name')}
               required
             />
             <ApplyInput
               errors={errors}
-              title="주소"
+              title={t('apply.address')}
               label="address"
               register={register}
-              placeholder="주소를 입력해주세요. (예: 대전광역시 유성구 궁동)"
+              placeholder={t('apply.description.address')}
               required
             />
             <ApplyInput
               errors={errors}
-              title="번호"
+              title={t('apply.phoneNumber')}
               label="phoneNumber"
               register={register}
               pattern={/^010-\d{4}-\d{4}$/}
-              patternMessage="올바른 전화번호 형식이 아닙니다. (예: 010-0000-0000)"
-              placeholder="010-0000-0000 형식의 번호를 입력해주세요."
+              patternMessage={t('apply.numberError')}
+              placeholder={t('apply.description.phoneNumber')}
               required
             />
             <ApplyInput
               errors={errors}
-              title="지원동기"
+              title={t('apply.applyMotivation')}
               label="applyMotivation"
               register={register}
-              placeholder="지원 동기를 입력해주세요."
+              placeholder={t('apply.description.applyMotivation')}
               required
             />
-            <CustomBtn type="submit">지원하기</CustomBtn>
+            <CustomBtn type="submit">{t('apply.submit')}</CustomBtn>
           </StyledForm>
         </ApplyCard>
         {isToggle && (
           <Modal
-            textChildren={<ModalContainer>정말 지원하시겠습니까?</ModalContainer>}
-            buttonChildren={<CustomBtn onClick={handleApplySubmit}>지원하기</CustomBtn>}
+            textChildren={<ModalContainer>{t('apply.submitMent')}</ModalContainer>}
+            buttonChildren={<CustomBtn onClick={handleApplySubmit}>{t('apply.submit')}</CustomBtn>}
             onClose={toggle}
           />
         )}