Translate elf pages

src/components/molecules/ElfCard.tsx

@@ -1,16 +1,21 @@
 /** @jsxImportSource theme-ui */
 
 import { Box, Card, Text } from '@theme-ui/components'
+import { useRouter } from 'next/router'
 import { ElfData } from '../../lib/honkai3rd/elfs'
+import { translate } from '../../lib/i18n'
 import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'
 
 interface ElfCardProps {
-  elf: Pick<ElfData, 'id' | 'name'>
+  elf: Pick<ElfData, 'id' | 'name' | 'krName'>
   hidden?: boolean
 }
 
 const ElfCard = ({ elf }: ElfCardProps) => {
+  const { locale } = useRouter()
+  const elfName = translate(locale, { 'ko-KR': elf.krName }, elf.name)
+
   return (
     <Card
       sx={{
@@ -24,7 +29,7 @@ const ElfCard = ({ elf }: ElfCardProps) => {
     >
       <PageLink href={`/honkai3rd/elfs/${elf.id}`}>
         <SquareImageBox
-          alt={elf.name}
+          alt={elfName}
           src={`/assets/honkai3rd/elfs/icon-${elf.id}.png`}
           size={[120, 140]}
         />
@@ -37,7 +42,7 @@ const ElfCard = ({ elf }: ElfCardProps) => {
             textAlign: 'center',
           }}
         >
-          <Text>{elf.name}</Text>
+          <Text>{elfName}</Text>
         </Box>
       </PageLink>
     </Card>