kakao-tech-campus-2nd-step3 · YIMSEBIN · Nov 7, 2024 · Oct 31, 2024 · Nov 1, 2024 · Nov 5, 2024
diff --git a/src/apis/postNotice/hooks/usePostNotice.ts b/src/apis/postNotice/hooks/usePostNotice.ts
@@ -1,24 +1,8 @@
 import { APIPath } from '@/apis/apiPath';
 import { clientInstance } from '@/apis/instance';
+import { NoticeRequestData } from '@/types';
 import { useMutation } from '@tanstack/react-query';
 
-type NoticeRequestData = {
-  title?: string;
-  companyScale?: string;
-  area?: string;
-  salary?: string;
-  workDuration?: string;
-  workDays?: string;
-  workType?: string;
-  workHours?: string;
-  requestedCareer?: string;
-  majorBusiness?: string;
-  eligibilityCriteria?: string;
-  preferredConditions?: string;
-  employerName?: string;
-  companyName?: string;
-};
-
 export const getPostNoticePath = () => `${APIPath.postNotice}`;
 
 export const postNotice = async (req: NoticeRequestData) => {

diff --git a/src/assets/translator/EmployeeMyPage/employeeMyPageData.ts b/src/assets/translator/EmployeeMyPage/employeeMyPageData.ts
@@ -2,14 +2,12 @@ import { Languages } from '../Languages';
 
 export const employeeMyPageData = {
   [Languages.KO]: {
-    UPDATE_PROFILE: '프로필 수정하기',
     REGISTER_RESUME: '이력서 등록하기',
     REGISTER_SIGN: '사인 등록',
     REGISTER_VISA: '외국인 번호 및 비자 발급 일자 등록',
     MYRECRUITLIST: '내가 지원한 공고',
   },
   [Languages.VE]: {
-    UPDATE_PROFILE: 'Cập nhật hồ sơ',
     REGISTER_RESUME: 'Đăng ký hồ sơ',
     REGISTER_SIGN: 'Đăng ký chữ ký',
     REGISTER_VISA: 'Đăng ký số người nước ngoài và ngày cấp visa',

diff --git a/src/assets/translator/PostNotice/postNoticeData.ts b/src/assets/translator/PostNotice/postNoticeData.ts
@@ -3,24 +3,36 @@ import { Languages } from '../Languages';
 export const postNoticeData = {
   [Languages.KO]: {
     TITLE: '구인 글 등록하기',
+    COMPANY_NAME: '회사명',
+    EMPLOYER_NAME: '담당자명',
+    COMPANY_SCALE: '회사규모',
+    AREA: '근무지 주소',
     SALARY: '급여',
-    WORKINGDURATION: '근무기간',
+    MAJOR_BUSINESS: '업무내용',
+    WORKDURATION: '근무기간',
     WORKDAYS: '근무요일',
     WORKHOURS: '근무시간',
     WORKTYPE: '고용형태',
+    REQUESTED_CAREER: '지원조건',
     ELIGIBILITY_CRITERIA: '비자조건',
     PREFERRED_CONDITIONS: '우대사항',
     SUBMIT: '등록하기',
   },
   [Languages.VE]: {
-    TITLE: 'Đăng bài tuyển dụng',
+    TITLE: 'Đăng thông báo tuyển dụng',
+    COMPANY_NAME: 'Tên công ty',
+    EMPLOYER_NAME: 'Tên người phụ trách',
+    COMPANY_SCALE: 'Quy mô công ty',
+    AREA: 'Địa chỉ làm việc',
     SALARY: 'Lương',
-    WORKINGDURATION: 'Thời gian làm việc',
-    WORKDAYS: 'Ngày làm việc',
+    MAJOR_BUSINESS: 'Nội dung công việc',
+    WORKDURATION: 'Thời gian làm việc',
+    WORKDAYS: 'Ngày làm việc trong tuần',
     WORKHOURS: 'Giờ làm việc',
-    WORKTYPE: 'Hình thức làm việc',
-    ELIGIBILITY_CRITERIA: 'Điều kiện visa',
+    WORKTYPE: 'Hình thức lao động',
+    REQUESTED_CAREER: 'Yêu cầu kinh nghiệm',
+    ELIGIBILITY_CRITERIA: 'Điều kiện về visa',
     PREFERRED_CONDITIONS: 'Ưu tiên',
-    SUBMIT: 'Đăng',
+    SUBMIT: 'Đăng ký',
   },
 };
diff --git a/src/assets/translator/index.ts b/src/assets/translator/index.ts
@@ -11,6 +11,10 @@ import { recruitData } from './Recruit/recruitData';
 import { registerVisaData } from './RegisterVisa/registerVisaData';
 import { resumeData } from './Resume/resumeData';
 import { registerSignData } from './registerSign/registerSignData';
+import { contractData } from './Contract/contractData';
+import { employeeMyPageData } from './EmployeeMyPage/employeeMyPageData';
+import { postNoticeData } from './PostNotice/postNoticeData';
+import { registerCompanyData } from './RegisterCompany/registerCompanyData';
 
 export const KO = {
   resume: { ...resumeData[Languages.KO] },
@@ -25,6 +29,10 @@ export const KO = {
   applyGuide: { ...applyGuideData[Languages.KO] },
   apply: { ...applyData[Languages.KO] },
   registerSign: { ...registerSignData[Languages.KO] },
+  contract: { ...contractData[Languages.KO] },
+  employeeMyPage: { ...employeeMyPageData[Languages.KO] },
+  postNotice: { ...postNoticeData[Languages.KO] },
+  registerCompany: { ...registerCompanyData[Languages.KO] },
 };
 
 export const VE = {
@@ -40,4 +48,8 @@ export const VE = {
   applyGuide: { ...applyGuideData[Languages.VE] },
   apply: { ...applyData[Languages.VE] },
   registerSign: { ...registerSignData[Languages.VE] },
+  contract: { ...contractData[Languages.VE] },
+  employeeMyPage: { ...employeeMyPageData[Languages.VE] },
+  postNotice: { ...postNoticeData[Languages.VE] },
+  registerCompany: { ...registerCompanyData[Languages.VE] },
 };
diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx
@@ -3,12 +3,13 @@ import styled from '@emotion/styled';
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
   label?: string;
+  labelStyle?: React.CSSProperties;
 }
 
-export default function Input({ label, ...rest }: Props) {
+export default function Input({ label, labelStyle, ...rest }: Props) {
   return (
     <>
-      {label && <label>{label}</label>}
+      {label && <label style={{ ...labelStyle }}>{label}</label>}
       <InputContainer {...rest} />
     </>
   );

diff --git a/src/features/employee/myPage/EmployeeProfile.tsx b/src/features/employee/myPage/EmployeeProfile.tsx
@@ -1,4 +1,4 @@
-import { Card, Image, Typo, Button } from '@/components/common';
+import { Card, Image, Typo } from '@/components/common';
 import styled from '@emotion/styled';
 
 export default function EmployeeProfile({
@@ -39,11 +39,6 @@ export default function EmployeeProfile({
           </Typo>
         </TextSection>
       </ProfileSection>
-      <Button
-        style={{ width: '150px', height: '40px', backgroundColor: 'white', fontSize: '12px', padding: '10px 30px' }}
-      >
-        프로필 수정하기
-      </Button>
     </Card>
   );
 }

diff --git a/src/pages/contract/EmployeeContract/EmployeeContract.tsx b/src/pages/contract/EmployeeContract/EmployeeContract.tsx
@@ -4,6 +4,7 @@ import { Button, Flex, Typo } from '@/components/common';
 import Layout from '@/features/layout';
 import ROUTE_PATH from '@/routes/path';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
 export type ContractResponseData = {
@@ -17,6 +18,7 @@ export type ContractResponseData = {
 };
 
 export default function EmployeeContract() {
+  const { t } = useTranslation();
   const { applyId } = useParams();
   const applicationId = Number(applyId);
   const { data: contract } = useGetMyContract(applicationId);
@@ -46,50 +48,50 @@ export default function EmployeeContract() {
           <LineWrapper>
             <Flex direction="column" justifyContent="space-between" alignItems="center" style={{ width: '100%' }}>
               <Typo element="h1" size="24px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                근 로 계 약 서
+                {t('contract.CONTRACT')}
               </Typo>
               <InputWrapper>
                 <InputContainer>
-                  <Typo>1. 근무장소</Typo>
+                  <Typo>{t('contract.WORKING_PLACE')}</Typo>
                   <Typo>{contractData.workingPlace}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>2. 업무내용</Typo>
+                  <Typo>{t('contract.RESPONSIBILITIES')}</Typo>
                   <Typo>{contractData.responsibilities}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>3. 근로일 및 근로일별 근로시간</Typo>
+                  <Typo>{t('contract.WORKING_HOURS')}</Typo>
                   <Typo>{contractData.workingHours}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>4. 주휴일</Typo>
+                  <Typo>{t('contract.DAY_OFF')}</Typo>
                   <Typo>{contractData.dayOff}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>5. 임금</Typo>
+                  <Typo>{t('contract.SALARY')}</Typo>
                   <Typo>{contractData.salary}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>6. 연차유급휴가</Typo>
+                  <Typo>{t('contract.ANNUAL_PAID_LEAVE')}</Typo>
                   <Typo>{contractData.annualPaidLeave}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>7. 취업규칙</Typo>
+                  <Typo>{t('contract.RULE')}</Typo>
                   <Typo>{contractData.rule}</Typo>
                 </InputContainer>
               </InputWrapper>
               <Typo element="p" size="16px" style={{ fontWeight: 'bold', marginTop: '24px' }}>
-                사용자와 근로자는 각자가 근로계약, 취업규칙, 단체협약을 지키고 성실하게 이행하여야 한다.
+                {t('contract.SENTENCE1')}
               </Typo>
               <Typo element="p" size="16px" style={{ fontWeight: 'bold', marginTop: '24px' }}>
-                이 계약에서 정하지 않은 사항은 '근로기준법'에서 정하는 바에 따른다.
+                {t('contract.SENTENCE2')}
               </Typo>
               <ButtonWrapper>
                 <Button design="outlined" style={{ marginRight: '16px' }}>
-                  서명하기
+                  {t('contract.SIGN')}
                 </Button>
                 <Button design="default" onClick={handlePostSignEmployeeContract} style={{}}>
-                  제출하기
+                  {t('contract.SUBMIT')}
                 </Button>
               </ButtonWrapper>
             </Flex>

diff --git a/src/pages/contract/EmployerContract/EmployerContract.tsx b/src/pages/contract/EmployerContract/EmployerContract.tsx
@@ -4,9 +4,11 @@ import Layout from '@/features/layout';
 import ROUTE_PATH from '@/routes/path';
 import styled from '@emotion/styled';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
 export default function EmployerContract() {
+  const { t } = useTranslation();
   const { applyId: applicationId } = useParams();
   const mutation = useFetchPostContract();
   const navigate = useNavigate();
@@ -51,52 +53,67 @@ export default function EmployerContract() {
           <LineWrapper>
             <Flex direction="column" justifyContent="space-between" alignItems="center" style={{ width: '100%' }}>
               <Typo element="h1" size="24px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                근 로 계 약 서
+                {t('contract.CONTRACT')}
               </Typo>
               <InputWrapper>
                 <InputContainer>
-                  <Input label="1. 근무장소" value={workingPlace} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('contract.WORKING_PLACE')}
+                    value={workingPlace}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="2. 업무내용" value={responsibilities} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('contract.RESPONSIBILITIES')}
+                    value={responsibilities}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
                   <Input
-                    label="3. 근로일 및 근로일별 근로시간"
+                    label={t('contract.WORKING_HOURS')}
                     value={workingHours}
                     onChange={onChange}
                     style={InputStyle}
                   ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="4. 주휴일" value={dayOff} onChange={onChange} style={InputStyle}></Input>
+                  <Input label={t('contract.DAY_OFF')} value={dayOff} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="5. 임금" value={salary} onChange={onChange} style={InputStyle}></Input>
+                  <Input label={t('contract.SALARY')} value={salary} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="6. 연차유급휴가" value={annualPaidLeave} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('contract.ANNUAL_PAID_LEAVE')}
+                    value={annualPaidLeave}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="7. 취업규칙" value={rule} onChange={onChange} style={InputStyle}></Input>
+                  <Input label={t('contract.RULE')} value={rule} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
               </InputWrapper>
               <Typo element="p" size="16px" style={{ fontWeight: 'bold', marginTop: '24px' }}>
-                사용자와 근로자는 각자가 근로계약, 취업규칙, 단체협약을 지키고 성실하게 이행하여야 한다.
+                {t('contract.SENTENCE1')}
               </Typo>
               <Typo element="p" size="16px" style={{ fontWeight: 'bold', marginTop: '24px' }}>
-                이 계약에서 정하지 않은 사항은 '근로기준법'에서 정하는 바에 따른다.
+                {t('contract.SENTENCE2')}
               </Typo>
               <ButtonWrapper>
                 <div>
                   <>
                     <input type="checkbox" />
-                    <label>서명하기</label>
+                    <label>{t('contract.SIGN')}</label>
                   </>
                 </div>
                 <div>
                   <Button design="default" onClick={handlePostContract}>
-                    제출하기
+                    {t('contract.SUBMIT')}
                   </Button>
                 </div>
               </ButtonWrapper>

diff --git a/src/pages/myPage/employee/EmployeeMyPage.tsx b/src/pages/myPage/employee/EmployeeMyPage.tsx
@@ -7,8 +7,10 @@ import EmployeeProfile from '../../../features/employee/myPage/EmployeeProfile';
 import { useGetMyApplication } from '@/apis/employee/hooks/useGetMyApplication';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
+import { useTranslation } from 'react-i18next';
 
 export default function EmployeeMyPage() {
+  const { t } = useTranslation();
   const { data: myRecruitList } = useGetMyApplication();
   const navigate = useNavigate();
 
@@ -24,7 +26,7 @@ export default function EmployeeMyPage() {
                 navigate(ROUTE_PATH.RESUME);
               }}
             >
-              <Typo bold>이력서 등록</Typo>
+              <Typo bold>{t('employeeMyPage.REGISTER_RESUME')}</Typo>
               <Icon.EmployeePage.Bag />
             </CardButton>
             <CardButton
@@ -33,7 +35,7 @@ export default function EmployeeMyPage() {
                 navigate(ROUTE_PATH.REGISTERSIGN);
               }}
             >
-              <Typo bold>사인 등록</Typo>
+              <Typo bold>{t('employeeMyPage.REGISTER_SIGN')}</Typo>
               <Icon.EmployeePage.Pen />
             </CardButton>
             <CardButton
@@ -42,14 +44,14 @@ export default function EmployeeMyPage() {
                 navigate(ROUTE_PATH.REGISTER_VISA);
               }}
             >
-              <Typo bold>외국인 번호 및 비자 발급 일자 등록</Typo>
+              <Typo bold>{t('employeeMyPage.REGISTER_VISA')}</Typo>
               <Icon.EmployeePage.Card />
             </CardButton>
           </ColumnSection>
         </Section>
         <Section>
           <Typo bold element="h3" size="20px" style={{ marginBottom: '24px' }}>
-            내가 지원한 공고
+            {t('employeeMyPage.MYRECRUITLIST')}
           </Typo>
           {myRecruitList && <MyRecruitList myRecruitList={myRecruitList} />}
         </Section>