From bc79529de3fa7c1cf557a909e5a4422c147aefc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=A7=84?= <orobos654@gmail.com>
Date: Wed, 18 Sep 2024 17:48:09 +0900
Subject: [PATCH] chore: use i18n in storybook

---
 .storybook/preview.tsx | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 323de9d..387b46d 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview, StoryFn } from '@storybook/react';
 
 import 'src/shared/styles/global.css';
 import 'src/shared/styles/variables.css';
@@ -9,6 +9,31 @@ import { MemoryRouter } from 'react-router';
 import { Suspense } from 'react';
 import { ToastOption } from 'src/shared/ui/Toast/toastOption';
 import { Toaster } from 'react-hot-toast';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
+import i18next from 'i18next';
+import Backend from 'i18next-http-backend';
+import i18n from '../src/app/i18n';
+
+const withI18next = (Story: StoryFn) => {
+  i18next
+    .use(initReactI18next)
+    .use(Backend)
+    .init({
+      ...i18n,
+      backend: { loadPath: '../public/locales/{{lng}}/{{ns}}.json' },
+      detection: {
+        order: ['htmlTag'],
+        caches: [],
+      },
+    });
+  return (
+    <Suspense fallback={<div>loading translations...</div>}>
+      <I18nextProvider i18n={i18next}>
+        <Story />
+      </I18nextProvider>
+    </Suspense>
+  );
+};
 
 const preview: Preview = {
   parameters: {
@@ -26,6 +51,7 @@ const preview: Preview = {
     },
   },
   decorators: [
+    withI18next,
     (Story) => (
       <MemoryRouter initialEntries={['/']}>
         <IdealPartnerProvider>