refactor: modal 전역으로 코드 수정

src/app/layout.js

@@ -1,11 +1,15 @@
 import { Inter } from 'next/font/google'
-import './globals.css'
-import '../styles/style.scss'
-import Headers from '@/components/Headers'
+
 import RecoilRootWrapper from './RecoilWrapper'
 import UIProvider from './UIProvider'
 import { headers } from 'next/headers'
+import Headers from '@/components/Headers'
+
 import { ToastContainer } from 'react-toastify'
+import QModal from '@/components/common/modal/QModal'
+
+import './globals.css'
+import '../styles/style.scss'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -25,8 +29,9 @@ export default function RootLayout({ children }) {
         {headerPathname !== '/login' && <Headers />}
         <RecoilRootWrapper>
           <UIProvider>{children}</UIProvider>
+          <QModal />
+          <ToastContainer />
         </RecoilRootWrapper>
-        <ToastContainer />
       </body>
     </html>
   )

src/components/Intro.jsx

@@ -4,6 +4,9 @@ import { useEffect, useMemo, useState } from 'react'
 
 import Link from 'next/link'
 
+import { useRecoilState } from 'recoil'
+import { modalContent, modalState } from '@/store/modalAtom'
+
 import { AxiosType, useAxios } from '@/hooks/useAxios'
 
 import { Button } from '@nextui-org/react'
@@ -11,13 +14,12 @@ import { Button } from '@nextui-org/react'
 import SingleDatePicker from './common/datepicker/SingleDatePicker'
 import RangeDatePicker from './common/datepicker/RangeDatePicker'
 import QGrid from './common/grid/QGrid'
-import QModal from './common/modal/QModal'
 import { QToast } from '@/hooks/useToast'
 
 export default function Intro() {
   const { get } = useAxios()
 
-  const [open, setOpen] = useState(false)
+  // const [open, setOpen] = useState(false)
   const [startDate, setStartDate] = useState(new Date())
   const singleDatePickerProps = {
     startDate,
@@ -40,6 +42,9 @@ export default function Intro() {
     isPageable: false,
   })
 
+  const [open, setOpen] = useRecoilState(modalState)
+  const [contents, setContent] = useRecoilState(modalContent)
+
   const modelProps = {
     open,
     setOpen,
@@ -101,10 +106,19 @@ export default function Intro() {
       <div className="my-2">
         <div className="text-2xl">QModal</div>
         <div>
-          <Button color="primary" onClick={() => setOpen(true)}>
+          {/* <Button color="primary" onClick={() => setOpen(true)}>
+            Open Modal
+          </Button>
+          <QModal {...modelProps}>{ipsum}</QModal> */}
+          <Button
+            color="primary"
+            onClick={() => {
+              setContent(ipsum)
+              setOpen(true)
+            }}
+          >
             Open Modal
           </Button>
-          <QModal {...modelProps}>{ipsum}</QModal>
         </div>
       </div>
       <div className="my-2">
@@ -119,7 +133,7 @@ export default function Intro() {
               })
             }}
           >
-            Open Modal
+            Open Toast
           </Button>
         </div>
       </div>

src/components/common/modal/QModal.jsx

@@ -1,8 +1,16 @@
+'use client'
+
+import { useRecoilState, useRecoilValue } from 'recoil'
+
 import { Modal } from 'react-responsive-modal'
+
+import { modalContent, modalState } from '@/store/modalAtom'
+
 import 'react-responsive-modal/styles.css'
 
-export default function QModal(props) {
-  const { open, setOpen, children } = props
+export default function QModal() {
+  const [open, setOpen] = useRecoilState(modalState)
+  const children = useRecoilValue(modalContent)
 
   return (
     <Modal open={open} onClose={() => setOpen(false)} center>

src/store/modalAtom.js

@@ -0,0 +1,15 @@
+import { atom } from 'recoil'
+
+export const modalState = atom({
+  key: 'modalState',
+  default: false,
+})
+
+export const modalContent = atom({
+  key: 'modalContent',
+  default: (
+    <>
+      <div>test</div>
+    </>
+  ),
+})