Merge pull request #382 from 42connected/feature/#378-recoil

[Feature] recoil #378

package.json

@@ -54,6 +54,7 @@
     "react-slick": "^0.29.0",
     "react-table": "^7.8.0",
     "react-to-print": "^2.14.7",
+    "recoil": "^0.7.6",
     "serve": "^14.0.1",
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.5",

src/components/common/Providers.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { RecoilRoot } from 'recoil';
 
 import defaultThemeV1 from '@/styles/theme';
 import defaultThemeV2 from '@/styles/themeV2';
@@ -23,12 +24,14 @@ function Providers({ children }: Props) {
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={defaultThemeV1}>
-          <ThemeProvider theme={defaultThemeV2}>
-            <Router basename="/">{children}</Router>
-            <ReactQueryDevtools initialIsOpen={false} />
+        <RecoilRoot>
+          <ThemeProvider theme={defaultThemeV1}>
+            <ThemeProvider theme={defaultThemeV2}>
+              <Router basename="/">{children}</Router>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </ThemeProvider>
           </ThemeProvider>
-        </ThemeProvider>
+        </RecoilRoot>
       </QueryClientProvider>
     </>
   );

src/recoil/atoms/index.ts

@@ -0,0 +1 @@
+export * from './modalAtom';

src/recoil/atoms/modalAtom.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isModalOpenState = atom({
+  key: 'isModalOpenState',
+  default: false,
+});

tsconfig.paths.json

@@ -13,7 +13,8 @@
       "@/states/*": ["src/states/*"],
       "@/styles/*": ["src/styles/*"],
       "@/utils/*": ["src/utils/*"],
-      "@/services/*": ["src/services/*"]
+      "@/services/*": ["src/services/*"],
+      "@/recoil/*": ["src/recoil/*"]
     }
   }
 }