From a7c21830f89e430b05f2b90b0ca5d5994692b864 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 31 Oct 2024 18:07:51 +0900
Subject: [PATCH] =?UTF-8?q?modal=20class=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/context-menu/QContextMenu.jsx         | 16 ++++++++++++++--
 src/components/floor-plan/MenuDepth01.jsx        |  6 +++++-
 .../floor-plan/modal/auxiliary/AuxiliaryCopy.jsx |  2 +-
 .../floor-plan/modal/auxiliary/AuxiliaryMove.jsx |  2 +-
 .../floor-plan/modal/auxiliary/AuxiliarySize.jsx |  2 +-
 .../modal/dimensionLine/DimensionLineSetting.jsx | 13 +++++++------
 .../modal/flowDirection/FlowDirectionSetting.jsx |  2 +-
 .../floor-plan/modal/image/ImageSizeSetting.jsx  |  2 +-
 .../modal/module/CircuitNumberEdit.jsx           |  2 +-
 .../modal/module/column/ColumnInsert.jsx         |  2 +-
 .../modal/module/column/ColumnRemove.jsx         |  2 +-
 .../floor-plan/modal/module/row/RowInsert.jsx    |  2 +-
 .../floor-plan/modal/module/row/RowRemove.jsx    |  2 +-
 .../floor-plan/modal/object/DormerOffset.jsx     |  2 +-
 .../floor-plan/modal/object/ObjectSetting.jsx    |  4 ++--
 .../modal/object/RoofMaterialSetting.jsx         |  6 +++---
 .../roofAllocation/RoofAllocationSetting.jsx     |  2 +-
 17 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx
index d1d73df3..f710485f 100644
--- a/src/components/common/context-menu/QContextMenu.jsx
+++ b/src/components/common/context-menu/QContextMenu.jsx
@@ -2,12 +2,14 @@
 import { useEffect } from 'react'
 import '@/styles/contents.scss'
 import { useRecoilState } from 'recoil'
