From a7d725cff00bffd1cd9c24ac61485b91196594ab Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Thu, 8 Aug 2024 14:39:00 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20modal=20=EC=A0=84=EC=97=AD=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.js                      | 13 +++++++++----
 src/components/Intro.jsx               | 24 +++++++++++++++++++-----
 src/components/common/modal/QModal.jsx | 12 ++++++++++--
 src/store/modalAtom.js                 | 15 +++++++++++++++
 4 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 src/store/modalAtom.js

diff --git a/src/app/layout.js b/src/app/layout.js
index 76b9ad73..72ac7bf3 100644
--- a/src/app/layout.js
+++ b/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>
   )
diff --git a/src/components/Intro.jsx b/src/components/Intro.jsx
index ac8ef580..35b5b872 100644
--- a/src/components/Intro.jsx
+++ b/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>
diff --git a/src/components/common/modal/QModal.jsx b/src/components/common/modal/QModal.jsx
index 60ce318c..1cf01915 100644
--- a/src/components/common/modal/QModal.jsx
+++ b/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>
diff --git a/src/store/modalAtom.js b/src/store/modalAtom.js
new file mode 100644
index 00000000..a9a708ac
--- /dev/null
+++ b/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>
+    </>
+  ),
+})