feat: i18next 대신 react-i18next 사용

packages/tds-widget/src/image-source/image-source.tsx

@@ -1,13 +1,16 @@
-import formatSourceUrl from './format-source-url'
+import { useTranslation } from 'react-i18next'
 
 export interface ImageSourceProps {
   sourceUrl?: string
 }
 
 export function ImageSource({ sourceUrl }: ImageSourceProps) {
+  const { t } = useTranslation('triple-frontend')
+
   if (!sourceUrl) {
     return null
   }
 
-  return <>{formatSourceUrl(sourceUrl)}</>
+  const httpsSchemeRemovedUrl = sourceUrl.replace(/^https?:\/\//, '')
+  return <>{t('출처 {{httpsSchemeRemovedUrl}}', { httpsSchemeRemovedUrl })}</>
 }

packages/tds-widget/src/poi-list-elements/carousel-element.tsx

@@ -11,7 +11,7 @@ import { FrameRatioAndSizes, GuestModeType } from '@titicaca/type-definitions'
 import { OverlayScrapButton } from '../scrap-button'
 
 import { POI_IMAGE_PLACEHOLDERS } from './constants'
-import { getTypeNames } from './get-type-names'
+import { useTypeName } from './use-type-name'
 import {
   PoiListElementBaseProps,
   ActionButtonElement,
@@ -47,6 +47,7 @@ export function PoiCarouselElement<T extends PoiListElementType>({
   optimized?: boolean
   guestMode?: GuestModeType
 }) {
+  const typeName = useTypeName(type)
   if (!poi) {
     return null
   }
@@ -100,7 +101,7 @@ export function PoiCarouselElement<T extends PoiListElementType>({
         {name}
       </Text>
       <Text size="tiny" alpha={0.7} margin={{ top: 2 }}>
-        {description || getTypeNames(type)}
+        {description || typeName}
       </Text>
       <Text size="tiny" alpha={0.7} margin={{ top: 2 }}>
         {regionName

packages/tds-widget/src/poi-list-elements/compact-poi-list-element.tsx

@@ -14,7 +14,7 @@ import {
   ActionButtonElement,
   PoiListElementType,
 } from './types'
-import { getTypeNames } from './get-type-names'
+import { useTypeName } from './use-type-name'
 
 interface CompactPoiListElementBaseProps<T extends PoiListElementType>
   extends PoiListElementBaseProps<T> {
@@ -48,6 +48,7 @@ export function CompactPoiListElement<T extends PoiListElementType>({
 }: CompactPoiListElementProps<T>) {
   const [actionButtonWidth, setActionButtonWidth] = useState(0)
   const actionButtonRef = useRef<HTMLDivElement & { width?: number }>(null)
+  const typeName = useTypeName(type)
 
   useEffect(() => {
     if (actionButtonRef && actionButtonRef.current) {
@@ -97,7 +98,7 @@ export function CompactPoiListElement<T extends PoiListElementType>({
       </Text>
       <Text size="tiny" alpha={0.7} margin={{ top: 4, left: 50 }}>
         {[
-          getTypeNames(type),
+          typeName,
           regionName
             ? areas?.[0]?.name
               ? `${regionName}(${areas?.[0]?.name})`

packages/tds-widget/src/poi-list-elements/use-type-name.ts

@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next'
+
+import { PoiListElementType } from './types'
+
+export function useTypeName(type: PoiListElementType['type']) {
+  const { t } = useTranslation('triple-frontend')
+
+  switch (type) {
+    case 'attraction': {
+      return t('관광명소')
+    }
+    case 'hotel': {
+      return t('호텔')
+    }
+    case 'restaurant': {
+      return t('음식점')
+    }
+  }
+}

packages/tds-widget/src/public-header/categories.ts

@@ -1,4 +1,4 @@
-import { t } from 'i18next'
+import { useTranslation } from 'react-i18next'
 
 import type { Category } from './types'
 
@@ -15,34 +15,37 @@ export function getCategoryHref(category?: Category) {
   }
 }
 
-export function getCategoryTitle(category?: Category) {
+export function useCategoryTitle(category?: Category) {
+  const { t } = useTranslation('triple-frontend')
   switch (category) {
     case 'air':
-      return t('Triple 항공 홈', { ns: 'triple-frontend' })
+      return t('Triple 항공 홈')
     case 'hotels':
-      return t('Triple 숙소 홈', { ns: 'triple-frontend' })
+      return t('Triple 숙소 홈')
     case 'tna':
-      return t('Triple 투어 티켓 홈', { ns: 'triple-frontend' })
+      return t('Triple 투어 티켓 홈')
     default:
-      return t('Triple 홈', { ns: 'triple-frontend' })
+      return t('Triple 홈')
   }
 }
 
-export function getCategoryImageProps(category?: Category) {
+export function useCategoryImageProps(category?: Category) {
+  const { t } = useTranslation('triple-frontend')
+
   switch (category) {
     case 'air':
       return {
-        alt: t('항공', { ns: 'triple-frontend' }),
+        alt: t('항공'),
         src: 'https://assets.triple.guide/images/img_intro_logo_air.svg',
       }
     case 'hotels':
       return {
-        alt: t('숙소', { ns: 'triple-frontend' }),
+        alt: t('숙소'),
         src: 'https://assets.triple.guide/images/img_intro_logo_hotels.svg',
       }
     case 'tna':
       return {
-        alt: t('투어 티켓', { ns: 'triple-frontend' }),
+        alt: t('투어 티켓'),
         src: 'https://assets.triple.guide/images/img_intro_logo_tna.svg',
       }
     default:

packages/tds-widget/src/public-header/public-header.tsx

@@ -12,8 +12,8 @@ import {
 import type { Category, DeeplinkComponent } from './types'
 import {
   getCategoryHref,
-  getCategoryImageProps,
-  getCategoryTitle,
+  useCategoryImageProps,
+  useCategoryTitle,
 } from './categories'
 import { useAutoHide } from './use-auto-hide'
 import { ExtraActionsContainer } from './extra-actions-container'
@@ -111,6 +111,8 @@ export function PublicHeader({
 
   const app = useClientApp()
   const visible = useAutoHide(disableAutoHide)
+  const categoryTitle = useCategoryTitle(category)
+  const categoryImageProps = useCategoryImageProps(category)
 
   if (app) {
     return null
@@ -121,16 +123,14 @@ export function PublicHeader({
       <HeaderFrame>
         <Logo
           href={getCategoryHref(category)}
-          title={getCategoryTitle(category)}
+          title={categoryTitle}
           onClick={onLogoClick}
         >
           <LogoImage
             alt="Triple"
             src="https://assets.triple.guide/images/img_intro_logo_dark.svg"
           />
-          {category && (
-            <LogoCategoryImage {...getCategoryImageProps(category)} />
-          )}
+          {category && <LogoCategoryImage {...categoryImageProps} />}
         </Logo>
 
         <ExtraActionsContainer>

packages/triple-document/src/elements/tna/product.tsx

@@ -7,7 +7,7 @@ import { StaticIntersectionObserver } from '@titicaca/intersection-observer'
 import { useClientApp } from '@titicaca/triple-web'
 
 import { TnaProductData, DomesticArea } from './types'
-import { generateCoupon } from './helpers'
+import { useGenerateCoupon } from './use-generate-coupon'
 import { PricePolicyCouponInfo } from './price-policy-coupon-info'
 
 const PLACEHOLDER_IMAGE_URL =
@@ -119,7 +119,7 @@ export function TnaProductWithPrice({
     hasOnlyExpectedApplicableCoupon,
     hasAmountAfterUsingCouponPrice,
     displayPricePolicy,
-  } = generateCoupon({
+  } = useGenerateCoupon({
     applicableCoupon,
     expectedApplicableCoupon,
   })

packages/triple-document/src/elements/tna/helpers.ts → packages/triple-document/src/elements/tna/use-generate-coupon.ts

@@ -1,15 +1,16 @@
 import { formatNumber } from '@titicaca/view-utilities'
-import { t } from 'i18next'
+import { useTranslation } from 'react-i18next'
 
 import { TnaCoupon } from './types'
 
-export function generateCoupon({
+export function useGenerateCoupon({
   applicableCoupon,
   expectedApplicableCoupon,
 }: {
   applicableCoupon?: TnaCoupon
   expectedApplicableCoupon?: TnaCoupon
 }) {
+  const { t } = useTranslation('triple-frontend')
   const { amountAfterUsingCoupon: applicableAmountAfterUsingCoupon } =
     applicableCoupon || {}
 
@@ -26,7 +27,6 @@ export function generateCoupon({
     applicableCoupon &&
     t('{{formattedApplicableAmountAfterUsingCoupon}}원', {
       formattedApplicableAmountAfterUsingCoupon,
-      ns: 'triple-frontend',
     })
 
   return {

packages/triple-document/src/index.ts

@@ -3,7 +3,7 @@ import { TripleDocument } from './triple-document'
 export { default as ELEMENTS } from './elements'
 export type { TripleElementData as TripleDocumentElementData } from './types'
 export * from './elements/text'
-export { generateCoupon } from './elements/tna/helpers'
+export { useGenerateCoupon } from './elements/tna/use-generate-coupon'
 export { Slot } from './elements/tna/slot'
 export { PricePolicyCouponInfo } from './elements/tna/price-policy-coupon-info'