-import { contextMenuState } from '@/store/contextMenu'
+import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
 
 export default function QContextMenu(props) {
   const { contextRef, canvasProps, handleKeyup } = props
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
+  const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
   const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
+
   let contextType = ''
 
   if (activeObject) {
@@ -19,12 +21,22 @@ export default function QContextMenu(props) {
     }
   }
 
+  const getYPosition = (e) => {
+    const contextLength = contextMenuList.reduce((acc, cur, index) => {
+      return acc + cur.length
+    }, 0)
+    return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
+  }
   useEffect(() => {
     if (!contextRef.current) return
 
     const handleContextMenu = (e) => {
       // e.preventDefault() //기존 contextmenu 막고
-      setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
+      const position = {
+        x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
+        y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
+      }
+      setContextMenu({ visible: true, ...position })
       document.addEventListener('keyup', (e) => handleKeyup(e))
       canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx
index 63e5e67a..351fdc97 100644
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/src/components/floor-plan/MenuDepth01.jsx
@@ -15,7 +15,11 @@ export default function MenuDepth01() {
   const subMenus = useRecoilValue(subMenusState)
 
   const onClickMenu = ({ id, menu }) => {
-    setCurrentMenu(menu)
+    if (menu === currentMenu) {
+      handleMenu(type)
+    } else {
+      setCurrentMenu(menu)
+    }
   }
 
   useEffect(() => {
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx
index e4654e4a..32ffc78d 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx
@@ -14,7 +14,7 @@ export default function AuxiliaryCopy(props) {
   const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.auxiliary.copy')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
index c6918d9c..733173b4 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
@@ -16,7 +16,7 @@ export default function AuxiliaryMove(props) {
   const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.auxiliary.move')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
index a7828223..70245626 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
@@ -11,7 +11,7 @@ export default function AuxiliarySize(props) {
   const { closePopup } = usePopup()
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
index 8a775c49..7f981dce 100644
--- a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
@@ -1,17 +1,16 @@
-import { useState, useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import QSelectBox from '@/components/common/select/QSelectBox'
-import { pitchTextSelector } from '@/store/canvasAtom'
+import { canvasState, pitchTextSelector } from '@/store/canvasAtom'
 import { defaultSlope } from '@/store/commonAtom'
-import { canvasState } from '@/store/canvasAtom'
 
 export default function DimensionLineSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
-  const { id, setIsShow, pos = contextPopupPosition } = props
+  let { id, setIsShow, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const canvas = useRecoilValue(canvasState)
@@ -79,7 +78,7 @@ export default function DimensionLineSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -131,7 +130,9 @@ export default function DimensionLineSetting(props) {
             <div className="warning">{getMessage('modal.display.edit.input.slope.info')}</div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleChangeLength}>{getMessage('modal.common.save')}</button>
+            <button className="btn-frame modal act" onClick={handleChangeLength}>
+              {getMessage('modal.common.save')}
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
index 9fa412f9..8d0ce8c2 100644
--- a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
+++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
@@ -60,7 +60,7 @@ export default function FlowDirectionSetting(props) {
   }, [compasDeg])
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lx`}>
+      <div className={`modal-pop-wrap lx mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/image/ImageSizeSetting.jsx b/src/components/floor-plan/modal/image/ImageSizeSetting.jsx
index 63741e7a..309df494 100644
--- a/src/components/floor-plan/modal/image/ImageSizeSetting.jsx
+++ b/src/components/floor-plan/modal/image/ImageSizeSetting.jsx
@@ -14,7 +14,7 @@ export default function ImageSizeSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xxxm`}>
+      <div className={`modal-pop-wrap xxxm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.image.size.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
index d565e1a1..346f76e5 100644
--- a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
+++ b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
@@ -15,7 +15,7 @@ export default function CircuitNumberEdit(props) {
   }
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
index c2f24095..8239dc33 100644
--- a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
+++ b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
@@ -23,7 +23,7 @@ export default function ColumnInsert(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap r`}>
+      <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
index b4baf0d7..24219d78 100644
--- a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
+++ b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
@@ -25,7 +25,7 @@ export default function ColumnRemove(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap r`}>
+      <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/module/row/RowInsert.jsx b/src/components/floor-plan/modal/module/row/RowInsert.jsx
index e6e99c0c..00232d6f 100644
--- a/src/components/floor-plan/modal/module/row/RowInsert.jsx
+++ b/src/components/floor-plan/modal/module/row/RowInsert.jsx
@@ -23,7 +23,7 @@ export default function RowInsert(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap r`}>
+      <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.row.insert')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/module/row/RowRemove.jsx b/src/components/floor-plan/modal/module/row/RowRemove.jsx
index 6b93b41c..3d0ca070 100644
--- a/src/components/floor-plan/modal/module/row/RowRemove.jsx
+++ b/src/components/floor-plan/modal/module/row/RowRemove.jsx
@@ -25,7 +25,7 @@ export default function RowRemove(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap r`}>
+      <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.row.remove')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/object/DormerOffset.jsx b/src/components/floor-plan/modal/object/DormerOffset.jsx
index 0045a469..bc56e4b7 100644
--- a/src/components/floor-plan/modal/object/DormerOffset.jsx
+++ b/src/components/floor-plan/modal/object/DormerOffset.jsx
@@ -14,7 +14,7 @@ export default function DormerOffset(props) {
   const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('contextmenu.dormer.offset')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/object/ObjectSetting.jsx b/src/components/floor-plan/modal/object/ObjectSetting.jsx
index 707e0c3a..ee6ab256 100644
--- a/src/components/floor-plan/modal/object/ObjectSetting.jsx
+++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx
@@ -59,12 +59,12 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
     }
 
     //개구배치, 그림자배치
-    setIsHidden(true)
     if (buttonAct === 1 || buttonAct === 2) {
       applyOpeningAndShadow(objectPlacement, buttonAct, surfaceShapePolygons)
     } else {
       applyDormers(dormerPlacement, buttonAct, surfaceShapePolygons)
     }
+    setIsHidden(true)
   }
 
   const buttonMenu = [
@@ -73,7 +73,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
     { id: 3, name: getMessage('modal.object.setting.type.triangle.dormer') },
     { id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
   ]
-  
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
diff --git a/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
index 01d6f773..015ace3e 100644
--- a/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
+++ b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
@@ -22,9 +22,9 @@ export default function RoofMaterialSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xxxm`}>
+      <div className={`modal-pop-wrap xxxm mount`}>
         <div className="modal-head">
-          <h1 className="title">変更 </h1>
+          <h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
@@ -36,7 +36,7 @@ export default function RoofMaterialSetting(props) {
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">ストレージ</button>
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
       </div>
diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
index c6afa44d..f6f1e6f1 100644
--- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
@@ -16,7 +16,7 @@ export default function RoofAllocationSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap ml`}>
+      <div className={`modal-pop-wrap ml mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>