feat: Header 번역 기능 추가

kakao-tech-campus-2nd-step3 · Nov 6, 2024 · 03313f2 · 03313f2
1 parent 078733a
commit 03313f2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/src/assets/translator/Header/headerData.ts b/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',
+  },
+};
diff --git a/src/assets/translator/index.ts b/src/assets/translator/index.ts
@@ -1,6 +1,7 @@
 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';
@@ -13,6 +14,7 @@ export const KO = {
   applicants: { ...applicantsData[Languages.KO] },
   registerVisa: { ...registerVisaData[Languages.KO] },
   contractModal: { ...contractModalData[Languages.KO] },
+  header: { ...headerData[Languages.KO] },
 };
 
 export const VE = {
@@ -22,4 +24,5 @@ export const VE = {
   applicants: { ...applicantsData[Languages.VE] },
   registerVisa: { ...registerVisaData[Languages.VE] },
   contractModal: { ...contractModalData[Languages.VE] },
+  header: { ...headerData[Languages.VE] },
 };
diff --git a/src/features/layout/Header/index.tsx b/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>
             </>
           )}