1 files changed, 67 insertions, 0 deletions
diff --git a/i18n/client.ts b/i18n/client.ts
new file mode 100644
index 00000000..0cb38f22
--- /dev/null
+++ b/i18n/client.ts
@@ -0,0 +1,67 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import i18next, { FlatNamespace, KeyPrefix } from 'i18next';
+import {
+  initReactI18next,
+  useTranslation as useTranslationOrg,
+  UseTranslationOptions,
+  UseTranslationResponse,
+  FallbackNs,
+} from 'react-i18next';
+import { useCookies } from 'react-cookie';
+import resourcesToBackend from 'i18next-resources-to-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { getOptions, languages, cookieName } from '@/i18n/settings';
+
+const runsOnServerSide = typeof window === 'undefined';
+
+i18next
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .use(
+    resourcesToBackend(
+      (language: string, namespace: string) =>
+        import(`./locales/${language}/${namespace}.json`)
+    )
+  )
+  .init({
+    ...getOptions(),
+    lng: 'ko',
+    detection: {
+      order: ['path', 'htmlTag', 'cookie', 'navigator'],
+    },
+    preload: runsOnServerSide ? languages : [],
+  });
+
+export function useTranslation<
+  Ns extends FlatNamespace,
+  KPrefix extends KeyPrefix<FallbackNs<Ns>> = undefined,
+>(
+  lng: string,
+  ns?: Ns,
+  options?: UseTranslationOptions<KPrefix>
+): UseTranslationResponse<FallbackNs<Ns>, KPrefix> {
+  1;
+  const [cookies, setCookie] = useCookies([cookieName]);
+  const ret = useTranslationOrg(ns, options);
+  const { i18n } = ret;
+  if (runsOnServerSide && lng && i18n.resolvedLanguage !== lng) {
+    i18n.changeLanguage(lng);
+  } else {
+    const [activeLng, setActiveLng] = useState(i18n.resolvedLanguage);
+    useEffect(() => {
+      if (activeLng === i18n.resolvedLanguage) return;
+      setActiveLng(i18n.resolvedLanguage);
+    }, [activeLng, i18n.resolvedLanguage]);
+    useEffect(() => {
+      if (!lng || i18n.resolvedLanguage === lng) return;
+      i18n.changeLanguage(lng);
+    }, [lng, i18n]);
+    useEffect(() => {
+      if (cookies.i18next === lng) return;
+      setCookie(cookieName, lng, { path: '/home' });
+    }, [lng, cookies.i18next]);
+  }
+  return ret;
+}