Translate weapon list page

src/components/molecules/WeaponCard.tsx

@@ -1,15 +1,20 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card, Text } from '@theme-ui/components'
+import { useRouter } from 'next/router'
 import { WeaponData } from '../../lib/honkai3rd/weapons'
+import { translate } from '../../lib/i18n'
 import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'
 
 interface WeaponCardProps {
-  weapon: Pick<WeaponData, 'id' | 'name' | 'rarity'>
+  weapon: Pick<WeaponData, 'id' | 'name' | 'rarity' | 'krName'>
   hidden?: boolean
 }
 
 const WeaponCard = ({ weapon, hidden }: WeaponCardProps) => {
+  const { locale } = useRouter()
+  const weaponName = translate(locale, { 'ko-KR': weapon.krName }, weapon.name)
+
   return (
     <Card
       className={hidden ? 'hidden' : ''}
@@ -25,7 +30,7 @@ const WeaponCard = ({ weapon, hidden }: WeaponCardProps) => {
       <PageLink href={`/honkai3rd/weapons/${weapon.id}`}>
         <SquareImageBox
           size={100}
-          alt={weapon.name}
+          alt={weaponName}
           src={`/assets/honkai3rd/weapons/${weapon.id}.png`}
         />
         <Box
@@ -37,7 +42,7 @@ const WeaponCard = ({ weapon, hidden }: WeaponCardProps) => {
             textAlign: 'center',
           }}
         >
-          <Text>{weapon.name}</Text>
+          <Text>{weaponName}</Text>
         </Box>
         <Box sx={{ fontSize: 1, textAlign: 'center' }}>
           {'⭐'.repeat(weapon.rarity)}