[Test][v14] 이슈 대응

.storybook/decorators.tsx

@@ -5,8 +5,6 @@ import { isMobile } from '../packages/triple-web-utils/src'
 import { ThemeProvider } from 'styled-components'
 import { UAParser } from 'ua-parser-js'
 
-import i18n from './i18next'
-
 export function themeDecorator(Story) {
   return (
     <ThemeProvider theme={defaultTheme}>
@@ -34,8 +32,7 @@ export function tripleWebProviderDecorator(Story, context) {
         afOnelinkSubdomain: '',
       }}
       i18nProvider={{
-        i18n,
-        lang: context.globals.locale,
+        locale: context.globals.locale,
       }}
       sessionProvider={{
         user: null,

.storybook/main.ts

@@ -16,7 +16,6 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
-    'storybook-react-i18next',
     '@chromatic-com/storybook',
   ],
   typescript: {

.storybook/preview.ts

@@ -2,7 +2,6 @@ import type { Preview } from '@storybook/react'
 import { initialize, mswLoader } from 'msw-storybook-addon'
 import { mockDateDecorator } from 'storybook-mock-date-decorator'
 import { themeDecorator, tripleWebProviderDecorator } from './decorators'
-import i18n from './i18next'
 
 // Initialize MSW
 initialize({
@@ -11,22 +10,27 @@ initialize({
 })
 
 const preview: Preview = {
-  parameters: {
-    i18n,
-  },
-
   loaders: [mswLoader],
   decorators: [mockDateDecorator, themeDecorator, tripleWebProviderDecorator],
 
   tags: ['autodocs'],
 
+  globalTypes: {
+    locale: {
+      name: 'Locale',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'ko', right: '🇰🇷', title: '한국어' },
+          { value: 'ja', right: '🇯🇵', title: '일본어' },
+          { value: 'zh-TW', right: '🇨🇳', title: '중국어(번체)' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
   initialGlobals: {
     locale: 'ko',
-    locales: {
-      ko: { title: '한국어', right: '🇰🇷' },
-      ja: { title: '일본어', right: '🇯🇵' },
-      'zh-TW': { title: '중국어(번체)', right: '🇨🇳' },
-    },
   },
 }
 

package.json

@@ -65,7 +65,6 @@
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.3.0",
     "husky": "^8.0.3",
-    "i18next": "23.15.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
@@ -78,13 +77,12 @@
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "13.5.0",
     "rimraf": "^5.0.10",
     "rollup-plugin-node-externals": "^7.1.3",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "storybook": "^8.2.9",
     "storybook-addon-swc": "^1.2.0",
     "storybook-mock-date-decorator": "^2.0.6",
-    "storybook-react-i18next": "^3.1.7",
     "styled-components": "^6.1.13",
     "stylelint": "^15.11.0",
     "ts-jest": "^29.2.5",

packages/i18n/src/index.ts

@@ -1,2 +1,3 @@
 export { locales } from './locales'
+export { interpolate } from './interpolate'
 export * from './types'

packages/i18n/src/interpolate.ts

@@ -0,0 +1,8 @@
+export const interpolate = (
+  text: string,
+  values: Record<string, string> = {},
+) => {
+  return text.replace(/{{(\w+)}}/g, (match, key) => {
+    return values[key] !== undefined ? values[key] : match
+  })
+}

packages/i18n/src/locales/en.ts

@@ -179,8 +179,7 @@ export default {
   '...더보기': '… view more',
   '포인트별 혜택 보기': 'View benefits by point',
   리뷰: 'review',
-  '{{totalReviewsCount}}개의 리뷰':
-    '<0> {{totalReviewsCount}}</0><1>reviews</1>',
+  '개의 리뷰': 'reviews',
   '{{numOfRestReviews}}개 리뷰 더보기':
     '{{numOfRestReviews}}View more dog reviews',
   '리뷰 쓰면 여행자 클럽 최대 3포인트!':
@@ -198,5 +197,5 @@ export default {
   '사진/동영상': 'Photos/Videos',
   '별점 높은순': 'Highest rating',
   '별점 낮은순': 'Lowest rating',
-  'gumae-injeung-review': 'Certified Purchase Review',
+  '구매 인증 리뷰': 'Certified Purchase Review',
 } as const

packages/i18n/src/locales/ja.ts

@@ -178,8 +178,7 @@ export default {
   '...더보기': '…もっと見る',
   '포인트별 혜택 보기': 'ポイント別特典を見る',
   리뷰: 'レビュー',
-  '{{totalReviewsCount}}개의 리뷰':
-    '<0> {{totalReviewsCount}}</0><1>個のレビュー</1>',
+  '개의 리뷰': '個のレビュー',
   '{{numOfRestReviews}}개 리뷰 더보기':
     '{{numOfRestReviews}}個のレビューをもっと見る',
   '리뷰 쓰면 여행자 클럽 최대 3포인트!':
@@ -197,5 +196,5 @@ export default {
   '사진/동영상': '写真/動画',
   '별점 높은순': '星の高い順',
   '별점 낮은순': '星の低い順',
-  'gumae-injeung-review': '購入認証レビュー',
+  '구매 인증 리뷰': '購入認証レビュー',
 } as const

packages/i18n/src/locales/ko.ts

@@ -175,8 +175,7 @@ export default {
   '...더보기': '…더보기',
   '포인트별 혜택 보기': '포인트별 혜택 보기',
   리뷰: '리뷰',
-  '{{totalReviewsCount}}개의 리뷰':
-    '<0> {{totalReviewsCount}}</0><1>개의 리뷰</1>',
+  '개의 리뷰': '개의 리뷰',
   '{{numOfRestReviews}}개 리뷰 더보기': '{{numOfRestReviews}}개 리뷰 더보기',
   '리뷰 쓰면 여행자 클럽 최대 3포인트!': '리뷰 쓰면 여행자 클럽 최대 3포인트!',
   '{{formattedApplicableAmountAfterUsingCoupon}}원':
@@ -192,5 +191,5 @@ export default {
   '사진/동영상': '사진/동영상',
   '별점 높은순': '별점 높은순',
   '별점 낮은순': '별점 낮은순',
-  'gumae-injeung-review': '구매 인증 리뷰',
+  '구매 인증 리뷰': '구매 인증 리뷰',
 } as const

packages/i18n/src/locales/zh-TW.ts

@@ -168,8 +168,7 @@ export default {
   '...더보기': '...查看更多',
   '포인트별 혜택 보기': '查看點數優惠',
   리뷰: '評論',
-  '{{totalReviewsCount}}개의 리뷰':
-    '<0> {{totalReviewsCount}}</0><1>個評論</1>',
+  '개의 리뷰': '個評論',
   '{{numOfRestReviews}}개 리뷰 더보기': '查看剩餘{{numOfRestReviews}}個評論',
   '리뷰 쓰면 여행자 클럽 최대 3포인트!':
     '撰寫評論時，最多可獲得旅行者俱樂部3點獎勵！',

packages/meta-tags/package.json

@@ -41,19 +41,13 @@
     ]
   },
   "devDependencies": {
-    "@titicaca/i18n": "workspace:*",
     "@titicaca/triple-web": "workspace:*",
-    "i18next": "^23.15.1",
     "next": "^14.2.9",
-    "react": "^18.3.1",
-    "react-i18next": "^13.5.0"
+    "react": "^18.3.1"
   },
   "peerDependencies": {
-    "@titicaca/i18n": "*",
     "@titicaca/triple-web": "*",
-    "i18next": "*",
     "next": "^13.4 || ^14.0",
-    "react": "^18.0",
-    "react-i18next": "*"
+    "react": "^18.0"
   }
 }

packages/meta-tags/src/facebook-app-link-meta.tsx

@@ -1,6 +1,5 @@
 import Head from 'next/head'
-import { useTranslation } from 'react-i18next'
-import { useEnv } from '@titicaca/triple-web'
+import { useEnv, useTranslation } from '@titicaca/triple-web'
 
 import { DEFAULT_APP_ID, DEFAULT_APP_PACKAGE_NAME } from './constants'
 
@@ -15,7 +14,7 @@ export function FacebookAppLinkMeta({
   appPath?: string
   appPackageName?: string
 }) {
-  const { t } = useTranslation('triple-frontend')
+  const t = useTranslation()
 
   const { appUrlScheme } = useEnv()
 

packages/router/package.json

@@ -46,21 +46,15 @@
     "qs": "^6.12.3"
   },
   "devDependencies": {
-    "@titicaca/i18n": "workspace:*",
     "@titicaca/triple-web": "workspace:*",
     "@titicaca/triple-web-test-utils": "workspace:*",
     "@types/qs": "^6.9.15",
-    "i18next": "^23.15.1",
     "next": "^14.2.9",
-    "react": "^18.3.1",
-    "react-i18next": "^13.5.0"
+    "react": "^18.3.1"
   },
   "peerDependencies": {
-    "@titicaca/i18n": "*",
     "@titicaca/triple-web": "*",
-    "i18next": "*",
     "next": "^13.4 || ^14.0",
-    "react": "^18.0",
-    "react-i18next": "*"
+    "react": "^18.0"
   }
 }

packages/router/src/common/disabled-link-notifier.ts

@@ -1,9 +1,9 @@
-import { useTranslation } from 'react-i18next'
 import {
   useClientApp,
   useLoginCtaModal,
   useSessionAvailability,
   useAppInstallCtaModal,
+  useTranslation,
 } from '@titicaca/triple-web'
 
 export type AllowSource = 'all' | 'app' | 'app-with-session' | 'none'
@@ -22,7 +22,7 @@ export function useDisabledLinkNotifierCreator({
 }: {
   alert?: (message: string) => void
 } = {}) {
-  const { t } = useTranslation('triple-frontend')
+  const t = useTranslation()
   const app = useClientApp()
   const sessionAvailable = useSessionAvailability()
   const { show: showAppInstallCtaModal } = useAppInstallCtaModal()

packages/standard-action-handler/package.json

@@ -47,17 +47,13 @@
     "qs": "^6.12.3"
   },
   "devDependencies": {
-    "@titicaca/i18n": "workspace:*",
     "@titicaca/triple-web": "workspace:*",
     "@types/qs": "^6.9.15",
-    "i18next": "^23.15.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "peerDependencies": {
-    "@titicaca/i18n": "*",
     "@titicaca/triple-web": "*",
-    "i18next": "*",
     "react": "^18.0",
     "react-dom": "^18.0"
   }

packages/standard-action-handler/src/copy-to-clipboard.ts

@@ -1,21 +1,21 @@
-import { t } from 'i18next'
 import qs from 'qs'
 
 import { createClipboardCopier } from './services/copy'
 import { WebActionParams } from './types'
 
 export default async function copyToClipboard({
   url: { query, path } = {},
+  t,
 }: WebActionParams) {
   if (path === '/web-action/copy-to-clipboard' && query) {
     const { text } = qs.parse(query || '') as { text?: string }
 
-    if (text && t) {
+    if (text) {
       const textClipboardCopier = createClipboardCopier()
 
       textClipboardCopier({
         text,
-        message: t('클립보드에 복사되었습니다.', { ns: 'triple-frontend' }),
+        message: t('클립보드에 복사되었습니다.'),
       })
     }
 

packages/standard-action-handler/src/handler.ts

@@ -4,17 +4,20 @@ import { WebAction, ContextOptions, NavigateOptions } from './types'
 
 export default class Handler {
   private options: ContextOptions
-
+  private t: (key: string, values?: object) => string
   private handlers: WebAction[]
 
   public constructor({
     handlers,
+    t,
     options,
   }: {
     handlers: WebAction[]
+    t: (key: string, values?: object) => string
     options: ContextOptions
   }) {
     this.handlers = handlers
+    this.t = t
     this.options = options
   }
 
@@ -25,6 +28,7 @@ export default class Handler {
       for (const handler of this.handlers) {
         const result = await handler({
           url: parsedUrl,
+          t: this.t,
           options: this.options,
           handler: this,
         })

packages/standard-action-handler/src/hook.ts

@@ -1,18 +1,25 @@
 import { useNavigate, useExternalRouter } from '@titicaca/router'
-import { useClientApp, useAppInstallCtaModal } from '@titicaca/triple-web'
+import {
+  useClientApp,
+  useAppInstallCtaModal,
+  useTranslation,
+} from '@titicaca/triple-web'
 
 import { initialize } from './initialize'
+import { ContextOptions } from './types'
 
-export function useStandardActionHandler() {
+export function useStandardActionHandler(options?: ContextOptions) {
   const { navigate } = useNavigate()
   const routeExternally = useExternalRouter()
   const { show } = useAppInstallCtaModal()
   const app = useClientApp()
+  const t = useTranslation()
 
-  return initialize({
+  return initialize(t, {
     navigate,
     routeExternally,
     showAppInstallCtaModal: show,
     app,
+    ...options,
   })
 }