- modal 버그 수정

- CanvasMenu 수정

src/app/layout.js

@@ -8,6 +8,7 @@ import { ToastContainer } from 'react-toastify'
 import './globals.css'
 import '../styles/style.scss'
 import Header from '@/components/header/Header'
+import QModal from '@/components/common/modal/QModal'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -29,7 +30,7 @@ export default function RootLayout({ children }) {
             </div>
           </div>
           <ToastContainer />
-          {/*<QModal />*/}
+          <QModal />
         </RecoilRootWrapper>
       </body>
     </html>

src/components/floor-plan/CanvasMenu.jsx

@@ -1,22 +1,20 @@
 'use client'
 import { useState } from 'react'
 import MenuDepth01 from './MenuDepth01'
-import { useRecoilState } from 'recoil'
-import { modalState } from '@/store/modalAtom'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
 
-export default function CanvasMenu() {
+export default function CanvasMenu(props) {
-  const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
+  const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
   const [menuNumber, setMenuNumber] = useState(null)
   const [vertical, setVertical] = useState(true)
   const { getMessage } = useMessage()
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
   const onClickNav = (number) => {
     setMenuNumber(number)
-    if (menuNumber === number) {
+  }
-      setMenuNumber(null)
+  const menuProps = {
-    }
+    setShowOutlineModal,
   }
   return (
     <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
@@ -37,7 +35,8 @@ export default function CanvasMenu() {
           <li
             className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`}
             onClick={() => {
-              setModalOption({ ...modalOption, outerwall: true })
+              if (!showOutlineModal) setShowOutlineModal(true)
+              // setModalOption({ ...modalOption, outerwall: true })
               onClickNav(2)
             }}
           >
@@ -87,7 +86,7 @@ export default function CanvasMenu() {
                 <QSelectBox title={'瓦53A'} option={SelectOption} />
               </div>
               <div className="btn-from">
-                <button className="btn04" onClick={() => setModalOption({ ...modalOption, option: true })}></button>
+                <button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></button>
                 <button className="btn05"></button>
                 <button className="btn06"></button>
               </div>
@@ -143,7 +142,7 @@ export default function CanvasMenu() {
         </div>
       </div>
       <div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
-        {menuNumber === 2 && <MenuDepth01 />}
+        {menuNumber === 2 && <MenuDepth01 {...menuProps} />}
         {menuNumber === 3 && <MenuDepth01 />}
         {menuNumber === 4 && <MenuDepth01 />}
       </div>

src/components/floor-plan/FloorPlan.jsx

@@ -4,20 +4,35 @@ import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
 import '@/styles/contents.scss'
-import { modalState } from '@/store/modalAtom'
-import { useRecoilValue } from 'recoil'
 import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
+import { useState } from 'react'
 
 export default function FloorPlan() {
-  const modalOption = useRecoilValue(modalState)
+  const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
+  const [showOutlineModal, setShowOutlineModal] = useState(false)
+
+  const canvasSettingProps = {
+    setShowCanvasSettingModal,
+  }
+
+  const outlineProps = {
+    setShowOutlineModal,
+  }
+
+  const modalProps = {
+    setShowCanvasSettingModal,
+    showOutlineModal,
+    setShowOutlineModal,
+  }
+
   return (
     <>
       <div className="canvas-wrap">
-        <CanvasMenu />
+        <CanvasMenu {...modalProps} />
         <div className="canvas-content">
           <CanvasLayout />
-          {modalOption.option && <SettingModal01 />}
+          {showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
-          {modalOption.outerwall && <OuterLineWall />}
+          {showOutlineModal && <OuterLineWall {...outlineProps} />}
         </div>
       </div>
     </>

src/components/floor-plan/MenuDepth01.jsx

@@ -2,33 +2,42 @@
 
 import { ToggleonMouse } from '@/components/header/Header'
 import { useMessage } from '@/hooks/useMessage'
+import { useEffect, useState } from 'react'
 
-export default function MenuDepth01() {
+export default function MenuDepth01(props) {
+  const { setShowOutlineModal } = props
   const { getMessage } = useMessage()
+  const [activeMenu, setActiveMenu] = useState(0)
+  const onClickMenu = (menuNum) => {
+    setActiveMenu(menuNum)
+    setShowOutlineModal(menuNum === 0)
+  }
+
+  const menus = [
+    { id: 0, name: '外壁線を描' },
+    { id: 1, name: '補助線を描' },
+    { id: 2, name: '屋根形状設定' },
+    { id: 3, name: '軒下変更' },
+    { id: 4, name: '外壁線の上げ下げ' },
+    { id: 5, name: '銅線移動' },
+    { id: 6, name: '特殊コーナー形状' },
+  ]
+
+  useEffect(() => {
+    menus.forEach((menu) => {
+      menu.isActive = menu.id === activeMenu
+    })
+  }, [menus, activeMenu])
   return (
     <div className="canvas-depth2-inner">
       <ul className="canvas-depth2-list">
-        <li className="canvas-depth2-item active">
+        {menus.map((menu) => {
-          <button>外壁線を描</button>
+          return (
-        </li>
+            <li className={`canvas-depth2-item ${menu.id === activeMenu ? 'active' : ''}`}>
-        <li className="canvas-depth2-item">
+              <button onClick={() => onClickMenu(menu.id)}>{menu.name}</button>
-          <button>補助線を描</button>
+            </li>
-        </li>
+          )
-        <li className="canvas-depth2-item">
+        })}
-          <button>屋根形状設定</button>
-        </li>
-        <li className="canvas-depth2-item">
-          <button>軒下変更</button>
-        </li>
-        <li className="canvas-depth2-item">
-          <button>外壁線の上げ下げ</button>
-        </li>
-        <li className="canvas-depth2-item">
-          <button>銅線移動</button>
-        </li>
-        <li className="canvas-depth2-item">
-          <button>特殊コーナー形状</button>
-        </li>
       </ul>
       <ul className="canvas-depth2-btn-list">
         <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>

src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx

@@ -2,25 +2,18 @@
 
 import { useState } from 'react'
 import WithDraggable from '@/components/common/draggable/withDraggable'
-import { modalState } from '@/store/modalAtom'
-import { useRecoilState } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
 
-export default function OuterLineWall() {
+export default function OuterLineWall(props) {
-  const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
+  const { setShowOutlineModal } = props
   const [buttonAct, setButtonAct] = useState(1)
-  const [close, setClose] = useState(false)
   const { getMessage } = useMessage()
   const HandleClickClose = () => {
-    setClose(true)
+    setShowOutlineModal(false)
-    setTimeout(() => {
-      setModalOption({ ...modalOption, outerwall: false })
-      setClose(false)
-    }, 180)
   }
   return (
     <WithDraggable isShow={true}>
-      <div className={`modal-pop-wrap ssm ${modalOption.outerwall ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
+      <div className={`modal-pop-wrap ssm `}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
           <button className="modal-close" onClick={HandleClickClose}>

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -5,28 +5,18 @@ 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() {
+export default function SettingModal01(props) {
-  const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
+  const { setShowCanvasSettingModal } = props
   const [buttonAct, setButtonAct] = useState(1)
-  const [close, setClose] = useState(false)
-  const HandleClickClose = () => {
-    setClose(true)
-    setTimeout(() => {
-      setModalOption({ ...modalOption, option: false })
-      setClose(false)
-    }, 180)
-  }
   const { getMessage } = useMessage()
 
   return (
     <WithDraggable isShow={true}>
-      <div className={`modal-pop-wrap sm ${modalOption.option ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
+      <div className={`modal-pop-wrap sm`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
-          <button className="modal-close" onClick={HandleClickClose}>
+          <button className="modal-close" onClick={() => setShowCanvasSettingModal(false)}>
             닫기
           </button>
         </div>

src/store/modalAtom.js

@@ -2,8 +2,14 @@ import { atom } from 'recoil'
 
 export const modalState = atom({
   key: 'modalState',
-  default: {
+  default: false,
-    option: false,
+})
-    outerwall: false,
+
-  },
+export const modalContent = atom({
+  key: 'modalContent',
+  default: (
+    <>
+      <div>test</div>
+    </>
+  ),
 })