Refactor stigmata data

src/components/molecules/StigmataCard.tsx

@@ -1,25 +1,16 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card, Text, Flex } from '@theme-ui/components'
-import { useRouter } from 'next/router'
 import { assetsBucketBaseUrl } from '../../lib/consts'
 import { StigmataData } from '../../lib/honkai3rd/stigmata'
-import { translate } from '../../lib/i18n'
 import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'
 
 interface StigmataCardProps {
-  stigmata: Pick<StigmataData, 'id' | 'name' | 'rarity' | 'krName'>
+  stigmata: Pick<StigmataData, 'id' | 'name' | 'rarity'>
   size?: 'sm' | 'default'
 }
 
 const StigmataCard = ({ stigmata, size }: StigmataCardProps) => {
-  const { locale } = useRouter()
-  const stigmataName = translate(
-    locale,
-    { 'ko-KR': stigmata.krName },
-    stigmata.name
-  )
-
   if (size === 'sm') {
     return (
       <Card
@@ -36,7 +27,7 @@ const StigmataCard = ({ stigmata, size }: StigmataCardProps) => {
           <Flex>
             <SquareImageBox
               mr={2}
-              alt={stigmataName}
+              alt={stigmata.name}
               src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmata.id}.png`}
               size={30}
             />
@@ -49,7 +40,7 @@ const StigmataCard = ({ stigmata, size }: StigmataCardProps) => {
                 textAlign: 'center',
               }}
             >
-              <Text sx={{ lineHeight: '30px' }}>{stigmataName}</Text>
+              <Text sx={{ lineHeight: '30px' }}>{stigmata.name}</Text>
             </Box>
           </Flex>
         </PageLink>
@@ -68,7 +59,7 @@ const StigmataCard = ({ stigmata, size }: StigmataCardProps) => {
       <PageLink href={`/honkai3rd/stigmata/${stigmata.id}`}>
         <SquareImageBox
           size={[75, 100]}
-          alt={stigmataName}
+          alt={stigmata.name}
           src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmata.id}.png`}
         />
         <Box
@@ -80,7 +71,7 @@ const StigmataCard = ({ stigmata, size }: StigmataCardProps) => {
             textAlign: 'center',
           }}
         >
-          <Text>{stigmataName}</Text>
+          <Text>{stigmata.name}</Text>
         </Box>
         <Box sx={{ fontSize: 1, textAlign: 'center' }}>
           {'⭐'.repeat(stigmata.rarity)}

src/components/molecules/StigmataSetCard.tsx

@@ -1,24 +1,15 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card, Flex, Text } from '@theme-ui/components'
-import { useRouter } from 'next/router'
 import { assetsBucketBaseUrl } from '../../lib/consts'
 import { StigmataSet } from '../../lib/honkai3rd/stigmata'
-import { translate } from '../../lib/i18n'
 import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'
 
 interface StigmataSetCardProps {
-  stigmataSet: Pick<StigmataSet, 'id' | 'name' | 'krName' | 'rarity'>
+  stigmataSet: Pick<StigmataSet, 'id' | 'name' | 'rarity'>
 }
 
 const StigmataSetCard = ({ stigmataSet }: StigmataSetCardProps) => {
-  const { locale } = useRouter()
-  const stigmataSetName = translate(
-    locale,
-    { 'ko-KR': stigmataSet.krName },
-    stigmataSet.name
-  )
-
   return (
     <Card
       sx={{
@@ -31,17 +22,17 @@ const StigmataSetCard = ({ stigmataSet }: StigmataSetCardProps) => {
         <Flex sx={{ justifyContent: 'space-around' }}>
           <SquareImageBox
             size={[80, 100]}
-            alt={`${stigmataSet.id} Top`}
+            alt={`${stigmataSet.name} Top`}
             src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-top.png`}
           />
           <SquareImageBox
             size={[80, 100]}
-            alt={`${stigmataSet.id} Mid`}
+            alt={`${stigmataSet.name} Mid`}
             src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-mid.png`}
           />
           <SquareImageBox
             size={[80, 100]}
-            alt={`${stigmataSet.id} Bottom`}
+            alt={`${stigmataSet.name} Bottom`}
             src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-bot.png`}
           />
         </Flex>
@@ -54,7 +45,7 @@ const StigmataSetCard = ({ stigmataSet }: StigmataSetCardProps) => {
             textAlign: 'center',
           }}
         >
-          <Text>{stigmataSetName}</Text>
+          <Text>{stigmataSet.name}</Text>
         </Box>
         <Box sx={{ fontSize: 1, textAlign: 'center' }}>
           {'⭐'.repeat(stigmataSet.rarity)}