첫 커밋

src/app/app-children.tsx

@@ -0,0 +1,6 @@
+import { useNativeNavigateListener } from './lib/use-native-navigate-listener';
+
+export const AppChildren = () => {
+  useNativeNavigateListener();
+  return <></>;
+};

src/app/app.tsx

@@ -0,0 +1,19 @@
+import '@/bridge';
+import { router } from '@/shared/configs/sentry';
+import { Toasts } from '@/shared/ui/toasts/toasts';
+import { TopButton } from '@/widgets/top-button';
+import { useInitTheme } from './hooks';
+import { IOSStatusBar } from '@/widgets/ios-status-bar';
+import { RouterProvider } from 'react-router-dom';
+
+export const App = () => {
+  useInitTheme();
+  return (
+    <>
+      <RouterProvider router={router} />
+      <Toasts />
+      <TopButton />
+      <IOSStatusBar />
+    </>
+  );
+};

src/app/hooks/index.tsx

@@ -0,0 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
+export * from './use-redirect';
+export * from './use-init-theme';
+

src/app/hooks/use-init-theme.ts

@@ -0,0 +1,8 @@
+import { config } from '@/shared/configs';
+import { useEffectOnce } from 'react-use';
+
+export const useInitTheme = () => {
+  useEffectOnce(() => {
+    document.body.classList.add(config.APP_NAME);
+  });
+};

src/app/hooks/use-noti-bar.ts

@@ -0,0 +1,20 @@
+import { notiBar } from '@/shared/lib';
+import { useStore } from '@/shared/model/store';
+import { useEffect } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+
+export const useNotiBar = () => {
+  const [notiBarMessage, setNotiBarMessage] = useStore(
+    useShallow((state: any) => [
+      state.utilEventSlice.notiBarMessage, 
+      state.utilEventSlice.setNotiBarMessage
+    ])
+  );
+
+  useEffect(() => {
+    if(notiBarMessage) {
+      notiBar(notiBarMessage);
+      setNotiBarMessage('');
+    }
+  }, [notiBarMessage]);
+};

src/app/hooks/use-redirect.ts

@@ -0,0 +1,17 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+import { StorageKeys } from '@/shared/constants/local-storage';
+import useLocalStorageState from 'use-local-storage-state';
+
+export const useRedirect = () => {
+  const navigate = useNavigate();
+  const [path, , { removeItem }] = useLocalStorageState(StorageKeys.RedirectPath);
+
+  useEffect(() => {
+    if(path){
+      // navigate(path);
+      removeItem();
+    }
+  }, [path]);
+};

src/app/i18n.ts

@@ -0,0 +1,20 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { kr, en } from '@/shared/constants/locales';
+export const defaultNS = 'common';
+export const resources = {
+  kr: kr,
+  ex: en,
+} as const;
+
+i18n.use(initReactI18next).init({
+  defaultNS,
+  resources,
+  fallbackLng: ['kr', 'en'],
+  lng: 'kr',
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;

src/app/index.tsx

@@ -0,0 +1,27 @@
+// import '@/shared/ui/assets/styles/index.scss';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './app';
+import { initAxios } from '@/shared/configs/axios';
+import { initSentry } from '@/shared/configs/sentry';
+import { AppProvider } from './providers/app-provider';
+
+const initApp = async () => {
+  initAxios();
+  initSentry();
+};
+
+(async () => {
+  await initApp();
+  const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+  root.render(
+    <React.StrictMode>
+      <AppProvider>
+        <App />
+      </AppProvider>
+    </React.StrictMode>,
+  );
+  // If you want to start measuring performance in your app, pass a function
+  // to log results (for example: reportWebVitals(console.log))
+  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+})();

src/app/lib/use-native-navigate-listener.ts

@@ -0,0 +1,15 @@
+import { bridge } from '@/bridge';
+import { PathType } from '@/shared/constants/paths';
+import { useEffect } from 'react';
+import { useNavigate } from '@/shared/lib/hooks';
+import { NativeMessage } from '@/shared/constants/native-message';
+
+export const useNativeNavigateListener = () => {
+  const { navigate } = useNavigate();
+  useEffect(() => {
+    // Subscribe to events from react native.
+    return bridge.addEventListener(NativeMessage.WebViewNavigate, (message: any) => {
+      navigate(message.path as PathType);
+    });
+  }, []);
+};

src/app/providers/app-provider.tsx

@@ -0,0 +1,28 @@
+import { Splash } from '@/widgets/splash/splash';
+import { Suspense } from 'react';
+import { RecoilRoot } from 'recoil';
+import { CookiesProvider } from 'react-cookie';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { GlobalErrorBoundary } from '@/widgets/error-boundaries';
+import { getGlobalQueryClient } from '@/shared/configs/query';
+
+interface AppProviderProps {
+  children: React.ReactNode;
+};
+
+export const AppProvider = ({ 
+  children
+}: AppProviderProps) => {
+  return (
+    <GlobalErrorBoundary>
+      <RecoilRoot>
+        <QueryClientProvider client={getGlobalQueryClient()}>
+          <Suspense fallback={<Splash />}>
+            <CookiesProvider>{children}</CookiesProvider>
+            {/* <ReactQueryDevtools /> */}
+          </Suspense>
+        </QueryClientProvider>
+      </RecoilRoot>
+    </GlobalErrorBoundary>
+  );
+};