From 34d7372c35d08694090b56af3c667188a32c3815 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 12 Sep 2024 10:14:23 +0900
Subject: [PATCH] =?UTF-8?q?-=20Canvas=20=EC=84=A4=EC=A0=95,=20=EC=99=B8?=
 =?UTF-8?q?=EB=B2=BD=EC=84=A0=20=EA=B7=B8=EB=A6=AC=EA=B8=B0=20Modal=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20-=20=EC=99=B8=EB=B2=BD=EC=84=A0=20?=
 =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EA=B8=B0=20Modal=20open=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasMenu.jsx                 | 8 +++++++-
 .../floor-plan/modal/setting01/SettingModal01.jsx        | 9 ++++++---
 src/store/modalAtom.js                                   | 4 ++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index cf5ada46..45896d96 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -34,7 +34,13 @@ export default function CanvasMenu() {
               {getMessage('plan.menu.placement.surface.initial.setting')}
             </button>
           </li>
-          <li className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`} onClick={() => onClickNav(2)}>
+          <li
+            className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`}
+            onClick={() => {
+              setModalOption({ ...modalOption, outerwall: true })
+              onClickNav(2)
+            }}
+          >
             <button>
               <span className="menu-icon con02"></span>
               {getMessage('plan.menu.root.cover')}
diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
index 6350438d..6b720cae 100644
--- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx
+++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
@@ -5,14 +5,17 @@ import FirstOption from './FirstOption'
 import WithDraggable from '@/components/common/draggable/withDraggable'
 import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
 import { useMessage } from '@/hooks/useMessage'
+import { modalState } from '@/store/modalAtom'
+import { useRecoilState } from 'recoil'
 
-export default function SettingModal01({ modalOpen, setModalOpen }) {
+export default function SettingModal01() {
+  const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
   const [buttonAct, setButtonAct] = useState(1)
   const [close, setClose] = useState(false)
   const HandleClickClose = () => {
     setClose(true)
     setTimeout(() => {
-      setModalOpen('')
+      setModalOption({ ...modalOption, option: false })
       setClose(false)
     }, 180)
   }
@@ -20,7 +23,7 @@ export default function SettingModal01({ modalOpen, setModalOpen }) {
 
   return (
     <WithDraggable isShow={true}>
-      <div className={`modal-pop-wrap sm ${modalOpen === 'option' && close === false ? 'mount' : ''}${close ? 'unmount' : ''} `}>
+      <div className={`modal-pop-wrap sm ${modalOption.option ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
           <button className="modal-close" onClick={HandleClickClose}>
diff --git a/src/store/modalAtom.js b/src/store/modalAtom.js
index fe3b6716..819669a1 100644
--- a/src/store/modalAtom.js
+++ b/src/store/modalAtom.js
@@ -3,7 +3,7 @@ import { atom } from 'recoil'
 export const modalState = atom({
   key: 'modalState',
   default: {
-    option: true,
-    outerwall: true,
+    option: false,
+    outerwall: false,
   },
 })