chore:#9 recoil wrapper 생성

MJU-Letter · Mar 14, 2024 · f4f9d44 · f4f9d44
1 parent e55754c
commit f4f9d44
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/src/app/(social)/detail/page.tsx b/src/app/(social)/detail/page.tsx
@@ -1,5 +1,4 @@
 import MainDetail from "@/components/templates/social/mainDetail/MainDetail";
-import React from "react";
 
 const page = () => {
   return (

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 import logo from "../../public/icons/logo.png";
 import "../styles/globals.css";
 import Navigation from "@/components/organisms/navigation/navigation/Navigation";
+import RecoilRootWrapper from "@/recoil/recoilRootWrapper";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -18,22 +19,24 @@ export default function RootLayout({
   return (
     <html lang="en" className=" bg-main-background">
       <body className="flex justify-center">
-        <figure className="hidden tablet:flex tablet:h-screen tablet:items-center tablet:pr-[216px] transition-opacity duration-500 ease-in-out opacity-0 tablet:opacity-100">
-          <Image
-            className="w-419 h-198 object-contain "
-            src={logo}
-            alt="logo"
-          />
-        </figure>
-        <main
-          id="modal"
-          className="flex flex-col items-center  relative  w-fit "
-        >
-          <header className="w-full mb-76">
-            <Navigation />
-          </header>
-          {children}
-        </main>
+        <RecoilRootWrapper>
+          <figure className="hidden tablet:flex tablet:h-screen tablet:items-center tablet:pr-[216px] transition-opacity duration-500 ease-in-out opacity-0 tablet:opacity-100">
+            <Image
+              className="w-419 h-198 object-contain "
+              src={logo}
+              alt="logo"
+            />
+          </figure>
+          <main
+            id="modal"
+            className="flex flex-col items-center  relative  w-fit "
+          >
+            <header className="w-full mb-76">
+              <Navigation />
+            </header>
+            {children}
+          </main>
+        </RecoilRootWrapper>
       </body>
     </html>
   );

diff --git a/src/recoil/recoilRootWrapper.tsx b/src/recoil/recoilRootWrapper.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { RecoilRoot } from "recoil";
+import React from "react";
+
+interface RecoilRootWrapperProps {
+  children: React.ReactNode;
+}
+
+export default function RecoilRootWrapper({
+  children,
+}: RecoilRootWrapperProps) {
+  return <RecoilRoot>{children}</RecoilRoot>;
+}