- 외벽선 설정 팝업 수정

src/components/floor-plan/CanvasMenu.jsx

@@ -42,8 +42,6 @@ export default function CanvasMenu(props) {
           <li
             className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`}
             onClick={() => {
-              if (!showOutlineModal) setShowOutlineModal(true)
-              // setModalOption({ ...modalOption, outerwall: true })
               onClickNav(2)
             }}
           >
@@ -85,10 +83,12 @@ export default function CanvasMenu(props) {
                 <button className="btn02 active"></button>
                 <button className="btn03 "></button>
               </div>
-              <div className={`vertical-horizontal ${vertical ? 'on' : ''}`}>
-                <span>{getMessage('plan.mode.vertical.horizontal')}</span>
-                <button onClick={() => setVertical(!vertical)}>{vertical ? 'ON' : 'OFF'}</button>
-              </div>
+              {menuNumber !== 4 && (
+                <div className={`vertical-horizontal ${vertical ? 'on' : ''}`}>
+                  <span>{getMessage('plan.mode.vertical.horizontal')}</span>
+                  <button onClick={() => setVertical(!vertical)}>{vertical ? 'ON' : 'OFF'}</button>
+                </div>
+              )}
               <div className="select-box">
                 <QSelectBox title={'瓦53A'} option={SelectOption} />
               </div>
@@ -149,9 +149,7 @@ export default function CanvasMenu(props) {
         </div>
       </div>
       <div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
-        {menuNumber === 2 && <MenuDepth01 {...menuProps} />}
-        {menuNumber === 3 && <MenuDepth01 {...menuProps} />}
-        {menuNumber === 4 && <MenuDepth01 {...menuProps} />}
+        {(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) && <MenuDepth01 {...menuProps} />}
       </div>
     </div>
   )

src/components/floor-plan/MenuDepth01.jsx

@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react'
 export default function MenuDepth01(props) {
   const { setShowOutlineModal, type } = props
   const { getMessage } = useMessage()
-  const [activeMenu, setActiveMenu] = useState(0)
+  const [activeMenu, setActiveMenu] = useState()
   const onClickMenu = (menuNum) => {
     setActiveMenu(menuNum)
     setShowOutlineModal(menuNum === 0)

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

@@ -1,8 +1,7 @@
 'use client'
 
-import { useCallback, useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import WithDraggable from '@/components/common/draggable/withDraggable'
-import { modalState } from '@/store/modalAtom'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
@@ -19,8 +18,8 @@ import {
 import { QLine } from '@/components/fabric/QLine'
 import { useLine } from '@/hooks/useLine'
 
-export default function OuterLineWall() {
-  const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
+export default function OuterLineWall(props) {
+  const { showOutlineModal, setShowOutlineModal } = props
   const { getMessage } = useMessage()
   const { addCanvasMouseEventListener, addDocumentEventListener, removeAllDocumentEventListeners } = useEvent()
   const { addLineText, removeLineText } = useLine()
@@ -339,10 +338,6 @@ export default function OuterLineWall() {
     setPoints((prev) => prev.slice(0, prev.length - 1))
   }
 
-  const handleClickClose = () => {
-    setModalOption({ ...modalOption, outerwall: false })
-  }
-
   const handleFix = () => {
     setPoints((prev) => {
       if (prev.length === 0) {
@@ -352,11 +347,11 @@ export default function OuterLineWall() {
     })
   }
   return (
-    <WithDraggable isShow={true}>
-      <div className={`modal-pop-wrap ssm ${modalOption.outerwall ? 'mount' : ''} `}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: -1000 + 50 }}>
+      <div className={`modal-pop-wrap ssm ${showOutlineModal ? 'mount' : ''} `}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
-          <button className="modal-close" onClick={handleClickClose}>
+          <button className="modal-close" onClick={() => setShowOutlineModal(false)}>
             닫기
           </button>
         </div>