From 8ef2fa35f3c7c307d282894400431d4ff6251093 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 13 Sep 2024 13:41:16 +0900
Subject: [PATCH] =?UTF-8?q?-=20=EC=99=B8=EB=B2=BD=EC=84=A0=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=ED=8C=9D=EC=97=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasMenu.jsx        | 16 +++++++---------
 src/components/floor-plan/MenuDepth01.jsx       |  2 +-
 .../modal/outerlinesetting/OuterLineWall.jsx    | 17 ++++++-----------
 3 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 2a8bde0d..65ac569d 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/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>
   )
diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx
index 1015abd1..cf0ad1e8 100644
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/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)
diff --git a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
index b743b6fe..c3217347 100644
--- a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
+++ b/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>