change language #245 (#246)

### What problem does this PR solve?

change language

Issue link: #245



- [x] New Feature (non-breaking change which adds functionality)

web/src/app.tsx

@@ -1,7 +1,26 @@
-import { App, ConfigProvider } from 'antd';
-import { ReactNode } from 'react';
+import i18next from '@/locales/config';
+import { App, ConfigProvider, ConfigProviderProps } from 'antd';
+import enUS from 'antd/locale/en_US';
+import zhCN from 'antd/locale/zh_CN';
+import React, { ReactNode, useEffect, useState } from 'react';
+import storage from './utils/authorizationUtil';
+
+type Locale = ConfigProviderProps['locale'];
+
+const RootProvider = ({ children }: React.PropsWithChildren) => {
+  const getLocale = (lng: string) => (lng === 'zh' ? zhCN : enUS);
+
+  const [locale, setLocal] = useState<Locale>(getLocale(storage.getLanguage()));
+
+  i18next.on('languageChanged', function (lng: string) {
+    storage.setLanguage(lng);
+    setLocal(getLocale(lng));
+  });
+
+  useEffect(() => {
+    i18next.changeLanguage(storage.getLanguage());
+  }, [locale]);
 
-export function rootContainer(container: ReactNode) {
   return (
     <ConfigProvider
       theme={{
@@ -9,8 +28,13 @@ export function rootContainer(container: ReactNode) {
           fontFamily: 'Inter',
         },
       }}
+      locale={locale}
     >
-      <App> {container}</App>
+      <App> {children}</App>
     </ConfigProvider>
   );
+};
+
+export function rootContainer(container: ReactNode) {
+  return <RootProvider>{container}</RootProvider>;
 }