From 9353fad3aa942ce694a00019a1fcaf7eebddefd0 Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Mon, 28 Oct 2024 13:11:32 +0900
Subject: [PATCH 01/60] =?UTF-8?q?=EC=B9=98=EC=88=98=EC=84=A0=20=EB=B3=B4?=
 =?UTF-8?q?=EC=A1=B0=EC=84=A0=20=EB=B3=80=EA=B2=BD=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/CanvasFrame.jsx     |   5 +
 src/components/floor-plan/CanvasMenu.jsx      |  20 +-
 .../floor-plan/modal/distance/Distance.jsx    |  15 +-
 src/hooks/common/useCommonUtils.js            | 532 +++++++++++++++---
 src/hooks/useContextMenu.js                   |  14 +-
 src/store/commonUtilsAtom.js                  |  11 +
 6 files changed, 496 insertions(+), 101 deletions(-)

diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index e6261edc..2f946deb 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -11,11 +11,16 @@ import { currentObjectState } from '@/store/canvasAtom'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
+import { useCommonUtils } from '@/hooks/common/useCommonUtils'
+import { useObjectBatch } from '@/hooks/object/useObjectBatch'
+import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
 
 export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
   const { handleZoomClear } = useCanvasEvent()
+  const { testAlert } = useCommonUtils({})
+
   const { contextMenu, currentContextMenu, setCurrentContextMenu, handleClick } = useContextMenu({
     externalFn: {
       handleZoomClear,
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 07411efb..4017342d 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -27,6 +27,7 @@ import { usePopup } from '@/hooks/usePopup'
 import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
 import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { useCommonUtils } from '@/hooks/common/useCommonUtils'
+import { commonUtilsState } from '@/store/commonUtilsAtom'
 
 const canvasMenus = [
   { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
@@ -61,17 +62,8 @@ export default function CanvasMenu(props) {
   const { saveCanvas } = usePlan()
   const { swalFire } = useSwal()
   const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
-
-  const [commonFunctionState, setCommonFunctionState] = useState({
-    text: false,
-    dimension: false,
-    distance: false,
-  })
-
-  const { commonFunctions } = useCommonUtils({
-    commonFunctionState,
-    setCommonFunctionState,
-  })
+  const commonUtils = useRecoilValue(commonUtilsState)
+  const { commonFunctions } = useCommonUtils()
 
   const [popup, setPopup] = useRecoilState(popupState)
 
@@ -188,9 +180,9 @@ export default function CanvasMenu(props) {
                 </div>
               }
               <div className="btn-from">
-                <button className={`btn01 ${commonFunctionState.text ? 'active' : ''}`} onClick={() => commonFunctions('text')}></button>
-                <button className={`btn02 ${commonFunctionState.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
-                <button className={`btn03 ${commonFunctionState.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
+                <button className={`btn01 ${commonUtils.text ? 'active' : ''}`} onClick={() => commonFunctions('text')}></button>
+                <button className={`btn02 ${commonUtils.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
+                <button className={`btn03 ${commonUtils.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
               </div>
               <div className="select-box">
                 <QSelectBox title={'瓦53A'} option={SelectOption} />
diff --git a/src/components/floor-plan/modal/distance/Distance.jsx b/src/components/floor-plan/modal/distance/Distance.jsx
index 06a7a483..70ddfb35 100644
--- a/src/components/floor-plan/modal/distance/Distance.jsx
+++ b/src/components/floor-plan/modal/distance/Distance.jsx
@@ -1,15 +1,20 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useRecoilValue } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
-import { useRecoilValue } from 'recoil'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { contextPopupPositionState } from '@/store/popupAtom'
 
 export default function Distance(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
-  const { id, pos = contextPopupPosition, distance } = props
+  const { id, pos = contextPopupPosition, distance, deleteDistance } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
 
+  const handleClose = () => {
+    deleteDistance()
+    closePopup(id)
+  }
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm`}>
@@ -58,7 +63,9 @@ export default function Distance(props) {
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">確認</button>
+            <button className="btn-frame modal act" onClick={handleClose}>
+              確認
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js
index 70447ae8..5f02900d 100644
--- a/src/hooks/common/useCommonUtils.js
+++ b/src/hooks/common/useCommonUtils.js
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useRecoilState } from 'recoil'
 import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { checkLineOrientation, getDistance } from '@/util/canvas-util'
@@ -9,30 +9,34 @@ import { canvasState } from '@/store/canvasAtom'
 import { v4 as uuidv4 } from 'uuid'
 import { usePopup } from '@/hooks/usePopup'
 import Distance from '@/components/floor-plan/modal/distance/Distance'
+import { commonUtilsState } from '@/store/commonUtilsAtom'
+import { point } from '@turf/turf'
 
-export function useCommonUtils({ commonFunctionState, setCommonFunctionState }) {
+export function useCommonUtils() {
   const canvas = useRecoilValue(canvasState)
   const wordDisplay = useRecoilValue(wordDisplaySelector)
   const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
   const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
+  const [commonUtils, setCommonUtilsState] = useRecoilState(commonUtilsState)
+
   const { addPopup } = usePopup()
 
   useEffect(() => {
     initEvent()
-    if (commonFunctionState.text) {
+    if (commonUtils.text) {
       commonTextMode()
-    } else if (commonFunctionState.dimension) {
+    } else if (commonUtils.dimension) {
       commonDimensionMode()
-    } else if (commonFunctionState.distance) {
+    } else if (commonUtils.distance) {
       commonDistanceMode()
     }
-  }, [commonFunctionState, dimensionSettings, commonTextFont, dimensionLineTextFont])
+  }, [commonUtils, dimensionSettings, commonTextFont, dimensionLineTextFont])
 
   const commonTextMode = () => {
     let textbox
-    if (commonFunctionState.text) {
+    if (commonUtils.text) {
       addCanvasMouseEventListener('mouse:down', (event) => {
         const pointer = canvas?.getPointer(event.e)
         textbox = new fabric.Textbox('', {
@@ -46,6 +50,11 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
           fontFamily: commonTextFont.fontFamily.value,
           fontSize: commonTextFont.fontSize.value,
           fontStyle: commonTextFont.fontWeight.value,
+          selectable: true,
+          lockMovementX: true,
+          lockMovementY: true,
+          originX: 'center',
+          originY: 'center',
         })
 
         canvas?.add(textbox)
@@ -53,70 +62,120 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
         textbox.enterEditing()
         textbox.selectAll()
       })
+    }
+  }
 
-      addDocumentEventListener('keydown', document, (e) => {
-        if (e.key === 'Enter') {
-          if (commonFunctionState.text) {
-            const activeObject = canvas.getActiveObject()
-            if (activeObject && activeObject.isEditing) {
-              if (activeObject.text === '') {
-                canvas?.remove(activeObject)
-              } else {
-                activeObject.exitEditing()
-              }
-              //정책 협의
-              const texts = canvas.getObjects().filter((obj) => obj.name === 'commonText')
-              texts.forEach((text) => {
-                text.set({ editable: false })
-              })
+  const createDimensionArrow = (x, y, angle, id) => {
+    return new fabric.Triangle({
+      left: x,
+      top: y,
+      originX: 'center',
+      originY: 'center',
+      angle: angle,
+      width: 15,
+      height: 15,
+      fill: dimensionSettings.color,
+      selectable: true,
+      name: 'arrow',
+      id: id,
+    })
+  }
 
-              canvas.renderAll()
-            }
-          }
-        }
-      })
+  const createDimensionExtendLine = (line, lineDirection, extendLength) => {
+    let extendLine = []
+
+    const extendLineLength = extendLength ? extendLength : 0
+
+    if (lineDirection === 'horizontal') {
+      if (extendLineLength >= 0) {
+        extendLine = [
+          [line.x1, line.y1 - 20 - extendLineLength, line.x1, line.y1 + 20],
+          [line.x2, line.y2 - 20 - extendLineLength, line.x2, line.y2 + 20],
+        ]
+      } else {
+        extendLine = [
+          [line.x1, line.y1 + 20 - extendLineLength, line.x1, line.y1 - 20],
+          [line.x2, line.y2 + 20 - extendLineLength, line.x2, line.y2 - 20],
+        ]
+      }
+    } else {
+      if (extendLineLength >= 0) {
+        extendLine = [
+          [line.x1 - 20 - extendLineLength, line.y1, line.x1 + 20, line.y1],
+          [line.x2 - 20 - extendLineLength, line.y2, line.x2 + 20, line.y2],
+        ]
+      } else {
+        extendLine = [
+          [line.x1 - 20 - extendLineLength, line.y1, line.x1 - 20, line.y1],
+          [line.x2 - 20 - extendLineLength, line.y2, line.x2 - 20, line.y2],
+        ]
+      }
+    }
+
+    return extendLine
+  }
+
+  const calcDimensionPosition = (lineDirection, p1CenterX, p1CenterY, p2CenterX, p2CenterY) => {
+    // 첫 번째 포인트에 화살표 추가 좌측 -> 우측으로 그릴때
+    let paddingX = lineDirection === 'horizontal' ? p1CenterX + 7.5 : p1CenterX + 0.5
+    let paddingX2 = lineDirection === 'horizontal' ? p2CenterX - 7.5 : p2CenterX + 0.5
+    let paddingY = lineDirection === 'horizontal' ? p1CenterY + 0.5 : p1CenterY + 8
+    let paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 0.5 : p2CenterY - 8
+    let angle1 = lineDirection === 'horizontal' ? -90 : 0
+    let angle2 = lineDirection === 'horizontal' ? 90 : 180
+
+    // 우측 -> 좌측으로 그릴땐 반대
+    if (paddingX > paddingX2 || paddingY > paddingY2) {
+      paddingX = lineDirection === 'horizontal' ? p1CenterX - 7.5 : p1CenterX + 0.5
+      paddingX2 = lineDirection === 'horizontal' ? p2CenterX + 7.5 : p2CenterX + 0.5
+      paddingY = lineDirection === 'horizontal' ? p1CenterY + 0.5 : p1CenterY - 7.5
+      paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 0.5 : p2CenterY + 7.5
+      angle1 = lineDirection === 'horizontal' ? 90 : 180
+      angle2 = lineDirection === 'horizontal' ? 270 : 0
+    }
+
+    return {
+      paddingX,
+      paddingX2,
+      paddingY,
+      paddingY2,
+      angle1,
+      angle2,
     }
   }
 
   const commonDimensionMode = () => {
-    if (commonFunctionState.dimension) {
+    if (commonUtils.dimension) {
+      const uuid = uuidv4()
+
       let points = []
       let distanceText = null
       let minX, minY, maxX, maxY
 
       // 화살표를 생성하는 함수
-      function createArrow(x, y, angle) {
-        return new fabric.Triangle({
-          left: x,
-          top: y,
-          originX: 'center',
-          originY: 'center',
-          angle: angle,
-          width: 15,
-          height: 15,
-          fill: dimensionSettings.color,
-          selectable: false,
-        })
-      }
 
       const circleOptions = {
         radius: 5,
         strokeWidth: 2,
         stroke: 'red',
         fill: 'white',
-        selectable: false,
+        selectable: true,
       }
 
       const lineOptions = {
         stroke: dimensionSettings.color,
         strokeWidth: dimensionSettings.pixel,
-        name: 'dimensionLine',
         selectable: true,
+        originX: 'center',
+        originY: 'center',
       }
 
       // 캔버스에 클릭 이벤트 추가
       addCanvasMouseEventListener('mouse:down', (e) => {
+        let groupObjects = []
+
         const pointer = canvas.getPointer(e.e)
+
         let point
 
         if (points.length === 0) {
@@ -165,40 +224,60 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
           })
 
           // 두 포인트 간에 직선을 그림 (중심을 기준으로)
-          const line = new fabric.Line([p1CenterX, p1CenterY, p2CenterX, p2CenterY], lineOptions)
+          const line = new fabric.Line([p1CenterX, p1CenterY, p2CenterX, p2CenterY], { ...lineOptions, name: 'centerLine', id: uuid })
           canvas.add(line)
 
+          // groupObjects.push(line)
+
           const distance = getDistance(p1CenterX, p1CenterY, p2CenterX, p2CenterY)
           const lineDirection = checkLineOrientation(line)
-          let extendLine = []
 
-          if (lineDirection === 'horizontal') {
-            extendLine = [
-              [line.x1, line.y1 - 20, line.x1, line.y1 + 20],
-              [line.x2, line.y2 - 20, line.x2, line.y2 + 20],
-            ]
-          } else {
-            extendLine = [
-              [line.x1 - 20, line.y1, line.x1 + 20, line.y1],
-              [line.x2 - 20, line.y2, line.x2 + 20, line.y2],
-            ]
-          }
+          const extendListArray = createDimensionExtendLine(line, lineDirection)
 
-          extendLine.forEach((line) => {
-            const extendLine = new fabric.Line(line, lineOptions)
-            canvas.add(extendLine)
+          extendListArray.forEach((line) => {
+            const extendLine = new fabric.Line(line, { ...lineOptions, name: 'extendLine', id: uuid })
+            // canvas.add(extendLine)
+            groupObjects.push(extendLine)
           })
 
-          // 첫 번째 포인트에 화살표 추가
-          const paddingX = lineDirection === 'horizontal' ? p1CenterX + 7.5 : p1CenterX + 1
-          const paddingX2 = lineDirection === 'horizontal' ? p2CenterX - 6.5 : p2CenterX + 1
-          const paddingY = lineDirection === 'horizontal' ? p1CenterY + 1 : p1CenterY + 8
-          const paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 1 : p2CenterY - 8
+          // // 첫 번째 포인트에 화살표 추가 좌측 -> 우측으로 그릴때
+          // let paddingX = lineDirection === 'horizontal' ? p1CenterX + 7.5 : p1CenterX + 0.5
+          // let paddingX2 = lineDirection === 'horizontal' ? p2CenterX - 7.5 : p2CenterX + 0.5
+          // let paddingY = lineDirection === 'horizontal' ? p1CenterY + 0.5 : p1CenterY + 8
+          // let paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 0.5 : p2CenterY - 8
+          // let angle1 = lineDirection === 'horizontal' ? -90 : 0
+          // let angle2 = lineDirection === 'horizontal' ? 90 : 180
 
-          const arrow1 = createArrow(paddingX, paddingY, lineDirection === 'horizontal' ? -90 : 0) // 반대 방향 화살표
-          const arrow2 = createArrow(paddingX2, paddingY2, lineDirection === 'horizontal' ? 90 : 180) // 정방향 화살표
-          canvas.add(arrow1)
-          canvas.add(arrow2)
+          // // 우측 -> 좌측으로 그릴땐 반대
+          // if (paddingX > paddingX2 || paddingY > paddingY2) {
+          //   paddingX = lineDirection === 'horizontal' ? p1CenterX - 7.5 : p1CenterX + 0.5
+          //   paddingX2 = lineDirection === 'horizontal' ? p2CenterX + 7.5 : p2CenterX + 0.5
+          //   paddingY = lineDirection === 'horizontal' ? p1CenterY + 0.5 : p1CenterY - 7.5
+          //   paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 0.5 : p2CenterY + 7.5
+          //   angle1 = lineDirection === 'horizontal' ? 90 : 180
+          //   angle2 = lineDirection === 'horizontal' ? 270 : 0
+          // }
+
+          const dimensionPosition = calcDimensionPosition(lineDirection, p1CenterX, p1CenterY, p2CenterX, p2CenterY)
+
+          const arrow1 = createDimensionArrow(dimensionPosition.paddingX, dimensionPosition.paddingY, dimensionPosition.angle1, uuid) // 반대 방향 화살표
+          const arrow2 = createDimensionArrow(dimensionPosition.paddingX2, dimensionPosition.paddingY2, dimensionPosition.angle2, uuid) // 정방향 화살표
+          // canvas.add(arrow1)
+          // canvas.add(arrow2)
+
+          groupObjects.push(arrow1)
+          groupObjects.push(arrow2)
+
+          const group = new fabric.Group(groupObjects, {
+            name: 'dimensionLine',
+            selectable: true,
+            originX: 'center',
+            originY: 'center',
+            lineDirection: lineDirection,
+            id: uuid,
+          })
+
+          canvas.add(group)
 
           distanceText = new fabric.Text(`${distance * 10} `, {
             left: (p1CenterX + p2CenterX) / 2 + (lineDirection === 'horizontal' ? 0 : -15),
@@ -213,18 +292,24 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
             originY: 'center',
             angle: lineDirection === 'horizontal' ? 0 : 270,
             name: 'dimensionLineText',
+            id: uuid,
             // lockMovementX: false,
             // lockMovementY: false,
           })
           canvas.add(distanceText)
 
-          // minX = p1CenterX
-          // maxX = p2CenterX
-          // minY = p1CenterY
-          // maxY = p2CenterY
+          // groupObjects.push(distanceText)
+
+          canvas.renderAll()
 
           // 거리 계산 후, 다음 측정을 위해 초기화
           points = []
+
+          if (setCommonUtilsState)
+            setCommonUtilsState({
+              ...commonUtilsState,
+              dimension: false,
+            })
         }
 
         // 캔버스 다시 그리기
@@ -251,7 +336,7 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
   }
 
   const commonDistanceMode = () => {
-    if (commonFunctionState.distance) {
+    if (commonUtils.distance) {
       let points = []
       let distanceText = null
       let drawPoints = []
@@ -261,13 +346,15 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
         strokeWidth: 1,
         originX: 'center',
         originY: 'center',
+        name: 'distance',
       }
 
       const lineOptions = {
         stroke: 'black',
-        strokeWidth: 2,
+        strokeWidth: 1,
         selectable: false,
-        strokeDashArray: [9, 5],
+        strokeDashArray: [10, 5],
+        name: 'distance',
       }
 
       const textOptions = {
@@ -277,11 +364,12 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
         textAlign: 'center',
         originX: 'center',
         originY: 'center',
+        name: 'distance',
       }
 
       // 캔버스에 클릭 이벤트 추가
-      addCanvasMouseEventListener('mouse:down', function (options) {
-        const pointer = canvas.getPointer(options.e)
+      addCanvasMouseEventListener('mouse:down', function (e) {
+        const pointer = canvas.getPointer(e.e)
         let point
         let cross = {}
 
@@ -338,7 +426,7 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
             top: (p1CenterY + p2CenterY) / 2,
             ...textOptions,
           })
-          // canvas.add(distanceText)
+          canvas.add(distanceText)
 
           let distance2 = 0
           let distance3 = 0
@@ -355,13 +443,13 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
               top: (p2CenterY + p3.y) / 2,
               ...textOptions,
             })
-            // canvas.add(distanceText)
+            canvas.add(distanceText)
             distanceText = new fabric.Text(`${distance3 * 10}`, {
               left: (p3.x + p1CenterX) / 2,
               top: (p3.y + p1CenterY) / 2,
               ...textOptions,
             })
-            // canvas.add(distanceText)
+            canvas.add(distanceText)
           }
 
           const id = uuidv4()
@@ -375,9 +463,16 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
                 vertical: distance2 * 10,
                 diagonal: distance1 * 10,
               }}
+              deleteDistance={closeDistancePopup}
             />,
           )
 
+          if (setCommonUtilsState)
+            setCommonUtilsState({
+              ...commonUtils,
+              distance: false,
+            })
+
           // 거리 계산 후, 다음 측정을 위해 초기화
           points = []
         }
@@ -387,8 +482,34 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
       })
     }
   }
+
+  //텍스트 모드일때 엔터 이벤트
+  addDocumentEventListener('keydown', document, (e) => {
+    if (e.key === 'Enter') {
+      const activeObject = canvas.getActiveObject()
+      if (activeObject.name === 'commonText') {
+        if (activeObject && activeObject.isEditing) {
+          if (activeObject.text === '') {
+            canvas?.remove(activeObject)
+          } else {
+            activeObject.exitEditing()
+          }
+          //정책 협의
+          const texts = canvas.getObjects().filter((obj) => obj.name === 'commonText')
+          texts.forEach((text) => {
+            text.set({ editable: false })
+          })
+
+          canvas.renderAll()
+          if (setCommonUtilsState) setCommonUtilsState({ ...commonUtils, text: false })
+        }
+      }
+      initEvent()
+    }
+  })
+
   const commonFunctions = (mode) => {
-    let tempStates = { ...commonFunctionState }
+    let tempStates = { ...commonUtils }
 
     if (tempStates[mode]) {
       tempStates[mode] = false
@@ -402,11 +523,258 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
       }
     }
 
-    if (setCommonFunctionState) setCommonFunctionState(tempStates)
+    if (setCommonUtilsState) setCommonUtilsState(tempStates)
+  }
+
+  const commonDeleteText = (object) => {
+    if (object) {
+      canvas?.remove(object)
+
+      if (object.id) {
+        const group = canvas.getObjects().filter((obj) => obj.id === object.id)
+        group.forEach((obj) => canvas?.remove(obj))
+      }
+    }
+  }
+
+  const commonMoveObject = (obj) => {
+    if (obj) {
+      obj.set({
+        lockMovementX: false,
+        lockMovementY: false,
+      })
+
+      addCanvasMouseEventListener('mouse:up', (e) => {
+        obj.set({
+          lockMovementX: true,
+          lockMovementY: true,
+        })
+        initEvent()
+      })
+
+      obj.setCoords()
+      canvas?.renderAll()
+    }
+  }
+
+  const commonCopyObject = (obj) => {
+    if (obj) {
+      let clonedObj = null
+
+      console.log(obj)
+
+      obj.clone((cloned) => {
+        clonedObj = cloned
+      })
+
+      addCanvasMouseEventListener('mouse:move', (e) => {
+        const pointer = canvas?.getPointer(e.e)
+        if (!clonedObj) return
+
+        canvas
+          .getObjects()
+          .filter((obj) => obj.name === 'clonedObj')
+          .forEach((obj) => canvas?.remove(obj))
+
+        clonedObj.set({
+          left: pointer.x,
+          top: pointer.y,
+          name: 'clonedObj',
+        })
+        canvas.add(clonedObj)
+      })
+
+      addCanvasMouseEventListener('mouse:down', (e) => {
+        clonedObj.set({
+          lockMovementX: true,
+          lockMovementY: true,
+          name: obj.name,
+          editable: false,
+          id: uuidv4(), //복사된 객체라 새로 따준다
+        })
+        initEvent()
+      })
+    }
+  }
+
+  const editText = () => {
+    const obj = canvas?.getActiveObject()
+    obj.set({ editable: true })
+    obj.enterEditing()
+  }
+
+  const deleteObject = () => {
+    const obj = canvas?.getActiveObject()
+    commonDeleteText(obj)
+  }
+
+  const moveObject = () => {
+    const obj = canvas?.getActiveObject()
+    commonMoveObject(obj)
+  }
+
+  const copyObject = () => {
+    const obj = canvas?.getActiveObject()
+    commonCopyObject(obj)
+  }
+
+  const closeDistancePopup = () => {
+    const obj = canvas?.getObjects().filter((obj) => obj.name === 'distance')
+    if (obj) canvas.remove(...obj)
+  }
+
+  const changeDimensionExtendLine = () => {
+    const group = canvas?.getActiveObject()
+    const id = group.id
+    const textObj = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
+    const items = group._objects
+    const originLineDirection = group.lineDirection
+
+    let groupObj = []
+
+    canvas?.remove(group)
+
+    items.forEach((item) => {
+      item.set({
+        selectable: true,
+      })
+      canvas?.add(item)
+    })
+    canvas?.renderAll()
+
+    const centerLine = canvas?.getObjects().filter((obj) => obj.name === 'centerLine' && obj.id === id)[0]
+    const extendLine = canvas?.getObjects().filter((obj) => obj.name === 'extendLine' && obj.id === id)
+    const arrows = canvas?.getObjects().filter((obj) => obj.name === 'arrow' && obj.id === id)
+
+    const originX = centerLine.x1
+    const originY = centerLine.y1
+
+    const lineOptions = {
+      stroke: dimensionSettings.color,
+      strokeWidth: dimensionSettings.pixel,
+      selectable: true,
+      originX: 'center',
+      originY: 'center',
+    }
+
+    addCanvasMouseEventListener('mouse:down', (e) => {
+      const pointer = canvas?.getPointer(e.e)
+
+      if (originLineDirection === 'horizontal') {
+        centerLine.set({
+          x1: centerLine.x1,
+          y1: pointer.y,
+          x2: centerLine.x2,
+          y2: pointer.y,
+        })
+
+        centerLine.setCoords()
+        canvas?.renderAll()
+
+        const differenceY = centerLine.y1 - originY
+
+        arrows.forEach((arrow) => {
+          canvas?.remove(arrow)
+        })
+
+        const { paddingX, paddingX2, paddingY, paddingY2, angle1, angle2 } = calcDimensionPosition(
+          originLineDirection,
+          centerLine.x1,
+          pointer.y,
+          centerLine.x2,
+          pointer.y,
+        )
+
+        const newArrow1 = createDimensionArrow(paddingX, paddingY, angle1, id)
+        const newArraw2 = createDimensionArrow(paddingX2, paddingY2, angle2, id)
+        canvas?.add(newArrow1, newArraw2)
+
+        groupObj.push(centerLine, newArrow1, newArraw2)
+
+        extendLine.forEach((line) => canvas?.remove(line))
+
+        const newExtendLine = createDimensionExtendLine(centerLine, originLineDirection, differenceY)
+
+        newExtendLine.forEach((line) => {
+          const extendLine = new fabric.Line(line, { ...lineOptions, name: 'extendLine', id: id })
+          canvas.add(extendLine)
+          groupObj.push(extendLine)
+        })
+
+        textObj.set({
+          top: pointer.y + 15,
+        })
+        textObj.setCoords()
+      } else {
+        centerLine.set({
+          x1: pointer.x,
+          y1: centerLine.y1,
+          x2: pointer.x,
+          y2: centerLine.y2,
+        })
+
+        centerLine.setCoords()
+        canvas?.renderAll()
+
+        const differenceX = centerLine.x1 - originX
+
+        arrows.forEach((arrow) => {
+          canvas?.remove(arrow)
+        })
+
+        const { paddingX, paddingX2, paddingY, paddingY2, angle1, angle2 } = calcDimensionPosition(
+          originLineDirection,
+          pointer.x,
+          centerLine.y1,
+          pointer.x,
+          centerLine.y2,
+        )
+
+        const newArrow1 = createDimensionArrow(paddingX, paddingY, angle1, id)
+        const newArraw2 = createDimensionArrow(paddingX2, paddingY2, angle2, id)
+        canvas?.add(newArrow1, newArraw2)
+
+        groupObj.push(centerLine, newArrow1, newArraw2)
+
+        extendLine.forEach((line) => canvas?.remove(line))
+
+        const newExtendLine = createDimensionExtendLine(centerLine, originLineDirection, differenceX)
+
+        newExtendLine.forEach((line) => {
+          const extendLine = new fabric.Line(line, { ...lineOptions, name: 'extendLine', id: id })
+          canvas.add(extendLine)
+          groupObj.push(extendLine)
+        })
+
+        textObj.set({
+          left: pointer.x - 15,
+        })
+        textObj.setCoords()
+      }
+
+      const reGroup = new fabric.Group(groupObj, {
+        name: 'dimensionLine',
+        selectable: true,
+        originX: 'center',
+        originY: 'center',
+        lineDirection: originLineDirection,
+        id: id,
+      })
+      canvas.add(reGroup)
+      initEvent()
+    })
   }
 
   return {
     commonFunctions,
     dimensionSettings,
+    commonDeleteText,
+    commonMoveObject,
+    commonDeleteText,
+    deleteObject,
+    moveObject,
+    copyObject,
+    editText,
+    changeDimensionExtendLine,
   }
 }
diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index bbd5115b..adb9b680 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -20,6 +20,8 @@ import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/Di
 import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting'
 import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
+import { useCommonUtils } from './common/useCommonUtils'
+import { canvasState } from '@/store/canvasAtom'
 
 export function useContextMenu({ externalFn }) {
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
@@ -30,6 +32,9 @@ export function useContextMenu({ externalFn }) {
   const { addPopup } = usePopup()
   const [popupId, setPopupId] = useState(uuidv4())
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
+  const canvas = useRecoilValue(canvasState)
+  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils({})
+
   const currentMenuSetting = (position) => {
     switch (currentMenu) {
       case MENU.PLAN_DRAWING:
@@ -200,7 +205,7 @@ export function useContextMenu({ externalFn }) {
   }, [currentContextMenu])
 
   useEffect(() => {
-    console.log('object name', currentObject?.name)
+    console.log('object name', currentObject)
     if (currentObject?.name) {
       switch (currentObject.name) {
         case 'triangleDormer':
@@ -331,14 +336,17 @@ export function useContextMenu({ externalFn }) {
               {
                 id: 'commonTextRemove',
                 name: '삭제',
+                fn: () => deleteObject(),
               },
               {
                 id: 'commonTextMove',
                 name: '이동',
+                fn: () => moveObject(),
               },
               {
                 id: 'commonTextCopy',
                 name: '복사',
+                fn: () => copyObject(),
               },
               {
                 id: 'commonTextFontSetting',
@@ -348,6 +356,7 @@ export function useContextMenu({ externalFn }) {
               {
                 id: 'commonTextEdit',
                 name: '편집',
+                fn: () => editText(),
               },
             ],
           ])
@@ -384,14 +393,17 @@ export function useContextMenu({ externalFn }) {
               {
                 id: 'dimensionLineRemove',
                 name: '삭제',
+                fn: () => deleteObject(),
               },
               {
                 id: 'dimensionLineMove',
                 name: '이동',
+                fn: () => moveObject(),
               },
               {
                 id: 'dimensionAuxiliaryLineEdit',
                 name: '치수 보조선 변경',
+                fn: () => changeDimensionExtendLine(),
               },
               {
                 id: 'dimensionLineDisplayEdit',
diff --git a/src/store/commonUtilsAtom.js b/src/store/commonUtilsAtom.js
index 3fe8dbb7..545f8196 100644
--- a/src/store/commonUtilsAtom.js
+++ b/src/store/commonUtilsAtom.js
@@ -1,5 +1,11 @@
 import { atom } from 'recoil'
 
+const defaultUtils = {
+  text: false,
+  dimension: false,
+  distance: false,
+}
+
 export const dimensionLineSettingsState = atom({
   key: 'dimensionLineSettingsState',
   default: {
@@ -11,3 +17,8 @@ export const dimensionLineSettingsState = atom({
     fontStyle: 'normal',
   },
 })
+
+export const commonUtilsState = atom({
+  key: 'commonUtilsState',
+  default: defaultUtils,
+})

From 1e698f4597ca3f913cb96e1c47d389f212e8f69c Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Tue, 29 Oct 2024 15:49:43 +0900
Subject: [PATCH 02/60] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/images/canvas/img_check_fail.svg   |  6 ++
 .../images/canvas/img_check_success.svg       |  4 +
 public/static/images/canvas/img_edit_ico.svg  |  4 +
 public/static/images/sub/attachment_ico.svg   | 14 +---
 public/static/images/sub/change_ico.svg       |  7 ++
 public/static/images/sub/click_check_ico.svg  |  7 +-
 public/static/images/sub/open_ico.svg         |  6 ++
 .../placementShape/PlacementShapeSetting.jsx  | 19 +++++
 src/styles/_contents.scss                     | 70 ++++++++++-------
 src/styles/_grid-detail.scss                  |  7 --
 src/styles/_layout.scss                       |  2 +-
 src/styles/_modal.scss                        | 54 ++++++++++++-
 src/styles/_table.scss                        | 78 +++++++++++++++++++
 13 files changed, 230 insertions(+), 48 deletions(-)
 create mode 100644 public/static/images/canvas/img_check_fail.svg
 create mode 100644 public/static/images/canvas/img_check_success.svg
 create mode 100644 public/static/images/canvas/img_edit_ico.svg
 create mode 100644 public/static/images/sub/change_ico.svg
 create mode 100644 public/static/images/sub/open_ico.svg

diff --git a/public/static/images/canvas/img_check_fail.svg b/public/static/images/canvas/img_check_fail.svg
new file mode 100644
index 00000000..2941a08d
--- /dev/null
+++ b/public/static/images/canvas/img_check_fail.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M6.73735 6.73726L11.2628 11.2627M11.2628 6.73726L6.73735 11.2627" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Ellipse 1334" d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="white"/>
+</g>
+</svg>
diff --git a/public/static/images/canvas/img_check_success.svg b/public/static/images/canvas/img_check_success.svg
new file mode 100644
index 00000000..0ced9e65
--- /dev/null
+++ b/public/static/images/canvas/img_check_success.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 9.5L7.5 12L13 6" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="white"/>
+</svg>
diff --git a/public/static/images/canvas/img_edit_ico.svg b/public/static/images/canvas/img_edit_ico.svg
new file mode 100644
index 00000000..abc1118b
--- /dev/null
+++ b/public/static/images/canvas/img_edit_ico.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00078 5.7998V12.1998M12.2008 8.9998L5.80078 8.9998" stroke="#141B34" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="#141B34"/>
+</svg>
diff --git a/public/static/images/sub/attachment_ico.svg b/public/static/images/sub/attachment_ico.svg
index 7e622a4e..71b132fb 100644
--- a/public/static/images/sub/attachment_ico.svg
+++ b/public/static/images/sub/attachment_ico.svg
@@ -1,11 +1,5 @@
-<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="ico">
-<circle id="Ellipse 2012" cx="11.5" cy="12" r="11.5" fill="#45576F"/>
-<g id="elements">
-<path id="Vector" d="M9.66678 12.8193C9.7612 12.9739 9.87323 13.1202 10.0029 13.2552C10.8079 14.093 12.0349 14.224 12.9718 13.6481C13.1454 13.5414 13.3091 13.4104 13.4582 13.2552L15.6178 11.0076C16.572 10.0145 16.572 8.40447 15.6178 7.41141C14.6637 6.41836 13.1166 6.41836 12.1625 7.41142L11.6868 7.90648" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-<path id="Vector_2" d="M10.313 16.0933L9.83718 16.5885C8.88301 17.5816 7.33598 17.5816 6.3818 16.5885C5.42762 15.5955 5.42762 13.9854 6.3818 12.9924L8.54141 10.7448C9.49559 9.75174 11.0426 9.75174 11.9968 10.7448C12.1264 10.8797 12.2384 11.026 12.3328 11.1806" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-<path id="Vector_3" d="M17.0003 14.6666H15.6143M13.6669 18L13.6669 16.614" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_4" d="M5 9.33333H6.38593M8.33333 6L8.33333 7.38593" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#0191C9"/>
+<path d="M13.186 5.7898C12.6312 5.20223 11.7307 5.20223 11.1759 5.7898L6.99193 10.2206C6.03462 11.2344 6.03462 12.8767 6.99193 13.8905C7.94924 14.9043 9.50003 14.9043 10.4573 13.8905L13.9136 10.2303C14.1615 9.96779 14.5663 9.96779 14.8141 10.2303C15.062 10.4928 15.062 10.9214 14.8141 11.1839L11.3578 14.8441C9.90251 16.3853 7.54676 16.3853 6.09147 14.8441C4.63618 13.303 4.63618 10.8082 6.09147 9.26705L10.2754 4.8362C11.3282 3.72127 13.0337 3.72127 14.0865 4.8362C15.1393 5.95114 15.1393 7.75719 14.0865 8.87212L10.0844 13.1103C9.43409 13.799 8.379 13.799 7.72867 13.1103C7.07834 12.4216 7.07834 11.3043 7.72867 10.6156L11.0031 7.14795C11.2509 6.88547 11.6557 6.88547 11.9035 7.14795C12.1514 7.41042 12.1514 7.83906 11.9035 8.10154L8.62913 11.5692C8.47678 11.7305 8.47678 11.9954 8.62913 12.1567C8.78148 12.3181 9.03161 12.3181 9.18396 12.1567L13.186 7.91853C13.7408 7.33096 13.7408 6.37736 13.186 5.7898Z" fill="#0191C9" stroke="white" stroke-width="0.5"/>
 </svg>
diff --git a/public/static/images/sub/change_ico.svg b/public/static/images/sub/change_ico.svg
new file mode 100644
index 00000000..b0dda7ee
--- /dev/null
+++ b/public/static/images/sub/change_ico.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#909000"/>
+<path d="M4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4" stroke="#909000" stroke-linecap="round"/>
+<path d="M5.58914 5.8473C5.67215 5.75932 5.75769 5.67375 5.84566 5.59071M7.5684 4.43768C7.67731 4.38873 7.78788 4.34282 7.9 4.30005M4.3 7.90005C4.34317 7.78681 4.38955 7.67516 4.43904 7.5652" stroke="#909000" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.99999 7.59961V12.3996M12.4 9.99961L7.59999 9.99961" stroke="#909000" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/static/images/sub/click_check_ico.svg b/public/static/images/sub/click_check_ico.svg
index 4fc2dae1..d92ca90d 100644
--- a/public/static/images/sub/click_check_ico.svg
+++ b/public/static/images/sub/click_check_ico.svg
@@ -1,4 +1,5 @@
-<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="7" cy="7.5" r="6.5" fill="white" stroke="#F16A6A"/>
-<path d="M6.507 9.228L6.276 5.169L6.221 3.629H7.849L7.794 5.169L7.563 9.228H6.507ZM7.035 12.154C6.74167 12.154 6.49967 12.0513 6.309 11.846C6.12567 11.6407 6.034 11.3913 6.034 11.098C6.034 10.79 6.12567 10.537 6.309 10.339C6.49967 10.141 6.74167 10.042 7.035 10.042C7.32833 10.042 7.56667 10.141 7.75 10.339C7.94067 10.537 8.036 10.79 8.036 11.098C8.036 11.3913 7.94067 11.6407 7.75 11.846C7.56667 12.0513 7.32833 12.154 7.035 12.154Z" fill="#F16A6A"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#F16A6A"/>
+<path d="M9.47136 11.228L9.24036 7.169L9.18536 5.629H10.8134L10.7584 7.169L10.5274 11.228H9.47136ZM9.99936 14.154C9.70602 14.154 9.46402 14.0513 9.27336 13.846C9.09002 13.6407 8.99836 13.3913 8.99836 13.098C8.99836 12.79 9.09002 12.537 9.27336 12.339C9.46402 12.141 9.70602 12.042 9.99936 12.042C10.2927 12.042 10.531 12.141 10.7144 12.339C10.905 12.537 11.0004 12.79 11.0004 13.098C11.0004 13.3913 10.905 13.6407 10.7144 13.846C10.531 14.0513 10.2927 14.154 9.99936 14.154Z" fill="#F16A6A"/>
 </svg>
diff --git a/public/static/images/sub/open_ico.svg b/public/static/images/sub/open_ico.svg
new file mode 100644
index 00000000..2ef23b73
--- /dev/null
+++ b/public/static/images/sub/open_ico.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#3BBB48"/>
+<path d="M11.3571 4.95962C10.7174 4.31987 10.3975 4 10 4C9.60251 4 9.28264 4.31987 8.64289 4.95962C8.25899 5.34352 7.87857 5.52175 7.33125 5.52175C6.85336 5.52175 6.17346 5.42907 5.8 5.80567C5.4295 6.17929 5.52177 6.85639 5.52177 7.33123C5.52177 7.87857 5.34352 8.25899 4.95961 8.6429C4.31987 9.28264 4.00001 9.60251 4 9.99999C4.00001 10.3975 4.31988 10.7174 4.95963 11.3571C5.38969 11.7872 5.52177 12.0649 5.52177 12.6687C5.52177 13.1466 5.42908 13.8265 5.80569 14.2C6.17931 14.5705 6.85641 14.4782 7.33124 14.4782C7.91409 14.4782 8.19477 14.5922 8.61074 15.0082C8.96495 15.3624 9.43978 16 10 16C10.5602 16 11.0351 15.3624 11.3893 15.0082C11.8052 14.5922 12.0859 14.4782 12.6688 14.4782C13.1436 14.4782 13.8207 14.5705 14.1943 14.2M15.0404 8.6429C15.6801 9.28264 16 9.60251 16 9.99999C16 10.3975 15.6801 10.7174 15.0404 11.3571C14.6103 11.7871 14.4782 12.0649 14.4782 12.6687C14.4782 13.1466 14.5709 13.8265 14.1943 14.2M14.1943 14.2H14.2" stroke="#3BBB48" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.9 8.49998L10 10.6L15.4002 4.59998" stroke="#3BBB48" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index b635ea86..99b72eb4 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -18,6 +18,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
   const { closePopup } = usePopup()
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
+  const [image, setImage] = useState(null)
 
   const { getMessage } = useMessage()
   const { get, post } = useAxios()
@@ -479,6 +480,24 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                     </div>
                   </td>
                 </tr>
+                <tr>
+                  <th>{getMessage('common.input.file')}</th>
+                  <td>
+                    <div className="flex-box">
+                      <div className="img-edit-wrap">
+                        <label className="img-edit-btn" htmlFor="img_file">
+                          <span className="img-edit"></span>
+                          {getMessage('common.input.file.load')}
+                        </label>
+                        <input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => setImage(e.target.files[0])} />
+                      </div>
+                      <div className="img-name-wrap">
+                        <input type="text" className="input-origin al-l" defaultValue={''} value={image ? image.name : ''} readOnly />
+                        {image && <button className="img-check" onClick={() => setImage(null)}></button>}
+                      </div>
+                    </div>
+                  </td>
+                </tr>
               </tbody>
             </table>
           </div>
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index e4f6a6b2..8e29b78a 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -23,6 +23,7 @@
     left: 0;
     display: block;
     width: 100%;
+    height: 46.8px;
     padding-bottom: 0;
     background-color: #383838;
     transition: padding .17s ease-in-out;
@@ -544,9 +545,9 @@
 .sub-content{
     padding-top: 46px;
     .sub-content-inner{
-        max-width: 1720px;
+        max-width: 1760px;
         margin: 0 auto;
-        padding-top: 20px;
+        padding: 20px 20px 0;
         .sub-content-box{
             margin-bottom: 20px;
             &:last-child{
@@ -897,45 +898,63 @@
             display: flex;
             align-items: center;
             margin-right: 15px;
-            .attachment-required{
+            .explane-item{
                 position: relative;
                 display: flex;
                 align-items: center;
+                padding: 0 10px;
                 font-size: 12px;
                 font-weight: 400;
-                color: #45576F;
-                padding-right: 10px;
-                .ico{
-                    width: 23px;
-                    height: 23px;
+                span{
+                    width: 20px;
+                    height: 20px;
                     margin-right: 5px;
-                    background: url(../../public/static/images/sub/attachment_ico.svg)no-repeat center;
                     background-size: cover;
+                    background-repeat: no-repeat;
+                    background-position: center;
                 }
-                &::before{
+                &:before{
                     content: '';
                     position: absolute;
                     top: 50%;
-                    right: 0;
+                    left: 0;
                     transform: translateY(-50%);
                     width: 1px;
                     height: 12px;
                     background-color: #D9D9D9;
                 }
-            }
-            .click-check{
-                display: flex;
-                align-items: center;
-                font-size: 12px;
-                font-weight: 400;
-                color: #F16A6A ;
-                padding-left: 10px;
-                .ico{
-                    width: 14px;
-                    height: 14px;
-                    margin-right: 5px;
-                    background: url(../../public/static/images/sub/click_check_ico.svg)no-repeat center;
-                    background-size: cover;
+                &:first-child{
+                    padding-left: 0;
+                    &::before{
+                        display: none;
+                    }
+                }
+                &:last-child{
+                    padding-right: 0;
+                }
+                &.item01{
+                    color: #3BBB48;
+                    span{
+                        background-image: url(../../public/static/images/sub/open_ico.svg);
+                    }
+                }
+                &.item02{
+                    color: #909000;
+                    span{
+                        background-image: url(../../public/static/images/sub/change_ico.svg);
+                    }
+                }
+                &.item03{
+                    color: #0191C9;
+                    span{
+                        background-image: url(../../public/static/images/sub/attachment_ico.svg);
+                    }
+                }
+                &.item04{
+                    color: #F16A6A;
+                    span{
+                        background-image: url(../../public/static/images/sub/click_check_ico.svg);
+                    }
                 }
             }
         }
@@ -960,7 +979,6 @@
             }
         }
     }
-    
 }
 
 // 발전시물레이션
diff --git a/src/styles/_grid-detail.scss b/src/styles/_grid-detail.scss
index 0392bae8..1f6a2270 100644
--- a/src/styles/_grid-detail.scss
+++ b/src/styles/_grid-detail.scss
@@ -128,10 +128,3 @@
     }
 }
 
-.grid-tip{
-    display: block;
-    width: 15px;
-    height: 15px;
-    background: url(../../public/static/images/sub/grid_tip.svg)no-repeat center;
-    background-size: cover;
-}
\ No newline at end of file
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index 2bddf61f..7f3834df 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -1,7 +1,7 @@
 .wrap{
     display: flex;
     flex-direction: column;
-    min-width: 1600px;
+    min-width: 1280px;
     min-height: 100vh;
     overflow-x: hidden;
 }
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 62fad511..361aa957 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -399,6 +399,12 @@ $alert-color: #101010;
                 color: $pop-color;
                 border-bottom: 1px solid #424242;
                 padding-left: 20px;
+                vertical-align: middle;
+                .flex-box{
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                }
             }
             &:first-child{
                 td,
@@ -470,6 +476,52 @@ $alert-color: #101010;
     }
 }
 
+.img-edit-wrap{
+    flex: none;
+    .img-edit-btn{
+        display: flex;
+        align-items: center;
+        height: 30px;
+        padding: 0 10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #101010;
+        background-color: #fff;
+        border-radius: 2px;
+        transition: all .15s ease-in-out;
+        .img-edit{
+            width: 16px;
+            height: 16px;
+            background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center;
+            background-size: cover;
+            margin-right: 5px;
+        }
+        &:hover{
+            background-color: #ebebeb;
+        }
+    }
+}
+.img-name-wrap{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-left: 10px;
+    input{
+        flex: 1;
+
+    }
+    .img-check{
+        flex: none;
+        width: 18px;
+        height: 18px;
+        margin-left: 5px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+    }
+}
+
 // 외벽선 그리기
 .outline-wrap{
     padding: 24px 0;
@@ -1801,7 +1853,7 @@ $alert-color: #101010;
     label{
         flex: none;
         text-align: right;
-        width: 35px;
+        width: 38px;
         font-size: 13px;
         color: #fff;
         font-weight: 500;
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
index d7e1c407..4dcef37a 100644
--- a/src/styles/_table.scss
+++ b/src/styles/_table.scss
@@ -430,4 +430,82 @@ table{
             }
         }
     }
+}
+
+// 견적서 테이블
+.esimate-table{
+    table{
+        table-layout: fixed;
+        border-collapse: separate;
+        thead{
+            tr{
+                th{
+                    text-align: center;
+                    font-size: 13px;
+                    color: #fff;
+                    font-weight: 600;
+                    padding: 11px 5px;
+                    background-color: #5D6A76;
+                    &:first-child{
+                        border-radius: 4px 0 0 4px;
+                    }
+                    &:last-child{
+                        border-radius: 0 4px 4px 0;
+                    }
+                }
+            }
+        }
+        tbody{
+            tr{
+                td{
+                    padding: 5px 10px;
+                    font-size: 13px;
+                    color: #45576F;
+                    font-weight: 400;
+                    border-bottom: 1px solid #ECF0F4;
+                    .form-flex-wrap{
+                        display: flex;
+                        align-items: center;
+                        .input-wrap,
+                        .select-wrap{
+                            flex: 1;
+                        }
+                        .btn-area{
+                            flex: none;
+                        }
+                        .icon-wrap{
+                            margin-left: auto;
+                            display: flex;
+                            align-items: center;
+                            gap: 5px;
+                        }
+                    }
+                    .tb_ico{
+                        display: block;
+                        width: 20px;
+                        height: 20px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: cover;
+                        &.change_check{
+                            background-image: url(../../public/static/images/sub/change_ico.svg);
+                        }
+                        &.file_check{
+                            background-image: url(../../public/static/images/sub/attachment_ico.svg);
+                        }
+                        &.open_check{
+                            background-image: url(../../public/static/images/sub/open_ico.svg);
+                        }
+                    }
+                    .grid-tip{
+                        display: block;
+                        width: 20px;
+                        height: 20px;
+                        background: url(../../public/static/images/sub/click_check_ico.svg)no-repeat center;
+                        background-size: cover;
+                    }
+                }
+            }
+        }
+    }
 }
\ No newline at end of file

From 5be28db1f9cbe912a1ebee93a444e7d206347ab8 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Tue, 29 Oct 2024 15:50:04 +0900
Subject: [PATCH 03/60] =?UTF-8?q?=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/ja.json | 10 ++++++++++
 src/locales/ko.json | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/locales/ja.json b/src/locales/ja.json
index 834363a3..ea75bf6f 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -299,6 +299,14 @@
   "contextmenu.auxiliary.cut": "보조선 절삭(JA)",
   "contextmenu.auxiliary.remove.all": "보조선 전체 삭제(JA)",
   "contextmenu.line.property.edit": "各辺属性の変更",
+  "contextmenu.column.move": "열 이동(JA)",
+  "contextmenu.column.copy": "열 복사(JA)",
+  "contextmenu.column.remove": "コピー設定",
+  "contextmenu.column.insert": "열 삽입(JA)",
+  "contextmenu.row.move": "단 이동(JA)",
+  "contextmenu.row.copy": "단 복사(JA)",
+  "contextmenu.row.remove": "단 삭제(JA)",
+  "contextmenu.row.insert": "단 삽입(JA)",
   "modal.line.property.edit.info": "属性を変更する辺を選択してください。",
   "modal.line.property.edit.selected": "選択した値",
   "contextmenu.flow.direction.edit": "흐름 방향 변경(JA)",
@@ -399,6 +407,8 @@
   "common.message.writeToConfirm": "作成解除を実行しますか？",
   "common.message.password.init.success": "パスワード [{0}] に初期化されました。",
   "common.message.no.edit.save": "この文書は変更できません。",
+  "common.input.file": "ファイルを読み込む",
+  "common.input.file.load": "ファイルの追加",
   "common.require": "必須",
   "commons.west": "立つ",
   "commons.east": "ドン",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 501aa72d..62336c1c 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -304,6 +304,14 @@
   "contextmenu.auxiliary.cut": "보조선 절삭",
   "contextmenu.auxiliary.remove.all": "보조선 전체 삭제",
   "contextmenu.line.property.edit": "각 변 속성 변경",
+  "contextmenu.column.move": "열 이동",
+  "contextmenu.column.copy": "열 복사",
+  "contextmenu.column.remove": "열 삭제",
+  "contextmenu.column.insert": "열 삽입",
+  "contextmenu.row.move": "단 이동",
+  "contextmenu.row.copy": "단 복사",
+  "contextmenu.row.remove": "단 삭제",
+  "contextmenu.row.insert": "단 삽입",
   "modal.line.property.edit.info": "속성을 변경할 변을 선택해주세요.",
   "modal.line.property.edit.selected": "선택한 값",
   "contextmenu.flow.direction.edit": "흐름 방향 변경",
@@ -404,6 +412,8 @@
   "common.message.writeToConfirm": "작성 해제를 실행하시겠습니까?",
   "common.message.password.init.success": "비밀번호 [{0}]로 초기화 되었습니다.",
   "common.message.no.edit.save": "This document cannot be changed.",
+  "common.input.file": "파일 불러오기",
+  "common.input.file.load": "불러오기",
   "common.require": "필수",
   "commons.west": "서",
   "commons.east": "동",

From 7c41008abedd3022828c8595078a061a928234a0 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Tue, 29 Oct 2024 16:06:59 +0900
Subject: [PATCH 04/60] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=ED=98=84=ED=99=A9=20->?=
 =?UTF-8?q?=20=EA=B2=AC=EC=A0=81=EC=84=9C=20=EB=AC=BC=EA=B1=B4=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EB=A6=AC=EC=BD=94=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../floor-plan/estimate/[mid]/[pid]/page.jsx  |  7 +-
 src/components/estimate/Estimate.jsx          | 67 +++++++++++++++++--
 src/components/management/StuffDetail.jsx     |  2 +-
 src/store/floorPlanObjectAtom.js              |  2 +-
 4 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/src/app/floor-plan/estimate/[mid]/[pid]/page.jsx b/src/app/floor-plan/estimate/[mid]/[pid]/page.jsx
index 80eae575..6e793bf5 100644
--- a/src/app/floor-plan/estimate/[mid]/[pid]/page.jsx
+++ b/src/app/floor-plan/estimate/[mid]/[pid]/page.jsx
@@ -1,9 +1,12 @@
 import Estimate from '@/components/estimate/Estimate'
 
-export default function EstimatePage() {
+export default function EstimatePage({ params }) {
+  //floor-plan/estimate/mid/pid
+  //mid :5 견적탭
+  //pid : 넘어온 플랜번호
   return (
     <>
-      <Estimate />
+      <Estimate params={params} />
     </>
   )
 }
diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx
index e1a453fe..af51ea74 100644
--- a/src/components/estimate/Estimate.jsx
+++ b/src/components/estimate/Estimate.jsx
@@ -1,14 +1,59 @@
 'use client'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 import { useRecoilValue } from 'recoil'
 import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
+import { Button } from '@nextui-org/react'
+import { sessionStore } from '@/store/commonAtom'
 
-export default function Estimate() {
+export default function Estimate({ params }) {
+  const sessionState = useRecoilValue(sessionStore)
   const { getMessage } = useMessage()
   const objectRecoil = useRecoilValue(floorPlanObjectState)
-  console.log('견적서화면이군요', objectRecoil.floorPlanObjectNo)
+  const [objectNo, setObjectNo] = useState('')
+  const fileInputRef = useRef(null)
+  const [files, setFiles] = useState([]) //첨부파일
+  const fileId = useRef(0)
+
+  useEffect(() => {
+    setObjectNo(objectRecoil.floorPlanObjectNo)
+  }, [objectRecoil])
+
+  useEffect(() => {
+    if (objectNo) {
+      //Q101X278191023001
+      console.log('세션정보::::', sessionState)
+      //상세API호출
+    }
+  }, [objectNo])
+
+  const handleButtonClick = () => {
+    fileInputRef.current.click()
+  }
+
+  const onChangeFiles = (e) => {
+    // e.preventDefault()
+    // e.persist()
+    // console.log('파일::', e.target.files[0])
+    // console.log('파일::', e.target.files)
+    // let selectFiles = []
+    // let tempFiles = files
+    // selectFiles = e.target.files
+    // for (const file of selectFiles) {
+    //   tempFiles = [
+    //     ...tempFiles,
+    //     {
+    //       id: fileId.current++,
+    //       object: file,
+    //     },
+    //   ]
+    // }
+    // setFiles(tempFiles)
+    // const formData = new FormData()
+    // formData.append('file', e.target.files[0])
+  }
+
   return (
     <div className="sub-content estimate">
       <div className="sub-content-inner">
@@ -18,7 +63,9 @@ export default function Estimate() {
             <div className="estimate-list-wrap one">
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('estimate.detail.objectNo')}</div>
-                <div className="estimate-name">RX524231020006 (Plan No: 1)</div>
+                <div className="estimate-name">
+                  {objectNo} (Plan No: {params.pid})
+                </div>
               </div>
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('estimate.detail.estimateNo')}</div>
@@ -165,7 +212,17 @@ export default function Estimate() {
                     <td>
                       <div className="drag-file-box">
                         <div className="btn-area">
-                          <button className="btn-origin grey">{getMessage('estimate.detail.fileList.btn')}</button>
+                          <Button type="button" className="btn-origin grey" onClick={handleButtonClick}>
+                            {getMessage('estimate.detail.fileList.btn')}
+                          </Button>
+                          <input
+                            type="file"
+                            id="fileUpload"
+                            name="fileUpload"
+                            ref={fileInputRef}
+                            onChange={onChangeFiles}
+                            style={{ display: 'none' }}
+                          />
                         </div>
                         <div className="drag-file-area">
                           <p>Drag file here</p>
diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index ed47ee99..21dc5d17 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -262,7 +262,7 @@ export default function StuffDetail() {
                   onClick={() => {
                     //mid:5(견적서), /pid:플랜번호
                     setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo })
-                    router.push(`/floor-plan/5/${params.data.planNo}`)
+                    router.push(`/floor-plan/estimate/5/${params.data.planNo}`)
                   }}
                 >
                   <span className="file"></span>
diff --git a/src/store/floorPlanObjectAtom.js b/src/store/floorPlanObjectAtom.js
index 50cdccf4..3acd49a3 100644
--- a/src/store/floorPlanObjectAtom.js
+++ b/src/store/floorPlanObjectAtom.js
@@ -3,7 +3,7 @@ import { v1 } from 'uuid'
 export const floorPlanObjectState = atom({
   key: `floorPlanObjectState/${v1()}`,
   default: {
-    objectNo: '', //물건번호
+    floorPlanObjectNo: '', //물건번호
   },
   dangerouslyAllowMutability: true,
 })

From ba2c58e38d659e71a4a7ea2b0694c175a55debb2 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 29 Oct 2024 17:49:27 +0900
Subject: [PATCH 05/60] =?UTF-8?q?toObject=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/common.js              | 36 ++++++++++++++++++++++++++++++
 src/components/fabric/QLine.js    |  6 -----
 src/components/fabric/QPolygon.js | 11 ---------
 src/hooks/useCanvas.js            | 20 +++++++++++++++++
 src/hooks/usePlan.js              | 37 ++-----------------------------
 src/store/canvasAtom.js           |  1 -
 6 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/src/common/common.js b/src/common/common.js
index cf9788be..decf1aad 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -116,3 +116,39 @@ export const POLYGON_TYPE = {
   ROOF: 'roof',
   TRESTLE: 'trestle',
 }
+
+export const SAVE_KEY = [
+  'selectable',
+  'name',
+  'parentId',
+  'id',
+  'length',
+  'idx',
+  'direction',
+  'parentDirection',
+  'lines',
+  'points',
+  'lockMovementX',
+  'lockMovementY',
+  'lockRotation',
+  'lockScalingX',
+  'lockScalingY',
+  'opacity',
+  'cells',
+  'maxX',
+  'maxY',
+  'minX',
+  'minY',
+  'x',
+  'y',
+  'x1',
+  'x2',
+  'y1',
+  'y2',
+  'attributes',
+  'stickeyPoint',
+  'text',
+  'pitch',
+  'uuid',
+  'originText',
+]
diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js
index 86a96845..781d8395 100644
--- a/src/components/fabric/QLine.js
+++ b/src/components/fabric/QLine.js
@@ -39,12 +39,6 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     }
   },
 
-  toObject: function (propertiesToInclude) {
-    return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
-      type: this.type,
-      text: this.text,
-    })
-  },
   init: function () {
     this.addLengthText()
 
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index decc99ae..7cf70d0b 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -101,17 +101,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.shape = shape
   },
-
-  toObject: function (propertiesToInclude) {
-    return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
-      id: this.id,
-      type: this.type,
-      text: this.text,
-      hips: this.hips,
-      ridges: this.ridges,
-      connectRidges: this.connectRidges,
-    })
-  },
   init: function () {
     this.addLengthText()
 
diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index 886407b4..5be247e9 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -13,6 +13,7 @@ import { writeImage } from '@/lib/canvas'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { useAxios } from '@/hooks/useAxios'
 import { useFont } from '@/hooks/common/useFont'
+import { SAVE_KEY } from '@/common/common'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useRecoilState(canvasState)
@@ -103,6 +104,25 @@ export function useCanvas(id) {
     fabric.Object.prototype.cornerStyle = 'rect'
     fabric.Object.prototype.cornerStrokeColor = '#2BEBC8'
     fabric.Object.prototype.cornerSize = 6
+
+    fabric.Line.prototype.toObject = function (propertiesToInclude) {
+      let source = {}
+      for (let key in this) {
+        if (typeof this[key] !== 'function' && SAVE_KEY.includes(key)) {
+          source.key = this[key]
+        }
+      }
+      return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), source)
+    }
+    fabric.Polygon.prototype.toObject = function (propertiesToInclude) {
+      let source = {}
+      for (let key in this) {
+        if (typeof this[key] !== 'function' && SAVE_KEY.includes(key)) {
+          source.key = this[key]
+        }
+      }
+      return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), source)
+    }
     fabric.QLine = QLine
     fabric.QPolygon = QPolygon
     QPolygon.prototype.canvas = canvas
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index 1cced0f0..ee3439f2 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -5,6 +5,7 @@ import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState,
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
+import { SAVE_KEY } from '@/common/common'
 
 export function usePlan() {
   const [planNum, setPlanNum] = useState(0)
@@ -33,41 +34,7 @@ export function usePlan() {
   }
 
   const addCanvas = () => {
-    const objs = canvas?.toJSON([
-      'selectable',
-      'name',
-      'parentId',
-      'id',
-      'length',
-      'idx',
-      'direction',
-      'parentDirection',
-      'lines',
-      'points',
-      'lockMovementX',
-      'lockMovementY',
-      'lockRotation',
-      'lockScalingX',
-      'lockScalingY',
-      'opacity',
-      'cells',
-      'maxX',
-      'maxY',
-      'minX',
-      'minY',
-      'x',
-      'y',
-      'x1',
-      'x2',
-      'y1',
-      'y2',
-      'attributes',
-      'stickeyPoint',
-      'text',
-      'pitch',
-      'uuid',
-      'originText',
-    ])
+    const objs = canvas?.toJSON(SAVE_KEY)
 
     const str = JSON.stringify(objs)
 
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index bdce5876..0242a7b2 100644
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@@ -323,7 +323,6 @@ export const pitchSelector = selector({
   set: ({ get, set }, newValue) => {
     const basicSettingStateValue = get(basicSettingState)
     const roofAngleSet = basicSettingStateValue.roofAngleSet
-    console.log(newValue)
     if (roofAngleSet === 'slope') {
       set(globalPitchState, newValue)
     } else {

From ed90f71908380dd0805da7499dcea07acf173b27 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Tue, 29 Oct 2024 17:56:24 +0900
Subject: [PATCH 06/60] =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EB=A9=94=EB=89=B4?=
 =?UTF-8?q?=20=EB=AA=85=20/=20=EC=9D=B4=EB=8F=99=EA=B2=BD=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=AC=BC=EA=B1=B4=ED=98=84=ED=99=A9=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=ED=99=94=EB=A9=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header/Header.jsx             |   4 +-
 src/components/management/Stuff.jsx          |  33 ++---
 src/components/management/StuffSubHeader.jsx | 128 ++++++++++++-------
 src/locales/ja.json                          |   6 +-
 src/locales/ko.json                          |   6 +-
 5 files changed, 105 insertions(+), 72 deletions(-)

diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
index c12d237e..29cec36b 100644
--- a/src/components/header/Header.jsx
+++ b/src/components/header/Header.jsx
@@ -89,8 +89,8 @@ export default function Header(props) {
       name: 'header.menus.management',
       url: '',
       children: [
-        { id: 3, name: 'header.menus.management.stuff', url: '/management/stuff', children: [] },
-        { id: 4, name: 'header.menus.management.plan', url: '/floor-plan', children: [] },
+        { id: 3, name: 'header.menus.management.newStuff', url: '/management/stuff/tempdetail', children: [] },
+        { id: 4, name: 'header.menus.management.stuffList', url: '/management/stuff', children: [] },
       ],
     },
     {
diff --git a/src/components/management/Stuff.jsx b/src/components/management/Stuff.jsx
index dfd4f94b..5a1bee40 100644
--- a/src/components/management/Stuff.jsx
+++ b/src/components/management/Stuff.jsx
@@ -71,7 +71,7 @@ export default function Stuff() {
         // headerCheckboxSelectionCurrentPageOnly: true, //페이징시 현재 페이지만 체크되도록
         // checkboxSelection: true,
         // showDisabledCheckboxes: true,
-        cellStyle: { textAlign: 'center' },
+        cellStyle: { justifyContent: 'center' },
         valueFormatter: function (params) {
           if (params.value) {
             return dayjs(params?.value).format('YYYY.MM.DD HH:mm:ss')
@@ -85,31 +85,32 @@ export default function Stuff() {
         minWidth: 230,
         headerName: getMessage('stuff.gridHeader.objectNo'),
         cellRenderer: function (params) {
+          let objectNo = params.value.substring(0, 1)
           if (params.data.objectNo) {
             return (
-              <div>
-                <Button
-                  size="sm"
-                  color="default"
-                  onPress={() => {
-                    copyNo(params.value)
-                  }}
-                >
-                  복사
-                </Button>
-                <span onDoubleClick={onDoubleClick}>{params.value}</span>
+              <div className="copy-ico-wrap" onDoubleClick={onDoubleClick}>
+                {params.value.toLocaleString()}
+                {objectNo === 'R' && (
+                  <button
+                    type="button"
+                    className="copy_ico"
+                    onClick={() => {
+                      copyNo(params.value)
+                    }}
+                  ></button>
+                )}
               </div>
             )
           }
         },
         cellRendererParams: {
-          onPress: copyNo,
+          onClick: copyNo,
         },
       },
       {
         field: 'planTotCnt',
         headerName: getMessage('stuff.gridHeader.planTotCnt'),
-        cellStyle: { textAlign: 'right' },
+        cellStyle: { justifyContent: 'center' },
       },
       { field: 'objectName', headerName: getMessage('stuff.gridHeader.objectName'), cellStyle: { textAlign: 'left' } },
       {
@@ -131,7 +132,7 @@ export default function Stuff() {
             return null
           }
         },
-        cellStyle: { textAlign: 'center' },
+        cellStyle: { justifyContent: 'center' },
       },
       {
         field: 'createDatetime',
@@ -143,7 +144,7 @@ export default function Stuff() {
             return null
           }
         },
-        cellStyle: { textAlign: 'center' },
+        cellStyle: { justifyContent: 'center' },
       },
     ],
     gridCount: 0,
diff --git a/src/components/management/StuffSubHeader.jsx b/src/components/management/StuffSubHeader.jsx
index f1103143..12a51394 100644
--- a/src/components/management/StuffSubHeader.jsx
+++ b/src/components/management/StuffSubHeader.jsx
@@ -25,58 +25,90 @@ export default function StuffSubHeader({ type }) {
   const moveFloorPlan = () => {
     setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
 
-    router.push('/floor-plan')
+    //상단 헤더에서 이동할땐 무조건 첫번째 플랜으로
+    router.push('/floor-plan/estimate/5/1')
   }
 
   return (
-    <div className="sub-header">
-      <div className="sub-header-inner">
-        {type === 'list' && (
-          <Link href={'#'}>
-            <h1 className="sub-header-title">{getMessage('header.menus.management')}</h1>
-          </Link>
-        )}
-        {type === 'temp' && (
-          <ul className="sub-header-title-wrap">
-            <li className="title-item">
-              <Link className="sub-header-title" href={'#'}>
-                {getMessage('stuff.temp.subTitle')}
+    <>
+      <div className="sub-header">
+        <div className="sub-header-inner">
+          {type === 'list' && (
+            <>
+              <Link href={'#'}>
+                <h1 className="sub-header-title">{getMessage('header.menus.management')}</h1>
               </Link>
-            </li>
-          </ul>
-        )}
-        {type === 'detail' && (
-          <ul className="sub-header-title-wrap">
-            <li className="title-item">
-              <Link className="sub-header-title" href={'#'}>
-                {getMessage('stuff.temp.subTitle')}
-              </Link>
-            </li>
-            <li className="title-item">
-              <a className="sub-header-title" onClick={moveFloorPlan}>
-                <span className="icon drawing"></span>
-                {getMessage('plan.menu.plan.drawing')}
-              </a>
-            </li>
-          </ul>
-        )}
-
-        {type !== 'detail' && (
-          <ul className="sub-header-location">
-            <li className="location-item">
-              <span className="home">
-                <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
-              </span>
-            </li>
-            <li className="location-item">
-              <span>{getMessage('header.menus.management')}</span>
-            </li>
-            <li className="location-item">
-              <span>{getMessage('header.menus.management.stuff')}</span>
-            </li>
-          </ul>
-        )}
+              <ul className="sub-header-location">
+                <li className="location-item">
+                  <span className="home">
+                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+                  </span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management')}</span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management.stuffList')}</span>
+                </li>
+              </ul>
+            </>
+          )}
+          {type === 'temp' && (
+            <>
+              <ul className="sub-header-title-wrap">
+                <li className="title-item">
+                  <Link className="sub-header-title" href={'#'}>
+                    {getMessage('stuff.temp.subTitle')}
+                  </Link>
+                </li>
+              </ul>
+              <ul className="sub-header-location">
+                <li className="location-item">
+                  <span className="home">
+                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+                  </span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management')}</span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management.newStuff')}</span>
+                </li>
+              </ul>
+            </>
+          )}
+          {type === 'detail' && (
+            <>
+              <ul className="sub-header-title-wrap">
+                <li className="title-item">
+                  <Link className="sub-header-title" href={'#'}>
+                    {getMessage('stuff.temp.subTitle')}
+                  </Link>
+                </li>
+                <li className="title-item">
+                  <a className="sub-header-title" onClick={moveFloorPlan}>
+                    <span className="icon drawing"></span>
+                    {getMessage('plan.menu.plan.drawing')}
+                  </a>
+                </li>
+              </ul>
+              <ul className="sub-header-location">
+                <li className="location-item">
+                  <span className="home">
+                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+                  </span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management')}</span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management.newStuff')}</span>
+                </li>
+              </ul>
+            </>
+          )}
+        </div>
       </div>
-    </div>
+    </>
   )
 }
diff --git a/src/locales/ja.json b/src/locales/ja.json
index ea75bf6f..a75b6967 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -3,8 +3,8 @@
   "welcome": "환영합니다. {0}님",
   "header.menus.home": "ホームへv",
   "header.menus.management": "物品及び図面管理",
-  "header.menus.management.stuff": "新規物件登録",
-  "header.menus.management.plan": "モノ/図面管理",
+  "header.menus.management.newStuff": "新規 物件 登録",
+  "header.menus.management.stuffList": "物件の状況",
   "header.menus.community": "コミュニティ",
   "header.menus.community.notice": "お知らせ",
   "header.menus.community.faq": "FAQ",
@@ -606,7 +606,7 @@
   "stuff.planReqPopup.search.schDateGbnR": "受付日",
   "stuff.planReqPopup.error.message1": "設計依頼を選択してください。",
   "stuff.search.title": "物件状況",
-  "stuff.search.btn1": "物件登録",
+  "stuff.search.btn1": "新規 物件 登録",
   "stuff.search.btn2": "照会",
   "stuff.search.btn3": "初期化",
   "stuff.search.schObjectNo": "品番",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 62336c1c..19dedd58 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -3,8 +3,8 @@
   "welcome": "환영합니다. {0}님",
   "header.menus.home": "Home",
   "header.menus.management": "물건 및 도면 관리",
-  "header.menus.management.stuff": "신규 물건 등록",
-  "header.menus.management.plan": "사물/도면 관리",
+  "header.menus.management.newStuff": "신규 물건 등록",
+  "header.menus.management.stuffList": "물건 현황",
   "header.menus.community": "커뮤니티",
   "header.menus.community.notice": "공지",
   "header.menus.community.faq": "FAQ",
@@ -611,7 +611,7 @@
   "stuff.planReqPopup.search.schDateGbnR": "접수일",
   "stuff.planReqPopup.error.message1": "설계의뢰를 선택해주세요.",
   "stuff.search.title": "물건현황",
-  "stuff.search.btn1": "신규등록",
+  "stuff.search.btn1": "신규 물건 등록",
   "stuff.search.btn2": "조회",
   "stuff.search.btn3": "초기화",
   "stuff.search.schObjectNo": "물건번호",

From c051291c6873fb16b367dbb808d29e29565cb533 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 29 Oct 2024 18:21:20 +0900
Subject: [PATCH 07/60] =?UTF-8?q?=EB=B3=B5=EA=B5=AC=ED=95=A0=20=EC=98=A4?=
 =?UTF-8?q?=EB=B8=8C=EC=A0=9D=ED=8A=B8=20=ED=83=80=EC=9E=85=20common=20js?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/common.js   | 10 ++++++++++
 src/hooks/useCanvas.js | 29 ++++++++++++-----------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/common/common.js b/src/common/common.js
index decf1aad..a0204047 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -1,3 +1,5 @@
+import { fabric } from 'fabric'
+
 export const MENU = {
   PLAN_DRAWING: 'planDrawing',
   INITIAL_CANVAS_SETTING: 'initialCanvasSetting', // 배치면 초기설정
@@ -152,3 +154,11 @@ export const SAVE_KEY = [
   'uuid',
   'originText',
 ]
+
+export const OBJECT_PROTOTYPE = [
+  fabric.Line.prototype,
+  fabric.Polygon.prototype,
+  fabric.Text.prototype,
+  fabric.IText.prototype,
+  fabric.Triangle.prototype,
+]
diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index 5be247e9..6ffb03fc 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -13,7 +13,7 @@ import { writeImage } from '@/lib/canvas'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { useAxios } from '@/hooks/useAxios'
 import { useFont } from '@/hooks/common/useFont'
-import { SAVE_KEY } from '@/common/common'
+import { OBJECT_PROTOTYPE, RELOAD_TYPE_PROTOTYPE, SAVE_KEY } from '@/common/common'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useRecoilState(canvasState)
@@ -105,24 +105,19 @@ export function useCanvas(id) {
     fabric.Object.prototype.cornerStrokeColor = '#2BEBC8'
     fabric.Object.prototype.cornerSize = 6
 
-    fabric.Line.prototype.toObject = function (propertiesToInclude) {
-      let source = {}
-      for (let key in this) {
-        if (typeof this[key] !== 'function' && SAVE_KEY.includes(key)) {
-          source.key = this[key]
+    // 해당 오브젝트 타입의 경우 저장한 값 그대로 불러와야함
+    OBJECT_PROTOTYPE.forEach((type) => {
+      type.toObject = function (propertiesToInclude) {
+        let source = {}
+        for (let key in this) {
+          if (typeof this[key] !== 'function' && SAVE_KEY.includes(key)) {
+            source.key = this[key]
+          }
         }
+        return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), source)
       }
-      return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), source)
-    }
-    fabric.Polygon.prototype.toObject = function (propertiesToInclude) {
-      let source = {}
-      for (let key in this) {
-        if (typeof this[key] !== 'function' && SAVE_KEY.includes(key)) {
-          source.key = this[key]
-        }
-      }
-      return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), source)
-    }
+    })
+
     fabric.QLine = QLine
     fabric.QPolygon = QPolygon
     QPolygon.prototype.canvas = canvas

From 9a70b02857a60a8eebca655c13dd868038e8653a Mon Sep 17 00:00:00 2001
From: changkyu choi <okoookoo@naver.com>
Date: Tue, 29 Oct 2024 18:35:09 +0900
Subject: [PATCH 08/60] =?UTF-8?q?Canvas=20=EC=84=A4=EC=A0=95=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=ED=91=9C=EC=8B=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../floor-plan/modal/grid/DotLineGrid.jsx     |   8 +-
 .../modal/setting01/FirstOption.jsx           | 197 ------------------
 .../modal/setting01/SecondOption.jsx          | 114 ----------
 src/hooks/option/useCanvasSetting.js          |  51 ++++-
 src/store/settingAtom.js                      |  13 +-
 5 files changed, 59 insertions(+), 324 deletions(-)

diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
index 4cd63b1f..520d56dd 100644
--- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx
+++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
@@ -71,7 +71,7 @@ export default function DotLineGrid(props) {
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('DotLineGrid useEffect 실행')
-    // fetchGridSettings()
+    fetchGridSettings()
   }, [objectNo])
 
   const HandleClickClose = () => {
@@ -100,9 +100,9 @@ export default function DotLineGrid(props) {
       const patternData = {
         INTERVAL: {
           type: res.gridType,
-          horizontalInterval: res.gridHorizon,
-          verticalInterval: res.gridVertical,
-          ratioInterval: res.gridRatio,
+          horizontalInterval: res.gridHorizon * 10,
+          verticalInterval: res.gridVertical * 10,
+          ratioInterval: res.gridRatio * 10,
         },
         dimension: res.gridDimen,
         DOT: res.dotGridDisplay,
diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx
index db721dd5..cb3253b3 100644
--- a/src/components/floor-plan/modal/setting01/FirstOption.jsx
+++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx
@@ -2,216 +2,19 @@ import React, { useEffect, useState } from 'react'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useMessage } from '@/hooks/useMessage'
 
-//import { useRecoilState, useRecoilValue } from 'recoil'
-//import { settingModalSecondOptionsState } from '@/store/settingAtom'
-//import { useAxios } from '@/hooks/useAxios'
-//import { useSwal } from '@/hooks/useSwal'
-//import { setSurfaceShapePattern } from '@/util/canvas-util'
-//import { canvasState } from '@/store/canvasAtom'
-//import { POLYGON_TYPE } from '@/common/common'
-
 export default function FirstOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
   const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
   const { getMessage } = useMessage()
 
-  //const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
-  //const { option1, option2, dimensionDisplay } = settingModalFirstOptions
-  //const { option3, option4 } = settingModalSecondOptions
-  //const { get, post } = useAxios()
-  //const { swalFire } = useSwal()
-  //const canvas = useRecoilValue(canvasState)
-
   const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('FirstOption useEffect 실행')
-    //fetchSettings()
-    //frontSettings()
   }, [objectNo])
 
-  // // Canvas Setting 조회 및 초기화
-  // const fetchSettings = async () => {
-  //   try {
-  //     const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
-  //     const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-  //     const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-
-  //     // 데이터 설정
-  //     setSettingModalFirstOptions({
-  //       option1: optionData1,
-  //       option2: optionData2,
-  //       dimensionDisplay: optionData5,
-  //     })
-
-  //     setSettingModalSecondOptions({
-  //       option3: optionData3,
-  //       option4: optionData4,
-  //     })
-  //   } catch (error) {
-  //     console.error('Data fetching error:', error)
-  //   }
-  // }
-
-  // const onClickOption = async (option) => {
-  //   option.selected = !option.selected
-
-  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
-  //   setSettingModalSecondOptions({ option3, option4 })
-
-  //   try {
-  //     // 서버에 전송할 데이터
-  //     const dataToSend = {
-  //       firstOption1: option1.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption2: option2.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption3: dimensionDisplay.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       // secondOption1: secondOptions[0].option1.map((item) => ({
-  //       //   name: item.id,
-  //       //   name: item.name,
-  //       //   // 필요한 경우 데이터 항목 추가
-  //       // })),
-  //       secondOption2: option4.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //     }
-
-  //     const patternData = {
-  //       objectNo,
-  //       //디스플레이 설정(다중)
-  //       allocDisplay: dataToSend.firstOption1[0].selected,
-  //       outlineDisplay: dataToSend.firstOption1[1].selected,
-  //       gridDisplay: dataToSend.firstOption1[2].selected,
-  //       lineDisplay: dataToSend.firstOption1[3].selected,
-  //       wordDisplay: dataToSend.firstOption1[4].selected,
-  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
-  //       flowDisplay: dataToSend.firstOption1[6].selected,
-  //       trestleDisplay: dataToSend.firstOption1[7].selected,
-  //       totalDisplay: dataToSend.firstOption1[8].selected,
-  //       //차수 표시(다건)
-  //       corridorDimension: dataToSend.firstOption3[0].selected,
-  //       realDimension: dataToSend.firstOption3[1].selected,
-  //       noneDimension: dataToSend.firstOption3[2].selected,
-  //       //화면 표시(다중)
-  //       onlyBorder: dataToSend.firstOption2[0].selected,
-  //       lineHatch: dataToSend.firstOption2[1].selected,
-  //       allPainted: dataToSend.firstOption2[2].selected,
-  //       //흡착범위 설정(단건)
-  //       adsorpRangeSmall: dataToSend.secondOption2[0].selected,
-  //       adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
-  //       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
-  //       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
-  //     }
-
-  //     // HTTP POST 요청 보내기
-  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-  //       swalFire({ text: getMessage(res.returnMessage) })
-  //     })
-  //   } catch (error) {
-  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-  //   }
-  // }
-
-  // const onClickOnlyOne = async (item) => {
-  //   //화면 표시
-  //   if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
-  //     const options2 = settingModalFirstOptions?.option2.map((option2) => {
-  //       option2.selected = option2.id === item.id
-  //       return option2
-  //     })
-
-  //     const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-
-  //     polygons.forEach((polygon) => {
-  //       setSurfaceShapePattern(polygon, item.column)
-  //     })
-
-  //     //치수 표시
-  //   } else {
-  //     const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
-  //       option.selected = option.id === item.id
-  //       return option
-  //     })
-  //   }
-
-  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
-
-  //   try {
-  //     // 서버에 전송할 데이터
-  //     const dataToSend = {
-  //       firstOption1: option1.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption2: option2.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption3: dimensionDisplay.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       // secondOption1: secondOptions[0].option1.map((item) => ({
-  //       //   name: item.id,
-  //       //   name: item.name,
-  //       //   // 필요한 경우 데이터 항목 추가
-  //       // })),
-  //       secondOption2: option4.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //     }
-
-  //     const patternData = {
-  //       objectNo,
-  //       //디스플레이 설정(다중)
-  //       allocDisplay: dataToSend.firstOption1[0].selected,
-  //       outlineDisplay: dataToSend.firstOption1[1].selected,
-  //       gridDisplay: dataToSend.firstOption1[2].selected,
-  //       lineDisplay: dataToSend.firstOption1[3].selected,
-  //       wordDisplay: dataToSend.firstOption1[4].selected,
-  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
-  //       flowDisplay: dataToSend.firstOption1[6].selected,
-  //       trestleDisplay: dataToSend.firstOption1[7].selected,
-  //       totalDisplay: dataToSend.firstOption1[8].selected,
-  //       //차수 표시(다건)
-  //       corridorDimension: dataToSend.firstOption3[0].selected,
-  //       realDimension: dataToSend.firstOption3[1].selected,
-  //       noneDimension: dataToSend.firstOption3[2].selected,
-  //       //화면 표시(다중)
-  //       onlyBorder: dataToSend.firstOption2[0].selected,
-  //       lineHatch: dataToSend.firstOption2[1].selected,
-  //       allPainted: dataToSend.firstOption2[2].selected,
-  //       //흡착범위 설정(단건)
-  //       adsorpRangeSmall: dataToSend.secondOption2[0].selected,
-  //       adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
-  //       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
-  //       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
-  //     }
-
-  //     // HTTP POST 요청 보내기
-  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-  //       swalFire({ text: getMessage(res.returnMessage) })
-  //     })
-  //   } catch (error) {
-  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-  //   }
-  // }
-
   return (
     <>
       <div className="modal-check-btn-wrap">
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx
index ff8d61db..c09dfdc1 100644
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@@ -1,5 +1,4 @@
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-//import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
 import React, { useEffect, useState } from 'react'
 import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
@@ -10,20 +9,7 @@ import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/Pl
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 
-//import { useAxios } from '@/hooks/useAxios'
-//import { useSwal } from '@/hooks/useSwal'
-// import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
-
 export default function SecondOption() {
-  //const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
-  //const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
-  // const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
-  // const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
-  // const { option1, option2, dimensionDisplay } = settingModalFirstOptions
-  // const { option3, option4 } = settingModalSecondOptions
-  // const { get, post } = useAxios()
-  // const { swalFire } = useSwal()
-
   const { getMessage } = useMessage()
   const { addPopup, closePopup, closePopups } = usePopup()
   const [showFontSettingModal, setShowFontSettingModal] = useState(false)
@@ -43,106 +29,6 @@ export default function SecondOption() {
     //fetchSettings()
   }, [objectNo])
 
-  // Canvas Setting 조회 및 초기화
-  // const fetchSettings = async () => {
-  //   try {
-  //     const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
-  //     const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-  //     const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-
-  //     setSettingModalFirstOptions({
-  //       option1: optionData1,
-  //       option2: optionData2,
-  //       dimensionDisplay: optionData5,
-  //     })
-  //     setSettingModalSecondOptions({
-  //       option3: optionData3,
-  //       option4: optionData4,
-  //     })
-  //   } catch (error) {
-  //     console.error('Data fetching error:', error)
-  //   }
-  // }
-
-  // const onClickOption = async (option) => {
-  //   // option4에서 한 개만 선택 가능하도록 처리
-  //   const updatedOption4 = option4.map((item) =>
-  //     item.id === option.id
-  //       ? { ...item, selected: true }
-  //       : {
-  //           ...item,
-  //           selected: false,
-  //         },
-  //   )
-
-  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
-  //   setSettingModalSecondOptions({ option3, option4: updatedOption4 })
-
-  //   try {
-  //     // 서버에 전송할 데이터
-  //     const dataToSend = {
-  //       firstOption1: option1.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption2: option2.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption3: dimensionDisplay.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       // secondOption1: secondOptions[0].option3.map((item) => ({
-  //       //   name: item.id,
-  //       //   name: item.name,
-  //       //   // 필요한 경우 데이터 항목 추가
-  //       // })),
-  //       secondOption2: updatedOption4.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //     }
-  //     const patternData = {
-  //       objectNo,
-  //       //디스플레이 설정(다중)
-  //       allocDisplay: dataToSend.firstOption1[0].selected,
-  //       outlineDisplay: dataToSend.firstOption1[1].selected,
-  //       gridDisplay: dataToSend.firstOption1[2].selected,
-  //       lineDisplay: dataToSend.firstOption1[3].selected,
-  //       wordDisplay: dataToSend.firstOption1[4].selected,
-  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
-  //       flowDisplay: dataToSend.firstOption1[6].selected,
-  //       trestleDisplay: dataToSend.firstOption1[7].selected,
-  //       totalDisplay: dataToSend.firstOption1[8].selected,
-  //       //차수 표시(다건)
-  //       corridorDimension: dataToSend.firstOption3[0].selected,
-  //       realDimension: dataToSend.firstOption3[1].selected,
-  //       noneDimension: dataToSend.firstOption3[2].selected,
-  //       //화면 표시(다중)
-  //       onlyBorder: dataToSend.firstOption2[0].selected,
-  //       lineHatch: dataToSend.firstOption2[1].selected,
-  //       allPainted: dataToSend.firstOption2[2].selected,
-  //       //흡착범위 설정(단건)
-  //       adsorpRangeSmall: dataToSend.secondOption2[0].selected,
-  //       adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
-  //       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
-  //       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
-  //     }
-
-  //     // HTTP POST 요청 보내기
-  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-  //       swalFire({ text: getMessage(res.returnMessage) })
-  //     })
-  //   } catch (error) {
-  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-  //   }
-  //   setAdsorptionRange(option.range)
-  // }
-
   let dimensionId = null
   let fontId = null
   let planSizeId = null
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 2856b5c2..0f87e156 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -39,18 +39,29 @@ export function useCanvasSetting() {
     //fetchSettings()
     //onClickOption()
     //fetchSettings()
+  }, [adsorptionPointMode])
+
+  useEffect(() => {
+    console.log('useCanvasSetting useEffect 실행3')
+    //fetchSettings()
+    //onClickOption()
+    //fetchSettings()
   }, [settingModalFirstOptions, settingModalSecondOptions])
 
   const fetchSettings = async () => {
     try {
       const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+      console.log('res', res)
       const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
       const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
       const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
       const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
-        ...item,
-      }))
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))
+
+      const patternData = {
+        adsorpPoint: res.adsorpPoint,
+      }
+
       // 데이터 설정
       setSettingModalFirstOptions({
         option1: optionData1,
@@ -61,6 +72,10 @@ export function useCanvasSetting() {
         option3: optionData3,
         option4: optionData4,
       })
+
+      setAdsorptionPointMode(patternData.adsorpPoint)
+
+      console.log('adsorptionPointMode', adsorptionPointMode)
     } catch (error) {
       console.error('Data fetching error:', error)
     }
@@ -110,8 +125,23 @@ export function useCanvasSetting() {
 
       setSettingModalSecondOptions({ option3, option4: updatedOption4 })
 
+      //흡착점 ON / OFF
+    } else if (item === 'adsorpPoint') {
+      console.log('흡착점 ON / OFF ', item)
+      const options2 = settingModalFirstOptions?.option2.map((option2) => {
+        option2.selected = option2.id === item.id
+        return option2
+      })
+
+      const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
+      polygons.forEach((polygon) => {
+        setSurfaceShapePattern(polygon, item.column)
+      })
+
       //디스플레이 설정(다 건 선택)
     } else {
+      //console.log('디스플레이 설정1 ', item.column)
       console.log('디스플레이 설정 ', item)
       item.selected = !item.selected
     }
@@ -155,7 +185,8 @@ export function useCanvasSetting() {
         circuitNumDisplay: dataToSend.firstOption1[5].selected,
         flowDisplay: dataToSend.firstOption1[6].selected,
         trestleDisplay: dataToSend.firstOption1[7].selected,
-        totalDisplay: dataToSend.firstOption1[8].selected,
+        imageDisplay: dataToSend.firstOption1[8].selected,
+        totalDisplay: dataToSend.firstOption1[9].selected,
         //차수 표시(단 건)
         corridorDimension: dataToSend.firstOption3[0].selected,
         realDimension: dataToSend.firstOption3[1].selected,
@@ -169,6 +200,8 @@ export function useCanvasSetting() {
         adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
         adsorpRangeMedium: dataToSend.secondOption2[2].selected,
         adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+        //흡착점 ON/OFF
+        adsorpPoint: adsorptionPointMode,
       }
 
       console.log('patternData ', patternData)
@@ -199,6 +232,7 @@ export function useCanvasSetting() {
     // 'circuitNumDisplay' 회로번호 표시
     // 'flowDisplay' 흐름방향 표시   'arrow'
     // 'trestleDisplay' 가대 표시
+    // 'imageDisplay' 이미지 표시
     // 'totalDisplay' 집계표 표시
 
     let optionName //옵션명
@@ -230,9 +264,12 @@ export function useCanvasSetting() {
         case 'trestleDisplay': //가대 표시
           optionName = ['8']
           break
-        case 'totalDisplay': //집계표 표시
+        case 'imageDisplay': //이미지 표시
           optionName = ['9']
           break
+        case 'totalDisplay': //집계표 표시
+          optionName = ['10']
+          break
       }
       // 표시 선택 상태(true/false)
       optionSelected = option1[i].selected
@@ -259,10 +296,10 @@ export function useCanvasSetting() {
     setSettingModalFirstOptions,
     settingModalSecondOptions,
     setSettingModalSecondOptions,
+    adsorptionPointMode,
+    setAdsorptionPointMode,
     fetchSettings,
     onClickOption,
     frontSettings,
-    adsorptionPointMode,
-    setAdsorptionPointMode,
   }
 }
diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js
index 4cab929c..9679d2d7 100644
--- a/src/store/settingAtom.js
+++ b/src/store/settingAtom.js
@@ -12,8 +12,8 @@ export const settingModalFirstOptionsState = atom({
       { id: 6, column: 'circuitNumDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
       { id: 7, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
       { id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
-      { id: 10, column: 'imageDisplay', name: 'modal.canvas.setting.first.option.image', selected: false },
-      { id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
+      { id: 9, column: 'imageDisplay', name: 'modal.canvas.setting.first.option.image', selected: false },
+      { id: 10, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
     ],
     dimensionDisplay: [
       {
@@ -160,6 +160,15 @@ export const trestleDisplaySelector = selector({
   },
 })
 
+// 디스플레이 설정 - 이미지 표시
+export const imageDisplaySelector = selector({
+  key: 'imageDisplaySelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.option1.find((option) => option.column === 'imageDisplay').selected
+  },
+})
+
 // 디스플레이 설정 - 집계표 표시
 export const totalDisplaySelector = selector({
   key: 'totalDisplaySelector',

From c3360a8632d456e8e7723ee5d5d610a1fb5482df Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 30 Oct 2024 09:54:51 +0900
Subject: [PATCH 09/60] =?UTF-8?q?text=20type=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/common.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/common.js b/src/common/common.js
index a0204047..8a7e9041 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -158,7 +158,7 @@ export const SAVE_KEY = [
 export const OBJECT_PROTOTYPE = [
   fabric.Line.prototype,
   fabric.Polygon.prototype,
-  fabric.Text.prototype,
-  fabric.IText.prototype,
+  // fabric.Text.prototype,
+  // fabric.IText.prototype,
   fabric.Triangle.prototype,
 ]

From b9b4eae47413192a52aca1350881b94dc69fcae9 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Wed, 30 Oct 2024 09:57:37 +0900
Subject: [PATCH 10/60] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=ED=98=84=ED=99=A9=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/management/StuffDetail.jsx | 29 +++++++++--------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index 21dc5d17..1a4c99ae 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -22,12 +22,12 @@ import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
 export default function StuffDetail() {
   const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState) //견적서 화면용 물건번호리코일
 
-  const inputReceiveUserEl = useRef(null) //담당자ref
-  const inputObjectNameEl = useRef(null) //물건명ref
-  const inputZipNoEl = useRef(null) //우편번호ref
-  const inputAddressEl = useRef(null) //주소ref
-  const inputVerticalSnowCoverEl = useRef(null) //수직적설량ref
-  const inputInstallHeightEl = useRef(null) //설치높이ref
+  // const inputReceiveUserEl = useRef(null) //담당자ref
+  // const inputObjectNameEl = useRef(null) //물건명ref
+  // const inputZipNoEl = useRef(null) //우편번호ref
+  // const inputAddressEl = useRef(null) //주소ref
+  // const inputVerticalSnowCoverEl = useRef(null) //수직적설량ref
+  // const inputInstallHeightEl = useRef(null) //설치높이ref
 
   //공통코드
   const { commonCode, findCommonCode } = useCommonCode()
@@ -1183,6 +1183,7 @@ export default function StuffDetail() {
       return alert(getMessage('stuff.detail.save.valierror2'))
     }
 
+    return
     await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
       if (res.status === 201) {
         alert(getMessage('stuff.detail.tempSave.message1'))
@@ -1268,7 +1269,7 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="input-wrap" style={{ width: '500px' }}>
-                        <input type="text" className="input-light" {...form.register('receiveUser')} ref={inputReceiveUserEl} />
+                        <input type="text" className="input-light" {...form.register('receiveUser')} />
                       </div>
                     </td>
                   </tr>
@@ -1297,7 +1298,7 @@ export default function StuffDetail() {
                         })}
                         {/* 라디오끝 */}
                         <div className="input-wrap mr5" style={{ width: '545px' }}>
-                          <input type="text" className="input-light" {...form.register('objectName')} ref={inputObjectNameEl} />
+                          <input type="text" className="input-light" {...form.register('objectName')} />
                         </div>
                         <div className="select-wrap" style={{ width: '120px' }}>
                           <Select
@@ -1458,7 +1459,7 @@ export default function StuffDetail() {
                     <td>
                       <div className="flx-box">
                         <div className="input-wrap mr5" style={{ width: '200px' }}>
-                          <input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} ref={inputZipNoEl} />
+                          <input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} />
                         </div>
                         <Button className="btn-origin grey" onPress={onSearchPostNumberPopOpen}>
                           {getMessage('stuff.detail.btn.addressPop')}
@@ -1494,13 +1495,7 @@ export default function StuffDetail() {
                           )}
                         </div>
                         <div className="input-wrap mr5" style={{ width: '580px' }}>
-                          <input
-                            type="text"
-                            className="input-light"
-                            value={form.watch('address') || ''}
-                            {...form.register('address')}
-                            ref={inputAddressEl}
-                          />
+                          <input type="text" className="input-light" value={form.watch('address') || ''} {...form.register('address')} />
                         </div>
                       </div>
                     </td>
@@ -1575,7 +1570,6 @@ export default function StuffDetail() {
                             onKeyUp={handleKeyUp}
                             value={form.watch('verticalSnowCover') || ''}
                             {...register('verticalSnowCover')}
-                            ref={inputVerticalSnowCoverEl}
                           />
                         </div>
                         <span className="mr10">cm</span>
@@ -1623,7 +1617,6 @@ export default function StuffDetail() {
                             onKeyUp={handleKeyUp}
                             value={form.watch('installHeight') || ''}
                             {...register('installHeight')}
-                            ref={inputInstallHeightEl}
                           />
                         </div>
                         <span>m</span>

From a44c4bbeb0dd686a5ec4c9926424d02b3cca36a6 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Wed, 30 Oct 2024 10:00:29 +0900
Subject: [PATCH 11/60] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=ED=99=94=EB=A9=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/estimate/Estimate.jsx | 26 +++++++++++++-------------
 src/locales/ja.json                  | 11 +++++++++++
 src/locales/ko.json                  | 11 +++++++++++
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx
index af51ea74..de96d1a3 100644
--- a/src/components/estimate/Estimate.jsx
+++ b/src/components/estimate/Estimate.jsx
@@ -152,7 +152,7 @@ export default function Estimate({ params }) {
                   <tr>
                     {/* 주문분류 */}
                     <th>
-                      注文分類/주문분류 <span className="important">*</span>
+                      {getMessage('estimate.detail.orderType')} <span className="important">*</span>
                     </th>
                     <td colSpan={3}>
                       <div className="radio-wrap"></div>
@@ -160,7 +160,7 @@ export default function Estimate({ params }) {
                   </tr>
                   <tr>
                     {/* 지붕재・사양시공 최대4개*/}
-                    <th>屋根材・仕様施工 / 지붕재・사양시공</th>
+                    <th>{getMessage('estimate.detail.roofCns')}</th>
                     <td colSpan={3}>
                       <div className="form-flex-wrap mb5">
                         <div className="input-wrap mr5" style={{ width: '610px' }}>
@@ -178,7 +178,7 @@ export default function Estimate({ params }) {
                   </tr>
                   <tr>
                     {/* 비고 */}
-                    <th>備考 /비고</th>
+                    <th>{getMessage('estimate.detail.note')}</th>
                     <td colSpan={3}>
                       <div className="input-wrap">
                         <input type="text" className="input-light" />
@@ -193,9 +193,9 @@ export default function Estimate({ params }) {
               <div className="title-wrap">
                 <h3>{getMessage('estimate.detail.header.fileList1')}</h3>
                 <div className="d-check-box light mr5">
-                  <input type="checkbox" id="" />
-                  <label htmlFor="" style={{ color: '#101010' }}>
-                    後日資料提出 / 후일자료제출
+                  <input type="checkbox" id="next" />
+                  <label htmlFor="next" style={{ color: '#101010' }}>
+                    {getMessage('estimate.detail.nextSubmit')}
                   </label>
                 </div>
               </div>
@@ -273,23 +273,23 @@ export default function Estimate({ params }) {
             <div className="estimate-wrap">
               <div className="estimate-list-wrap one">
                 <div className="estimate-box">
-                  <div className="estimate-tit">수량 (PCS)</div>
+                  <div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.totPcs')}</div>
                   <div className="estimate-name blue">74</div>
                 </div>
                 <div className="estimate-box">
-                  <div className="estimate-tit">용량 (Kw)</div>
+                  <div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.vol')}</div>
                   <div className="estimate-name blue">8300</div>
                 </div>
                 <div className="estimate-box">
-                  <div className="estimate-tit">공급가액</div>
+                  <div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.netAmt')}</div>
                   <div className="estimate-name blue">6,798,900</div>
                 </div>
                 <div className="estimate-box">
-                  <div className="estimate-tit">부가세 (10％)</div>
+                  <div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.vat')}</div>
                   <div className="estimate-name blue">679,890</div>
                 </div>
                 <div className="estimate-box">
-                  <div className="estimate-tit">총액</div>
+                  <div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.totPrice')}</div>
                   <div className="estimate-name red">7,478,790</div>
                 </div>
               </div>
@@ -317,9 +317,9 @@ export default function Estimate({ params }) {
                       </div>
                     </td>
                     <th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgWeight')}</th>
-                    <td>(모듈수량 * 수량) / 100)</td>
+                    <td>{getMessage('estimate.detail.sepcialEstimateProductInfo.calcFormula1')}</td>
                     <th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgPrice')}</th>
-                    <td>PKG단가(W) * PKG용량(W)</td>
+                    <td>{getMessage('estimate.detail.sepcialEstimateProductInfo.calcFormula2')}</td>
                   </tr>
                 </tbody>
               </table>
diff --git a/src/locales/ja.json b/src/locales/ja.json
index a75b6967..27b20ada 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -730,14 +730,25 @@
   "estimate.detail.receiveUser": "担当者 ",
   "estimate.detail.title": "案件名",
   "estimate.detail.remarks": "メモ",
+  "estimate.detail.orderType": "注文分類",
+  "estimate.detail.roofCns": "屋根材・仕様施工",
+  "estimate.detail.note": "備考",
+  "estimate.detail.nextSubmit": "後日資料提出",
   "estimate.detail.header.fileList1": "ファイル添付",
   "estimate.detail.fileList.btn": "ファイル選択",
   "estimate.detail.header.fileList2": "添付ファイル一覧",
   "estimate.detail.header.specialEstimate": "見積もりの具体的な",
   "estimate.detail.header.specialEstimateProductInfo": "製品情報",
+  "estimate.detail.sepcialEstimateProductInfo.totPcs": "数量 (PCS)",
+  "estimate.detail.sepcialEstimateProductInfo.vol": "容量 (Kw)",
+  "estimate.detail.sepcialEstimateProductInfo.netAmt": "供給価格",
+  "estimate.detail.sepcialEstimateProductInfo.vat": "付加価値税 (10%)",
+  "estimate.detail.sepcialEstimateProductInfo.totPrice": "総額",
   "estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice": "住宅PKG単価 (W)",
   "estimate.detail.sepcialEstimateProductInfo.pkgWeight": "PKG容量 (Kw)",
   "estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG金額",
+  "estimate.detail.sepcialEstimateProductInfo.calcFormula1": "(モジュール容量 × 数量)÷1000",
+  "estimate.detail.sepcialEstimateProductInfo.calcFormula2": "PKG単価 (W)×PKG容量(W)",
   "estimate.detail.header.showPrice": "価格表示",
   "estimate.detail.showPrice.btn1": "Pricing",
   "estimate.detail.showPrice.description": "クリックして製品の特異性を確認する",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 19dedd58..ecd5b73b 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -735,14 +735,25 @@
   "estimate.detail.receiveUser": "담당자",
   "estimate.detail.title": "안건명",
   "estimate.detail.remarks": "메모",
+  "estimate.detail.orderType": "주문분류",
+  "estimate.detail.roofCns": "지붕재・사양시공",
+  "estimate.detail.note": "비고",
+  "estimate.detail.nextSubmit": "후일자료제출",
   "estimate.detail.header.fileList1": "파일첨부",
   "estimate.detail.fileList.btn": "파일선택",
   "estimate.detail.header.fileList2": "첨부파일 목록",
   "estimate.detail.header.specialEstimate": "견적특이사항",
   "estimate.detail.header.specialEstimateProductInfo": "제품정보",
+  "estimate.detail.sepcialEstimateProductInfo.totPcs": "수량 (PCS)",
+  "estimate.detail.sepcialEstimateProductInfo.vol": "용량 (Kw)",
+  "estimate.detail.sepcialEstimateProductInfo.netAmt": "공급가액",
+  "estimate.detail.sepcialEstimateProductInfo.vat": "부가세 (10％)",
+  "estimate.detail.sepcialEstimateProductInfo.totPrice": "총액",
   "estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice": "주택PKG단가 (W)",
   "estimate.detail.sepcialEstimateProductInfo.pkgWeight": "PKG 용량 (Kw)",
   "estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG 금액",
+  "estimate.detail.sepcialEstimateProductInfo.calcFormula1": "(모듈수량 * 수량)÷100",
+  "estimate.detail.sepcialEstimateProductInfo.calcFormula2": "PKG단가(W) * PKG용량(W)",
   "estimate.detail.header.showPrice": "가격표시",
   "estimate.detail.showPrice.btn1": "Pricing",
   "estimate.detail.showPrice.description": "클릭하여 제품 특이사항 확인",

From b113579e530bc6b739a03354519a3318f85de58e Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Wed, 30 Oct 2024 10:03:12 +0900
Subject: [PATCH 12/60] =?UTF-8?q?=EC=9E=84=EC=8B=9C=EC=A0=80=EC=9E=A5=20re?=
 =?UTF-8?q?turn=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/management/StuffDetail.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index 1a4c99ae..ac39e5b2 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -1183,7 +1183,6 @@ export default function StuffDetail() {
       return alert(getMessage('stuff.detail.save.valierror2'))
     }
 
-    return
     await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
       if (res.status === 201) {
         alert(getMessage('stuff.detail.tempSave.message1'))

From f53a571a0ec0319b22fd185e15871a1b372fe2f0 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Wed, 30 Oct 2024 10:08:43 +0900
Subject: [PATCH 13/60] =?UTF-8?q?=EC=9E=84=EC=8B=9C=EC=A0=80=EC=9E=A5=20?=
 =?UTF-8?q?=ED=95=84=EC=88=98=EA=B0=92=20=EC=B2=B4=ED=81=AC=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/management/StuffDetail.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index ac39e5b2..43089124 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -1173,15 +1173,15 @@ export default function StuffDetail() {
       params.saleStoreLevel = sessionState.storeLvl
     }
     //수직적설량, 설치높이 0인지 체크
-    let snow = params.verticalSnowCover
-    let height = params.installHeight
+    // let snow = params.verticalSnowCover
+    // let height = params.installHeight
 
-    if (snow === '0') {
-      return alert(getMessage('stuff.detail.save.valierror1'))
-    }
-    if (height === '0') {
-      return alert(getMessage('stuff.detail.save.valierror2'))
-    }
+    // if (snow === '0') {
+    //   return alert(getMessage('stuff.detail.save.valierror1'))
+    // }
+    // if (height === '0') {
+    //   return alert(getMessage('stuff.detail.save.valierror2'))
+    // }
 
     await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
       if (res.status === 201) {

From 9a5ac095ffca9ed80d92733983059e97c996f60a Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Wed, 30 Oct 2024 10:34:47 +0900
Subject: [PATCH 14/60] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=97=94=ED=84=B0=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=EB=8B=A4=EB=A5=B8=ED=95=84=EB=93=9C=EB=8F=84=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/management/StuffDetail.jsx          | 6 +++---
 src/components/management/StuffSearchCondition.jsx | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index 43089124..6d3a83ee 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -1128,9 +1128,10 @@ export default function StuffDetail() {
       // 수정모드일때는 PUT
       await promisePut({ url: apiUrl, data: params }).then((res) => {
         if (res.status === 201) {
+          setFloorPlanObjectNo({ floorPlanObjectNo: res.data.objectNo })
           alert(getMessage('stuff.detail.save'))
-          setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
-          router.refresh()
+          // router.refresh()
+          router.push(`/management/stuff/detail?objectNo=${res.data.objectNo.toString()}`)
         }
       })
     }
@@ -1182,7 +1183,6 @@ export default function StuffDetail() {
     // if (height === '0') {
     //   return alert(getMessage('stuff.detail.save.valierror2'))
     // }
-
     await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
       if (res.status === 201) {
         alert(getMessage('stuff.detail.tempSave.message1'))
diff --git a/src/components/management/StuffSearchCondition.jsx b/src/components/management/StuffSearchCondition.jsx
index 3e5b07f6..421f806f 100644
--- a/src/components/management/StuffSearchCondition.jsx
+++ b/src/components/management/StuffSearchCondition.jsx
@@ -144,6 +144,7 @@ export default function StuffSearchCondition() {
           })
           const allList = res
           const favList = res.filter((row) => row.priority !== 'B')
+
           setSchSelSaleStoreList(allList)
           setFavoriteStoreList(favList)
           setShowSaleStoreList(favList)
@@ -263,6 +264,7 @@ export default function StuffSearchCondition() {
                       onChange={(e) => {
                         setSaleStoreName(saleStoreNameRef.current.value)
                       }}
+                      onKeyUp={handleByOnKeyUp}
                     />
                   </div>
                 </td>
@@ -277,6 +279,7 @@ export default function StuffSearchCondition() {
                       onChange={(e) => {
                         setAddress(addressRef.current.value)
                       }}
+                      onKeyUp={handleByOnKeyUp}
                     />
                   </div>
                 </td>
@@ -293,6 +296,7 @@ export default function StuffSearchCondition() {
                       onChange={(e) => {
                         setobjectName(objectNameRef.current.value)
                       }}
+                      onKeyUp={handleByOnKeyUp}
                     />
                   </div>
                 </td>
@@ -307,6 +311,7 @@ export default function StuffSearchCondition() {
                       onChange={(e) => {
                         setDispCompanyName(dispCompanyNameRef.current.value)
                       }}
+                      onKeyUp={handleByOnKeyUp}
                     />
                   </div>
                 </td>
@@ -363,6 +368,7 @@ export default function StuffSearchCondition() {
                       onChange={(e) => {
                         setReceiveUser(receiveUserRef.current.value)
                       }}
+                      onKeyUp={handleByOnKeyUp}
                     />
                   </div>
                 </td>

From 34af06eef49fb9b91802fdbd6dac139e2ea22a35 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 30 Oct 2024 10:53:25 +0900
Subject: [PATCH 15/60] =?UTF-8?q?=EB=8F=99=EC=84=A0=EC=9D=B4=EB=8F=99=20?=
 =?UTF-8?q?=ED=98=95=20=EC=98=AC=EB=A6=BC=EB=82=B4=EB=A6=BC=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=20=EC=B4=88=EA=B8=B0=EC=84=B8=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/common.js                          |  8 +--
 .../modal/movement/MovementSetting.jsx        | 27 ++++++----
 .../modal/movement/type/FlowLine.jsx          | 54 +++++++++++++++++--
 .../floor-plan/modal/movement/type/Updown.jsx | 44 +++++++++++++--
 src/hooks/roofcover/useMovementSetting.js     | 48 +++++++++++++++++
 5 files changed, 153 insertions(+), 28 deletions(-)
 create mode 100644 src/hooks/roofcover/useMovementSetting.js

diff --git a/src/common/common.js b/src/common/common.js
index 8a7e9041..c8dc5383 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -155,10 +155,4 @@ export const SAVE_KEY = [
   'originText',
 ]
 
-export const OBJECT_PROTOTYPE = [
-  fabric.Line.prototype,
-  fabric.Polygon.prototype,
-  // fabric.Text.prototype,
-  // fabric.IText.prototype,
-  fabric.Triangle.prototype,
-]
+export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]
diff --git a/src/components/floor-plan/modal/movement/MovementSetting.jsx b/src/components/floor-plan/modal/movement/MovementSetting.jsx
index fabf813c..424a697e 100644
--- a/src/components/floor-plan/modal/movement/MovementSetting.jsx
+++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx
@@ -4,15 +4,18 @@ import { useState } from 'react'
 import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
 import Updown from '@/components/floor-plan/modal/movement/type/Updown'
 import { usePopup } from '@/hooks/usePopup'
+import { useMovementSetting } from '@/hooks/roofcover/useMovementSetting'
 
 export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
-  const { closePopup } = usePopup()
-  const [buttonAct, setButtonAct] = useState(1)
-  const buttonMenu = [
-    { id: 1, name: getMessage('modal.movement.flow.line.move') },
-    { id: 2, name: getMessage('modal.movement.flow.line.updown') },
-  ]
+  const { TYPE, closePopup, buttonType, type, setType, FLOW_LINE_REF, UP_DOWN_REF, handleSave } = useMovementSetting(id)
+
+  const flowLineProps = {
+    FLOW_LINE_REF,
+  }
+  const updownProps = {
+    UP_DOWN_REF,
+  }
 
   return (
     <WithDraggable isShow={true} pos={pos}>
@@ -25,19 +28,21 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
         </div>
         <div className="modal-body">
           <div className="modal-btn-wrap">
-            {buttonMenu.map((item) => (
-              <button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
+            {buttonType.map((item) => (
+              <button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
                 {item.name}
               </button>
             ))}
           </div>
           <div className="properties-setting-wrap outer">
             <div className="setting-tit">{getMessage('setting')}</div>
-            {buttonAct === 1 && <FlowLine />}
-            {buttonAct === 2 && <Updown />}
+            {type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
+            {type === TYPE.UP_DOWN && <Updown {...updownProps} />}
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
+            <button className="btn-frame modal act" onClick={handleSave}>
+              {getMessage('modal.common.save')}
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/components/floor-plan/modal/movement/type/FlowLine.jsx b/src/components/floor-plan/modal/movement/type/FlowLine.jsx
index d1bf8023..1d3dd26e 100644
--- a/src/components/floor-plan/modal/movement/type/FlowLine.jsx
+++ b/src/components/floor-plan/modal/movement/type/FlowLine.jsx
@@ -1,7 +1,24 @@
 import { useMessage } from '@/hooks/useMessage'
+import { useEffect, useState } from 'react'
 
-export default function FlowLine({}) {
+const FLOW_LINE_TYPE = {
+  DOWN_LEFT: 'downLeft',
+  UP_RIGHT: 'upRight',
+}
+
+export default function FlowLine({ FLOW_LINE_REF }) {
   const { getMessage } = useMessage()
+  const [type, setType] = useState(FLOW_LINE_TYPE.DOWN_LEFT)
+
+  useEffect(() => {
+    if (type === FLOW_LINE_TYPE.DOWN_LEFT) {
+      FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
+      FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.focus()
+    } else {
+      FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
+      FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.focus()
+    }
+  }, [type])
 
   return (
     <>
@@ -11,14 +28,28 @@ export default function FlowLine({}) {
           <div className="eaves-keraba-item">
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
-                <input type="radio" name="radio01" id="ra01" />
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra01"
+                  defaultChecked={true}
+                  ref={FLOW_LINE_REF.DOWN_LEFT_RADIO_REF}
+                  onChange={() => {
+                    setType(FLOW_LINE_TYPE.DOWN_LEFT)
+                  }}
+                />
                 <label htmlFor="ra01">{getMessage('modal.movement.flow.line.bottom.left')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={100} />
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    readOnly={type !== FLOW_LINE_TYPE.DOWN_LEFT}
+                    ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF}
+                  />
                 </div>
               </div>
             </div>
@@ -26,14 +57,27 @@ export default function FlowLine({}) {
           <div className="eaves-keraba-item">
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
-                <input type="radio" name="radio01" id="ra02" />
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra02"
+                  ref={FLOW_LINE_REF.UP_RIGHT_RADIO_REF}
+                  onChange={() => {
+                    setType(FLOW_LINE_TYPE.UP_RIGHT)
+                  }}
+                />
                 <label htmlFor="ra02">{getMessage('modal.movement.flow.line.top.right')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={100} />
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    readOnly={type !== FLOW_LINE_TYPE.UP_RIGHT}
+                    ref={FLOW_LINE_REF.UP_RIGHT_INPUT_REF}
+                  />
                 </div>
                 <span className="thin">mm</span>
               </div>
diff --git a/src/components/floor-plan/modal/movement/type/Updown.jsx b/src/components/floor-plan/modal/movement/type/Updown.jsx
index 2650ca4a..a27abf80 100644
--- a/src/components/floor-plan/modal/movement/type/Updown.jsx
+++ b/src/components/floor-plan/modal/movement/type/Updown.jsx
@@ -1,7 +1,24 @@
 import { useMessage } from '@/hooks/useMessage'
+import { useEffect, useState } from 'react'
 
-export default function Updown({}) {
+const UP_DOWN_TYPE = {
+  UP: 'up',
+  DOWN: 'down',
+}
+
+export default function Updown({ UP_DOWN_REF }) {
   const { getMessage } = useMessage()
+  const [type, setType] = useState(UP_DOWN_TYPE.UP)
+
+  useEffect(() => {
+    if (type === UP_DOWN_TYPE.UP) {
+      UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
+      UP_DOWN_REF.UP_INPUT_REF.current.focus()
+    } else {
+      UP_DOWN_REF.UP_INPUT_REF.current.value = ''
+      UP_DOWN_REF.DOWN_INPUT_REF.current.focus()
+    }
+  }, [type])
 
   return (
     <>
@@ -11,14 +28,23 @@ export default function Updown({}) {
           <div className="eaves-keraba-item">
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
-                <input type="radio" name="radio01" id="ra01" />
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra01"
+                  ref={UP_DOWN_REF.UP_RADIO_REF}
+                  defaultChecked={true}
+                  onChange={() => {
+                    setType(UP_DOWN_TYPE.UP)
+                  }}
+                />
                 <label htmlFor="ra01">{getMessage('modal.movement.flow.line.updown.up')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={100} />
+                  <input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.UP} ref={UP_DOWN_REF.UP_INPUT_REF} />
                 </div>
               </div>
             </div>
@@ -26,14 +52,22 @@ export default function Updown({}) {
           <div className="eaves-keraba-item">
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
-                <input type="radio" name="radio01" id="ra02" />
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra02"
+                  ref={UP_DOWN_REF.DOWN_RADIO_REF}
+                  onChange={() => {
+                    setType(UP_DOWN_TYPE.DOWN)
+                  }}
+                />
                 <label htmlFor="ra02">{getMessage('modal.movement.flow.line.updown.down')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={100} />
+                  <input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.DOWN} ref={UP_DOWN_REF.DOWN_INPUT_REF} />
                 </div>
                 <span className="thin">mm</span>
               </div>
diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js
new file mode 100644
index 00000000..355a6bf8
--- /dev/null
+++ b/src/hooks/roofcover/useMovementSetting.js
@@ -0,0 +1,48 @@
+import { useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useRef, useState } from 'react'
+
+//동선이동 형 올림 내림
+export function useMovementSetting(id) {
+  const TYPE = {
+    FLOW_LINE: 'flowLine', // 동선이동
+    UP_DOWN: 'updown', //형 올림내림
+  }
+  const canvas = useRecoilValue(canvasState)
+  const { closePopup } = usePopup()
+  const { getMessage } = useMessage()
+  const buttonType = [
+    { id: 1, name: getMessage('modal.movement.flow.line.move'), type: TYPE.FLOW_LINE },
+    { id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
+  ]
+  const [type, setType] = useState(TYPE.FLOW_LINE)
+
+  const FLOW_LINE_REF = {
+    DOWN_LEFT_INPUT_REF: useRef(null),
+    UP_RIGHT_INPUT_REF: useRef(null),
+    DOWN_LEFT_RADIO_REF: useRef(null),
+    UP_RIGHT_RADIO_REF: useRef(null),
+  }
+
+  const UP_DOWN_REF = {
+    UP_INPUT_REF: useRef(null),
+    DOWN_INPUT_REF: useRef(null),
+    UP_RADIO_REF: useRef(null),
+    DOWN_RADIO_REF: useRef(null),
+  }
+
+  const handleSave = () => {}
+
+  return {
+    TYPE,
+    closePopup,
+    buttonType,
+    type,
+    setType,
+    FLOW_LINE_REF,
+    UP_DOWN_REF,
+    handleSave,
+  }
+}

From 358f77313bce33b679ec5113e37a6f865f023b93 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 30 Oct 2024 11:11:40 +0900
Subject: [PATCH 16/60] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/_contents.scss   | 119 ++++++++++++++++++++++++++++++++++--
 src/styles/_layout.scss     |  20 +++++-
 src/styles/_main.scss       |   3 +-
 src/styles/_modal.scss      |   1 +
 src/styles/_reset.scss      |   5 ++
 src/styles/publishpage.scss |   2 +-
 6 files changed, 142 insertions(+), 8 deletions(-)

diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 8e29b78a..97f69dbe 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -23,7 +23,7 @@
     left: 0;
     display: block;
     width: 100%;
-    height: 46.8px;
+    min-width: 1280px;
     padding-bottom: 0;
     background-color: #383838;
     transition: padding .17s ease-in-out;
@@ -34,6 +34,7 @@
         align-items: center;
         padding: 0 40px 0 20px;
         background-color: #2C2C2C;
+        height: 46.8px;
         z-index: 999;
         .canvas-menu-list{
             display: flex;
@@ -55,11 +56,11 @@
                     transition: all .17s ease-in-out;
                     .menu-icon{
                         display: block;
-                        width: 16px;
-                        height: 16px;
+                        width: 14px;
+                        height: 14px;
                         background-repeat: no-repeat;
                         background-position: center;
-                        background-size: cover;
+                        background-size: contain;
                         margin-right: 10px;
                         &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
                         &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
@@ -85,6 +86,7 @@
             .select-box{
                 width: 124px;
                 margin-right: 5px;
+                height: 30px;
                 > div{
                     width: 100%;
                 }
@@ -329,6 +331,7 @@
         background-color: #1C1C1C;
         border-top: 1px solid #000;
         width: 100%;
+        min-width: 1280px;
         transition: all .17s ease-in-out;
         z-index: 99;
         &.active{
@@ -444,6 +447,7 @@
     top: 46px;
     left: 0;
     width: 100%;
+    min-width: 1280px;
     height: 46px;
     border-bottom: 1px solid #000;
     background: #2C2C2C;
@@ -1304,4 +1308,109 @@
         background: url(../../public/static/images/sub/product-del.svg)no-repeat center;
         background-size: 15px 15px;
     }
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 1800px) {
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item button{
+                    .menu-icon{
+                        margin-right: 5px;
+                    }
+                } 
+                .canvas-menu-item{
+                    button{
+                        padding: 15px 15px;
+                        font-size: 11px;
+                    }
+                }
+            }
+        }
+        .canvas-depth2-wrap{
+            .canvas-depth2-inner{
+                .canvas-depth2-list{
+                    .canvas-depth2-item{
+                        button{
+                            font-size: 11px;
+                        }
+                    } 
+                } 
+            }
+        }
+    } 
+}
+
+@media screen and (max-width: 1600px) {
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item button{
+                    .menu-icon{
+                        display: none;
+                    }
+                } 
+            }
+        }
+    } 
+    .canvas-content{
+        .canvas-frame{
+            height: calc(100vh - 129.5px);
+        }
+        &.active{
+            .canvas-frame{
+                height: calc(100vh - 179.5px);
+            }
+        } 
+    } 
+}
+
+@media screen and (max-width: 1500px) {
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item{
+                    button{
+                        padding: 15px 10px;
+                        font-size: 10px;
+                    }
+                }
+            }
+            .canvas-side-btn-wrap{
+                .btn-from{
+                    gap: 3px;
+                }
+                .vertical-horizontal{
+                    margin: 0 3px;
+                    min-width: 150px;
+                }
+                .select-box{
+                    width: 100px;
+                    margin-right: 3px;
+                }
+                .size-control{
+                    width: 90px;
+                    margin: 0 3px;
+                }
+            } 
+        }
+    }
+    .sub-header{
+        .sub-header-inner{
+            .sub-header-title{
+                font-size: 15px;
+            }
+            .sub-header-title-wrap{
+                .title-item{
+                    a{
+                        .icon{
+                            width: 20px;
+                            height: 20px;
+                        }
+                    } 
+                } 
+            } 
+        } 
+    } 
+    
+}
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index 7f3834df..fc8870a2 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -29,7 +29,7 @@ header{
     top: 0;
     left: 0;
     width: 100%;
-    min-width: 1600px;
+    min-width: 1280px;
     height: 46px;
     background-color: #1C1C1C;
     border-bottom: 1px solid #000;
@@ -230,4 +230,22 @@ footer{
             text-align: center;
         }
     }
+}
+
+@media screen and (max-width: 1500px) {
+    header{
+        .header-inner{
+            .header-right{
+                nav{
+                    .nav-list{
+                        .nav-item{
+                            button{
+                                font-size: 13px;
+                            }
+                        } 
+                    } 
+                } 
+            } 
+        } 
+    } 
 }
\ No newline at end of file
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index ea1535b1..75632a27 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -595,8 +595,9 @@
     overflow-x: hidden;
     .center-page-inner{
         width: 100%;
-        max-width: 1720px;
+        max-width: 1760px;
         margin: 0 auto;
+        padding: 10px 20px;
         .center-page-tit{
             font-size: 18px;
             font-weight: 600;
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 361aa957..51f55fb0 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -488,6 +488,7 @@ $alert-color: #101010;
         color: #101010;
         background-color: #fff;
         border-radius: 2px;
+        cursor: pointer;
         transition: all .15s ease-in-out;
         .img-edit{
             width: 16px;
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 4225db2e..b7778926 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -346,6 +346,11 @@ button{
         font-size: 13px;
         color: #fff;
         height: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
     }
     .select-item-wrap{
         position: absolute;
diff --git a/src/styles/publishpage.scss b/src/styles/publishpage.scss
index 941b29de..9ea724ac 100644
--- a/src/styles/publishpage.scss
+++ b/src/styles/publishpage.scss
@@ -4,7 +4,7 @@ ul, li {padding: 0; margin: 0; list-style: none; }
 body, td { line-height: normal;font-style: normal; font-variant: normal; font-size: 12px;  color: #6b6b6b; }
 table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; }
 #g_header h1 { height: 60px; line-height: 60px; padding-left: 28px; margin-top: 0; color: #fff; background: #424242;font-size: 24px;  font-family:'Pretendard', 돋움, Sans-Serif;}
-#g_body { padding: 0 30px; }
+#g_body { padding: 0 30px 1px; }
 .guide_table { width: 100%;border-top:1px solid #424242;table-layout: auto;}
 .guide_table thead th { background: #f1f1f1; text-align: center; padding:20px 3px;border:1px solid #dadada;border-top:1px solid #424242;font-size:15px;font-weight: 600; font-family:'Pretendard', 돋움, Sans-Serif;}
 .guide_table tbody td { padding:12px 3px; vertical-align: middle; border: solid 1px #dadada;text-align:left;font-size:13px; font-family:'Pretendard', 돋움, Sans-Serif;}

From 47ec0180e9bc57fdc64bb34c3ddd9e384ef29415 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 30 Oct 2024 11:12:47 +0900
Subject: [PATCH 17/60] =?UTF-8?q?=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/ja.json | 5 +++++
 src/locales/ko.json | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/locales/ja.json b/src/locales/ja.json
index a75b6967..15d927d1 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -284,6 +284,7 @@
   "delete": "삭제(JA)",
   "delete.all": "전체 삭제(JA)",
   "refresh": "새로고침(JA)",
+  "margin": "間隔",
   "contextmenu.roof.material.placement": "지붕재 배치(JA)",
   "contextmenu.roof.material.edit": "지붕재 변경(JA)",
   "contextmenu.roof.material.remove": "지붕재 삭제(JA)",
@@ -307,6 +308,10 @@
   "contextmenu.row.copy": "단 복사(JA)",
   "contextmenu.row.remove": "단 삭제(JA)",
   "contextmenu.row.insert": "단 삽입(JA)",
+  "modal.move.setting": "移動設定",
+  "modal.move.setting.info": "間隔を設定し、移動方向を選択します。",
+  "modal.copy.setting": "コピー設定",
+  "modal.copy.setting.info": "間隔を設定し、コピー方向を選択します。",
   "modal.line.property.edit.info": "属性を変更する辺を選択してください。",
   "modal.line.property.edit.selected": "選択した値",
   "contextmenu.flow.direction.edit": "흐름 방향 변경(JA)",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 19dedd58..5fd49921 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -289,6 +289,7 @@
   "delete": "삭제",
   "delete.all": "전체 삭제",
   "refresh": "새로고침",
+  "margin": "간격",
   "contextmenu.roof.material.placement": "지붕재 배치",
   "contextmenu.roof.material.edit": "지붕재 변경",
   "contextmenu.roof.material.remove": "지붕재 삭제",
@@ -312,6 +313,10 @@
   "contextmenu.row.copy": "단 복사",
   "contextmenu.row.remove": "단 삭제",
   "contextmenu.row.insert": "단 삽입",
+  "modal.move.setting": "이동 설정",
+  "modal.move.setting.info": "간격을 설정하고 이동 방향을 선택하십시오.",
+  "modal.copy.setting": "복사 설정",
+  "modal.copy.setting.info": "간격을 설정하고 복사 방향을 선택하십시오.",
   "modal.line.property.edit.info": "속성을 변경할 변을 선택해주세요.",
   "modal.line.property.edit.selected": "선택한 값",
   "contextmenu.flow.direction.edit": "흐름 방향 변경",

From f56906cac135d2d356a03dcf5b6e28e3c544eed7 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Wed, 30 Oct 2024 11:16:26 +0900
Subject: [PATCH 18/60] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/management/Stuff.jsx | 36 ++++++++++++++---------------
 src/locales/ja.json                 |  1 +
 src/locales/ko.json                 |  1 +
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/management/Stuff.jsx b/src/components/management/Stuff.jsx
index 5a1bee40..999ea900 100644
--- a/src/components/management/Stuff.jsx
+++ b/src/components/management/Stuff.jsx
@@ -50,12 +50,11 @@ export default function Stuff() {
   }
 
   //물건번호 복사버튼 옆에 영역
-  const onDoubleClick = (e) => {
-    let objectNo = e.target.innerText
-    if (objectNo.substring(0, 1) === 'R') {
-      router.push(`${pathname}/detail?objectNo=${objectNo.toString()}`, { scroll: false })
+  const onDoubleClick = (data) => {
+    if (data.tempFlg === '0') {
+      router.push(`${pathname}/detail?objectNo=${data.objectNo.toString()}`, { scroll: false })
     } else {
-      router.push(`${pathname}/tempdetail?objectNo=${objectNo.toString()}`, { scroll: false })
+      router.push(`${pathname}/tempdetail?objectNo=${data.objectNo.toString()}`, { scroll: false })
     }
   }
 
@@ -85,20 +84,21 @@ export default function Stuff() {
         minWidth: 230,
         headerName: getMessage('stuff.gridHeader.objectNo'),
         cellRenderer: function (params) {
-          let objectNo = params.value.substring(0, 1)
           if (params.data.objectNo) {
             return (
-              <div className="copy-ico-wrap" onDoubleClick={onDoubleClick}>
-                {params.value.toLocaleString()}
-                {objectNo === 'R' && (
-                  <button
-                    type="button"
-                    className="copy_ico"
-                    onClick={() => {
-                      copyNo(params.value)
-                    }}
-                  ></button>
-                )}
+              <div className="copy-ico-wrap" onDoubleClick={() => onDoubleClick(params.data)}>
+                {(params.data.tempFlg === '0' && (
+                  <>
+                    {params.value.toLocaleString()}
+                    <button
+                      type="button"
+                      className="copy_ico"
+                      onClick={() => {
+                        copyNo(params.value)
+                      }}
+                    ></button>
+                  </>
+                )) || <>{getMessage('stuff.gridData.tempObjectNo')}</>}
               </div>
             )
           }
@@ -157,7 +157,7 @@ export default function Stuff() {
     } else {
       //T 면 임시 R은 진짜
       if (event.data.objectNo) {
-        if (event.data.objectNo.substring(0, 1) === 'R') {
+        if (event.data.tempFlg === '0') {
           router.push(`${pathname}/detail?objectNo=${event.data.objectNo.toString()}`, { scroll: false })
         } else {
           router.push(`${pathname}/tempdetail?objectNo=${event.data.objectNo.toString()}`, { scroll: false })
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 27b20ada..08cff23d 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -514,6 +514,7 @@
   "stuff.gridHeader.receiveUser": "担当者",
   "stuff.gridHeader.specificationConfirmDate": "仕様確認日",
   "stuff.gridHeader.createDatetime": "登録日",
+  "stuff.gridData.tempObjectNo": "一時保存物",
   "stuff.message.periodError": "最大1年間閲覧可能.",
   "stuff.addressPopup.title": "郵便番号",
   "stuff.addressPopup.placeholder": "郵便番号の7桁を入力してください。",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index ecd5b73b..f63e04b6 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -519,6 +519,7 @@
   "stuff.gridHeader.receiveUser": "담당자",
   "stuff.gridHeader.specificationConfirmDate": "사양확인일",
   "stuff.gridHeader.createDatetime": "등록일",
+  "stuff.gridData.tempObjectNo": "임시저장물건",
   "stuff.message.periodError": "최대1년 조회 가능합니다.",
   "stuff.addressPopup.title": "우편번호",
   "stuff.addressPopup.placeholder": "우편번호의 7자리를 입력하세요.",

From 6a8579c56d45a62db0c482b0b2cc325ae5e30bc5 Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Wed, 30 Oct 2024 11:22:56 +0900
Subject: [PATCH 19/60] =?UTF-8?q?=EC=B9=98=EC=88=98=EC=84=A0=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/common.js                          |   3 +
 src/components/floor-plan/CanvasFrame.jsx     |   2 +-
 src/hooks/common/useCanvasConfigInitialize.js |  44 ++++
 src/hooks/common/useCommonUtils.js            | 234 +++++++++---------
 src/hooks/usePlan.js                          |  27 ++
 5 files changed, 186 insertions(+), 124 deletions(-)

diff --git a/src/common/common.js b/src/common/common.js
index c8dc5383..e1e9bb2c 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -153,6 +153,9 @@ export const SAVE_KEY = [
   'pitch',
   'uuid',
   'originText',
+  'groupYn',
+  'groupName',
+  'lineDirection',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]
diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index 4c078141..7c9ece42 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -44,7 +44,7 @@ export default function CanvasFrame() {
 
   useEffect(() => {
     if (modifiedPlanFlag && selectedPlan?.id) {
-      checkCanvasObjectEvent(selectedPlan.id)
+      // checkCanvasObjectEvent(selectedPlan.id)
     }
   }, [modifiedPlanFlag])
 
diff --git a/src/hooks/common/useCanvasConfigInitialize.js b/src/hooks/common/useCanvasConfigInitialize.js
index f49b4cb9..4df81090 100644
--- a/src/hooks/common/useCanvasConfigInitialize.js
+++ b/src/hooks/common/useCanvasConfigInitialize.js
@@ -59,6 +59,7 @@ export function useCanvasConfigInitialize() {
 
   const canvasLoadInit = () => {
     roofInit() //화면표시 초기화
+    groupInit()
   }
 
   const gridInit = () => {
@@ -94,5 +95,48 @@ export function useCanvasConfigInitialize() {
     })
   }
 
+  const groupInit = () => {
+    const groups = canvas.getObjects().filter((obj) => obj.groupYn)
+    const groupIds = []
+
+    groups.forEach((group) => {
+      if (!groupIds.includes(group.id)) {
+        groupIds.push(group.id)
+      }
+    })
+
+    groupIds.forEach((id) => {
+      const groupObjects = canvas.getObjects().filter((obj) => obj.id === id && obj.type !== 'text')
+      const objectsName = canvas.getObjects().filter((obj) => obj.id === id && obj.type !== 'text')[0].groupName
+      const lineDirection = canvas.getObjects().filter((obj) => obj.id === id && obj.name === 'centerLine')[0].lineDirection
+      const text = canvas.getObjects().filter((obj) => obj.id === id && obj.type === 'text')[0]
+
+      let objectArray = []
+
+      if (groupObjects) {
+        groupObjects.forEach((obj) => {
+          objectArray.push(obj)
+        })
+      }
+      objectArray.push(text)
+
+      objectArray.forEach((obj) => {
+        canvas?.remove(obj)
+      })
+
+      const group = new fabric.Group(objectArray, {
+        groupId: id,
+        name: objectsName,
+        selectable: true,
+        lockMovementX: true,
+        lockMovementY: true,
+        originX: 'center',
+        originY: 'center',
+        lineDirection: lineDirection,
+      })
+      canvas.add(group)
+    })
+  }
+
   return { canvasLoadInit, gridInit }
 }
diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js
index 5f02900d..ca9b8def 100644
--- a/src/hooks/common/useCommonUtils.js
+++ b/src/hooks/common/useCommonUtils.js
@@ -10,7 +10,7 @@ import { v4 as uuidv4 } from 'uuid'
 import { usePopup } from '@/hooks/usePopup'
 import Distance from '@/components/floor-plan/modal/distance/Distance'
 import { commonUtilsState } from '@/store/commonUtilsAtom'
-import { point } from '@turf/turf'
+import { center, point } from '@turf/turf'
 
 export function useCommonUtils() {
   const canvas = useRecoilValue(canvasState)
@@ -224,10 +224,14 @@ export function useCommonUtils() {
           })
 
           // 두 포인트 간에 직선을 그림 (중심을 기준으로)
-          const line = new fabric.Line([p1CenterX, p1CenterY, p2CenterX, p2CenterY], { ...lineOptions, name: 'centerLine', id: uuid })
-          canvas.add(line)
+          const line = new fabric.Line([p1CenterX, p1CenterY, p2CenterX, p2CenterY], {
+            ...lineOptions,
+            name: 'centerLine',
+            id: uuid,
+          })
+          // canvas.add(line)
 
-          // groupObjects.push(line)
+          groupObjects.push(line)
 
           const distance = getDistance(p1CenterX, p1CenterY, p2CenterX, p2CenterY)
           const lineDirection = checkLineOrientation(line)
@@ -235,49 +239,22 @@ export function useCommonUtils() {
           const extendListArray = createDimensionExtendLine(line, lineDirection)
 
           extendListArray.forEach((line) => {
-            const extendLine = new fabric.Line(line, { ...lineOptions, name: 'extendLine', id: uuid })
+            const extendLine = new fabric.Line(line, {
+              ...lineOptions,
+              name: 'extendLine',
+              id: uuid,
+            })
             // canvas.add(extendLine)
             groupObjects.push(extendLine)
           })
 
-          // // 첫 번째 포인트에 화살표 추가 좌측 -> 우측으로 그릴때
-          // let paddingX = lineDirection === 'horizontal' ? p1CenterX + 7.5 : p1CenterX + 0.5
-          // let paddingX2 = lineDirection === 'horizontal' ? p2CenterX - 7.5 : p2CenterX + 0.5
-          // let paddingY = lineDirection === 'horizontal' ? p1CenterY + 0.5 : p1CenterY + 8
-          // let paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 0.5 : p2CenterY - 8
-          // let angle1 = lineDirection === 'horizontal' ? -90 : 0
-          // let angle2 = lineDirection === 'horizontal' ? 90 : 180
-
-          // // 우측 -> 좌측으로 그릴땐 반대
-          // if (paddingX > paddingX2 || paddingY > paddingY2) {
-          //   paddingX = lineDirection === 'horizontal' ? p1CenterX - 7.5 : p1CenterX + 0.5
-          //   paddingX2 = lineDirection === 'horizontal' ? p2CenterX + 7.5 : p2CenterX + 0.5
-          //   paddingY = lineDirection === 'horizontal' ? p1CenterY + 0.5 : p1CenterY - 7.5
-          //   paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 0.5 : p2CenterY + 7.5
-          //   angle1 = lineDirection === 'horizontal' ? 90 : 180
-          //   angle2 = lineDirection === 'horizontal' ? 270 : 0
-          // }
-
           const dimensionPosition = calcDimensionPosition(lineDirection, p1CenterX, p1CenterY, p2CenterX, p2CenterY)
-
           const arrow1 = createDimensionArrow(dimensionPosition.paddingX, dimensionPosition.paddingY, dimensionPosition.angle1, uuid) // 반대 방향 화살표
           const arrow2 = createDimensionArrow(dimensionPosition.paddingX2, dimensionPosition.paddingY2, dimensionPosition.angle2, uuid) // 정방향 화살표
           // canvas.add(arrow1)
           // canvas.add(arrow2)
 
-          groupObjects.push(arrow1)
-          groupObjects.push(arrow2)
-
-          const group = new fabric.Group(groupObjects, {
-            name: 'dimensionLine',
-            selectable: true,
-            originX: 'center',
-            originY: 'center',
-            lineDirection: lineDirection,
-            id: uuid,
-          })
-
-          canvas.add(group)
+          groupObjects.push(arrow1, arrow2)
 
           distanceText = new fabric.Text(`${distance * 10} `, {
             left: (p1CenterX + p2CenterX) / 2 + (lineDirection === 'horizontal' ? 0 : -15),
@@ -296,7 +273,19 @@ export function useCommonUtils() {
             // lockMovementX: false,
             // lockMovementY: false,
           })
-          canvas.add(distanceText)
+          // canvas.add(distanceText)
+          groupObjects.push(distanceText)
+
+          const group = new fabric.Group(groupObjects, {
+            name: 'dimensionLine',
+            selectable: true,
+            originX: 'center',
+            originY: 'center',
+            lineDirection: lineDirection,
+            groupId: uuid,
+          })
+
+          canvas.add(group)
 
           // groupObjects.push(distanceText)
 
@@ -544,16 +533,19 @@ export function useCommonUtils() {
         lockMovementY: false,
       })
 
+      const originLeft = obj.left
+      const originTop = obj.top
+
       addCanvasMouseEventListener('mouse:up', (e) => {
         obj.set({
           lockMovementX: true,
           lockMovementY: true,
         })
         initEvent()
+        obj.setCoords()
+        updateGroupObjectCoords(obj, originLeft, originTop)
+        // canvas?.renderAll()
       })
-
-      obj.setCoords()
-      canvas?.renderAll()
     }
   }
 
@@ -561,8 +553,6 @@ export function useCommonUtils() {
     if (obj) {
       let clonedObj = null
 
-      console.log(obj)
-
       obj.clone((cloned) => {
         clonedObj = cloned
       })
@@ -623,39 +613,28 @@ export function useCommonUtils() {
     if (obj) canvas.remove(...obj)
   }
 
+  //선택된 그룹객체 restore 하고 item으로 다시 그리고 그 그린 객체 가지고 수정해서 재그룹화 시킨다
+
   const changeDimensionExtendLine = () => {
     const group = canvas?.getActiveObject()
-    const id = group.id
-    const textObj = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
-    const items = group._objects
-    const originLineDirection = group.lineDirection
-
-    let groupObj = []
-
+    const restoreGroup = group._restoreObjectsState()
     canvas?.remove(group)
-
-    items.forEach((item) => {
-      item.set({
-        selectable: true,
-      })
-      canvas?.add(item)
-    })
     canvas?.renderAll()
 
+    restoreGroup._objects.forEach((obj) => {
+      canvas?.add(obj)
+    })
+
+    const id = group.groupId
+    const originLineDirection = group.lineDirection
+    const textObj = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
     const centerLine = canvas?.getObjects().filter((obj) => obj.name === 'centerLine' && obj.id === id)[0]
     const extendLine = canvas?.getObjects().filter((obj) => obj.name === 'extendLine' && obj.id === id)
     const arrows = canvas?.getObjects().filter((obj) => obj.name === 'arrow' && obj.id === id)
 
     const originX = centerLine.x1
     const originY = centerLine.y1
-
-    const lineOptions = {
-      stroke: dimensionSettings.color,
-      strokeWidth: dimensionSettings.pixel,
-      selectable: true,
-      originX: 'center',
-      originY: 'center',
-    }
+    let reGroupObj = []
 
     addCanvasMouseEventListener('mouse:down', (e) => {
       const pointer = canvas?.getPointer(e.e)
@@ -668,37 +647,21 @@ export function useCommonUtils() {
           y2: pointer.y,
         })
 
-        centerLine.setCoords()
-        canvas?.renderAll()
-
         const differenceY = centerLine.y1 - originY
 
-        arrows.forEach((arrow) => {
-          canvas?.remove(arrow)
+        extendLine.forEach((obj) => {
+          obj.set({
+            x1: obj.x1,
+            y1: originY,
+            x2: obj.x2,
+            y2: differenceY > 0 ? pointer.y + 20 : pointer.y - 20,
+          })
         })
 
-        const { paddingX, paddingX2, paddingY, paddingY2, angle1, angle2 } = calcDimensionPosition(
-          originLineDirection,
-          centerLine.x1,
-          pointer.y,
-          centerLine.x2,
-          pointer.y,
-        )
-
-        const newArrow1 = createDimensionArrow(paddingX, paddingY, angle1, id)
-        const newArraw2 = createDimensionArrow(paddingX2, paddingY2, angle2, id)
-        canvas?.add(newArrow1, newArraw2)
-
-        groupObj.push(centerLine, newArrow1, newArraw2)
-
-        extendLine.forEach((line) => canvas?.remove(line))
-
-        const newExtendLine = createDimensionExtendLine(centerLine, originLineDirection, differenceY)
-
-        newExtendLine.forEach((line) => {
-          const extendLine = new fabric.Line(line, { ...lineOptions, name: 'extendLine', id: id })
-          canvas.add(extendLine)
-          groupObj.push(extendLine)
+        arrows.forEach((arrow) => {
+          arrow.set({
+            top: pointer.y,
+          })
         })
 
         textObj.set({
@@ -713,37 +676,21 @@ export function useCommonUtils() {
           y2: centerLine.y2,
         })
 
-        centerLine.setCoords()
-        canvas?.renderAll()
-
         const differenceX = centerLine.x1 - originX
 
-        arrows.forEach((arrow) => {
-          canvas?.remove(arrow)
+        extendLine.forEach((obj) => {
+          obj.set({
+            x1: originX,
+            y1: obj.y1,
+            x2: differenceX > 0 ? pointer.x + 20 : pointer.x - 20,
+            y2: obj.y2,
+          })
         })
 
-        const { paddingX, paddingX2, paddingY, paddingY2, angle1, angle2 } = calcDimensionPosition(
-          originLineDirection,
-          pointer.x,
-          centerLine.y1,
-          pointer.x,
-          centerLine.y2,
-        )
-
-        const newArrow1 = createDimensionArrow(paddingX, paddingY, angle1, id)
-        const newArraw2 = createDimensionArrow(paddingX2, paddingY2, angle2, id)
-        canvas?.add(newArrow1, newArraw2)
-
-        groupObj.push(centerLine, newArrow1, newArraw2)
-
-        extendLine.forEach((line) => canvas?.remove(line))
-
-        const newExtendLine = createDimensionExtendLine(centerLine, originLineDirection, differenceX)
-
-        newExtendLine.forEach((line) => {
-          const extendLine = new fabric.Line(line, { ...lineOptions, name: 'extendLine', id: id })
-          canvas.add(extendLine)
-          groupObj.push(extendLine)
+        arrows.forEach((arrow) => {
+          arrow.set({
+            left: pointer.x,
+          })
         })
 
         textObj.set({
@@ -752,19 +699,60 @@ export function useCommonUtils() {
         textObj.setCoords()
       }
 
-      const reGroup = new fabric.Group(groupObj, {
+      reGroupObj.push(centerLine, ...extendLine, ...arrows, textObj)
+      canvas?.remove(centerLine, ...extendLine, ...arrows, textObj)
+
+      const reGroup = new fabric.Group(reGroupObj, {
         name: 'dimensionLine',
         selectable: true,
-        originX: 'center',
-        originY: 'center',
         lineDirection: originLineDirection,
-        id: id,
+        groupId: id,
       })
+
+      reGroupObj = []
       canvas.add(reGroup)
       initEvent()
     })
   }
 
+  // 그룹 이동 시 라인 및 각 객체의 좌표를 절대 좌표로 업데이트하는 함수
+  function updateGroupObjectCoords(group, originLeft, originTop) {
+    const diffrenceLeft = group.left - originLeft
+    const diffrenceTop = group.top - originTop
+
+    group.getObjects().forEach((obj) => {
+      // 그룹 내 객체의 절대 좌표를 계산
+
+      const originObjLeft = obj.left
+      const originObjTop = obj.top
+
+      if (obj.type === 'line') {
+        // Line 객체의 경우, x1, y1, x2, y2 절대 좌표 계산
+
+        obj.set({
+          x1: obj.x1 + diffrenceLeft,
+          y1: obj.y1 + diffrenceTop,
+          x2: obj.x2 + diffrenceLeft,
+          y2: obj.y2 + diffrenceTop,
+        })
+
+        obj.set({
+          left: originObjLeft,
+          top: originObjTop,
+        })
+      } else {
+        // 다른 객체의 경우 left, top 절대 좌표 설정
+        obj.set({
+          ...obj,
+          left: obj.left,
+          top: obj.top,
+        })
+      }
+      obj.setCoords() // 좌표 반영
+      canvas?.renderAll()
+    })
+  }
+
   return {
     commonFunctions,
     dimensionSettings,
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index ee3439f2..11d8e4f9 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -38,6 +38,8 @@ export function usePlan() {
 
     const str = JSON.stringify(objs)
 
+    console.log(str)
+
     // canvas?.clear()
     return str
 
@@ -56,6 +58,31 @@ export function usePlan() {
    */
   const currentCanvasData = () => {
     removeMouseLines()
+
+    const groups = canvas.getObjects().filter((obj) => obj.type === 'group')
+
+    if (groups.length > 0) {
+      groups.forEach((group) => {
+        canvas?.remove(group)
+        canvas?.renderAll()
+        const restore = group._restoreObjectsState()
+
+        restore._objects.forEach((obj) => {
+          obj.set({
+            ...obj,
+            groupYn: true,
+            groupName: group.name,
+            lineDirection: group.lineDirection,
+          })
+
+          canvas?.add(obj)
+          obj.setCoords()
+          canvas?.requestRenderAll()
+          canvas?.renderAll()
+        })
+      })
+    }
+
     return addCanvas()
   }
 

From 2ca8b84f17dab35bf9d289150bcb283abfbce1d9 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 30 Oct 2024 11:38:11 +0900
Subject: [PATCH 20/60] =?UTF-8?q?=EC=99=B8=EB=B2=BD=EC=84=A0=20=EA=B7=B8?=
 =?UTF-8?q?=EB=A6=AC=EA=B8=B0=20input=20foucs=EC=8B=9C=20=EC=B4=88?=
 =?UTF-8?q?=EA=B8=B0=ED=99=94=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/modal/lineTypes/Angle.jsx         | 2 ++
 src/components/floor-plan/modal/lineTypes/Diagonal.jsx      | 2 ++
 src/components/floor-plan/modal/lineTypes/DoublePitch.jsx   | 5 ++++-
 src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx | 1 +
 src/components/floor-plan/modal/lineTypes/RightAngle.jsx    | 2 ++
 src/hooks/roofcover/useOuterLineWall.js                     | 6 ++++++
 6 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/floor-plan/modal/lineTypes/Angle.jsx b/src/components/floor-plan/modal/lineTypes/Angle.jsx
index 83985016..e90f437f 100644
--- a/src/components/floor-plan/modal/lineTypes/Angle.jsx
+++ b/src/components/floor-plan/modal/lineTypes/Angle.jsx
@@ -19,6 +19,7 @@ export default function Angle({ props }) {
                   className="input-origin block"
                   value={angle1}
                   ref={angle1Ref}
+                  onFocus={(e) => (angle1Ref.current.value = '')}
                   onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
                   placeholder="45"
                 />
@@ -38,6 +39,7 @@ export default function Angle({ props }) {
                   className="input-origin block"
                   value={length1}
                   ref={length1Ref}
+                  onFocus={(e) => (length1Ref.current.value = '')}
                   onChange={(e) => onlyNumberInputChange(e, setLength1)}
                   placeholder="3000"
                 />
diff --git a/src/components/floor-plan/modal/lineTypes/Diagonal.jsx b/src/components/floor-plan/modal/lineTypes/Diagonal.jsx
index 84c25329..23972fb5 100644
--- a/src/components/floor-plan/modal/lineTypes/Diagonal.jsx
+++ b/src/components/floor-plan/modal/lineTypes/Diagonal.jsx
@@ -35,6 +35,7 @@ export default function Diagonal({ props }) {
                 className="input-origin block"
                 value={outerLineDiagonalLength}
                 ref={outerLineDiagonalLengthRef}
+                onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}
                 onChange={(e) => onlyNumberInputChange(e, setOuterLineDiagonalLength)}
                 placeholder="3000"
               />
@@ -56,6 +57,7 @@ export default function Diagonal({ props }) {
                 className="input-origin block"
                 value={length1}
                 ref={length1Ref}
+                onFocus={(e) => (length1Ref.current.value = '')}
                 onChange={(e) => onlyNumberInputChange(e, setLength1)}
                 placeholder="3000"
               />
diff --git a/src/components/floor-plan/modal/lineTypes/DoublePitch.jsx b/src/components/floor-plan/modal/lineTypes/DoublePitch.jsx
index 5bfa5950..b34a1f3e 100644
--- a/src/components/floor-plan/modal/lineTypes/DoublePitch.jsx
+++ b/src/components/floor-plan/modal/lineTypes/DoublePitch.jsx
@@ -55,6 +55,7 @@ export default function DoublePitch({ props }) {
                 className="input-origin block"
                 value={angle1}
                 ref={angle1Ref}
+                onFocus={(e) => (angle1Ref.current.value = '')}
                 onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
                 placeholder="45"
               />
@@ -71,6 +72,7 @@ export default function DoublePitch({ props }) {
                 className="input-origin block"
                 value={length1}
                 ref={length1Ref}
+                onFocus={(e) => (length1Ref.current.value = '')}
                 onChange={(e) => onlyNumberInputChange(e, setLength1)}
                 placeholder="3000"
               />
@@ -128,9 +130,9 @@ export default function DoublePitch({ props }) {
                 className="input-origin block"
                 value={angle2}
                 ref={angle2Ref}
+                onFocus={(e) => (angle2Ref.current.value = '')}
                 onChange={(e) => {
                   onlyNumberWithDotInputChange(e, setAngle2)
-                  console.log(getLength2())
                   setLength2(getLength2())
                 }}
                 placeholder="45"
@@ -153,6 +155,7 @@ export default function DoublePitch({ props }) {
                 className="input-origin block"
                 value={length2}
                 ref={length2Ref}
+                onFocus={(e) => (length2Ref.current.value = '')}
                 onChange={(e) => onlyNumberInputChange(e, setLength2)}
                 readOnly={true}
                 placeholder="3000"
diff --git a/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx b/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx
index f469fba8..439e0748 100644
--- a/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx
+++ b/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx
@@ -18,6 +18,7 @@ export default function OuterLineWall({ props }) {
               className="input-origin block"
               value={length1}
               ref={length1Ref}
+              onFocus={(e) => (length1Ref.current.value = '')}
               onChange={(e) => onlyNumberInputChange(e, setLength1)}
               placeholder="3000"
             />
diff --git a/src/components/floor-plan/modal/lineTypes/RightAngle.jsx b/src/components/floor-plan/modal/lineTypes/RightAngle.jsx
index 306a09f0..b217a867 100644
--- a/src/components/floor-plan/modal/lineTypes/RightAngle.jsx
+++ b/src/components/floor-plan/modal/lineTypes/RightAngle.jsx
@@ -15,6 +15,7 @@ export default function RightAngle({ props }) {
               className="input-origin block"
               value={length1}
               ref={length1Ref}
+              onFocus={(e) => (length1Ref.current.value = '')}
               onChange={(e) => onlyNumberInputChange(e, setLength1)}
               placeholder="3000"
             />
@@ -70,6 +71,7 @@ export default function RightAngle({ props }) {
               className="input-origin block"
               value={length2}
               ref={length2Ref}
+              onFocus={(e) => (length2Ref.current.value = '')}
               onChange={(e) => onlyNumberInputChange(e, setLength2)}
               placeholder="3000"
             />
diff --git a/src/hooks/roofcover/useOuterLineWall.js b/src/hooks/roofcover/useOuterLineWall.js
index 531aab48..b2244da8 100644
--- a/src/hooks/roofcover/useOuterLineWall.js
+++ b/src/hooks/roofcover/useOuterLineWall.js
@@ -115,6 +115,12 @@ export function useOuterLineWall(id, propertiesId) {
     setAngle2(0)
 
     setOuterLineDiagonalLength(0)
+
+    const activeElem = document.activeElement
+
+    if (activeElem) {
+      activeElem.blur()
+    }
   }
 
   const mouseDown = (e) => {

From 8784c1eeb7a254fc4cf197bddefe71fe381df37d Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Wed, 30 Oct 2024 13:16:52 +0900
Subject: [PATCH 21/60] fix: add disabled attribute in QSelectBox

---
 package-lock.json                           | 10656 ++++++++++++++++++
 src/components/common/select/QSelectBox.jsx |     4 +-
 yarn.lock                                   |   782 +-
 3 files changed, 10884 insertions(+), 558 deletions(-)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..45868486
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,10656 @@
+{
+  "name": "q.cast.prototype-nontype",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "q.cast.prototype-nontype",
+      "version": "0.1.0",
+      "dependencies": {
+        "@nextui-org/react": "^2.4.2",
+        "ag-grid-react": "^32.0.2",
+        "axios": "^1.7.3",
+        "fabric": "^5.3.0",
+        "framer-motion": "^11.2.13",
+        "fs": "^0.0.1-security",
+        "iron-session": "^8.0.2",
+        "js-cookie": "^3.0.5",
+        "mathjs": "^13.0.2",
+        "mssql": "^11.0.1",
+        "next": "14.2.3",
+        "next-international": "^1.2.4",
+        "react": "^18",
+        "react-colorful": "^5.6.1",
+        "react-datepicker": "^7.3.0",
+        "react-dom": "^18",
+        "react-draggable": "^4.4.6",
+        "react-hook-form": "^7.53.0",
+        "react-icons": "^5.3.0",
+        "react-loading-skeleton": "^3.5.0",
+        "react-responsive-modal": "^6.4.2",
+        "recoil": "^0.7.7",
+        "sweetalert2": "^11.14.1",
+        "sweetalert2-react-content": "^5.0.7",
+        "uuid": "^10.0.0"
+      },
+      "devDependencies": {
+        "@turf/turf": "^7.0.0",
+        "convertapi": "^1.14.0",
+        "dayjs": "^1.11.13",
+        "postcss": "^8",
+        "prettier": "^3.3.3",
+        "react-color-palette": "^7.2.2",
+        "react-select": "^5.8.1",
+        "sass": "^1.77.8",
+        "tailwindcss": "^3.4.1"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@azure/abort-controller": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-2.1.2.tgz",
+      "integrity": "sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/core-auth": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@azure/core-auth/-/core-auth-1.7.2.tgz",
+      "integrity": "sha512-Igm/S3fDYmnMq1uKS38Ae1/m37B3zigdlZw+kocwEhh5GjyKjPrXKO2J6rzpC1wAxrNil/jX9BJRqBshyjnF3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@azure/abort-controller": "^2.0.0",
+        "@azure/core-util": "^1.1.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/core-client": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@azure/core-client/-/core-client-1.9.2.tgz",
+      "integrity": "sha512-kRdry/rav3fUKHl/aDLd/pDLcB+4pOFwPPTVEExuMyaI5r+JBbMWqRbCY1pn5BniDaU3lRxO9eaQ1AmSMehl/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@azure/abort-controller": "^2.0.0",
+        "@azure/core-auth": "^1.4.0",
+        "@azure/core-rest-pipeline": "^1.9.1",
+        "@azure/core-tracing": "^1.0.0",
+        "@azure/core-util": "^1.6.1",
+        "@azure/logger": "^1.0.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/core-http-compat": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@azure/core-http-compat/-/core-http-compat-2.1.2.tgz",
+      "integrity": "sha512-5MnV1yqzZwgNLLjlizsU3QqOeQChkIXw781Fwh1xdAqJR5AA32IUaq6xv1BICJvfbHoa+JYcaij2HFkhLbNTJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@azure/abort-controller": "^2.0.0",
+        "@azure/core-client": "^1.3.0",
+        "@azure/core-rest-pipeline": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/core-lro": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@azure/core-lro/-/core-lro-2.7.2.tgz",
+      "integrity": "sha512-0YIpccoX8m/k00O7mDDMdJpbr6mf1yWo2dfmxt5A8XVZVVMz2SSKaEbMCeJRvgQ0IaSlqhjT47p4hVIRRy90xw==",
+      "license": "MIT",
+      "dependencies": {
+        "@azure/abort-controller": "^2.0.0",
+        "@azure/core-util": "^1.2.0",
+        "@azure/logger": "^1.0.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/core-paging": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@azure/core-paging/-/core-paging-1.6.2.tgz",
+      "integrity": "sha512-YKWi9YuCU04B55h25cnOYZHxXYtEvQEbKST5vqRga7hWY9ydd3FZHdeQF8pyh+acWZvppw13M/LMGx0LABUVMA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/core-rest-pipeline": {
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/@azure/core-rest-pipeline/-/core-rest-pipeline-1.16.3.tgz",
+      "integrity": "sha512-VxLk4AHLyqcHsfKe4MZ6IQ+D+ShuByy+RfStKfSjxJoL3WBWq17VNmrz8aT8etKzqc2nAeIyLxScjpzsS4fz8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@azure/abort-controller": "^2.0.0",
+        "@azure/core-auth": "^1.4.0",
+        "@azure/core-tracing": "^1.0.1",
+        "@azure/core-util": "^1.9.0",
+        "@azure/logger": "^1.0.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/core-rest-pipeline/node_modules/agent-base": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@azure/core-rest-pipeline/node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@azure/core-rest-pipeline/node_modules/https-proxy-agent": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@azure/core-tracing": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.1.2.tgz",
+      "integrity": "sha512-dawW9ifvWAWmUm9/h+/UQ2jrdvjCJ7VJEuCJ6XVNudzcOwm53BFZH4Q845vjfgoUAM8ZxokvVNxNxAITc502YA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/core-util": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@azure/core-util/-/core-util-1.9.2.tgz",
+      "integrity": "sha512-l1Qrqhi4x1aekkV+OlcqsJa4AnAkj5p0JV8omgwjaV9OAbP41lvrMvs+CptfetKkeEaGRGSzby7sjPZEX7+kkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@azure/abort-controller": "^2.0.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/identity": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@azure/identity/-/identity-4.4.1.tgz",
+      "integrity": "sha512-DwnG4cKFEM7S3T+9u05NstXU/HN0dk45kPOinUyNKsn5VWwpXd9sbPKEg6kgJzGbm1lMuhx9o31PVbCtM5sfBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@azure/abort-controller": "^1.0.0",
+        "@azure/core-auth": "^1.5.0",
+        "@azure/core-client": "^1.9.2",
+        "@azure/core-rest-pipeline": "^1.1.0",
+        "@azure/core-tracing": "^1.0.0",
+        "@azure/core-util": "^1.3.0",
+        "@azure/logger": "^1.0.0",
+        "@azure/msal-browser": "^3.14.0",
+        "@azure/msal-node": "^2.9.2",
+        "events": "^3.0.0",
+        "jws": "^4.0.0",
+        "open": "^8.0.0",
+        "stoppable": "^1.1.0",
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/identity/node_modules/@azure/abort-controller": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-1.1.0.tgz",
+      "integrity": "sha512-TrRLIoSQVzfAJX9H1JeFjzAoDGcoK1IYX1UImfceTZpsyYfWr09Ss1aHW1y5TrrR3iq6RZLBwJ3E24uwPhwahw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@azure/keyvault-keys": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@azure/keyvault-keys/-/keyvault-keys-4.8.0.tgz",
+      "integrity": "sha512-jkuYxgkw0aaRfk40OQhFqDIupqblIOIlYESWB6DKCVDxQet1pyv86Tfk9M+5uFM0+mCs6+MUHU+Hxh3joiUn4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@azure/abort-controller": "^1.0.0",
+        "@azure/core-auth": "^1.3.0",
+        "@azure/core-client": "^1.5.0",
+        "@azure/core-http-compat": "^2.0.1",
+        "@azure/core-lro": "^2.2.0",
+        "@azure/core-paging": "^1.1.1",
+        "@azure/core-rest-pipeline": "^1.8.1",
+        "@azure/core-tracing": "^1.0.0",
+        "@azure/core-util": "^1.0.0",
+        "@azure/logger": "^1.0.0",
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/keyvault-keys/node_modules/@azure/abort-controller": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-1.1.0.tgz",
+      "integrity": "sha512-TrRLIoSQVzfAJX9H1JeFjzAoDGcoK1IYX1UImfceTZpsyYfWr09Ss1aHW1y5TrrR3iq6RZLBwJ3E24uwPhwahw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@azure/logger": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@azure/logger/-/logger-1.1.4.tgz",
+      "integrity": "sha512-4IXXzcCdLdlXuCG+8UKEwLA1T1NHqUfanhXYHiQTn+6sfWCZXduqbtXDGceg3Ce5QxTGo7EqmbV6Bi+aqKuClQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@azure/msal-browser": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-3.21.0.tgz",
+      "integrity": "sha512-BAwcFsVvOrYzKuUZHhFuvRykUmQGq6lDxst2qGnjxnpNZc3d/tnVPcmhgvUdeKl28VSE0ltgBzT3HkdpDtz9rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@azure/msal-common": "14.14.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@azure/msal-common": {
+      "version": "14.14.1",
+      "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-14.14.1.tgz",
+      "integrity": "sha512-2Q3tqNz/PZLfSr8BvcHZVpRRfSn4MjGSqjj9J+HlBsmbf1Uu4P0WeXnemjTJwwx9KrmplsrN3UkZ/LPOR720rw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@azure/msal-node": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@azure/msal-node/-/msal-node-2.13.0.tgz",
+      "integrity": "sha512-DhP97ycs7qlCVzzzWGzJiwAFyFj5okno74E4FUZ61oCLfKh4IxA1kxirqzrWuYZWpBe9HVPL6GA4NvmlEOBN5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@azure/msal-common": "14.14.1",
+        "jsonwebtoken": "^9.0.0",
+        "uuid": "^8.3.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@azure/msal-node/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.7.tgz",
+      "integrity": "sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/highlight": "^7.25.7",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.7.tgz",
+      "integrity": "sha512-5Dqpl5fyV9pIAD62yK9P7fcA768uVPUyrQmqpqstHWgMma4feF1x/oFysBCVZLY5wJ2GkMUCdsNDnGZrPoR6rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.25.7",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.7.tgz",
+      "integrity": "sha512-o0xCgpNmRohmnoWKQ0Ij8IdddjyBFE4T2kagL/x6M3+4zUgc+4qTOUBoNe4XxDskt1HPKO007ZPiMgLDq2s7Kw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.25.7",
+        "@babel/types": "^7.25.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz",
+      "integrity": "sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz",
+      "integrity": "sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.25.7.tgz",
+      "integrity": "sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.7",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.7.tgz",
+      "integrity": "sha512-aZn7ETtQsjjGG5HruveUK06cU3Hljuhd9Iojm4M8WWv3wLE6OkE5PWbDUkItmMgegmccaITudyuW5RPYrYlgWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.25.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz",
+      "integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.7.tgz",
+      "integrity": "sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.7",
+        "@babel/parser": "^7.25.7",
+        "@babel/types": "^7.25.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.7.tgz",
+      "integrity": "sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.7",
+        "@babel/generator": "^7.25.7",
+        "@babel/parser": "^7.25.7",
+        "@babel/template": "^7.25.7",
+        "@babel/types": "^7.25.7",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/types": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.7.tgz",
+      "integrity": "sha512-vwIVdXG+j+FOpkwqHRcBgHLYNL7XMkufrlaFvL9o6Ai9sJn9+PdyIL5qa0XzTZw084c+u9LOls53eoZWP/W5WQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.7",
+        "@babel/helper-validator-identifier": "^7.25.7",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bedrock-layout/use-forwarded-ref": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@bedrock-layout/use-forwarded-ref/-/use-forwarded-ref-1.6.1.tgz",
+      "integrity": "sha512-GD9A9AFLzFNjr7k6fgerSqxfwDWl+wsPS11PErOKe1zkVz0y7RGC9gzlOiX/JrgpyB3NFHWIuGtoOQqifJQQpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@bedrock-layout/use-stateful-ref": "^1.4.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18"
+      }
+    },
+    "node_modules/@bedrock-layout/use-stateful-ref": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@bedrock-layout/use-stateful-ref/-/use-stateful-ref-1.4.1.tgz",
+      "integrity": "sha512-4eKO2KdQEXcR5LI4QcxqlJykJUDQJWDeWYAukIn6sRQYoabcfI5kDl61PUi6FR6o8VFgQ8IEP7HleKqWlSe8SQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18"
+      }
+    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
+      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.2.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
+      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.13.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
+      "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/cache": "^11.13.0",
+        "@emotion/serialize": "^1.3.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
+      "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
+      "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
+      "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz",
+      "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom/node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.22",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.22.tgz",
+      "integrity": "sha512-LNv4azPt8SpT4WW7Kku5JNVjLk2GcS0bGGjFTAgqOONRFo9r/aaGHHPpdiIuQbB1t8shmWyWqTTUDmZ9fcNshg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.1",
+        "@floating-ui/utils": "^0.2.7",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom": {
+      "version": "1.6.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz",
+      "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
+      "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==",
+      "license": "MIT"
+    },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
+      "integrity": "sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
+      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.7.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.8.tgz",
+      "integrity": "sha512-nBZJYmhpcSX0WeJ5SDYUkZ42AgR3xiyhNCsQweFx3cz/ULJjym8bHAzWKvG5e2+1XO98dBYC0fWeeAECAVSwLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/icu-skeleton-parser": "1.8.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.2.tgz",
+      "integrity": "sha512-k4ERKgw7aKGWJZgTarIcNEmvyTVD9FYh0mTrrBMHZ1b8hUu6iOJ4SzsZlo3UNAvHYa+PnvntIwRPt1/vy4nA9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
+      "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@internationalized/date": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.5.tgz",
+      "integrity": "sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/message": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.4.tgz",
+      "integrity": "sha512-Dygi9hH1s7V9nha07pggCkvmRfDd3q2lWnMGvrJyrOwYMe1yj4D2T9BoH9I6MGR7xz0biQrtLPsqUkqXzIrBOw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0",
+        "intl-messageformat": "^10.1.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.3.tgz",
+      "integrity": "sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/string": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.3.tgz",
+      "integrity": "sha512-9kpfLoA8HegiWTeCbR2livhdVeKobCnVv8tlJ6M2jF+4tcMqDo94ezwlnrUANBWPgd8U7OXIHCk2Ov2qhk4KXw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@js-joda/core": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.6.3.tgz",
+      "integrity": "sha512-T1rRxzdqkEXcou0ZprN1q9yDRlvzCPLqmlNt5IIsGBzoEVgLCCYrKEwc84+TvsXuAc95VAZwtWD2zVsKPY4bcA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
+      "integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
+      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nextui-org/accordion": {
+      "version": "2.0.38",
+      "resolved": "https://registry.npmjs.org/@nextui-org/accordion/-/accordion-2.0.38.tgz",
+      "integrity": "sha512-kFCZU1VaKkUI295Fg3NxuQR2+kZ5vTH4ftIs0oByrOs0+l14dVQGFOd9ZV402fHNykZJt7Sk6oWjTp4Qwl83JA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/aria-utils": "2.0.24",
+        "@nextui-org/divider": "2.0.31",
+        "@nextui-org/framer-utils": "2.0.24",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-aria-accordion": "2.0.7",
+        "@react-aria/button": "3.9.5",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/tree": "3.8.1",
+        "@react-types/accordion": "3.0.0-alpha.21",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/aria-utils": {
+      "version": "2.0.24",
+      "resolved": "https://registry.npmjs.org/@nextui-org/aria-utils/-/aria-utils-2.0.24.tgz",
+      "integrity": "sha512-YD+YvT01zFqN1Ey137OeFl9SEhAYf2BoZz+ykWiIJlMjl/LY1d5WE0nkzsjMHh6MV3HgS6CExxlf7TuApN6Piw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-rsc-utils": "2.0.13",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/system": "2.2.5",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/collections": "3.10.7",
+        "@react-stately/overlays": "3.6.7",
+        "@react-types/overlays": "3.8.7",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/autocomplete": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nextui-org/autocomplete/-/autocomplete-2.1.5.tgz",
+      "integrity": "sha512-VcSe3B/CmIvfZnAJHHYKp3r83QrqI0T8v9jjrpQ0PN8qKOc7LmQUsvnAkBRuHCLlaC1xPwZtyJp0TJyRF8tM3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/aria-utils": "2.0.24",
+        "@nextui-org/button": "2.0.37",
+        "@nextui-org/input": "2.2.4",
+        "@nextui-org/listbox": "2.1.25",
+        "@nextui-org/popover": "2.1.27",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/scroll-shadow": "2.1.19",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/spinner": "2.0.33",
+        "@nextui-org/use-aria-button": "2.0.10",
+        "@nextui-org/use-safe-layout-effect": "2.0.6",
+        "@react-aria/combobox": "3.9.1",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/i18n": "3.11.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1",
+        "@react-aria/visually-hidden": "3.8.12",
+        "@react-stately/combobox": "3.8.4",
+        "@react-types/combobox": "3.11.1",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/avatar": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/@nextui-org/avatar/-/avatar-2.0.32.tgz",
+      "integrity": "sha512-2dCpIKuGvbOVLJ6m2AkNhPqqamIin3FDqDLop2ILNhyAxgxPYitqE3JqsUA/hlZCzu79sZudruuubzHWzHqf0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-image": "2.0.6",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/badge": {
+      "version": "2.0.31",
+      "resolved": "https://registry.npmjs.org/@nextui-org/badge/-/badge-2.0.31.tgz",
+      "integrity": "sha512-ayOw9j6Fa/RxZjk+2AhhBzXFm2Xv2RNYMrXAqGaJ+cbhofsqu8QnP0/4W+CiVXx8C0jpPmNAgSklRXgbKHs10Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/breadcrumbs": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/@nextui-org/breadcrumbs/-/breadcrumbs-2.0.12.tgz",
+      "integrity": "sha512-PCZI7xqu1UrjJcCkd6HwGJ+h2L5k6LMBQRVbD8/7jMKkJxpoQXC7h5uCtEeLG2CafVih4cUCBTuzUnsubtKLnQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@react-aria/breadcrumbs": "3.5.13",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-types/breadcrumbs": "3.7.5",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/button": {
+      "version": "2.0.37",
+      "resolved": "https://registry.npmjs.org/@nextui-org/button/-/button-2.0.37.tgz",
+      "integrity": "sha512-dBtdO30qfu+K4YYLNmmpUy16Q82H1ucY8A4NjP4iEAJ1sPunoAYvba7h9xabrpUKW9IOyItOThSesxsfpaXYug==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/ripple": "2.0.32",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/spinner": "2.0.33",
+        "@nextui-org/use-aria-button": "2.0.10",
+        "@react-aria/button": "3.9.5",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1",
+        "@react-types/button": "3.9.4",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/calendar": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@nextui-org/calendar/-/calendar-2.0.11.tgz",
+      "integrity": "sha512-pgCEekJHSr5QKxpJaABIFS2ItqgK8qZ7pKrCOJjmRHBh4Y9WGfndrIW6z3IkHZiO01CKJbpjb9ytTjufsU6kIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@nextui-org/button": "2.0.37",
+        "@nextui-org/framer-utils": "2.0.24",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-aria-button": "2.0.10",
+        "@react-aria/calendar": "3.5.8",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/i18n": "3.11.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1",
+        "@react-aria/visually-hidden": "3.8.12",
+        "@react-stately/calendar": "3.5.1",
+        "@react-stately/utils": "3.10.1",
+        "@react-types/button": "3.9.4",
+        "@react-types/calendar": "3.4.6",
+        "@react-types/shared": "3.23.1",
+        "@types/lodash.debounce": "^4.0.7",
+        "lodash.debounce": "^4.0.8",
+        "scroll-into-view-if-needed": "3.0.10"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.1.0",
+        "@nextui-org/theme": ">=2.2.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/card": {
+      "version": "2.0.33",
+      "resolved": "https://registry.npmjs.org/@nextui-org/card/-/card-2.0.33.tgz",
+      "integrity": "sha512-iO/ThbUz75YlcFrWO9EssMhOxbc9LN0SSk181+2QnPDbKls9wbkUEfGjq/d9k3h6jb9FaR5N5XwVpT4aUt2Usw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/ripple": "2.0.32",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-aria-button": "2.0.10",
+        "@react-aria/button": "3.9.5",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/checkbox": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@nextui-org/checkbox/-/checkbox-2.1.4.tgz",
+      "integrity": "sha512-74AD4imL064mvs4trQKQj/efwIZYaBt0TmXO6jV+6xGE6S9YjCAy+OBotrgRBG9fURQVQU1qJGnwwsOIdxCXkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-callback-ref": "2.0.6",
+        "@nextui-org/use-safe-layout-effect": "2.0.6",
+        "@react-aria/checkbox": "3.14.3",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1",
+        "@react-aria/visually-hidden": "3.8.12",
+        "@react-stately/checkbox": "3.6.5",
+        "@react-stately/toggle": "3.7.4",
+        "@react-types/checkbox": "3.8.1",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/chip": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/@nextui-org/chip/-/chip-2.0.32.tgz",
+      "integrity": "sha512-fGqXamG7xs+DvKPra+rJEkIAjaQwPi8FSvsJ4P4LWzQ3U+HjymEI07BW8xQmaLceHInbTLTfdbTjAYdGNzAdOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1",
+        "@react-types/checkbox": "3.8.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/code": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/@nextui-org/code/-/code-2.0.32.tgz",
+      "integrity": "sha512-YBLCWDgR+ebWIr+noN02/ls+PsQV9leLskgPLFUfpRzHoXdGeUUhE8IjTv14KFP3XlW3Cf9ALFy3IgPuIZ+yuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/system-rsc": "2.1.5"
+      },
+      "peerDependencies": {
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/date-input": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@nextui-org/date-input/-/date-input-2.1.3.tgz",
+      "integrity": "sha512-Y6d+AVPnM7uYy7boSHrk+cW/pft1fKbpXh/ed5omTgFx6rKRZ/agQmP5erMcmNzpv3Bis4wCc89WNnBtCjEZMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@react-aria/datepicker": "3.10.1",
+        "@react-aria/i18n": "3.11.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/datepicker": "3.9.4",
+        "@react-types/datepicker": "3.7.4",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.1.0",
+        "@nextui-org/theme": ">=2.2.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/date-picker": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/date-picker/-/date-picker-2.1.6.tgz",
+      "integrity": "sha512-PycYKAm1tmew64aQWQtZfTbV73S4GPGYJnK6hr9W0iXUCOQQH5UbzLwdWGXnVXvtrJzczFQllaXaQccwWCeTzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@nextui-org/aria-utils": "2.0.24",
+        "@nextui-org/button": "2.0.37",
+        "@nextui-org/calendar": "2.0.11",
+        "@nextui-org/date-input": "2.1.3",
+        "@nextui-org/popover": "2.1.27",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@react-aria/datepicker": "3.10.1",
+        "@react-aria/i18n": "3.11.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/datepicker": "3.9.4",
+        "@react-stately/overlays": "3.6.7",
+        "@react-stately/utils": "3.10.1",
+        "@react-types/datepicker": "3.7.4",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.1.0",
+        "@nextui-org/theme": ">=2.2.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/divider": {
+      "version": "2.0.31",
+      "resolved": "https://registry.npmjs.org/@nextui-org/divider/-/divider-2.0.31.tgz",
+      "integrity": "sha512-z9GhrpmhXhJGuW0GSO1OP01mwDTSItuIRIz0VGpKOPVTqOzOMHkXN978wgNXqJ+knWZcaiF7WHvd83O05jmbkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-rsc-utils": "2.0.13",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/system-rsc": "2.1.5",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/dropdown": {
+      "version": "2.1.29",
+      "resolved": "https://registry.npmjs.org/@nextui-org/dropdown/-/dropdown-2.1.29.tgz",
+      "integrity": "sha512-ujHJVHzOcfwqNqlkt14t8YV3AAn03sME7gBxujQcwtDFGYMJeP9pvTU24L/FjBEb3Fd1XdhjwowU/sTuVTK4Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/aria-utils": "2.0.24",
+        "@nextui-org/menu": "2.0.28",
+        "@nextui-org/popover": "2.1.27",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/menu": "3.14.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/menu": "3.7.1",
+        "@react-types/menu": "3.9.9"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/framer-utils": {
+      "version": "2.0.24",
+      "resolved": "https://registry.npmjs.org/@nextui-org/framer-utils/-/framer-utils-2.0.24.tgz",
+      "integrity": "sha512-Fc5ugVaLsXhd3bgJg+hvw20uaaz9gAxYY2ouS/3leN7QBSRAwpy3Dl+tX8BbLeyx3ZosVrHIJ3w4bhDMzFVk9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/system": "2.2.5",
+        "@nextui-org/use-measure": "2.0.2"
+      },
+      "peerDependencies": {
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/image": {
+      "version": "2.0.31",
+      "resolved": "https://registry.npmjs.org/@nextui-org/image/-/image-2.0.31.tgz",
+      "integrity": "sha512-HxWaGUBtNaT9pLGvDo5Q2ruGxdhXYrdNcLvRhtoohiZeIKo1Y8jTbBUCVGxdxklTZAF3H7klrTcsdSwHTGfk0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-image": "2.0.6"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/input": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@nextui-org/input/-/input-2.2.4.tgz",
+      "integrity": "sha512-CVeTwwUJn9pEJC+kq3Jg0nAFeYVGBbIU7U2YFSG8XJK2X75odj8RSQdVd3Dt2U/b5Mtwt5sBh9gMzCedtjffWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-safe-layout-effect": "2.0.6",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/textfield": "3.14.5",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/utils": "3.10.1",
+        "@react-types/shared": "3.23.1",
+        "@react-types/textfield": "3.9.3",
+        "react-textarea-autosize": "^8.5.3"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/kbd": {
+      "version": "2.0.33",
+      "resolved": "https://registry.npmjs.org/@nextui-org/kbd/-/kbd-2.0.33.tgz",
+      "integrity": "sha512-1Q7vKKJjfn5RPMsySQEljo2clf03Ta4V4ZA4O92ktJ8YzbdNnDfUiWtfFxF64R183ZVfe869RBSpuOdzZLNuKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/system-rsc": "2.1.5",
+        "@react-aria/utils": "3.24.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/link": {
+      "version": "2.0.34",
+      "resolved": "https://registry.npmjs.org/@nextui-org/link/-/link-2.0.34.tgz",
+      "integrity": "sha512-497AvjzckEB/TE1eJEziS2QkxwCY81RPsWoApNSeHGdYrMO1tfgUFKATgadfBQjoba6FdCcLc2QaUapOetqFaA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-aria-link": "2.0.19",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/link": "3.7.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-types/link": "3.5.5"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/listbox": {
+      "version": "2.1.25",
+      "resolved": "https://registry.npmjs.org/@nextui-org/listbox/-/listbox-2.1.25.tgz",
+      "integrity": "sha512-WJqxhzPxADLIsenREaaoQ44bs3gQx5yqOvK86Jkiv/m9nXr0YuxZOJEsVa5GenkmyJBrEd6LkBV5cZ1TGNzbJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/aria-utils": "2.0.24",
+        "@nextui-org/divider": "2.0.31",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-is-mobile": "2.0.9",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/listbox": "3.12.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/list": "3.10.5",
+        "@react-types/menu": "3.9.9",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/menu": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/@nextui-org/menu/-/menu-2.0.28.tgz",
+      "integrity": "sha512-/bcIeBCGpauDkdz6VZvl1YXP5xpSSSYVTvhsChkcvzWzDXLG004uVAsw4kjP2i9OGxoehrjkl9wkIzCFCEdsHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/aria-utils": "2.0.24",
+        "@nextui-org/divider": "2.0.31",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-aria-menu": "2.0.6",
+        "@nextui-org/use-is-mobile": "2.0.9",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/menu": "3.14.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/menu": "3.7.1",
+        "@react-stately/tree": "3.8.1",
+        "@react-types/menu": "3.9.9",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/modal": {
+      "version": "2.0.39",
+      "resolved": "https://registry.npmjs.org/@nextui-org/modal/-/modal-2.0.39.tgz",
+      "integrity": "sha512-b0G5IRNrfQumx8mQQO92rn2iC2ueUuk4XKvxYYmYNpx3/qpdEP9tckozw+s0QFyZocRPY+yYa0pBtMBGC2lWGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/framer-utils": "2.0.24",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-aria-button": "2.0.10",
+        "@nextui-org/use-aria-modal-overlay": "2.0.11",
+        "@nextui-org/use-disclosure": "2.0.10",
+        "@react-aria/dialog": "3.5.14",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/overlays": "3.22.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/overlays": "3.6.7",
+        "@react-types/overlays": "3.8.7"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/navbar": {
+      "version": "2.0.36",
+      "resolved": "https://registry.npmjs.org/@nextui-org/navbar/-/navbar-2.0.36.tgz",
+      "integrity": "sha512-uobdPsh4TSPm2Us74/Vey43z0/oRqWb6x4+eHIJf9VhYP9pY733N2n17v2mvU7SvcNhkold/PWfXPYiA8kMlug==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/framer-utils": "2.0.24",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-aria-toggle-button": "2.0.10",
+        "@nextui-org/use-scroll-position": "2.0.8",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/overlays": "3.22.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/toggle": "3.7.4",
+        "@react-stately/utils": "3.10.1",
+        "react-remove-scroll": "^2.5.6"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/pagination": {
+      "version": "2.0.35",
+      "resolved": "https://registry.npmjs.org/@nextui-org/pagination/-/pagination-2.0.35.tgz",
+      "integrity": "sha512-07KJgZcJBt2e9RY6TsiQm5qrjDLH+gT3yB7yQ4jPdCK9fkTB0r2kvTOYdPUvrtVJYRq2bwFCWOz+9mokdNfcwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-pagination": "2.0.9",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/i18n": "3.11.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1",
+        "scroll-into-view-if-needed": "3.0.10"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/popover": {
+      "version": "2.1.27",
+      "resolved": "https://registry.npmjs.org/@nextui-org/popover/-/popover-2.1.27.tgz",
+      "integrity": "sha512-UV42nqvUR9IOy7Hgc5S2Xo+2YWzBAHCcU+C/9O9SchXL0DyU/ol+IPqxuBxdJDi5fiFYr9mTBoPZgAEGDoJjDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/aria-utils": "2.0.24",
+        "@nextui-org/button": "2.0.37",
+        "@nextui-org/framer-utils": "2.0.24",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-aria-button": "2.0.10",
+        "@nextui-org/use-safe-layout-effect": "2.0.6",
+        "@react-aria/dialog": "3.5.14",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/overlays": "3.22.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/overlays": "3.6.7",
+        "@react-types/button": "3.9.4",
+        "@react-types/overlays": "3.8.7",
+        "react-remove-scroll": "^2.5.6"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/progress": {
+      "version": "2.0.33",
+      "resolved": "https://registry.npmjs.org/@nextui-org/progress/-/progress-2.0.33.tgz",
+      "integrity": "sha512-rP54lZbH7BSzX9sFj7k3ylrUpk10XDWngc1dB1M+GlPsI2XRnzI3s+GE9kuZG2+N6eL/KLVG1YOg8u9eAYnwpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-is-mounted": "2.0.6",
+        "@react-aria/i18n": "3.11.1",
+        "@react-aria/progress": "3.4.13",
+        "@react-aria/utils": "3.24.1",
+        "@react-types/progress": "3.5.4"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/radio": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@nextui-org/radio/-/radio-2.1.4.tgz",
+      "integrity": "sha512-Y18TXvGVz/G1E3jjYmutSSx1EdQRs5iMCVZNS/Bz4avE9QMSrHl6fOhZIndrm8LwCTqn7lbKRQngZLN4tvPinQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/radio": "3.10.4",
+        "@react-aria/utils": "3.24.1",
+        "@react-aria/visually-hidden": "3.8.12",
+        "@react-stately/radio": "3.10.4",
+        "@react-types/radio": "3.8.1",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/react": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/react/-/react-2.4.6.tgz",
+      "integrity": "sha512-8o/k5A5g0xXj6hmV2AulkAswQnZGt2WI64Coq+toWBTumQLcW6iAqPJBDztCDiz+6yiU6Nvk/1ZuZJeRs3XMRw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/accordion": "2.0.38",
+        "@nextui-org/autocomplete": "2.1.5",
+        "@nextui-org/avatar": "2.0.32",
+        "@nextui-org/badge": "2.0.31",
+        "@nextui-org/breadcrumbs": "2.0.12",
+        "@nextui-org/button": "2.0.37",
+        "@nextui-org/calendar": "2.0.11",
+        "@nextui-org/card": "2.0.33",
+        "@nextui-org/checkbox": "2.1.4",
+        "@nextui-org/chip": "2.0.32",
+        "@nextui-org/code": "2.0.32",
+        "@nextui-org/date-input": "2.1.3",
+        "@nextui-org/date-picker": "2.1.6",
+        "@nextui-org/divider": "2.0.31",
+        "@nextui-org/dropdown": "2.1.29",
+        "@nextui-org/framer-utils": "2.0.24",
+        "@nextui-org/image": "2.0.31",
+        "@nextui-org/input": "2.2.4",
+        "@nextui-org/kbd": "2.0.33",
+        "@nextui-org/link": "2.0.34",
+        "@nextui-org/listbox": "2.1.25",
+        "@nextui-org/menu": "2.0.28",
+        "@nextui-org/modal": "2.0.39",
+        "@nextui-org/navbar": "2.0.36",
+        "@nextui-org/pagination": "2.0.35",
+        "@nextui-org/popover": "2.1.27",
+        "@nextui-org/progress": "2.0.33",
+        "@nextui-org/radio": "2.1.4",
+        "@nextui-org/ripple": "2.0.32",
+        "@nextui-org/scroll-shadow": "2.1.19",
+        "@nextui-org/select": "2.2.5",
+        "@nextui-org/skeleton": "2.0.31",
+        "@nextui-org/slider": "2.2.15",
+        "@nextui-org/snippet": "2.0.41",
+        "@nextui-org/spacer": "2.0.32",
+        "@nextui-org/spinner": "2.0.33",
+        "@nextui-org/switch": "2.0.33",
+        "@nextui-org/system": "2.2.5",
+        "@nextui-org/table": "2.0.39",
+        "@nextui-org/tabs": "2.0.35",
+        "@nextui-org/theme": "2.2.9",
+        "@nextui-org/tooltip": "2.0.39",
+        "@nextui-org/user": "2.0.33",
+        "@react-aria/visually-hidden": "3.8.12"
+      },
+      "peerDependencies": {
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/react-rsc-utils": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@nextui-org/react-rsc-utils/-/react-rsc-utils-2.0.13.tgz",
+      "integrity": "sha512-QewsXtoQlMsR9stThdazKEImg9oyZkPLs7wsymhrzh6/HdQCl9bTdb6tJcROg4vg5LRYKGG11USSQO2nKlfCcQ==",
+      "license": "MIT"
+    },
+    "node_modules/@nextui-org/react-utils": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/@nextui-org/react-utils/-/react-utils-2.0.16.tgz",
+      "integrity": "sha512-QdDoqzhx+4t9cDTVmtw5iOrfyLvpqyKsq8PARHUniCiQQDQd1ao7FCpzHgvU9poYcEdRk+Lsna66zbeMkFBB6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-rsc-utils": "2.0.13",
+        "@nextui-org/shared-utils": "2.0.7"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/ripple": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/@nextui-org/ripple/-/ripple-2.0.32.tgz",
+      "integrity": "sha512-xOqoHWzpvv5KRh7P8pXt3aZEmI1tyhiTNhrwjJaRME0d5xSA0gNzYhrjP5g0+Dxy4nKRDIZ1znJcd87KI07JFA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/scroll-shadow": {
+      "version": "2.1.19",
+      "resolved": "https://registry.npmjs.org/@nextui-org/scroll-shadow/-/scroll-shadow-2.1.19.tgz",
+      "integrity": "sha512-od5AnhX6iO0sHoTAVReWv1O1dbNCEeOBOFdnyzFins6ZC5EnAl/oBPR/KLd8glHtgM3Jt8dvIVlBXPEPZKZwaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-data-scroll-overflow": "2.1.6"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/select": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@nextui-org/select/-/select-2.2.5.tgz",
+      "integrity": "sha512-Il1eigjSXOBgJ745nhn6TDPD1jj1avrnvk9WV/DCjOsFRwfstRnDzsS1aNpZKHqJgHhFRQZ1ivz8hA4x3Zgasg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/aria-utils": "2.0.24",
+        "@nextui-org/listbox": "2.1.25",
+        "@nextui-org/popover": "2.1.27",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/scroll-shadow": "2.1.19",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/spinner": "2.0.33",
+        "@nextui-org/use-aria-button": "2.0.10",
+        "@nextui-org/use-aria-multiselect": "2.2.3",
+        "@nextui-org/use-safe-layout-effect": "2.0.6",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/form": "3.0.5",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1",
+        "@react-aria/visually-hidden": "3.8.12",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/shared-icons": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/@nextui-org/shared-icons/-/shared-icons-2.0.9.tgz",
+      "integrity": "sha512-WG3yinVY7Tk9VqJgcdF4V8Ok9+fcm5ey7S1els7kujrfqLYxtqoKywgiY/7QHwZlfQkzpykAfy+NAlHkTP5hMg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/shared-utils": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@nextui-org/shared-utils/-/shared-utils-2.0.7.tgz",
+      "integrity": "sha512-FxY3N0i1Al7Oz3yOQN0dSpG8UUrLIP3iYh3ubD7BhdQoZLl5xbG6++q1gqOzZXV+ZWeUFMY/or0ofzWxGHiOow==",
+      "license": "MIT"
+    },
+    "node_modules/@nextui-org/skeleton": {
+      "version": "2.0.31",
+      "resolved": "https://registry.npmjs.org/@nextui-org/skeleton/-/skeleton-2.0.31.tgz",
+      "integrity": "sha512-pT0l2skPP6Nq9edLJNQxUJI/WLKu4Lx5Vvs7nlE/9NpkxyQ805l4LiYsMD30dkjjxe+WpXtIjjAXY0BQqdid0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/slider": {
+      "version": "2.2.15",
+      "resolved": "https://registry.npmjs.org/@nextui-org/slider/-/slider-2.2.15.tgz",
+      "integrity": "sha512-ImsxvxAJ2wxRL45y4IbVWThZI/vw2Gq/6qUVZFAwyF54dlro08eJZJIOOG7bKfA5Ob63JLfroUijrlZ9kGP5cA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/tooltip": "2.0.39",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/i18n": "3.11.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/slider": "3.7.8",
+        "@react-aria/utils": "3.24.1",
+        "@react-aria/visually-hidden": "3.8.12",
+        "@react-stately/slider": "3.5.4"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/snippet": {
+      "version": "2.0.41",
+      "resolved": "https://registry.npmjs.org/@nextui-org/snippet/-/snippet-2.0.41.tgz",
+      "integrity": "sha512-ZZopaecAZbKJIdabwGVF3ahL2MM7L0zZII61SO3LDPAwqXOuta9ixMYk1XVCI0V2PVqTkabQgdpt1ZLgmFH+Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/button": "2.0.37",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/tooltip": "2.0.39",
+        "@nextui-org/use-clipboard": "2.0.6",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/utils": "3.24.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/spacer": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/@nextui-org/spacer/-/spacer-2.0.32.tgz",
+      "integrity": "sha512-NxqEYTig4OfkLDPlO2/jASB4gV8L9DLpsNZSqzaacIJZwk4BCTsNoBi3CuNt5ZsMoGYujtFP6QU0zH9fZbuzwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/system-rsc": "2.1.5"
+      },
+      "peerDependencies": {
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/spinner": {
+      "version": "2.0.33",
+      "resolved": "https://registry.npmjs.org/@nextui-org/spinner/-/spinner-2.0.33.tgz",
+      "integrity": "sha512-c1wW4YEbzdn0t1MJAXhJ2W0PuNxrxtZg2DVqJeqh3180y4iQPYDzEy7oFoU0FpK53LcBPxjfsKHNL6v1pn+60A==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/system-rsc": "2.1.5"
+      },
+      "peerDependencies": {
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/switch": {
+      "version": "2.0.33",
+      "resolved": "https://registry.npmjs.org/@nextui-org/switch/-/switch-2.0.33.tgz",
+      "integrity": "sha512-T7w+8+ex7Pey9HVGXkNft4D11mO5J9iPfmemfLbSOYqbSydcOuINuGRQ1QWy7X+lLYhhZBHb9Ykcf4QtR4dqTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-safe-layout-effect": "2.0.6",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/switch": "3.6.4",
+        "@react-aria/utils": "3.24.1",
+        "@react-aria/visually-hidden": "3.8.12",
+        "@react-stately/toggle": "3.7.4",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/system": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@nextui-org/system/-/system-2.2.5.tgz",
+      "integrity": "sha512-nrX6768aiyWtpxX3OTFBIVWR+v9nlMsC3KaBinNfek97sNm7gAfTHi7q5kylE3L5yIMpNG+DclAKpuxgDQEmvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/system-rsc": "2.1.5",
+        "@react-aria/i18n": "3.11.1",
+        "@react-aria/overlays": "3.22.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/utils": "3.10.1"
+      },
+      "peerDependencies": {
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/system-rsc": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nextui-org/system-rsc/-/system-rsc-2.1.5.tgz",
+      "integrity": "sha512-tkJLAyJu34Rr5KUMMqoB7cZjOVXB+7a/7N4ushZfuiLdoYijgmcXFMzLxjm+tbt9zA5AV+ivsfbHvscg77dJ6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-types/shared": "3.23.1",
+        "clsx": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/system-rsc/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@nextui-org/table": {
+      "version": "2.0.39",
+      "resolved": "https://registry.npmjs.org/@nextui-org/table/-/table-2.0.39.tgz",
+      "integrity": "sha512-VYvmrQ6GliwmzukKLZ7Nxp3sFXdskWZp8/BjwROLFE9Zco22CC0++7VPG3ebOYAIhi4e1Je+QUTx4/eh2wZZgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/checkbox": "2.1.4",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-icons": "2.0.9",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/spacer": "2.0.32",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/table": "3.14.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-aria/visually-hidden": "3.8.12",
+        "@react-stately/table": "3.11.8",
+        "@react-stately/virtualizer": "3.7.1",
+        "@react-types/grid": "3.2.6",
+        "@react-types/table": "3.9.5"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/tabs": {
+      "version": "2.0.35",
+      "resolved": "https://registry.npmjs.org/@nextui-org/tabs/-/tabs-2.0.35.tgz",
+      "integrity": "sha512-K6uDZbJwn1qLRw8XeBS2TwGQl9zKXg3Q1ShLzVG2IjTGHGNAn9lwkUzn0FNUNaU1GK2o8wOyKhX7K02J3Ev5fw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/aria-utils": "2.0.24",
+        "@nextui-org/framer-utils": "2.0.24",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-is-mounted": "2.0.6",
+        "@nextui-org/use-update-effect": "2.0.6",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/tabs": "3.9.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/tabs": "3.6.6",
+        "@react-types/shared": "3.23.1",
+        "@react-types/tabs": "3.3.7",
+        "scroll-into-view-if-needed": "3.0.10"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/theme": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@nextui-org/theme/-/theme-2.2.9.tgz",
+      "integrity": "sha512-TN2I9sMriLaj00pXsIMlg19+UHeOdjzS2JV0u4gjL14mSbQl5BYNxgbvU3gbMqkZZQ6OpwT4RnT8RS+ks6TXCw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^1.2.1",
+        "color": "^4.2.3",
+        "color2k": "^2.0.2",
+        "deepmerge": "4.3.1",
+        "flat": "^5.0.2",
+        "lodash.foreach": "^4.5.0",
+        "lodash.get": "^4.4.2",
+        "lodash.kebabcase": "^4.1.1",
+        "lodash.mapkeys": "^4.6.0",
+        "lodash.omit": "^4.5.0",
+        "tailwind-merge": "^1.14.0",
+        "tailwind-variants": "^0.1.20"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.4.0"
+      }
+    },
+    "node_modules/@nextui-org/theme/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@nextui-org/tooltip": {
+      "version": "2.0.39",
+      "resolved": "https://registry.npmjs.org/@nextui-org/tooltip/-/tooltip-2.0.39.tgz",
+      "integrity": "sha512-DWP3XAmVb/SlcdI4SQodtT8ZyMzYMuvRbq4+JQwm+qq1+FGs55z15+8h9DRFQEseEEaDs0hCs6+kgbieZlUitw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/aria-utils": "2.0.24",
+        "@nextui-org/framer-utils": "2.0.24",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@nextui-org/use-safe-layout-effect": "2.0.6",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/overlays": "3.22.1",
+        "@react-aria/tooltip": "3.7.4",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/tooltip": "3.4.9",
+        "@react-types/overlays": "3.8.7",
+        "@react-types/tooltip": "3.4.9"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-aria-accordion": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-accordion/-/use-aria-accordion-2.0.7.tgz",
+      "integrity": "sha512-VzGlxmsu2tWG2Pht1e0PBz40jz95v0OEKYVXq91WpDMwj8Bl1CYvxrw2Qz41/5Xi0X843Mmo4sPwrc/hk0+RHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-aria/button": "3.9.5",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/selection": "3.18.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/tree": "3.8.1",
+        "@react-types/accordion": "3.0.0-alpha.21",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-aria-button": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-button/-/use-aria-button-2.0.10.tgz",
+      "integrity": "sha512-tUpp4QMr1zugKPevyToeRHIufTuc/g+67/r/oQLRTG0mMo3yGVmggykQuYn22fqqZPpW6nHcB9VYc+XtZZ27TQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1",
+        "@react-types/button": "3.9.4",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-aria-link": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-link/-/use-aria-link-2.0.19.tgz",
+      "integrity": "sha512-ef61cJLlwcR4zBWiaeHZy4K18juFjUup2SslfLIAiZz3kVosBCGKmkJkw1SASYY8+D/oUc2B6BFIk25YEsRKRw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/utils": "3.24.1",
+        "@react-types/link": "3.5.5",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-aria-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-menu/-/use-aria-menu-2.0.6.tgz",
+      "integrity": "sha512-fGDF25E99THbgeDV2r2w4BHw5ZbGW3Lu6Y+vbLUcLBBh6x8/W8cqrpYFrzSUzn1RCun1t17yOAHZEV2rbvtMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-aria/i18n": "3.11.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/menu": "3.14.1",
+        "@react-aria/selection": "3.18.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/collections": "3.10.7",
+        "@react-stately/tree": "3.8.1",
+        "@react-types/menu": "3.9.9",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-aria-modal-overlay": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-modal-overlay/-/use-aria-modal-overlay-2.0.11.tgz",
+      "integrity": "sha512-crMOCHyGIiBJiihxqidJCNR3AHH62uewfImDLEwyE/SlIkhAqW5jteUhkq0QfCSH4U/ydWisQ14niWDEgtzxXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-aria/overlays": "3.22.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/overlays": "3.6.7",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-aria-multiselect": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-multiselect/-/use-aria-multiselect-2.2.3.tgz",
+      "integrity": "sha512-VeRoyyUUVgJ7DrdfzU6onjohHxJfG7bmwpIfQyurMzvTZcmcVUGTnddAnRPVEoOro68tTAj4IuPs/4xkf1aXxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-aria/i18n": "3.11.1",
+        "@react-aria/interactions": "3.21.3",
+        "@react-aria/label": "3.7.8",
+        "@react-aria/listbox": "3.12.1",
+        "@react-aria/menu": "3.14.1",
+        "@react-aria/selection": "3.18.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/form": "3.0.3",
+        "@react-stately/list": "3.10.5",
+        "@react-stately/menu": "3.7.1",
+        "@react-types/button": "3.9.4",
+        "@react-types/overlays": "3.8.7",
+        "@react-types/select": "3.9.4",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-aria-toggle-button": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-toggle-button/-/use-aria-toggle-button-2.0.10.tgz",
+      "integrity": "sha512-U5jOmEO+nMIgYvBF0+gJtdq8C6dynGMjzAboPG4FhuHOzDoNiC12G5FIbGnRe8K1hMsKVuaI72p9986NhfqNgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/use-aria-button": "2.0.10",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/toggle": "3.7.4",
+        "@react-types/button": "3.9.4",
+        "@react-types/shared": "3.23.1"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-callback-ref": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-callback-ref/-/use-callback-ref-2.0.6.tgz",
+      "integrity": "sha512-2WcwWuK1L/wIpTbibnLrysmmkzWomvkVIcgWayB6n/w+bpPrPCG7Zyg2WHzmMmDhe6imV//KKBgNKRi8Xhu/VA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/use-safe-layout-effect": "2.0.6"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-clipboard/-/use-clipboard-2.0.6.tgz",
+      "integrity": "sha512-UQbCoAX1vqEKYeMF8Xp2RdTqbDD8Or16+7W4f8OQc5+uaJeKaAL6LPITi5M5ipgruTvzM845XooHdiAStH322Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-data-scroll-overflow": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-data-scroll-overflow/-/use-data-scroll-overflow-2.1.6.tgz",
+      "integrity": "sha512-z9XzBF64qjTSp6jTttMDEPku7Xpgci/tYTokEQHWgydRg3FZEaBqRgOOMeiXAV1Py/kQB062MjPSneUtwYlozA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/shared-utils": "2.0.7"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-disclosure": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-disclosure/-/use-disclosure-2.0.10.tgz",
+      "integrity": "sha512-s2I58d7x2f1JRriZnNm9ZoxrGmxF+DnC9BXM1sD99Wq1VNMd0dhitmx0mUWfUB7l5HLyZgKOeiSLG+ugy1F1Yw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/use-callback-ref": "2.0.6",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/utils": "3.10.1"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-image": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-image/-/use-image-2.0.6.tgz",
+      "integrity": "sha512-VelN9y3vzwIpPfubFMh00YRQ0f4+I5FElcAvAqoo0Kfb0K7sGrTo1lZNApHm6yBN2gJMMeccG9u7bZB+wcDGZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/use-safe-layout-effect": "2.0.6"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-is-mobile": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-is-mobile/-/use-is-mobile-2.0.9.tgz",
+      "integrity": "sha512-u5pRmPV0wacdpOcAkQnWwE30yNBl2uk1WvbWkrSELxIVRN22+fTIYn8ynnHK0JbJFTA6/5zh7uIfETQu3L6KjA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-aria/ssr": "3.9.4"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-is-mounted": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-is-mounted/-/use-is-mounted-2.0.6.tgz",
+      "integrity": "sha512-/lcMdYnwBZ1EuKMLRIhHeAZG8stXWNTz7wBweAlLId23VC4VHgCp/s9K9Vbj1A5/r8FiFQeoTmXQuMAMUoPRtg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-measure": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-measure/-/use-measure-2.0.2.tgz",
+      "integrity": "sha512-H/RSPPA9B5sZ10wiXR3jLlYFEuiVnc0O/sgLLQfrb5M0hvHoaqMThnsZpm//5iyS7tD7kxPeYNLa1EhzlQKxDA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-pagination": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-pagination/-/use-pagination-2.0.9.tgz",
+      "integrity": "sha512-p5Gssyb71/SjRezq2o1aRsYTmC9idziW3pLCJFpVwLGfgWNARf9C6NS1oQsqKgjF5lvzoa88soZRDhKKvRAt/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/shared-utils": "2.0.7",
+        "@react-aria/i18n": "3.11.1"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-safe-layout-effect": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-safe-layout-effect/-/use-safe-layout-effect-2.0.6.tgz",
+      "integrity": "sha512-xzEJXf/g9GaSqjLpQ4+Z2/pw1GPq2Fc5cWRGqEXbGauEMXuH8UboRls1BmIV1RuOpqI6FgxkEmxL1EuVIRVmvQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-scroll-position": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-scroll-position/-/use-scroll-position-2.0.8.tgz",
+      "integrity": "sha512-sUuoLEPWxCNlgzayy3VZSneVA1rKSdh4kBuBbYJTp/g2yyrpZYnyYzWpeNJ4dhDQr1cpTDODehJekWPBhNN+uw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-update-effect": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-update-effect/-/use-update-effect-2.0.6.tgz",
+      "integrity": "sha512-n5Qiv3ferKn+cSxU3Vv+96LdG8I/00mzc7Veoan+P9GL0aCTrsPB6RslTsiblaiAXQcqTiFXd8xwsK309DXOXA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/user": {
+      "version": "2.0.33",
+      "resolved": "https://registry.npmjs.org/@nextui-org/user/-/user-2.0.33.tgz",
+      "integrity": "sha512-v6gGTlsaqM7Ndwtx9N/AAQFRICcIE5DuFxRZRqPfLa+jbZhJuWG2OSIATPeUOxgr8pKWpeV78nETdFKEKcsUPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nextui-org/avatar": "2.0.32",
+        "@nextui-org/react-utils": "2.0.16",
+        "@nextui-org/shared-utils": "2.0.7",
+        "@react-aria/focus": "3.17.1",
+        "@react-aria/utils": "3.24.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@react-aria/breadcrumbs": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.13.tgz",
+      "integrity": "sha512-G1Gqf/P6kVdfs94ovwP18fTWuIxadIQgHsXS08JEVcFVYMjb9YjqnEBaohUxD1tq2WldMbYw53ahQblT4NTG+g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/link": "^3.7.1",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/breadcrumbs": "^3.7.5",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/button": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/button/-/button-3.9.5.tgz",
+      "integrity": "sha512-dgcYR6j8WDOMLKuVrtxzx4jIC05cVKDzc+HnPO8lNkBAOfjcuN5tkGRtIjLtqjMvpZHhQT5aDbgFpIaZzxgFIg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/toggle": "^3.7.4",
+        "@react-types/button": "^3.9.4",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/calendar": {
+      "version": "3.5.8",
+      "resolved": "https://registry.npmjs.org/@react-aria/calendar/-/calendar-3.5.8.tgz",
+      "integrity": "sha512-Whlp4CeAA5/ZkzrAHUv73kgIRYjw088eYGSc+cvSOCxfrc/2XkBm9rNrnSBv0DvhJ8AG0Fjz3vYakTmF3BgZBw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/live-announcer": "^3.3.4",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/calendar": "^3.5.1",
+        "@react-types/button": "^3.9.4",
+        "@react-types/calendar": "^3.4.6",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/checkbox": {
+      "version": "3.14.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/checkbox/-/checkbox-3.14.3.tgz",
+      "integrity": "sha512-EtBJL6iu0gvrw3A4R7UeVLR6diaVk/mh4kFBc7c8hQjpEJweRr4hmJT3hrNg3MBcTWLxFiMEXPGgWEwXDBygtA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/form": "^3.0.5",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/label": "^3.7.8",
+        "@react-aria/toggle": "^3.10.4",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/checkbox": "^3.6.5",
+        "@react-stately/form": "^3.0.3",
+        "@react-stately/toggle": "^3.7.4",
+        "@react-types/checkbox": "^3.8.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/combobox": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/combobox/-/combobox-3.9.1.tgz",
+      "integrity": "sha512-SpK92dCmT8qn8aEcUAihRQrBb5LZUhwIbDExFII8PvUvEFy/PoQHXIo3j1V29WkutDBDpMvBv/6XRCHGXPqrhQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/listbox": "^3.12.1",
+        "@react-aria/live-announcer": "^3.3.4",
+        "@react-aria/menu": "^3.14.1",
+        "@react-aria/overlays": "^3.22.1",
+        "@react-aria/selection": "^3.18.1",
+        "@react-aria/textfield": "^3.14.5",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/collections": "^3.10.7",
+        "@react-stately/combobox": "^3.8.4",
+        "@react-stately/form": "^3.0.3",
+        "@react-types/button": "^3.9.4",
+        "@react-types/combobox": "^3.11.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/datepicker": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/datepicker/-/datepicker-3.10.1.tgz",
+      "integrity": "sha512-4HZL593nrNMa1GjBmWEN/OTvNS6d3/16G1YJWlqiUlv11ADulSbqBIjMmkgwrJVFcjrgqtXFy+yyrTA/oq94Zw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@internationalized/number": "^3.5.3",
+        "@internationalized/string": "^3.2.3",
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/form": "^3.0.5",
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/label": "^3.7.8",
+        "@react-aria/spinbutton": "^3.6.5",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/datepicker": "^3.9.4",
+        "@react-stately/form": "^3.0.3",
+        "@react-types/button": "^3.9.4",
+        "@react-types/calendar": "^3.4.6",
+        "@react-types/datepicker": "^3.7.4",
+        "@react-types/dialog": "^3.5.10",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/dialog": {
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@react-aria/dialog/-/dialog-3.5.14.tgz",
+      "integrity": "sha512-oqDCjQ8hxe3GStf48XWBf2CliEnxlR9GgSYPHJPUc69WBj68D9rVcCW3kogJnLAnwIyf3FnzbX4wSjvUa88sAQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/overlays": "^3.22.1",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/dialog": "^3.5.10",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/focus": {
+      "version": "3.17.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.17.1.tgz",
+      "integrity": "sha512-FLTySoSNqX++u0nWZJPPN5etXY0WBxaIe/YuL/GTEeuqUIuC/2bJSaw5hlsM6T2yjy6Y/VAxBcKSdAFUlU6njQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/form": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/form/-/form-3.0.5.tgz",
+      "integrity": "sha512-n290jRwrrRXO3fS82MyWR+OKN7yznVesy5Q10IclSTVYHHI3VI53xtAPr/WzNjJR1um8aLhOcDNFKwnNIUUCsQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/form": "^3.0.3",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/grid/-/grid-3.10.1.tgz",
+      "integrity": "sha512-7dSgiYVQapBtPV4SIit+9fJ1qoEjtp+PXffJkWAPtGbg/jJ4b0jcVzykH7ARD4w/6jAJN/oVSfrKZqFPoLAd9w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.18.1",
+        "@react-aria/i18n": "^3.12.1",
+        "@react-aria/interactions": "^3.22.1",
+        "@react-aria/live-announcer": "^3.3.4",
+        "@react-aria/selection": "^3.19.1",
+        "@react-aria/utils": "^3.25.1",
+        "@react-stately/collections": "^3.10.9",
+        "@react-stately/grid": "^3.9.1",
+        "@react-stately/selection": "^3.16.1",
+        "@react-types/checkbox": "^3.8.3",
+        "@react-types/grid": "^3.2.8",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid/node_modules/@react-aria/focus": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.1.tgz",
+      "integrity": "sha512-N0Cy61WCIv+57mbqC7hiZAsB+3rF5n4JKabxUmg/2RTJL6lq7hJ5N4gx75ymKxkN8GnVDwt4pKZah48Wopa5jw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.22.1",
+        "@react-aria/utils": "^3.25.1",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid/node_modules/@react-aria/i18n": {
+      "version": "3.12.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.12.1.tgz",
+      "integrity": "sha512-0q3gyogF9Ekah+9LOo6tcfshxsk2Ope+KdbtFHJVhznedMxn6RpHGcVur5ImbQ1dYafA5CmjBUGJW70b56+BGA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.5.5",
+        "@internationalized/message": "^3.1.4",
+        "@internationalized/number": "^3.5.3",
+        "@internationalized/string": "^3.2.3",
+        "@react-aria/ssr": "^3.9.5",
+        "@react-aria/utils": "^3.25.1",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid/node_modules/@react-aria/interactions": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.1.tgz",
+      "integrity": "sha512-5TLzQaDAQQ5C70yG8GInbO4wIylKY67RfTIIwQPGR/4n5OIjbUD8BOj3NuSsuZ/frUPaBXo1VEBBmSO23fxkjw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.5",
+        "@react-aria/utils": "^3.25.1",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid/node_modules/@react-aria/selection": {
+      "version": "3.19.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/selection/-/selection-3.19.1.tgz",
+      "integrity": "sha512-mbExvq2Omi60sTWFGjwcNz1ja2P8VDsxWAqSypHRTyqXhtgqbv8V/v8Gp+7BmVPH1YHcbhztl6rvUZTDOSszzw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.18.1",
+        "@react-aria/i18n": "^3.12.1",
+        "@react-aria/interactions": "^3.22.1",
+        "@react-aria/utils": "^3.25.1",
+        "@react-stately/selection": "^3.16.1",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid/node_modules/@react-aria/ssr": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
+      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid/node_modules/@react-aria/utils": {
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.1.tgz",
+      "integrity": "sha512-5Uj864e7T5+yj78ZfLnfHqmypLiqW2mN+nsdslog2z5ssunTqjolVeM15ootXskjISlZ7MojLpq97kIC4nlnAw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.5",
+        "@react-stately/utils": "^3.10.2",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid/node_modules/@react-stately/collections": {
+      "version": "3.10.9",
+      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.9.tgz",
+      "integrity": "sha512-plyrng6hOQMG8LrjArMA6ts/DgWyXln3g90/hFNbqe/hdVYF53sDVsj8Jb+5LtoYTpiAlV6eOvy1XR0vPZUf8w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid/node_modules/@react-stately/utils": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
+      "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid/node_modules/@react-types/checkbox": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.8.3.tgz",
+      "integrity": "sha512-f4c1mnLEt0iS1NMkyZXgT3q3AgcxzDk7w6MSONOKydcnh0xG5L2oefY14DhVDLkAuQS7jThlUFwiAs+MxiO3MA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid/node_modules/@react-types/grid": {
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.2.8.tgz",
+      "integrity": "sha512-6PJrpukwMqlv3IhJSDkJuVbhHM8Oe6hd2supWqd9adMXrlSP7QHt9a8SgFcFblCCTx8JzUaA0PvY5sTudcEtOQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid/node_modules/@react-types/shared": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/i18n": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.11.1.tgz",
+      "integrity": "sha512-vuiBHw1kZruNMYeKkTGGnmPyMnM5T+gT8bz97H1FqIq1hQ6OPzmtBZ6W6l6OIMjeHI5oJo4utTwfZl495GALFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@internationalized/message": "^3.1.4",
+        "@internationalized/number": "^3.5.3",
+        "@internationalized/string": "^3.2.3",
+        "@react-aria/ssr": "^3.9.4",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.21.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.21.3.tgz",
+      "integrity": "sha512-BWIuf4qCs5FreDJ9AguawLVS0lV9UU+sK4CCnbCNNmYqOWY+1+gRXCsnOM32K+oMESBxilAjdHW5n1hsMqYMpA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.4",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/label": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmjs.org/@react-aria/label/-/label-3.7.8.tgz",
+      "integrity": "sha512-MzgTm5+suPA3KX7Ug6ZBK2NX9cin/RFLsv1BdafJ6CZpmUSpWnGE/yQfYUB7csN7j31OsZrD3/P56eShYWAQfg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/link": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/link/-/link-3.7.1.tgz",
+      "integrity": "sha512-a4IaV50P3fXc7DQvEIPYkJJv26JknFbRzFT5MJOMgtzuhyJoQdILEUK6XHYjcSSNCA7uLgzpojArVk5Hz3lCpw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/link": "^3.5.5",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/listbox": {
+      "version": "3.12.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/listbox/-/listbox-3.12.1.tgz",
+      "integrity": "sha512-7JiUp0NGykbv/HgSpmTY1wqhuf/RmjFxs1HZcNaTv8A+DlzgJYc7yQqFjP3ZA/z5RvJFuuIxggIYmgIFjaRYdA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/label": "^3.7.8",
+        "@react-aria/selection": "^3.18.1",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/collections": "^3.10.7",
+        "@react-stately/list": "^3.10.5",
+        "@react-types/listbox": "^3.4.9",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/live-announcer": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/live-announcer/-/live-announcer-3.3.4.tgz",
+      "integrity": "sha512-w8lxs35QrRrn6pBNzVfyGOeqWdxeVKf9U6bXIVwhq7rrTqRULL8jqy8RJIMfIs1s8G5FpwWYjyBOjl2g5Cu1iA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@react-aria/menu": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/menu/-/menu-3.14.1.tgz",
+      "integrity": "sha512-BYliRb38uAzq05UOFcD5XkjA5foQoXRbcH3ZufBsc4kvh79BcP1PMW6KsXKGJ7dC/PJWUwCui6QL1kUg8PqMHA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/overlays": "^3.22.1",
+        "@react-aria/selection": "^3.18.1",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/collections": "^3.10.7",
+        "@react-stately/menu": "^3.7.1",
+        "@react-stately/tree": "^3.8.1",
+        "@react-types/button": "^3.9.4",
+        "@react-types/menu": "^3.9.9",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/overlays": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/overlays/-/overlays-3.22.1.tgz",
+      "integrity": "sha512-GHiFMWO4EQ6+j6b5QCnNoOYiyx1Gk8ZiwLzzglCI4q1NY5AG2EAmfU4Z1+Gtrf2S5Y0zHbumC7rs9GnPoGLUYg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/ssr": "^3.9.4",
+        "@react-aria/utils": "^3.24.1",
+        "@react-aria/visually-hidden": "^3.8.12",
+        "@react-stately/overlays": "^3.6.7",
+        "@react-types/button": "^3.9.4",
+        "@react-types/overlays": "^3.8.7",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/progress": {
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/@react-aria/progress/-/progress-3.4.13.tgz",
+      "integrity": "sha512-YBV9bOO5JzKvG8QCI0IAA00o6FczMgIDiK8Q9p5gKorFMatFUdRayxlbIPoYHMi+PguLil0jHgC7eOyaUcrZ0g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/label": "^3.7.8",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/progress": "^3.5.4",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/radio": {
+      "version": "3.10.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/radio/-/radio-3.10.4.tgz",
+      "integrity": "sha512-3fmoMcQtCpgjTwJReFjnvIE/C7zOZeCeWUn4JKDqz9s1ILYsC3Rk5zZ4q66tFn6v+IQnecrKT52wH6+hlVLwTA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/form": "^3.0.5",
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/label": "^3.7.8",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/radio": "^3.10.4",
+        "@react-types/radio": "^3.8.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/selection": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/selection/-/selection-3.18.1.tgz",
+      "integrity": "sha512-GSqN2jX6lh7v+ldqhVjAXDcrWS3N4IsKXxO6L6Ygsye86Q9q9Mq9twWDWWu5IjHD6LoVZLUBCMO+ENGbOkyqeQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/selection": "^3.15.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/slider": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmjs.org/@react-aria/slider/-/slider-3.7.8.tgz",
+      "integrity": "sha512-MYvPcM0K8jxEJJicUK2+WxUkBIM/mquBxOTOSSIL3CszA80nXIGVnLlCUnQV3LOUzpWtabbWaZokSPtGgOgQOw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/label": "^3.7.8",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/slider": "^3.5.4",
+        "@react-types/shared": "^3.23.1",
+        "@react-types/slider": "^3.7.3",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/spinbutton": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/@react-aria/spinbutton/-/spinbutton-3.6.7.tgz",
+      "integrity": "sha512-OCimp4yXoFIgh6WAMOls5DDDRDRO75ZFic3YA6wLWTRNHxo1Lj8S90i1A6pakY6bi4hdBCKmj4DnFSNKAw1iWg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/i18n": "^3.12.1",
+        "@react-aria/live-announcer": "^3.3.4",
+        "@react-aria/utils": "^3.25.1",
+        "@react-types/button": "^3.9.6",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/spinbutton/node_modules/@react-aria/i18n": {
+      "version": "3.12.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.12.1.tgz",
+      "integrity": "sha512-0q3gyogF9Ekah+9LOo6tcfshxsk2Ope+KdbtFHJVhznedMxn6RpHGcVur5ImbQ1dYafA5CmjBUGJW70b56+BGA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.5.5",
+        "@internationalized/message": "^3.1.4",
+        "@internationalized/number": "^3.5.3",
+        "@internationalized/string": "^3.2.3",
+        "@react-aria/ssr": "^3.9.5",
+        "@react-aria/utils": "^3.25.1",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/spinbutton/node_modules/@react-aria/ssr": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
+      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/spinbutton/node_modules/@react-aria/utils": {
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.1.tgz",
+      "integrity": "sha512-5Uj864e7T5+yj78ZfLnfHqmypLiqW2mN+nsdslog2z5ssunTqjolVeM15ootXskjISlZ7MojLpq97kIC4nlnAw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.5",
+        "@react-stately/utils": "^3.10.2",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/spinbutton/node_modules/@react-stately/utils": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
+      "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/spinbutton/node_modules/@react-types/button": {
+      "version": "3.9.6",
+      "resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.9.6.tgz",
+      "integrity": "sha512-8lA+D5JLbNyQikf8M/cPP2cji91aVTcqjrGpDqI7sQnaLFikM8eFR6l1ZWGtZS5MCcbfooko77ha35SYplSQvw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/spinbutton/node_modules/@react-types/shared": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.4.tgz",
+      "integrity": "sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/switch": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/switch/-/switch-3.6.4.tgz",
+      "integrity": "sha512-2nVqz4ZuJyof47IpGSt3oZRmp+EdS8wzeDYgf42WHQXrx4uEOk1mdLJ20+NnsYhj/2NHZsvXVrjBeKMjlMs+0w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/toggle": "^3.10.4",
+        "@react-stately/toggle": "^3.7.4",
+        "@react-types/switch": "^3.5.3",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/table": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/table/-/table-3.14.1.tgz",
+      "integrity": "sha512-WaPgQe4zQF5OaluO5rm+Y2nEoFR63vsLd4BT4yjK1uaFhKhDY2Zk+1SCVQvBLLKS4WK9dhP05nrNzT0vp/ZPOw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/grid": "^3.9.1",
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/live-announcer": "^3.3.4",
+        "@react-aria/utils": "^3.24.1",
+        "@react-aria/visually-hidden": "^3.8.12",
+        "@react-stately/collections": "^3.10.7",
+        "@react-stately/flags": "^3.0.3",
+        "@react-stately/table": "^3.11.8",
+        "@react-stately/virtualizer": "^3.7.1",
+        "@react-types/checkbox": "^3.8.1",
+        "@react-types/grid": "^3.2.6",
+        "@react-types/shared": "^3.23.1",
+        "@react-types/table": "^3.9.5",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/tabs": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/tabs/-/tabs-3.9.1.tgz",
+      "integrity": "sha512-S5v/0sRcOaSXaJYZuuy1ZVzYc7JD4sDyseG1133GjyuNjJOFHgoWMb+b4uxNIJbZxnLgynn/ZDBZSO+qU+fIxw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/selection": "^3.18.1",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/tabs": "^3.6.6",
+        "@react-types/shared": "^3.23.1",
+        "@react-types/tabs": "^3.3.7",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/textfield": {
+      "version": "3.14.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/textfield/-/textfield-3.14.5.tgz",
+      "integrity": "sha512-hj7H+66BjB1iTKKaFXwSZBZg88YT+wZboEXZ0DNdQB2ytzoz/g045wBItUuNi4ZjXI3P+0AOZznVMYadWBAmiA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/form": "^3.0.5",
+        "@react-aria/label": "^3.7.8",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/form": "^3.0.3",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/shared": "^3.23.1",
+        "@react-types/textfield": "^3.9.3",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle": {
+      "version": "3.10.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/toggle/-/toggle-3.10.6.tgz",
+      "integrity": "sha512-AGlbtB1b8grrtjbiW5Au0LKYzxR83RHbHhaUkFwajyYRGyuEzr3Y03OiveoPB+DayA8Gz3H1ZVmW++8JZQOWHw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.18.1",
+        "@react-aria/interactions": "^3.22.1",
+        "@react-aria/utils": "^3.25.1",
+        "@react-stately/toggle": "^3.7.6",
+        "@react-types/checkbox": "^3.8.3",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle/node_modules/@react-aria/focus": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.1.tgz",
+      "integrity": "sha512-N0Cy61WCIv+57mbqC7hiZAsB+3rF5n4JKabxUmg/2RTJL6lq7hJ5N4gx75ymKxkN8GnVDwt4pKZah48Wopa5jw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.22.1",
+        "@react-aria/utils": "^3.25.1",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle/node_modules/@react-aria/interactions": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.1.tgz",
+      "integrity": "sha512-5TLzQaDAQQ5C70yG8GInbO4wIylKY67RfTIIwQPGR/4n5OIjbUD8BOj3NuSsuZ/frUPaBXo1VEBBmSO23fxkjw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.5",
+        "@react-aria/utils": "^3.25.1",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle/node_modules/@react-aria/ssr": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
+      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle/node_modules/@react-aria/utils": {
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.1.tgz",
+      "integrity": "sha512-5Uj864e7T5+yj78ZfLnfHqmypLiqW2mN+nsdslog2z5ssunTqjolVeM15ootXskjISlZ7MojLpq97kIC4nlnAw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.5",
+        "@react-stately/utils": "^3.10.2",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle/node_modules/@react-stately/toggle": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.7.6.tgz",
+      "integrity": "sha512-xRZyrjNVu1VCd1xpg5RwmNYs9fXb+JHChoUaRcBmGCCjsPD0R5uR3iNuE17RXJtWS3/8o9IJVn90+/7NW7boOg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/utils": "^3.10.2",
+        "@react-types/checkbox": "^3.8.3",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle/node_modules/@react-stately/utils": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
+      "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle/node_modules/@react-types/checkbox": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.8.3.tgz",
+      "integrity": "sha512-f4c1mnLEt0iS1NMkyZXgT3q3AgcxzDk7w6MSONOKydcnh0xG5L2oefY14DhVDLkAuQS7jThlUFwiAs+MxiO3MA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle/node_modules/@react-types/shared": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/tooltip": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/tooltip/-/tooltip-3.7.4.tgz",
+      "integrity": "sha512-+XRx4HlLYqWY3fB8Z60bQi/rbWDIGlFUtXYbtoa1J+EyRWfhpvsYImP8qeeNO/vgjUtDy1j9oKa8p6App9mBMQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/utils": "^3.24.1",
+        "@react-stately/tooltip": "^3.4.9",
+        "@react-types/shared": "^3.23.1",
+        "@react-types/tooltip": "^3.4.9",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.24.1.tgz",
+      "integrity": "sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.4",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/visually-hidden": {
+      "version": "3.8.12",
+      "resolved": "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.8.12.tgz",
+      "integrity": "sha512-Bawm+2Cmw3Xrlr7ARzl2RLtKh0lNUdJ0eNqzWcyx4c0VHUAWtThmH5l+HRqFUGzzutFZVo89SAy40BAbd0gjVw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/calendar": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/calendar/-/calendar-3.5.1.tgz",
+      "integrity": "sha512-7l7QhqGUJ5AzWHfvZzbTe3J4t72Ht5BmhW4hlVI7flQXtfrmYkVtl3ZdytEZkkHmWGYZRW9b4IQTQGZxhtlElA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/calendar": "^3.4.6",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/checkbox": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/@react-stately/checkbox/-/checkbox-3.6.5.tgz",
+      "integrity": "sha512-IXV3f9k+LtmfQLE+DKIN41Q5QB/YBLDCB1YVx5PEdRp52S9+EACD5683rjVm8NVRDwjMi2SP6RnFRk7fVb5Azg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/form": "^3.0.3",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/checkbox": "^3.8.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/collections": {
+      "version": "3.10.7",
+      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.7.tgz",
+      "integrity": "sha512-KRo5O2MWVL8n3aiqb+XR3vP6akmHLhLWYZEmPKjIv0ghQaEebBTrN3wiEjtd6dzllv0QqcWvDLM1LntNfJ2TsA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/combobox": {
+      "version": "3.8.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/combobox/-/combobox-3.8.4.tgz",
+      "integrity": "sha512-iLVGvKRRz0TeJXZhZyK783hveHpYA6xovOSdzSD+WGYpiPXo1QrcrNoH3AE0Z2sHtorU+8nc0j58vh5PB+m2AA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.7",
+        "@react-stately/form": "^3.0.3",
+        "@react-stately/list": "^3.10.5",
+        "@react-stately/overlays": "^3.6.7",
+        "@react-stately/select": "^3.6.4",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/combobox": "^3.11.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/datepicker": {
+      "version": "3.9.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/datepicker/-/datepicker-3.9.4.tgz",
+      "integrity": "sha512-yBdX01jn6gq4NIVvHIqdjBUPo+WN8Bujc4OnPw+ZnfA4jI0eIgq04pfZ84cp1LVXW0IB0VaCu1AlQ/kvtZjfGA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@internationalized/string": "^3.2.3",
+        "@react-stately/form": "^3.0.3",
+        "@react-stately/overlays": "^3.6.7",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/datepicker": "^3.7.4",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/flags": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.0.3.tgz",
+      "integrity": "sha512-/ha7XFA0RZTQsbzSPwu3KkbNMgbvuM0GuMTYLTBWpgBrovBNTM+QqI/PfZTdHg8PwCYF4H5Y8gjdSpdulCvJFw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@react-stately/form": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@react-stately/form/-/form-3.0.3.tgz",
+      "integrity": "sha512-92YYBvlHEWUGUpXgIaQ48J50jU9XrxfjYIN8BTvvhBHdD63oWgm8DzQnyT/NIAMzdLnhkg7vP+fjG8LjHeyIAg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/grid": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/grid/-/grid-3.9.1.tgz",
+      "integrity": "sha512-LSVIcXO/cqwG0IgDSk2juDbpARBS1IzGnsTp/8vSOejMxq5MXrwxL5hUcqNczL8Ss6aLpELm42tCS0kPm3cMKw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.9",
+        "@react-stately/selection": "^3.16.1",
+        "@react-types/grid": "^3.2.8",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/grid/node_modules/@react-stately/collections": {
+      "version": "3.10.9",
+      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.9.tgz",
+      "integrity": "sha512-plyrng6hOQMG8LrjArMA6ts/DgWyXln3g90/hFNbqe/hdVYF53sDVsj8Jb+5LtoYTpiAlV6eOvy1XR0vPZUf8w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/grid/node_modules/@react-types/grid": {
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.2.8.tgz",
+      "integrity": "sha512-6PJrpukwMqlv3IhJSDkJuVbhHM8Oe6hd2supWqd9adMXrlSP7QHt9a8SgFcFblCCTx8JzUaA0PvY5sTudcEtOQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/grid/node_modules/@react-types/shared": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/list": {
+      "version": "3.10.5",
+      "resolved": "https://registry.npmjs.org/@react-stately/list/-/list-3.10.5.tgz",
+      "integrity": "sha512-fV9plO+6QDHiewsYIhboxcDhF17GO95xepC5ki0bKXo44gr14g/LSo/BMmsaMnV+1BuGdBunB05bO4QOIaigXA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.7",
+        "@react-stately/selection": "^3.15.1",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/menu": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/menu/-/menu-3.7.1.tgz",
+      "integrity": "sha512-mX1w9HHzt+xal1WIT2xGrTQsoLvDwuB2R1Er1MBABs//MsJzccycatcgV/J/28m6tO5M9iuFQQvLV+i1dCtodg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/overlays": "^3.6.7",
+        "@react-types/menu": "^3.9.9",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/overlays": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/@react-stately/overlays/-/overlays-3.6.7.tgz",
+      "integrity": "sha512-6zp8v/iNUm6YQap0loaFx6PlvN8C0DgWHNlrlzMtMmNuvjhjR0wYXVaTfNoUZBWj25tlDM81ukXOjpRXg9rLrw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/overlays": "^3.8.7",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/radio": {
+      "version": "3.10.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/radio/-/radio-3.10.4.tgz",
+      "integrity": "sha512-kCIc7tAl4L7Hu4Wt9l2jaa+MzYmAJm0qmC8G8yPMbExpWbLRu6J8Un80GZu+JxvzgDlqDyrVvyv9zFifwH/NkQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/form": "^3.0.3",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/radio": "^3.8.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/select": {
+      "version": "3.6.6",
+      "resolved": "https://registry.npmjs.org/@react-stately/select/-/select-3.6.6.tgz",
+      "integrity": "sha512-JEpBosWNSXRexE/iReATei1EiVdTIwOWlLcCGw6K7oC/5/f+OHMsh2Kkt/c/RzM/to3vgR+Wbbqwrb712AWgYQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/form": "^3.0.5",
+        "@react-stately/list": "^3.10.7",
+        "@react-stately/overlays": "^3.6.9",
+        "@react-types/select": "^3.9.6",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/select/node_modules/@react-stately/collections": {
+      "version": "3.10.9",
+      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.9.tgz",
+      "integrity": "sha512-plyrng6hOQMG8LrjArMA6ts/DgWyXln3g90/hFNbqe/hdVYF53sDVsj8Jb+5LtoYTpiAlV6eOvy1XR0vPZUf8w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/select/node_modules/@react-stately/form": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@react-stately/form/-/form-3.0.5.tgz",
+      "integrity": "sha512-J3plwJ63HQz109OdmaTqTA8Qhvl3gcYYK7DtgKyNP6mc/Me2Q4tl2avkWoA+22NRuv5m+J8TpBk4AVHUEOwqeQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/select/node_modules/@react-stately/list": {
+      "version": "3.10.7",
+      "resolved": "https://registry.npmjs.org/@react-stately/list/-/list-3.10.7.tgz",
+      "integrity": "sha512-W5PG7uG5GQV2Q59vXJE7QLKHZIoUNEx+JmHrBUCMKUgyngSpKIIEDR/R/C1b6ZJ9jMqqZA68Zlnd5iK1/mBi1A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.9",
+        "@react-stately/selection": "^3.16.1",
+        "@react-stately/utils": "^3.10.2",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/select/node_modules/@react-stately/overlays": {
+      "version": "3.6.9",
+      "resolved": "https://registry.npmjs.org/@react-stately/overlays/-/overlays-3.6.9.tgz",
+      "integrity": "sha512-4chfyzKw7P2UEainm0yzjUgYwG1ovBejN88eTrn+O62x5huuMCwe0cbMxmYh4y7IhRFSee3jIJd0SP0u/+i39w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/utils": "^3.10.2",
+        "@react-types/overlays": "^3.8.9",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/select/node_modules/@react-stately/utils": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
+      "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/select/node_modules/@react-types/overlays": {
+      "version": "3.8.9",
+      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.9.tgz",
+      "integrity": "sha512-9ni9upQgXPnR+K9cWmbYWvm3ll9gH8P/XsEZprqIV5zNLMF334jADK48h4jafb1X9RFnj0WbHo6BqcSObzjTig==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/select/node_modules/@react-types/select": {
+      "version": "3.9.6",
+      "resolved": "https://registry.npmjs.org/@react-types/select/-/select-3.9.6.tgz",
+      "integrity": "sha512-cVSFR0eJLup/ht1Uto+y8uyLmHO89J6wNh65SIHb3jeVz9oLBAedP3YNI2qB+F9qFMUcA8PBSLXIIuT6gXzLgQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/select/node_modules/@react-types/shared": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/selection": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/selection/-/selection-3.16.1.tgz",
+      "integrity": "sha512-qmnmYaXY7IhhzmIiInec1a/yPxlPSBHka6vrWddvt0S6zN7FU5cv6sm69ONUwYwLKSoaNHgOGvZhmsTzyV0O2A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.9",
+        "@react-stately/utils": "^3.10.2",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/selection/node_modules/@react-stately/collections": {
+      "version": "3.10.9",
+      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.9.tgz",
+      "integrity": "sha512-plyrng6hOQMG8LrjArMA6ts/DgWyXln3g90/hFNbqe/hdVYF53sDVsj8Jb+5LtoYTpiAlV6eOvy1XR0vPZUf8w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/selection/node_modules/@react-stately/utils": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
+      "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/selection/node_modules/@react-types/shared": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/slider": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/slider/-/slider-3.5.4.tgz",
+      "integrity": "sha512-Jsf7K17dr93lkNKL9ij8HUcoM1sPbq8TvmibD6DhrK9If2lje+OOL8y4n4qreUnfMT56HCAeS9wCO3fg3eMyrw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/shared": "^3.23.1",
+        "@react-types/slider": "^3.7.3",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/table": {
+      "version": "3.11.8",
+      "resolved": "https://registry.npmjs.org/@react-stately/table/-/table-3.11.8.tgz",
+      "integrity": "sha512-EdyRW3lT1/kAVDp5FkEIi1BQ7tvmD2YgniGdLuW/l9LADo0T+oxZqruv60qpUS6sQap+59Riaxl91ClDxrJnpg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.7",
+        "@react-stately/flags": "^3.0.3",
+        "@react-stately/grid": "^3.8.7",
+        "@react-stately/selection": "^3.15.1",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/grid": "^3.2.6",
+        "@react-types/shared": "^3.23.1",
+        "@react-types/table": "^3.9.5",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tabs": {
+      "version": "3.6.6",
+      "resolved": "https://registry.npmjs.org/@react-stately/tabs/-/tabs-3.6.6.tgz",
+      "integrity": "sha512-sOLxorH2uqjAA+v1ppkMCc2YyjgqvSGeBDgtR/lyPSDd4CVMoTExszROX2dqG0c8il9RQvzFuufUtQWMY6PgSA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/list": "^3.10.5",
+        "@react-types/shared": "^3.23.1",
+        "@react-types/tabs": "^3.3.7",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/toggle": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.7.4.tgz",
+      "integrity": "sha512-CoYFe9WrhLkDP4HGDpJYQKwfiYCRBAeoBQHv+JWl5eyK61S8xSwoHsveYuEZ3bowx71zyCnNAqWRrmNOxJ4CKA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/checkbox": "^3.8.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tooltip": {
+      "version": "3.4.9",
+      "resolved": "https://registry.npmjs.org/@react-stately/tooltip/-/tooltip-3.4.9.tgz",
+      "integrity": "sha512-P7CDJsdoKarz32qFwf3VNS01lyC+63gXpDZG31pUu+EO5BeQd4WKN/AH1Beuswpr4GWzxzFc1aXQgERFGVzraA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/overlays": "^3.6.7",
+        "@react-types/tooltip": "^3.4.9",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tree": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/tree/-/tree-3.8.1.tgz",
+      "integrity": "sha512-LOdkkruJWch3W89h4B/bXhfr0t0t1aRfEp+IMrrwdRAl23NaPqwl5ILHs4Xu5XDHqqhg8co73pHrJwUyiTWEjw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.7",
+        "@react-stately/selection": "^3.15.1",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.1.tgz",
+      "integrity": "sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/virtualizer": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/virtualizer/-/virtualizer-3.7.1.tgz",
+      "integrity": "sha512-voHgE6EQ+oZaLv6u2umKxakvIKNkCQuUihqKACTjdslp7SJh4Mvs3oLBI0hf0JOh+rCcFIKDvQtFwy1fXFRYBA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/accordion": {
+      "version": "3.0.0-alpha.21",
+      "resolved": "https://registry.npmjs.org/@react-types/accordion/-/accordion-3.0.0-alpha.21.tgz",
+      "integrity": "sha512-cbE06jH/ZoI+1898xd7ocQ/A/Rtkz8wTJAVOYgc8VRY1SYNQ/XZTGH5T6dD6aERAmiDwL/kjD7xhsE80DyaEKA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/breadcrumbs": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/@react-types/breadcrumbs/-/breadcrumbs-3.7.5.tgz",
+      "integrity": "sha512-lV9IDYsMiu2TgdMIjEmsOE0YWwjb3jhUNK1DCZZfq6uWuiHLgyx2EncazJBUWSjHJ4ta32j7xTuXch+8Ai6u/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/link": "^3.5.5",
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/button": {
+      "version": "3.9.4",
+      "resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.9.4.tgz",
+      "integrity": "sha512-raeQBJUxBp0axNF74TXB8/H50GY8Q3eV6cEKMbZFP1+Dzr09Ngv0tJBeW0ewAxAguNH5DRoMUAUGIXtSXskVdA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/calendar": {
+      "version": "3.4.6",
+      "resolved": "https://registry.npmjs.org/@react-types/calendar/-/calendar-3.4.6.tgz",
+      "integrity": "sha512-WSntZPwtvsIYWvBQRAPvuCn55UTJBZroTvX0vQvWykJRQnPAI20G1hMQ3dNsnAL+gLZUYxBXn66vphmjUuSYew==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/checkbox": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.8.1.tgz",
+      "integrity": "sha512-5/oVByPw4MbR/8QSdHCaalmyWC71H/QGgd4aduTJSaNi825o+v/hsN2/CH7Fq9atkLKsC8fvKD00Bj2VGaKriQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/combobox": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/@react-types/combobox/-/combobox-3.11.1.tgz",
+      "integrity": "sha512-UNc3OHt5cUt5gCTHqhQIqhaWwKCpaNciD8R7eQazmHiA9fq8ROlV+7l3gdNgdhJbTf5Bu/V5ISnN7Y1xwL3zqQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/datepicker": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@react-types/datepicker/-/datepicker-3.7.4.tgz",
+      "integrity": "sha512-ZfvgscvNzBJpYyVWg3nstJtA/VlWLwErwSkd1ivZYam859N30w8yH+4qoYLa6FzWLCFlrsRHyvtxlEM7lUAt5A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@react-types/calendar": "^3.4.6",
+        "@react-types/overlays": "^3.8.7",
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/dialog": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@react-types/dialog/-/dialog-3.5.12.tgz",
+      "integrity": "sha512-JmpQbSpXltqEyYfEwoqDolABIiojeExkqolHNdQlayIsfFuSxZxNwXZPOpz58Ri/iwv21JP7K3QF0Gb2Ohxl9w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.9",
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/dialog/node_modules/@react-types/overlays": {
+      "version": "3.8.9",
+      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.9.tgz",
+      "integrity": "sha512-9ni9upQgXPnR+K9cWmbYWvm3ll9gH8P/XsEZprqIV5zNLMF334jADK48h4jafb1X9RFnj0WbHo6BqcSObzjTig==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/dialog/node_modules/@react-types/shared": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/grid": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.2.6.tgz",
+      "integrity": "sha512-XfHenL2jEBUYrhKiPdeM24mbLRXUn79wVzzMhrNYh24nBwhsPPpxF+gjFddT3Cy8dt6tRInfT6pMEu9nsXwaHw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/link": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/@react-types/link/-/link-3.5.5.tgz",
+      "integrity": "sha512-G6P5WagHDR87npN7sEuC5IIgL1GsoY4WFWKO4734i2CXRYx24G9P0Su3AX4GA3qpspz8sK1AWkaCzBMmvnunfw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/listbox": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@react-types/listbox/-/listbox-3.5.1.tgz",
+      "integrity": "sha512-n5bOgD9lgfK1qaLtag9WPnu151SwXBCNn/OgGY/Br9mWRl+nPUEYtFcPX+2VCld7uThf54kwrTmzlFnaraIlcw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/listbox/node_modules/@react-types/shared": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/menu": {
+      "version": "3.9.9",
+      "resolved": "https://registry.npmjs.org/@react-types/menu/-/menu-3.9.9.tgz",
+      "integrity": "sha512-FamUaPVs1Fxr4KOMI0YcR2rYZHoN7ypGtgiEiJ11v/tEPjPPGgeKDxii0McCrdOkjheatLN1yd2jmMwYj6hTDg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.7",
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/overlays": {
+      "version": "3.8.7",
+      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.7.tgz",
+      "integrity": "sha512-zCOYvI4at2DkhVpviIClJ7bRrLXYhSg3Z3v9xymuPH3mkiuuP/dm8mUCtkyY4UhVeUTHmrQh1bzaOP00A+SSQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/progress": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@react-types/progress/-/progress-3.5.4.tgz",
+      "integrity": "sha512-JNc246sTjasPyx5Dp7/s0rp3Bz4qlu4LrZTulZlxWyb53WgBNL7axc26CCi+I20rWL9+c7JjhrRxnLl/1cLN5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/radio": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@react-types/radio/-/radio-3.8.1.tgz",
+      "integrity": "sha512-bK0gio/qj1+0Ldu/3k/s9BaOZvnnRgvFtL3u5ky479+aLG5qf1CmYed3SKz8ErZ70JkpuCSrSwSCFf0t1IHovw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/select": {
+      "version": "3.9.4",
+      "resolved": "https://registry.npmjs.org/@react-types/select/-/select-3.9.4.tgz",
+      "integrity": "sha512-xI7dnOW2st91fPPcv6hdtrTdcfetYiqZuuVPZ5TRobY7Q10/Zqqe/KqtOw1zFKUj9xqNJe4Ov3xP5GSdcO60Eg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.23.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.23.1.tgz",
+      "integrity": "sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/slider": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/@react-types/slider/-/slider-3.7.5.tgz",
+      "integrity": "sha512-bRitwQRQjQoOcKEdPMljnvm474dwrmsc6pdsVQDh/qynzr+KO9IHuYc3qPW53WVE2hMQJDohlqtCAWQXWQ5Vcg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/slider/node_modules/@react-types/shared": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/switch": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/@react-types/switch/-/switch-3.5.5.tgz",
+      "integrity": "sha512-SZx1Bd+COhAOs/RTifbZG+uq/llwba7VAKx7XBeX4LeIz1dtguy5bigOBgFTMQi4qsIVCpybSWEEl+daj4XFPw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.24.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/switch/node_modules/@react-types/shared": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/table": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/@react-types/table/-/table-3.9.5.tgz",
+      "integrity": "sha512-fgM2j9F/UR4Anmd28CueghCgBwOZoCVyN8fjaIFPd2MN4gCwUUfANwxLav65gZk4BpwUXGoQdsW+X50L3555mg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/grid": "^3.2.6",
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/tabs": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@react-types/tabs/-/tabs-3.3.7.tgz",
+      "integrity": "sha512-ZdLe5xOcFX6+/ni45Dl2jO0jFATpTnoSqj6kLIS/BYv8oh0n817OjJkLf+DS3CLfNjApJWrHqAk34xNh6nRnEg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/textfield": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@react-types/textfield/-/textfield-3.9.3.tgz",
+      "integrity": "sha512-DoAY6cYOL0pJhgNGI1Rosni7g72GAt4OVr2ltEx2S9ARmFZ0DBvdhA9lL2nywcnKMf27PEJcKMXzXc10qaHsJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/tooltip": {
+      "version": "3.4.9",
+      "resolved": "https://registry.npmjs.org/@react-types/tooltip/-/tooltip-3.4.9.tgz",
+      "integrity": "sha512-wZ+uF1+Zc43qG+cOJzioBmLUNjRa7ApdcT0LI1VvaYvH5GdfjzUJOorLX9V/vAci0XMJ50UZ+qsh79aUlw2yqg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.7",
+        "@react-types/shared": "^3.23.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tediousjs/connection-string": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@tediousjs/connection-string/-/connection-string-0.5.0.tgz",
+      "integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
+      "license": "MIT"
+    },
+    "node_modules/@tootallnate/once": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@turf/along": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/along/-/along-7.1.0.tgz",
+      "integrity": "sha512-WLgBZJ/B6CcASF6WL7M+COtHlVP0hBrMbrtKyF7KBlicwRuijJZXDtEQA5oLgr+k1b2HqGN+UqH2A0/E719enQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bearing": "^7.1.0",
+        "@turf/destination": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/angle": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/angle/-/angle-7.1.0.tgz",
+      "integrity": "sha512-YMHEV/YrARsWgWoQuXEWrQMsvB8z67nTMw2eiLZ883V7jwkhWQGvCW6W+/mGgsWQdHppjCZNcKryryhD2GRWVA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bearing": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/rhumb-bearing": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/area": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/area/-/area-7.1.0.tgz",
+      "integrity": "sha512-w91FEe02/mQfMPRX2pXua48scFuKJ2dSVMF2XmJ6+BJfFiCPxp95I3+Org8+ZsYv93CDNKbf0oLNEPnuQdgs2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/bbox": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-7.1.0.tgz",
+      "integrity": "sha512-PdWPz9tW86PD78vSZj2fiRaB8JhUHy6piSa/QXb83lucxPK+HTAdzlDQMTKj5okRCU8Ox/25IR2ep9T8NdopRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/bbox-clip": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/bbox-clip/-/bbox-clip-7.1.0.tgz",
+      "integrity": "sha512-PhZubKCzF/afwStUzODqOJluiCbCw244lCtVhXA9F+Pgkhvk8KvbFdgpPquOZ45OwuktrchSB28BrBkSBiadHw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/bbox-polygon": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/bbox-polygon/-/bbox-polygon-7.1.0.tgz",
+      "integrity": "sha512-fvZB09ErCZOVlWVDop836hmpKaGUmfXnR9naMhS73A/8nn4M3hELbQtMv2R8gXj7UakXCuxS/i9erdpDFZ2O+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/bearing": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/bearing/-/bearing-7.1.0.tgz",
+      "integrity": "sha512-X5lackrZ6FW+YhgjWxwVFRgWD1j4xm4t5VvE6EE6v/1PVaHQ5OCjf6u1oaLx5LSG+gaHUhjTlAHrn9MYPFaeTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/bezier-spline": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/bezier-spline/-/bezier-spline-7.1.0.tgz",
+      "integrity": "sha512-bhBY70bcVYJEosuW7B/TFtnE5rmPTTpxmJvljhGC0eyM84oNVv7apDBuseb5KdlTOOBIvdD9nIE4qV8lmplp6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-clockwise": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-clockwise/-/boolean-clockwise-7.1.0.tgz",
+      "integrity": "sha512-H5DYno+gHwZx+VaiC8DUBZXZQlxYecdSvqCfCACWi1uMsKvlht/O+xy65hz2P57lk2smlcV+1ETFVxJlEZduYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-concave": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-concave/-/boolean-concave-7.1.0.tgz",
+      "integrity": "sha512-IFCN25DI+hvngxIsv4+MPuRJQRl/Lz/xnZgpH82leCn4Jqn5wW7KqKFMz7G4GoKK+93cK5/6ioAxY7hVWBXxJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-contains": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-contains/-/boolean-contains-7.1.0.tgz",
+      "integrity": "sha512-ldy4j1/RVChYTYjEb4wWaE/JyF1jA87WpsB4eVLic6OcAYJGs7POF1kfKbcdkJJiRBmhI3CXNA+u+m9y4Z/j3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/boolean-point-on-line": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-crosses": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-crosses/-/boolean-crosses-7.1.0.tgz",
+      "integrity": "sha512-LK8UM3AENycuGinLCDaL0QSznGMnD0XsjFDGnY4KehshiL5Zd8ZsPyKmHOPygUJT9DWeH69iLx459lOc+5Vj2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/line-intersect": "^7.1.0",
+        "@turf/polygon-to-line": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-disjoint": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-disjoint/-/boolean-disjoint-7.1.0.tgz",
+      "integrity": "sha512-JapOG03kOCoGeYMWgTQjEifhr1nUoK4Os2cX0iC5X9kvZF4qCHeruX8/rffBQDx7PDKQKusSTXq8B1ISFi0hOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/line-intersect": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/polygon-to-line": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-equal": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-equal/-/boolean-equal-7.1.0.tgz",
+      "integrity": "sha512-deghtFMApc7fNsdXtZdgYR4gsU+TVfowcv666nrvZbPPsXL6NTYGBhDFmYXsJ8gPTCGT9uT0WXppdgT8diWOxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clean-coords": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "geojson-equality-ts": "^1.0.2",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-intersects": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-intersects/-/boolean-intersects-7.1.0.tgz",
+      "integrity": "sha512-gpksWbb0RT+Z3nfqRfoACY3KEFyv2BPaxJ3L76PH67DhHZviq3Nfg85KYbpuhS64FSm+9tXe4IaKn6EjbHo20g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-disjoint": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-overlap": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-overlap/-/boolean-overlap-7.1.0.tgz",
+      "integrity": "sha512-mJRN0X8JiPm8eDZk5sLvIrsP03A2GId6ijx4VgSE1AvHwV6qB561KlUbWxga2AScocIfv/y/qd2OCs+/TQSZcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/line-intersect": "^7.1.0",
+        "@turf/line-overlap": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "geojson-equality-ts": "^1.0.2",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-parallel": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-parallel/-/boolean-parallel-7.1.0.tgz",
+      "integrity": "sha512-tA84Oux0X91CxUc6c/lZph5W9wUZGNT4fxFOg5Gp1IMTSwtxSYL1LMvKsr/VmMnwdOUkNcqAgU06+t4wBLtDfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clean-coords": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/line-segment": "^7.1.0",
+        "@turf/rhumb-bearing": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-point-in-polygon": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.1.0.tgz",
+      "integrity": "sha512-mprVsyIQ+ijWTZwbnO4Jhxu94ZW2M2CheqLiRTsGJy0Ooay9v6Av5/Nl3/Gst7ZVXxPqMeMaFYkSzcTc87AKew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "point-in-polygon-hao": "^1.1.0",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-point-on-line": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-point-on-line/-/boolean-point-on-line-7.1.0.tgz",
+      "integrity": "sha512-Kd83EjeTyY4kVMAhcW3Lb8aChwh24BUIhmpE9Or8M+ETNsFGzn9M7qtIySJHLRzKAL3letvWSKXKQPuK1AhAzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-touches": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-touches/-/boolean-touches-7.1.0.tgz",
+      "integrity": "sha512-qN4LCs3RfVtNAAdn5GpsUFBqoZyAaK9UzSnGSh67GP9sy5M8MEHwM/HAJ5zGWJqQADrczI3U6BRWGLcGfGSz3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/boolean-point-on-line": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-valid": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-valid/-/boolean-valid-7.1.0.tgz",
+      "integrity": "sha512-zq1QCfQEyn+piHlvxxDifjmsJn2xl53i4mnKFYdMQI/i09XiX+Fi/MVM3i2hf3D5AsEPsud8Tk7C7rWNCm4nVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/boolean-crosses": "^7.1.0",
+        "@turf/boolean-disjoint": "^7.1.0",
+        "@turf/boolean-overlap": "^7.1.0",
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/boolean-point-on-line": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/line-intersect": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "geojson-polygon-self-intersections": "^1.2.1",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/boolean-within": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-within/-/boolean-within-7.1.0.tgz",
+      "integrity": "sha512-pgXgKCzYHssADQ1nClB1Q9aWI/dE1elm2jy3B5X59XdoFXKrKDZA+gCHYOYgp2NGO/txzVfl3UKvnxIj54Fa4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/boolean-point-on-line": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/buffer": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/buffer/-/buffer-7.1.0.tgz",
+      "integrity": "sha512-QM3JiCMYA19k5ouO8wJtvICX3Y8XntxVpDfHSKhFFidZcCkMTR2PWWOpwS6EoL3t75rSKw/FOLIPLZGtIu963w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/center": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/jsts": "^2.7.1",
+        "@turf/meta": "^7.1.0",
+        "@turf/projection": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "d3-geo": "1.7.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/center": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/center/-/center-7.1.0.tgz",
+      "integrity": "sha512-p9AvBMwNZmRg65kU27cGKHAUQnEcdz8Y7f/i5DvaMfm4e8zmawr+hzPKXaUpUfiTyLs8Xt2W9vlOmNGyH+6X3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/center-mean": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/center-mean/-/center-mean-7.1.0.tgz",
+      "integrity": "sha512-NQZB1LUVsyAD+p0+D4huzX2XVnfVx1yEEI9EX602THmi+g+nkge4SK9OMV11ov/Tv8JJ6aVNVPo/cy1vm/LCIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/center-median": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/center-median/-/center-median-7.1.0.tgz",
+      "integrity": "sha512-jx4/Ql5+v41Cd0J/gseNCUbLTzWUT2LUaiXn8eFWDrvmEgqHIx7KJcGcJd5HzV+9zJwng4AXxyh5NMvUR0NjwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/center-mean": "^7.1.0",
+        "@turf/centroid": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/center-of-mass": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/center-of-mass/-/center-of-mass-7.1.0.tgz",
+      "integrity": "sha512-j38oBlj7LBoCjZbrIo8EoHVGhk7UQmMLQ1fe8ZPAF9pd05XEL1qxyHKZKdQ/deGISiaEhXCyfLNrKAHAuy25RA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/centroid": "^7.1.0",
+        "@turf/convex": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/centroid": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/centroid/-/centroid-7.1.0.tgz",
+      "integrity": "sha512-1Y1b2l+ZB1CZ+ITjUCsGqC4/tSjwm/R4OUfDztVqyyCq/VvezkLmTNqvXTGXgfP0GXkpv68iCfxF5M7QdM5pJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/circle": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/circle/-/circle-7.1.0.tgz",
+      "integrity": "sha512-6qhF1drjwH0Dg3ZB9om1JkWTJfAqBcbtIrAj5UPlrAeHP87hGoCO2ZEsFEAL9Q18vntpivT89Uho/nqQUjJhYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/destination": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/clean-coords": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/clean-coords/-/clean-coords-7.1.0.tgz",
+      "integrity": "sha512-q1U8UbRVL5cRdwOlNjD8mad8pWjFGe0s4ihg1pSiVNq7i47WASJ3k20yZiUFvuAkyNjV0rZ/A7Jd7WzjcierFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/clone": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-7.1.0.tgz",
+      "integrity": "sha512-5R9qeWvL7FDdBIbEemd0eCzOStr09oburDvJ1hRiPCFX6rPgzcZBQ0gDmZzoF4AFcNLb5IwknbLZjVLaUGWtFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/clusters": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/clusters/-/clusters-7.1.0.tgz",
+      "integrity": "sha512-7CY3Ai+5V6q2O9/IgqLpJQrmrTy7aUJjTW1iRan8Tz3WixvxyJHeS3iyRy8Oc0046chQIaHLtyTgKVt2QdsPSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/clusters-dbscan": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/clusters-dbscan/-/clusters-dbscan-7.1.0.tgz",
+      "integrity": "sha512-BmrBTOEaKN5FIED6b3yb3V3ejfK0A2Q3pT9/ji3mcRLJiBaRGeiN5V6gtGXe7PeMYdoqhHykU5Ye2uUtREWRdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clone": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "rbush": "^3.0.1",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/clusters-kmeans": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/clusters-kmeans/-/clusters-kmeans-7.1.0.tgz",
+      "integrity": "sha512-M8cCqR6iE1jDSUF/UU9QdPUFrobZS2fo59TfF1IRHZ2G1EjbcK4GzZcUfmQS6DZraGudYutpMYIuNdm1dPMqdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "skmeans": "0.9.7",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/collect": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/collect/-/collect-7.1.0.tgz",
+      "integrity": "sha512-6indMWLiKeBh4AsioNeFeFnO0k9U5CBsWAFEje6tOEFI4c+P7LF9mNA9z91H8KkrhegR9XNO5Vm2rmdY63aYXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "rbush": "^3.0.1",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/combine": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/combine/-/combine-7.1.0.tgz",
+      "integrity": "sha512-Xl7bGKKjgzIq2T/IemS6qnIykyuxU6cMxKtz+qLeWJGoNww/BllwxXePSV+dWRPXZTFFj96KIhBXAW0aUjAQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/concave": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/concave/-/concave-7.1.0.tgz",
+      "integrity": "sha512-aSid53gYRee4Tjc4pfeI3KI+RoBUnL/hRMilxIPduagTgZZS+cvvk01OQWBKm5UTVfHRGuy0XIqnK8y9RFinDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clone": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/tin": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "topojson-client": "3.x",
+        "topojson-server": "3.x",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/convex": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/convex/-/convex-7.1.0.tgz",
+      "integrity": "sha512-w9fUMZYE36bLrEWEj7L7aVMCB7NBtr2o8G+avRvUIwF4DPqbtcjlcZE9EEBfq44uYdn+/Pke6Iq42T/zyD/cpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "concaveman": "^1.2.1",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/destination": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/destination/-/destination-7.1.0.tgz",
+      "integrity": "sha512-97XuvB0iaAiMg86hrnZ529WwP44TQAA9mmI5PMlchACiA4LFrEtWjjDzvO6234coieoqhrw6dZYcJvd5O2PwrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/difference": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/difference/-/difference-7.1.0.tgz",
+      "integrity": "sha512-+JVzdskICQ8ULKQ9CpWUM5kBvoXxN4CO78Ez/Ki3/7NXl7+HM/nb12B0OyM8hkJchpb8TsOi0YwyJiKMqEpTBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "polygon-clipping": "^0.15.3",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/dissolve": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/dissolve/-/dissolve-7.1.0.tgz",
+      "integrity": "sha512-fyOnCSYVUZ8SF9kt9ROnQYlkJTE0hpWSoWwbMZQCAR7oVZVPiuPq7eIbzTP+k5jzEAnofsqoGs5qVDTjHcWMiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/flatten": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "polygon-clipping": "^0.15.3",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/distance": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/distance/-/distance-7.1.0.tgz",
+      "integrity": "sha512-hhNHhxCHB3ddzAGCNY4BtE29OZh+DAJPvUapQz+wOjISnlwvMcwLKvslgHWSYF536QDVe/93FEU2q67+CsZTPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/distance-weight": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/distance-weight/-/distance-weight-7.1.0.tgz",
+      "integrity": "sha512-8m6s4y8Yyt6r3itf44yAJjXC+62UkrkhOpskIfaE0lHcBcvZz9wjboHoBf3bS4l/42E4StcanbFZdjOpODAdZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/centroid": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/ellipse": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/ellipse/-/ellipse-7.1.0.tgz",
+      "integrity": "sha512-AfOahUmStDExWGPg8ZWxxkgom+fdJs7Mn9DzZH+fV/uZ+je1bLQpbPCUu9/ev6u/HhbYGl4VAL/CeQzjOyy6LQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/rhumb-destination": "^7.1.0",
+        "@turf/transform-rotate": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/envelope": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/envelope/-/envelope-7.1.0.tgz",
+      "integrity": "sha512-WeLQse9wuxsxhzSqrJA6Ha7rLWnLKgdKY9cfxmJKHSpgqcJyNk60m7+T3UpI/nkGwpfbpeyB3EGC1EWPbxiDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/bbox-polygon": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/explode": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/explode/-/explode-7.1.0.tgz",
+      "integrity": "sha512-To+GUbU6HtcHZ8S0w/dw1EbdQIOCXALTr6Ug5/IFg8hIBMJelDpVr3Smwy8uqhDRFinY2eprBwQnDPcd10eCqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/flatten": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/flatten/-/flatten-7.1.0.tgz",
+      "integrity": "sha512-Kb23pqEarcLsdBqnQcK0qTrSMiWNTVb9tOFrNlZc66DIhDLAdpOKG4eqk00CMoUzWTixlnawDgJRqcStRrR4WA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/flip": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/flip/-/flip-7.1.0.tgz",
+      "integrity": "sha512-vac73W8WblzzNFanzWYLBzWDIcqc5xczOrtEO07RDEiKEI3Heo0471Jed3v9W506uuOX6/HAiCjXbRjTLjiLfw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/geojson-rbush": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/geojson-rbush/-/geojson-rbush-7.1.0.tgz",
+      "integrity": "sha512-j1C7Ohlxa1z644bNOpgibcFGaDLgLXGLOzwF1tfQaP5y7E4PJQUXL0DWIgNb3Ke7gZC05LPHM25a5TRReUfFBQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "rbush": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/great-circle": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/great-circle/-/great-circle-7.1.0.tgz",
+      "integrity": "sha512-92q5fqUp5oW+FYekUIrUVR5PZBWbOV6NHKHPIiNahiPvtkpZItbbjoO+tGn5+2i8mxZP9FGOthayJe4V0a1xkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/helpers": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.1.0.tgz",
+      "integrity": "sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/hex-grid": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/hex-grid/-/hex-grid-7.1.0.tgz",
+      "integrity": "sha512-I+Apx0smOPkMzaS5HHL44YOxSkSUvrz+wtSIETsDFWWLT2xKNkaaEcYU5MkgSoEfQsj082M7EkOIIpocXlA3kg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/intersect": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/interpolate": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/interpolate/-/interpolate-7.1.0.tgz",
+      "integrity": "sha512-VWec1OW9gHZLPS3yYkUXAHKMGQuYO4aqh8WCltT7Ym4efrKqkSOE5T+mBqO68QgcL8nY4kiNa8lxwXd0SfXDSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/centroid": "^7.1.0",
+        "@turf/clone": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/hex-grid": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/point-grid": "^7.1.0",
+        "@turf/square-grid": "^7.1.0",
+        "@turf/triangle-grid": "^7.1.0",
+        "@types/geojson": "^7946.0.10"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/intersect": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/intersect/-/intersect-7.1.0.tgz",
+      "integrity": "sha512-T0VhI6yhptX9EoMsuuBETyqV+edyq31SUC8bfuM6kdJ5WwJ0EvUfQoC+3bhMtCOn60lHawrUuGBgW+vCO8KGMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "polygon-clipping": "^0.15.3",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/invariant": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.1.0.tgz",
+      "integrity": "sha512-OCLNqkItBYIP1nE9lJGuIUatWGtQ4rhBKAyTfFu0z8npVzGEYzvguEeof8/6LkKmTTEHW53tCjoEhSSzdRh08Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/isobands": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/isobands/-/isobands-7.1.0.tgz",
+      "integrity": "sha512-iMLTOP/K5C05AttF4N1WeV+KrY4O5VWW/abO0N86XCWh1OeqmIUgqIBKEmhDzttAqC0UK2YrUfj0lI1Ez1fYZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/area": "^7.1.0",
+        "@turf/bbox": "^7.1.0",
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/explode": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "marchingsquares": "^1.3.3",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/isolines": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/isolines/-/isolines-7.1.0.tgz",
+      "integrity": "sha512-V6QTHXBT5ZsL3s9ZVBJgHYtz3gCFKqNnQLysNE02LE0fVVqaSao3sFrcpghmdDxf0hBCDK8lZVvyRGO6o32LHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "marchingsquares": "^1.3.3",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/jsts": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@turf/jsts/-/jsts-2.7.1.tgz",
+      "integrity": "sha512-+nwOKme/aUprsxnLSfr2LylV6eL6T1Tuln+4Hl92uwZ8FrmjDRCH5Bi1LJNVfWCiYgk8+5K+t2zDphWNTsIFDA==",
+      "dev": true,
+      "license": "(EDL-1.0 OR EPL-1.0)",
+      "dependencies": {
+        "jsts": "2.7.1"
+      }
+    },
+    "node_modules/@turf/kinks": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/kinks/-/kinks-7.1.0.tgz",
+      "integrity": "sha512-KKLYUsyJPU17fODwA81mhHzFYGQYocdbk9NxDPCcdRHvxzM8t95lptkGx/2k/9rXBs1DK7NmyzI4m7zDO0DK7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/length": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/length/-/length-7.1.0.tgz",
+      "integrity": "sha512-wUJj9WLKEudG1ngNao2ZwD+Dt6UkvWIbubuJ6lR6FndFDL3iezFhNGy0IXS+0xH9kXi2apiTnM9Vk5+i8BTEvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/line-arc": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/line-arc/-/line-arc-7.1.0.tgz",
+      "integrity": "sha512-9/bM34PozTyJ5FXXPAzl/j0RpcTImgMFJZ0WhH0pZZEZRum6P0rJnENt2E2qI441zeozQ9H6X5DCiJogDmRUEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/circle": "^7.1.0",
+        "@turf/destination": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/line-chunk": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/line-chunk/-/line-chunk-7.1.0.tgz",
+      "integrity": "sha512-1lIUfqAQvCWAuUNC2ip8UYmM5kDltXOidLPW45Ee1OAIKYGBeFNtjwnxc0mQ40tnfTXclTYLDdOOP9LShspT9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/length": "^7.1.0",
+        "@turf/line-slice-along": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/line-intersect": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/line-intersect/-/line-intersect-7.1.0.tgz",
+      "integrity": "sha512-JI3dvOsAoCqd4vUJ134FIzgcC42QpC/tBs+b4OJoxWmwDek3REv4qGaZY6wCg9X4hFSlCKFcnhMIQQZ/n720Qg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "sweepline-intersections": "^1.5.0",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/line-offset": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/line-offset/-/line-offset-7.1.0.tgz",
+      "integrity": "sha512-pz6irzhiQlJurU7DoXada6k3ei7PzY+VpsE/Wotm0D2KEAnoxqum2WK0rqqrhKPHKn+xpUGsHN9W/6K+qtmaHg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/line-overlap": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/line-overlap/-/line-overlap-7.1.0.tgz",
+      "integrity": "sha512-BdHuEoFAtqvVw3LkjCdivG035nfuwZuxji2ijst+mkmDnlv7uwSBudJqcDGjU6up2r8P1mXChS4im4xjUz+lwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-point-on-line": "^7.1.0",
+        "@turf/geojson-rbush": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/line-segment": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/nearest-point-on-line": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "fast-deep-equal": "^3.1.3",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/line-segment": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/line-segment/-/line-segment-7.1.0.tgz",
+      "integrity": "sha512-9rgIIH6ZzC3IiWxDQtKsq+j6eu8fRinMkJeusfI9HqOTm4vO02Ll4F/FigjOMOO/6X3TJ+Pqe3gS99TUaBINkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/line-slice": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/line-slice/-/line-slice-7.1.0.tgz",
+      "integrity": "sha512-44xcjgMQxTa7tTAZlSD3t1cFjHi5SCfAqjg1ONv45EYKsQSonPaxD7LGzCbU5pR2RJjx3R7QRJx2G88hnGcXjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/nearest-point-on-line": "^7.1.0",
+        "@types/geojson": "^7946.0.10"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/line-slice-along": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/line-slice-along/-/line-slice-along-7.1.0.tgz",
+      "integrity": "sha512-UwfnFORZnu4xdnuRXiQM3ODa8f9Q0FBjQF/XHNsPEI/xxmnwgQj3MZiULbAeHUbtU/7psTC7gEjfE3Lf0tcKQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bearing": "^7.1.0",
+        "@turf/destination": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/line-split": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/line-split/-/line-split-7.1.0.tgz",
+      "integrity": "sha512-QqUAmtlrnEu75cpLOmpEuiYU63BeVwpSKOBllBbu5gkP+7H/WBM/9fh7J0VgHNFHzqZCKiu8v4158k+CZr0QAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/geojson-rbush": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/line-intersect": "^7.1.0",
+        "@turf/line-segment": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/nearest-point-on-line": "^7.1.0",
+        "@turf/square": "^7.1.0",
+        "@turf/truncate": "^7.1.0",
+        "@types/geojson": "^7946.0.10"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/line-to-polygon": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/line-to-polygon/-/line-to-polygon-7.1.0.tgz",
+      "integrity": "sha512-n/IWBRbo+l4XDTz4sfQsQm5bU9xex8KrthK397jQasd7a9PiOKGon9Z1t/lddTJhND6ajVyJ3hl+eZMtpQaghQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/mask": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/mask/-/mask-7.1.0.tgz",
+      "integrity": "sha512-d+u3IIiRhe17TDfP/+UMn9qRlJYPJpK7sj6WorsssluGi0yIG/Z24uWpcLskWKSI8NNgkIbDrp+GIYkJi2t7SA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "polygon-clipping": "^0.15.3",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/meta": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-7.1.0.tgz",
+      "integrity": "sha512-ZgGpWWiKz797Fe8lfRj7HKCkGR+nSJ/5aKXMyofCvLSc2PuYJs/qyyifDPWjASQQCzseJ7AlF2Pc/XQ/3XkkuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/midpoint": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/midpoint/-/midpoint-7.1.0.tgz",
+      "integrity": "sha512-uiUU9TwRZOCeiTUn8+7oE6MJUvclfq+n6KQ5VCMTZXiRUJjPu7nDLpBle1t2WSv7/w7O0kSQ4FfKXh0gHnkJOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bearing": "^7.1.0",
+        "@turf/destination": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/moran-index": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/moran-index/-/moran-index-7.1.0.tgz",
+      "integrity": "sha512-xsvAr3IRF/C6PlRMoN/ANrRx6c3QFUJgBCIVfI7re+Lkdprrzgw1HZA48ZjP4F91xbhgA1scnRgQdHFi2vO2SA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/distance-weight": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/nearest-neighbor-analysis": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/nearest-neighbor-analysis/-/nearest-neighbor-analysis-7.1.0.tgz",
+      "integrity": "sha512-FAhT8/op3DuvqH0XFhv055JhYq/FC4aaIxEZ4hj8c7W6sYhUHAQgdRZ0tJ1RLe5/h+eXhCTbQ+DFfnfv3klu8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/area": "^7.1.0",
+        "@turf/bbox": "^7.1.0",
+        "@turf/bbox-polygon": "^7.1.0",
+        "@turf/centroid": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/nearest-point": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/nearest-point": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/nearest-point/-/nearest-point-7.1.0.tgz",
+      "integrity": "sha512-VyInmhqfVWp+jE7sCK95o46qc4tDjAgzbRfRjr+rTgfFS1Sndyy1PdwyNn6TjBFDxiM6e+mjMEeGPjb1smJlEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clone": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/nearest-point-on-line": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/nearest-point-on-line/-/nearest-point-on-line-7.1.0.tgz",
+      "integrity": "sha512-aTjAOm7ab0tl5JoxGYRx/J/IbRL1DY1ZCIYQDMEQjK5gOllhclgeBC0wDXDkEZFGaVftjw0W2RtE2I0jX7RG4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bearing": "^7.1.0",
+        "@turf/destination": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/line-intersect": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/nearest-point-to-line": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/nearest-point-to-line/-/nearest-point-to-line-7.1.0.tgz",
+      "integrity": "sha512-rY2F/iY4S6U8H0hIoOI25xMWYEiKywxeTvTvn5GP8KCu+2oemfZROWa7n2+hQDRwO2/uaegrGEpxO7zlFarvzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/point-to-line-distance": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/planepoint": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/planepoint/-/planepoint-7.1.0.tgz",
+      "integrity": "sha512-hFORBkCd7Q0kNUzLqksT4XglLgTQF9tCjG+dbnZ1VehpZu+w+vlHdoW/mY7XCX3Kj1ObiyzVmXffmVYgwXwF6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/point-grid": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/point-grid/-/point-grid-7.1.0.tgz",
+      "integrity": "sha512-ihuuUcWuCu4Z1+34UYCM5NGsU2DJaB4uE8cS3jDQoUqlc+8ii2ng8kcGEtTwVn0HdPsoKA7bgvSZcisJO0v6Ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-within": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/point-on-feature": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/point-on-feature/-/point-on-feature-7.1.0.tgz",
+      "integrity": "sha512-lOO5J9I0diuGbN+r6jViEKRH3qfymsBvv25b7U0MuP8g/YC19ncUXZ86dmKfJx1++Rb485DS9h0nFvPmJpaOdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/center": "^7.1.0",
+        "@turf/explode": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/nearest-point": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/point-to-line-distance": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/point-to-line-distance/-/point-to-line-distance-7.1.0.tgz",
+      "integrity": "sha512-Ps9eTOCaiNgxDaSNQux0wAcSLcrI0y0zYFaD9HnVm+yCMRliQXneFti2XXotS+gR7TpgnLRAAzyx4VzJMSN2tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bearing": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/projection": "^7.1.0",
+        "@turf/rhumb-bearing": "^7.1.0",
+        "@turf/rhumb-distance": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/points-within-polygon": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/points-within-polygon/-/points-within-polygon-7.1.0.tgz",
+      "integrity": "sha512-SzqeD9Gcp11rEya+rCVMy6IPuYMrphNEkCiQ39W6ec9hsaqKlruqmtudKhhckMGVLVUUBCQAu5f55yjcDfVW2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/polygon-smooth": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/polygon-smooth/-/polygon-smooth-7.1.0.tgz",
+      "integrity": "sha512-mTlmg4XUP5rKgCP/73N91owkAXIc3t1ZKLuwsJGQM1/Op48T3rJmDwVR/WZIMnVlxl5tFbssWCCB3blj4ivx9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/polygon-tangents": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/polygon-tangents/-/polygon-tangents-7.1.0.tgz",
+      "integrity": "sha512-ffBgHXtkrpgkNs8E6s9sVLSKG4lPGH3WBk294FNKBt9NS+rbhNCv8yTuOMeP0bOm/WizaCq/SUtVryJpUSoI/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/boolean-within": "^7.1.0",
+        "@turf/explode": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/nearest-point": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/polygon-to-line": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/polygon-to-line/-/polygon-to-line-7.1.0.tgz",
+      "integrity": "sha512-FBlfyBWNQZCTVGqlJH7LR2VXmvj8AydxrA8zegqek/5oPGtQDeUgIppKmvmuNClqbglhv59QtCUVaDK4bOuCTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/polygonize": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/polygonize/-/polygonize-7.1.0.tgz",
+      "integrity": "sha512-FBjxnOzO29MbE7MWnMPHHYtOo93cQopT5pXhkuPyoKgcTUCntR1+iVFpl5YFbMkYup0j5Oexjo/pbY38lVSZGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/envelope": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/projection": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/projection/-/projection-7.1.0.tgz",
+      "integrity": "sha512-3wHluMoOvXnTe7dfi0kcluTyLNG5MwGsSsK5OA98vkkLH6a1xvItn8e9GcesuT07oB2km/bgefxYEIvjQG5JCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/quadrat-analysis": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/quadrat-analysis/-/quadrat-analysis-7.1.0.tgz",
+      "integrity": "sha512-4O5h9PyWgpqYXja9O+kzr+qk5MUz0IkJqPtt5oWWX5s4jRcLNqiEUf+zi/GDBQkVV8jH3S5klT5CLrF1fxK3hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/area": "^7.1.0",
+        "@turf/bbox": "^7.1.0",
+        "@turf/bbox-polygon": "^7.1.0",
+        "@turf/centroid": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/point-grid": "^7.1.0",
+        "@turf/random": "^7.1.0",
+        "@turf/square-grid": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/random": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/random/-/random-7.1.0.tgz",
+      "integrity": "sha512-22mXv8ejDMUWkz8DSMMqdZb0s7a0ISJzXt6T9cHovfT//vsotzkVH+5PDxJQjvmigKMnpaUgobHmQss23tAwEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/rectangle-grid": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/rectangle-grid/-/rectangle-grid-7.1.0.tgz",
+      "integrity": "sha512-4d2AuDj4LfMMJxNHbds5yX1oFR3mIVAB5D7mx6pFB0e+YkQW0mE2dUWhDTFGJZM+n45yqbNQ5hg19bmiXv94ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-intersects": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/rewind": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/rewind/-/rewind-7.1.0.tgz",
+      "integrity": "sha512-zX0KDZpeiH89m1vYLTEJdDL6mFyoAsCxcG0P94mXO7/JXWf0AaxzA9MkNnA/d2QYX0G4ioCMjZ5cD6nXb8SXzw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-clockwise": "^7.1.0",
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/rhumb-bearing": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/rhumb-bearing/-/rhumb-bearing-7.1.0.tgz",
+      "integrity": "sha512-ESZt70eOljHVnQMFKIdiu8LIHuQlpZgzh2nqSfV40BrYjsjI/sBKeK+sp2cBWk88nsSDlriPuMTNh4f50Jqpkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/rhumb-destination": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/rhumb-destination/-/rhumb-destination-7.1.0.tgz",
+      "integrity": "sha512-WA2TeO3qrv5ZrzNihtTLLYu8X4kd12WEC6JKElm99XhgLao1/4ao2SJUi43l88HqwbrnNiq4TueGQ6tYpXGU7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/rhumb-distance": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/rhumb-distance/-/rhumb-distance-7.1.0.tgz",
+      "integrity": "sha512-fR1V+yC4E1tnbdThomosiLcv0PQOwbfLSPM8rSWuxbMcJtffsncWxyJ0+N1F5juuHbcdaYhlduX8ri5I0ZCejw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/sample": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/sample/-/sample-7.1.0.tgz",
+      "integrity": "sha512-9Iq/Ankr4+sgBoh4FpuVVvoW+AA10eej3FS89Zu79SFdCqUIdT7T42Nn3MlSVj4jMyA1oXyT2HIAlNWkwgLw6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/sector": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/sector/-/sector-7.1.0.tgz",
+      "integrity": "sha512-2FI2rg//eXpa/l+WJtFfvHaf1NJ7ie2MoJ+RH5dKANtrfoof1Ed+y9dXSyuhem2tp/Srq2GhrjaSofFN5/g5vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/circle": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/line-arc": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/shortest-path": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/shortest-path/-/shortest-path-7.1.0.tgz",
+      "integrity": "sha512-1UmFhS5zHNacLv5rszoFOXq02BGov1oJvjlDatXsSWAd+Z7tqxpDc8D+41edrXy0ZB0Yxsy6WPNagM6hG9PRaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/bbox-polygon": "^7.1.0",
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/clean-coords": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/transform-scale": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/simplify": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/simplify/-/simplify-7.1.0.tgz",
+      "integrity": "sha512-JypymaoiSiFzGHwEoUkK0OPW1KQSnH3hEsEW3UIRS+apzltJ4HdFovYjsfqQgGZJZ+NJ9+dv7h8pgGLYuqcBUQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clean-coords": "^7.1.0",
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/square": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/square/-/square-7.1.0.tgz",
+      "integrity": "sha512-ANuA+WXZheGTLW6Veq0i+/B2S4KMhEHAixDv9gQEb9e6FTyqTJVwrqP4CHI3OzA3DZ/ytFf+NTKVofetO/BBQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/square-grid": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/square-grid/-/square-grid-7.1.0.tgz",
+      "integrity": "sha512-JyhsALULVRlkh8htdTi9aXaXFSUv6wRNbeFbqyGJKKlA5eF+AYmyWdI/BlFGQN27xtbtMPeAuLmj+8jaB2omGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/rectangle-grid": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/standard-deviational-ellipse": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/standard-deviational-ellipse/-/standard-deviational-ellipse-7.1.0.tgz",
+      "integrity": "sha512-JqvQFH/witHh+3XgPC1Qk4+3G8w8WQta2NTJjnGinOgFulH+7RD4DcxCT+XXtCHoeq8IvL9VPJRX3ciaW5nSCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/center-mean": "^7.1.0",
+        "@turf/ellipse": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/points-within-polygon": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/tag": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/tag/-/tag-7.1.0.tgz",
+      "integrity": "sha512-cD8TC++DnNmdI1B/apTf3nj2zRNY6SoLRliB8K76OB+70Kev8tOf4ZVgAqOd0u+Hpdg/T6l7dO7fyJ6UouE7jA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/tesselate": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/tesselate/-/tesselate-7.1.0.tgz",
+      "integrity": "sha512-E/Z94Mx6kUjvQVbEcSuM9MbEo2dkOczRe4ZzjhFlLgJh1dCkfRgwYLH49mb2CcfG/me1arxoCgmtG+qgm7LrCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "earcut": "^2.2.4",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/tin": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/tin/-/tin-7.1.0.tgz",
+      "integrity": "sha512-h8Bdm0IYN6OpKHM8lBRWGxkJnZcxL0KYecf8U6pa6DCEYsEXuEExMTvYSD2OmqIsL5ml8P6RjwgyI+dZeE0O9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/transform-rotate": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/transform-rotate/-/transform-rotate-7.1.0.tgz",
+      "integrity": "sha512-Vp7VBZ6DqaPV8mkwSycksBFRLqSj3y16zg+uEPSCsXUjbFtw9DOLcyH2F5vMpnC2bOpS9NOB4hebhJRwBwAPWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/centroid": "^7.1.0",
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/rhumb-bearing": "^7.1.0",
+        "@turf/rhumb-destination": "^7.1.0",
+        "@turf/rhumb-distance": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/transform-scale": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/transform-scale/-/transform-scale-7.1.0.tgz",
+      "integrity": "sha512-m5fLnh3JqrWSv0sAC8Aieet/fr5IZND8BFaE9LakMidtNaJqOIPOyVmUoklcrGn6eK6MX+66rRPn+5a1pahlLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/bbox": "^7.1.0",
+        "@turf/center": "^7.1.0",
+        "@turf/centroid": "^7.1.0",
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/rhumb-bearing": "^7.1.0",
+        "@turf/rhumb-destination": "^7.1.0",
+        "@turf/rhumb-distance": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/transform-translate": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/transform-translate/-/transform-translate-7.1.0.tgz",
+      "integrity": "sha512-XA6Oh7VqUDrieY9m9/OF4XpBTd8qlfVGi3ObywojCqtHaHKLK3aXwTBZ276i0QKmZqOQA+2jFa9NhgF/TgBDrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/rhumb-destination": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/triangle-grid": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/triangle-grid/-/triangle-grid-7.1.0.tgz",
+      "integrity": "sha512-hrPyRAuX5PKu7txmc/11VPKrlJDR+JGzd+eijupKTspNLR4n2sqZUx8UXqSxZ/1nq06ScTyjIfGQJVzlRS8BTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/distance": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/intersect": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/truncate": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/truncate/-/truncate-7.1.0.tgz",
+      "integrity": "sha512-rrF3AML9PGZw2i5wmt53ESI+Ln9cZyCXgJ7QrEvkT8NbE4OFgmw6p8/1xT8+VEWFSpD4gHz+hmM+5FaFxXvtNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/turf": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/turf/-/turf-7.1.0.tgz",
+      "integrity": "sha512-7NA6tAjbu9oIvIfpRO5AdPrZbFTlUFU02HVA7sLJM9jFeNIZovW09QuDo23uoS2z5l94SXV1GgKKxN5wo7prCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/along": "^7.1.0",
+        "@turf/angle": "^7.1.0",
+        "@turf/area": "^7.1.0",
+        "@turf/bbox": "^7.1.0",
+        "@turf/bbox-clip": "^7.1.0",
+        "@turf/bbox-polygon": "^7.1.0",
+        "@turf/bearing": "^7.1.0",
+        "@turf/bezier-spline": "^7.1.0",
+        "@turf/boolean-clockwise": "^7.1.0",
+        "@turf/boolean-concave": "^7.1.0",
+        "@turf/boolean-contains": "^7.1.0",
+        "@turf/boolean-crosses": "^7.1.0",
+        "@turf/boolean-disjoint": "^7.1.0",
+        "@turf/boolean-equal": "^7.1.0",
+        "@turf/boolean-intersects": "^7.1.0",
+        "@turf/boolean-overlap": "^7.1.0",
+        "@turf/boolean-parallel": "^7.1.0",
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/boolean-point-on-line": "^7.1.0",
+        "@turf/boolean-touches": "^7.1.0",
+        "@turf/boolean-valid": "^7.1.0",
+        "@turf/boolean-within": "^7.1.0",
+        "@turf/buffer": "^7.1.0",
+        "@turf/center": "^7.1.0",
+        "@turf/center-mean": "^7.1.0",
+        "@turf/center-median": "^7.1.0",
+        "@turf/center-of-mass": "^7.1.0",
+        "@turf/centroid": "^7.1.0",
+        "@turf/circle": "^7.1.0",
+        "@turf/clean-coords": "^7.1.0",
+        "@turf/clone": "^7.1.0",
+        "@turf/clusters": "^7.1.0",
+        "@turf/clusters-dbscan": "^7.1.0",
+        "@turf/clusters-kmeans": "^7.1.0",
+        "@turf/collect": "^7.1.0",
+        "@turf/combine": "^7.1.0",
+        "@turf/concave": "^7.1.0",
+        "@turf/convex": "^7.1.0",
+        "@turf/destination": "^7.1.0",
+        "@turf/difference": "^7.1.0",
+        "@turf/dissolve": "^7.1.0",
+        "@turf/distance": "^7.1.0",
+        "@turf/distance-weight": "^7.1.0",
+        "@turf/ellipse": "^7.1.0",
+        "@turf/envelope": "^7.1.0",
+        "@turf/explode": "^7.1.0",
+        "@turf/flatten": "^7.1.0",
+        "@turf/flip": "^7.1.0",
+        "@turf/geojson-rbush": "^7.1.0",
+        "@turf/great-circle": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/hex-grid": "^7.1.0",
+        "@turf/interpolate": "^7.1.0",
+        "@turf/intersect": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@turf/isobands": "^7.1.0",
+        "@turf/isolines": "^7.1.0",
+        "@turf/kinks": "^7.1.0",
+        "@turf/length": "^7.1.0",
+        "@turf/line-arc": "^7.1.0",
+        "@turf/line-chunk": "^7.1.0",
+        "@turf/line-intersect": "^7.1.0",
+        "@turf/line-offset": "^7.1.0",
+        "@turf/line-overlap": "^7.1.0",
+        "@turf/line-segment": "^7.1.0",
+        "@turf/line-slice": "^7.1.0",
+        "@turf/line-slice-along": "^7.1.0",
+        "@turf/line-split": "^7.1.0",
+        "@turf/line-to-polygon": "^7.1.0",
+        "@turf/mask": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@turf/midpoint": "^7.1.0",
+        "@turf/moran-index": "^7.1.0",
+        "@turf/nearest-neighbor-analysis": "^7.1.0",
+        "@turf/nearest-point": "^7.1.0",
+        "@turf/nearest-point-on-line": "^7.1.0",
+        "@turf/nearest-point-to-line": "^7.1.0",
+        "@turf/planepoint": "^7.1.0",
+        "@turf/point-grid": "^7.1.0",
+        "@turf/point-on-feature": "^7.1.0",
+        "@turf/point-to-line-distance": "^7.1.0",
+        "@turf/points-within-polygon": "^7.1.0",
+        "@turf/polygon-smooth": "^7.1.0",
+        "@turf/polygon-tangents": "^7.1.0",
+        "@turf/polygon-to-line": "^7.1.0",
+        "@turf/polygonize": "^7.1.0",
+        "@turf/projection": "^7.1.0",
+        "@turf/quadrat-analysis": "^7.1.0",
+        "@turf/random": "^7.1.0",
+        "@turf/rectangle-grid": "^7.1.0",
+        "@turf/rewind": "^7.1.0",
+        "@turf/rhumb-bearing": "^7.1.0",
+        "@turf/rhumb-destination": "^7.1.0",
+        "@turf/rhumb-distance": "^7.1.0",
+        "@turf/sample": "^7.1.0",
+        "@turf/sector": "^7.1.0",
+        "@turf/shortest-path": "^7.1.0",
+        "@turf/simplify": "^7.1.0",
+        "@turf/square": "^7.1.0",
+        "@turf/square-grid": "^7.1.0",
+        "@turf/standard-deviational-ellipse": "^7.1.0",
+        "@turf/tag": "^7.1.0",
+        "@turf/tesselate": "^7.1.0",
+        "@turf/tin": "^7.1.0",
+        "@turf/transform-rotate": "^7.1.0",
+        "@turf/transform-scale": "^7.1.0",
+        "@turf/transform-translate": "^7.1.0",
+        "@turf/triangle-grid": "^7.1.0",
+        "@turf/truncate": "^7.1.0",
+        "@turf/union": "^7.1.0",
+        "@turf/unkink-polygon": "^7.1.0",
+        "@turf/voronoi": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/union": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/union/-/union-7.1.0.tgz",
+      "integrity": "sha512-7VI8jONdBg9qmbfNlLQycPr93l5aU9HGMgWI9M6pb4ERuU2+p8KgffCgs2NyMtP2HxPrKSybzj31g7bnbEKofQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "polygon-clipping": "^0.15.3",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/unkink-polygon": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/unkink-polygon/-/unkink-polygon-7.1.0.tgz",
+      "integrity": "sha512-pqkirni2aLpRA1ELFIuJz+mkjYyJQX8Ar6BflSu1b0ajY/CTrcDxbIv1x8UfvbybLzdJc4Gxzg5mo4cEtSwtaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/area": "^7.1.0",
+        "@turf/boolean-point-in-polygon": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/meta": "^7.1.0",
+        "@types/geojson": "^7946.0.10",
+        "rbush": "^3.0.1",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/voronoi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@turf/voronoi/-/voronoi-7.1.0.tgz",
+      "integrity": "sha512-xUvzPDG6GaqEekgxd+pjeMKJXOYJ3eFIqUHbTe/ISKzzv3f2cFGiR2VH7ZGXri8d4ozzCQbUQ27ilHPPLf5+xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@turf/clone": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/invariant": "^7.1.0",
+        "@types/d3-voronoi": "^1.1.12",
+        "@types/geojson": "^7946.0.10",
+        "d3-voronoi": "1.1.2",
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@types/d3-voronoi": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.12.tgz",
+      "integrity": "sha512-DauBl25PKZZ0WVJr42a6CNvI6efsdzofl9sajqZr2Gf5Gu733WkDdUGiPkUHXiUvYGzNNlFQde2wdZdfQPG+yw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.14",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
+      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash.debounce": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.9.tgz",
+      "integrity": "sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.3.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.3.0.tgz",
+      "integrity": "sha512-nrWpWVaDZuaVc5X84xJ0vNrLvomM205oQyLsRt7OHNZbSHslcWsvgFR7O7hire2ZonjLrWBbedmotmIlJDVd6g==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.18.2"
+      }
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.13",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
+      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.11",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
+      "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/readable-stream": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-4.0.15.tgz",
+      "integrity": "sha512-oAZ3kw+kJFkEqyh7xORZOku1YAKvsFTogRY8kVl4vHpEKiDkfnSA/My8haRE7fvmix5Zyy+1pwzOi7yycGLBJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "node_modules/@types/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/abab": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "license": "MIT",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-globals": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
+      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1"
+      }
+    },
+    "node_modules/acorn-globals/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ag-charts-types": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.1.0.tgz",
+      "integrity": "sha512-pk9ft8hbgTXJ/thI/SEUR1BoauNplYExpcHh7tMOqVikoDsta1O15TB1ZL4XWnl4TPIzROBmONKsz7d8a2HBuQ==",
+      "license": "MIT"
+    },
+    "node_modules/ag-grid-community": {
+      "version": "32.1.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.1.0.tgz",
+      "integrity": "sha512-RVvkjRH61nuCXwIqTKQPqNbKR+8cGBKw7S1qmmMXsy0pCBAJaQn4kL3v31hKHxDtV4bPscBXLFKGnKzHuss0GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-types": "10.1.0"
+      }
+    },
+    "node_modules/ag-grid-react": {
+      "version": "32.1.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.1.0.tgz",
+      "integrity": "sha512-GDbtvU3aicSajWXWxvQio5ZaPqJDx2jzgRBKQf1RF1IVzL+XATDmLFNuMND0+wJ/VW/xUjBFjiq9W1fjXg/DCA==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-grid-community": "32.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "license": "MIT"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
+      "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/bl": {
+      "version": "6.0.14",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-6.0.14.tgz",
+      "integrity": "sha512-TJfbvGdL7KFGxTsEbsED7avqpFdY56q9IW0/aiytyheJzxST/+Io6cx/4Qx0K2/u0BPRDs65mjaQzYvMZeNocQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/readable-stream": "^4.0.0",
+        "buffer": "^6.0.3",
+        "inherits": "^2.0.4",
+        "readable-stream": "^4.2.0"
+      }
+    },
+    "node_modules/body-scroll-lock": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz",
+      "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==",
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browser-process-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
+      "license": "BSD-2-Clause",
+      "optional": true
+    },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001634",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001634.tgz",
+      "integrity": "sha512-fbBYXQ9q3+yp1q1gBk86tOFs4pyn/yxFm5ZNP18OXJDfA3txImOY9PhfxVggZ4vRHDqoU8NrKU81eN0OtzOgRA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/chalk/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/chalk/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color2k": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz",
+      "integrity": "sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==",
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/complex.js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.1.1.tgz",
+      "integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
+      "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==",
+      "license": "MIT"
+    },
+    "node_modules/concaveman": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/concaveman/-/concaveman-1.2.1.tgz",
+      "integrity": "sha512-PwZYKaM/ckQSa8peP5JpVr7IMJ4Nn/MHIaWUjP4be+KoZ7Botgs8seAZGpmaOM+UZXawcdYRao/px9ycrCihHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "point-in-polygon": "^1.1.0",
+        "rbush": "^3.0.1",
+        "robust-predicates": "^2.0.4",
+        "tinyqueue": "^2.0.3"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convertapi": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/convertapi/-/convertapi-1.14.0.tgz",
+      "integrity": "sha512-9Rzkn+Mjs4jVLQ5pRUC8KpIjnT9WFUkuJZ5yjCJaDJsDM7Na2lWPKtDJdkfKcYCNDuo1h+OYZedne5SLp60EkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "axios": "^1.6.2"
+      }
+    },
+    "node_modules/convertapi/node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssom": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
+      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "cssom": "~0.3.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-geo": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.7.1.tgz",
+      "integrity": "sha512-O4AempWAr+P5qbk2bC2FuN/sDW4z+dN2wDf9QV3bxQt4M5HfOEeXLgJ/UKQW0+o1Dj8BE+L5kiDbdWUMjsmQpw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1"
+      }
+    },
+    "node_modules/d3-voronoi": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz",
+      "integrity": "sha512-RhGS1u2vavcO7ay7ZNAPo4xeDh/VYeGof3x5ZLJBQgYhLegxr3s5IykvWmJ94FTU6mcbtp4sloqZ54mP6R4Utw==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/data-urls": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
+      "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "abab": "^2.0.6",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^11.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
+      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tr46": "^3.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
+      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+      "license": "MIT"
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "license": "MIT"
+    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/domexception": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
+      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT"
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/error-ex/node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escape-latex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
+      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==",
+      "license": "MIT"
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/escodegen/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/fabric": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/fabric/-/fabric-5.3.0.tgz",
+      "integrity": "sha512-AVayKuzWoXM5cTn7iD3yNWBlfEa8r1tHaOe2g8NsZrmWKAHjryTxT/j6f9ncRfOWOF0I1Ci1AId3y78cC+GExQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "canvas": "^2.8.0",
+        "jsdom": "^19.0.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "11.3.21",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.21.tgz",
+      "integrity": "sha512-D+hfIsvzV8eL/iycld4K+tKlg2Q2LdwnrcBEohtGw3cG1AIuNYATbT5RUqIM1ndsAk+EfGhoSGf0UaiFodc5Tw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==",
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/geojson-equality-ts": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/geojson-equality-ts/-/geojson-equality-ts-1.0.2.tgz",
+      "integrity": "sha512-h3Ryq+0mCSN/7yLs0eDgrZhvc9af23o/QuC4aTiuuzP/MRCtd6mf5rLsLRY44jX0RPUfM8c4GqERQmlUxPGPoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "^7946.0.14"
+      }
+    },
+    "node_modules/geojson-polygon-self-intersections": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-polygon-self-intersections/-/geojson-polygon-self-intersections-1.2.1.tgz",
+      "integrity": "sha512-/QM1b5u2d172qQVO//9CGRa49jEmclKEsYOQmWP9ooEjj63tBM51m2805xsbxkzlEELQ2REgTf700gUhhlegxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "rbush": "^2.0.1"
+      }
+    },
+    "node_modules/geojson-polygon-self-intersections/node_modules/quickselect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
+      "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/geojson-polygon-self-intersections/node_modules/rbush": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
+      "integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "quickselect": "^1.0.1"
+      }
+    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
+      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/glob/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/hamt_plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+      "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==",
+      "license": "MIT"
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "whatwg-encoding": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tootallnate/once": "2",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/international-types": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/international-types/-/international-types-0.8.1.tgz",
+      "integrity": "sha512-tajBCAHo4I0LIFlmQ9ZWfjMWVyRffzuvfbXCd6ssFt5u1Zw15DN0UBpVTItXdNa1ls+cpQt3Yw8+TxsfGF8JcA==",
+      "license": "MIT"
+    },
+    "node_modules/intl-messageformat": {
+      "version": "10.5.14",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.14.tgz",
+      "integrity": "sha512-IjC6sI0X7YRjjyVH9aUgdftcmZK7WXdHeil4KwbjDnRWjnVitKpAx3rr6t6di1joFp5188VqKcobOPA6mCLG/w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.7.8",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/iron-session": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/iron-session/-/iron-session-8.0.2.tgz",
+      "integrity": "sha512-p4Yf1moQr6gnCcXu5vCaxVKRKDmR9PZcQDfp7ZOgbsSHUsgaNti6OgDB2BdgxC2aS6V/6Hu4O0wYlj92sbdIJg==",
+      "funding": [
+        "https://github.com/sponsors/vvo",
+        "https://github.com/sponsors/brc-dd"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "0.6.0",
+        "iron-webcrypto": "1.2.1",
+        "uncrypto": "0.1.3"
+      }
+    },
+    "node_modules/iron-webcrypto": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz",
+      "integrity": "sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/brc-dd"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
+      "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+      "license": "MIT"
+    },
+    "node_modules/jiti": {
+      "version": "1.21.6",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
+      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-md4": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz",
+      "integrity": "sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==",
+      "license": "MIT"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsdom": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-19.0.0.tgz",
+      "integrity": "sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "abab": "^2.0.5",
+        "acorn": "^8.5.0",
+        "acorn-globals": "^6.0.0",
+        "cssom": "^0.5.0",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^3.0.1",
+        "decimal.js": "^10.3.1",
+        "domexception": "^4.0.0",
+        "escodegen": "^2.0.0",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.0",
+        "parse5": "6.0.1",
+        "saxes": "^5.0.1",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.0.0",
+        "w3c-hr-time": "^1.0.2",
+        "w3c-xmlserializer": "^3.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^2.0.0",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^10.0.0",
+        "ws": "^8.2.3",
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
+      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jsts": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/jsts/-/jsts-2.7.1.tgz",
+      "integrity": "sha512-x2wSZHEBK20CY+Wy+BPE7MrFQHW6sIsdaGUMEqmGAio+3gFzQaBYPwLRonUfQf9Ak8pBieqj9tUofX1+WtAEIg==",
+      "dev": true,
+      "license": "(EDL-1.0 OR EPL-1.0)",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
+      "integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
+      "integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.foreach": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
+      "integrity": "sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.kebabcase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.mapkeys": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapkeys/-/lodash.mapkeys-4.6.0.tgz",
+      "integrity": "sha512-0Al+hxpYvONWtg+ZqHpa/GaVzxuN3V7Xeo2p+bY06EaK/n+Y9R7nBePPN2o1LxmL0TWQSwP8LYZ008/hc9JzhA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+      "license": "ISC",
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
+    "node_modules/marchingsquares": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/marchingsquares/-/marchingsquares-1.3.3.tgz",
+      "integrity": "sha512-gz6nNQoVK7Lkh2pZulrT4qd4347S/toG9RXH2pyzhLgkL5mLkBoqgv4EvAGXcV0ikDW72n/OQb3Xe8bGagQZCg==",
+      "dev": true,
+      "license": "AGPL-3.0"
+    },
+    "node_modules/mathjs": {
+      "version": "13.0.3",
+      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-13.0.3.tgz",
+      "integrity": "sha512-GpP9OW6swA5POZXvgpc/1FYkAr8lKgV04QHS1tIU60klFfplVCYaNzn6qy0vSp0hAQQN7shcx9CeB507dlLujA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.24.8",
+        "complex.js": "^2.1.1",
+        "decimal.js": "^10.4.3",
+        "escape-latex": "^1.2.0",
+        "fraction.js": "^4.3.7",
+        "javascript-natural-sort": "^0.7.1",
+        "seedrandom": "^3.0.5",
+        "tiny-emitter": "^2.1.0",
+        "typed-function": "^4.2.1"
+      },
+      "bin": {
+        "mathjs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mathjs/node_modules/@babel/runtime": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
+      "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "license": "MIT"
+    },
+    "node_modules/mssql": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/mssql/-/mssql-11.0.1.tgz",
+      "integrity": "sha512-KlGNsugoT90enKlR8/G36H0kTxPthDhmtNUCwEHvgRza5Cjpjoj+P2X6eMpFUDN7pFrJZsKadL4x990G8RBE1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tediousjs/connection-string": "^0.5.0",
+        "commander": "^11.0.0",
+        "debug": "^4.3.3",
+        "rfdc": "^1.3.0",
+        "tarn": "^3.0.2",
+        "tedious": "^18.2.1"
+      },
+      "bin": {
+        "mssql": "bin/mssql"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/mssql/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/native-duplexpair": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/native-duplexpair/-/native-duplexpair-1.0.0.tgz",
+      "integrity": "sha512-E7QQoM+3jvNtlmyfqRZ0/U75VFgCls+fSkbml2MpgWkWyz3ox8Y58gNhfuziuQYGNNQAbFZJQck55LHCnCK6CA==",
+      "license": "MIT"
+    },
+    "node_modules/next": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
+      "integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "14.2.3",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.3",
+        "@next/swc-darwin-x64": "14.2.3",
+        "@next/swc-linux-arm64-gnu": "14.2.3",
+        "@next/swc-linux-arm64-musl": "14.2.3",
+        "@next/swc-linux-x64-gnu": "14.2.3",
+        "@next/swc-linux-x64-musl": "14.2.3",
+        "@next/swc-win32-arm64-msvc": "14.2.3",
+        "@next/swc-win32-ia32-msvc": "14.2.3",
+        "@next/swc-win32-x64-msvc": "14.2.3"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next-international": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/next-international/-/next-international-1.2.4.tgz",
+      "integrity": "sha512-JQvp+h2iSgA/t8hu5S/Lwow1ZErJutQRdpnplxjv4VTlCiND8T95fYih8BjkHcVhQbtM+Wu9Mb1CM32wD9hlWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "^0.0.1",
+        "international-types": "^0.8.1",
+        "server-only": "^0.0.1"
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nwsapi": {
+      "version": "2.2.10",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.10.tgz",
+      "integrity": "sha512-QK0sRs7MKv0tKe1+5uZIQk/C8XGza4DAnztJG8iD+TpJIORARrCxczA738awHrZoHeTjSSoHqao2teO0dC/gFQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/point-in-polygon": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
+      "integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/point-in-polygon-hao": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/point-in-polygon-hao/-/point-in-polygon-hao-1.1.0.tgz",
+      "integrity": "sha512-3hTIM2j/v9Lio+wOyur3kckD4NxruZhpowUbEgmyikW+a2Kppjtu1eN+AhnMQtoHW46zld88JiYWv6fxpsDrTQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/polygon-clipping": {
+      "version": "0.15.7",
+      "resolved": "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.7.tgz",
+      "integrity": "sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "robust-predicates": "^3.0.2",
+        "splaytree": "^3.1.0"
+      }
+    },
+    "node_modules/polygon-clipping/node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "dev": true,
+      "license": "Unlicense"
+    },
+    "node_modules/postcss": {
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
+    "node_modules/prettier": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/psl": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/rbush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "quickselect": "^2.0.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-color-palette": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/react-color-palette/-/react-color-palette-7.2.2.tgz",
+      "integrity": "sha512-SHLPS3JO+xECRtWB14dAgUPranQMDiGWqn2QVPppAzqWhbUtsg2uVTUd3cpiK3OEa66j7xIDGa/RPjCw98D61g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-colorful": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
+      "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/react-datepicker": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.3.0.tgz",
+      "integrity": "sha512-EqRKLAtLZUTztiq6a+tjSjQX9ES0Xd229JPckAtyZZ4GoY3rtvNWAzkYZnQUf6zTWT50Ki0+t+W9VRQIkSJLfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.2",
+        "clsx": "^2.1.0",
+        "date-fns": "^3.3.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.13.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-draggable": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz",
+      "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
+    "node_modules/react-draggable/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react-hook-form": {
+      "version": "7.53.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",
+      "integrity": "sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz",
+      "integrity": "sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/react-onclickoutside": {
+      "version": "6.13.1",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
+      "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
+      }
+    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.10",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.10.tgz",
+      "integrity": "sha512-m3zvBRANPBw3qxVVjEIPEQinkcwlFZ4qyomuWVpNJdv4c6MvHfXV0C3L9Jx5rr3HeBHKNRX+1jreB5QloDIJjA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-responsive-modal": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-responsive-modal/-/react-responsive-modal-6.4.2.tgz",
+      "integrity": "sha512-ARjGEKE5Gu5CSvyA8U9ARVbtK4SMAtdXsjtzwtxRlQIHC99RQTnOUctLpl7+/sp1Kg1OJZ6yqvp6ivd4TBueEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@bedrock-layout/use-forwarded-ref": "^1.3.1",
+        "body-scroll-lock": "^3.1.5",
+        "classnames": "^2.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/pradel"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-select": {
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.1.tgz",
+      "integrity": "sha512-RT1CJmuc+ejqm5MPgzyZujqDskdvB9a9ZqrdnVLsvAHjJ3Tj0hELnLeVPQlmYdVKCdCpxanepl6z7R5KhXhWzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-textarea-autosize": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
+      "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-textarea-autosize/node_modules/@babel/runtime": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
+      "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.5.2.tgz",
+      "integrity": "sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==",
+      "license": "MIT",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "process": "^0.11.10",
+        "string_decoder": "^1.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/recoil": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
+      "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "hamt_plus": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/robust-predicates": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz",
+      "integrity": "sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==",
+      "dev": true,
+      "license": "Unlicense"
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.0.10.tgz",
+      "integrity": "sha512-t44QCeDKAPf1mtQH3fYpWz8IM/DyvHLjs8wUvvwMYxk5moOqCzrMSxK6HQVD0QVmVjXFavoFIPRVrMuJPKAvtg==",
+      "license": "MIT",
+      "dependencies": {
+        "compute-scroll-into-view": "^3.0.2"
+      }
+    },
+    "node_modules/seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
+      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/server-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
+      "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==",
+      "license": "MIT"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/skmeans": {
+      "version": "0.9.7",
+      "resolved": "https://registry.npmjs.org/skmeans/-/skmeans-0.9.7.tgz",
+      "integrity": "sha512-hNj1/oZ7ygsfmPZ7ZfN5MUBRoGg1gtpnImuJBgLO0ljQ67DtJuiQaiYdS4lUA6s0KCwnPhGivtC/WRwIZLkHyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/splaytree": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.2.tgz",
+      "integrity": "sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/stoppable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stoppable/-/stoppable-1.1.0.tgz",
+      "integrity": "sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/sweepline-intersections": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sweepline-intersections/-/sweepline-intersections-1.5.0.tgz",
+      "integrity": "sha512-AoVmx72QHpKtItPu72TzFL+kcYjd67BPLDoR0LarIk+xyaRg+pDTMFXndIEvZf9xEKnJv6JdhgRMnocoG0D3AQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyqueue": "^2.0.0"
+      }
+    },
+    "node_modules/sweetalert2": {
+      "version": "11.14.1",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.14.1.tgz",
+      "integrity": "sha512-xadhfcA4STGMh8nC5zHFFWURhRpWc4zyI3GdMDFH/m3hGWZeQQNWhX9xcG4lI9gZYsi/IlazKbwvvje3juL3Xg==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
+    "node_modules/sweetalert2-react-content": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/sweetalert2-react-content/-/sweetalert2-react-content-5.0.7.tgz",
+      "integrity": "sha512-8Fk82Mpk45lFXpJWKIFF/lq8k/dJKDDQGFcuqVosaL/qRdViyAs5+u37LoTGfnOIvf+rfQB3PAXcp1XLLn+0ew==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "sweetalert2": "^11.0.0"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
+    "node_modules/tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwind-variants": {
+      "version": "0.1.20",
+      "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.1.20.tgz",
+      "integrity": "sha512-AMh7x313t/V+eTySKB0Dal08RHY7ggYK0MSn/ad8wKWOrDUIzyiWNayRUm2PIJ4VRkvRnfNuyRuKbLV3EN+ewQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tailwind-merge": "^1.14.0"
+      },
+      "engines": {
+        "node": ">=16.x",
+        "pnpm": ">=7.x"
+      },
+      "peerDependencies": {
+        "tailwindcss": "*"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/tarn": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tarn/-/tarn-3.0.2.tgz",
+      "integrity": "sha512-51LAVKUSZSVfI05vjPESNc5vwqqZpbXCsU+/+wxlOrUjk2SnFTt97v9ZgQrD4YmxYW1Px6w2KjaDitCfkvgxMQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/tedious": {
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/tedious/-/tedious-18.3.0.tgz",
+      "integrity": "sha512-/aVCX2VLu9Ihf5UyxifRXfmWQ1P8HNJvapk1as+LMzSdw9AmbNtEHllrffZpNrzBCptcK0Z4m06k+tutL2wowA==",
+      "license": "MIT",
+      "dependencies": {
+        "@azure/core-auth": "^1.7.2",
+        "@azure/identity": "^4.2.1",
+        "@azure/keyvault-keys": "^4.4.0",
+        "@js-joda/core": "^5.6.1",
+        "@types/node": ">=18",
+        "bl": "^6.0.11",
+        "iconv-lite": "^0.6.3",
+        "js-md4": "^0.3.2",
+        "native-duplexpair": "^1.0.0",
+        "sprintf-js": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "license": "MIT"
+    },
+    "node_modules/tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/topojson-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+      "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "topo2geo": "bin/topo2geo",
+        "topomerge": "bin/topomerge",
+        "topoquantize": "bin/topoquantize"
+      }
+    },
+    "node_modules/topojson-server": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/topojson-server/-/topojson-server-3.0.1.tgz",
+      "integrity": "sha512-/VS9j/ffKr2XAOjlZ9CgyyeLmgJ9dMwq6Y0YEON8O7p/tGGk+dCWnrE03zEdu7i4L7YsFZLEPZPzCvcB7lEEXw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "geo2topo": "bin/geo2topo"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
+      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+      "license": "0BSD"
+    },
+    "node_modules/typed-function": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.2.1.tgz",
+      "integrity": "sha512-EGjWssW7Tsk4DGfE+5yluuljS1OGYWiI1J6e8puZz9nTMM51Oug8CD5Zo4gWMsOhq5BI+1bF+rWTm4Vbj3ivRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/uncrypto": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz",
+      "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==",
+      "license": "MIT"
+    },
+    "node_modules/undici-types": {
+      "version": "6.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.18.2.tgz",
+      "integrity": "sha512-5ruQbENj95yDYJNS3TvcaxPMshV7aizdv/hWYjGIKoANWKjhWNBsr2YEuYZKodQulB1b8l7ILOuDQep3afowQQ==",
+      "license": "MIT"
+    },
+    "node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-composed-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-latest": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/w3c-hr-time": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "browser-process-hrtime": "^1.0.0"
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz",
+      "integrity": "sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-10.0.0.tgz",
+      "integrity": "sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tr46": "^3.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/yaml": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
+      "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
+      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
+      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
+      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
+      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
+      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
+      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
+      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
+      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    }
+  }
+}
diff --git a/src/components/common/select/QSelectBox.jsx b/src/components/common/select/QSelectBox.jsx
index ee101898..dbeb1ff2 100644
--- a/src/components/common/select/QSelectBox.jsx
+++ b/src/components/common/select/QSelectBox.jsx
@@ -1,7 +1,7 @@
 'use client'
 import { useEffect, useState } from 'react'
 
-export default function QSelectBox({ title = '', options, onChange, value }) {
+export default function QSelectBox({ title = '', options, onChange, value, disabled = false }) {
   const [openSelect, setOpenSelect] = useState(false)
   const [selected, setSelected] = useState(title === '' ? options[0].name : title)
 
@@ -15,7 +15,7 @@ export default function QSelectBox({ title = '', options, onChange, value }) {
   }, [value])
 
   return (
-    <div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={() => setOpenSelect(!openSelect)}>
+    <div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={disabled ? () => {} : () => setOpenSelect(!openSelect)}>
       <p>{selected}</p>
       <ul className="select-item-wrap">
         {options?.map((option) => (
diff --git a/yarn.lock b/yarn.lock
index 6e7b5f2c..5a30b4b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -165,7 +165,7 @@
 
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.25.7":
   version "7.25.7"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.25.7.tgz#438f2c524071531d643c6f0188e1e28f130cebc7"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.7.tgz"
   integrity sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==
   dependencies:
     "@babel/highlight" "^7.25.7"
@@ -173,7 +173,7 @@
 
 "@babel/generator@^7.25.7":
   version "7.25.7"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.7.tgz#de86acbeb975a3e11ee92dd52223e6b03b479c56"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.25.7.tgz"
   integrity sha512-5Dqpl5fyV9pIAD62yK9P7fcA768uVPUyrQmqpqstHWgMma4feF1x/oFysBCVZLY5wJ2GkMUCdsNDnGZrPoR6rA==
   dependencies:
     "@babel/types" "^7.25.7"
@@ -183,7 +183,7 @@
 
 "@babel/helper-module-imports@^7.16.7":
   version "7.25.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.7.tgz#dba00d9523539152906ba49263e36d7261040472"
+  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.7.tgz"
   integrity sha512-o0xCgpNmRohmnoWKQ0Ij8IdddjyBFE4T2kagL/x6M3+4zUgc+4qTOUBoNe4XxDskt1HPKO007ZPiMgLDq2s7Kw==
   dependencies:
     "@babel/traverse" "^7.25.7"
@@ -191,17 +191,17 @@
 
 "@babel/helper-string-parser@^7.25.7":
   version "7.25.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz#d50e8d37b1176207b4fe9acedec386c565a44a54"
+  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz"
   integrity sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==
 
 "@babel/helper-validator-identifier@^7.25.7":
   version "7.25.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz#77b7f60c40b15c97df735b38a66ba1d7c3e93da5"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz"
   integrity sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==
 
 "@babel/highlight@^7.25.7":
   version "7.25.7"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.25.7.tgz#20383b5f442aa606e7b5e3043b0b1aafe9f37de5"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.25.7.tgz"
   integrity sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==
   dependencies:
     "@babel/helper-validator-identifier" "^7.25.7"
@@ -211,19 +211,26 @@
 
 "@babel/parser@^7.25.7":
   version "7.25.7"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.7.tgz#99b927720f4ddbfeb8cd195a363ed4532f87c590"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.25.7.tgz"
   integrity sha512-aZn7ETtQsjjGG5HruveUK06cU3Hljuhd9Iojm4M8WWv3wLE6OkE5PWbDUkItmMgegmccaITudyuW5RPYrYlgWw==
   dependencies:
     "@babel/types" "^7.25.7"
 
 "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.25.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.7.tgz#7ffb53c37a8f247c8c4d335e89cdf16a2e0d0fb6"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz"
   integrity sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.20.13", "@babel/runtime@^7.24.8":
+"@babel/runtime@^7.20.13":
+  version "7.25.0"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz"
+  integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/runtime@^7.24.8":
   version "7.25.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz"
   integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
@@ -232,7 +239,7 @@
 
 "@babel/template@^7.25.7":
   version "7.25.7"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.7.tgz#27f69ce382855d915b14ab0fe5fb4cbf88fa0769"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.25.7.tgz"
   integrity sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==
   dependencies:
     "@babel/code-frame" "^7.25.7"
@@ -241,7 +248,7 @@
 
 "@babel/traverse@^7.25.7":
   version "7.25.7"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.7.tgz#83e367619be1cab8e4f2892ef30ba04c26a40fa8"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.7.tgz"
   integrity sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg==
   dependencies:
     "@babel/code-frame" "^7.25.7"
@@ -254,7 +261,7 @@
 
 "@babel/types@^7.25.7":
   version "7.25.7"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.7.tgz#1b7725c1d3a59f328cb700ce704c46371e6eef9b"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.25.7.tgz"
   integrity sha512-vwIVdXG+j+FOpkwqHRcBgHLYNL7XMkufrlaFvL9o6Ai9sJn9+PdyIL5qa0XzTZw084c+u9LOls53eoZWP/W5WQ==
   dependencies:
     "@babel/helper-string-parser" "^7.25.7"
@@ -275,7 +282,7 @@
 
 "@emotion/babel-plugin@^11.12.0":
   version "11.12.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"
+  resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz"
   integrity sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==
   dependencies:
     "@babel/helper-module-imports" "^7.16.7"
@@ -292,7 +299,7 @@
 
 "@emotion/cache@^11.13.0", "@emotion/cache@^11.4.0":
   version "11.13.1"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
+  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz"
   integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
   dependencies:
     "@emotion/memoize" "^0.9.0"
@@ -303,17 +310,17 @@
 
 "@emotion/hash@^0.9.2":
   version "0.9.2"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
+  resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz"
   integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
 
 "@emotion/memoize@^0.9.0":
   version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
+  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz"
   integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
 
 "@emotion/react@^11.8.1":
   version "11.13.3"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.13.3.tgz#a69d0de2a23f5b48e0acf210416638010e4bd2e4"
+  resolved "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz"
   integrity sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==
   dependencies:
     "@babel/runtime" "^7.18.3"
@@ -327,7 +334,7 @@
 
 "@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.1":
   version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.2.tgz#e1c1a2e90708d5d85d81ccaee2dfeb3cc0cccf7a"
+  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz"
   integrity sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==
   dependencies:
     "@emotion/hash" "^0.9.2"
@@ -338,27 +345,27 @@
 
 "@emotion/sheet@^1.4.0":
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
+  resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz"
   integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
 
 "@emotion/unitless@^0.10.0":
   version "0.10.0"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
+  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz"
   integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
 
 "@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz#1a818a0b2c481efba0cf34e5ab1e0cb2dcb9dfaf"
+  resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz"
   integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
 
 "@emotion/utils@^1.4.0", "@emotion/utils@^1.4.1":
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.1.tgz#b3adbb43de12ee2149541c4f1337d2eb7774f0ad"
+  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz"
   integrity sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==
 
 "@emotion/weak-memoize@^0.4.0":
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
+  resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz"
   integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
 
 "@floating-ui/core@^1.6.0":
@@ -378,7 +385,7 @@
 
 "@floating-ui/dom@^1.0.1":
   version "1.6.11"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.11.tgz#8631857838d34ee5712339eb7cbdfb8ad34da723"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz"
   integrity sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==
   dependencies:
     "@floating-ui/core" "^1.6.0"
@@ -407,7 +414,7 @@
 
 "@floating-ui/utils@^0.2.8":
   version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz"
   integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
 "@formatjs/ecma402-abstract@2.0.0":
@@ -527,21 +534,6 @@
   resolved "https://registry.npmjs.org/@js-joda/core/-/core-5.6.3.tgz"
   integrity sha512-T1rRxzdqkEXcou0ZprN1q9yDRlvzCPLqmlNt5IIsGBzoEVgLCCYrKEwc84+TvsXuAc95VAZwtWD2zVsKPY4bcA==
 
-"@mapbox/node-pre-gyp@^1.0.0":
-  version "1.0.11"
-  resolved "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz"
-  integrity sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==
-  dependencies:
-    detect-libc "^2.0.0"
-    https-proxy-agent "^5.0.0"
-    make-dir "^3.1.0"
-    node-fetch "^2.6.7"
-    nopt "^5.0.0"
-    npmlog "^5.0.1"
-    rimraf "^3.0.2"
-    semver "^7.3.5"
-    tar "^6.1.11"
-
 "@next/env@14.2.3":
   version "14.2.3"
   resolved "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz"
@@ -549,49 +541,9 @@
 
 "@next/swc-darwin-arm64@14.2.3":
   version "14.2.3"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz#db1a05eb88c0224089b815ad10ac128ec79c2cdb"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz"
   integrity sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==
 
-"@next/swc-darwin-x64@14.2.3":
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz#a3f8af05b5f9a52ac3082e66ac29e125ab1d7b9c"
-  integrity sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==
-
-"@next/swc-linux-arm64-gnu@14.2.3":
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz#4e63f43879285b52554bfd39e6e0cc78a9b27bbf"
-  integrity sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==
-
-"@next/swc-linux-arm64-musl@14.2.3":
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz#ebdaed26214448b1e6f2c3e8b3cd29bfba387990"
-  integrity sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==
-
-"@next/swc-linux-x64-gnu@14.2.3":
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz#19e3bcc137c3b582a1ab867106817e5c90a20593"
-  integrity sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==
-
-"@next/swc-linux-x64-musl@14.2.3":
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz#794a539b98e064169cf0ff7741b2a4fb16adec7d"
-  integrity sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==
-
-"@next/swc-win32-arm64-msvc@14.2.3":
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz#eda9fa0fbf1ff9113e87ac2668ee67ce9e5add5a"
-  integrity sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==
-
-"@next/swc-win32-ia32-msvc@14.2.3":
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz#7c1190e3f640ab16580c6bdbd7d0e766b9920457"
-  integrity sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==
-
-"@next/swc-win32-x64-msvc@14.2.3":
-  version "14.2.3"
-  resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz"
-  integrity sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==
-
 "@nextui-org/accordion@2.0.38":
   version "2.0.38"
   resolved "https://registry.npmjs.org/@nextui-org/accordion/-/accordion-2.0.38.tgz"
@@ -1246,7 +1198,7 @@
     "@react-types/shared" "3.23.1"
     clsx "^1.2.1"
 
-"@nextui-org/system@2.2.5":
+"@nextui-org/system@>=2.0.0", "@nextui-org/system@>=2.1.0", "@nextui-org/system@2.2.5":
   version "2.2.5"
   resolved "https://registry.npmjs.org/@nextui-org/system/-/system-2.2.5.tgz"
   integrity sha512-nrX6768aiyWtpxX3OTFBIVWR+v9nlMsC3KaBinNfek97sNm7gAfTHi7q5kylE3L5yIMpNG+DclAKpuxgDQEmvw==
@@ -1299,7 +1251,7 @@
     "@react-types/tabs" "3.3.7"
     scroll-into-view-if-needed "3.0.10"
 
-"@nextui-org/theme@2.2.9":
+"@nextui-org/theme@>=2.1.0", "@nextui-org/theme@>=2.2.0", "@nextui-org/theme@2.2.9":
   version "2.2.9"
   resolved "https://registry.npmjs.org/@nextui-org/theme/-/theme-2.2.9.tgz"
   integrity sha512-TN2I9sMriLaj00pXsIMlg19+UHeOdjzS2JV0u4gjL14mSbQl5BYNxgbvU3gbMqkZZQ6OpwT4RnT8RS+ks6TXCw==
@@ -1520,7 +1472,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -1653,7 +1605,7 @@
     "@react-types/shared" "^3.23.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/focus@3.17.1", "@react-aria/focus@^3.17.1":
+"@react-aria/focus@^3.17.1", "@react-aria/focus@3.17.1":
   version "3.17.1"
   resolved "https://registry.npmjs.org/@react-aria/focus/-/focus-3.17.1.tgz"
   integrity sha512-FLTySoSNqX++u0nWZJPPN5etXY0WBxaIe/YuL/GTEeuqUIuC/2bJSaw5hlsM6T2yjy6Y/VAxBcKSdAFUlU6njQ==
@@ -1675,7 +1627,7 @@
     "@swc/helpers" "^0.5.0"
     clsx "^2.0.0"
 
-"@react-aria/form@3.0.5", "@react-aria/form@^3.0.5":
+"@react-aria/form@^3.0.5", "@react-aria/form@3.0.5":
   version "3.0.5"
   resolved "https://registry.npmjs.org/@react-aria/form/-/form-3.0.5.tgz"
   integrity sha512-n290jRwrrRXO3fS82MyWR+OKN7yznVesy5Q10IclSTVYHHI3VI53xtAPr/WzNjJR1um8aLhOcDNFKwnNIUUCsQ==
@@ -1705,7 +1657,7 @@
     "@react-types/shared" "^3.24.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/i18n@3.11.1", "@react-aria/i18n@^3.11.1":
+"@react-aria/i18n@^3.11.1", "@react-aria/i18n@3.11.1":
   version "3.11.1"
   resolved "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.11.1.tgz"
   integrity sha512-vuiBHw1kZruNMYeKkTGGnmPyMnM5T+gT8bz97H1FqIq1hQ6OPzmtBZ6W6l6OIMjeHI5oJo4utTwfZl495GALFQ==
@@ -1733,7 +1685,7 @@
     "@react-types/shared" "^3.24.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/interactions@3.21.3", "@react-aria/interactions@^3.21.3":
+"@react-aria/interactions@^3.21.3", "@react-aria/interactions@3.21.3":
   version "3.21.3"
   resolved "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.21.3.tgz"
   integrity sha512-BWIuf4qCs5FreDJ9AguawLVS0lV9UU+sK4CCnbCNNmYqOWY+1+gRXCsnOM32K+oMESBxilAjdHW5n1hsMqYMpA==
@@ -1753,7 +1705,7 @@
     "@react-types/shared" "^3.24.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/label@3.7.8", "@react-aria/label@^3.7.8":
+"@react-aria/label@^3.7.8", "@react-aria/label@3.7.8":
   version "3.7.8"
   resolved "https://registry.npmjs.org/@react-aria/label/-/label-3.7.8.tgz"
   integrity sha512-MzgTm5+suPA3KX7Ug6ZBK2NX9cin/RFLsv1BdafJ6CZpmUSpWnGE/yQfYUB7csN7j31OsZrD3/P56eShYWAQfg==
@@ -1762,7 +1714,7 @@
     "@react-types/shared" "^3.23.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/link@3.7.1", "@react-aria/link@^3.7.1":
+"@react-aria/link@^3.7.1", "@react-aria/link@3.7.1":
   version "3.7.1"
   resolved "https://registry.npmjs.org/@react-aria/link/-/link-3.7.1.tgz"
   integrity sha512-a4IaV50P3fXc7DQvEIPYkJJv26JknFbRzFT5MJOMgtzuhyJoQdILEUK6XHYjcSSNCA7uLgzpojArVk5Hz3lCpw==
@@ -1774,7 +1726,7 @@
     "@react-types/shared" "^3.23.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/listbox@3.12.1", "@react-aria/listbox@^3.12.1":
+"@react-aria/listbox@^3.12.1", "@react-aria/listbox@3.12.1":
   version "3.12.1"
   resolved "https://registry.npmjs.org/@react-aria/listbox/-/listbox-3.12.1.tgz"
   integrity sha512-7JiUp0NGykbv/HgSpmTY1wqhuf/RmjFxs1HZcNaTv8A+DlzgJYc7yQqFjP3ZA/z5RvJFuuIxggIYmgIFjaRYdA==
@@ -1796,7 +1748,7 @@
   dependencies:
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/menu@3.14.1", "@react-aria/menu@^3.14.1":
+"@react-aria/menu@^3.14.1", "@react-aria/menu@3.14.1":
   version "3.14.1"
   resolved "https://registry.npmjs.org/@react-aria/menu/-/menu-3.14.1.tgz"
   integrity sha512-BYliRb38uAzq05UOFcD5XkjA5foQoXRbcH3ZufBsc4kvh79BcP1PMW6KsXKGJ7dC/PJWUwCui6QL1kUg8PqMHA==
@@ -1815,7 +1767,7 @@
     "@react-types/shared" "^3.23.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/overlays@3.22.1", "@react-aria/overlays@^3.22.1":
+"@react-aria/overlays@^3.22.1", "@react-aria/overlays@3.22.1":
   version "3.22.1"
   resolved "https://registry.npmjs.org/@react-aria/overlays/-/overlays-3.22.1.tgz"
   integrity sha512-GHiFMWO4EQ6+j6b5QCnNoOYiyx1Gk8ZiwLzzglCI4q1NY5AG2EAmfU4Z1+Gtrf2S5Y0zHbumC7rs9GnPoGLUYg==
@@ -1860,7 +1812,7 @@
     "@react-types/shared" "^3.23.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/selection@3.18.1", "@react-aria/selection@^3.18.1":
+"@react-aria/selection@^3.18.1", "@react-aria/selection@3.18.1":
   version "3.18.1"
   resolved "https://registry.npmjs.org/@react-aria/selection/-/selection-3.18.1.tgz"
   integrity sha512-GSqN2jX6lh7v+ldqhVjAXDcrWS3N4IsKXxO6L6Ygsye86Q9q9Mq9twWDWWu5IjHD6LoVZLUBCMO+ENGbOkyqeQ==
@@ -1913,7 +1865,7 @@
     "@react-types/shared" "^3.24.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/ssr@3.9.4", "@react-aria/ssr@^3.9.4":
+"@react-aria/ssr@^3.9.4", "@react-aria/ssr@3.9.4":
   version "3.9.4"
   resolved "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.4.tgz"
   integrity sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ==
@@ -1973,7 +1925,7 @@
     "@react-types/tabs" "^3.3.7"
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/textfield@3.14.5", "@react-aria/textfield@^3.14.5":
+"@react-aria/textfield@^3.14.5", "@react-aria/textfield@3.14.5":
   version "3.14.5"
   resolved "https://registry.npmjs.org/@react-aria/textfield/-/textfield-3.14.5.tgz"
   integrity sha512-hj7H+66BjB1iTKKaFXwSZBZg88YT+wZboEXZ0DNdQB2ytzoz/g045wBItUuNi4ZjXI3P+0AOZznVMYadWBAmiA==
@@ -2014,7 +1966,7 @@
     "@react-types/tooltip" "^3.4.9"
     "@swc/helpers" "^0.5.0"
 
-"@react-aria/utils@3.24.1", "@react-aria/utils@^3.24.1":
+"@react-aria/utils@^3.24.1", "@react-aria/utils@3.24.1":
   version "3.24.1"
   resolved "https://registry.npmjs.org/@react-aria/utils/-/utils-3.24.1.tgz"
   integrity sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q==
@@ -2036,7 +1988,7 @@
     "@swc/helpers" "^0.5.0"
     clsx "^2.0.0"
 
-"@react-aria/visually-hidden@3.8.12", "@react-aria/visually-hidden@^3.8.12":
+"@react-aria/visually-hidden@^3.8.12", "@react-aria/visually-hidden@3.8.12":
   version "3.8.12"
   resolved "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.8.12.tgz"
   integrity sha512-Bawm+2Cmw3Xrlr7ARzl2RLtKh0lNUdJ0eNqzWcyx4c0VHUAWtThmH5l+HRqFUGzzutFZVo89SAy40BAbd0gjVw==
@@ -2046,7 +1998,7 @@
     "@react-types/shared" "^3.23.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/calendar@3.5.1", "@react-stately/calendar@^3.5.1":
+"@react-stately/calendar@^3.5.1", "@react-stately/calendar@3.5.1":
   version "3.5.1"
   resolved "https://registry.npmjs.org/@react-stately/calendar/-/calendar-3.5.1.tgz"
   integrity sha512-7l7QhqGUJ5AzWHfvZzbTe3J4t72Ht5BmhW4hlVI7flQXtfrmYkVtl3ZdytEZkkHmWGYZRW9b4IQTQGZxhtlElA==
@@ -2057,7 +2009,7 @@
     "@react-types/shared" "^3.23.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/checkbox@3.6.5", "@react-stately/checkbox@^3.6.5":
+"@react-stately/checkbox@^3.6.5", "@react-stately/checkbox@3.6.5":
   version "3.6.5"
   resolved "https://registry.npmjs.org/@react-stately/checkbox/-/checkbox-3.6.5.tgz"
   integrity sha512-IXV3f9k+LtmfQLE+DKIN41Q5QB/YBLDCB1YVx5PEdRp52S9+EACD5683rjVm8NVRDwjMi2SP6RnFRk7fVb5Azg==
@@ -2068,7 +2020,7 @@
     "@react-types/shared" "^3.23.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/collections@3.10.7", "@react-stately/collections@^3.10.7":
+"@react-stately/collections@^3.10.7", "@react-stately/collections@3.10.7":
   version "3.10.7"
   resolved "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.7.tgz"
   integrity sha512-KRo5O2MWVL8n3aiqb+XR3vP6akmHLhLWYZEmPKjIv0ghQaEebBTrN3wiEjtd6dzllv0QqcWvDLM1LntNfJ2TsA==
@@ -2084,7 +2036,7 @@
     "@react-types/shared" "^3.24.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/combobox@3.8.4", "@react-stately/combobox@^3.8.4":
+"@react-stately/combobox@^3.8.4", "@react-stately/combobox@3.8.4":
   version "3.8.4"
   resolved "https://registry.npmjs.org/@react-stately/combobox/-/combobox-3.8.4.tgz"
   integrity sha512-iLVGvKRRz0TeJXZhZyK783hveHpYA6xovOSdzSD+WGYpiPXo1QrcrNoH3AE0Z2sHtorU+8nc0j58vh5PB+m2AA==
@@ -2099,7 +2051,7 @@
     "@react-types/shared" "^3.23.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/datepicker@3.9.4", "@react-stately/datepicker@^3.9.4":
+"@react-stately/datepicker@^3.9.4", "@react-stately/datepicker@3.9.4":
   version "3.9.4"
   resolved "https://registry.npmjs.org/@react-stately/datepicker/-/datepicker-3.9.4.tgz"
   integrity sha512-yBdX01jn6gq4NIVvHIqdjBUPo+WN8Bujc4OnPw+ZnfA4jI0eIgq04pfZ84cp1LVXW0IB0VaCu1AlQ/kvtZjfGA==
@@ -2120,7 +2072,7 @@
   dependencies:
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/form@3.0.3", "@react-stately/form@^3.0.3":
+"@react-stately/form@^3.0.3", "@react-stately/form@3.0.3":
   version "3.0.3"
   resolved "https://registry.npmjs.org/@react-stately/form/-/form-3.0.3.tgz"
   integrity sha512-92YYBvlHEWUGUpXgIaQ48J50jU9XrxfjYIN8BTvvhBHdD63oWgm8DzQnyT/NIAMzdLnhkg7vP+fjG8LjHeyIAg==
@@ -2147,7 +2099,7 @@
     "@react-types/shared" "^3.24.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/list@3.10.5", "@react-stately/list@^3.10.5":
+"@react-stately/list@^3.10.5", "@react-stately/list@3.10.5":
   version "3.10.5"
   resolved "https://registry.npmjs.org/@react-stately/list/-/list-3.10.5.tgz"
   integrity sha512-fV9plO+6QDHiewsYIhboxcDhF17GO95xepC5ki0bKXo44gr14g/LSo/BMmsaMnV+1BuGdBunB05bO4QOIaigXA==
@@ -2169,7 +2121,7 @@
     "@react-types/shared" "^3.24.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/menu@3.7.1", "@react-stately/menu@^3.7.1":
+"@react-stately/menu@^3.7.1", "@react-stately/menu@3.7.1":
   version "3.7.1"
   resolved "https://registry.npmjs.org/@react-stately/menu/-/menu-3.7.1.tgz"
   integrity sha512-mX1w9HHzt+xal1WIT2xGrTQsoLvDwuB2R1Er1MBABs//MsJzccycatcgV/J/28m6tO5M9iuFQQvLV+i1dCtodg==
@@ -2179,7 +2131,7 @@
     "@react-types/shared" "^3.23.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/overlays@3.6.7", "@react-stately/overlays@^3.6.7":
+"@react-stately/overlays@^3.6.7", "@react-stately/overlays@3.6.7":
   version "3.6.7"
   resolved "https://registry.npmjs.org/@react-stately/overlays/-/overlays-3.6.7.tgz"
   integrity sha512-6zp8v/iNUm6YQap0loaFx6PlvN8C0DgWHNlrlzMtMmNuvjhjR0wYXVaTfNoUZBWj25tlDM81ukXOjpRXg9rLrw==
@@ -2197,7 +2149,7 @@
     "@react-types/overlays" "^3.8.9"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/radio@3.10.4", "@react-stately/radio@^3.10.4":
+"@react-stately/radio@^3.10.4", "@react-stately/radio@3.10.4":
   version "3.10.4"
   resolved "https://registry.npmjs.org/@react-stately/radio/-/radio-3.10.4.tgz"
   integrity sha512-kCIc7tAl4L7Hu4Wt9l2jaa+MzYmAJm0qmC8G8yPMbExpWbLRu6J8Un80GZu+JxvzgDlqDyrVvyv9zFifwH/NkQ==
@@ -2230,7 +2182,7 @@
     "@react-types/shared" "^3.24.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/slider@3.5.4", "@react-stately/slider@^3.5.4":
+"@react-stately/slider@^3.5.4", "@react-stately/slider@3.5.4":
   version "3.5.4"
   resolved "https://registry.npmjs.org/@react-stately/slider/-/slider-3.5.4.tgz"
   integrity sha512-Jsf7K17dr93lkNKL9ij8HUcoM1sPbq8TvmibD6DhrK9If2lje+OOL8y4n4qreUnfMT56HCAeS9wCO3fg3eMyrw==
@@ -2240,7 +2192,7 @@
     "@react-types/slider" "^3.7.3"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/table@3.11.8", "@react-stately/table@^3.11.8":
+"@react-stately/table@^3.11.8", "@react-stately/table@3.11.8":
   version "3.11.8"
   resolved "https://registry.npmjs.org/@react-stately/table/-/table-3.11.8.tgz"
   integrity sha512-EdyRW3lT1/kAVDp5FkEIi1BQ7tvmD2YgniGdLuW/l9LADo0T+oxZqruv60qpUS6sQap+59Riaxl91ClDxrJnpg==
@@ -2255,7 +2207,7 @@
     "@react-types/table" "^3.9.5"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/tabs@3.6.6", "@react-stately/tabs@^3.6.6":
+"@react-stately/tabs@^3.6.6", "@react-stately/tabs@3.6.6":
   version "3.6.6"
   resolved "https://registry.npmjs.org/@react-stately/tabs/-/tabs-3.6.6.tgz"
   integrity sha512-sOLxorH2uqjAA+v1ppkMCc2YyjgqvSGeBDgtR/lyPSDd4CVMoTExszROX2dqG0c8il9RQvzFuufUtQWMY6PgSA==
@@ -2265,7 +2217,7 @@
     "@react-types/tabs" "^3.3.7"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/toggle@3.7.4", "@react-stately/toggle@^3.7.4":
+"@react-stately/toggle@^3.7.4", "@react-stately/toggle@3.7.4":
   version "3.7.4"
   resolved "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.7.4.tgz"
   integrity sha512-CoYFe9WrhLkDP4HGDpJYQKwfiYCRBAeoBQHv+JWl5eyK61S8xSwoHsveYuEZ3bowx71zyCnNAqWRrmNOxJ4CKA==
@@ -2283,7 +2235,7 @@
     "@react-types/checkbox" "^3.8.3"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/tooltip@3.4.9", "@react-stately/tooltip@^3.4.9":
+"@react-stately/tooltip@^3.4.9", "@react-stately/tooltip@3.4.9":
   version "3.4.9"
   resolved "https://registry.npmjs.org/@react-stately/tooltip/-/tooltip-3.4.9.tgz"
   integrity sha512-P7CDJsdoKarz32qFwf3VNS01lyC+63gXpDZG31pUu+EO5BeQd4WKN/AH1Beuswpr4GWzxzFc1aXQgERFGVzraA==
@@ -2292,7 +2244,7 @@
     "@react-types/tooltip" "^3.4.9"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/tree@3.8.1", "@react-stately/tree@^3.8.1":
+"@react-stately/tree@^3.8.1", "@react-stately/tree@3.8.1":
   version "3.8.1"
   resolved "https://registry.npmjs.org/@react-stately/tree/-/tree-3.8.1.tgz"
   integrity sha512-LOdkkruJWch3W89h4B/bXhfr0t0t1aRfEp+IMrrwdRAl23NaPqwl5ILHs4Xu5XDHqqhg8co73pHrJwUyiTWEjw==
@@ -2303,7 +2255,7 @@
     "@react-types/shared" "^3.23.1"
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/utils@3.10.1", "@react-stately/utils@^3.10.1":
+"@react-stately/utils@^3.10.1", "@react-stately/utils@3.10.1":
   version "3.10.1"
   resolved "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.1.tgz"
   integrity sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg==
@@ -2317,7 +2269,7 @@
   dependencies:
     "@swc/helpers" "^0.5.0"
 
-"@react-stately/virtualizer@3.7.1", "@react-stately/virtualizer@^3.7.1":
+"@react-stately/virtualizer@^3.7.1", "@react-stately/virtualizer@3.7.1":
   version "3.7.1"
   resolved "https://registry.npmjs.org/@react-stately/virtualizer/-/virtualizer-3.7.1.tgz"
   integrity sha512-voHgE6EQ+oZaLv6u2umKxakvIKNkCQuUihqKACTjdslp7SJh4Mvs3oLBI0hf0JOh+rCcFIKDvQtFwy1fXFRYBA==
@@ -2333,7 +2285,7 @@
   dependencies:
     "@react-types/shared" "^3.23.1"
 
-"@react-types/breadcrumbs@3.7.5", "@react-types/breadcrumbs@^3.7.5":
+"@react-types/breadcrumbs@^3.7.5", "@react-types/breadcrumbs@3.7.5":
   version "3.7.5"
   resolved "https://registry.npmjs.org/@react-types/breadcrumbs/-/breadcrumbs-3.7.5.tgz"
   integrity sha512-lV9IDYsMiu2TgdMIjEmsOE0YWwjb3jhUNK1DCZZfq6uWuiHLgyx2EncazJBUWSjHJ4ta32j7xTuXch+8Ai6u/A==
@@ -2341,7 +2293,7 @@
     "@react-types/link" "^3.5.5"
     "@react-types/shared" "^3.23.1"
 
-"@react-types/button@3.9.4", "@react-types/button@^3.9.4":
+"@react-types/button@^3.9.4", "@react-types/button@3.9.4":
   version "3.9.4"
   resolved "https://registry.npmjs.org/@react-types/button/-/button-3.9.4.tgz"
   integrity sha512-raeQBJUxBp0axNF74TXB8/H50GY8Q3eV6cEKMbZFP1+Dzr09Ngv0tJBeW0ewAxAguNH5DRoMUAUGIXtSXskVdA==
@@ -2355,7 +2307,7 @@
   dependencies:
     "@react-types/shared" "^3.24.1"
 
-"@react-types/calendar@3.4.6", "@react-types/calendar@^3.4.6":
+"@react-types/calendar@^3.4.6", "@react-types/calendar@3.4.6":
   version "3.4.6"
   resolved "https://registry.npmjs.org/@react-types/calendar/-/calendar-3.4.6.tgz"
   integrity sha512-WSntZPwtvsIYWvBQRAPvuCn55UTJBZroTvX0vQvWykJRQnPAI20G1hMQ3dNsnAL+gLZUYxBXn66vphmjUuSYew==
@@ -2363,7 +2315,7 @@
     "@internationalized/date" "^3.5.4"
     "@react-types/shared" "^3.23.1"
 
-"@react-types/checkbox@3.8.1", "@react-types/checkbox@^3.8.1":
+"@react-types/checkbox@^3.8.1", "@react-types/checkbox@3.8.1":
   version "3.8.1"
   resolved "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.8.1.tgz"
   integrity sha512-5/oVByPw4MbR/8QSdHCaalmyWC71H/QGgd4aduTJSaNi825o+v/hsN2/CH7Fq9atkLKsC8fvKD00Bj2VGaKriQ==
@@ -2377,14 +2329,14 @@
   dependencies:
     "@react-types/shared" "^3.24.1"
 
-"@react-types/combobox@3.11.1", "@react-types/combobox@^3.11.1":
+"@react-types/combobox@^3.11.1", "@react-types/combobox@3.11.1":
   version "3.11.1"
   resolved "https://registry.npmjs.org/@react-types/combobox/-/combobox-3.11.1.tgz"
   integrity sha512-UNc3OHt5cUt5gCTHqhQIqhaWwKCpaNciD8R7eQazmHiA9fq8ROlV+7l3gdNgdhJbTf5Bu/V5ISnN7Y1xwL3zqQ==
   dependencies:
     "@react-types/shared" "^3.23.1"
 
-"@react-types/datepicker@3.7.4", "@react-types/datepicker@^3.7.4":
+"@react-types/datepicker@^3.7.4", "@react-types/datepicker@3.7.4":
   version "3.7.4"
   resolved "https://registry.npmjs.org/@react-types/datepicker/-/datepicker-3.7.4.tgz"
   integrity sha512-ZfvgscvNzBJpYyVWg3nstJtA/VlWLwErwSkd1ivZYam859N30w8yH+4qoYLa6FzWLCFlrsRHyvtxlEM7lUAt5A==
@@ -2402,7 +2354,7 @@
     "@react-types/overlays" "^3.8.9"
     "@react-types/shared" "^3.24.1"
 
-"@react-types/grid@3.2.6", "@react-types/grid@^3.2.6":
+"@react-types/grid@^3.2.6", "@react-types/grid@3.2.6":
   version "3.2.6"
   resolved "https://registry.npmjs.org/@react-types/grid/-/grid-3.2.6.tgz"
   integrity sha512-XfHenL2jEBUYrhKiPdeM24mbLRXUn79wVzzMhrNYh24nBwhsPPpxF+gjFddT3Cy8dt6tRInfT6pMEu9nsXwaHw==
@@ -2416,7 +2368,7 @@
   dependencies:
     "@react-types/shared" "^3.24.1"
 
-"@react-types/link@3.5.5", "@react-types/link@^3.5.5":
+"@react-types/link@^3.5.5", "@react-types/link@3.5.5":
   version "3.5.5"
   resolved "https://registry.npmjs.org/@react-types/link/-/link-3.5.5.tgz"
   integrity sha512-G6P5WagHDR87npN7sEuC5IIgL1GsoY4WFWKO4734i2CXRYx24G9P0Su3AX4GA3qpspz8sK1AWkaCzBMmvnunfw==
@@ -2430,7 +2382,7 @@
   dependencies:
     "@react-types/shared" "^3.24.1"
 
-"@react-types/menu@3.9.9", "@react-types/menu@^3.9.9":
+"@react-types/menu@^3.9.9", "@react-types/menu@3.9.9":
   version "3.9.9"
   resolved "https://registry.npmjs.org/@react-types/menu/-/menu-3.9.9.tgz"
   integrity sha512-FamUaPVs1Fxr4KOMI0YcR2rYZHoN7ypGtgiEiJ11v/tEPjPPGgeKDxii0McCrdOkjheatLN1yd2jmMwYj6hTDg==
@@ -2438,7 +2390,7 @@
     "@react-types/overlays" "^3.8.7"
     "@react-types/shared" "^3.23.1"
 
-"@react-types/overlays@3.8.7", "@react-types/overlays@^3.8.7":
+"@react-types/overlays@^3.8.7", "@react-types/overlays@3.8.7":
   version "3.8.7"
   resolved "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.7.tgz"
   integrity sha512-zCOYvI4at2DkhVpviIClJ7bRrLXYhSg3Z3v9xymuPH3mkiuuP/dm8mUCtkyY4UhVeUTHmrQh1bzaOP00A+SSQA==
@@ -2452,27 +2404,20 @@
   dependencies:
     "@react-types/shared" "^3.24.1"
 
-"@react-types/progress@3.5.4", "@react-types/progress@^3.5.4":
+"@react-types/progress@^3.5.4", "@react-types/progress@3.5.4":
   version "3.5.4"
   resolved "https://registry.npmjs.org/@react-types/progress/-/progress-3.5.4.tgz"
   integrity sha512-JNc246sTjasPyx5Dp7/s0rp3Bz4qlu4LrZTulZlxWyb53WgBNL7axc26CCi+I20rWL9+c7JjhrRxnLl/1cLN5g==
   dependencies:
     "@react-types/shared" "^3.23.1"
 
-"@react-types/radio@3.8.1", "@react-types/radio@^3.8.1":
+"@react-types/radio@^3.8.1", "@react-types/radio@3.8.1":
   version "3.8.1"
   resolved "https://registry.npmjs.org/@react-types/radio/-/radio-3.8.1.tgz"
   integrity sha512-bK0gio/qj1+0Ldu/3k/s9BaOZvnnRgvFtL3u5ky479+aLG5qf1CmYed3SKz8ErZ70JkpuCSrSwSCFf0t1IHovw==
   dependencies:
     "@react-types/shared" "^3.23.1"
 
-"@react-types/select@3.9.4":
-  version "3.9.4"
-  resolved "https://registry.npmjs.org/@react-types/select/-/select-3.9.4.tgz"
-  integrity sha512-xI7dnOW2st91fPPcv6hdtrTdcfetYiqZuuVPZ5TRobY7Q10/Zqqe/KqtOw1zFKUj9xqNJe4Ov3xP5GSdcO60Eg==
-  dependencies:
-    "@react-types/shared" "^3.23.1"
-
 "@react-types/select@^3.9.6":
   version "3.9.6"
   resolved "https://registry.npmjs.org/@react-types/select/-/select-3.9.6.tgz"
@@ -2480,7 +2425,14 @@
   dependencies:
     "@react-types/shared" "^3.24.1"
 
-"@react-types/shared@3.23.1", "@react-types/shared@^3.23.1":
+"@react-types/select@3.9.4":
+  version "3.9.4"
+  resolved "https://registry.npmjs.org/@react-types/select/-/select-3.9.4.tgz"
+  integrity sha512-xI7dnOW2st91fPPcv6hdtrTdcfetYiqZuuVPZ5TRobY7Q10/Zqqe/KqtOw1zFKUj9xqNJe4Ov3xP5GSdcO60Eg==
+  dependencies:
+    "@react-types/shared" "^3.23.1"
+
+"@react-types/shared@^3.23.1", "@react-types/shared@3.23.1":
   version "3.23.1"
   resolved "https://registry.npmjs.org/@react-types/shared/-/shared-3.23.1.tgz"
   integrity sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw==
@@ -2504,7 +2456,7 @@
   dependencies:
     "@react-types/shared" "^3.24.1"
 
-"@react-types/table@3.9.5", "@react-types/table@^3.9.5":
+"@react-types/table@^3.9.5", "@react-types/table@3.9.5":
   version "3.9.5"
   resolved "https://registry.npmjs.org/@react-types/table/-/table-3.9.5.tgz"
   integrity sha512-fgM2j9F/UR4Anmd28CueghCgBwOZoCVyN8fjaIFPd2MN4gCwUUfANwxLav65gZk4BpwUXGoQdsW+X50L3555mg==
@@ -2512,21 +2464,21 @@
     "@react-types/grid" "^3.2.6"
     "@react-types/shared" "^3.23.1"
 
-"@react-types/tabs@3.3.7", "@react-types/tabs@^3.3.7":
+"@react-types/tabs@^3.3.7", "@react-types/tabs@3.3.7":
   version "3.3.7"
   resolved "https://registry.npmjs.org/@react-types/tabs/-/tabs-3.3.7.tgz"
   integrity sha512-ZdLe5xOcFX6+/ni45Dl2jO0jFATpTnoSqj6kLIS/BYv8oh0n817OjJkLf+DS3CLfNjApJWrHqAk34xNh6nRnEg==
   dependencies:
     "@react-types/shared" "^3.23.1"
 
-"@react-types/textfield@3.9.3", "@react-types/textfield@^3.9.3":
+"@react-types/textfield@^3.9.3", "@react-types/textfield@3.9.3":
   version "3.9.3"
   resolved "https://registry.npmjs.org/@react-types/textfield/-/textfield-3.9.3.tgz"
   integrity sha512-DoAY6cYOL0pJhgNGI1Rosni7g72GAt4OVr2ltEx2S9ARmFZ0DBvdhA9lL2nywcnKMf27PEJcKMXzXc10qaHsJw==
   dependencies:
     "@react-types/shared" "^3.23.1"
 
-"@react-types/tooltip@3.4.9", "@react-types/tooltip@^3.4.9":
+"@react-types/tooltip@^3.4.9", "@react-types/tooltip@3.4.9":
   version "3.4.9"
   resolved "https://registry.npmjs.org/@react-types/tooltip/-/tooltip-3.4.9.tgz"
   integrity sha512-wZ+uF1+Zc43qG+cOJzioBmLUNjRa7ApdcT0LI1VvaYvH5GdfjzUJOorLX9V/vAci0XMJ50UZ+qsh79aUlw2yqg==
@@ -2539,7 +2491,7 @@
   resolved "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz"
   integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
 
-"@swc/helpers@0.5.5", "@swc/helpers@^0.5.0":
+"@swc/helpers@^0.5.0", "@swc/helpers@0.5.5":
   version "0.5.5"
   resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz"
   integrity sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==
@@ -4030,24 +3982,24 @@
 
 "@types/parse-json@^4.0.0":
   version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
+  resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
 "@types/prop-types@*":
   version "15.7.13"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz"
   integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
 
 "@types/react-transition-group@^4.4.0":
   version "4.4.11"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5"
+  resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz"
   integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
+"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0":
   version "18.3.11"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.11.tgz#9d530601ff843ee0d7030d4227ea4360236bd537"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz"
   integrity sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==
   dependencies:
     "@types/prop-types" "*"
@@ -4066,11 +4018,6 @@ abab@^2.0.5, abab@^2.0.6:
   resolved "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz"
   integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
 abort-controller@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz"
@@ -4121,13 +4068,6 @@ ag-grid-react@^32.0.2:
     ag-grid-community "32.1.0"
     prop-types "^15.8.1"
 
-agent-base@6:
-  version "6.0.2"
-  resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
-  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
-  dependencies:
-    debug "4"
-
 agent-base@^7.0.2, agent-base@^7.1.0:
   version "7.1.1"
   resolved "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz"
@@ -4135,6 +4075,13 @@ agent-base@^7.0.2, agent-base@^7.1.0:
   dependencies:
     debug "^4.3.4"
 
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
@@ -4147,7 +4094,7 @@ ansi-regex@^6.0.1:
 
 ansi-styles@^3.2.1:
   version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
   dependencies:
     color-convert "^1.9.0"
@@ -4177,19 +4124,6 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-"aproba@^1.0.3 || ^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz"
-  integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
-
-are-we-there-yet@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz"
-  integrity sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^3.6.0"
-
 arg@^5.0.2:
   version "5.0.2"
   resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz"
@@ -4202,7 +4136,7 @@ asynckit@^0.4.0:
 
 axios@^1.6.2:
   version "1.7.7"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.7.tgz#2f554296f9892a72ac8d8e4c5b79c14a91d0a47f"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz"
   integrity sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==
   dependencies:
     follow-redirects "^1.15.6"
@@ -4220,7 +4154,7 @@ axios@^1.7.3:
 
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz"
   integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -4257,14 +4191,6 @@ body-scroll-lock@^3.1.5:
   resolved "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz"
   integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
 
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
 brace-expansion@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz"
@@ -4299,14 +4225,14 @@ buffer@^6.0.3:
 
 busboy@1.6.0:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
+  resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz"
   integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
   dependencies:
     streamsearch "^1.1.0"
 
 callsites@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 camelcase-css@^2.0.1:
@@ -4319,25 +4245,16 @@ caniuse-lite@^1.0.30001579:
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001634.tgz"
   integrity sha512-fbBYXQ9q3+yp1q1gBk86tOFs4pyn/yxFm5ZNP18OXJDfA3txImOY9PhfxVggZ4vRHDqoU8NrKU81eN0OtzOgRA==
 
-canvas@^2.8.0:
-  version "2.11.2"
-  resolved "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz"
-  integrity sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==
-  dependencies:
-    "@mapbox/node-pre-gyp" "^1.0.0"
-    nan "^2.17.0"
-    simple-get "^3.0.3"
-
 chalk@^2.4.2:
   version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
   dependencies:
     ansi-styles "^3.2.1"
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
+chokidar@^3.5.3, "chokidar@>=3.0.0 <4.0.0":
   version "3.6.0"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -4352,22 +4269,22 @@ chalk@^2.4.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-chownr@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz"
-  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
-
 classnames@^2.3.1:
   version "2.5.1"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
-client-only@0.0.1, client-only@^0.0.1:
+client-only@^0.0.1, client-only@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-clsx@^1.1.1, clsx@^1.2.1:
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
+clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -4379,7 +4296,7 @@ clsx@^2.0.0, clsx@^2.1.0:
 
 color-convert@^1.9.0:
   version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
   dependencies:
     color-name "1.1.3"
@@ -4391,16 +4308,16 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-
 color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
 color-string@^1.9.0:
   version "1.9.1"
   resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz"
@@ -4409,16 +4326,6 @@ color-string@^1.9.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color-support@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz"
-  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
-
-color2k@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz"
-  integrity sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==
-
 color@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/color/-/color-4.2.3.tgz"
@@ -4427,6 +4334,11 @@ color@^4.2.3:
     color-convert "^2.0.1"
     color-string "^1.9.0"
 
+color2k@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz"
+  integrity sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
@@ -4434,11 +4346,6 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2:
-  version "2.20.3"
-  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 commander@^11.0.0:
   version "11.1.0"
   resolved "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz"
@@ -4449,6 +4356,11 @@ commander@^4.0.0:
   resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@2:
+  version "2.20.3"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 complex.js@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/complex.js/-/complex.js-2.1.1.tgz"
@@ -4459,11 +4371,6 @@ compute-scroll-into-view@^3.0.2:
   resolved "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz"
   integrity sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==
 
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
-  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
-
 concaveman@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/concaveman/-/concaveman-1.2.1.tgz"
@@ -4474,19 +4381,14 @@ concaveman@^1.2.1:
     robust-predicates "^2.0.4"
     tinyqueue "^2.0.3"
 
-console-control-strings@^1.0.0, console-control-strings@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz"
-  integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
-
 convert-source-map@^1.5.0:
   version "1.9.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
 convertapi@^1.14.0:
   version "1.14.0"
-  resolved "https://registry.yarnpkg.com/convertapi/-/convertapi-1.14.0.tgz#a291a98cb986ae1e0f2340a130adbe17f65c8c76"
+  resolved "https://registry.npmjs.org/convertapi/-/convertapi-1.14.0.tgz"
   integrity sha512-9Rzkn+Mjs4jVLQ5pRUC8KpIjnT9WFUkuJZ5yjCJaDJsDM7Na2lWPKtDJdkfKcYCNDuo1h+OYZedne5SLp60EkQ==
   dependencies:
     axios "^1.6.2"
@@ -4498,7 +4400,7 @@ cookie@0.6.0:
 
 cosmiconfig@^7.0.0:
   version "7.1.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz"
   integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
   dependencies:
     "@types/parse-json" "^4.0.0"
@@ -4540,7 +4442,7 @@ cssstyle@^2.3.0:
 
 csstype@^3.0.2:
   version "3.1.3"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
 d3-array@1:
@@ -4576,35 +4478,28 @@ date-fns@^3.3.1:
 
 dayjs@^1.11.13:
   version "1.11.13"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz"
   integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
 
-debug@4, debug@^4.3.3, debug@^4.3.4:
+debug@^4.3.1:
+  version "4.3.7"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+  dependencies:
+    ms "^2.1.3"
+
+debug@^4.3.3, debug@^4.3.4, debug@4:
   version "4.3.5"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz"
   integrity sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==
   dependencies:
     ms "2.1.2"
 
-debug@^4.3.1:
-  version "4.3.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
-  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
-  dependencies:
-    ms "^2.1.3"
-
 decimal.js@^10.3.1, decimal.js@^10.4.3:
   version "10.4.3"
   resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz"
   integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
 
-decompress-response@^4.2.0:
-  version "4.2.1"
-  resolved "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz"
-  integrity sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==
-  dependencies:
-    mimic-response "^2.0.0"
-
 deepmerge@4.3.1:
   version "4.3.1"
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz"
@@ -4620,16 +4515,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz"
-  integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
-
-detect-libc@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz"
-  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
-
 detect-node-es@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz"
@@ -4647,7 +4532,7 @@ dlv@^1.1.3:
 
 dom-helpers@^5.0.1:
   version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
   dependencies:
     "@babel/runtime" "^7.8.7"
@@ -4689,7 +4574,7 @@ emoji-regex@^9.2.2:
 
 error-ex@^1.3.1:
   version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
   dependencies:
     is-arrayish "^0.2.1"
@@ -4701,12 +4586,12 @@ escape-latex@^1.2.0:
 
 escape-string-regexp@^1.0.5:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
 escape-string-regexp@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
 escodegen@^2.0.0:
@@ -4785,7 +4670,7 @@ fill-range@^7.1.1:
 
 find-root@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
   integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 
 flat@^5.0.2:
@@ -4820,25 +4705,13 @@ fraction.js@^4.3.7:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-framer-motion@^11.2.13:
+framer-motion@^11.2.13, framer-motion@>=10.17.0:
   version "11.3.21"
   resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.21.tgz"
   integrity sha512-D+hfIsvzV8eL/iycld4K+tKlg2Q2LdwnrcBEohtGw3cG1AIuNYATbT5RUqIM1ndsAk+EfGhoSGf0UaiFodc5Tw==
   dependencies:
     tslib "^2.4.0"
 
-fs-minipass@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz"
-  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
-  dependencies:
-    minipass "^3.0.0"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
-  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
-
 fs@^0.0.1-security:
   version "0.0.1-security"
   resolved "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz"
@@ -4846,7 +4719,7 @@ fs@^0.0.1-security:
 
 fsevents@~2.3.2:
   version "2.3.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 function-bind@^1.1.2:
@@ -4854,21 +4727,6 @@ function-bind@^1.1.2:
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
-gauge@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz"
-  integrity sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==
-  dependencies:
-    aproba "^1.0.3 || ^2.0.0"
-    color-support "^1.1.2"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.1"
-    object-assign "^4.1.1"
-    signal-exit "^3.0.0"
-    string-width "^4.2.3"
-    strip-ansi "^6.0.1"
-    wide-align "^1.1.2"
-
 geojson-equality-ts@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/geojson-equality-ts/-/geojson-equality-ts-1.0.2.tgz"
@@ -4913,21 +4771,9 @@ glob@^10.3.10:
     minipass "^7.1.2"
     path-scurry "^1.11.1"
 
-glob@^7.1.3:
-  version "7.2.3"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
-  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.1.1"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 globals@^11.1.0:
   version "11.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 graceful-fs@^4.2.11:
@@ -4942,14 +4788,9 @@ hamt_plus@1.0.2:
 
 has-flag@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
   integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
 
-has-unicode@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz"
-  integrity sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==
-
 hasown@^2.0.0:
   version "2.0.2"
   resolved "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz"
@@ -4959,7 +4800,7 @@ hasown@^2.0.0:
 
 hoist-non-react-statics@^3.3.1:
   version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
   dependencies:
     react-is "^16.7.0"
@@ -5004,7 +4845,7 @@ https-proxy-agent@^7.0.0:
     agent-base "^7.0.2"
     debug "4"
 
-iconv-lite@0.6.3, iconv-lite@^0.6.3:
+iconv-lite@^0.6.3, iconv-lite@0.6.3:
   version "0.6.3"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -5023,21 +4864,13 @@ immutable@^4.0.0:
 
 import-fresh@^3.2.1:
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
   dependencies:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
-  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@^2.0.3, inherits@^2.0.4:
+inherits@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -5080,7 +4913,7 @@ iron-webcrypto@1.2.1:
 
 is-arrayish@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
 is-arrayish@^0.3.1:
@@ -5167,7 +5000,7 @@ jiti@^1.21.0:
 
 js-cookie@^3.0.5:
   version "3.0.5"
-  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  resolved "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz"
   integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
 
 js-md4@^0.3.2:
@@ -5215,12 +5048,12 @@ jsdom@^19.0.0:
 
 jsesc@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
+  resolved "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz"
   integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
 
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
-  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
 jsonwebtoken@^9.0.0:
@@ -5370,13 +5203,6 @@ lru-cache@^10.2.0:
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz"
   integrity sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==
 
-make-dir@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz"
-  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
-  dependencies:
-    semver "^6.0.0"
-
 marchingsquares@^1.3.3:
   version "1.3.3"
   resolved "https://registry.npmjs.org/marchingsquares/-/marchingsquares-1.3.3.tgz"
@@ -5399,7 +5225,7 @@ mathjs@^13.0.2:
 
 memoize-one@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz"
   integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
 
 merge2@^1.3.0:
@@ -5427,18 +5253,6 @@ mime-types@^2.1.12:
   dependencies:
     mime-db "1.52.0"
 
-mimic-response@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz"
-  integrity sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==
-
-minimatch@^3.1.1:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
-  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
-  dependencies:
-    brace-expansion "^1.1.7"
-
 minimatch@^9.0.4:
   version "9.0.4"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz"
@@ -5446,44 +5260,24 @@ minimatch@^9.0.4:
   dependencies:
     brace-expansion "^2.0.1"
 
-minipass@^3.0.0:
-  version "3.3.6"
-  resolved "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz"
-  integrity sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==
-  dependencies:
-    yallist "^4.0.0"
-
-minipass@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz"
-  integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
-
-"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0":
   version "7.1.2"
   resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
-minizlib@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz"
-  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
-  dependencies:
-    minipass "^3.0.0"
-    yallist "^4.0.0"
+minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
-mkdirp@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
-ms@2.1.2, ms@^2.1.1:
+ms@^2.1.1, ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
 ms@^2.1.3:
   version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
 mssql@^11.0.1:
@@ -5507,11 +5301,6 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@^2.17.0:
-  version "2.20.0"
-  resolved "https://registry.npmjs.org/nan/-/nan-2.20.0.tgz"
-  integrity sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw==
-
 nanoid@^3.3.6, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
@@ -5554,35 +5343,11 @@ next@14.2.3:
     "@next/swc-win32-ia32-msvc" "14.2.3"
     "@next/swc-win32-x64-msvc" "14.2.3"
 
-node-fetch@^2.6.7:
-  version "2.7.0"
-  resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz"
-  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
-  dependencies:
-    whatwg-url "^5.0.0"
-
-nopt@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz"
-  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
-  dependencies:
-    abbrev "1"
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
-npmlog@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz"
-  integrity sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==
-  dependencies:
-    are-we-there-yet "^2.0.0"
-    console-control-strings "^1.1.0"
-    gauge "^3.0.0"
-    set-blocking "^2.0.0"
-
 nwsapi@^2.2.0:
   version "2.2.10"
   resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.10.tgz"
@@ -5598,13 +5363,6 @@ object-hash@^3.0.0:
   resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
-once@^1.3.0, once@^1.3.1:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
-  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
-  dependencies:
-    wrappy "1"
-
 open@^8.0.0:
   version "8.4.2"
   resolved "https://registry.npmjs.org/open/-/open-8.4.2.tgz"
@@ -5616,14 +5374,14 @@ open@^8.0.0:
 
 parent-module@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
   integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
   dependencies:
     callsites "^3.0.0"
 
 parse-json@^5.0.0:
   version "5.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
@@ -5636,11 +5394,6 @@ parse5@6.0.1:
   resolved "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
-  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
-
 path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
@@ -5661,7 +5414,7 @@ path-scurry@^1.11.1:
 
 path-type@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
 picocolors@^1.0.0:
@@ -5746,6 +5499,15 @@ postcss-value-parser@^4.0.0:
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@^8, postcss@^8.0.0, postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@>=8.0.9:
+  version "8.4.38"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz"
+  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.2.0"
+
 postcss@8.4.31:
   version "8.4.31"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz"
@@ -5755,15 +5517,6 @@ postcss@8.4.31:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8, postcss@^8.4.23:
-  version "8.4.38"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz"
-  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.0.0"
-    source-map-js "^1.2.0"
-
 prettier@^3.3.3:
   version "3.3.3"
   resolved "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz"
@@ -5834,12 +5587,12 @@ rbush@^3.0.1:
 
 react-color-palette@^7.2.2:
   version "7.2.2"
-  resolved "https://registry.yarnpkg.com/react-color-palette/-/react-color-palette-7.2.2.tgz#84d209a425887dce9955466682db353144ab1bb1"
+  resolved "https://registry.npmjs.org/react-color-palette/-/react-color-palette-7.2.2.tgz"
   integrity sha512-SHLPS3JO+xECRtWB14dAgUPranQMDiGWqn2QVPppAzqWhbUtsg2uVTUd3cpiK3OEa66j7xIDGa/RPjCw98D61g==
 
 react-colorful@^5.6.1:
   version "5.6.1"
-  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  resolved "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz"
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
 
 react-datepicker@^7.3.0:
@@ -5853,7 +5606,7 @@ react-datepicker@^7.3.0:
     prop-types "^15.7.2"
     react-onclickoutside "^6.13.0"
 
-react-dom@^18:
+"react-dom@^15.5.x || ^16.x || ^17.x || ^18.x", "react-dom@^16.3.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17 || ^18", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react-dom@^16.9.0 || ^17 || ^18", react-dom@^18, react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 16.3.0", react-dom@>=16.6.0, react-dom@>=16.8.0, react-dom@>=18:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -5863,7 +5616,7 @@ react-dom@^18:
 
 react-draggable@^4.4.6:
   version "4.4.6"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e"
+  resolved "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz"
   integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==
   dependencies:
     clsx "^1.1.1"
@@ -5871,12 +5624,12 @@ react-draggable@^4.4.6:
 
 react-hook-form@^7.53.0:
   version "7.53.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.0.tgz#3cf70951bf41fa95207b34486203ebefbd3a05ab"
+  resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz"
   integrity sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==
 
 react-icons@^5.3.0:
   version "5.3.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.3.0.tgz#ccad07a30aebd40a89f8cfa7d82e466019203f1c"
+  resolved "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz"
   integrity sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==
 
 react-is@^16.13.1, react-is@^16.7.0:
@@ -5886,7 +5639,7 @@ react-is@^16.13.1, react-is@^16.7.0:
 
 react-loading-skeleton@^3.5.0:
   version "3.5.0"
-  resolved "https://registry.yarnpkg.com/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz#da2090355b4dedcad5c53cb3f0ed364e3a76d6ca"
+  resolved "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz"
   integrity sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==
 
 react-onclickoutside@^6.13.0:
@@ -5924,7 +5677,7 @@ react-responsive-modal@^6.4.2:
 
 react-select@^5.8.1:
   version "5.8.1"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.1.tgz#3284a93b7633b5e893306b2a8007ea0f793e62b9"
+  resolved "https://registry.npmjs.org/react-select/-/react-select-5.8.1.tgz"
   integrity sha512-RT1CJmuc+ejqm5MPgzyZujqDskdvB9a9ZqrdnVLsvAHjJ3Tj0hELnLeVPQlmYdVKCdCpxanepl6z7R5KhXhWzg==
   dependencies:
     "@babel/runtime" "^7.12.0"
@@ -5957,7 +5710,7 @@ react-textarea-autosize@^8.5.3:
 
 react-transition-group@^4.3.0:
   version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
   dependencies:
     "@babel/runtime" "^7.5.5"
@@ -5965,7 +5718,7 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^18:
+react@*, "react@^15.5.x || ^16.x || ^17.x || ^18.x", "react@^16.3.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17 || ^18", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17 || ^18 || ^19", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react@^16.9.0 || ^17 || ^18", react@^18, react@^18.0.0, react@^18.2.0, react@^18.3.1, "react@>= 16.3.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16.13.1, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=18:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -5979,15 +5732,6 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
-readable-stream@^3.6.0:
-  version "3.6.2"
-  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz"
-  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
 readable-stream@^4.2.0:
   version "4.5.2"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-4.5.2.tgz"
@@ -6025,7 +5769,7 @@ requires-port@^1.0.0:
 
 resolve-from@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
 resolve@^1.1.7, resolve@^1.19.0, resolve@^1.22.2:
@@ -6047,13 +5791,6 @@ rfdc@^1.3.0:
   resolved "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
-rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
 robust-predicates@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz"
@@ -6086,7 +5823,7 @@ safe-buffer@~5.1.1:
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass@^1.77.8:
+sass@^1.3.0, sass@^1.77.8:
   version "1.77.8"
   resolved "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz"
   integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
@@ -6121,12 +5858,7 @@ seedrandom@^3.0.5:
   resolved "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz"
   integrity sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==
 
-semver@^6.0.0:
-  version "6.3.1"
-  resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
-  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
-
-semver@^7.3.5, semver@^7.5.4:
+semver@^7.5.4:
   version "7.6.2"
   resolved "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz"
   integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
@@ -6136,11 +5868,6 @@ server-only@^0.0.1:
   resolved "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz"
   integrity sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==
 
-set-blocking@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
-  integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -6153,30 +5880,11 @@ shebang-regex@^3.0.0:
   resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-signal-exit@^3.0.0:
-  version "3.0.7"
-  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
-  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
-
 signal-exit@^4.0.1:
   version "4.1.0"
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
-simple-concat@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz"
-  integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
-
-simple-get@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz"
-  integrity sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==
-  dependencies:
-    decompress-response "^4.2.0"
-    once "^1.3.1"
-    simple-concat "^1.0.0"
-
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz"
@@ -6189,14 +5897,14 @@ skmeans@0.9.7:
   resolved "https://registry.npmjs.org/skmeans/-/skmeans-0.9.7.tgz"
   integrity sha512-hNj1/oZ7ygsfmPZ7ZfN5MUBRoGg1gtpnImuJBgLO0ljQ67DtJuiQaiYdS4lUA6s0KCwnPhGivtC/WRwIZLkHyg==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0:
+source-map-js@^1.0.2, source-map-js@^1.2.0, "source-map-js@>=0.6.2 <2.0.0":
   version "1.2.0"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
 source-map@^0.5.7:
   version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
 
 source-map@~0.6.1:
@@ -6224,6 +5932,13 @@ streamsearch@^1.1.0:
   resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
+string_decoder@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
 "string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
@@ -6233,7 +5948,7 @@ streamsearch@^1.1.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.3:
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6242,7 +5957,7 @@ streamsearch@^1.1.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.1, string-width@^5.1.2:
+string-width@^5.0.1:
   version "5.1.2"
   resolved "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz"
   integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
@@ -6251,12 +5966,14 @@ string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-string_decoder@^1.1.1, string_decoder@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
   dependencies:
-    safe-buffer "~5.2.0"
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
@@ -6288,7 +6005,7 @@ styled-jsx@5.1.1:
 
 stylis@4.2.0:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  resolved "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
 sucrase@^3.32.0:
@@ -6306,7 +6023,7 @@ sucrase@^3.32.0:
 
 supports-color@^5.3.0:
   version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
@@ -6325,12 +6042,12 @@ sweepline-intersections@^1.5.0:
 
 sweetalert2-react-content@^5.0.7:
   version "5.0.7"
-  resolved "https://registry.yarnpkg.com/sweetalert2-react-content/-/sweetalert2-react-content-5.0.7.tgz#6fd7299978b2e0221d3049746ff2b39c1a7aa72d"
+  resolved "https://registry.npmjs.org/sweetalert2-react-content/-/sweetalert2-react-content-5.0.7.tgz"
   integrity sha512-8Fk82Mpk45lFXpJWKIFF/lq8k/dJKDDQGFcuqVosaL/qRdViyAs5+u37LoTGfnOIvf+rfQB3PAXcp1XLLn+0ew==
 
-sweetalert2@^11.14.1:
+sweetalert2@^11.0.0, sweetalert2@^11.14.1:
   version "11.14.1"
-  resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-11.14.1.tgz#aa066422e1045aa6923ae5d0ef8cad7067b23097"
+  resolved "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.14.1.tgz"
   integrity sha512-xadhfcA4STGMh8nC5zHFFWURhRpWc4zyI3GdMDFH/m3hGWZeQQNWhX9xcG4lI9gZYsi/IlazKbwvvje3juL3Xg==
 
 symbol-tree@^3.2.4:
@@ -6355,7 +6072,7 @@ tailwind-variants@^0.1.20:
   dependencies:
     tailwind-merge "^1.14.0"
 
-tailwindcss@^3.4.1:
+tailwindcss@*, tailwindcss@^3.4.1, tailwindcss@>=3.4.0:
   version "3.4.4"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz"
   integrity sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==
@@ -6383,18 +6100,6 @@ tailwindcss@^3.4.1:
     resolve "^1.22.2"
     sucrase "^3.32.0"
 
-tar@^6.1.11:
-  version "6.2.1"
-  resolved "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz"
-  integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==
-  dependencies:
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    minipass "^5.0.0"
-    minizlib "^2.1.1"
-    mkdirp "^1.0.3"
-    yallist "^4.0.0"
-
 tarn@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/tarn/-/tarn-3.0.2.tgz"
@@ -6442,7 +6147,7 @@ tinyqueue@^2.0.0, tinyqueue@^2.0.3:
 
 to-fast-properties@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
   integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
 
 to-regex-range@^5.0.1:
@@ -6483,11 +6188,6 @@ tr46@^3.0.0:
   dependencies:
     punycode "^2.1.1"
 
-tr46@~0.0.3:
-  version "0.0.3"
-  resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz"
-  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
-
 ts-interface-checker@^0.1.9:
   version "0.1.13"
   resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
@@ -6558,14 +6258,14 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2:
+util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
 uuid@^10.0.0:
   version "10.0.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz"
   integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
 
 uuid@^8.3.0:
@@ -6587,11 +6287,6 @@ w3c-xmlserializer@^3.0.0:
   dependencies:
     xml-name-validator "^4.0.0"
 
-webidl-conversions@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
-  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
-
 webidl-conversions@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz"
@@ -6625,14 +6320,6 @@ whatwg-url@^11.0.0:
     tr46 "^3.0.0"
     webidl-conversions "^7.0.0"
 
-whatwg-url@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz"
-  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
-  dependencies:
-    tr46 "~0.0.3"
-    webidl-conversions "^3.0.0"
-
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
@@ -6640,13 +6327,6 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-wide-align@^1.1.2:
-  version "1.1.5"
-  resolved "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz"
-  integrity sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==
-  dependencies:
-    string-width "^1.0.2 || 2 || 3 || 4"
-
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
@@ -6665,11 +6345,6 @@ wrap-ansi@^8.1.0:
     string-width "^5.0.1"
     strip-ansi "^7.0.1"
 
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
-  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
-
 ws@^8.2.3:
   version "8.17.1"
   resolved "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz"
@@ -6685,14 +6360,9 @@ xmlchars@^2.2.0:
   resolved "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-
 yaml@^1.10.0:
   version "1.10.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yaml@^2.3.4:

From 557f43669b6e9ff731bf64d93a3228dc3f8d0430 Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Wed, 30 Oct 2024 13:19:47 +0900
Subject: [PATCH 22/60] =?UTF-8?q?=EC=B9=98=EC=88=98=EC=84=A0=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=EB=B3=80=EA=B2=BD=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dimensionLine/DimensionLineSetting.jsx    | 44 ++++++++++++++++---
 src/hooks/usePlan.js                          |  2 -
 src/store/commonAtom.js                       | 25 ++++++++++-
 3 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
index d24d8d43..d436e4ab 100644
--- a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
@@ -1,3 +1,4 @@
+import { useState, useEffect, useRef } from 'react'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
@@ -5,14 +6,41 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { 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
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const canvas = useRecoilValue(canvasState)
   const pitchText = useRecoilState(pitchTextSelector)
-  const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
+  const SelectOption01 = defaultSlope
+  const [basicLength, setBasicLength] = useState(0)
+  const [slopeAble, setSlopeAble] = useState(false)
+  const changeLengthRef = useRef(0)
+
+  useEffect(() => {
+    if (canvas) {
+      const dimensionObject = canvas.getActiveObject()
+      const id = dimensionObject.groupId
+      const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
+      setBasicLength(parseInt(textObj.text))
+    }
+  }, [])
+
+  const handleChangeLength = () => {
+    const changeLength = changeLengthRef.current.value
+    if (canvas) {
+      const dimensionObject = canvas.getActiveObject()
+      const id = dimensionObject.id
+      const textObj = canvas.getObjects().filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
+      textObj.text = changeLength
+      canvas.renderAll()
+    }
+  }
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
@@ -29,19 +57,19 @@ export default function DimensionLineSetting(props) {
               <div className="outline-form mb15">
                 <span className="mr10">既存の長さ</span>
                 <div className="input-grid mr5">
-                  <input type="text" className="input-origin block" defaultValue={5933} readOnly />
+                  <input type="text" className="input-origin block" value={basicLength} readOnly />
                 </div>
               </div>
               <div className="mb-box">
                 <div className="outline-form">
                   <span className="mr10">変更の長さ</span>
                   <div className="input-grid mr5">
-                    <input type="text" className="input-origin block" defaultValue={0} />
+                    <input type="text" className="input-origin block" ref={changeLengthRef} defaultValue={0} />
                   </div>
                 </div>
               </div>
               <div className="d-check-box pop">
-                <input type="checkbox" id="ch99" />
+                <input type="checkbox" id="ch99" onChange={() => setSlopeAble(!slopeAble)} />
                 <label htmlFor="ch99">コーナー・ゴールの場合</label>
               </div>
             </div>
@@ -52,14 +80,14 @@ export default function DimensionLineSetting(props) {
               <div className="outline-form mb15">
                 <span className="mr10">傾斜</span>
                 <div className="grid-select mr10">
-                  <QSelectBox title={'0'} option={SelectOption01} />
+                  <QSelectBox title={''} options={SelectOption01} disabled={slopeAble} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
               <div className="outline-form">
                 <span className="mr10">傾斜</span>
                 <div className="grid-select mr10">
-                  <QSelectBox title={'0'} option={SelectOption01} />
+                  <QSelectBox title={''} options={SelectOption01} disabled={slopeAble} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
@@ -67,7 +95,9 @@ export default function DimensionLineSetting(props) {
             <div className="warning">傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。</div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">保存</button>
+            <button className="btn-frame modal act" onClick={handleChangeLength}>
+              保存
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index 11d8e4f9..015d1046 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -38,8 +38,6 @@ export function usePlan() {
 
     const str = JSON.stringify(objs)
 
-    console.log(str)
-
     // canvas?.clear()
     return str
 
diff --git a/src/store/commonAtom.js b/src/store/commonAtom.js
index 3e1fb640..1abcd1dc 100644
--- a/src/store/commonAtom.js
+++ b/src/store/commonAtom.js
@@ -1,4 +1,18 @@
-import { atom } from 'recoil'
+import { atom, selectorFamily } from 'recoil'
+
+export const defaultSlope = [
+  { name: '0', value: 0, angleValue: 0 },
+  { name: '1', value: 1, angleValue: 5.71 },
+  { name: '2', value: 2, angleValue: 11.31 },
+  { name: '3', value: 3, angleValue: 16.7 },
+  { name: '4', value: 4, angleValue: 21.8 },
+  { name: '5', value: 5, angleValue: 26.57 },
+  { name: '6', value: 6, angleValue: 30.96 },
+  { name: '7', value: 7, angleValue: 34.99 },
+  { name: '8', value: 8, angleValue: 38.66 },
+  { name: '9', value: 9, angleValue: 41.99 },
+  { name: '10', value: 10, angleValue: 45.0 },
+]
 
 export const dimmedStore = atom({
   key: 'dimmedState',
@@ -9,3 +23,12 @@ export const sessionStore = atom({
   key: 'sessionState',
   default: {},
 })
+
+export const slopeSelector = selectorFamily({
+  key: 'slopeSelector',
+  get:
+    (degree) =>
+    ({ get }) => {
+      return defaultSlope[degree]
+    },
+})

From 186956a12443c5e83b55b54aaa2183c089dfbc13 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Wed, 30 Oct 2024 13:36:27 +0900
Subject: [PATCH 23/60] fix: add qselectbox parameter

---
 package-lock.json                           | 240 ++++++++++----------
 src/components/common/select/QSelectBox.jsx |   4 +-
 yarn.lock                                   |  40 ++++
 3 files changed, 162 insertions(+), 122 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 45868486..91234623 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -981,6 +981,126 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
+      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
+      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
+      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
+      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
+      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
+      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
+      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
+      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nextui-org/accordion": {
       "version": "2.0.38",
       "resolved": "https://registry.npmjs.org/@nextui-org/accordion/-/accordion-2.0.38.tgz",
@@ -10531,126 +10651,6 @@
       "engines": {
         "node": ">= 14"
       }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
-      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
-      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
-      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
-      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
-      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
-      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
-      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
-      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }
diff --git a/src/components/common/select/QSelectBox.jsx b/src/components/common/select/QSelectBox.jsx
index dbeb1ff2..df745d64 100644
--- a/src/components/common/select/QSelectBox.jsx
+++ b/src/components/common/select/QSelectBox.jsx
@@ -1,13 +1,13 @@
 'use client'
 import { useEffect, useState } from 'react'
 
-export default function QSelectBox({ title = '', options, onChange, value, disabled = false }) {
+export default function QSelectBox({ title = '', options, onChange, value, disabled = false, params = {} }) {
   const [openSelect, setOpenSelect] = useState(false)
   const [selected, setSelected] = useState(title === '' ? options[0].name : title)
 
   const handleClickSelectOption = (option) => {
     setSelected(option.name)
-    onChange?.(option)
+    onChange?.(option, params)
   }
 
   useEffect(() => {
diff --git a/yarn.lock b/yarn.lock
index 5a30b4b0..f2bcf8b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -544,6 +544,46 @@
   resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz"
   integrity sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==
 
+"@next/swc-darwin-x64@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz"
+  integrity sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==
+
+"@next/swc-linux-arm64-gnu@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz"
+  integrity sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==
+
+"@next/swc-linux-arm64-musl@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz"
+  integrity sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==
+
+"@next/swc-linux-x64-gnu@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz"
+  integrity sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==
+
+"@next/swc-linux-x64-musl@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz"
+  integrity sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==
+
+"@next/swc-win32-arm64-msvc@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz"
+  integrity sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==
+
+"@next/swc-win32-ia32-msvc@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz"
+  integrity sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==
+
+"@next/swc-win32-x64-msvc@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz"
+  integrity sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==
+
 "@nextui-org/accordion@2.0.38":
   version "2.0.38"
   resolved "https://registry.npmjs.org/@nextui-org/accordion/-/accordion-2.0.38.tgz"

From b4e79df30dd7c33f0a4fa734fd1e89cc677a9597 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 30 Oct 2024 14:00:30 +0900
Subject: [PATCH 24/60] =?UTF-8?q?=EA=B5=B5=EC=9D=80=20=EA=B8=B0=EC=9A=B8?=
 =?UTF-8?q?=EC=9E=84=EA=BC=B4=20=EC=84=A0=ED=83=9D=20=EC=8B=9C=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81=20=EC=95=88=EB=90=98=EB=8A=94=20=ED=98=84=EC=83=81=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/common/useFont.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/hooks/common/useFont.js b/src/hooks/common/useFont.js
index 28c78f14..595ec74c 100644
--- a/src/hooks/common/useFont.js
+++ b/src/hooks/common/useFont.js
@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
-import { fontSelector, globalFontAtom } from '@/store/fontAtom'
+import { fontSelector } from '@/store/fontAtom'
 import { useEffect } from 'react'
 
 export function useFont() {
@@ -17,7 +17,8 @@ export function useFont() {
       textObjs.forEach((obj) => {
         obj.set({
           fontFamily: commonText.fontFamily.value,
-          fontWeight: commonText.fontWeight.value,
+          fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+          fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
           fontSize: commonText.fontSize.value,
           fill: commonText.fontColor.value,
         })
@@ -32,7 +33,8 @@ export function useFont() {
       textObjs.forEach((obj) => {
         obj.set({
           fontFamily: dimensionLineText.fontFamily.value,
-          fontWeight: dimensionLineText.fontWeight.value,
+          fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+          fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
           fontSize: dimensionLineText.fontSize.value,
           fill: dimensionLineText.fontColor.value,
         })
@@ -47,7 +49,8 @@ export function useFont() {
       textObjs.forEach((obj) => {
         obj.set({
           fontFamily: flowText.fontFamily.value,
-          fontWeight: flowText.fontWeight.value,
+          fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+          fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
           fontSize: flowText.fontSize.value,
           fill: flowText.fontColor.value,
         })
@@ -62,7 +65,8 @@ export function useFont() {
       textObjs.forEach((obj) => {
         obj.set({
           fontFamily: lengthText.fontFamily.value,
-          fontWeight: lengthText.fontWeight.value,
+          fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+          fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
           fontSize: lengthText.fontSize.value,
           fill: lengthText.fontColor.value,
         })

From ed21555e5d838927835022ecac1076a2a060c332 Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Wed, 30 Oct 2024 14:38:37 +0900
Subject: [PATCH 25/60] =?UTF-8?q?=EC=B9=98=EC=88=98=EC=84=A0=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=EB=B3=80=EA=B2=BD=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dimensionLine/DimensionLineSetting.jsx    | 52 ++++++++++++++++---
 1 file changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
index d436e4ab..6c83ecd9 100644
--- a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
@@ -19,7 +19,9 @@ export default function DimensionLineSetting(props) {
   const SelectOption01 = defaultSlope
   const [basicLength, setBasicLength] = useState(0)
   const [slopeAble, setSlopeAble] = useState(false)
-  const changeLengthRef = useRef(0)
+  const changeSlopeRef = useRef()
+
+  let slopeInput1, slopeInput2
 
   useEffect(() => {
     if (canvas) {
@@ -28,19 +30,53 @@ export default function DimensionLineSetting(props) {
       const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
       setBasicLength(parseInt(textObj.text))
     }
+
+    return () => {
+      setBasicLength(0)
+    }
   }, [])
 
   const handleChangeLength = () => {
-    const changeLength = changeLengthRef.current.value
+    const changeLength = changeSlopeRef.current
+
     if (canvas) {
       const dimensionObject = canvas.getActiveObject()
-      const id = dimensionObject.id
-      const textObj = canvas.getObjects().filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
-      textObj.text = changeLength
+      const id = dimensionObject.groupId
+      const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
+      let resultText = changeLength.value > 0 ? changeLength.value : '0'
+
+      if (slopeAble) {
+        if (slopeInput1) {
+          resultText = calculateLength(basicLength, slopeInput1.angleValue).toFixed(0)
+
+          if (slopeInput2) {
+            const angle = slopeInput1 + slopeInput2
+            const length = calculateLength(basicLength, angle)
+            resultText = length.toFixed(2)
+          }
+        }
+      }
+
+      textObj.set({
+        text: String(resultText),
+      })
+
       canvas.renderAll()
     }
   }
 
+  const handleSelectbox = (option, params) => {
+    const index = params.index
+    if (index === 1) slopeInput1 = option
+    if (index === 2) slopeInput2 = option
+  }
+
+  function calculateLength(originalLength, angle) {
+    const angleInRadians = angle * (Math.PI / 180) // 각도를 라디안으로 변환
+    const result = Math.sqrt(Math.pow(originalLength * Math.tan(angleInRadians), 2) + Math.pow(originalLength, 2))
+    return result
+  }
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
@@ -64,7 +100,7 @@ export default function DimensionLineSetting(props) {
                 <div className="outline-form">
                   <span className="mr10">変更の長さ</span>
                   <div className="input-grid mr5">
-                    <input type="text" className="input-origin block" ref={changeLengthRef} defaultValue={0} />
+                    <input type="text" className="input-origin block" ref={changeSlopeRef} />
                   </div>
                 </div>
               </div>
@@ -80,14 +116,14 @@ export default function DimensionLineSetting(props) {
               <div className="outline-form mb15">
                 <span className="mr10">傾斜</span>
                 <div className="grid-select mr10">
-                  <QSelectBox title={''} options={SelectOption01} disabled={slopeAble} />
+                  <QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 1 }} onChange={handleSelectbox} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
               <div className="outline-form">
                 <span className="mr10">傾斜</span>
                 <div className="grid-select mr10">
-                  <QSelectBox title={''} options={SelectOption01} disabled={slopeAble} />
+                  <QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 2 }} onChange={handleSelectbox} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>

From 7afb2c034f71628153415768c3d536b56cb0e890 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 30 Oct 2024 16:34:35 +0900
Subject: [PATCH 26/60] =?UTF-8?q?=EB=B3=80=EB=B3=84=EB=A1=9C=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=3D>=20=ED=95=9C=EC=AA=BD=ED=9D=90=EB=A6=84=20?=
 =?UTF-8?q?=EA=B2=BD=EC=82=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../floor-plan/modal/roofShape/RoofShapeSetting.jsx |  4 ++++
 .../floor-plan/modal/roofShape/type/Side.jsx        |  4 +++-
 .../floor-plan/modal/roofShape/type/option/Shed.jsx | 13 +++++++++++--
 src/hooks/common/useCommonUtils.js                  |  3 +--
 src/hooks/roofcover/useRoofShapeSetting.js          | 11 +++++++++++
 src/hooks/useAdsorptionPoint.js                     |  3 +--
 src/hooks/useCanvasEvent.js                         |  3 ++-
 7 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
index e60aadc6..b43bdd18 100644
--- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
@@ -39,6 +39,8 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
     handleConfirm,
     handleRollBack,
     pitchText,
+    shedPitch,
+    setShedPitch,
   } = useRoofShapeSetting(id)
   const { closePopup } = usePopup()
 
@@ -61,6 +63,8 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
     setHipAndGableWidth,
     shedWidth,
     setShedWidth,
+    shedPitch,
+    setShedPitch,
     hasSleeve,
     setHasSleeve,
     buttonAct,
diff --git a/src/components/floor-plan/modal/roofShape/type/Side.jsx b/src/components/floor-plan/modal/roofShape/type/Side.jsx
index 487ccd43..26a4957f 100644
--- a/src/components/floor-plan/modal/roofShape/type/Side.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/Side.jsx
@@ -33,6 +33,8 @@ export default function Side(props) {
     handleConfirm,
     handleRollBack,
     pitchText,
+    shedPitch,
+    setShedPitch,
   } = props
 
   const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
@@ -40,7 +42,7 @@ export default function Side(props) {
   const wallProps = { sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }
   const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }
   const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText }
-  const shedProps = { shedWidth, setShedWidth }
+  const shedProps = { shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }
 
   const { getMessage } = useMessage()
 
diff --git a/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx b/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
index 40ccdbef..5ad53f7b 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
@@ -1,10 +1,19 @@
 import { useMessage } from '@/hooks/useMessage'
-import { onlyNumberInputChange } from '@/util/input-utils'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
-export default function Shed({ shedWidth, setShedWidth }) {
+export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }) {
   const { getMessage } = useMessage()
   return (
     <>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '24px' }}>
+          {getMessage('slope')}
+        </span>
+        <div className="input-grid mr5" style={{ width: '100px' }}>
+          <input type="text" className="input-origin block" value={shedPitch} onChange={(e) => onlyNumberWithDotInputChange(e, setShedPitch)} />
+        </div>
+        <span className="thin">{pitchText}</span>
+      </div>
       <div className="outline-form">
         <span className="mr10">{getMessage('shed.width')}</span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js
index ca9b8def..84c4fdb0 100644
--- a/src/hooks/common/useCommonUtils.js
+++ b/src/hooks/common/useCommonUtils.js
@@ -476,7 +476,7 @@ export function useCommonUtils() {
   addDocumentEventListener('keydown', document, (e) => {
     if (e.key === 'Enter') {
       const activeObject = canvas.getActiveObject()
-      if (activeObject.name === 'commonText') {
+      if (activeObject && activeObject.name === 'commonText') {
         if (activeObject && activeObject.isEditing) {
           if (activeObject.text === '') {
             canvas?.remove(activeObject)
@@ -756,7 +756,6 @@ export function useCommonUtils() {
   return {
     commonFunctions,
     dimensionSettings,
-    commonDeleteText,
     commonMoveObject,
     commonDeleteText,
     deleteObject,
diff --git a/src/hooks/roofcover/useRoofShapeSetting.js b/src/hooks/roofcover/useRoofShapeSetting.js
index e0d850f4..ae886ce9 100644
--- a/src/hooks/roofcover/useRoofShapeSetting.js
+++ b/src/hooks/roofcover/useRoofShapeSetting.js
@@ -29,6 +29,7 @@ export function useRoofShapeSetting(id) {
   const [jerkinHeadWidth, setJerkinHeadWidth] = useState(800) // 반절처 폭
   const [jerkinHeadPitch, setJerkinHeadPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20) // 반절처 경사
   const [hipAndGableWidth, setHipAndGableWidth] = useState(800) // 팔작지붕 폭
+  const [shedPitch, setShedPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8) // 팔작지붕 폭
   const [shedWidth, setShedWidth] = useState(300) // 한쪽흐름 폭
   const [hasSleeve, setHasSleeve] = useState('0')
   const currentObject = useRecoilValue(currentObjectState)
@@ -41,6 +42,7 @@ export function useRoofShapeSetting(id) {
   const isFixRef = useRef(false)
 
   const pitchRef = useRef(null)
+  const shedPitchRef = useRef(null)
   const jerkinHeadPitchRef = useRef(null)
 
   const history = useRef([])
@@ -49,6 +51,9 @@ export function useRoofShapeSetting(id) {
   useEffect(() => {
     pitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? pitch : getChonByDegree(pitch)
   }, [pitch])
+  useEffect(() => {
+    shedPitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? shedPitch : getChonByDegree(shedPitch)
+  }, [shedPitch])
   useEffect(() => {
     jerkinHeadPitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? jerkinHeadPitch : getChonByDegree(jerkinHeadPitch)
   }, [jerkinHeadPitch])
@@ -579,8 +584,12 @@ export function useRoofShapeSetting(id) {
         // 한쪽흐름
         attributes = {
           type: LINE_TYPE.WALLLINE.SHED,
+          pitch: shedPitchRef.current,
           width: shedWidth / 10,
         }
+        addPitchText(currentObject)
+        selectedLine.set({ strokeWidth: 4 })
+        selectedLine.set({ stroke: '#000000' })
         break
       }
     }
@@ -648,5 +657,7 @@ export function useRoofShapeSetting(id) {
     handleConfirm,
     handleRollBack,
     pitchText,
+    shedPitch,
+    setShedPitch,
   }
 }
diff --git a/src/hooks/useAdsorptionPoint.js b/src/hooks/useAdsorptionPoint.js
index 396db98c..4bdef964 100644
--- a/src/hooks/useAdsorptionPoint.js
+++ b/src/hooks/useAdsorptionPoint.js
@@ -31,9 +31,8 @@ export function useAdsorptionPoint() {
       name: 'adsorptionPoint',
       visible: isGridDisplay,
     })
-
     canvas.add(adsorptionPoint)
-
+    setAdsorptionPointMode(true)
     canvas.renderAll()
   }
 
diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js
index ab283a08..9573936a 100644
--- a/src/hooks/useCanvasEvent.js
+++ b/src/hooks/useCanvasEvent.js
@@ -119,7 +119,8 @@ export function useCanvasEvent() {
         target.fill = lengthTextOption.fontColor.value
         target.fontFamily = lengthTextOption.fontFamily.value
         target.fontSize = lengthTextOption.fontSize.value
-        target.fontWeight = lengthTextOption.fontWeight.value
+        target.fontStyle = lengthTextOption.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal'
+        target.fontWeight = lengthTextOption.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal'
 
         // Add a property to store the previous value
         const previousValue = target.text

From f9580fc8c20fecb519ff80ecc51608c7f3d90aae Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 30 Oct 2024 17:25:29 +0900
Subject: [PATCH 27/60] =?UTF-8?q?=EB=AA=A8=EB=93=88=20=EC=BB=A8=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=A9=94=EB=89=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/module/CircuitNumberEdit.jsx        |  48 +++++++
 .../floor-plan/modal/module/PanelEdit.jsx     |  78 ++++++++++++
 .../modal/module/column/ColumnInsert.jsx      |  95 ++++++++++++++
 .../modal/module/column/ColumnRemove.jsx      | 118 ++++++++++++++++++
 .../floor-plan/modal/module/row/RowInsert.jsx |  95 ++++++++++++++
 .../floor-plan/modal/module/row/RowRemove.jsx | 118 ++++++++++++++++++
 src/hooks/useContextMenu.js                   | 115 ++++++++++++++++-
 src/locales/ja.json                           |  57 ++++++++-
 src/locales/ko.json                           |  49 ++++++++
 9 files changed, 768 insertions(+), 5 deletions(-)
 create mode 100644 src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
 create mode 100644 src/components/floor-plan/modal/module/PanelEdit.jsx
 create mode 100644 src/components/floor-plan/modal/module/column/ColumnInsert.jsx
 create mode 100644 src/components/floor-plan/modal/module/column/ColumnRemove.jsx
 create mode 100644 src/components/floor-plan/modal/module/row/RowInsert.jsx
 create mode 100644 src/components/floor-plan/modal/module/row/RowRemove.jsx

diff --git a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
new file mode 100644
index 00000000..d565e1a1
--- /dev/null
+++ b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
@@ -0,0 +1,48 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function CircuitNumberEdit(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const { getMessage } = useMessage()
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm`}>
+        <div className="modal-head">
+          <h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="outline-form">
+                <span className="mr10" style={{ width: 'auto' }}>
+                  {getMessage('modal.module.circuit.number')}
+                </span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin block" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/module/PanelEdit.jsx b/src/components/floor-plan/modal/module/PanelEdit.jsx
new file mode 100644
index 00000000..1f40b703
--- /dev/null
+++ b/src/components/floor-plan/modal/module/PanelEdit.jsx
@@ -0,0 +1,78 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+
+export default function PanelEdit(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, type = 'move', apply } = props
+  const { closePopup } = usePopup()
+  const [length, setLength] = useState(0)
+  const [direction, setDirection] = useState('')
+  const { getMessage } = useMessage()
+
+  const handleApply = () => {
+    apply()
+    closePopup(id)
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage(type === 'move' ? 'modal.move.setting' : 'modal.copy.setting')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit">{getMessage(type === 'move' ? 'modal.move.setting.info' : 'modal.copy.setting.info')}</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="grid-input-form">
+                <span className="mr10">{getMessage('margin')}</span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin" defaultValue={0} onClick={(e) => setLength(e.target.value)} />
+                </div>
+                <span>mm</span>
+              </div>
+              <div className="grid-direction">
+                <button
+                  className={`direction up ${direction === '↑' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('↑')
+                  }}
+                ></button>
+                <button
+                  className={`direction down ${direction === '↓' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('↓')
+                  }}
+                ></button>
+                <button
+                  className={`direction left ${direction === '←' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('←')
+                  }}
+                ></button>
+                <button
+                  className={`direction right ${direction === '→' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('→')
+                  }}
+                ></button>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
new file mode 100644
index 00000000..c2f24095
--- /dev/null
+++ b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
@@ -0,0 +1,95 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+import Image from 'next/image'
+
+export default function ColumnInsert(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  const HandleRadioChange = (e) => {
+    setSelectedType(Number(e.target.value))
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.panel.column.insert.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
+                  <label htmlFor="ra01">{getMessage('modal.panel.column.insert.type.left')}</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
+                  <label htmlFor="ra02">{getMessage('modal.panel.column.insert.type.right')}</label>
+                </div>
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional-edit01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional-edit02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
+                  </div>
+                  <div className="additional-color-box">
+                    <span className="additional-color white"></span>
+                    <span className="normal-font">{getMessage('modal.panel.insert.column')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
new file mode 100644
index 00000000..b4baf0d7
--- /dev/null
+++ b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
@@ -0,0 +1,118 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+import Image from 'next/image'
+
+export default function ColumnRemove(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const types = [
+    { name: getMessage('modal.panel.column.remove.type.left'), value: 1 },
+    { name: getMessage('modal.panel.column.remove.type.right'), value: 2 },
+    { name: getMessage('modal.panel.column.remove.type.side'), value: 3 },
+    { name: getMessage('modal.panel.column.remove.type.none'), value: 4 },
+  ]
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                {types.map((type, index) => {
+                  return (
+                    <div className="d-check-radio pop">
+                      <input
+                        type="radio"
+                        name="radio01"
+                        id={`ra0${index + 1}`}
+                        onClick={(e) => setSelectedType(Number(e.target.value))}
+                        value={type.value}
+                        checked={selectedType === type.value}
+                      />
+                      <label htmlFor={`ra0${index + 1}`}>{type.name}</label>
+                    </div>
+                  )
+                })}
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional_del01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional_del02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 3 && (
+                  <Image
+                    src="/static/images/canvas/additional_del03.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 4 && (
+                  <Image
+                    src="/static/images/canvas/additional_del04.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/module/row/RowInsert.jsx b/src/components/floor-plan/modal/module/row/RowInsert.jsx
new file mode 100644
index 00000000..e6e99c0c
--- /dev/null
+++ b/src/components/floor-plan/modal/module/row/RowInsert.jsx
@@ -0,0 +1,95 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import Image from 'next/image'
+import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function RowInsert(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  const HandleRadioChange = (e) => {
+    setSelectedType(Number(e.target.value))
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.row.insert')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.row.insert.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
+                  <label htmlFor="ra01">{getMessage('modal.row.insert.type.up')}</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
+                  <label htmlFor="ra02">{getMessage('modal.row.insert.type.down')}</label>
+                </div>
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-edit01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-edit02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.row')}</span>
+                  </div>
+                  <div className="additional-color-box">
+                    <span className="additional-color white"></span>
+                    <span className="normal-font">{getMessage('modal.panel.insert.row')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/module/row/RowRemove.jsx b/src/components/floor-plan/modal/module/row/RowRemove.jsx
new file mode 100644
index 00000000..6b93b41c
--- /dev/null
+++ b/src/components/floor-plan/modal/module/row/RowRemove.jsx
@@ -0,0 +1,118 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import Image from 'next/image'
+import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function RowRemove(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const types = [
+    { name: getMessage('modal.row.remove.type.up'), value: 1 },
+    { name: getMessage('modal.row.remove.type.down'), value: 2 },
+    { name: getMessage('modal.row.remove.type.side'), value: 3 },
+    { name: getMessage('modal.row.remove.type.none'), value: 4 },
+  ]
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.row.remove')}</h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                {types.map((type, index) => {
+                  return (
+                    <div className="d-check-radio pop">
+                      <input
+                        type="radio"
+                        name="radio01"
+                        id={`ra0${index + 1}`}
+                        onClick={() => setSelectedType(Number(e.target.value))}
+                        value={type.value}
+                        checked={selectedType === type.value}
+                      />
+                      <label htmlFor="ra01">{getMessage(type.name)}</label>
+                    </div>
+                  )
+                })}
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 3 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del03.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 4 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del04.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.row')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index 293a0ceb..7791be41 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -16,7 +16,6 @@ import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
 import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting'
 import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset'
 import FontSetting from '@/components/common/font/FontSetting'
-import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
 import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting'
 import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
@@ -24,6 +23,13 @@ import { useMessage } from '@/hooks/useMessage'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { contextMenuState } from '@/store/contextMenu'
 import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
+import PanelEdit from '@/components/floor-plan/modal/module/PanelEdit'
+import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
+import ColumnRemove from '@/components/floor-plan/modal/module/column/ColumnRemove'
+import ColumnInsert from '@/components/floor-plan/modal/module/column/ColumnInsert'
+import RowRemove from '@/components/floor-plan/modal/module/row/RowRemove'
+import RowInsert from '@/components/floor-plan/modal/module/row/RowInsert'
+import CircuitNumberEdit from '@/components/floor-plan/modal/module/CircuitNumberEdit'
 
 export function useContextMenu() {
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
@@ -36,6 +42,8 @@ export function useContextMenu() {
   const [popupId, setPopupId] = useState(uuidv4())
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
   const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
+  const [cell, setCell] = useState(null)
+  const [column, setColumn] = useState(null)
   const { handleZoomClear } = useCanvasEvent()
   const currentMenuSetting = () => {
     switch (currentMenu) {
@@ -241,6 +249,7 @@ export function useContextMenu() {
 
   useEffect(() => {
     if (currentObject?.name) {
+      console.log(currentObject?.name)
       switch (currentObject.name) {
         case 'triangleDormer':
         case 'pentagonDormer':
@@ -475,6 +484,110 @@ export function useContextMenu() {
             ],
           ])
           break
+        case 'panel':
+          setContextMenu([
+            [
+              {
+                id: 'remove',
+                name: getMessage('contextmenu.remove'),
+              },
+              {
+                id: 'move',
+                name: getMessage('contextmenu.move'),
+                component: <PanelEdit id={popupId} type={'move'} />,
+              },
+              {
+                id: 'copy',
+                name: getMessage('contextmenu.copy'),
+                component: <PanelEdit id={popupId} type={'copy'} />,
+              },
+            ],
+            [
+              {
+                id: 'columnMove',
+                name: getMessage('contextmenu.column.move'),
+                component: <PanelEdit id={popupId} type={'move'} />,
+              },
+              {
+                id: 'columnCopy',
+                name: getMessage('contextmenu.column.copy'),
+                component: <PanelEdit id={popupId} type={'copy'} />,
+              },
+              {
+                id: 'columnRemove',
+                name: getMessage('contextmenu.column.remove'),
+                component: <ColumnRemove id={popupId} />,
+              },
+              {
+                id: 'columnInsert',
+                name: getMessage('contextmenu.column.insert'),
+                component: <ColumnInsert id={popupId} />,
+              },
+            ],
+            [
+              {
+                id: 'rowMove',
+                name: getMessage('contextmenu.row.move'),
+                component: <PanelEdit id={popupId} type={'move'} />,
+              },
+              {
+                id: 'rowCopy',
+                name: getMessage('contextmenu.row.copy'),
+                component: <PanelEdit id={popupId} type={'copy'} />,
+              },
+              {
+                id: 'rowRemove',
+                name: getMessage('contextmenu.row.remove'),
+                component: <RowRemove id={popupId} />,
+              },
+              {
+                id: 'rowInsert',
+                name: getMessage('contextmenu.row.insert'),
+                component: <RowInsert id={popupId} />,
+              },
+            ],
+          ])
+          break
+        case 'module':
+        case 'dimensionLineText':
+          setContextMenu([
+            [
+              {
+                id: 'moduleVerticalCenterAlign',
+                name: getMessage('contextmenu.module.vertical.align'),
+              },
+              {
+                id: 'moduleHorizonCenterAlign',
+                name: getMessage('contextmenu.module.horizon.align'),
+              },
+              {
+                id: 'moduleLeftAlign',
+                name: getMessage('contextmenu.module.left.align'),
+              },
+              {
+                id: 'moduleRightAlign',
+                name: getMessage('contextmenu.module.right.align'),
+              },
+              {
+                id: 'moduleUpAlign',
+                name: getMessage('contextmenu.module.up.align'),
+              },
+              {
+                id: 'moduleDownAlign',
+                name: getMessage('contextmenu.module.down.align'),
+              },
+              {
+                id: 'moduleRemove',
+                name: getMessage('contextmenu.module.remove'),
+              },
+              {
+                id: 'moduleCircuitNumberEdit',
+                name: getMessage('contextmenu.module.circuit.number.edit'),
+                component: <CircuitNumberEdit id={popupId} />,
+              },
+            ],
+          ])
+          break
         default:
           currentMenuSetting()
       }
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 019aaed4..4740d5a0 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -303,11 +303,35 @@
   "contextmenu.column.move": "열 이동(JA)",
   "contextmenu.column.copy": "열 복사(JA)",
   "contextmenu.column.remove": "コピー設定",
-  "contextmenu.column.insert": "열 삽입(JA)",
+  "modal.panel.column.remove": "コピー設定",
+  "modal.panel.column.remove.info": "削除列をどのようにしますか？",
+  "modal.panel.column.remove.type.left": "左に減らす",
+  "modal.panel.column.remove.type.right": "右に減らす",
+  "modal.panel.column.remove.type.side": "両側に減る",
+  "modal.panel.column.remove.type.none": "減らさない",
+  "modal.panel.select.column": "選択列",
+  "modal.panel.select.row": "選択段",
+  "modal.panel.insert.column": "挿入列",
+  "modal.panel.insert.row": "挿入段",
+  "modal.panel.column.insert": "列の挿入",
+  "modal.panel.column.insert.info": "挿入する方向を選択してください。",
+  "modal.panel.column.insert.type.left": "左挿入",
+  "modal.panel.column.insert.type.right": "右挿入",
+  "contextmenu.column.insert": "列の挿入",
   "contextmenu.row.move": "단 이동(JA)",
   "contextmenu.row.copy": "단 복사(JA)",
-  "contextmenu.row.remove": "단 삭제(JA)",
-  "contextmenu.row.insert": "단 삽입(JA)",
+  "contextmenu.row.remove": "ただし削除",
+  "modal.row.remove": "ただし削除",
+  "modal.row.remove.info": "削除列をどのようにしますか？",
+  "modal.row.remove.type.up": "上向きに減らす",
+  "modal.row.remove.type.down": "下向きに減らす",
+  "modal.row.remove.type.side": "両側に減らす",
+  "modal.row.remove.type.none": "減らさない",
+  "contextmenu.row.insert": "段挿入",
+  "modal.row.insert": "段挿入",
+  "modal.row.insert.info": "挿入する方向を選択してください。",
+  "modal.row.insert.type.up": "上部挿入",
+  "modal.row.insert.type.down": "下の挿入",
   "modal.move.setting": "移動設定",
   "modal.move.setting.info": "間隔を設定し、移動方向を選択します。",
   "modal.copy.setting": "コピー設定",
@@ -318,13 +342,36 @@
   "contextmenu.font.setting": "폰트 설정(JA)",
   "contextmenu.grid.color.edit": "그리드 색 변경(JA)",
   "contextmenu.dimension.auxiliary.line.edit": "치수 보조선 변경(JA)",
-  "contextmenu.display.edit": "표시 변경(JA)",
+  "contextmenu.display.edit": "表示の変更",
+  "modal.display.edit.info": "寸法線に表示する数値を入力してください",
+  "modal.display.edit.before.length": "既存の長さ",
+  "modal.display.edit.after.length": "変更の長さ",
+  "modal.display.edit.corner.valley": "コーナー・ゴールの場合",
+  "modal.display.edit.input.slope": "경사를 傾斜を着せてください。",
+  "modal.display.edit.input.slope.info": "傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。",
+  "modal.distance": "距離測定",
+  "modal.distance.dual.point": "2点間距離",
+  "modal.distance.horizon": "水平距離",
+  "modal.distance.vertical": "垂直距離",
   "contextmenu.opening.offset": "개구 오프셋(JA)",
   "contextmenu.remove": "삭제(JA)",
   "contextmenu.remove.all": "전체 삭제(JA)",
   "contextmenu.move": "이동(JA)",
   "contextmenu.copy": "복사(JA)",
   "contextmenu.edit": "편집(JA)",
+  "contextmenu.module.vertical.align": "모듈 세로 가운데 정렬(JA)",
+  "contextmenu.module.horizon.align": "모듈 가로 가운데 정렬(JA)",
+  "contextmenu.module.left.align": "모듈 왼쪽 정렬(JA)",
+  "contextmenu.module.right.align": "모듈 오른쪽 정렬(JA)",
+  "contextmenu.module.up.align": "모듈 위쪽 정렬(JA)",
+  "contextmenu.module.down.align": "모듈 아래쪽 정렬(JA)",
+  "contextmenu.module.remove": "모듈 일괄 삭제(JA)",
+  "contextmenu.module.move": "모듈 일괄 이동(JA)",
+  "contextmenu.module.copy": "모듈 일괄 복사(JA)",
+  "contextmenu.module.circuit.number.edit": "モジュール一括回路番号の変更",
+  "modal.module.circuit.number.edit": "モジュール一括回路番号の変更",
+  "modal.module.circuit.number.edit.info": "回路番号を入力してください。",
+  "modal.module.circuit.number": "回路番号",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
   "common.message.noData": "表示するデータがありません",
@@ -415,6 +462,7 @@
   "common.input.file": "ファイルを読み込む",
   "common.input.file.load": "ファイルの追加",
   "common.require": "必須",
+  "common.ok": "確認",
   "commons.west": "立つ",
   "commons.east": "ドン",
   "commons.south": "南",
@@ -690,6 +738,7 @@
   "shed": "片側の流れ",
   "apply": "適用",
   "module": "モジュール",
+  "legend": "凡例",
   "has.sleeve": "袖あり",
   "has.not.sleeve": "袖なし",
   "jerkinhead.width": "半折先幅",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 128d51e1..05f4bcf3 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -308,11 +308,35 @@
   "contextmenu.column.move": "열 이동",
   "contextmenu.column.copy": "열 복사",
   "contextmenu.column.remove": "열 삭제",
+  "modal.panel.column.remove": "열 삭제",
+  "modal.panel.column.remove.info": "삭제열을 어떻게 하시겠습니까?",
+  "modal.panel.column.remove.type.left": "왼쪽으로 줄이다",
+  "modal.panel.column.remove.type.right": "오른쪽으로 줄이다",
+  "modal.panel.column.remove.type.side": "양쪽으로 줄이다",
+  "modal.panel.column.remove.type.none": "줄이지 않는다",
+  "modal.panel.select.column": "선택 열",
+  "modal.panel.select.row": "선택 단",
+  "modal.panel.insert.column": "삽입 열",
+  "modal.panel.insert.row": "삽입 단",
   "contextmenu.column.insert": "열 삽입",
+  "modal.panel.column.insert": "열 삽입",
+  "modal.panel.column.insert.info": "삽입할 방향을 선택해주세요.",
+  "modal.panel.column.insert.type.left": "왼쪽 삽입",
+  "modal.panel.column.insert.type.right": "오른쪽 삽입",
   "contextmenu.row.move": "단 이동",
   "contextmenu.row.copy": "단 복사",
   "contextmenu.row.remove": "단 삭제",
+  "modal.row.remove": "단 삭제",
+  "modal.row.remove.info": "삭제 단을 어떻게 하시겠습니까?",
+  "modal.row.remove.type.up": "위족으로 줄이다",
+  "modal.row.remove.type.down": "아래쪽으로 줄이다",
+  "modal.row.remove.type.side": "양쪽으로 줄이다",
+  "modal.row.remove.type.none": "줄이지 않는다",
   "contextmenu.row.insert": "단 삽입",
+  "modal.row.insert": "단 삽입",
+  "modal.row.insert.info": "삽입할 방향을 선택해주세요.",
+  "modal.row.insert.type.up": "위쪽 삽입",
+  "modal.row.insert.type.down": "아래쪽 삽입",
   "modal.move.setting": "이동 설정",
   "modal.move.setting.info": "간격을 설정하고 이동 방향을 선택하십시오.",
   "modal.copy.setting": "복사 설정",
@@ -324,12 +348,35 @@
   "contextmenu.grid.color.edit": "그리드 색 변경",
   "contextmenu.dimension.auxiliary.line.edit": "치수 보조선 변경",
   "contextmenu.display.edit": "표시 변경",
+  "modal.display.edit.info": "치수선에 표시할 수치를 입력해 주세요.",
+  "modal.display.edit.before.length": "기존 길이",
+  "modal.display.edit.after.length": "변경 길이",
+  "modal.display.edit.corner.valley": "구석・골의 경우",
+  "modal.display.edit.input.slope": "경사를 입력해주세요.",
+  "modal.display.edit.input.slope.info": "경사 설정되어 있는 경우 입력한 수치에 경사 계산을 한 수치가 표시됩니다.",
+  "modal.distance": "거리 측정",
+  "modal.distance.dual.point": "두 점간 거리",
+  "modal.distance.horizon": "수평 거리",
+  "modal.distance.vertical": "수직 거리",
   "contextmenu.opening.offset": "개구 오프셋",
   "contextmenu.remove": "삭제",
   "contextmenu.remove.all": "전체 삭제",
   "contextmenu.move": "이동",
   "contextmenu.copy": "복사",
   "contextmenu.edit": "편집",
+  "contextmenu.module.vertical.align": "모듈 세로 가운데 정렬",
+  "contextmenu.module.horizon.align": "모듈 가로 가운데 정렬",
+  "contextmenu.module.left.align": "모듈 왼쪽 정렬",
+  "contextmenu.module.right.align": "모듈 오른쪽 정렬",
+  "contextmenu.module.up.align": "모듈 위쪽 정렬",
+  "contextmenu.module.down.align": "모듈 아래쪽 정렬",
+  "contextmenu.module.remove": "모듈 일괄 삭제",
+  "contextmenu.module.move": "모듈 일괄 이동",
+  "contextmenu.module.copy": "모듈 일괄 복사",
+  "contextmenu.module.circuit.number.edit": "모듈 일괄 회로 번호 변경",
+  "modal.module.circuit.number.edit": "모듈 일괄 회로 번호 변경",
+  "modal.module.circuit.number.edit.info": "회로 번호를 입력해주세요.",
+  "modal.module.circuit.number": "회로 번호",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",
   "common.message.noData": "No data to display",
@@ -420,6 +467,7 @@
   "common.input.file": "파일 불러오기",
   "common.input.file.load": "불러오기",
   "common.require": "필수",
+  "common.ok": "확인",
   "commons.west": "서",
   "commons.east": "동",
   "commons.south": "남",
@@ -695,6 +743,7 @@
   "shed": "한쪽흐름",
   "apply": "적용",
   "module": "모듈",
+  "legend": "범례",
   "has.sleeve": "소매 있음",
   "has.not.sleeve": "소매 없음",
   "jerkinhead.width": "반절처 폭",

From 33112c1563a9d7d2244a122cd3db734dbb52fac9 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 30 Oct 2024 17:25:51 +0900
Subject: [PATCH 28/60] =?UTF-8?q?=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dimensionLine/DimensionLineSetting.jsx    | 20 +++++++++----------
 .../floor-plan/modal/distance/Distance.jsx    | 10 +++++-----
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
index d24d8d43..a09911b3 100644
--- a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
@@ -17,24 +17,24 @@ export default function DimensionLineSetting(props) {
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
-          <h1 className="title">表示の変更 </h1>
+          <h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
         <div className="modal-body">
-          <div className="guide">寸法線に表示する数値を入力してください</div>
+          <div className="guide">{getMessage('modal.display.edit.info')}</div>
           <div className="mb-box">
             <div className="slope-wrap">
               <div className="outline-form mb15">
-                <span className="mr10">既存の長さ</span>
+                <span className="mr10">{getMessage('modal.display.edit.before.length')}</span>
                 <div className="input-grid mr5">
                   <input type="text" className="input-origin block" defaultValue={5933} readOnly />
                 </div>
               </div>
               <div className="mb-box">
                 <div className="outline-form">
-                  <span className="mr10">変更の長さ</span>
+                  <span className="mr10">{getMessage('modal.display.edit.after.length')}</span>
                   <div className="input-grid mr5">
                     <input type="text" className="input-origin block" defaultValue={0} />
                   </div>
@@ -42,32 +42,32 @@ export default function DimensionLineSetting(props) {
               </div>
               <div className="d-check-box pop">
                 <input type="checkbox" id="ch99" />
-                <label htmlFor="ch99">コーナー・ゴールの場合</label>
+                <label htmlFor="ch99">{getMessage('modal.display.edit.input.slope')}</label>
               </div>
             </div>
           </div>
           <div className="slope-wrap">
-            <div className="warning">傾斜を着せてください。</div>
+            <div className="warning">{getMessage('modal.display.edit.input.slope')}</div>
             <div className="display-change-wrap">
               <div className="outline-form mb15">
-                <span className="mr10">傾斜</span>
+                <span className="mr10">{getMessage('slope')}</span>
                 <div className="grid-select mr10">
                   <QSelectBox title={'0'} option={SelectOption01} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
               <div className="outline-form">
-                <span className="mr10">傾斜</span>
+                <span className="mr10">{getMessage('slope')}</span>
                 <div className="grid-select mr10">
                   <QSelectBox title={'0'} option={SelectOption01} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
             </div>
-            <div className="warning">傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。</div>
+            <div className="warning">{getMessage('modal.display.edit.input.slope.info')}</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/distance/Distance.jsx b/src/components/floor-plan/modal/distance/Distance.jsx
index 06a7a483..b66a1a0e 100644
--- a/src/components/floor-plan/modal/distance/Distance.jsx
+++ b/src/components/floor-plan/modal/distance/Distance.jsx
@@ -14,7 +14,7 @@ export default function Distance(props) {
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm`}>
         <div className="modal-head">
-          <h1 className="title">距離測定 </h1>
+          <h1 className="title">{getMessage('modal.distance')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
@@ -23,7 +23,7 @@ export default function Distance(props) {
           <div className="slope-wrap">
             <div className="eaves-keraba-table">
               <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">2点間距離</div>
+                <div className="eaves-keraba-th">{getMessage('modal.distance.dual.point')}</div>
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '98px' }}>
@@ -34,7 +34,7 @@ export default function Distance(props) {
                 </div>
               </div>
               <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">水平距離</div>
+                <div className="eaves-keraba-th">{getMessage('modal.distance.horizon')}</div>
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '98px' }}>
@@ -45,7 +45,7 @@ export default function Distance(props) {
                 </div>
               </div>
               <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">垂直距離</div>
+                <div className="eaves-keraba-th">{getMessage('modal.distance.vertical')}</div>
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '98px' }}>
@@ -58,7 +58,7 @@ export default function Distance(props) {
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">確認</button>
+            <button className="btn-frame modal act">{getMessage('common.require')}</button>
           </div>
         </div>
       </div>

From 35030dc45df8a616955e63cadb46ee71e33c0175 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 30 Oct 2024 17:26:04 +0900
Subject: [PATCH 29/60] =?UTF-8?q?=EA=B0=81=EB=8F=84=20=EC=9E=85=EB=A0=A5?=
 =?UTF-8?q?=20=ED=95=84=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../floor-plan/modal/roofShape/type/option/Shed.jsx    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx b/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
index 40ccdbef..c4e19a94 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
@@ -1,10 +1,20 @@
 import { useMessage } from '@/hooks/useMessage'
 import { onlyNumberInputChange } from '@/util/input-utils'
+import { useRecoilState } from 'recoil'
+import { pitchTextSelector } from '@/store/canvasAtom'
 
 export default function Shed({ shedWidth, setShedWidth }) {
   const { getMessage } = useMessage()
+  const pitchText = useRecoilState(pitchTextSelector)
   return (
     <>
+      <div className="outline-form mb10">
+        <span className="mr10">{getMessage('slope')}</span>
+        <div className="input-grid mr5" style={{ width: '100px' }}>
+          <input type="text" className="input-origin block" defaultValue={4} />
+        </div>
+        <span className="thin">{pitchText}</span>
+      </div>
       <div className="outline-form">
         <span className="mr10">{getMessage('shed.width')}</span>
         <div className="input-grid mr5" style={{ width: '100px' }}>

From d760d1d654458608058d784bf0e30b15771d9e29 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 30 Oct 2024 17:26:15 +0900
Subject: [PATCH 30/60] =?UTF-8?q?class=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/modal/object/SizeSetting.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx
index bdb25821..fd172aee 100644
--- a/src/components/floor-plan/modal/object/SizeSetting.jsx
+++ b/src/components/floor-plan/modal/object/SizeSetting.jsx
@@ -16,7 +16,7 @@ export default function SizeSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap ssm`}>
+      <div className={`modal-pop-wrap ssm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.size.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>

From 9846cee0b797fa3bd5b48e6cbaedc62338876904 Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Wed, 30 Oct 2024 18:03:38 +0900
Subject: [PATCH 31/60] =?UTF-8?q?refactor:=20state=EB=A5=BC=20usePlan?=
 =?UTF-8?q?=EC=9D=84=20=ED=86=B5=ED=95=B4=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasFrame.jsx  |  9 +++----
 src/components/floor-plan/CanvasLayout.jsx |  6 ++---
 src/components/floor-plan/CanvasMenu.jsx   | 12 ++-------
 src/hooks/useCanvasEvent.js                | 29 ++++++++--------------
 4 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index 7c9ece42..a75040b7 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -2,13 +2,13 @@
 
 import { useEffect, useRef } from 'react'
 
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 
 import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
 import { usePlan } from '@/hooks/usePlan'
 import { useContextMenu } from '@/hooks/useContextMenu'
-import { currentMenuState, currentObjectState, modifiedPlanFlagState } from '@/store/canvasAtom'
+import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
@@ -19,14 +19,11 @@ import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/Panel
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
-  const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState)
   const { canvas } = useCanvas('canvas')
   const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
   const currentMenu = useRecoilValue(currentMenuState)
   const { contextMenu, handleClick, handleKeyup } = useContextMenu()
-
-  const { selectedPlan, checkCanvasObjectEvent, checkUnsavedCanvasPlan, resetModifiedPlans } = usePlan()
-
+  const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans } = usePlan()
   useEvent()
 
   const loadCanvas = () => {
diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index ea3292c0..1604a28f 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/src/components/floor-plan/CanvasLayout.jsx
@@ -1,12 +1,11 @@
 'use client'
 
 import { useContext, useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import CanvasFrame from './CanvasFrame'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { usePlan } from '@/hooks/usePlan'
-import { modifiedPlansState } from '@/store/canvasAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { SessionContext } from '@/app/SessionProvider'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
@@ -16,12 +15,11 @@ export default function CanvasLayout({ children }) {
   const { menuNumber } = useCanvasMenu()
   const { session } = useContext(SessionContext)
   const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
-  const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
-  const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
+  const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
 
   useEffect(() => {
     loadCanvasPlanData(session.userId, objectNo)
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index e8f71f28..63f1840d 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -12,14 +12,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { usePlan } from '@/hooks/usePlan'
 import { useSwal } from '@/hooks/useSwal'
 import { useEvent } from '@/hooks/useEvent'
-import {
-  canvasSettingState,
-  canvasState,
-  canvasZoomState,
-  currentCanvasPlanState,
-  currentMenuState,
-  verticalHorizontalModeState,
-} from '@/store/canvasAtom'
+import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
 import { sessionStore } from '@/store/commonAtom'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
@@ -53,7 +46,6 @@ export default function CanvasMenu(props) {
   const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
   const canvasSetting = useRecoilValue(canvasSettingState)
   const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
-  const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const sessionState = useRecoilValue(sessionStore)
   const globalLocale = useRecoilValue(globalLocaleStore)
   const canvas = useRecoilValue(canvasState)
@@ -61,7 +53,7 @@ export default function CanvasMenu(props) {
   const { handleMenu } = useMenu()
 
   const { getMessage } = useMessage()
-  const { saveCanvas } = usePlan()
+  const { currentCanvasPlan, saveCanvas } = usePlan()
   const { swalFire } = useSwal()
   const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
   const commonUtils = useRecoilValue(commonUtilsState)
diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js
index 9573936a..ad3e8e75 100644
--- a/src/hooks/useCanvasEvent.js
+++ b/src/hooks/useCanvasEvent.js
@@ -1,16 +1,9 @@
 import { useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
-import {
-  canvasSizeState,
-  canvasState,
-  canvasZoomState,
-  currentObjectState,
-  fontFamilyState,
-  fontSizeState,
-  modifiedPlanFlagState,
-} from '@/store/canvasAtom'
+import { canvasSizeState, canvasState, canvasZoomState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
 import { QPolygon } from '@/components/fabric/QPolygon'
+import { usePlan } from '@/hooks/usePlan'
 import { fontSelector } from '@/store/fontAtom'
 
 // 캔버스에 필요한 이벤트
@@ -22,8 +15,8 @@ export function useCanvasEvent() {
   const fontSize = useRecoilValue(fontSizeState)
   const fontFamily = useRecoilValue(fontFamilyState)
   const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
-  const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState)
   const lengthTextOption = useRecoilValue(fontSelector('lengthText'))
+  const { modifiedPlanFlag, setModifiedPlanFlag } = usePlan()
 
   // 기본적인 이벤트 필요시 추가
   const attachDefaultEventOnCanvas = () => {
@@ -45,10 +38,8 @@ export function useCanvasEvent() {
     onChange: (e) => {
       const target = e.target
 
-      if (target.name !== 'mouseLine') {
-        if (!modifiedPlanFlag) {
-          setModifiedPlanFlag((prev) => !prev)
-        }
+      if (target.name !== 'mouseLine' && !modifiedPlanFlag) {
+        setModifiedPlanFlag((prev) => !prev)
       }
 
       if (target) {
@@ -65,10 +56,8 @@ export function useCanvasEvent() {
         target.uuid = uuidv4()
       }
 
-      if (target.name !== 'mouseLine') {
-        if (!modifiedPlanFlag) {
-          setModifiedPlanFlag((prev) => !prev)
-        }
+      if (target.name !== 'mouseLine' && !modifiedPlanFlag) {
+        setModifiedPlanFlag((prev) => !prev)
       }
 
       if (target.type === 'QPolygon' || target.type === 'QLine') {
@@ -173,7 +162,9 @@ export function useCanvasEvent() {
 
         target.on('moving', (e) => {
           target.uuid = uuidv4()
-          setModifiedPlanFlag((prev) => !prev)
+          if (!modifiedPlanFlag) {
+            setModifiedPlanFlag((prev) => !prev)
+          }
 
           if (target.parentDirection === 'left' || target.parentDirection === 'right') {
             const minX = target.minX

From de9b53fff34f8aa0dfa357f982e85b0a7d824f44 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 30 Oct 2024 18:07:14 +0900
Subject: [PATCH 32/60] =?UTF-8?q?=EB=A9=B4=ED=98=95=EC=83=81=20=EB=B0=B0?=
 =?UTF-8?q?=EC=B9=98=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../placementSurface/PlacementSurface.jsx     |  3 +-
 .../PlacementSurfaceSetting.jsx               | 70 +++++++++++--------
 2 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
index d6d08675..f95f9c2f 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
@@ -49,7 +49,8 @@ const PlacementSurface = forwardRef((props, refs) => {
                 {lines?.map((line, index) => (
                   <div className="eaves-keraba-item" id={index} key={index}>
                     <div className="eaves-keraba-th">
-                      {line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}
+                      {/*{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}*/}
+                      {num[index]}
                     </div>
                     <div className="eaves-keraba-td">
                       <div className="outline-form">
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
index d6666d5c..c22d2248 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
@@ -241,7 +241,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
 
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
-      <div className={`modal-pop-wrap l-2`}>
+      <div className={`modal-pop-wrap lr-2`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -249,35 +249,45 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
           </button>
         </div>
         <div className="modal-body">
-          <div className="plane-shape-menu">
-            {types.map((type) => (
-              <button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
-                <div className="shape-box">
-                  <Image
-                    src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{
-                      width: 'auto',
-                      height: 'auto',
-                      transform: getInversionState(),
-                    }}
-                  />
-                </div>
-              </button>
-            ))}
-          </div>
-          <div className="shape-library">
-            <button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
-            <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
-            <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
-          </div>
-          <PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={applySurfaces}>
-              {getMessage('write')}
-            </button>
+          <div className="plane-frame-wrap">
+            <div className="plane-shape-wrap">
+              <div className="plane-shape-menu">
+                {types.map((type) => (
+                  <button
+                    key={type.id}
+                    className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`}
+                    onClick={() => setSelectedType(type)}
+                  >
+                    <div className="shape-box">
+                      <Image
+                        src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
+                        alt="react"
+                        width={0}
+                        height={0}
+                        style={{
+                          width: 'auto',
+                          height: 'auto',
+                          transform: getInversionState(),
+                        }}
+                      />
+                    </div>
+                  </button>
+                ))}
+              </div>
+              <div className="shape-library">
+                <button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
+                <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
+                <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
+              </div>
+            </div>
+            <div className="plane-detail-wrap">
+              <PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
+              <div className="plane-shape-btn">
+                <button className="btn-frame modal act" onClick={applySurfaces}>
+                  {getMessage('write')}
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>

From b56d8e99f4e529da9f12b7e5ec0b31fa4bdc4329 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 30 Oct 2024 18:07:30 +0900
Subject: [PATCH 33/60] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/static/images/canvas/plane_shape01.svg |  4 +-
 .../static/images/canvas/plane_shape010.svg   |  4 +-
 .../static/images/canvas/plane_shape011.svg   |  4 +-
 .../static/images/canvas/plane_shape012.svg   |  4 +-
 .../static/images/canvas/plane_shape013.svg   |  4 +-
 .../static/images/canvas/plane_shape014.svg   |  4 +-
 .../static/images/canvas/plane_shape015.svg   |  4 +-
 .../static/images/canvas/plane_shape016.svg   |  6 +-
 .../static/images/canvas/plane_shape017.svg   |  4 +-
 .../static/images/canvas/plane_shape018.svg   |  4 +-
 public/static/images/canvas/plane_shape02.svg |  4 +-
 public/static/images/canvas/plane_shape03.svg |  4 +-
 public/static/images/canvas/plane_shape04.svg |  4 +-
 public/static/images/canvas/plane_shape05.svg |  4 +-
 public/static/images/canvas/plane_shape06.svg |  4 +-
 public/static/images/canvas/plane_shape07.svg |  4 +-
 public/static/images/canvas/plane_shape08.svg |  4 +-
 public/static/images/canvas/plane_shape09.svg |  4 +-
 src/styles/_contents.scss                     | 16 ++++
 src/styles/_modal.scss                        | 88 ++++++++++++-------
 20 files changed, 106 insertions(+), 72 deletions(-)

diff --git a/public/static/images/canvas/plane_shape01.svg b/public/static/images/canvas/plane_shape01.svg
index a32d0c39..33408815 100644
--- a/public/static/images/canvas/plane_shape01.svg
+++ b/public/static/images/canvas/plane_shape01.svg
@@ -1,3 +1,3 @@
-<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M27 0.804011L52.9645 33.5H1.03554L27 0.804011Z" stroke="white"/>
+<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 1.56205L17.865 11H2.13504L10 1.56205Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape010.svg b/public/static/images/canvas/plane_shape010.svg
index a17616fb..8d46bdfb 100644
--- a/public/static/images/canvas/plane_shape010.svg
+++ b/public/static/images/canvas/plane_shape010.svg
@@ -1,3 +1,3 @@
-<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M43.6009 0.5L53.3736 43.5H0.5V13.537H21.9375H22.4375V13.037V0.5H43.6009Z" stroke="white"/>
+<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4907 1L18.7587 16H1V5.63636H8.14815H9.14815V4.63636V1H15.4907Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape011.svg b/public/static/images/canvas/plane_shape011.svg
index 4068d35a..6888ecb7 100644
--- a/public/static/images/canvas/plane_shape011.svg
+++ b/public/static/images/canvas/plane_shape011.svg
@@ -1,3 +1,3 @@
-<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.3991 43.5H53.5V25.537H29.0625H28.5625V25.037V0.5H0.626389L10.3991 43.5Z" stroke="white"/>
+<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5093 16H19V10H10H8.958L9.00085 8.95888L9.32837 1H1.24132L4.5093 16Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape012.svg b/public/static/images/canvas/plane_shape012.svg
index b7136002..e139be5d 100644
--- a/public/static/images/canvas/plane_shape012.svg
+++ b/public/static/images/canvas/plane_shape012.svg
@@ -1,3 +1,3 @@
-<svg width="57" height="41" viewBox="0 0 57 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30.384 8.3129L30.5329 8.53093H30.7969H39.3543L56.172 40.5H0.896303L25.3336 0.917553L30.384 8.3129Z" stroke="white"/>
+<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8546 3.62169L11.1523 4.0594H11.6816H14.4443L20.3269 15H1.76631L9.65389 1.8558L10.8546 3.62169Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape013.svg b/public/static/images/canvas/plane_shape013.svg
index 6ef6e1a4..b12be00f 100644
--- a/public/static/images/canvas/plane_shape013.svg
+++ b/public/static/images/canvas/plane_shape013.svg
@@ -1,3 +1,3 @@
-<svg width="54" height="41" viewBox="0 0 54 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M28.7562 8.30253L28.9042 8.53127L29.1766 8.53093L53.5 8.50062V40.5H0.871685L24.0017 0.953657L28.7562 8.30253Z" stroke="white"/>
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.083 3.75037L11.379 4.06002L11.8074 4.0594L19 4.04906V15H1.69884L9.09691 1.67251L11.083 3.75037Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape014.svg b/public/static/images/canvas/plane_shape014.svg
index 68789f56..c1c59644 100644
--- a/public/static/images/canvas/plane_shape014.svg
+++ b/public/static/images/canvas/plane_shape014.svg
@@ -1,3 +1,3 @@
-<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.2929 33.5H0.5V0.5H53.5V33.5H36.7071L27.3536 24.1464L27 23.7929L26.6464 24.1464L17.2929 33.5Z" stroke="white"/>
+<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.05791 12H1V1H19V12H13.9421L10.7183 8.67188L10 7.93037L9.28173 8.67188L6.05791 12Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape015.svg b/public/static/images/canvas/plane_shape015.svg
index 76e89b3d..2b5c626e 100644
--- a/public/static/images/canvas/plane_shape015.svg
+++ b/public/static/images/canvas/plane_shape015.svg
@@ -1,3 +1,3 @@
-<svg width="40" height="50" viewBox="0 0 40 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 0.64603L39.5 16.6006V49.5H0.5V16.6006L20 0.64603Z" stroke="white"/>
+<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 1.299L14 6.68809V18H1V6.68809L7.5 1.299Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape016.svg b/public/static/images/canvas/plane_shape016.svg
index 54b8259c..50dd2351 100644
--- a/public/static/images/canvas/plane_shape016.svg
+++ b/public/static/images/canvas/plane_shape016.svg
@@ -1,5 +1,3 @@
-<svg width="54" height="42" viewBox="0 0 54 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.971595 41.5L10.2573 28.5H44.727L53.0842 41.5H0.971595Z" fill="#313131" stroke="white"/>
-<path d="M10.5 0.5H44.5V28.5H10.5V0.5Z" fill="#313131" stroke="white"/>
-<rect x="11" y="28" width="33" height="1" fill="#313131"/>
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.96963 10.3554L4.07692 10.1429V9.90476V1H15.9231V9.90476V10.1429L16.0304 10.3554L18.375 15H1.625L3.96963 10.3554Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape017.svg b/public/static/images/canvas/plane_shape017.svg
index d0378c1f..6aebee57 100644
--- a/public/static/images/canvas/plane_shape017.svg
+++ b/public/static/images/canvas/plane_shape017.svg
@@ -1,3 +1,3 @@
-<svg width="58" height="39" viewBox="0 0 58 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M57.4251 17.0318L46.691 38.5H0.865706L22.7888 0.5H46.728L57.4251 17.0318Z" stroke="white"/>
+<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.8541 6.14406L17.5432 14H1.70065L8.93284 1H16.9517L20.8541 6.14406Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape018.svg b/public/static/images/canvas/plane_shape018.svg
index 4e48f83d..384a6c53 100644
--- a/public/static/images/canvas/plane_shape018.svg
+++ b/public/static/images/canvas/plane_shape018.svg
@@ -1,3 +1,3 @@
-<svg width="58" height="47" viewBox="0 0 58 47" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M57.339 20.1115L40.724 46.5H0.962002L33.1033 0.72297L57.339 20.1115Z" stroke="white"/>
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.6552 7.73365L14.6298 17H1.88045L12.3752 1.43676L20.6552 7.73365Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape02.svg b/public/static/images/canvas/plane_shape02.svg
index aa0a756f..e8dc3290 100644
--- a/public/static/images/canvas/plane_shape02.svg
+++ b/public/static/images/canvas/plane_shape02.svg
@@ -1,3 +1,3 @@
-<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="53" height="33" fill="#313131" stroke="white"/>
+<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="18" height="10" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape03.svg b/public/static/images/canvas/plane_shape03.svg
index fb6c7d0a..d817097b 100644
--- a/public/static/images/canvas/plane_shape03.svg
+++ b/public/static/images/canvas/plane_shape03.svg
@@ -1,3 +1,3 @@
-<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.654784 33.5L9.66306 0.5H44.3369L53.3452 33.5H0.654784Z" stroke="white"/>
+<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.98369 1.72462C4.10657 1.29565 4.4988 1 4.94502 1H15.055C15.5012 1 15.8934 1.29565 16.0163 1.72462L18.308 9.72462C18.491 10.3636 18.0113 11 17.3466 11H2.65336C1.98869 11 1.50899 10.3636 1.69202 9.72462L3.98369 1.72462Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape04.svg b/public/static/images/canvas/plane_shape04.svg
index 3cbf25c8..f2aa9929 100644
--- a/public/static/images/canvas/plane_shape04.svg
+++ b/public/static/images/canvas/plane_shape04.svg
@@ -1,3 +1,3 @@
-<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M43.5 43.5H1.20711L43.5 1.20711V43.5Z" stroke="white"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.12132 11.2929L11.2929 2.12132C11.9229 1.49136 13 1.93752 13 2.82843V12C13 12.5523 12.5523 13 12 13H2.82843C1.93752 13 1.49136 11.9229 2.12132 11.2929Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape05.svg b/public/static/images/canvas/plane_shape05.svg
index 36f1448c..31731b35 100644
--- a/public/static/images/canvas/plane_shape05.svg
+++ b/public/static/images/canvas/plane_shape05.svg
@@ -1,3 +1,3 @@
-<svg width="34" height="44" viewBox="0 0 34 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M33.5 1.04958V43.5H0.5V27.8255L33.5 1.04958Z" stroke="white"/>
+<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2.11305V16H1V11.132L12 2.11305Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape06.svg b/public/static/images/canvas/plane_shape06.svg
index a87e30b8..8048344d 100644
--- a/public/static/images/canvas/plane_shape06.svg
+++ b/public/static/images/canvas/plane_shape06.svg
@@ -1,3 +1,3 @@
-<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.6187 33.5L7.70137 0.5H53.3813L46.2986 33.5H0.6187Z" stroke="white"/>
+<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.22928 12L3.51619 1H18.7707L16.4838 12H1.22928Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape07.svg b/public/static/images/canvas/plane_shape07.svg
index 526c95bc..a2a33ae3 100644
--- a/public/static/images/canvas/plane_shape07.svg
+++ b/public/static/images/canvas/plane_shape07.svg
@@ -1,3 +1,3 @@
-<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 23.5H9.5V24V33.5H0.5V0.5H53.5V33.5H44.5V24V23.5H44H10Z" stroke="white"/>
+<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.18518 8.17647H5.18518V9.17647V12H1V1H19V12H14.8148V9.17647V8.17647H13.8148H6.18518Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape08.svg b/public/static/images/canvas/plane_shape08.svg
index 8ad3bf5a..7a9b07e7 100644
--- a/public/static/images/canvas/plane_shape08.svg
+++ b/public/static/images/canvas/plane_shape08.svg
@@ -1,3 +1,3 @@
-<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22.4375 13.037V0.5H53.5V43.5H0.5V13.537H21.9375H22.4375V13.037Z" stroke="white"/>
+<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.125 5V1H19V16H1V6H8.125H9.125V5Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/static/images/canvas/plane_shape09.svg b/public/static/images/canvas/plane_shape09.svg
index 519294ef..bc0ad775 100644
--- a/public/static/images/canvas/plane_shape09.svg
+++ b/public/static/images/canvas/plane_shape09.svg
@@ -1,3 +1,3 @@
-<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30.4375 25.037V0.5H53.5V43.5H1.03302L15.242 25.537H29.9375H30.4375V25.037Z" stroke="white"/>
+<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1111 9.27023L12.0905 1H19V16H1.8753L5.71843 10.2727H11.1111H12.1136L12.1111 9.27023Z" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 97f69dbe..4adebc7c 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -769,6 +769,22 @@
     .btn-area{
         padding-bottom: 15px;
         border-bottom: 1px solid #ECF0F4;
+        .file-upload{
+            display: inline-block;
+            height: 30px;
+            background-color: #94A0AD;
+            padding: 0 10px;
+            border-radius: 2px;
+            font-size: 13px;
+            line-height: 30px;
+            color: #fff;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background .15s ease-in-out;
+            &:hover{
+                background-color: #607F9A;
+            }
+        }
     }
     .drag-file-area{
         position: relative;
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 51f55fb0..7fc9c095 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -60,6 +60,9 @@ $alert-color: #101010;
     &.lr{
         width: 440px;
     }
+    &.lr-2{
+        width: 450px;
+    }
     &.lrr{
         width: 480px;
     }
@@ -880,17 +883,26 @@ $alert-color: #101010;
 }
 
 // 면형상 배치
+.plane-frame-wrap{
+    display: flex;
+    gap: 10px;
+    .plane-shape-wrap{
+        flex: none;
+        width: 73px;
+    }
+}
+
 .plane-shape-menu{
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-template-rows: repeat(3, 90px);
-    gap: 10px;
-    margin-bottom: 10px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 5px;
     .shape-menu-box{
         border-radius: 2px;
-        background-color: #3D3D3D;
-        padding: 8px;
-        transition: all .15s ease-in-out;
+        width: 34px;
+        height: 34px;
+        background-color: #373737;
+        border: 1px solid #676767;
+        transition: background .15s ease-in-out, border .15s ease-in-out;
         .shape-box{
             display: flex;
             justify-content: center;
@@ -898,11 +910,11 @@ $alert-color: #101010;
             position: relative;
             width: 100%;
             height: 100%;
-            background-color: #313131;
             border-radius: 2px;
         }
         &.act,
         &:hover{
+            border-color: #008BFF;
             background-color: #008BFF;
         }
     }
@@ -910,24 +922,23 @@ $alert-color: #101010;
 
 .shape-library{
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 5px;
-    padding: 5px;
-    background-color: #3D3D3D;
-    margin-bottom: 24px;
+    padding-top: 5px;
     .library-btn{
-        width: 30px;
-        height: 30px;
+        width: 100%;
+        height: 34px;
         border: 1px solid #6C6C6C;
         border-radius: 2px;
-        background-color: transparent;
+        background-color: #373737;
         background-repeat: no-repeat;
         background-position: center;
         transition: all .15s ease-in-out;
-        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 14px 14px;}
-        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 13px 17px;}
-        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 17px 13px;}
+        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
+        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
+        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
         &:hover{
             border-color: #1083E3;
             background-color: #1083E3;
@@ -935,13 +946,22 @@ $alert-color: #101010;
     }
 }
 
-.plane-shape-wrapper{
+.plane-detail-wrap{
     display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.plane-shape-wrapper{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
     gap: 10px;
     .plane-box{
-        padding: 10px;
+        width: 100%;
+        padding: 10px 18px;
         border-radius: 2px;
-        background-color: #3D3D3D;
+        background-color: #313131;
+        border: 1px solid #484848;
         .plane-box-tit{
             font-size: $pop-normal-size;
             font-weight: 600;
@@ -949,14 +969,14 @@ $alert-color: #101010;
             margin-bottom: 10px;
         }
         &.shape-box{
-            flex: 1;
             .shape-box-inner{
                 display: flex;
-                gap:10px;
+                gap:15px;
                 min-height: 140px;
                 .shape-img{
                     position: relative;
-                    flex: 1;
+                    flex: none;
+                    width: 150px;
                     background-color: #fff;
                     border-radius: 2px;
                     img{
@@ -967,11 +987,7 @@ $alert-color: #101010;
                     }
                 }
                 .shape-data{
-                    flex: none;
-                    width: 190px;
-                    background-color: #313131;
-                    border-radius: 2px;
-                    padding: 15px;
+                    flex: 1;
                     .eaves-keraba-table{
                         .eaves-keraba-item{
                             .eaves-keraba-th,
@@ -990,17 +1006,15 @@ $alert-color: #101010;
             }
         }
         &.direction-box{
+            flex: 1;
             display: flex;
             flex-direction: column;
-            flex: none;
-            width: 180px;
             .plane-direction-box{
                 flex: 1;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 width: 100%;
-                padding: 10px 5px;
             }
         }
     }
@@ -1046,9 +1060,15 @@ $alert-color: #101010;
     font-size: $pop-normal-size;
     font-weight: $pop-normal-weight;
     color: $pop-color;
-    margin-top: 24px;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
+    margin-top: 10px;
+}
+.plane-shape-btn{
+    padding-top: 10px;
+    margin-top: auto;
+    button{
+        display: block;
+        width: 100%;
+    }
 }
 
 // 오브젝트 배치

From 1c99204a553ca6107ce9e600bcfe0be2a4808cfe Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 30 Oct 2024 18:08:04 +0900
Subject: [PATCH 34/60] =?UTF-8?q?=EB=B3=B4=EC=A1=B0=EC=84=A0=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=20=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/auxiliary/AuxiliaryMove.jsx         | 42 +++++++++++++++----
 src/locales/ja.json                           |  4 +-
 src/locales/ko.json                           |  2 +
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
index 8b2aca85..db4ad159 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
@@ -5,27 +5,29 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'
 
 export default function AuxiliaryMove(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const [arrow1, setArrow1] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
-          <h1 className="title">補助線の移動 </h1>
+          <h1 className="title">{getMessage('modal.auxiliary.move')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
         <div className="modal-body">
-          <div className="grid-option-tit">移動する方向を入力してください</div>
+          <div className="grid-option-tit">{getMessage('modal.auxiliary.move.info')}</div>
           <div className="grid-option-wrap">
             <div className="grid-option-box">
               <div className="move-form">
-                <p className="mb5">長さ</p>
+                <p className="mb5">{getMessage('length')}</p>
                 <div className="input-move-wrap mb5">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={910} />
@@ -40,15 +42,39 @@ export default function AuxiliaryMove(props) {
                 </div>
               </div>
               <div className="direction-move-wrap">
-                <button className="direction up"></button>
-                <button className="direction down act"></button>
-                <button className="direction left"></button>
-                <button className="direction right"></button>
+                <button
+                  className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                  onClick={() => {
+                    setArrow1('↑')
+                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                  }}
+                ></button>
+                <button
+                  className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                  onClick={() => {
+                    setArrow1('↓')
+                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                  }}
+                ></button>
+                <button
+                  className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
+                  onClick={() => {
+                    setArrow1('←')
+                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                  }}
+                ></button>
+                <button
+                  className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
+                  onClick={() => {
+                    setArrow1('→')
+                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                  }}
+                ></button>
               </div>
             </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/locales/ja.json b/src/locales/ja.json
index 4740d5a0..ffdcb110 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -293,7 +293,9 @@
   "contextmenu.select.move": "선택・이동(JA)",
   "contextmenu.wallline.remove": "외벽선 삭제(JA)",
   "contextmenu.size.edit": "サイズ変更",
-  "contextmenu.auxiliary.move": "보조선 이동(JA)",
+  "contextmenu.auxiliary.move": "補助線の移動",
+  "modal.auxiliary.move": "補助線の移動",
+  "modal.auxiliary.move.info": "移動する方向を入力してください",
   "contextmenu.auxiliary.copy": "보조선 복사(JA)",
   "contextmenu.auxiliary.remove": "보조선 삭제(JA)",
   "contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선(JA)",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 05f4bcf3..1e8cb1bb 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -299,6 +299,8 @@
   "contextmenu.wallline.remove": "외벽선 삭제",
   "contextmenu.size.edit": "사이즈 변경",
   "contextmenu.auxiliary.move": "보조선 이동",
+  "modal.auxiliary.move": "보조선 이동",
+  "modal.auxiliary.move.info": "이동할 방향을 입력해주세요.",
   "contextmenu.auxiliary.copy": "보조선 복사",
   "contextmenu.auxiliary.remove": "보조선 삭제",
   "contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선",

From be3580c7b97a8c27f3f996129356cdff423ba9c5 Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Wed, 30 Oct 2024 18:15:15 +0900
Subject: [PATCH 35/60] =?UTF-8?q?feat:=20canvas=20plan=EC=9D=84=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=ED=95=98=EC=A7=80=20=EC=95=8A=EA=B3=A0=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A5=BC=20=EB=B2=97=EC=96=B4?=
 =?UTF-8?q?=EB=82=AC=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20=ED=99=95=EC=9D=B8?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/QcastProvider.js                   | 15 ++++++++-
 src/components/floor-plan/CanvasFrame.jsx  |  8 ++++-
 src/components/floor-plan/CanvasLayout.jsx |  2 +-
 src/hooks/usePlan.js                       | 37 +++++++++++++++-------
 4 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/app/QcastProvider.js b/src/app/QcastProvider.js
index e03ad186..b88dd63c 100644
--- a/src/app/QcastProvider.js
+++ b/src/app/QcastProvider.js
@@ -1,15 +1,28 @@
 'use client'
 
-// import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
+import { usePlan } from '@/hooks/usePlan'
 import ServerError from './error'
 
 import '@/styles/common.scss'
 
 export const QcastProvider = ({ children }) => {
+  const [planSave, setPlanSave] = useState(false)
+  const { currentCanvasPlan, modifiedPlans, checkUnsavedCanvasPlan } = usePlan()
   const { commonCode, findCommonCode } = useCommonCode()
 
+  useEffect(() => {
+    const targetElement = document.getElementById('canvas')
+    if (!targetElement && currentCanvasPlan?.id && planSave) {
+        setPlanSave((prev) => !prev)
+        checkUnsavedCanvasPlan(currentCanvasPlan.userId)
+    } else if (targetElement && currentCanvasPlan?.id) {
+      setPlanSave(true)
+    }
+  }, [modifiedPlans])
+
   // useEffect(() => {
   //   console.log('commonCode', commonCode)
   //   console.log(findCommonCode(113600))
diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index a75040b7..c259f50c 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -41,10 +41,16 @@ export default function CanvasFrame() {
 
   useEffect(() => {
     if (modifiedPlanFlag && selectedPlan?.id) {
-      // checkCanvasObjectEvent(selectedPlan.id)
+      checkCanvasObjectEvent(selectedPlan.id)
     }
   }, [modifiedPlanFlag])
 
+  useEffect(() => {
+    return () => {
+      resetModifiedPlans()
+    }
+  }, [])
+
   useEffect(() => {
     loadCanvas()
     resetModifiedPlans()
diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index 1604a28f..af405dd2 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/src/components/floor-plan/CanvasLayout.jsx
@@ -14,7 +14,7 @@ export default function CanvasLayout({ children }) {
   // const { menuNumber } = props
   const { menuNumber } = useCanvasMenu()
   const { session } = useContext(SessionContext)
-  const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
+  const [objectNo, setObjectNo] = useState('test123241010001') // 이후 삭제 필요
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const { getMessage } = useMessage()
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index 015d1046..8c126582 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -10,6 +10,7 @@ import { SAVE_KEY } from '@/common/common'
 export function usePlan() {
   const [planNum, setPlanNum] = useState(0)
   const [selectedPlan, setSelectedPlan] = useState(null)
+  const [currentCanvasStatus, setCurrentCanvasStatus] = useState(null)
 
   const [canvas, setCanvas] = useRecoilState(canvasState)
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
@@ -88,11 +89,17 @@ export function usePlan() {
    * 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 확인 후 관리
    */
   const checkCanvasObjectEvent = (planId) => {
+    setCurrentCanvasStatus(currentCanvasData())
     if (!modifiedPlans.some((modifiedPlan) => modifiedPlan === planId) && checkModifiedCanvasPlan(planId)) {
       setModifiedPlans((prev) => [...prev, planId])
       setModifiedPlanFlag(false)
     }
   }
+  useEffect(() => {
+    if (currentCanvasStatus) {
+      setCurrentCanvasPlan((prev) => ({ ...prev, canvasStatus: currentCanvasStatus }))
+    }
+  }, [currentCanvasStatus])
   /**
    * 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
    */
@@ -121,17 +128,21 @@ export function usePlan() {
     setModifiedPlans([])
     setModifiedPlanFlag(false)
   }
-  const checkUnsavedCanvasPlan = (str) => {
-    if (modifiedPlans.length > 0) {
-      swalFire({
-        text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
-        type: 'confirm',
-        confirmFn: async () => {
-          await saveCanvas(userId)
-        },
-      })
-      setModifiedPlans([])
-    }
+
+  /**
+   * 캔버스에 저장되지 않은 변경사항이 있을때 저장 여부를 확인 후 저장
+   */
+  const checkUnsavedCanvasPlan = async (userId) => {
+    swalFire({
+      text: `저장 안된 ${currentCanvasPlan.name} PLAN을 저장하시겠습니까? `,
+      type: 'confirm',
+      confirmFn: async () => {
+        initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
+          ? await putCanvasStatus(currentCanvasPlan.canvasStatus)
+          : await postCanvasStatus(userId, currentCanvasPlan.canvasStatus)
+      },
+    })
+    resetModifiedPlans()
   }
 
   /**
@@ -361,8 +372,12 @@ export function usePlan() {
     canvas,
     plans,
     selectedPlan,
+    currentCanvasPlan,
     modifiedPlans,
+    modifiedPlanFlag,
+    setModifiedPlanFlag,
     checkCanvasObjectEvent,
+    checkUnsavedCanvasPlan,
     resetModifiedPlans,
     saveCanvas,
     handleCurrentPlan,

From a024d84e499c7b3fed1f6d8c4d1739e65e7f763e Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Wed, 30 Oct 2024 18:19:31 +0900
Subject: [PATCH 36/60] =?UTF-8?q?refactor:=20test=20objectNo=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasLayout.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index af405dd2..1604a28f 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/src/components/floor-plan/CanvasLayout.jsx
@@ -14,7 +14,7 @@ export default function CanvasLayout({ children }) {
   // const { menuNumber } = props
   const { menuNumber } = useCanvasMenu()
   const { session } = useContext(SessionContext)
-  const [objectNo, setObjectNo] = useState('test123241010001') // 이후 삭제 필요
+  const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const { getMessage } = useMessage()

From fd7d6ad63ba33fddfd353edca70f708fd61937fb Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Thu, 31 Oct 2024 09:19:18 +0900
Subject: [PATCH 37/60] =?UTF-8?q?key=20event=20=ED=95=A8=EC=88=98=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasFrame.jsx |  2 -
 src/hooks/common/useCommonUtils.js        | 46 ++++++++++++-----------
 src/hooks/useContextMenu.js               |  2 +-
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index 7c9ece42..6a3a191c 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -12,8 +12,6 @@ import { currentMenuState, currentObjectState, modifiedPlanFlagState } from '@/s
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
-
-import { useCommonUtils } from '@/hooks/common/useCommonUtils'
 import { MENU } from '@/common/common'
 import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
 
diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js
index 84c4fdb0..b70ae0c8 100644
--- a/src/hooks/common/useCommonUtils.js
+++ b/src/hooks/common/useCommonUtils.js
@@ -37,6 +37,7 @@ export function useCommonUtils() {
   const commonTextMode = () => {
     let textbox
     if (commonUtils.text) {
+      commonTextKeyEvent()
       addCanvasMouseEventListener('mouse:down', (event) => {
         const pointer = canvas?.getPointer(event.e)
         textbox = new fabric.Textbox('', {
@@ -472,30 +473,32 @@ export function useCommonUtils() {
     }
   }
 
-  //텍스트 모드일때 엔터 이벤트
-  addDocumentEventListener('keydown', document, (e) => {
-    if (e.key === 'Enter') {
-      const activeObject = canvas.getActiveObject()
-      if (activeObject && activeObject.name === 'commonText') {
-        if (activeObject && activeObject.isEditing) {
-          if (activeObject.text === '') {
-            canvas?.remove(activeObject)
-          } else {
-            activeObject.exitEditing()
-          }
-          //정책 협의
-          const texts = canvas.getObjects().filter((obj) => obj.name === 'commonText')
-          texts.forEach((text) => {
-            text.set({ editable: false })
-          })
+  const commonTextKeyEvent = () => {
+    //텍스트 모드일때 엔터 이벤트
+    addDocumentEventListener('keydown', document, (e) => {
+      if (e.key === 'Enter') {
+        const activeObject = canvas.getActiveObject()
+        if (activeObject && activeObject.name === 'commonText') {
+          if (activeObject && activeObject.isEditing) {
+            if (activeObject.text === '') {
+              canvas?.remove(activeObject)
+            } else {
+              activeObject.exitEditing()
+            }
+            //정책 협의
+            const texts = canvas.getObjects().filter((obj) => obj.name === 'commonText')
+            texts.forEach((text) => {
+              text.set({ editable: false })
+            })
 
-          canvas.renderAll()
-          if (setCommonUtilsState) setCommonUtilsState({ ...commonUtils, text: false })
+            canvas.renderAll()
+            if (setCommonUtilsState) setCommonUtilsState({ ...commonUtils, text: false })
+          }
         }
+        initEvent()
       }
-      initEvent()
-    }
-  })
+    })
+  }
 
   const commonFunctions = (mode) => {
     let tempStates = { ...commonUtils }
@@ -591,6 +594,7 @@ export function useCommonUtils() {
     const obj = canvas?.getActiveObject()
     obj.set({ editable: true })
     obj.enterEditing()
+    commonTextKeyEvent()
   }
 
   const deleteObject = () => {
diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index f43e9480..99fa585f 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -43,7 +43,7 @@ export function useContextMenu() {
   const { addPopup } = usePopup()
   const [popupId, setPopupId] = useState(uuidv4())
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
-  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils({})
+  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils()
   const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
   const [cell, setCell] = useState(null)
   const [column, setColumn] = useState(null)

From 2b0d0bbff4348b8de36e40830d3fec9fb5a667ee Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Thu, 31 Oct 2024 09:26:16 +0900
Subject: [PATCH 38/60] Auto stash before merge of "dev" and "origin/dev"

---
 src/styles/_contents.scss | 2723 +++++++++++++++++++------------------
 1 file changed, 1386 insertions(+), 1337 deletions(-)

diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 4adebc7c..fc7bd799 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -17,1416 +17,1465 @@
 //     }
 // }
 // CanvasMenu
-.canvas-menu-wrap{
-    position: fixed;
-    top: 46px;
-    left: 0;
-    display: block;
-    width: 100%;
-    min-width: 1280px;
-    padding-bottom: 0;
-    background-color: #383838;
-    transition: padding .17s ease-in-out;
-    z-index: 999;
-    .canvas-menu-inner{
-        position: relative;
-        display: flex;
-        align-items: center;
-        padding: 0 40px 0 20px;
-        background-color: #2C2C2C;
-        height: 46.8px;
-        z-index: 999;
-        .canvas-menu-list{
-            display: flex;
-            align-items: center;
-            height: 100%;
-            .canvas-menu-item{
-                display: flex;
-                align-items: center;
-                height: 100%;
-                button{
-                    display: flex;
-                    align-items: center;
-                    font-size: 12px;
-                    height: 100%;
-                    color: #fff;
-                    font-weight: 600;
-                    padding: 15px 20px;
-                    opacity: 0.55;
-                    transition: all .17s ease-in-out;
-                    .menu-icon{
-                        display: block;
-                        width: 14px;
-                        height: 14px;
-                        background-repeat: no-repeat;
-                        background-position: center;
-                        background-size: contain;
-                        margin-right: 10px;
-                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
-                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
-                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
-                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
-                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
-                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
-                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
-                    }
-                }
-                &.active{
-                    background-color: #383838;
-                    button{
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-        .canvas-side-btn-wrap{
-            display: flex;
-            align-items: center;
-            margin-left: auto;
-            .select-box{
-                width: 124px;
-                margin-right: 5px;
-                height: 30px;
-                > div{
-                    width: 100%;
-                }
-            }
-            .btn-from{
-                display: flex;
-                align-items: center;
-                gap: 5px;
-                button{
-                    display: block;
-                    width: 30px;
-                    height: 30px;
-                    border-radius: 2px;
-                    background-color: #3D3D3D;
-                    background-position: center;
-                    background-repeat: no-repeat;
-                    background-size: 15px 15px;
-                    transition: all .17s ease-in-out;
-                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
-                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
-                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
-                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
-                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
-                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
-                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
-                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
-                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
-                    &:hover{
-                        background-color: #1083E3;
-                    }
-                    &.active{
-                        background-color: #1083E3;
-                    }
-                }
-            }
-            .ico-btn-from{
-                display: flex;
-                align-items: center;
-                gap: 5px;
-                button{
-                    .ico{
-                        display: block;
-                        width: 15px;
-                        height: 15px;
-                        background-repeat: no-repeat;
-                        background-position: center;
-                        background-size: contain;
-                        &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
-                        &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
-                        &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
-                        &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
-                    }
-                    .name{
-                        font-size: 12px;
-                        color: #fff;
-                    }
-                }
-                &.form06{
-                    .name{
-                        font-size: 13px;
-                    }
-                }
-            }
-            .vertical-horizontal{
-                display: flex;
-                min-width: 170px;
-                height: 28px;
-                margin: 0 5px;
-                border-radius: 2px;
-                background: #373737;
-                line-height: 28px;
-                overflow: hidden;
-                span{
-                    padding: 0 10px;
-                    font-size: 13px;
-                    color: #fff;
-                }
-                button{
-                    margin-left: auto;
-                    height: 100%;
-                    background-color: #4B4B4B;
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: #fff;
-                    padding: 0 7.5px;
-                    transition: all .17s ease-in-out;
-                }
-                &.on{
-                    button{
-                        background-color: #1083E3;
-                    }
-                }
-            }
-            .size-control{
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 10px;
-                background-color: #3D3D3D;
-                border-radius: 2px;
-                width: 100px;
-                height: 30px;
-                margin: 0 5px;
-                span{
-                    font-size: 13px;
-                    color: #fff;
-                }
-                .control-btn{
-                    display: block;
-                    width: 12px;
-                    height: 12px;
-                    background-repeat: no-repeat;
-                    background-size: cover;
-                    background-position: center;
-                    &.minus{
-                        background-image: url(../../public/static/images/canvas/minus.svg);
-                    }
-                    &.plus{
-                        background-image: url(../../public/static/images/canvas/plus.svg);
-                    }
-                }
-            }
-        }
-    }
-    .canvas-depth2-wrap{
-        position: absolute;
-        top: -100%;
-        left: 0;
-        background-color: #383838;
-        width: 100%;
-        height: 50px;
-        transition: all .17s ease-in-out;
-        .canvas-depth2-inner{
-            display: flex;
-            align-items: center;
-            padding: 0 40px;
-            height: 100%;
-            .canvas-depth2-list{
-                display: flex;
-                align-items: center ;
-                height: 100%;
-                .canvas-depth2-item{
-                    display: flex; 
-                    align-items: center;
-                    margin-right: 26px;
-                    height: 100%;
-                    button{
-                        position: relative;
-                        opacity: 0.55;
-                        color: #fff;
-                        font-size: 12px;
-                        font-weight: normal;
-                        height: 100%;
-                        padding-right: 12px;
-                    }
-                    &.active{
-                        button{
-                            opacity: 1;
-                            font-weight: 600;
-                            &:after{
-                                content: '';
-                                position: absolute;
-                                top: 50%;
-                                right: 0;
-                                transform: translateY(-50%);
-                                width: 5px;
-                                height: 8px;
-                                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
-                            }
-                        }
-                    }
-                }
-            }
-            .canvas-depth2-btn-list{
-                display: flex;
-                align-items: center;
-                margin-left: auto;
-                height: 100%;
-                .depth2-btn-box{
-                    display: flex;
-                    align-items: center;
-                    margin-right: 34px;
-                    height: 100%;
-                    transition: all .17s ease-in-out;
-                    button{
-                        position: relative;
-                        font-size: 12px;
-                        font-weight: 400;
-                        height: 100%;
-                        color: #fff;
-                        padding-right: 12px;
-                        &:after{
-                            content: '';
-                            position: absolute;
-                            top: 50%;
-                            right: 0;
-                            transform: translateY(-50%);
-                            width: 5px;
-                            height: 8px;
-                            background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
-                        }
-                    }
-                    &:last-child{
-                        margin-right: 0;
-                    }
-                    &.mouse{
-                        opacity: 0.55;
-                    }
-                }
-            }
-        }
-        &.active{
-            top: 47px;
-        }
-    }
-    &.active{
-        padding-bottom: 50px;
-    }
-}
-
-// canvas-layout
-.canvas-content{
-    padding-top: 46.8px;
-    transition: all .17s ease-in-out;
-    .canvas-frame{
-        height: calc(100vh - 129.3px);
-    }
-    &.active{
-        padding-top: calc(46.8px + 50px);
-        .canvas-frame{
-            height: calc(100vh - 179.4px);
-        }
-    }
-}
-.canvas-layout{
-    padding-top: 37px;
-    .canvas-page-list{
-        position: fixed;
-        top: 92.8px;
-        left: 0;
-        display: flex;
-        background-color: #1C1C1C;
-        border-top: 1px solid #000;
-        width: 100%;
-        min-width: 1280px;
-        transition: all .17s ease-in-out;
-        z-index: 99;
-        &.active{
-            top: calc(92.8px + 50px);
-        }
-        .canvas-plane-wrap{
-            display: flex;
-            align-items: center;
-            max-width: calc(100% - 45px);
-            .canvas-page-box{
-                display: flex;
-                align-items: center;
-                background-color: #1c1c1c;
-                padding: 9.6px 20px;
-                border-right:1px solid #000;
-                min-width: 0;
-                transition: all .17s ease-in-out;
-                span{
-                    display: flex;
-                    align-items: center;
-                    width: 100%;
-                    font-size: 12px;
-                    font-family: 'Pretendard', sans-serif;
-                    color: #AAA;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-                .close{
-                    flex: none;
-                    display: block;
-                    width: 7px;
-                    height: 8px;
-                    margin-left: 15px;
-                    background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
-                    background-size: cover;
-                }
-                &.on{
-                    background-color: #fff;
-                    span{
-                        font-weight: 600;
-                        color: #101010;
-                    }
-                    .close{
-                        background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
-                    }
-                    &:hover{
-                        background-color: #fff;
-                    }
-                }
-                &:hover{
-                    background-color: #000;
-                }
-            }
-        }
-        .plane-add{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 45px;
-            padding: 13.5px 0;
-            background-color: #1C1C1C;
-            border-right: 1px solid #000;
-            transition: all .17s ease-in-out;
-            span{
-                display: block;
-                width: 9px;
-                height: 9px;
-                background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
-                background-size: cover;
-            }
-            &:hover{
-                background-color: #000;
-            }
-        }
-    }
-}
-
-.canvas-frame{
+.canvas-menu-wrap {
+  position: fixed;
+  top: 46px;
+  left: 0;
+  display: block;
+  width: 100%;
+  min-width: 1280px;
+  padding-bottom: 0;
+  background-color: #383838;
+  transition: padding 0.17s ease-in-out;
+  z-index: 999;
+  .canvas-menu-inner {
     position: relative;
-    // height: calc(100% - 36.5px);
-    background-color: #F4F4F7;
-    overflow: auto;
-    transition: all .17s ease-in-out;
-    // &::-webkit-scrollbar {
-    //     width: 10px;
-    //     height: 10px;
-    //     background-color: #fff;
-    // }
-    // &::-webkit-scrollbar-thumb {
-    //     background-color: #C1CCD7;
-    //     border-radius: 30px;
-    // }
-    // &::-webkit-scrollbar-track {
-    //     background-color: #fff;
-    // }
-    .canvas-container{
-        margin: 0 auto;
-        background-color: #fff;
-    }
-    canvas{
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-}
-
-// sub-page
-.sub-header{
-    position: fixed;
-    top: 46px;
-    left: 0;
-    width: 100%;
-    min-width: 1280px;
-    height: 46px;
-    border-bottom: 1px solid #000;
-    background: #2C2C2C;
+    display: flex;
+    align-items: center;
+    padding: 0 40px 0 20px;
+    background-color: #2c2c2c;
+    height: 46.8px;
     z-index: 999;
-    .sub-header-inner{
+    .canvas-menu-list {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      .canvas-menu-item {
         display: flex;
         align-items: center;
         height: 100%;
-        padding: 0 100px;
-        .sub-header-title-wrap{
-            display: flex;
-            align-items: center;
-            .title-item{
-                position: relative;
-                padding: 0 24px;
-                a{
-                    display: flex;
-                    align-items: center;
-                    .icon{
-                        width: 22px;
-                        height: 22px;
-                        margin-right: 8px;
-                        background-repeat: no-repeat;
-                        background-position: center;
-                        background-size: cover;
-                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
-                    }
-                }
-                &:after{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    width: 1px;
-                    height: 16px;
-                    background-color: #D9D9D9;
-                }
-                &:first-child{
-                    padding-left: 0;
-                }
-                &:last-child{
-                    padding-right: 0;
-                    &:after{
-                        display: none;
-                    }
-                }
+        button {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          height: 100%;
+          color: #fff;
+          font-weight: 600;
+          padding: 15px 20px;
+          opacity: 0.55;
+          transition: all 0.17s ease-in-out;
+          .menu-icon {
+            display: block;
+            width: 14px;
+            height: 14px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+            margin-right: 10px;
+            &.con00 {
+              background-image: url(/static/images/canvas/menu_icon00.svg);
             }
+            &.con01 {
+              background-image: url(/static/images/canvas/menu_icon01.svg);
+            }
+            &.con02 {
+              background-image: url(/static/images/canvas/menu_icon02.svg);
+            }
+            &.con03 {
+              background-image: url(/static/images/canvas/menu_icon03.svg);
+            }
+            &.con04 {
+              background-image: url(/static/images/canvas/menu_icon04.svg);
+            }
+            &.con05 {
+              background-image: url(/static/images/canvas/menu_icon05.svg);
+            }
+            &.con06 {
+              background-image: url(/static/images/canvas/menu_icon06.svg);
+            }
+          }
         }
-        .sub-header-title{
-            font-size: 16px;
+        &.active {
+          background-color: #383838;
+          button {
+            opacity: 1;
+          }
+        }
+      }
+    }
+    .canvas-side-btn-wrap {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+      .select-box {
+        width: 124px;
+        margin-right: 5px;
+        height: 30px;
+        > div {
+          width: 100%;
+        }
+      }
+      .btn-from {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        button {
+          display: block;
+          width: 30px;
+          height: 30px;
+          border-radius: 2px;
+          background-color: #3d3d3d;
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: 15px 15px;
+          transition: all 0.17s ease-in-out;
+          &.btn01 {
+            background-image: url(../../public/static/images/canvas/side_icon03.svg);
+          }
+          &.btn02 {
+            background-image: url(../../public/static/images/canvas/side_icon02.svg);
+          }
+          &.btn03 {
+            background-image: url(../../public/static/images/canvas/side_icon01.svg);
+          }
+          &.btn04 {
+            background-image: url(../../public/static/images/canvas/side_icon04.svg);
+          }
+          &.btn05 {
+            background-image: url(../../public/static/images/canvas/side_icon05.svg);
+          }
+          &.btn06 {
+            background-image: url(../../public/static/images/canvas/side_icon06.svg);
+          }
+          &.btn07 {
+            background-image: url(../../public/static/images/canvas/side_icon07.svg);
+          }
+          &.btn08 {
+            background-image: url(../../public/static/images/canvas/side_icon08.svg);
+          }
+          &.btn09 {
+            background-image: url(../../public/static/images/canvas/side_icon09.svg);
+          }
+          &:hover {
+            background-color: #1083e3;
+          }
+          &.active {
+            background-color: #1083e3;
+          }
+        }
+      }
+      .ico-btn-from {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        button {
+          .ico {
+            display: block;
+            width: 15px;
+            height: 15px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+            &.ico01 {
+              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
+            }
+            &.ico02 {
+              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
+            }
+            &.ico03 {
+              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
+            }
+            &.ico04 {
+              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
+            }
+          }
+          .name {
+            font-size: 12px;
             color: #fff;
-            font-weight: 600;
+          }
         }
-        .sub-header-location{
-            margin-left: auto;
-            display: flex;
-            align-items: center;
-            .location-item{
-                position: relative;
-                display: flex;
-                align-items: center;
-                padding: 0 10px;
-                span{
-                    display: flex;
-                    font-size: 12px;
-                    color: #AAA;
-                    font-weight: normal;
-                    cursor: default;
-                }
-                &:after{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    width: 4px;
-                    height: 6px;
-                    background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center;
-                }
-                &:first-child{
-                    padding-left: 0;
-                }
-                &:last-child{
-                    padding-right: 0;
-                    span{
-                        color: #fff;
-                    }
-                    &:after{
-                        display: none;
-                    }
-                }
-            }
+        &.form06 {
+          .name {
+            font-size: 13px;
+          }
         }
-    }
-}
-
-// sub content
-.sub-content{
-    padding-top: 46px;
-    .sub-content-inner{
-        max-width: 1760px;
-        margin: 0 auto;
-        padding: 20px 20px 0;
-        .sub-content-box{
-            margin-bottom: 20px;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    &.estimate{
+      }
+      .vertical-horizontal {
         display: flex;
-        flex-direction: column;
-        padding-top: 0;
-        .sub-content-inner{
-            flex: 1;
-            width: 100%;
+        min-width: 170px;
+        height: 28px;
+        margin: 0 5px;
+        border-radius: 2px;
+        background: #373737;
+        line-height: 28px;
+        overflow: hidden;
+        span {
+          padding: 0 10px;
+          font-size: 13px;
+          color: #fff;
         }
-    }
-}
-.sub-table-box{
-    padding: 20px;
-    border-radius: 6px; 
-    border: 1px solid #E9EAED;
-    background: #FFF;
-    box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-    .table-box-title-wrap{
-        display: flex;
-        align-items: center;
-        margin-bottom: 15px;
-        .title-wrap{
-            display: flex;
-            align-items: center;
-            h3{
-                display: block;
-                font-size: 15px;
-                color: #101010;
-                font-weight: 600;
-                margin-right: 14px;
-                &.product{
-                    margin-right: 10px;
-                }
-            }
-            .product_tit{
-                position: relative;
-                font-size: 15px;
-                font-weight: 600;
-                color: #1083E3;
-                padding-left: 10px;
-                &::before{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    left: 0;
-                    transform: translateY(-50%);
-                    width: 1px;
-                    height: 11px;
-                    background-color: #D9D9D9;
-                }
-            }
-            .option{
-                padding-left: 5px;
-                font-size: 13px;
-                color: #101010;
-                font-weight: 400;
-            }
-            .info-wrap{
-                display: flex;
-                align-items: center;
-                li{
-                    position: relative;
-                    padding: 0 6px;
-                    font-size: 12px;
-                    color: #101010;
-                    font-weight: normal;
-                    span{
-                        font-weight: 600;
-                        &.red{
-                            color: #E23D70;
-                        }
-                    }
-                    &:after{
-                        content: '';
-                        position: absolute;
-                        top: 50%;
-                        right: 0;
-                        transform: translateY(-50%);
-                        width: 1px;
-                        height: 11px;
-                        background-color: #D9D9D9;
-                    }
-                    &:first-child{padding-left: 0;}
-                    &:last-child{padding-right: 0;&::after{display: none;}}
-                }
-            }
+        button {
+          margin-left: auto;
+          height: 100%;
+          background-color: #4b4b4b;
+          font-size: 13px;
+          font-weight: 400;
+          color: #fff;
+          padding: 0 7.5px;
+          transition: all 0.17s ease-in-out;
         }
-    }
-    .left-unit-box{
-        margin-left: auto;
-        display: flex;
-        align-items: center;
-    }
-    .promise-gudie{
-        display: block;
-        font-size: 13px;
-        font-weight: 700;
-        color: #101010;
-        margin-bottom: 20px;
-    }
-    .important{
-        color: #f00;
-    }
-    .sub-center-footer{
+        &.on {
+          button {
+            background-color: #1083e3;
+          }
+        }
+      }
+      .size-control {
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-top: 20px;
-    }
-    .sub-right-footer{
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        margin-top: 20px;
-    }
-}
-.pagination-wrap{
-    margin-top: 24px;
-}
-
-.infomation-wrap{
-    margin-bottom: 30px;
-}
-
-.infomation-box-wrap{
-    display: flex;
-    gap: 10px;
-    .sub-table-box{
-        flex: 1 ;
-    }
-    .info-title{
-        font-size: 14px;
-        font-weight: 500;
-        color: #344356;
-        margin-bottom: 10px;
-    }
-    .info-inner{
-        position: relative;
-        font-size: 13px;
-        color: #344356;
-        .copy-ico{
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            width: 16px;
-            height: 16px;
-            background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center;
-            background-size: cover;
+        gap: 10px;
+        background-color: #3d3d3d;
+        border-radius: 2px;
+        width: 100px;
+        height: 30px;
+        margin: 0 5px;
+        span {
+          font-size: 13px;
+          color: #fff;
         }
+        .control-btn {
+          display: block;
+          width: 12px;
+          height: 12px;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
+          &.minus {
+            background-image: url(../../public/static/images/canvas/minus.svg);
+          }
+          &.plus {
+            background-image: url(../../public/static/images/canvas/plus.svg);
+          }
+        }
+      }
     }
-}
-
-// 견적서
-.estimate-list-wrap{
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    &.one{
-        .estimate-box{
-            &:last-child{
-                min-width: unset;
-            }
-        }
-    }
-    .estimate-box{
-        flex: 1 ;
-        display: flex;
-        align-items: center;
-        &:last-child{
-            flex: none;
-            min-width: 220px;
-        }
-        .estimate-tit{
-            width: 105px;
-            height: 30px;
-            line-height: 30px;
-            background-color: #F4F4F7;
-            border-radius: 100px;
-            text-align: center;
-            font-size: 13px;
-            font-weight: 500;
-            color: #344356;
-        }
-        .estimate-name{
-            font-size: 13px;
-            color: #344356;
-            margin-left: 14px;
-            font-weight: 400;
-            &.blue{
-                font-size: 16px;
-                font-weight: 700;
-                color: #1083E3;
-            }
-            &.red{
-                font-size: 16px;
-                font-weight: 700;
-                color: #D72A2A;
-            }
-        }
-    }
-    &:last-child{
-        margin-bottom: 0;
-    }
-}
-
-// file drag box
-.drag-file-box{
-    padding: 10px;
-    .btn-area{
-        padding-bottom: 15px;
-        border-bottom: 1px solid #ECF0F4;
-        .file-upload{
-            display: inline-block;
-            height: 30px;
-            background-color: #94A0AD;
-            padding: 0 10px;
-            border-radius: 2px;
-            font-size: 13px;
-            line-height: 30px;
-            color: #fff;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background .15s ease-in-out;
-            &:hover{
-                background-color: #607F9A;
-            }
-        }
-    }
-    .drag-file-area{
-        position: relative;
-        margin-top: 15px;
-        p{
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 13px;
-            color: #ccc;
-            font-weight: 400;
-            cursor: default;
-        }
-    }
-    .file-list{
-        .file-item{
-            margin-bottom: 15px;
-            span{
-                position: relative;
-                font-size: 13px;
-                color: #45576F;
-                font-weight: 400;
-                white-space: nowrap;
-                padding-right: 55px;
-                button{
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    width: 15px;
-                    height: 15px;
-                    background: url(../../public/static/images/sub/file_delete.svg)no-repeat center;
-                    background-size: cover;
-                }
-            }
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-}
-
-.special-note-check-wrap{
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    border: 1px solid #ECF0F4;
-    border-radius: 3px;
-    margin-bottom: 30px;
-    .special-note-check-item{
-        padding: 14px 10px;
-        border-right: 1px solid #ECF0F4;
-        border-top: 1px solid #ECF0F4;
-        &:nth-child(5n){
-            border-right: none;
-        }
-        &:nth-child(-n+5){
-            border-top: none;
-        }
-        &.act{
-            background-color: #F7F9FA;
-        }
-    }
-}
-
-.calculation-estimate{
-    border: 1px solid #ECF0F4;
-    border-radius: 3px;
-    padding: 24px;
-    max-height: 350px;
-    overflow-y: auto;
-    margin-bottom: 30px;
-    dl{
-        margin-bottom: 35px;
-        &:last-child{
-            margin-bottom: 0;
-        }
-        dt{
-            font-size: 13px;
-            font-weight: 600;
-            color: #1083E3;
-            margin-bottom: 15px;
-        }
-        dd{
-            font-size: 12px;
-            font-weight: 400;
-            color: #45576F;
-            margin-bottom: 8px;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #d9dee2;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-}
-.esimate-wrap{
-    margin-bottom: 20px;
-}
-
-.estimate-product-option{
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-    .product-price-wrap{
-        display: flex;
-        align-items: center;
-        .product-price-tit{
-            font-size: 13px;
-            font-weight: 400;
-            color: #45576F;
-            margin-right: 10px;
-        }
-        .select-wrap{
-            width: 110px;
-        }
-    }
-    .product-edit-wrap{
-        display: flex;
-        align-items: center;
-        margin-left: auto;
-        .product-edit-explane{
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .explane-item{
-                position: relative;
-                display: flex;
-                align-items: center;
-                padding: 0 10px;
-                font-size: 12px;
-                font-weight: 400;
-                span{
-                    width: 20px;
-                    height: 20px;
-                    margin-right: 5px;
-                    background-size: cover;
-                    background-repeat: no-repeat;
-                    background-position: center;
-                }
-                &:before{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    left: 0;
-                    transform: translateY(-50%);
-                    width: 1px;
-                    height: 12px;
-                    background-color: #D9D9D9;
-                }
-                &:first-child{
-                    padding-left: 0;
-                    &::before{
-                        display: none;
-                    }
-                }
-                &:last-child{
-                    padding-right: 0;
-                }
-                &.item01{
-                    color: #3BBB48;
-                    span{
-                        background-image: url(../../public/static/images/sub/open_ico.svg);
-                    }
-                }
-                &.item02{
-                    color: #909000;
-                    span{
-                        background-image: url(../../public/static/images/sub/change_ico.svg);
-                    }
-                }
-                &.item03{
-                    color: #0191C9;
-                    span{
-                        background-image: url(../../public/static/images/sub/attachment_ico.svg);
-                    }
-                }
-                &.item04{
-                    color: #F16A6A;
-                    span{
-                        background-image: url(../../public/static/images/sub/click_check_ico.svg);
-                    }
-                }
-            }
-        }
-        .product-edit-btn{
-            display: flex;
-            align-items: center;
-            button{
-                display: flex;
-                align-items: center;
-                span{
-                    width: 13px;
-                    height: 13px;
-                    margin-right: 5px;
-                    background-size: cover;
-                    &.plus{
-                        background: url(../../public/static/images/sub/plus_btn.svg)no-repeat center;
-                    }
-                    &.minus{
-                        background: url(../../public/static/images/sub/minus_btn.svg)no-repeat center;
-                    }
-                }
-            }
-        }
-    }
-}
-
-// 발전시물레이션
-.chart-wrap{
-    display: flex;
-    gap: 20px;
+  }
+  .canvas-depth2-wrap {
+    position: absolute;
+    top: -100%;
+    left: 0;
+    background-color: #383838;
     width: 100%;
-    .sub-table-box{
-        height: 100%;
-    }
-    .chart-inner{
-        flex: 1;
-        .chart-box{
-            margin-bottom: 30px;
-        }
-    }
-    .chart-table-wrap{
+    height: 50px;
+    transition: all 0.17s ease-in-out;
+    .canvas-depth2-inner {
+      display: flex;
+      align-items: center;
+      padding: 0 40px;
+      height: 100%;
+      .canvas-depth2-list {
         display: flex;
-        flex-direction: column;
-        flex: none;
-        width: 650px;
-        .sub-table-box{
-            flex: 1;
-            &:first-child{
-                margin-bottom: 20px;
-            }
-        }
-    }
-}
-
-.chart-month-table{
-    table{
-        table-layout: fixed;
-        border-collapse:collapse;
-        border: 1px solid #ECF0F4;
-        border-radius: 4px;
-        thead{
-            th{
-                padding: 4.5px 0;
-                border-bottom: 1px solid #ECF0F4;
-                text-align: center;
-                font-size: 13px;
-                color: #45576F;
-                font-weight: 500;
-                background-color: #F8F9FA;
-            }
-        }
-        tbody{
-            td{
-                font-size: 13px;
-                color: #45576F;
-                text-align: center;
-                padding: 4.5px 0;
-            }
-        }
-    }
-}
-
-.simulation-guide-wrap{
-    display: flex;
-    padding: 20px;
-    .simulation-tit-wrap{
-        flex: none;
-        padding-right: 40px;
-        border-right: 1px solid #EEEEEE;
-        span{
-            display: block;
+        align-items: center;
+        height: 100%;
+        .canvas-depth2-item {
+          display: flex;
+          align-items: center;
+          margin-right: 26px;
+          height: 100%;
+          button {
             position: relative;
-            padding-left: 60px;
-            font-size: 15px;
-            color: #14324F;
-            font-weight: 600;
-            &::before{
+            opacity: 0.55;
+            color: #fff;
+            font-size: 12px;
+            font-weight: normal;
+            height: 100%;
+            padding-right: 12px;
+          }
+          &.active {
+            button {
+              opacity: 1;
+              font-weight: 600;
+              &:after {
                 content: '';
                 position: absolute;
                 top: 50%;
-                left: 0;
+                right: 0;
                 transform: translateY(-50%);
-                width: 40px;
-                height: 40px;
-                background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center;
-                background-size: cover;
+                width: 5px;
+                height: 8px;
+                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+              }
             }
+          }
         }
-    }
-    .simulation-guide-box{
-        flex: 1;
-        padding-left: 40px;
-        dl{
-            margin-bottom: 25px;
-            dt{
-                font-size: 13px;
-                color: #101010;
-                font-weight: 600;
-                margin-bottom: 5px;
-            }
-            dd{
-                font-size: 12px;
-                color: #45576F;
-                font-weight: 400;
-                line-height: 24px;
-            }
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-        ul, ol{
-            list-style: unset;
-        }
-    }
-}
-
-.module-total{
-    display: flex;
-    align-items: center;
-    background-color: #F8F9FA;
-    padding: 9px 0;
-    margin-right: 4px;
-    border: 1px solid #ECF0F4;
-    border-top: none;
-    .total-title{
-        flex: 1;
-        text-align: center;
-        font-size: 13px;
-        color: #344356;
-        font-weight: 500;
-    }
-    .total-num{
-        flex: none;
-        width: 121px;
-        text-align: center;
-        font-size: 15px;
-        color: #344356;
-        font-weight: 500;
-    }
-}
-
-// 물건상세
-.information-help-wrap{
-    display: flex;
-    padding: 24px;
-    background-color: #F4F4F4;
-    border-radius: 4px;
-    margin-bottom: 15px;
-    .information-help-tit-wrap{
-        position: relative;
+      }
+      .canvas-depth2-btn-list {
         display: flex;
         align-items: center;
-        padding-right: 40px;
-        border-right: 1px solid #E0E0E3;
-        .help-tit-icon{
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            margin-right: 10px;
-            background: #fff url(../../public/static/images/sub/information_help.svg)no-repeat center;
-            background-size: 20px 20px;
-        }
-        .help-tit{
-            font-size: 13px;
-            font-weight: 600;
-            color: #45576F;
-        }
-    }
-    .information-help-guide{
-        padding-left: 40px;
-        span{
-            display: block;
+        margin-left: auto;
+        height: 100%;
+        .depth2-btn-box {
+          display: flex;
+          align-items: center;
+          margin-right: 34px;
+          height: 100%;
+          transition: all 0.17s ease-in-out;
+          button {
+            position: relative;
             font-size: 12px;
             font-weight: 400;
-            color: #45576F;
-            margin-bottom: 7px;
-            &:last-child{
-                margin-bottom: 0;
+            height: 100%;
+            color: #fff;
+            padding-right: 12px;
+            &:after {
+              content: '';
+              position: absolute;
+              top: 50%;
+              right: 0;
+              transform: translateY(-50%);
+              width: 5px;
+              height: 8px;
+              background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
             }
+          }
+          &:last-child {
+            margin-right: 0;
+          }
+          &.mouse {
+            opacity: 0.55;
+          }
         }
+      }
     }
+    &.active {
+      top: 47px;
+    }
+  }
+  &.active {
+    padding-bottom: 50px;
+  }
 }
 
-.community-search-warp{
+// canvas-layout
+.canvas-content {
+  padding-top: 46.8px;
+  transition: all 0.17s ease-in-out;
+  .canvas-frame {
+    height: calc(100vh - 129.3px);
+  }
+  &.active {
+    padding-top: calc(46.8px + 50px);
+    .canvas-frame {
+      height: calc(100vh - 179.4px);
+    }
+  }
+}
+.canvas-layout {
+  padding-top: 37px;
+  .canvas-page-list {
+    position: fixed;
+    top: 92.8px;
+    left: 0;
+    display: flex;
+    background-color: #1c1c1c;
+    border-top: 1px solid #000;
+    width: 100%;
+    min-width: 1280px;
+    transition: all 0.17s ease-in-out;
+    z-index: 99;
+    &.active {
+      top: calc(92.8px + 50px);
+    }
+    .canvas-plane-wrap {
+      display: flex;
+      align-items: center;
+      max-width: calc(100% - 45px);
+      .canvas-page-box {
+        display: flex;
+        align-items: center;
+        background-color: #1c1c1c;
+        padding: 9.6px 20px;
+        border-right: 1px solid #000;
+        min-width: 0;
+        transition: all 0.17s ease-in-out;
+        span {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          font-size: 12px;
+          font-family: 'Pretendard', sans-serif;
+          color: #aaa;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        .close {
+          flex: none;
+          display: block;
+          width: 7px;
+          height: 8px;
+          margin-left: 15px;
+          background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
+          background-size: cover;
+        }
+        &.on {
+          background-color: #fff;
+          span {
+            font-weight: 600;
+            color: #101010;
+          }
+          .close {
+            background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
+          }
+          &:hover {
+            background-color: #fff;
+          }
+        }
+        &:hover {
+          background-color: #000;
+        }
+      }
+    }
+    .plane-add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      padding: 13.5px 0;
+      background-color: #1c1c1c;
+      border-right: 1px solid #000;
+      transition: all 0.17s ease-in-out;
+      span {
+        display: block;
+        width: 9px;
+        height: 9px;
+        background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
+        background-size: cover;
+      }
+      &:hover {
+        background-color: #000;
+      }
+    }
+  }
+}
+
+.canvas-frame {
+  position: relative;
+  // height: calc(100% - 36.5px);
+  background-color: #f4f4f7;
+  overflow: auto;
+  transition: all 0.17s ease-in-out;
+  // &::-webkit-scrollbar {
+  //     width: 10px;
+  //     height: 10px;
+  //     background-color: #fff;
+  // }
+  // &::-webkit-scrollbar-thumb {
+  //     background-color: #C1CCD7;
+  //     border-radius: 30px;
+  // }
+  // &::-webkit-scrollbar-track {
+  //     background-color: #fff;
+  // }
+  .canvas-container {
+    margin: 0 auto;
+    background-color: #fff;
+  }
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// sub-page
+.sub-header {
+  position: fixed;
+  top: 46px;
+  left: 0;
+  width: 100%;
+  min-width: 1280px;
+  height: 46px;
+  border-bottom: 1px solid #000;
+  background: #2c2c2c;
+  z-index: 999;
+  .sub-header-inner {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    padding: 10px 0 30px 0;
-    border-bottom: 1px solid #E5E5E5;
-    margin-bottom: 24px;
-    .community-search-box{
+    height: 100%;
+    padding: 0 100px;
+    .sub-header-title-wrap {
+      display: flex;
+      align-items: center;
+      .title-item {
+        position: relative;
+        padding: 0 24px;
+        a {
+          display: flex;
+          align-items: center;
+          .icon {
+            width: 22px;
+            height: 22px;
+            margin-right: 8px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+            &.drawing {
+              background-image: url(../../public/static/images/main/drawing_icon.svg);
+            }
+          }
+        }
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 16px;
+          background-color: #d9d9d9;
+        }
+        &:first-child {
+          padding-left: 0;
+        }
+        &:last-child {
+          padding-right: 0;
+          &:after {
+            display: none;
+          }
+        }
+      }
+    }
+    .sub-header-title {
+      font-size: 16px;
+      color: #fff;
+      font-weight: 600;
+    }
+    .sub-header-location {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      .location-item {
         position: relative;
         display: flex;
         align-items: center;
-        width: 580px;
-        height: 45px;
-        padding: 0 45px 0 20px;
-        margin-bottom: 20px;
-        border-radius: 2px;
-        border: 1px solid #101010;
-        .community-input{
-            width: 100%;
-            height: 100%;
-            font-size: 13px;
-            font-weight: 400;
-            color: #101010;
-            &::placeholder{
-                color: #C8C8C8;
-            }
+        padding: 0 10px;
+        span {
+          display: flex;
+          font-size: 12px;
+          color: #aaa;
+          font-weight: normal;
+          cursor: default;
         }
-        .community-search-ico{
-            position: absolute;
-            top: 50%;
-            right: 20px;
-            transform: translateY(-50%);
-            flex: none;
-            width: 21px;
-            height: 100%;
-            background: url(../../public/static/images/sub/community_search.svg)no-repeat center;
-            background-size: 21px 21px;
-            z-index: 3;
-        }
-    }
-    .community-search-keyword{
-        font-size: 13px;
-        font-weight: 400;
-        color: #45576F;
-        span{
-            font-weight: 600;
-            color: #F16A6A;
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 6px;
+          background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
         }
+        &:first-child {
+          padding-left: 0;
+        }
+        &:last-child {
+          padding-right: 0;
+          span {
+            color: #fff;
+          }
+          &:after {
+            display: none;
+          }
+        }
+      }
     }
+  }
 }
 
-// 자료 다운로드
-.file-down-list{
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 14px;
-    .file-down-item{
+// sub content
+.sub-content {
+  padding-top: 46px;
+  .sub-content-inner {
+    max-width: 1760px;
+    margin: 0 auto;
+    padding: 20px 20px 0;
+    .sub-content-box {
+      margin-bottom: 20px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &.estimate {
+    display: flex;
+    flex-direction: column;
+    padding-top: 0;
+    .sub-content-inner {
+      flex: 1;
+      width: 100%;
+    }
+  }
+}
+.sub-table-box {
+  padding: 20px;
+  border-radius: 6px;
+  border: 1px solid #e9eaed;
+  background: #fff;
+  box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+  .table-box-title-wrap {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    .title-wrap {
+      display: flex;
+      align-items: center;
+      h3 {
+        display: block;
+        font-size: 15px;
+        color: #101010;
+        font-weight: 600;
+        margin-right: 14px;
+        &.product {
+          margin-right: 10px;
+        }
+      }
+      .product_tit {
+        position: relative;
+        font-size: 15px;
+        font-weight: 600;
+        color: #1083e3;
+        padding-left: 10px;
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 11px;
+          background-color: #d9d9d9;
+        }
+      }
+      .option {
+        padding-left: 5px;
+        font-size: 13px;
+        color: #101010;
+        font-weight: 400;
+      }
+      .info-wrap {
         display: flex;
         align-items: center;
-        padding: 24px;
-        border-radius: 4px;
-        border: 1px solid #E5E5E5;
-        background: #FFF; 
-        transition: all .15s ease-in-out;
-        .file-item-info{
-            .item-num{
-                display: inline-block;
-                padding: 6px 17.5px;
-                border-radius: 60px;
-                background-color: #F4F4F7;
-                font-size: 13px;
-                font-weight: 600;
-                color: #101010;
-                margin-bottom: 15px;
+        li {
+          position: relative;
+          padding: 0 6px;
+          font-size: 12px;
+          color: #101010;
+          font-weight: normal;
+          span {
+            font-weight: 600;
+            &.red {
+              color: #e23d70;
             }
-            .item-name{
-                font-size: 16px;
-                color: #101010;
-                font-weight: 500;
-                margin-bottom: 13px;
-            }
-            .item-date{
-                font-size: 13px;
-                font-weight: 400;
-                color: #344356;
+          }
+          &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 1px;
+            height: 11px;
+            background-color: #d9d9d9;
+          }
+          &:first-child {
+            padding-left: 0;
+          }
+          &:last-child {
+            padding-right: 0;
+            &::after {
+              display: none;
             }
+          }
         }
-        .file-down-box{
-            display: flex;
-            align-items: center;
-            flex: none;
-            margin-left: auto;
-            height: 100%;
-            .file-down-btn{
-                width: 36px;
-                height: 36px;
-                background: url(../../public/static/images/sub/file_down_btn.svg)no-repeat center;
-                background-size: cover;
-            }
-        }
-        &:hover{
-            background-color: #F4F4F7;
-        }
+      }
     }
-}
-
-.file-down-nodata{
+  }
+  .left-unit-box {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+  .promise-gudie {
+    display: block;
+    font-size: 13px;
+    font-weight: 700;
+    color: #101010;
+    margin-bottom: 20px;
+  }
+  .important {
+    color: #f00;
+  }
+  .sub-center-footer {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100%;
-    height: 148px;
-    padding: 24px;
-    border-radius: 4px;
-    border: 1px solid #E5E5E5;
-    font-size: 16px;
+    margin-top: 20px;
+  }
+  .sub-right-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+}
+.pagination-wrap {
+  margin-top: 24px;
+}
+
+.infomation-wrap {
+  margin-bottom: 30px;
+}
+
+.infomation-box-wrap {
+  display: flex;
+  gap: 10px;
+  .sub-table-box {
+    flex: 1;
+  }
+  .info-title {
+    font-size: 14px;
     font-weight: 500;
     color: #344356;
+    margin-bottom: 10px;
+  }
+  .info-inner {
+    position: relative;
+    font-size: 13px;
+    color: #344356;
+    .copy-ico {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 16px;
+      height: 16px;
+      background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+
+// 견적서
+.estimate-list-wrap {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  &.one {
+    .estimate-box {
+      &:last-child {
+        min-width: unset;
+      }
+    }
+  }
+  .estimate-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    &:last-child {
+      flex: none;
+      min-width: 220px;
+    }
+    .estimate-tit {
+      width: 105px;
+      height: 30px;
+      line-height: 30px;
+      background-color: #f4f4f7;
+      border-radius: 100px;
+      text-align: center;
+      font-size: 13px;
+      font-weight: 500;
+      color: #344356;
+    }
+    .estimate-name {
+      font-size: 13px;
+      color: #344356;
+      margin-left: 14px;
+      font-weight: 400;
+      &.blue {
+        font-size: 16px;
+        font-weight: 700;
+        color: #1083e3;
+      }
+      &.red {
+        font-size: 16px;
+        font-weight: 700;
+        color: #d72a2a;
+      }
+    }
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// file drag box
+.drag-file-box {
+  padding: 10px;
+  .btn-area {
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ecf0f4;
+    .file-upload {
+      display: inline-block;
+      height: 30px;
+      background-color: #94a0ad;
+      padding: 0 10px;
+      border-radius: 2px;
+      font-size: 13px;
+      line-height: 30px;
+      color: #fff;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.15s ease-in-out;
+      &:hover {
+        background-color: #607f9a;
+      }
+    }
+  }
+  .drag-file-area {
+    position: relative;
+    margin-top: 15px;
+    p {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 13px;
+      color: #ccc;
+      font-weight: 400;
+      cursor: default;
+    }
+  }
+  .file-list {
+    .file-item {
+      margin-bottom: 15px;
+      span {
+        position: relative;
+        font-size: 13px;
+        color: #45576f;
+        font-weight: 400;
+        white-space: nowrap;
+        padding-right: 55px;
+        button {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 15px;
+          height: 15px;
+          background: url(../../public/static/images/sub/file_delete.svg) no-repeat center;
+          background-size: cover;
+        }
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.special-note-check-wrap {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  border: 1px solid #ecf0f4;
+  border-radius: 3px;
+  margin-bottom: 30px;
+  .special-note-check-item {
+    padding: 14px 10px;
+    border-right: 1px solid #ecf0f4;
+    border-top: 1px solid #ecf0f4;
+    &:nth-child(5n) {
+      border-right: none;
+    }
+    &:nth-child(-n + 5) {
+      border-top: none;
+    }
+    &.act {
+      background-color: #f7f9fa;
+    }
+  }
+}
+
+.calculation-estimate {
+  border: 1px solid #ecf0f4;
+  border-radius: 3px;
+  padding: 24px;
+  max-height: 350px;
+  overflow-y: auto;
+  margin-bottom: 30px;
+  dl {
+    margin-bottom: 35px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    dt {
+      font-size: 13px;
+      font-weight: 600;
+      color: #1083e3;
+      margin-bottom: 15px;
+    }
+    dd {
+      font-size: 12px;
+      font-weight: 400;
+      color: #45576f;
+      margin-bottom: 8px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #d9dee2;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+.esimate-wrap {
+  margin-bottom: 20px;
+}
+
+.estimate-product-option {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  .product-price-wrap {
+    display: flex;
+    align-items: center;
+    .product-price-tit {
+      font-size: 13px;
+      font-weight: 400;
+      color: #45576f;
+      margin-right: 10px;
+    }
+    .select-wrap {
+      width: 110px;
+    }
+  }
+  .product-edit-wrap {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    .product-edit-explane {
+      display: flex;
+      align-items: center;
+      margin-right: 15px;
+      .explane-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        font-size: 12px;
+        font-weight: 400;
+        span {
+          width: 20px;
+          height: 20px;
+          margin-right: 5px;
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+        &:before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 12px;
+          background-color: #d9d9d9;
+        }
+        &:first-child {
+          padding-left: 0;
+          &::before {
+            display: none;
+          }
+        }
+        &:last-child {
+          padding-right: 0;
+        }
+        &.item01 {
+          color: #3bbb48;
+          span {
+            background-image: url(../../public/static/images/sub/open_ico.svg);
+          }
+        }
+        &.item02 {
+          color: #909000;
+          span {
+            background-image: url(../../public/static/images/sub/change_ico.svg);
+          }
+        }
+        &.item03 {
+          color: #0191c9;
+          span {
+            background-image: url(../../public/static/images/sub/attachment_ico.svg);
+          }
+        }
+        &.item04 {
+          color: #f16a6a;
+          span {
+            background-image: url(../../public/static/images/sub/click_check_ico.svg);
+          }
+        }
+      }
+    }
+    .product-edit-btn {
+      display: flex;
+      align-items: center;
+      button {
+        display: flex;
+        align-items: center;
+        span {
+          width: 13px;
+          height: 13px;
+          margin-right: 5px;
+          background-size: cover;
+          &.plus {
+            background: url(../../public/static/images/sub/plus_btn.svg) no-repeat center;
+          }
+          &.minus {
+            background: url(../../public/static/images/sub/minus_btn.svg) no-repeat center;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 발전시물레이션
+.chart-wrap {
+  display: flex;
+  gap: 20px;
+  width: 100%;
+  .sub-table-box {
+    height: 100%;
+  }
+  .chart-inner {
+    flex: 1;
+    .chart-box {
+      margin-bottom: 30px;
+    }
+  }
+  .chart-table-wrap {
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    width: 650px;
+    .sub-table-box {
+      flex: 1;
+      &:first-child {
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+
+.chart-month-table {
+  table {
+    table-layout: fixed;
+    border-collapse: collapse;
+    border: 1px solid #ecf0f4;
+    border-radius: 4px;
+    thead {
+      th {
+        padding: 4.5px 0;
+        border-bottom: 1px solid #ecf0f4;
+        text-align: center;
+        font-size: 13px;
+        color: #45576f;
+        font-weight: 500;
+        background-color: #f8f9fa;
+      }
+    }
+    tbody {
+      td {
+        font-size: 13px;
+        color: #45576f;
+        text-align: center;
+        padding: 4.5px 0;
+      }
+    }
+  }
+}
+
+.simulation-guide-wrap {
+  display: flex;
+  padding: 20px;
+  .simulation-tit-wrap {
+    flex: none;
+    padding-right: 40px;
+    border-right: 1px solid #eeeeee;
+    span {
+      display: block;
+      position: relative;
+      padding-left: 60px;
+      font-size: 15px;
+      color: #14324f;
+      font-weight: 600;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 40px;
+        height: 40px;
+        background: url(../../public/static/images/sub/simulation_guide.svg) no-repeat center;
+        background-size: cover;
+      }
+    }
+  }
+  .simulation-guide-box {
+    flex: 1;
+    padding-left: 40px;
+    dl {
+      margin-bottom: 25px;
+      dt {
+        font-size: 13px;
+        color: #101010;
+        font-weight: 600;
+        margin-bottom: 5px;
+      }
+      dd {
+        font-size: 12px;
+        color: #45576f;
+        font-weight: 400;
+        line-height: 24px;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    ul,
+    ol {
+      list-style: unset;
+    }
+  }
+}
+
+.module-total {
+  display: flex;
+  align-items: center;
+  background-color: #f8f9fa;
+  padding: 9px 0;
+  margin-right: 4px;
+  border: 1px solid #ecf0f4;
+  border-top: none;
+  .total-title {
+    flex: 1;
+    text-align: center;
+    font-size: 13px;
+    color: #344356;
+    font-weight: 500;
+  }
+  .total-num {
+    flex: none;
+    width: 121px;
+    text-align: center;
+    font-size: 15px;
+    color: #344356;
+    font-weight: 500;
+  }
+}
+
+// 물건상세
+.information-help-wrap {
+  display: flex;
+  padding: 24px;
+  background-color: #f4f4f4;
+  border-radius: 4px;
+  margin-bottom: 15px;
+  .information-help-tit-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-right: 40px;
+    border-right: 1px solid #e0e0e3;
+    .help-tit-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin-right: 10px;
+      background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center;
+      background-size: 20px 20px;
+    }
+    .help-tit {
+      font-size: 13px;
+      font-weight: 600;
+      color: #45576f;
+    }
+  }
+  .information-help-guide {
+    padding-left: 40px;
+    span {
+      display: block;
+      font-size: 12px;
+      font-weight: 400;
+      color: #45576f;
+      margin-bottom: 7px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.community-search-warp {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 0 30px 0;
+  border-bottom: 1px solid #e5e5e5;
+  margin-bottom: 24px;
+  .community-search-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 580px;
+    height: 45px;
+    padding: 0 45px 0 20px;
+    margin-bottom: 20px;
+    border-radius: 2px;
+    border: 1px solid #101010;
+    .community-input {
+      width: 100%;
+      height: 100%;
+      font-size: 13px;
+      font-weight: 400;
+      color: #101010;
+      &::placeholder {
+        color: #c8c8c8;
+      }
+    }
+    .community-search-ico {
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      transform: translateY(-50%);
+      flex: none;
+      width: 21px;
+      height: 100%;
+      background: url(../../public/static/images/sub/community_search.svg) no-repeat center;
+      background-size: 21px 21px;
+      z-index: 3;
+    }
+  }
+  .community-search-keyword {
+    font-size: 13px;
+    font-weight: 400;
+    color: #45576f;
+    span {
+      font-weight: 600;
+      color: #f16a6a;
+    }
+  }
+}
+
+// 자료 다운로드
+.file-down-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+  .file-down-item {
+    display: flex;
+    align-items: center;
+    padding: 24px;
+    border-radius: 4px;
+    border: 1px solid #e5e5e5;
+    background: #fff;
+    transition: all 0.15s ease-in-out;
+    .file-item-info {
+      .item-num {
+        display: inline-block;
+        padding: 6px 17.5px;
+        border-radius: 60px;
+        background-color: #f4f4f7;
+        font-size: 13px;
+        font-weight: 600;
+        color: #101010;
+        margin-bottom: 15px;
+      }
+      .item-name {
+        font-size: 16px;
+        color: #101010;
+        font-weight: 500;
+        margin-bottom: 13px;
+      }
+      .item-date {
+        font-size: 13px;
+        font-weight: 400;
+        color: #344356;
+      }
+    }
+    .file-down-box {
+      display: flex;
+      align-items: center;
+      flex: none;
+      margin-left: auto;
+      height: 100%;
+      .file-down-btn {
+        width: 36px;
+        height: 36px;
+        background: url(../../public/static/images/sub/file_down_btn.svg) no-repeat center;
+        background-size: cover;
+      }
+    }
+    &:hover {
+      background-color: #f4f4f7;
+    }
+  }
+}
+
+.file-down-nodata {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 148px;
+  padding: 24px;
+  border-radius: 4px;
+  border: 1px solid #e5e5e5;
+  font-size: 16px;
+  font-weight: 500;
+  color: #344356;
 }
 
 //신규물건 등록
-.product-input-wrap{
-    display: flex;
-    align-items: center;
-    width: 200px;
-    height: 30px;
-    background-color: #FAFAFA;
-    border: 1px solid #EEE;
-    padding: 0 10px;
-    input{
-        font-size: 13px;
-        font-weight: 400;
-        color: #999999;
-        padding: 0;
-        height: 100%;
-        flex: 1 ;
-        background-color: inherit;
-    }
-    .product-delete{
-        flex: none;
-        display: block;
-        width: 15px;
-        height: 100%;
-        background: url(../../public/static/images/sub/product-del.svg)no-repeat center;
-        background-size: 15px 15px;
-    }
+.product-input-wrap {
+  display: flex;
+  align-items: center;
+  width: 200px;
+  height: 30px;
+  background-color: #fafafa;
+  border: 1px solid #eee;
+  padding: 0 10px;
+  input {
+    font-size: 13px;
+    font-weight: 400;
+    color: #999999;
+    padding: 0;
+    height: 100%;
+    flex: 1;
+    background-color: inherit;
+  }
+  .product-delete {
+    flex: none;
+    display: block;
+    width: 15px;
+    height: 100%;
+    background: url(../../public/static/images/sub/product-del.svg) no-repeat center;
+    background-size: 15px 15px;
+  }
 }
 
 @media screen and (max-width: 1800px) {
-    .canvas-menu-wrap{
-        .canvas-menu-inner{
-            .canvas-menu-list{
-                .canvas-menu-item button{
-                    .menu-icon{
-                        margin-right: 5px;
-                    }
-                } 
-                .canvas-menu-item{
-                    button{
-                        padding: 15px 15px;
-                        font-size: 11px;
-                    }
-                }
-            }
+  .canvas-menu-wrap {
+    .canvas-menu-inner {
+      .canvas-menu-list {
+        .canvas-menu-item button {
+          .menu-icon {
+            margin-right: 5px;
+          }
         }
-        .canvas-depth2-wrap{
-            .canvas-depth2-inner{
-                .canvas-depth2-list{
-                    .canvas-depth2-item{
-                        button{
-                            font-size: 11px;
-                        }
-                    } 
-                } 
-            }
+        .canvas-menu-item {
+          button {
+            padding: 15px 15px;
+            font-size: 11px;
+          }
         }
-    } 
+      }
+    }
+    .canvas-depth2-wrap {
+      .canvas-depth2-inner {
+        .canvas-depth2-list {
+          .canvas-depth2-item {
+            button {
+              font-size: 11px;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 1600px) {
-    .canvas-menu-wrap{
-        .canvas-menu-inner{
-            .canvas-menu-list{
-                .canvas-menu-item button{
-                    .menu-icon{
-                        display: none;
-                    }
-                } 
-            }
+  .canvas-menu-wrap {
+    .canvas-menu-inner {
+      .canvas-menu-list {
+        .canvas-menu-item button {
+          .menu-icon {
+            display: none;
+          }
         }
-    } 
-    .canvas-content{
-        .canvas-frame{
-            height: calc(100vh - 129.5px);
-        }
-        &.active{
-            .canvas-frame{
-                height: calc(100vh - 179.5px);
-            }
-        } 
-    } 
+      }
+    }
+  }
+  .canvas-content {
+    .canvas-frame {
+      height: calc(100vh - 129.5px);
+    }
+    &.active {
+      .canvas-frame {
+        height: calc(100vh - 179.5px);
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 1500px) {
-    .canvas-menu-wrap{
-        .canvas-menu-inner{
-            .canvas-menu-list{
-                .canvas-menu-item{
-                    button{
-                        padding: 15px 10px;
-                        font-size: 10px;
-                    }
-                }
-            }
-            .canvas-side-btn-wrap{
-                .btn-from{
-                    gap: 3px;
-                }
-                .vertical-horizontal{
-                    margin: 0 3px;
-                    min-width: 150px;
-                }
-                .select-box{
-                    width: 100px;
-                    margin-right: 3px;
-                }
-                .size-control{
-                    width: 90px;
-                    margin: 0 3px;
-                }
-            } 
+  .canvas-menu-wrap {
+    .canvas-menu-inner {
+      .canvas-menu-list {
+        .canvas-menu-item {
+          button {
+            padding: 15px 10px;
+            font-size: 10px;
+          }
         }
+      }
+      .canvas-side-btn-wrap {
+        .btn-from {
+          gap: 3px;
+        }
+        .vertical-horizontal {
+          margin: 0 3px;
+          min-width: 150px;
+        }
+        .select-box {
+          width: 100px;
+          margin-right: 3px;
+        }
+        .size-control {
+          width: 90px;
+          margin: 0 3px;
+        }
+      }
     }
-    .sub-header{
-        .sub-header-inner{
-            .sub-header-title{
-                font-size: 15px;
+  }
+  .sub-header {
+    .sub-header-inner {
+      .sub-header-title {
+        font-size: 15px;
+      }
+      .sub-header-title-wrap {
+        .title-item {
+          a {
+            .icon {
+              width: 20px;
+              height: 20px;
             }
-            .sub-header-title-wrap{
-                .title-item{
-                    a{
-                        .icon{
-                            width: 20px;
-                            height: 20px;
-                        }
-                    } 
-                } 
-            } 
-        } 
-    } 
-    
+          }
+        }
+      }
+    }
+  }
 }

From 1dbf277cf534227f351d2a94c58e9da6140f66d1 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 31 Oct 2024 10:09:45 +0900
Subject: [PATCH 39/60] =?UTF-8?q?=EB=B3=B4=EC=A1=B0=EC=84=A0=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99,=20=EB=B3=B5=EC=82=AC=20=EA=B7=B8=EB=A6=AC=EB=93=9C?=
 =?UTF-8?q?=20=EC=9D=B4=EB=8F=99=20=EB=8F=84=EB=A8=B8=20=EC=98=A4=ED=94=84?=
 =?UTF-8?q?=EC=85=8B=20UI=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=8B=A4?=
 =?UTF-8?q?=EA=B5=AD=EC=96=B4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/auxiliary/AuxiliaryCopy.jsx         |   49 +-
 .../modal/auxiliary/AuxiliaryMove.jsx         |   63 +-
 .../floor-plan/modal/grid/GridMove.jsx        |   14 +-
 .../floor-plan/modal/object/DormerOffset.jsx  |   41 +-
 src/locales/ja.json                           |    4 +-
 src/styles/_modal.scss                        | 3980 ++++++++++-------
 6 files changed, 2374 insertions(+), 1777 deletions(-)

diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx
index b88d7a3b..e4654e4a 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx
@@ -3,50 +3,79 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
+import { useState } from 'react'
 
 export default function AuxiliaryCopy(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const [arrow1, setArrow1] = useState(null)
+  const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
-          <h1 className="title">補助線のコピー </h1>
+          <h1 className="title">{getMessage('modal.auxiliary.copy')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
         <div className="modal-body">
-          <div className="grid-option-tit">コピーする方向を入力してください</div>
+          <div className="grid-option-tit">{getMessage('modal.auxiliary.copy.info')}</div>
           <div className="grid-option-wrap">
             <div className="grid-option-box">
               <div className="move-form">
-                <p className="mb5">長さ</p>
+                <p className="mb5">{getMessage('length')}</p>
                 <div className="input-move-wrap mb5">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↑')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↓')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
                 <div className="input-move-wrap">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('←')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('→')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
               </div>
-              <div className="direction-move-wrap">
-                <button className="direction up"></button>
-                <button className="direction down act"></button>
-                <button className="direction left"></button>
-                <button className="direction right"></button>
-              </div>
             </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/auxiliary/AuxiliaryMove.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
index db4ad159..c6918d9c 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
@@ -13,6 +13,7 @@ export default function AuxiliaryMove(props) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [arrow1, setArrow1] = useState(null)
+  const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
@@ -33,44 +34,46 @@ export default function AuxiliaryMove(props) {
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↑')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↓')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
                 <div className="input-move-wrap">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('←')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('→')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
               </div>
-              <div className="direction-move-wrap">
-                <button
-                  className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
-                  onClick={() => {
-                    setArrow1('↑')
-                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
-                  }}
-                ></button>
-                <button
-                  className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
-                  onClick={() => {
-                    setArrow1('↓')
-                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-                  }}
-                ></button>
-                <button
-                  className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
-                  onClick={() => {
-                    setArrow1('←')
-                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
-                  }}
-                ></button>
-                <button
-                  className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
-                  onClick={() => {
-                    setArrow1('→')
-                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
-                  }}
-                ></button>
-              </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
diff --git a/src/components/floor-plan/modal/grid/GridMove.jsx b/src/components/floor-plan/modal/grid/GridMove.jsx
index 6d901fe3..7b39c3f6 100644
--- a/src/components/floor-plan/modal/grid/GridMove.jsx
+++ b/src/components/floor-plan/modal/grid/GridMove.jsx
@@ -34,20 +34,22 @@ export default function GridMove(props) {
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button className="direction up"></button>
+                    <button className="direction down act"></button>
+                  </div>
                 </div>
                 <div className="input-move-wrap">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button className="direction left"></button>
+                    <button className="direction right"></button>
+                  </div>
                 </div>
               </div>
-              <div className="direction-move-wrap">
-                <button className="direction up"></button>
-                <button className="direction down act"></button>
-                <button className="direction left"></button>
-                <button className="direction right"></button>
-              </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
diff --git a/src/components/floor-plan/modal/object/DormerOffset.jsx b/src/components/floor-plan/modal/object/DormerOffset.jsx
index b4292821..0045a469 100644
--- a/src/components/floor-plan/modal/object/DormerOffset.jsx
+++ b/src/components/floor-plan/modal/object/DormerOffset.jsx
@@ -3,12 +3,15 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'
 
 export default function DormerOffset(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const [arrow1, setArrow1] = useState(null)
+  const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
@@ -29,20 +32,46 @@ export default function DormerOffset(props) {
                     <input type="text" className="input-origin" defaultValue={0} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↑')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↓')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
                 <div className="input-move-wrap">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={0} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('←')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('→')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
               </div>
-              <div className="direction-move-wrap">
-                <button className="direction up"></button>
-                <button className="direction down act"></button>
-                <button className="direction left"></button>
-                <button className="direction right"></button>
-              </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
diff --git a/src/locales/ja.json b/src/locales/ja.json
index ffdcb110..6838dc58 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -296,7 +296,9 @@
   "contextmenu.auxiliary.move": "補助線の移動",
   "modal.auxiliary.move": "補助線の移動",
   "modal.auxiliary.move.info": "移動する方向を入力してください",
-  "contextmenu.auxiliary.copy": "보조선 복사(JA)",
+  "contextmenu.auxiliary.copy": "コピーする方向を入力してください",
+  "modal.auxiliary.copy": "補助線のコピー",
+  "modal.auxiliary.copy.info": "コピーする方向を入力してください",
   "contextmenu.auxiliary.remove": "보조선 삭제(JA)",
   "contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선(JA)",
   "contextmenu.auxiliary.cut": "보조선 절삭(JA)",
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 7fc9c095..ec3883d7 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,1879 +4,2411 @@ $pop-bold-weight: 500;
 $pop-normal-size: 12px;
 $alert-color: #101010;
 
-@keyframes mountpop{
-    from{opacity: 0; scale: 0.95;}
-    to{opacity: 1; scale: 1;}
-}
-@keyframes unmountpop{
-    from{opacity: 1; scale: 1;}
-    to{opacity: 0; scale: 0.95;}
+@keyframes mountpop {
+  from {
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
 }
 
-.normal-font{
-    font-size: 12px;
-    font-weight: 400;
-    color: #fff;
-}
-.bold-font{
-    font-size: 12px;
-    font-weight: 500;
-    color: #fff;
+@keyframes unmountpop {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
 }
 
-.modal-pop-wrap{
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: -webkit-fit-content;
-    height: -moz-fit-content;
-    height: fit-content;
-    border: 1px solid #000;
-    border-radius: 4px;
-    background-color: #272727;
-    z-index: 9999999;
-    &.xsm{
-        width: 200px;
-    }
-    &.xxxm{
-        width: 240px;
-    }
-    &.xxm{
-        width: 270px;
-    }
-    &.xm{
-        width: 300px;
-    }
-    &.ssm{
-        width: 380px;
-    }
-    &.sm{
-        width: 580px;
-    }
-    &.r{
-        width: 400px;
-    }
-    &.lr{
-        width: 440px;
-    }
-    &.lr-2{
-        width: 450px;
-    }
-    &.lrr{
-        width: 480px;
-    }
-    &.ml{
-        width: 530px;
-    }
-    &.l-2{
-        width: 640px;
-    }
-    &.lx-2{
-        width: 740px;
-    }
-    &.lx{
-        width: 770px;
-    }
-    &.l{
-        width: 800px;
-    }
-    &.mount{
-        animation: mountpop .17s ease-in-out forwards;
-    }
-    &.unmount{
-        animation: unmountpop .17s ease-in-out forwards;
-    }
-    &.alert{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background-color: transparent;
-        border: none;
-        .modal-head{
-            background-color: transparent;
-            padding: 0 0 8px;
-            .modal-close{
-                width: 20px;
-                height: 20px;
-                background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
-            }
-        }
-        .modal-body{
-            background-color: #fff;
-            padding: 22px;
-            border-radius: 4px;
-            border: 1px solid #101010;
-            color: $alert-color;
-            .alert-title{
-                font-size: 13px;
-                font-weight: 700;
-                color: $alert-color;
-                margin-bottom: 15px;
-            }
-        }
-    }
+.normal-font {
+  font-size: 12px;
+  font-weight: 400;
+  color: #fff;
 }
-.modal-head{
-    display: flex;
-    align-items: center;
-    padding: 10px 24px;
-    background-color: #000;
-    // overflow: hidden;
-    h1.title{
+
+.bold-font {
+  font-size: 12px;
+  font-weight: 500;
+  color: #fff;
+}
+
+.modal-pop-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  border: 1px solid #000;
+  border-radius: 4px;
+  background-color: #272727;
+  z-index: 9999999;
+
+  &.xsm {
+    width: 200px;
+  }
+
+  &.xxxm {
+    width: 240px;
+  }
+
+  &.xxm {
+    width: 270px;
+  }
+
+  &.xm {
+    width: 300px;
+  }
+
+  &.ssm {
+    width: 380px;
+  }
+
+  &.sm {
+    width: 580px;
+  }
+
+  &.r {
+    width: 400px;
+  }
+
+  &.lr {
+    width: 440px;
+  }
+
+  &.lr-2 {
+    width: 450px;
+  }
+
+  &.lrr {
+    width: 480px;
+  }
+
+  &.ml {
+    width: 530px;
+  }
+
+  &.l-2 {
+    width: 640px;
+  }
+
+  &.lx-2 {
+    width: 740px;
+  }
+
+  &.lx {
+    width: 770px;
+  }
+
+  &.l {
+    width: 800px;
+  }
+
+  &.mount {
+    animation: mountpop .17s ease-in-out forwards;
+  }
+
+  &.unmount {
+    animation: unmountpop .17s ease-in-out forwards;
+  }
+
+  &.alert {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: transparent;
+    border: none;
+
+    .modal-head {
+      background-color: transparent;
+      padding: 0 0 8px;
+
+      .modal-close {
+        width: 20px;
+        height: 20px;
+        background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
+      }
+    }
+
+    .modal-body {
+      background-color: #fff;
+      padding: 22px;
+      border-radius: 4px;
+      border: 1px solid #101010;
+      color: $alert-color;
+
+      .alert-title {
         font-size: 13px;
-        color: $pop-color;
         font-weight: 700;
-    }
-    .modal-close{
-        margin-left: auto;
-        color: transparent;
-        font-size: 0;
-        width: 10px;
-        height: 10px;
-        background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
-    }
-}
-.modal-body{
-    padding: 24px;
-    .modal-btn-wrap{
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        button{
-            flex: 1;
-        }
-        &.sub{
-            button{
-                flex: 1 1 auto;
-                padding: 0;
-            }
-            margin-bottom: 14px;
-        }
-    }
-    .modal-check-btn-wrap{
-        margin-top: 15px;
-        .check-wrap-title{
-            font-size: $pop-normal-size;
-            color: $pop-color;
-            font-weight: 600;
-            &.light{
-                font-weight: $pop-normal-weight;
-            }
-        }
-        .flex-check-box{
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 15px;
-            &.for2{
-                justify-content: flex-end;
-                button{
-                    width: calc(50% - 5px);
-                }
-                &.btn{
-                    gap: 5px;
-                    button{
-                        width: calc(50% - 2.5px);
-                    }
-                }
-            }
-            &.for-line{
-                button{
-                    flex: 1;
-                }
-            }
-        }
-    }
-    .outer-line-wrap{
-        border-top: 1px solid #3C3C3C;
-        margin-top: 10px;
-        padding-top: 15px;
-        margin-bottom: 15px;
-        > div{
-            margin-bottom: 15px;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    .modal-guide{
-        display: block;
-        font-size: $pop-normal-size;
         color: $alert-color;
-        font-weight: $pop-normal-weight;
+        margin-bottom: 15px;
+      }
     }
+  }
 }
 
-.adsorption-point{
+.modal-head {
+  display: flex;
+  align-items: center;
+  padding: 10px 24px;
+  background-color: #000;
+  // overflow: hidden;
+  h1.title {
+    font-size: 13px;
+    color: $pop-color;
+    font-weight: 700;
+  }
+
+  .modal-close {
+    margin-left: auto;
+    color: transparent;
+    font-size: 0;
+    width: 10px;
+    height: 10px;
+    background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
+  }
+}
+
+.modal-body {
+  padding: 24px;
+
+  .modal-btn-wrap {
     display: flex;
     align-items: center;
-    background-color: #3A3A3A;
-    border-radius: 3px;
-    padding-left: 11px;
-    overflow: hidden;
-    transition: all 0.17s ease-in-out;
-    span{
-        font-size: $pop-normal-size;
-        color: #898989;
+    gap: 5px;
+
+    button {
+      flex: 1;
     }
-    i{
-        display: flex;
-        align-items: center;
-        padding: 0 7px;
-        margin-left: auto;
-        height: 100%;
-        font-size: 13px;
-        color: #898989;
+
+    &.sub {
+      button {
+        flex: 1 1 auto;
+        padding: 0;
+      }
+
+      margin-bottom: 14px;
     }
-    &.act{
-        i{
-            color: $pop-color;
-            background-color: #1083E3;
+  }
+
+  .modal-check-btn-wrap {
+    margin-top: 15px;
+
+    .check-wrap-title {
+      font-size: $pop-normal-size;
+      color: $pop-color;
+      font-weight: 600;
+
+      &.light {
+        font-weight: $pop-normal-weight;
+      }
+    }
+
+    .flex-check-box {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 15px;
+
+      &.for2 {
+        justify-content: flex-end;
+
+        button {
+          width: calc(50% - 5px);
         }
+
+        &.btn {
+          gap: 5px;
+
+          button {
+            width: calc(50% - 2.5px);
+          }
+        }
+      }
+
+      &.for-line {
+        button {
+          flex: 1;
+        }
+      }
     }
+  }
+
+  .outer-line-wrap {
+    border-top: 1px solid #3C3C3C;
+    margin-top: 10px;
+    padding-top: 15px;
+    margin-bottom: 15px;
+
+    > div {
+      margin-bottom: 15px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .modal-guide {
+    display: block;
+    font-size: $pop-normal-size;
+    color: $alert-color;
+    font-weight: $pop-normal-weight;
+  }
+}
+
+.adsorption-point {
+  display: flex;
+  align-items: center;
+  background-color: #3A3A3A;
+  border-radius: 3px;
+  padding-left: 11px;
+  overflow: hidden;
+  transition: all 0.17s ease-in-out;
+
+  span {
+    font-size: $pop-normal-size;
+    color: #898989;
+  }
+
+  i {
+    display: flex;
+    align-items: center;
+    padding: 0 7px;
+    margin-left: auto;
+    height: 100%;
+    font-size: 13px;
+    color: #898989;
+  }
+
+  &.act {
+    i {
+      color: $pop-color;
+      background-color: #1083E3;
+    }
+  }
 }
 
 // grid-option
-.grid-check-form{
+.grid-check-form {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding-bottom: 15px;
+
+  &.border {
+    border-bottom: 1px solid #424242;
+  }
+}
+
+.grid-option-wrap {
+  .grid-option-box {
     display: flex;
     align-items: center;
-    gap: 15px;
-    padding-bottom: 15px;
-    &.border{
-        border-bottom: 1px solid #424242;
+    background-color: transparent;
+    border: 1px solid #3D3D3D;
+    border-radius: 2px;
+    padding: 15px 10px;
+    gap: 20px;
+    margin-bottom: 10px;
+
+    .grid-input-form {
+      display: flex;
+      align-items: center;
+
+      span {
+        flex: none;
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-bold-weight;
+      }
+
+      .input-grid {
+        width: 54px;
+
+        input {
+          width: 100%;
+        }
+      }
     }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
-.grid-option-wrap{
-    .grid-option-box{
-        display: flex;
-        align-items: center;
-        background-color: transparent;
-        border: 1px solid #3D3D3D;
-        border-radius: 2px;
-        padding: 15px 10px;
-        gap: 20px;
-        margin-bottom: 10px;
-        .grid-input-form{
-            display: flex;
-            align-items: center;
-            span{
-                flex: none;
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                font-weight: $pop-bold-weight;
-            }
-            .input-grid{
-                width: 54px;
-                input{
-                    width: 100%;
-                }
-            }
-        }
-        &:last-child{
-            margin-bottom: 0;
-        }
-    }
+
+.select-form {
+  .sort-select {
+    width: 100%;
+  }
 }
-.select-form{
-    .sort-select{width: 100%;}
+
+.grid-select {
+  flex: 1;
+
+  &.no-flx {
+    flex: unset;
+  }
+
+  .sort-select {
+    width: 100%;
+    background-color: #313131;
+    min-width: auto;
+    font-size: 12px;
+    border: none;
+
+    p {
+      font-size: 12px;
+    }
+
+    > ul {
+      border: none;
+    }
+  }
+
+  &.right {
+    p {
+      text-align: right;
+    }
+
+    ul {
+      li {
+        justify-content: flex-end;
+      }
+    }
+  }
 }
-.grid-select{
-    flex: 1;
-    &.no-flx{
-        flex: unset;
-    }
-    .sort-select{
-        width: 100%;
-        background-color: #313131;
-        min-width: auto;
-        font-size: 12px;
-        border: none;
-        p{
-            font-size: 12px;
-        }
-        > ul{
-            border: none;
-        }
-    }
-    &.right{
-        p{
-            text-align: right;
-        }
-        ul{
-            li{
-                justify-content: flex-end;
-            }
-        }
-    }
-}
-.grid-btn-wrap{
-    padding-top: 15px;
-    text-align: right;
-    button{
-        padding: 0 10px;
-    }
+
+.grid-btn-wrap {
+  padding-top: 15px;
+  text-align: right;
+
+  button {
+    padding: 0 10px;
+  }
 }
 
 // grid copy
-.grid-option-tit{
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-normal-weight;
-    padding-bottom: 15px;
+.grid-option-tit {
+  font-size: $pop-normal-size;
+  color: $pop-color;
+  font-weight: $pop-normal-weight;
+  padding-bottom: 15px;
 
 }
-.grid-direction{
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    flex: 1;
+
+.grid-direction {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
 }
-.direction{
-    width: 22px;
-    height: 22px;
-    background-color: #757575;
-    background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 16px 15px;
-    border-radius: 50%;
-    transition: all .15s ease-in-out;
-    opacity: 0.6;
-    &.down{transform: rotate(180deg);}
-    &.left{transform: rotate(-90deg);}
-    &.right{transform: rotate(90deg);}
-    &:hover,
-    &.act{
-        opacity: 1;
-    }
+
+.direction {
+  width: 22px;
+  height: 22px;
+  background-color: #757575;
+  background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px 15px;
+  border-radius: 50%;
+  transition: all .15s ease-in-out;
+  opacity: 0.6;
+
+  &.down {
+    transform: rotate(180deg);
+  }
+
+  &.left {
+    transform: rotate(-90deg);
+  }
+
+  &.right {
+    transform: rotate(90deg);
+  }
+
+  &:hover,
+  &.act {
+    opacity: 1;
+  }
 }
 
 // grid-move
-.move-form{
-    p{
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-    }
+.move-form {
+  width: 100%;
+
+  p {
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-bold-weight;
+  }
 }
-.input-move-wrap{
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    span{
-        color: $pop-color;
-        font-size: $pop-normal-size;
-    }
-    .input-move{
-        width: 130px;
-        input{
-            width: 100%;
-        }
+
+.input-move-wrap {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  span {
+    color: $pop-color;
+    font-size: $pop-normal-size;
+  }
+
+  .input-move {
+    width: 130px;
+
+    input {
+      width: 100%;
     }
+  }
 }
-.direction-move-wrap{
-    flex: none;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
+
+.direction-move-wrap {
+  flex: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 5px;
+  margin-left: auto;
 }
 
 // 배치면 초기 설정
-.placement-table{
-    table{
-        table-layout: fixed;
-        tr{
-            th{
-                display: flex;
-                align-items: center;
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                font-weight: $pop-bold-weight;
-                padding: 18px 0;
-                border-bottom: 1px solid #424242;
-            }
-            td{
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                border-bottom: 1px solid #424242;
-                padding-left: 20px;
-                vertical-align: middle;
-                .flex-box{
-                    display: flex;
-                    align-items: center;
-                    height: 100%;
-                }
-            }
-            &:first-child{
-                td,
-                th{
-                    padding-top: 0;
-                }
-            }
-        }
-    }
-    .tooltip{
-        position: relative;
-        display: block;
-        width: 15px;
-        height: 15px;
-        margin-left: 5px;
-        background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
-        background-size: cover;
-    }
-    &.light{
-        padding: 0;
-        th,td{
-            color: $alert-color;
-            border-bottom: none;
-            border-top: 1px solid #EFEFEF;
-        }
-        th{
-            padding: 14px 0;
-        }
-        tr{
-            &:first-child{
-                td,
-                th{
-                    padding-top: 14px;
-                }
-            }
-            &:last-child{
-                td,
-                th{
-                    padding-bottom: 0px;
-                }
-            }
-        }
-    }
-}
+.placement-table {
+  table {
+    table-layout: fixed;
 
-.pop-form-radio{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-.placement-option{
-    display: flex;
-    align-items: center;
-    gap: 20px;
-}
-.select-wrap{
-    .sort-select{
-        width: 100%;
-    }
-}
-.flex-ment{
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    span{
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-normal-weight;
-    }
-}
-
-.img-edit-wrap{
-    flex: none;
-    .img-edit-btn{
+    tr {
+      th {
         display: flex;
         align-items: center;
-        height: 30px;
-        padding: 0 10px;
-        font-size: 12px;
-        font-weight: 400;
-        color: #101010;
-        background-color: #fff;
-        border-radius: 2px;
-        cursor: pointer;
-        transition: all .15s ease-in-out;
-        .img-edit{
-            width: 16px;
-            height: 16px;
-            background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center;
-            background-size: cover;
-            margin-right: 5px;
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-bold-weight;
+        padding: 18px 0;
+        border-bottom: 1px solid #424242;
+      }
+
+      td {
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        border-bottom: 1px solid #424242;
+        padding-left: 20px;
+        vertical-align: middle;
+
+        .flex-box {
+          display: flex;
+          align-items: center;
+          height: 100%;
         }
-        &:hover{
-            background-color: #ebebeb;
+      }
+
+      &:first-child {
+        td,
+        th {
+          padding-top: 0;
         }
+      }
     }
+  }
+
+  .tooltip {
+    position: relative;
+    display: block;
+    width: 15px;
+    height: 15px;
+    margin-left: 5px;
+    background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
+    background-size: cover;
+  }
+
+  &.light {
+    padding: 0;
+
+    th, td {
+      color: $alert-color;
+      border-bottom: none;
+      border-top: 1px solid #EFEFEF;
+    }
+
+    th {
+      padding: 14px 0;
+    }
+
+    tr {
+      &:first-child {
+        td,
+        th {
+          padding-top: 14px;
+        }
+      }
+
+      &:last-child {
+        td,
+        th {
+          padding-bottom: 0px;
+        }
+      }
+    }
+  }
 }
-.img-name-wrap{
+
+.pop-form-radio {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.placement-option {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.select-wrap {
+  .sort-select {
+    width: 100%;
+  }
+}
+
+.flex-ment {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  span {
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-normal-weight;
+  }
+}
+
+.img-edit-wrap {
+  flex: none;
+
+  .img-edit-btn {
     display: flex;
     align-items: center;
-    width: 100%;
-    margin-left: 10px;
-    input{
-        flex: 1;
+    height: 30px;
+    padding: 0 10px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #101010;
+    background-color: #fff;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all .15s ease-in-out;
 
+    .img-edit {
+      width: 16px;
+      height: 16px;
+      background: url(../../public/static/images/canvas/img_edit_ico.svg) no-repeat center;
+      background-size: cover;
+      margin-right: 5px;
     }
-    .img-check{
-        flex: none;
-        width: 18px;
-        height: 18px;
-        margin-left: 5px;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+
+    &:hover {
+      background-color: #ebebeb;
     }
+  }
+}
+
+.img-name-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-left: 10px;
+
+  input {
+    flex: 1;
+
+  }
+
+  .img-check {
+    flex: none;
+    width: 18px;
+    height: 18px;
+    margin-left: 5px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+  }
 }
 
 // 외벽선 그리기
-.outline-wrap{
-    padding: 24px 0;
-    border-top: 1px solid #424242;
-    
-    .outline-inner{
-        display: flex;
-        align-items: center;
-        margin-bottom: 14px;
-        &:last-child{
-            margin-bottom: 0;
-        }
-        .outline-form{
-            // width: 50%;
-            margin-right: 15px;
-        }
-    }
-    &:last-child{
-        border-bottom: 1px solid #424242;
-    }
-}
-.outline-form{
+.outline-wrap {
+  padding: 24px 0;
+  border-top: 1px solid #424242;
+
+  .outline-inner {
     display: flex;
     align-items: center;
-    
-    span{
-        width: 60px;
-        flex: none;
-        font-size: $pop-normal-size;
-        font-weight: $pop-bold-weight;
-        color: $pop-color;
-        margin-right: 10px;
-        &.thin{
-            width: auto;
-            font-weight: $pop-normal-weight;
-            margin-right: 0;
-        }
+    margin-bottom: 14px;
+
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .reset-btn{
-        flex: none;
-        width: 30px;
-        height: 30px;
-        background: transparent;
-        border: 1px solid #484848;
-        border-radius: 2px;
-        margin-left: 5px;
-        background-image: url(../../public/static/images/canvas/reset_ico.svg);
-        background-repeat: no-repeat;
-        background-size: 12px 12px;
-        background-position: center;
-    }
-    &:last-child{
-        margin-right: 0;
+    .outline-form {
+      // width: 50%;
+      margin-right: 15px;
     }
+  }
+
+  &:last-child {
+    border-bottom: 1px solid #424242;
+  }
 }
 
-.cul-wrap{
+.outline-form {
+  display: flex;
+  align-items: center;
+
+  span {
+    width: 60px;
+    flex: none;
+    font-size: $pop-normal-size;
+    font-weight: $pop-bold-weight;
+    color: $pop-color;
+    margin-right: 10px;
+
+    &.thin {
+      width: auto;
+      font-weight: $pop-normal-weight;
+      margin-right: 0;
+    }
+  }
+
+  .reset-btn {
+    flex: none;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    border: 1px solid #484848;
+    border-radius: 2px;
+    margin-left: 5px;
+    background-image: url(../../public/static/images/canvas/reset_ico.svg);
+    background-repeat: no-repeat;
+    background-size: 12px 12px;
+    background-position: center;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.cul-wrap {
+  display: flex;
+
+  .outline-box {
+    width: 50%;
+    margin-right: 15px;
+
+    .outline-form {
+      width: 100%;
+      margin-bottom: 14px;
+      margin-right: 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .cul-box {
     display: flex;
-    .outline-box{
-        width: 50%;
-        margin-right: 15px;
-        .outline-form{
-            width: 100%;
-            margin-bottom: 14px;
-            margin-right: 0;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    .cul-box{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 50%;
-        background-color: #3D3D3D;
-        border-radius: 2px ;
-    }
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    background-color: #3D3D3D;
+    border-radius: 2px;
+  }
 }
 
 // 외벽선 속성 설정
-.properties-guide{
-    font-size: $pop-normal-size;
-    color: #AAA;
-    font-weight: $pop-normal-weight;
-    margin-bottom: 14px;
+.properties-guide {
+  font-size: $pop-normal-size;
+  color: #AAA;
+  font-weight: $pop-normal-weight;
+  margin-bottom: 14px;
 }
 
-.setting-tit{
-    font-size: 13px;
-    color: $pop-color;
-    font-weight: $pop-bold-weight;
-    margin-bottom: 10px;
-}
-.properties-setting-wrap{
-    &.outer{
-        margin-top: 24px;
-    }
-    .setting-btn-wrap{
-        display: flex;
-        align-items: center;
-        padding: 14px 0;
-        border-top: 1px solid #424242;
-        border-bottom: 1px solid #424242;
-        .setting-btn{
-            display: block;
-            width: 100%;
-            height: 40px;
-            font-size: 13px;
-            color: #fff;
-            font-weight: 700;
-            border-radius: 2px;
-            transition: all .15s ease-in-out;
-            &.green{
-                background-color: #305941;
-                border: 1px solid #45CD7D;
-                &:hover{
-                    background-color: #3a6b4e;
-                }
-            }
-            &.blue{
-                background-color: #2E5360;
-                border: 1px solid #3FBAE6;
-                &:hover{
-                    background-color: #365f6e;
-                }
-            }
-        }
-    }
+.setting-tit {
+  font-size: 13px;
+  color: $pop-color;
+  font-weight: $pop-bold-weight;
+  margin-bottom: 10px;
 }
 
-// 지붕형상 설정
-.roof-shape-menu{
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 24px 10px;
-    margin-bottom: 24px;
-    .shape-box{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        padding: 13px;
-        background-color: #3D3D3D;
-        transition: background .15s ease-in-out;
-        img{
-            max-width: 100%;
-        }
-    }
-    .shape-title{
-        font-size: $pop-normal-size;
-        font-weight: $pop-bold-weight;
-        color: $pop-color;
-        margin-top: 10px;
-        text-align: center;
-        transition: color .15s ease-in-out;
-    }
-    .shape-menu-box{
-        &.act,
-        &:hover{
-            .shape-box{background-color: #008BFF;}
-            .shape-title{color: #008BFF;}
-        }
-    }
-}
+.properties-setting-wrap {
+  &.outer {
+    margin-top: 24px;
+  }
 
-.setting-box{
+  .setting-btn-wrap {
+    display: flex;
+    align-items: center;
     padding: 14px 0;
     border-top: 1px solid #424242;
     border-bottom: 1px solid #424242;
-}
-.padding-form{
-    padding-left: 23px;
-}
-.discrimination-box{
-    padding: 16px 12px;
-    border: 1px solid #3D3D3D;
-    border-radius: 2px;
+
+    .setting-btn {
+      display: block;
+      width: 100%;
+      height: 40px;
+      font-size: 13px;
+      color: #fff;
+      font-weight: 700;
+      border-radius: 2px;
+      transition: all .15s ease-in-out;
+
+      &.green {
+        background-color: #305941;
+        border: 1px solid #45CD7D;
+
+        &:hover {
+          background-color: #3a6b4e;
+        }
+      }
+
+      &.blue {
+        background-color: #2E5360;
+        border: 1px solid #3FBAE6;
+
+        &:hover {
+          background-color: #365f6e;
+        }
+      }
+    }
+  }
 }
 
-.modal-bottom-border-bx{
-    margin-top: 24px;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
+// 지붕형상 설정
+.roof-shape-menu {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 24px 10px;
+  margin-bottom: 24px;
+
+  .shape-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 13px;
+    background-color: #3D3D3D;
+    transition: background .15s ease-in-out;
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  .shape-title {
+    font-size: $pop-normal-size;
+    font-weight: $pop-bold-weight;
+    color: $pop-color;
+    margin-top: 10px;
+    text-align: center;
+    transition: color .15s ease-in-out;
+  }
+
+  .shape-menu-box {
+    &.act,
+    &:hover {
+      .shape-box {
+        background-color: #008BFF;
+      }
+
+      .shape-title {
+        color: #008BFF;
+      }
+    }
+  }
+}
+
+.setting-box {
+  padding: 14px 0;
+  border-top: 1px solid #424242;
+  border-bottom: 1px solid #424242;
+}
+
+.padding-form {
+  padding-left: 23px;
+}
+
+.discrimination-box {
+  padding: 16px 12px;
+  border: 1px solid #3D3D3D;
+  border-radius: 2px;
+}
+
+.modal-bottom-border-bx {
+  margin-top: 24px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #424242;
 }
 
 // 처마∙케라바 변경
-.eaves-keraba-table{
-    display: table;
-    border-collapse: collapse;
-    .eaves-keraba-item{
-        display: table-row;
-        .eaves-keraba-th,
-        .eaves-keraba-td{
-            font-size: $pop-normal-size;
-            color: $pop-color;
-            font-weight: $pop-normal-weight;
-            display: table-cell;
-            vertical-align: middle;
-            padding-bottom: 14px;
-        }
-        .eaves-keraba-td{
-            padding-left: 10px;
-        }
-        .eaves-keraba-ico{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 5px;
-            background-color: #3D3D3D;
-            border: 1px solid #3D3D3D;
-            border-radius: 2px;
-            cursor: pointer;
-            &.act{
-                border: 1px solid #ED0004;
-            }
-        }
-        &:last-child{
-            .eaves-keraba-th,
-            .eaves-keraba-td{
-                padding-bottom: 0;
-            }
-        }
+.eaves-keraba-table {
+  display: table;
+  border-collapse: collapse;
+
+  .eaves-keraba-item {
+    display: table-row;
+
+    .eaves-keraba-th,
+    .eaves-keraba-td {
+      font-size: $pop-normal-size;
+      color: $pop-color;
+      font-weight: $pop-normal-weight;
+      display: table-cell;
+      vertical-align: middle;
+      padding-bottom: 14px;
     }
+
+    .eaves-keraba-td {
+      padding-left: 10px;
+    }
+
+    .eaves-keraba-ico {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 5px;
+      background-color: #3D3D3D;
+      border: 1px solid #3D3D3D;
+      border-radius: 2px;
+      cursor: pointer;
+
+      &.act {
+        border: 1px solid #ED0004;
+      }
+    }
+
+    &:last-child {
+      .eaves-keraba-th,
+      .eaves-keraba-td {
+        padding-bottom: 0;
+      }
+    }
+  }
 }
-.guide{
-    font-size: $pop-normal-size;
-    font-weight: $pop-normal-weight;
-    color: $pop-color;
-    margin-bottom: 24px;
-    &.sm{
-        margin-bottom: 15px;
-    }
-    span{
-        display: block;
-    }
+
+.guide {
+  font-size: $pop-normal-size;
+  font-weight: $pop-normal-weight;
+  color: $pop-color;
+  margin-bottom: 24px;
+
+  &.sm {
+    margin-bottom: 15px;
+  }
+
+  span {
+    display: block;
+  }
 }
 
 // 지붕면 할당
-.allocation-select-wrap{
+.allocation-select-wrap {
+  display: flex;
+  align-items: center;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #424242;
+  margin-bottom: 14px;
+
+  span {
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-bold-weight;
+    margin-right: 10px;
+  }
+
+  .allocation-edit {
     display: flex;
     align-items: center;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
-    margin-bottom: 14px;
-    span{
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-        margin-right: 10px;
-    }
-    .allocation-edit{
-        display: flex;
-        align-items: center;
-        height: 30px;
-        padding: 0 10px;
-        margin-left: 5px;
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-normal-weight;
-        border: 1px solid #484848;
-        background-color: #323234;
-        i{
-            display: block;
-            width: 12px;
-            height: 12px;
-            margin-right: 5px;
-            background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center;
-            background-size: cover;
-        }
+    height: 30px;
+    padding: 0 10px;
+    margin-left: 5px;
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-normal-weight;
+    border: 1px solid #484848;
+    background-color: #323234;
+
+    i {
+      display: block;
+      width: 12px;
+      height: 12px;
+      margin-right: 5px;
+      background: url(../../public/static/images/canvas/allocation_edit.svg) no-repeat center;
+      background-size: cover;
     }
+  }
 }
 
-.block-box{
-    display: flex;
-    align-items: center;
+.block-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+
+  .flex-ment {
     gap: 10px;
-    margin-bottom: 10px;
-    .flex-ment{
-        gap: 10px;
-        .dec{
-            text-decoration: underline;
-        }
-        .delete{
-            display: block;
-            width: 15px;
-            height: 15px;
-            background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center;
-            background-size: cover;
-        }
+
+    .dec {
+      text-decoration: underline;
     }
-    &:last-child{
-        margin-bottom: 0;
+
+    .delete {
+      display: block;
+      width: 15px;
+      height: 15px;
+      background: url(../../public/static/images/canvas/allocation_delete.svg) no-repeat center;
+      background-size: cover;
     }
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
-.icon-btn-wrap{
-    flex: 1;
+.icon-btn-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  button {
     display: flex;
     align-items: center;
-    gap: 5px;
-    button{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 30px;
-        font-size: $pop-normal-size;
-        font-weight: $pop-normal-weight;
-        color: $pop-color;
-        border: 1px solid #646464;
-        border-radius: 2px;
-        padding: 0 10px;
-        transition: all .15s ease-in-out;
-        i{
-            height: 15px;
-            display: block;
-            margin-left: 10px;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: cover;
-            transition: all .15s ease-in-out;
-            &.allocation01{
-                background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
-                width: 15px;
-            }
-            &.allocation02{
-                background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
-                width: 18px;
-            }
-        }
-        &.act,
-        &:hover{
-            color: #101010;
-            border: 1px solid #101010;
-            background-color: #fff;
-            i{
-                &.allocation01{
-                    background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
-                }
-                &.allocation02{
-                    background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
-                }
-            }
-        }
-    }
-}
-
-// 경사설정
-.slope-wrap{
-    padding-bottom: 24px;
-    border-bottom: 1px solid #424242;
-}
-
-// 면형상 배치
-.plane-frame-wrap{
-    display: flex;
-    gap: 10px;
-    .plane-shape-wrap{
-        flex: none;
-        width: 73px;
-    }
-}
-
-.plane-shape-menu{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 5px;
-    .shape-menu-box{
-        border-radius: 2px;
-        width: 34px;
-        height: 34px;
-        background-color: #373737;
-        border: 1px solid #676767;
-        transition: background .15s ease-in-out, border .15s ease-in-out;
-        .shape-box{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            position: relative;
-            width: 100%;
-            height: 100%;
-            border-radius: 2px;
-        }
-        &.act,
-        &:hover{
-            border-color: #008BFF;
-            background-color: #008BFF;
-        }
-    }
-}
-
-.shape-library{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     justify-content: center;
-    gap: 5px;
-    padding-top: 5px;
-    .library-btn{
-        width: 100%;
-        height: 34px;
-        border: 1px solid #6C6C6C;
-        border-radius: 2px;
-        background-color: #373737;
-        background-repeat: no-repeat;
-        background-position: center;
-        transition: all .15s ease-in-out;
-        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
-        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
-        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
-        &:hover{
-            border-color: #1083E3;
-            background-color: #1083E3;
-        }
-    }
-}
-
-.plane-detail-wrap{
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-.plane-shape-wrapper{
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    .plane-box{
-        width: 100%;
-        padding: 10px 18px;
-        border-radius: 2px;
-        background-color: #313131;
-        border: 1px solid #484848;
-        .plane-box-tit{
-            font-size: $pop-normal-size;
-            font-weight: 600;
-            color: $pop-color;
-            margin-bottom: 10px;
-        }
-        &.shape-box{
-            .shape-box-inner{
-                display: flex;
-                gap:15px;
-                min-height: 140px;
-                .shape-img{
-                    position: relative;
-                    flex: none;
-                    width: 150px;
-                    background-color: #fff;
-                    border-radius: 2px;
-                    img{
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                    }
-                }
-                .shape-data{
-                    flex: 1;
-                    .eaves-keraba-table{
-                        .eaves-keraba-item{
-                            .eaves-keraba-th,
-                            .eaves-keraba-td{
-                                padding-bottom: 10px;
-                            }
-                            &:last-child{
-                                .eaves-keraba-th,
-                                .eaves-keraba-td{
-                                    padding-bottom: 0px;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        &.direction-box{
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            .plane-direction-box{
-                flex: 1;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-            }
-        }
-    }
-}
-.plane-direction{
-    width: 150px;
-    position: relative;
-    height: 120px;
-    span{
-        position: absolute;
-        font-size: 12px;
-        font-weight: 500;
-        color: #B1B1B1;
-        &.top{top: 0; left: 50%; transform: translateX(-50%);}
-        &.right{top: 50%; right: 0; transform: translateY(-50%);}
-        &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
-        &.left{top: 50%; left: 0; transform: translateY(-50%);}
-    }
-    .plane-btn{
-        position: absolute;
-        width: 28px;
-        height: 28px;
-        background-color: #777777;
-        background-image: url(../../public/static/images/canvas/plane_arr.svg);
-        background-size: 12px 13px;
-        background-repeat: no-repeat;
-        background-position: center;
-        border-radius: 50%;
-        transition: all .15s ease-in-out;
-        &.up{top: 22px; left: 50%; transform: translateX(-50%);}
-        &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
-        &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
-        &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
-        &:hover,
-        &.act{
-            background-color: #fff;
-            background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
-        }
-    }
-}
-
-.plane-tab-guide{
+    width: 100%;
+    height: 30px;
     font-size: $pop-normal-size;
     font-weight: $pop-normal-weight;
     color: $pop-color;
-    margin-top: 10px;
-}
-.plane-shape-btn{
-    padding-top: 10px;
-    margin-top: auto;
-    button{
-        display: block;
-        width: 100%;
+    border: 1px solid #646464;
+    border-radius: 2px;
+    padding: 0 10px;
+    transition: all .15s ease-in-out;
+
+    i {
+      height: 15px;
+      display: block;
+      margin-left: 10px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      transition: all .15s ease-in-out;
+
+      &.allocation01 {
+        background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
+        width: 15px;
+      }
+
+      &.allocation02 {
+        background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
+        width: 18px;
+      }
     }
+
+    &.act,
+    &:hover {
+      color: #101010;
+      border: 1px solid #101010;
+      background-color: #fff;
+
+      i {
+        &.allocation01 {
+          background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
+        }
+
+        &.allocation02 {
+          background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
+        }
+      }
+    }
+  }
 }
 
-// 오브젝트 배치
-.mb-box{
-    margin-bottom: 24px;
+// 경사설정
+.slope-wrap {
+  padding-bottom: 24px;
+  border-bottom: 1px solid #424242;
 }
 
-.object-direction-wrap{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.discrimination-tit{
-    font-size: 13px;
-    color: #fff;
-    font-weight: 500;
+// 면형상 배치
+.plane-frame-wrap {
+  display: flex;
+  gap: 10px;
+
+  .plane-shape-wrap {
+    flex: none;
+    width: 73px;
+  }
 }
 
-.object-size-wrap{
-    display: flex;
-    min-height: 206px;
-    gap: 24px;
-    margin-top: 14px;
-    .object-size-img{
-        position: relative;
-        flex: none;
-        width: 200px;
-        background-color: #fff;
-        img{
+.plane-shape-menu {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 5px;
+
+  .shape-menu-box {
+    border-radius: 2px;
+    width: 34px;
+    height: 34px;
+    background-color: #373737;
+    border: 1px solid #676767;
+    transition: background .15s ease-in-out, border .15s ease-in-out;
+
+    .shape-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+    }
+
+    &.act,
+    &:hover {
+      border-color: #008BFF;
+      background-color: #008BFF;
+    }
+  }
+}
+
+.shape-library {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding-top: 5px;
+
+  .library-btn {
+    width: 100%;
+    height: 34px;
+    border: 1px solid #6C6C6C;
+    border-radius: 2px;
+    background-color: #373737;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: all .15s ease-in-out;
+
+    &.ico01 {
+      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
+      background-size: 19px 18px;
+    }
+
+    &.ico02 {
+      background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
+      background-size: 15px 20px;
+    }
+
+    &.ico03 {
+      background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
+      background-size: 19px 16px;
+    }
+
+    &:hover {
+      border-color: #1083E3;
+      background-color: #1083E3;
+    }
+  }
+}
+
+.plane-detail-wrap {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.plane-shape-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .plane-box {
+    width: 100%;
+    padding: 10px 18px;
+    border-radius: 2px;
+    background-color: #313131;
+    border: 1px solid #484848;
+
+    .plane-box-tit {
+      font-size: $pop-normal-size;
+      font-weight: 600;
+      color: $pop-color;
+      margin-bottom: 10px;
+    }
+
+    &.shape-box {
+      .shape-box-inner {
+        display: flex;
+        gap: 15px;
+        min-height: 140px;
+
+        .shape-img {
+          position: relative;
+          flex: none;
+          width: 150px;
+          background-color: #fff;
+          border-radius: 2px;
+
+          img {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+          }
         }
-    }
-}
 
-// 표시변경
-.display-change-wrap{
-    margin: 24px 0;
-}
-.warning{
-    font-size: $pop-normal-size;
-    font-weight: $pop-normal-weight;
-    color: #FFAFAF;
-}
+        .shape-data {
+          flex: 1;
 
-// 각 변 속성 변경
-.radio-grid-wrap{
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px 15px;
-}
+          .eaves-keraba-table {
+            .eaves-keraba-item {
+              .eaves-keraba-th,
+              .eaves-keraba-td {
+                padding-bottom: 10px;
+              }
 
-// 면 흐름 설정
-.drawing-flow-wrap{
-    display: flex;
-    gap: 10px;
-    .discrimination-box{
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        .object-direction-wrap{
-            flex: 1;
-        }
-    }
-}
-
-.compas-box{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.compas-box-inner {
-    position: relative;
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-    
-    .circle {
-        position: absolute;
-        width: 12px;
-        height: 12px;
-        border: 1px solid #fff;
-        border-radius: 50%;
-        top: 95%;
-        left: 50%;
-        transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
-        cursor:pointer;
-        z-index: 3;
-        /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
-        i{
-            position: absolute;
-            top: 12.5px;
-            left: 50%;
-            font-size: 11px;
-            color: #8B8B8B;
-            font-weight: 500;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-use-select: none;
-            user-select: none;
-        }
-        &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
-        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
-        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
-        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
-        &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
-        &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
-        &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
-        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
-        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
-        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
-        &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
-        &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
-        &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
-        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
-        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
-        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
-        &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
-        &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
-        &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
-        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
-        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
-        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
-        &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
-        &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
-        &.act{
-            &::after{
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 5px;
-                height: 5px;
-                background-color: #fff;
-            }
-            i{
-                color: #fff;
-            }
-        }
-    }
-    .compas{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 148px;
-        height: 148px;
-        border: 4px solid #fff;
-        border-radius: 50%;
-        .compas-arr{
-            width: 100%;
-            height: 100%;
-            background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
-            background-size: 122px 122px;
-        }
-    }
-}
-
-
-// 지붕모듈선택
-.roof-module-tab{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 14px;
-    .module-tab-bx{
-        flex: 1;
-        height: 34px;
-        line-height: 31px;
-        border: 1px solid #484848;
-        border-radius: 2px;
-        background-color: transparent;
-        font-size: 12px;
-        color: #AAA;
-        text-align: center;
-        cursor: default;
-        transition: all .15s ease-in-out;
-        &.act{
-            background-color: #1083E3;
-            border: 1px solid #1083E3;
-            color: #fff;
-            font-weight: 500;
-        }
-    }
-    .tab-arr{
-        display: block;
-        width: 9px;
-        height: 14px;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-        transition: all .15s ease-in-out;
-        &.act{
-            background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
-        }
-    }
-}
-
-.roof-module-compas{
-    margin-bottom: 24px;
-    .compas-box-inner{
-        width: 280px;
-        height: 253px;
-        .circle{
-            top: 86%;
-            &:nth-child(1),
-            &:nth-child(7),
-            &:nth-child(13),
-            &:nth-child(19){
-                &::before{
-                    content: '';
-                    position: absolute;
-                    top: 20px;
-                    left: 50%;
-                    transform: translateX(-50%);
-                    width: 1px;
-                    height: 6px;
-                    background-color: #8B8B8B;
+              &:last-child {
+                .eaves-keraba-th,
+                .eaves-keraba-td {
+                  padding-bottom: 0px;
                 }
+              }
             }
-            i{
-                top: 32px;
-            }
-            &.act{
-                i{color: #8B8B8B;}
-            }
+          }
         }
+      }
     }
-}
-.center-wrap{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
-}
 
-.module-table-flex-wrap{
-    display: flex;
-    gap: 10px;
-    .outline-form{
+    &.direction-box {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .plane-direction-box {
         flex: 1;
-    }
-}
-
-.module-box-tab{
-    display: flex;
-    .module-btn{
-        flex: 1;
-        border-top: 1px solid #505050;
-        border-bottom: 1px solid #505050;
-        border-right: 1px solid #505050;
-        background-color: #454545;
-        color: #fff;
-        height: 30px;
-        font-size: 12px;
-        font-weight: 400;
-        transition: all .15s ease-in-out;
-        &:first-child{
-            border-left: 1px solid #505050;
-        }
-        &.act{
-            border-color: #fff;
-            background-color: #fff;
-            color: #101010;
-        }
-    }
-}
-
-.module-table-box{
-    flex: 1;
-    background-color: #3D3D3D;
-    border-radius: 2px;
-    .module-table-inner{
-        padding: 10px;
-        .outline-form{
-            span{
-                width: auto;
-            }
-        }
-        .module-table-tit{
-            padding: 10px 0;
-            font-size: 12px;
-            color: #fff;
-            border-bottom: 1px solid #4D4D4D;
-        }
-        .eaves-keraba-table{
-            width: 100%;
-            margin-top: 15px;
-            .eaves-keraba-th{
-                width: 72px;
-            }
-            .eaves-keraba-th,
-            .eaves-keraba-td{
-                padding-bottom: 5px;
-            }
-        }
-        .self-table-tit{
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-            padding-bottom: 15px;
-        }
-    }
-    .warning-guide{
-        padding: 20px;
-        .warning{
-            color: #FFCACA;
-            max-height: 55px;
-            overflow-y: auto;
-            padding-right: 30px;
-            &::-webkit-scrollbar {
-                width: 4px;
-                background-color: transparent;
-            }
-            &::-webkit-scrollbar-thumb {
-                background-color: #D9D9D9;
-            }
-            &::-webkit-scrollbar-track {
-                background-color: transparent;
-            }
-        }
-    }
-}
-
-.module-self-table{
-    display: table;
-    border-top: 1px solid #4D4D4D;
-    border-collapse: collapse;
-    width: 100%;
-    .self-table-item{
-        display: table-row;
-        .self-item-td,
-        .self-item-th{
-            display: table-cell;
-            vertical-align: middle;
-            border-bottom: 1px solid #4D4D4D;
-        }
-        .self-item-th{
-            width: 60px;
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-        }
-        .self-item-td{
-            font-size: 12px;
-            font-weight: 400;
-            color: #fff;
-            padding: 15px 20px;
-        }
-    }
-}
-
-.self-table-flx{
-    display: flex;
-    align-items: center;
-    margin-top: 15px;
-    button{
-        margin-left: auto;
-    }
-}
-.hexagonal-wrap{
-    .hexagonal-item{
-        padding: 15px 0;
-        border-bottom: 1px solid #4D4D4D;
-        &:first-child{
-            padding-top: 0;
-        }
-        &:last-child{
-            padding-bottom: 0;
-            border: none;
-        }
-        .hexagonal-flx-auto{
-            display: flex;
-            justify-content: space-between;
-        }
-        .hexagonal-flx{
-            display: flex;
-            align-items: center;
-            button{
-                margin-left: auto;
-            }
-        }
-    }
-}
-
-// 회로 및 가대설정
-.circuit-check-inner{
-    padding: 5px 0;
-}
-
-.x-scroll-table{
-    overflow-x: auto;
-    padding-bottom: 5px;
-    .roof-module-table{
-        min-width: 1200px;
-    }
-    &::-webkit-scrollbar {
-        height: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-}
-
-.circuit-right-wrap{
-    display: flex;
-    justify-content: flex-end;
-}
-
-.circuit-data-form{
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    min-height: 60px;
-    padding: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.20);
-    span{
-        display: inline-flex;
-        align-items: center;
-        .del{
-            display: block;
-            margin-left: 10px;
-            width: 15px;
-            height: 15px;
-            background: url(../../public/static/images/canvas/circuit_del.svg)no-repeat center;
-            background-size: cover;
-        }
-    }
-}
-.circuit-table-tit{
-    color: #fff;
-    font-size: 12px;
-    font-weight: 600;
-    padding: 11px 10px;
-    background-color: #474747;
-    border: 1px solid #505050;
-    border-bottom: none;
-}
-
-.circuit-overflow{
-    max-height: 400px;
-    overflow-y: auto;
-    margin-bottom: 15px;
-    &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-}
-
-.circuit-table-flx-wrap{
-    display: flex;
-    gap: 10px;
-    margin-bottom: 10px;
-    .circuit-table-flx-box{
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        .bottom-wrap{
-            margin-top: auto;
-        }
-        .roof-module-table{
-            table{
-                table-layout: fixed;
-            }
-        }
-    }
-}
-
-.circuit-count-input{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-// 모듈부가기능
-.additional-radio-wrap{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 15px 0;
-    margin-bottom: 24px;
-}
-.additional-wrap{
-    padding: 24px 0;
-    border-top: 1px solid #424242;
-}
-
-.additional-color-wrap{
-    display: flex;
-    align-items: center;
-    padding: 5px 0;
-    gap: 15px;
-    .additional-color-box{
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        .additional-color{
-            display: block;
-            width: 16px;
-            height: 16px;
-            &.pink{
-                border: 2px solid #ce1c9c;
-                background-color: #16417D;
-            }
-            &.white{
-                border: 2px solid #FFF;
-                background-color: #001027;
-            }
-        }
-    }
-}
-
-// color setting
-.color-setting-wrap{
-    padding-bottom: 15px;
-    border-bottom: 1px solid #424242;
-    .color-tit{
-        font-size: 13px;
-        font-weight: 500;
-        color: #ffffff;
-        margin-bottom: 10px;
-    }
-    .color-picker{
-        .react-colorful{
-            width: 100%;
-            height: auto;
-            gap: 20px;
-            .react-colorful__pointer{
-                width: 15px;
-                height: 15px;
-                border: 4px solid #Fff;
-            }
-            .react-colorful__saturation{
-                border-radius: 2px;
-                height: 200px;
-                border-bottom: 5px solid #000;
-            }
-            .react-colorful__last-control{
-                border-radius: 2px;
-                height: 10px;
-            }
-        }
-        .hex-color-box{
-            display: flex;
-            align-items: center;
-            margin-top: 15px;
-            .color-box-tit{
-                font-size: 12px;
-                color: #fff;
-                font-weight: 500;
-                margin-right: 10px;
-            }
-            .color-hex-input{
-                width: 150px;
-                margin-right: 5px;
-                input{
-                    width: 100%;
-                }
-            }
-            .color-box{
-                display: block;
-                width: 30px;
-                height: 30px;
-                border-radius: 4px;
-            }
-        }
-        .default-color-wrap{
-            margin-top: 25px;
-            .default-tit{
-                font-size: 12px;
-                font-weight: 500;
-                color: #fff;
-                margin-bottom: 10px;
-            }
-            .color-button-wrap{
-                display: grid;
-                grid-template-columns: repeat(8, 1fr);
-                gap: 21px;
-                .default-color{
-                    display: block;
-                    width: 100%;
-                    height: 30px;
-                    border-radius: 4px;
-                }
-            }
-        }
-    }
-}
-
-// 글꼴 설정 팝업
-.font-option-warp{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 15px 5px;
-    margin-bottom: 15px;
-    .font-option-item{
-        .option-item-tit{
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-            margin-bottom: 10px;
-        }
-    }
-}
-.font-ex-wrap{
-    margin-bottom: 15px;
-    .font-ex-tit{
-        font-size: 12px;
-        font-weight: 500;
-        color: #fff;
-        margin-bottom: 10px;
-    }
-    .font-ex-box{
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
-        min-height: 80px;
-        background-color: #fff;
+      }
     }
-    
+  }
 }
 
-// 치수선 설정
-.font-btn-wrap{
-    margin-bottom: 15px;
-    button{
-        width: 100%;
-        height: 30px;
-        line-height: 28px;
+.plane-direction {
+  width: 150px;
+  position: relative;
+  height: 120px;
+
+  span {
+    position: absolute;
+    font-size: 12px;
+    font-weight: 500;
+    color: #B1B1B1;
+
+    &.top {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
     }
-}
 
-.line-color-wrap{
-    margin-bottom: 15px;
-    .color-btn{
-        display: block;
-        width: 100%;
-        height: 30px;
-        border-radius: 2px;
+    &.right {
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
     }
-}
 
-.form-box{
-    width: 100%;
-    background-color: #fff;
-    padding: 10px 15px 20px;
-    .line-form{
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        min-width: 102px;
-        min-height: 40px;
-        margin: 0 auto;
-
-        &::before{
-            content: '';
-            position: absolute;
-            bottom: 0px;
-            left: 0;
-            width: 100%;
-            height: 40px;
-            border-left: 1px dashed #101010;
-            border-right: 1px dashed #101010;
-        }
-        .line-font-box{
-            .font{
-                display: block;
-                padding-bottom: 15px;
-                color: #101010;
-                text-align: center;
-                line-height: 1;
-            }
-            .line{
-                position: relative;
-                display: block;
-                width: 100%;
-                height: 1px;
-                border-radius: 30px;
-                &::before{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%) rotate(45deg);
-                    left: 1px;
-                    width: 9px;
-                    height:+ 9px;
-                    border: 1px solid;
-                    border-color: inherit;
-                    border-top: none;
-                    border-right: none;
-                }
-                &::after{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%) rotate(45deg);
-                    right: 1px;
-                    width: 9px;
-                    height: 9px;
-                    border: 1px solid;
-                    border-color: inherit;
-                    border-bottom: none;
-                    border-left: none;
-                }
-            }
-        }
+    &.bottom {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
     }
+
+    &.left {
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+    }
+  }
+
+  .plane-btn {
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    background-color: #777777;
+    background-image: url(../../public/static/images/canvas/plane_arr.svg);
+    background-size: 12px 13px;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 50%;
+    transition: all .15s ease-in-out;
+
+    &.up {
+      top: 22px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.right {
+      top: 50%;
+      right: 32px;
+      transform: translateY(-50%) rotate(90deg);
+    }
+
+    &.down {
+      bottom: 22px;
+      left: 50%;
+      transform: translateX(-50%) rotate(180deg);
+    }
+
+    &.left {
+      top: 50%;
+      left: 32px;
+      transform: translateY(-50%) rotate(270deg);
+    }
+
+    &:hover,
+    &.act {
+      background-color: #fff;
+      background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
+    }
+  }
 }
 
-// 사이즈 변경
-.size-inner-warp{
-    position: relative;
+.plane-tab-guide {
+  font-size: $pop-normal-size;
+  font-weight: $pop-normal-weight;
+  color: $pop-color;
+  margin-top: 10px;
 }
-.size-check-wrap{
-    position: relative;
+
+.plane-shape-btn {
+  padding-top: 10px;
+  margin-top: auto;
+
+  button {
     display: block;
-    width: 132px;
-    height: 132px;
-    margin: 0 auto;
-    .size-btn{
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        border: 1px solid #fff;
-        border-radius: 50%;
-        &.act{
-            &::after{
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 8px;
-                height: 8px;
-                background-color: #fff;
-                border-radius: 50%;
-            }
-        }
-        &:nth-child(1){ top: 0; left: 0; }
-        &:nth-child(2){ top: 0; right: 0; }
-        &:nth-child(3){ bottom: 0; left: 0; }
-        &:nth-child(4){ bottom: 0; right: 0; }
+    width: 100%;
+  }
+}
+
+// 오브젝트 배치
+.mb-box {
+  margin-bottom: 24px;
+}
+
+.object-direction-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.discrimination-tit {
+  font-size: 13px;
+  color: #fff;
+  font-weight: 500;
+}
+
+.object-size-wrap {
+  display: flex;
+  min-height: 206px;
+  gap: 24px;
+  margin-top: 14px;
+
+  .object-size-img {
+    position: relative;
+    flex: none;
+    width: 200px;
+    background-color: #fff;
+
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
-    .size-box{
+  }
+}
+
+// 표시변경
+.display-change-wrap {
+  margin: 24px 0;
+}
+
+.warning {
+  font-size: $pop-normal-size;
+  font-weight: $pop-normal-weight;
+  color: #FFAFAF;
+}
+
+// 각 변 속성 변경
+.radio-grid-wrap {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px 15px;
+}
+
+// 면 흐름 설정
+.drawing-flow-wrap {
+  display: flex;
+  gap: 10px;
+
+  .discrimination-box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .object-direction-wrap {
+      flex: 1;
+    }
+  }
+}
+
+.compas-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.compas-box-inner {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+
+  .circle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    top: 95%;
+    left: 50%;
+    transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+    cursor: pointer;
+    z-index: 3;
+    /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
+    i {
+      position: absolute;
+      top: 12.5px;
+      left: 50%;
+      font-size: 11px;
+      color: #8B8B8B;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-use-select: none;
+      user-select: none;
+    }
+
+    &:nth-child(1) {
+      transform: rotate(180deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(180deg);
+      }
+    }
+
+    &:nth-child(2) {
+      transform: rotate(195deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(165deg);
+      }
+    }
+
+    &:nth-child(3) {
+      transform: rotate(210deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(150deg);
+      }
+    }
+
+    &:nth-child(4) {
+      transform: rotate(225deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(135deg);
+      }
+    }
+
+    &:nth-child(5) {
+      transform: rotate(240deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(120deg);
+      }
+    }
+
+    &:nth-child(6) {
+      transform: rotate(255deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(105deg);
+      }
+    }
+
+    &:nth-child(7) {
+      transform: rotate(270deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(90deg);
+      }
+    }
+
+    &:nth-child(8) {
+      transform: rotate(285deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(75deg);
+      }
+    }
+
+    &:nth-child(9) {
+      transform: rotate(300deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(60deg);
+      }
+    }
+
+    &:nth-child(10) {
+      transform: rotate(315deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(45deg);
+      }
+    }
+
+    &:nth-child(11) {
+      transform: rotate(330deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(30deg);
+      }
+    }
+
+    &:nth-child(12) {
+      transform: rotate(345deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(15deg);
+      }
+    }
+
+    &:nth-child(13) {
+      transform: rotate(0deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(0deg);
+      }
+    }
+
+    &:nth-child(14) {
+      transform: rotate(15deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-15deg);
+      }
+    }
+
+    &:nth-child(15) {
+      transform: rotate(30deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-30deg);
+      }
+    }
+
+    &:nth-child(16) {
+      transform: rotate(45deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-45deg);
+      }
+    }
+
+    &:nth-child(17) {
+      transform: rotate(60deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-60deg);
+      }
+    }
+
+    &:nth-child(18) {
+      transform: rotate(75deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-75deg);
+      }
+    }
+
+    &:nth-child(19) {
+      transform: rotate(90deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-90deg);
+      }
+    }
+
+    &:nth-child(20) {
+      transform: rotate(105deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-105deg);
+      }
+    }
+
+    &:nth-child(21) {
+      transform: rotate(120deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-120deg);
+      }
+    }
+
+    &:nth-child(22) {
+      transform: rotate(135deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-135deg);
+      }
+    }
+
+    &:nth-child(23) {
+      transform: rotate(150deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-150deg);
+      }
+    }
+
+    &:nth-child(24) {
+      transform: rotate(165deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-165deg);
+      }
+    }
+
+    &.act {
+      &::after {
+        content: '';
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 100px;
-        height: 100px;
+        width: 5px;
+        height: 5px;
         background-color: #fff;
-    }
-}
+      }
 
-.size-option-top{
-    margin-bottom: 15px;
-}
-.size-option-side{
+      i {
+        color: #fff;
+      }
+    }
+  }
+
+  .compas {
     position: absolute;
     top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-}
-.size-option-wrap{
-    width: 88px;
-    margin: 0 auto;
-    .size-option{
-        display: flex;
-        align-items: center;
-        input{
-            width: 100%;
-            flex: 1;
-        }
-        span{
-            flex: none;
-        }
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 148px;
+    height: 148px;
+    border: 4px solid #fff;
+    border-radius: 50%;
+
+    .compas-arr {
+      width: 100%;
+      height: 100%;
+      background: url(../../public/static/images/canvas/compas.svg) no-repeat center;
+      background-size: 122px 122px;
     }
+  }
+}
+
+
+// 지붕모듈선택
+.roof-module-tab {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+
+  .module-tab-bx {
+    flex: 1;
+    height: 34px;
+    line-height: 31px;
+    border: 1px solid #484848;
+    border-radius: 2px;
+    background-color: transparent;
+    font-size: 12px;
+    color: #AAA;
+    text-align: center;
+    cursor: default;
+    transition: all .15s ease-in-out;
+
+    &.act {
+      background-color: #1083E3;
+      border: 1px solid #1083E3;
+      color: #fff;
+      font-weight: 500;
+    }
+  }
+
+  .tab-arr {
+    display: block;
+    width: 9px;
+    height: 14px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
+    transition: all .15s ease-in-out;
+
+    &.act {
+      background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
+    }
+  }
+}
+
+.roof-module-compas {
+  margin-bottom: 24px;
+
+  .compas-box-inner {
+    width: 280px;
+    height: 253px;
+
+    .circle {
+      top: 86%;
+
+      &:nth-child(1),
+      &:nth-child(7),
+      &:nth-child(13),
+      &:nth-child(19) {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 1px;
+          height: 6px;
+          background-color: #8B8B8B;
+        }
+      }
+
+      i {
+        top: 32px;
+      }
+
+      &.act {
+        i {
+          color: #8B8B8B;
+        }
+      }
+    }
+  }
+}
+
+.center-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.module-table-flex-wrap {
+  display: flex;
+  gap: 10px;
+
+  .outline-form {
+    flex: 1;
+  }
+}
+
+.module-box-tab {
+  display: flex;
+
+  .module-btn {
+    flex: 1;
+    border-top: 1px solid #505050;
+    border-bottom: 1px solid #505050;
+    border-right: 1px solid #505050;
+    background-color: #454545;
+    color: #fff;
+    height: 30px;
+    font-size: 12px;
+    font-weight: 400;
+    transition: all .15s ease-in-out;
+
+    &:first-child {
+      border-left: 1px solid #505050;
+    }
+
+    &.act {
+      border-color: #fff;
+      background-color: #fff;
+      color: #101010;
+    }
+  }
+}
+
+.module-table-box {
+  flex: 1;
+  background-color: #3D3D3D;
+  border-radius: 2px;
+
+  .module-table-inner {
+    padding: 10px;
+
+    .outline-form {
+      span {
+        width: auto;
+      }
+    }
+
+    .module-table-tit {
+      padding: 10px 0;
+      font-size: 12px;
+      color: #fff;
+      border-bottom: 1px solid #4D4D4D;
+    }
+
+    .eaves-keraba-table {
+      width: 100%;
+      margin-top: 15px;
+
+      .eaves-keraba-th {
+        width: 72px;
+      }
+
+      .eaves-keraba-th,
+      .eaves-keraba-td {
+        padding-bottom: 5px;
+      }
+    }
+
+    .self-table-tit {
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+      padding-bottom: 15px;
+    }
+  }
+
+  .warning-guide {
+    padding: 20px;
+
+    .warning {
+      color: #FFCACA;
+      max-height: 55px;
+      overflow-y: auto;
+      padding-right: 30px;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #D9D9D9;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.module-self-table {
+  display: table;
+  border-top: 1px solid #4D4D4D;
+  border-collapse: collapse;
+  width: 100%;
+
+  .self-table-item {
+    display: table-row;
+
+    .self-item-td,
+    .self-item-th {
+      display: table-cell;
+      vertical-align: middle;
+      border-bottom: 1px solid #4D4D4D;
+    }
+
+    .self-item-th {
+      width: 60px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+    }
+
+    .self-item-td {
+      font-size: 12px;
+      font-weight: 400;
+      color: #fff;
+      padding: 15px 20px;
+    }
+  }
+}
+
+.self-table-flx {
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+
+  button {
+    margin-left: auto;
+  }
+}
+
+.hexagonal-wrap {
+  .hexagonal-item {
+    padding: 15px 0;
+    border-bottom: 1px solid #4D4D4D;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+      border: none;
+    }
+
+    .hexagonal-flx-auto {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .hexagonal-flx {
+      display: flex;
+      align-items: center;
+
+      button {
+        margin-left: auto;
+      }
+    }
+  }
+}
+
+// 회로 및 가대설정
+.circuit-check-inner {
+  padding: 5px 0;
+}
+
+.x-scroll-table {
+  overflow-x: auto;
+  padding-bottom: 5px;
+
+  .roof-module-table {
+    min-width: 1200px;
+  }
+
+  &::-webkit-scrollbar {
+    height: 4px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #D9D9D9;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.circuit-right-wrap {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.circuit-data-form {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-height: 60px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.20);
+
+  span {
+    display: inline-flex;
+    align-items: center;
+
+    .del {
+      display: block;
+      margin-left: 10px;
+      width: 15px;
+      height: 15px;
+      background: url(../../public/static/images/canvas/circuit_del.svg) no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+
+.circuit-table-tit {
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 11px 10px;
+  background-color: #474747;
+  border: 1px solid #505050;
+  border-bottom: none;
+}
+
+.circuit-overflow {
+  max-height: 400px;
+  overflow-y: auto;
+  margin-bottom: 15px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #D9D9D9;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.circuit-table-flx-wrap {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+
+  .circuit-table-flx-box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .bottom-wrap {
+      margin-top: auto;
+    }
+
+    .roof-module-table {
+      table {
+        table-layout: fixed;
+      }
+    }
+  }
+}
+
+.circuit-count-input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+// 모듈부가기능
+.additional-radio-wrap {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px 0;
+  margin-bottom: 24px;
+}
+
+.additional-wrap {
+  padding: 24px 0;
+  border-top: 1px solid #424242;
+}
+
+.additional-color-wrap {
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+  gap: 15px;
+
+  .additional-color-box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .additional-color {
+      display: block;
+      width: 16px;
+      height: 16px;
+
+      &.pink {
+        border: 2px solid #ce1c9c;
+        background-color: #16417D;
+      }
+
+      &.white {
+        border: 2px solid #FFF;
+        background-color: #001027;
+      }
+    }
+  }
+}
+
+// color setting
+.color-setting-wrap {
+  padding-bottom: 15px;
+  border-bottom: 1px solid #424242;
+
+  .color-tit {
+    font-size: 13px;
+    font-weight: 500;
+    color: #ffffff;
+    margin-bottom: 10px;
+  }
+
+  .color-picker {
+    .react-colorful {
+      width: 100%;
+      height: auto;
+      gap: 20px;
+
+      .react-colorful__pointer {
+        width: 15px;
+        height: 15px;
+        border: 4px solid #Fff;
+      }
+
+      .react-colorful__saturation {
+        border-radius: 2px;
+        height: 200px;
+        border-bottom: 5px solid #000;
+      }
+
+      .react-colorful__last-control {
+        border-radius: 2px;
+        height: 10px;
+      }
+    }
+
+    .hex-color-box {
+      display: flex;
+      align-items: center;
+      margin-top: 15px;
+
+      .color-box-tit {
+        font-size: 12px;
+        color: #fff;
+        font-weight: 500;
+        margin-right: 10px;
+      }
+
+      .color-hex-input {
+        width: 150px;
+        margin-right: 5px;
+
+        input {
+          width: 100%;
+        }
+      }
+
+      .color-box {
+        display: block;
+        width: 30px;
+        height: 30px;
+        border-radius: 4px;
+      }
+    }
+
+    .default-color-wrap {
+      margin-top: 25px;
+
+      .default-tit {
+        font-size: 12px;
+        font-weight: 500;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .color-button-wrap {
+        display: grid;
+        grid-template-columns: repeat(8, 1fr);
+        gap: 21px;
+
+        .default-color {
+          display: block;
+          width: 100%;
+          height: 30px;
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+}
+
+// 글꼴 설정 팝업
+.font-option-warp {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px 5px;
+  margin-bottom: 15px;
+
+  .font-option-item {
+    .option-item-tit {
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.font-ex-wrap {
+  margin-bottom: 15px;
+
+  .font-ex-tit {
+    font-size: 12px;
+    font-weight: 500;
+    color: #fff;
+    margin-bottom: 10px;
+  }
+
+  .font-ex-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 80px;
+    background-color: #fff;
+  }
+
+}
+
+// 치수선 설정
+.font-btn-wrap {
+  margin-bottom: 15px;
+
+  button {
+    width: 100%;
+    height: 30px;
+    line-height: 28px;
+  }
+}
+
+.line-color-wrap {
+  margin-bottom: 15px;
+
+  .color-btn {
+    display: block;
+    width: 100%;
+    height: 30px;
+    border-radius: 2px;
+  }
+}
+
+.form-box {
+  width: 100%;
+  background-color: #fff;
+  padding: 10px 15px 20px;
+
+  .line-form {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    min-width: 102px;
+    min-height: 40px;
+    margin: 0 auto;
+
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0px;
+      left: 0;
+      width: 100%;
+      height: 40px;
+      border-left: 1px dashed #101010;
+      border-right: 1px dashed #101010;
+    }
+
+    .line-font-box {
+      .font {
+        display: block;
+        padding-bottom: 15px;
+        color: #101010;
+        text-align: center;
+        line-height: 1;
+      }
+
+      .line {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 1px;
+        border-radius: 30px;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%) rotate(45deg);
+          left: 1px;
+          width: 9px;
+          height: +9px;
+          border: 1px solid;
+          border-color: inherit;
+          border-top: none;
+          border-right: none;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%) rotate(45deg);
+          right: 1px;
+          width: 9px;
+          height: 9px;
+          border: 1px solid;
+          border-color: inherit;
+          border-bottom: none;
+          border-left: none;
+        }
+      }
+    }
+  }
+}
+
+// 사이즈 변경
+.size-inner-warp {
+  position: relative;
+}
+
+.size-check-wrap {
+  position: relative;
+  display: block;
+  width: 132px;
+  height: 132px;
+  margin: 0 auto;
+
+  .size-btn {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+
+    &.act {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+        border-radius: 50%;
+      }
+    }
+
+    &:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+    }
+
+    &:nth-child(3) {
+      bottom: 0;
+      left: 0;
+    }
+
+    &:nth-child(4) {
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  .size-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100px;
+    height: 100px;
+    background-color: #fff;
+  }
+}
+
+.size-option-top {
+  margin-bottom: 15px;
+}
+
+.size-option-side {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.size-option-wrap {
+  width: 88px;
+  margin: 0 auto;
+
+  .size-option {
+    display: flex;
+    align-items: center;
+
+    input {
+      width: 100%;
+      flex: 1;
+    }
+
+    span {
+      flex: none;
+    }
+  }
 }
 
 //이미지 크기 설정
-.range-wrap{
-    display: flex;
-    align-items: center;
-    input{
-        flex: 1;
-        margin-right: 10px;
-    }
-    label{
-        flex: none;
-        text-align: right;
-        width: 38px;
-        font-size: 13px;
-        color: #fff;
-        font-weight: 500;
-    }
+.range-wrap {
+  display: flex;
+  align-items: center;
+
+  input {
+    flex: 1;
+    margin-right: 10px;
+  }
+
+  label {
+    flex: none;
+    text-align: right;
+    width: 38px;
+    font-size: 13px;
+    color: #fff;
+    font-weight: 500;
+  }
 }
\ No newline at end of file

From 08e182853069b711ae8d786cd8f381d243cd1a4a Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Thu, 31 Oct 2024 11:16:41 +0900
Subject: [PATCH 40/60] =?UTF-8?q?=EB=8F=99=EC=84=A0=EC=9D=B4=EB=8F=99=20-?=
 =?UTF-8?q?=20=ED=98=95=20=EC=98=AC=EB=A6=BC=EB=82=B4=EB=A6=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/movement/type/FlowLine.jsx          |  8 +-
 .../floor-plan/modal/movement/type/Updown.jsx |  6 +-
 src/hooks/roofcover/useMovementSetting.js     | 93 ++++++++++++++++++-
 3 files changed, 98 insertions(+), 9 deletions(-)

diff --git a/src/components/floor-plan/modal/movement/type/FlowLine.jsx b/src/components/floor-plan/modal/movement/type/FlowLine.jsx
index 1d3dd26e..c6a8ca49 100644
--- a/src/components/floor-plan/modal/movement/type/FlowLine.jsx
+++ b/src/components/floor-plan/modal/movement/type/FlowLine.jsx
@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
+import { useEvent } from '@/hooks/useEvent'
 
 const FLOW_LINE_TYPE = {
   DOWN_LEFT: 'downLeft',
@@ -44,12 +45,7 @@ export default function FlowLine({ FLOW_LINE_REF }) {
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input
-                    type="text"
-                    className="input-origin block"
-                    readOnly={type !== FLOW_LINE_TYPE.DOWN_LEFT}
-                    ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF}
-                  />
+                  <input type="text" className="input-origin block" readOnly={true} ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF} />
                 </div>
               </div>
             </div>
diff --git a/src/components/floor-plan/modal/movement/type/Updown.jsx b/src/components/floor-plan/modal/movement/type/Updown.jsx
index a27abf80..f99a17f2 100644
--- a/src/components/floor-plan/modal/movement/type/Updown.jsx
+++ b/src/components/floor-plan/modal/movement/type/Updown.jsx
@@ -1,5 +1,8 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
+import { useEvent } from '@/hooks/useEvent'
+import { canvasState } from '@/store/canvasAtom'
+import { useRecoilValue } from 'recoil'
 
 const UP_DOWN_TYPE = {
   UP: 'up',
@@ -9,6 +12,7 @@ const UP_DOWN_TYPE = {
 export default function Updown({ UP_DOWN_REF }) {
   const { getMessage } = useMessage()
   const [type, setType] = useState(UP_DOWN_TYPE.UP)
+  const canvas = useRecoilValue(canvasState)
 
   useEffect(() => {
     if (type === UP_DOWN_TYPE.UP) {
@@ -44,7 +48,7 @@ export default function Updown({ UP_DOWN_REF }) {
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.UP} ref={UP_DOWN_REF.UP_INPUT_REF} />
+                  <input type="text" className="input-origin block" readOnly={true} ref={UP_DOWN_REF.UP_INPUT_REF} />
                 </div>
               </div>
             </div>
diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js
index 355a6bf8..1f64bcd7 100644
--- a/src/hooks/roofcover/useMovementSetting.js
+++ b/src/hooks/roofcover/useMovementSetting.js
@@ -2,7 +2,8 @@ import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { useEvent } from '@/hooks/useEvent'
 
 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@@ -11,6 +12,7 @@ export function useMovementSetting(id) {
     UP_DOWN: 'updown', //형 올림내림
   }
   const canvas = useRecoilValue(canvasState)
+  const { initEvent, addCanvasMouseEventListener } = useEvent()
   const { closePopup } = usePopup()
   const { getMessage } = useMessage()
   const buttonType = [
@@ -18,6 +20,7 @@ export function useMovementSetting(id) {
     { id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
   ]
   const [type, setType] = useState(TYPE.FLOW_LINE)
+  const typeRef = useRef(type)
 
   const FLOW_LINE_REF = {
     DOWN_LEFT_INPUT_REF: useRef(null),
@@ -33,7 +36,93 @@ export function useMovementSetting(id) {
     DOWN_RADIO_REF: useRef(null),
   }
 
-  const handleSave = () => {}
+  useEffect(() => {
+    typeRef.current = type
+  }, [type])
+
+  useEffect(() => {
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine') // 기존 wallLine의 visible false
+    wallLines.forEach((line) => {
+      line.set({ visible: false })
+    })
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
+    outerLines.forEach((line) => {
+      line.bringToFront()
+      line.set({ selectable: true })
+    })
+
+    canvas.renderAll()
+    addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
+    return () => {
+      initEvent()
+      const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+      wallLines.forEach((line) => {
+        line.set({ visible: true })
+      })
+      canvas.renderAll()
+    }
+  }, [])
+
+  const mouseMoveEvent = (e) => {
+    if (typeRef.current === TYPE.FLOW_LINE) {
+      flowLineEvent(e)
+    } else {
+      updownEvent(e)
+    }
+  }
+  const flowLineEvent = (e) => {
+    console.log('flow')
+  }
+
+  const updownEvent = (e) => {
+    const target = canvas.getActiveObject()
+    if (!target) {
+      return
+    }
+    const direction = target.direction
+    const { top: targetTop, left: targetLeft } = target
+    const currentX = canvas.getPointer(e.e).x
+    const currentY = Math.floor(canvas.getPointer(e.e).y)
+    /*const allPoints = canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'outerLine')
+      .map((obj) => {
+        return { x: obj.x1, y: obj.y1 }
+      })
+
+    const xArr = allPoints.map((point) => point.x)
+    const yArr = allPoints.map((point) => point.y)*/
+
+    if (direction === 'left' || direction === 'right') {
+      if (targetTop > currentY) {
+        UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
+        UP_DOWN_REF.UP_INPUT_REF.current.value = ''
+
+        UP_DOWN_REF.DOWN_INPUT_REF.current.value = (Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000
+      } else {
+        UP_DOWN_REF.UP_RADIO_REF.current.checked = true
+        UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
+
+        UP_DOWN_REF.UP_INPUT_REF.current.value = (Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000
+      }
+    }
+
+    canvas?.renderAll()
+  }
+
+  const getOnlyDecimal = function (_number, _length) {
+    let result
+
+    result = _number % 1
+
+    result = Number(result.toFixed(_length))
+
+    return result * 10
+  }
+
+  const handleSave = () => {
+    closePopup(id)
+  }
 
   return {
     TYPE,

From 220b5ff8d7b5edaad9cc59bdceec6d52704e30fe Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Thu, 31 Oct 2024 11:27:53 +0900
Subject: [PATCH 41/60] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=ED=8C=90=EB=A7=A4=EC=A0=90=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/management/Stuff.jsx           |  63 +--
 .../management/StuffSearchCondition.jsx       | 374 ++++++++++++++----
 src/store/stuffAtom.js                        |   3 +-
 3 files changed, 335 insertions(+), 105 deletions(-)

diff --git a/src/components/management/Stuff.jsx b/src/components/management/Stuff.jsx
index 999ea900..d9c6022e 100644
--- a/src/components/management/Stuff.jsx
+++ b/src/components/management/Stuff.jsx
@@ -240,7 +240,9 @@ export default function Stuff() {
           schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
           startRow: (pageNo - 1) * pageSize + 1,
           endRow: pageNo * pageSize,
-          schSelSaleStoreId: '',
+          schSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId
+            ? stuffSearchParams.schOtherSelSaleStoreId
+            : stuffSearchParams.schSelSaleStoreId,
           schSortType: stuffSearchParams.schSortType,
         }
 
@@ -256,12 +258,12 @@ export default function Stuff() {
           })
         }
         fetchData()
-      } else {
+      } else if (stuffSearchParams?.code === 'M') {
         //메인화면에서 진입
         const params = {
           saleStoreId: sessionState?.storeId,
           schObjectNo: stuffSearchParams.schObjectNo,
-          schAddress: '',
+          schAddress: 'dfdfdfdfdf',
           schObjectName: '',
           schSaleStoreName: '',
           schReceiveUser: '',
@@ -271,25 +273,31 @@ export default function Stuff() {
           schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
           startRow: (pageNo - 1) * pageSize + 1,
           endRow: pageNo * pageSize,
-          schSelSaleStoreId: '',
+          schSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId
+            ? stuffSearchParams.schOtherSelSaleStoreId
+            : stuffSearchParams.schSelSaleStoreId,
           schSortType: 'R',
         }
+        setStuffSearch({
+          ...params,
+        })
 
-        async function fetchData() {
-          const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
-          await get({
-            url: apiUrl,
-          }).then((res) => {
-            if (!isEmptyArray(res)) {
-              setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-              setTotalCount(res[0].totCnt)
-            }
-          })
-        }
-        fetchData()
+        // async function fetchData() {
+        //   const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
+        //   await get({
+        //     url: apiUrl,
+        //   }).then((res) => {
+        //     if (!isEmptyArray(res)) {
+        //       setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
+        //       setTotalCount(res[0].totCnt)
+        //     }
+        //   })
+        // }
+        // fetchData()
       }
     }
-  }, [pageNo, sessionState])
+    // }, [pageNo, sessionState, stuffSearchParams])
+  }, [pageNo, stuffSearchParams])
 
   useEffect(() => {
     if (stuffSearchParams?.code === 'E') {
@@ -298,6 +306,7 @@ export default function Stuff() {
       stuffSearchParams.schSortType = defaultSortType
 
       setPageNo(1)
+
       //조회를 눌렀을때
       async function fetchData() {
         const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
@@ -320,10 +329,13 @@ export default function Stuff() {
     let startRow = (1 - 1) * e.target.value + 1
     stuffSearchParams.startRow = startRow
     stuffSearchParams.endRow = 1 * e.target.value
+    stuffSearchParams.schSelSaleStoreId = stuffSearchParams?.schOtherSelSaleStoreId
+      ? stuffSearchParams.schOtherSelSaleStoreId
+      : stuffSearchParams.schSelSaleStoreId
     setPageSize(e.target.value)
     setStuffSearch({
-      ...stuffSearch,
-      code: 'S',
+      ...stuffSearchParams,
+      // code: 'P',
       startRow: startRow,
       endRow: 1 * e.target.value,
     })
@@ -348,6 +360,9 @@ export default function Stuff() {
     stuffSearchParams.endRow = 1 * pageSize
 
     stuffSearchParams.schSortType = e.target.value
+    stuffSearchParams.schSelSaleStoreId = stuffSearchParams?.schOtherSelSaleStoreId
+      ? stuffSearchParams.schOtherSelSaleStoreId
+      : stuffSearchParams.schSelSaleStoreId
     setDefaultSortType(e.target.value)
     setStuffSearch({
       ...stuffSearch,
@@ -358,7 +373,6 @@ export default function Stuff() {
     })
 
     setPageNo(1)
-
     const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
     get({ url: apiUrl }).then((res) => {
       if (!isEmptyArray(res)) {
@@ -382,7 +396,9 @@ export default function Stuff() {
   // 페이징 현재페이지 변경
   const handleChangePage = (page) => {
     stuffSearchParams.code = 'S'
-
+    stuffSearchParams.schSelSaleStoreId = stuffSearchParams?.schOtherSelSaleStoreId
+      ? stuffSearchParams.schOtherSelSaleStoreId
+      : stuffSearchParams.schSelSaleStoreId
     setStuffSearch({
       ...stuffSearch,
       code: 'S',
@@ -405,10 +421,7 @@ export default function Stuff() {
                 {getMessage('stuff.search.grid.all')}
                 <span>{convertNumberToPriceDecimal(totalCount)}</span>
               </li>
-              <li>
-                {/* {getMessage('stuff.search.grid.selected')} */}
-                {/* <span className="red">{convertNumberToPriceDecimal(selectedRowDataCount)}</span> */}
-              </li>
+              <li></li>
             </ul>
           </div>
           <div className="left-unit-box">
diff --git a/src/components/management/StuffSearchCondition.jsx b/src/components/management/StuffSearchCondition.jsx
index 421f806f..62e6a9f2 100644
--- a/src/components/management/StuffSearchCondition.jsx
+++ b/src/components/management/StuffSearchCondition.jsx
@@ -15,12 +15,14 @@ import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 import { sessionStore } from '@/store/commonAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { isObjectNotEmpty } from '@/util/common-utils'
+import { searchState } from '@/store/boardAtom'
 export default function StuffSearchCondition() {
   const sessionState = useRecoilValue(sessionStore)
   const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { getMessage } = useMessage()
   const ref = useRef()
+  const ref2 = useRef()
   const { get } = useAxios(globalLocaleState)
 
   const objectNoRef = useRef(null)
@@ -59,6 +61,10 @@ export default function StuffSearchCondition() {
   const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT 전체
   const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
   const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
+
+  const [otherSaleStoreList, setOtherSaleStoreList] = useState([]) //1차점 이외 판매점목록
+  const [otherSaleStoreId, setOtherSaleStoreId] = useState('')
+
   // 조회
   const onSubmit = () => {
     let diff = dayjs(endDate).diff(startDate, 'day')
@@ -73,7 +79,7 @@ export default function StuffSearchCondition() {
         schAddress: address ? address : stuffSearch?.schAddress,
         schObjectName: objectName ? objectName : stuffSearch?.schObjectName,
         schDispCompanyName: dispCompanyName ? dispCompanyName : stuffSearch?.schDispCompanyName,
-        schSelSaleStoreId: stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId,
+        schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : stuffSearch.schSelSaleStoreId,
         schReceiveUser: receiveUser ? receiveUser : stuffSearch?.schReceiveUser,
         schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
         schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
@@ -90,7 +96,7 @@ export default function StuffSearchCondition() {
         schAddress: address ? address : '',
         schObjectName: objectName ? objectName : '',
         schDispCompanyName: dispCompanyName ? dispCompanyName : '',
-        schSelSaleStoreId: schSelSaleStoreId ? schSelSaleStoreId : '',
+        schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : stuffSearch.schSelSaleStoreId,
         schReceiveUser: receiveUser ? receiveUser : '',
         schDateType: dateType,
         schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
@@ -105,6 +111,7 @@ export default function StuffSearchCondition() {
 
   //초기화
   const resetRecoil = () => {
+    //T01아니면 자동완성 초기화 막기
     objectNoRef.current.value = ''
     saleStoreNameRef.current.value = ''
     addressRef.current.value = ''
@@ -121,49 +128,144 @@ export default function StuffSearchCondition() {
     setDateType('U')
     setStartDate(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
     setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
-    setSchSelSaleStoreId('')
-    handleClear() //판매대리점선택 자동완성 클리어
-    resetStuffRecoil()
+    if (sessionState?.storeId === 'T01') {
+      setSchSelSaleStoreId('')
+      handleClear1() //판매대리점선택 자동완성 클리어
+      resetStuffRecoil()
+      setStuffSearch({
+        ...stuffSearch,
+        code: 'C',
+        schSelSaleStoreId: '',
+        schOtherSelSaleStoreId: '',
+      })
+    } else {
+      if (otherSaleStoreList.length > 1) {
+        handleClear2()
+        setOtherSaleStoreId('')
+        stuffSearch.schObjectNo = ''
+        stuffSearch.schDateType = 'U'
+      } else {
+        stuffSearch.schObjectNo = ''
+        stuffSearch.schDateType = 'U'
+      }
+    }
   }
 
   useEffect(() => {
     if (isObjectNotEmpty(sessionState)) {
-      // storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
+      // storeId가 T01 이거나 storeLvl이 1차점일때만 판매대리점 선택 활성화
       let url
       if (sessionState?.storeId === 'T01') {
-        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
-        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+        //T01일떄
+        url = `/api/object/saleStore/${sessionState?.storeId}/firstList?userId=${sessionState?.userId}`
       } else {
-        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+        if (sessionState.storeLvl === '1') {
+          //T01아닌 1차점일때
+          url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+        } else {
+          url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+        }
       }
+
       get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
           res.map((row) => {
             row.value = row.saleStoreId
             row.label = row.saleStoreName
           })
-          const allList = res
-          const favList = res.filter((row) => row.priority !== 'B')
 
-          setSchSelSaleStoreList(allList)
-          setFavoriteStoreList(favList)
-          setShowSaleStoreList(favList)
+          let allList
+          let favList
+          let otherList
+          if (sessionState?.storeId === 'T01') {
+            allList = res
+            allList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
+            favList = res.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
+            setSchSelSaleStoreList(allList)
+            setFavoriteStoreList(favList)
+            setShowSaleStoreList(favList)
+            setSchSelSaleStoreId(sessionState?.storeId)
+            setStuffSearch({
+              ...stuffSearch,
+              code: 'S',
+              schSelSaleStoreId: sessionState?.storeId,
+            })
+
+            //T01일때 2차 판매점 호출하기
+            url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=0&userId=${sessionState?.userId}`
+
+            get({ url: url }).then((res) => {
+              if (!isEmptyArray(res)) {
+                res.map((row) => {
+                  row.value = row.saleStoreId
+                  row.label = row.saleStoreName
+                })
+
+                otherList = res
+                setOtherSaleStoreList(otherList)
+              } else {
+                setOtherSaleStoreList([])
+              }
+            })
+          } else {
+            if (sessionState?.storeLvl === '1') {
+              allList = res
+              favList = res.filter((row) => row.priority !== 'B')
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
+              setSchSelSaleStoreList(allList)
+              setFavoriteStoreList(allList)
+              setShowSaleStoreList(allList)
+              setSchSelSaleStoreId(allList[0].saleStoreId)
+
+              setOtherSaleStoreList(otherList)
+
+              setStuffSearch({
+                ...stuffSearch,
+                code: 'S',
+                schSelSaleStoreId: allList[0].saleStoreId,
+              })
+            } else {
+              //201X112 그냥2차점
+              //2차점인데 34들고있는애 202X217
+              setSchSelSaleStoreList(res)
+              setFavoriteStoreList(res)
+              setShowSaleStoreList(res)
+              setSchSelSaleStoreId(res[0].saleStoreId)
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
+              setOtherSaleStoreList(otherList)
+
+              //선택한 2차점 세션으로 자동셋팅
+              setOtherSaleStoreId(sessionState?.storeId)
+              setStuffSearch({
+                ...stuffSearch,
+                code: 'S',
+                schSelSaleStoreId: otherList[0].saleStoreId,
+              })
+            }
+          }
         }
       })
     }
   }, [sessionState])
 
-  //초기화 눌렀을 때 자동완성도..
-  const handleClear = () => {
+  //초기화 눌렀을 때 1차판매점 자동완성도..
+  const handleClear1 = () => {
     if (ref.current) {
       ref.current.clearValue()
     }
   }
 
+  const handleClear2 = () => {
+    if (ref2.current) {
+      ref2.current.clearValue()
+    }
+  }
+
   //자동완성 인풋
   const onInputChange = (key) => {
     if (key !== '') {
       setShowSaleStoreList(schSelSaleStoreList)
+      setOtherSaleStoreList([])
     } else {
       setShowSaleStoreList(favoriteStoreList)
     }
@@ -172,15 +274,47 @@ export default function StuffSearchCondition() {
   //판매대리점 자동완성 변경
   const onSelectionChange = (key) => {
     if (isObjectNotEmpty(key)) {
+      setOtherSaleStoreId('')
       setSchSelSaleStoreId(key.saleStoreId)
-      setStuffSearch({
-        ...stuffSearch,
-        code: 'S',
-        schSelSaleStoreId: key.saleStoreId,
+      stuffSearch.schSelSaleStoreId = key.saleStoreId
+      //T01아닌 1차점은 본인으로 디폴트셋팅이고 수정할수없어서 여기안옴
+      //고른 1차점의 saleStoreId로 2차점 API호출하기
+      let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
+      let otherList
+      get({ url: url }).then((res) => {
+        if (!isEmptyArray(res)) {
+          res.map((row) => {
+            row.value = row.saleStoreId
+            row.label = row.saleStoreName
+          })
+
+          otherList = res
+          setOtherSaleStoreList(otherList)
+        } else {
+          setOtherSaleStoreList([])
+        }
       })
     } else {
+      //X누름
       setSchSelSaleStoreId('')
-      setStuffSearch({ ...stuffSearch, schSelSaleStoreId: '' })
+      stuffSearch.schSelSaleStoreId = ''
+
+      //2차점 판매점목록비우기
+      setOtherSaleStoreList([])
+    }
+  }
+
+  //2차점 자동완성 변경
+  const onSelectionChange2 = (key) => {
+    if (isObjectNotEmpty(key)) {
+      setOtherSaleStoreId(key.saleStoreId)
+      stuffSearch.schOtherSelSaleStoreId = key.saleStoreId
+    } else {
+      //X누르면 검색조건에 1차점으로 셋팅
+      setOtherSaleStoreId('')
+      setSchSelSaleStoreId(schSelSaleStoreId)
+      stuffSearch.schOtherSelSaleStoreId = ''
+      stuffSearch.schSelSaleStoreId = schSelSaleStoreId
     }
   }
 
@@ -235,6 +369,8 @@ export default function StuffSearchCondition() {
               <col />
               <col style={{ width: '160px' }} />
               <col />
+              <col style={{ width: '160px' }} />
+              <col />
             </colgroup>
             <tbody>
               <tr>
@@ -283,6 +419,21 @@ export default function StuffSearchCondition() {
                     />
                   </div>
                 </td>
+                <th>{getMessage('stuff.search.schDispCompanyName')}</th>
+                <td>
+                  <div className="input-wrap">
+                    <input
+                      type="text"
+                      ref={dispCompanyNameRef}
+                      className="input-light"
+                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schDispCompanyName : dispCompanyName}
+                      onChange={(e) => {
+                        setDispCompanyName(dispCompanyNameRef.current.value)
+                      }}
+                      onKeyUp={handleByOnKeyUp}
+                    />
+                  </div>
+                </td>
               </tr>
               <tr>
                 <th>{getMessage('stuff.search.schObjectName')}</th>
@@ -300,63 +451,6 @@ export default function StuffSearchCondition() {
                     />
                   </div>
                 </td>
-                <th>{getMessage('stuff.search.schDispCompanyName')}</th>
-                <td>
-                  <div className="input-wrap">
-                    <input
-                      type="text"
-                      ref={dispCompanyNameRef}
-                      className="input-light"
-                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schDispCompanyName : dispCompanyName}
-                      onChange={(e) => {
-                        setDispCompanyName(dispCompanyNameRef.current.value)
-                      }}
-                      onKeyUp={handleByOnKeyUp}
-                    />
-                  </div>
-                </td>
-                <th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
-                <td>
-                  <div className="select-wrap">
-                    {schSelSaleStoreList?.length > 0 && (
-                      <Select
-                        id="long-value-select1"
-                        instanceId="long-value-select1"
-                        className="react-select-custom"
-                        classNamePrefix="custom"
-                        placeholder="Select"
-                        ref={ref}
-                        // options={schSelSaleStoreList}
-                        options={showSaleStoreList}
-                        onInputChange={onInputChange}
-                        onChange={onSelectionChange}
-                        getOptionLabel={(x) => x.saleStoreName}
-                        getOptionValue={(x) => x.saleStoreId}
-                        // value={schSelSaleStoreList.filter(function (option) {
-                        value={showSaleStoreList.filter(function (option) {
-                          // console.log('자동완성 value::::', option)
-                          if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
-                            return false
-                          } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
-                            return option.saleStoreId === schSelSaleStoreId
-                          } else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
-                            return option.saleStoreId === schSelSaleStoreId
-                          } else {
-                            if (stuffSearch?.schSelSaleStoreId !== '') {
-                              return option.saleStoreId === stuffSearch.schSelSaleStoreId
-                            } else {
-                              return false
-                            }
-                          }
-                        })}
-                        isDisabled={sessionState?.storeLvl === '1' ? false : true}
-                        isClearable={true}
-                      />
-                    )}
-                  </div>
-                </td>
-              </tr>
-              <tr>
                 <th>{getMessage('stuff.search.schReceiveUser')}</th>
                 <td>
                   <div className="input-wrap">
@@ -372,8 +466,130 @@ export default function StuffSearchCondition() {
                     />
                   </div>
                 </td>
-                <th>{getMessage('stuff.search.period')}</th>
+                <th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
                 <td colSpan={3}>
+                  <div className="form-flex-wrap">
+                    <div className="select-wrap mr5" style={{ flex: 1 }}>
+                      {sessionState?.storeId === 'T01' && (
+                        <Select
+                          id="long-value-select1"
+                          instanceId="long-value-select1"
+                          className="react-select-custom"
+                          classNamePrefix="custom"
+                          placeholder="Select"
+                          ref={ref}
+                          options={showSaleStoreList}
+                          onInputChange={onInputChange}
+                          onChange={onSelectionChange}
+                          getOptionLabel={(x) => x.saleStoreName}
+                          getOptionValue={(x) => x.saleStoreId}
+                          value={showSaleStoreList.filter(function (option) {
+                            if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
+                              return false
+                            } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else {
+                              if (stuffSearch?.schSelSaleStoreId !== '') {
+                                return option.saleStoreId === stuffSearch.schSelSaleStoreId
+                              } else {
+                                return false
+                              }
+                            }
+                          })}
+                          isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
+                          isClearable={true}
+                        />
+                      )}
+                      {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && (
+                        <Select
+                          id="long-value-select1"
+                          instanceId="long-value-select1"
+                          className="react-select-custom"
+                          classNamePrefix="custom"
+                          placeholder="Select"
+                          ref={ref}
+                          options={showSaleStoreList[0]}
+                          onChange={onSelectionChange}
+                          getOptionLabel={(x) => x.saleStoreName}
+                          getOptionValue={(x) => x.saleStoreId}
+                          value={showSaleStoreList.filter(function (option) {
+                            if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
+                              return false
+                            } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else {
+                              if (stuffSearch?.schSelSaleStoreId !== '') {
+                                return option.saleStoreId === stuffSearch.schSelSaleStoreId
+                              } else {
+                                return false
+                              }
+                            }
+                          })}
+                          isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
+                          isClearable={false}
+                        />
+                      )}
+                      {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && (
+                        <Select
+                          id="long-value-select1"
+                          instanceId="long-value-select1"
+                          className="react-select-custom"
+                          classNamePrefix="custom"
+                          placeholder="Select"
+                          ref={ref}
+                          options={showSaleStoreList[0]}
+                          onChange={onSelectionChange}
+                          getOptionLabel={(x) => x.saleStoreName}
+                          getOptionValue={(x) => x.saleStoreId}
+                          value={showSaleStoreList.filter(function (option) {
+                            if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
+                              return false
+                            } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else {
+                              if (stuffSearch?.schSelSaleStoreId !== '') {
+                                return option.saleStoreId === stuffSearch.schSelSaleStoreId
+                              } else {
+                                return false
+                              }
+                            }
+                          })}
+                          isDisabled={true}
+                          isClearable={false}
+                        />
+                      )}
+                    </div>
+                    <div className="select-wrap" style={{ flex: 1 }}>
+                      <Select
+                        id="long-value-select2"
+                        instanceId="long-value-select2"
+                        className="react-select-custom"
+                        classNamePrefix="custom"
+                        placeholder="Select"
+                        ref={ref2}
+                        options={otherSaleStoreList}
+                        onChange={onSelectionChange2}
+                        getOptionLabel={(x) => x.saleStoreName}
+                        getOptionValue={(x) => x.saleStoreId}
+                        isDisabled={otherSaleStoreList.length > 1 ? false : true}
+                        isClearable={true}
+                        value={otherSaleStoreList.filter(function (option) {
+                          return option.saleStoreId === otherSaleStoreId
+                        })}
+                      />
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th>{getMessage('stuff.search.period')}</th>
+                <td colSpan={7}>
                   <div className="form-flex-wrap">
                     <div className="radio-wrap mr10">
                       <div className="d-check-radio light mr10">
diff --git a/src/store/stuffAtom.js b/src/store/stuffAtom.js
index c47321ae..b18fca77 100644
--- a/src/store/stuffAtom.js
+++ b/src/store/stuffAtom.js
@@ -14,7 +14,8 @@ export const stuffSearchState = atom({
     schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'), //시작일
     schToDt: dayjs(new Date()).format('YYYY-MM-DD'), //종료일
     code: 'S',
-    schSelSaleStoreId: '', //판매대리점 선택
+    schSelSaleStoreId: '', //1차판매대리점 선택
+    schOtherSelSaleStoreId: '', //1차 이외 판매대리점 선택
     startRow: 1,
     endRow: 100,
     schSortType: 'R', //정렬조건 (R:최근등록일 U:최근수정일)

From 8e6618b2bb20564c697c5d788448f5dc6bb8e9ff Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Thu, 31 Oct 2024 11:28:08 +0900
Subject: [PATCH 42/60] =?UTF-8?q?=EC=A2=8C=EC=9A=B0=EB=8F=84=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/roofcover/useMovementSetting.js | 25 +++++++++++++----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js
index 1f64bcd7..bdee51e4 100644
--- a/src/hooks/roofcover/useMovementSetting.js
+++ b/src/hooks/roofcover/useMovementSetting.js
@@ -83,27 +83,30 @@ export function useMovementSetting(id) {
     const { top: targetTop, left: targetLeft } = target
     const currentX = canvas.getPointer(e.e).x
     const currentY = Math.floor(canvas.getPointer(e.e).y)
-    /*const allPoints = canvas
-      ?.getObjects()
-      .filter((obj) => obj.name === 'outerLine')
-      .map((obj) => {
-        return { x: obj.x1, y: obj.y1 }
-      })
-
-    const xArr = allPoints.map((point) => point.x)
-    const yArr = allPoints.map((point) => point.y)*/
 
     if (direction === 'left' || direction === 'right') {
       if (targetTop > currentY) {
         UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
         UP_DOWN_REF.UP_INPUT_REF.current.value = ''
 
-        UP_DOWN_REF.DOWN_INPUT_REF.current.value = (Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000
+        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
       } else {
         UP_DOWN_REF.UP_RADIO_REF.current.checked = true
         UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
 
-        UP_DOWN_REF.UP_INPUT_REF.current.value = (Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000
+        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
+      }
+    } else {
+      if (targetLeft > currentX) {
+        UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
+        UP_DOWN_REF.UP_INPUT_REF.current.value = ''
+
+        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
+      } else {
+        UP_DOWN_REF.UP_RADIO_REF.current.checked = true
+        UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
+
+        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
       }
     }
 

From 545b704e8a8ea04f06f59adf550ebefa31332908 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 31 Oct 2024 14:30:12 +0900
Subject: [PATCH 43/60] =?UTF-8?q?=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../floor-plan/modal/auxiliary/AuxiliarySize.jsx     | 12 ++++++------
 src/locales/ja.json                                  |  4 +++-
 src/locales/ko.json                                  |  4 ++++
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
index 49cd2570..a7828223 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
@@ -13,7 +13,7 @@ export default function AuxiliarySize(props) {
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
-          <h1 className="title">補助線サイズ変更 </h1>
+          <h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
@@ -22,7 +22,7 @@ export default function AuxiliarySize(props) {
           <div className="discrimination-box mb10">
             <div className="d-check-radio pop mb10">
               <input type="radio" name="radio01" id="ra01" />
-              <label htmlFor="ra01">1支店</label>
+              <label htmlFor="ra01">1{getMessage('modal.auxiliary.size.edit.point')}</label>
             </div>
             <div className="outline-form mb15">
               <div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
@@ -31,7 +31,7 @@ export default function AuxiliarySize(props) {
               <span className="thin">mm</span>
             </div>
             <div className="outline-form">
-              <span style={{ width: 'auto' }}>長さ</span>
+              <span style={{ width: 'auto' }}>{getMessage('length')}</span>
               <div className="input-grid mr5">
                 <input type="text" className="input-origin block" defaultValue={100} />
               </div>
@@ -41,7 +41,7 @@ export default function AuxiliarySize(props) {
           <div className="discrimination-box ">
             <div className="d-check-radio pop mb10">
               <input type="radio" name="radio01" id="ra02" />
-              <label htmlFor="ra02">2支店</label>
+              <label htmlFor="ra02">2{getMessage('modal.auxiliary.size.edit.point')}</label>
             </div>
             <div className="outline-form mb15">
               <div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
@@ -50,7 +50,7 @@ export default function AuxiliarySize(props) {
               <span className="thin">mm</span>
             </div>
             <div className="outline-form">
-              <span style={{ width: 'auto' }}>長さ</span>
+              <span style={{ width: 'auto' }}>{getMessage('length')}</span>
               <div className="input-grid mr5">
                 <input type="text" className="input-origin block" defaultValue={100} />
               </div>
@@ -58,7 +58,7 @@ export default function AuxiliarySize(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/locales/ja.json b/src/locales/ja.json
index 6838dc58..73141fb0 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -293,10 +293,12 @@
   "contextmenu.select.move": "선택・이동(JA)",
   "contextmenu.wallline.remove": "외벽선 삭제(JA)",
   "contextmenu.size.edit": "サイズ変更",
+  "modal.auxiliary.size.edit": "補助線サイズ変更",
+  "modal.auxiliary.size.edit.point": "支店",
   "contextmenu.auxiliary.move": "補助線の移動",
   "modal.auxiliary.move": "補助線の移動",
   "modal.auxiliary.move.info": "移動する方向を入力してください",
-  "contextmenu.auxiliary.copy": "コピーする方向を入力してください",
+  "contextmenu.auxiliary.copy": "補助線のコピー",
   "modal.auxiliary.copy": "補助線のコピー",
   "modal.auxiliary.copy.info": "コピーする方向を入力してください",
   "contextmenu.auxiliary.remove": "보조선 삭제(JA)",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 1e8cb1bb..e1230a15 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -298,10 +298,14 @@
   "contextmenu.select.move": "선택・이동",
   "contextmenu.wallline.remove": "외벽선 삭제",
   "contextmenu.size.edit": "사이즈 변경",
+  "modal.auxiliary.size.edit": "보조선 사이즈 변경",
+  "modal.auxiliary.size.edit.point": "지점",
   "contextmenu.auxiliary.move": "보조선 이동",
   "modal.auxiliary.move": "보조선 이동",
   "modal.auxiliary.move.info": "이동할 방향을 입력해주세요.",
   "contextmenu.auxiliary.copy": "보조선 복사",
+  "modal.auxiliary.copy": "보조선 복사",
+  "modal.auxiliary.copy.info": "복사할 방향을 입력해주세요.",
   "contextmenu.auxiliary.remove": "보조선 삭제",
   "contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선",
   "contextmenu.auxiliary.cut": "보조선 절삭",

From 6929878ccae984c74bc14956098150ee9f13f2c5 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 31 Oct 2024 14:30:45 +0900
Subject: [PATCH 44/60] =?UTF-8?q?context=20menu=20=EB=B2=84=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useContextMenu.js | 4 ++--
 src/hooks/usePopup.js       | 5 +++--
 src/store/popupAtom.js      | 6 ++++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index 99fa585f..e60b80ae 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -10,7 +10,7 @@ import GridMove from '@/components/floor-plan/modal/grid/GridMove'
 import GridCopy from '@/components/floor-plan/modal/grid/GridCopy'
 import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
 import { gridColorState } from '@/store/gridAtom'
-import { contextPopupPositionState } from '@/store/popupAtom'
+import { contextPopupPositionState, contextPopupState } from '@/store/popupAtom'
 import AuxiliaryCopy from '@/components/floor-plan/modal/auxiliary/AuxiliaryCopy'
 import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
 import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting'
@@ -37,7 +37,7 @@ export function useContextMenu() {
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
   const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
   const [contextMenu, setContextMenu] = useState([[]]) // 메뉴.object 별 context menu
-  const [currentContextMenu, setCurrentContextMenu] = useState(null) // 선택한 contextMenu
+  const [currentContextMenu, setCurrentContextMenu] = useRecoilState(contextPopupState) // 선택한 contextMenu
   const currentObject = useRecoilValue(currentObjectState)
   const { getMessage } = useMessage()
   const { addPopup } = usePopup()
diff --git a/src/hooks/usePopup.js b/src/hooks/usePopup.js
index 37730ec5..b126996d 100644
--- a/src/hooks/usePopup.js
+++ b/src/hooks/usePopup.js
@@ -1,14 +1,15 @@
 import { useRecoilState } from 'recoil'
-import { popupState } from '@/store/popupAtom'
+import { contextPopupState, popupState } from '@/store/popupAtom'
 
 export function usePopup() {
   const [popup, setPopup] = useRecoilState(popupState)
-
+  const [contextMenuPopup, setContextMenuPopup] = useRecoilState(contextPopupState)
   const addPopup = (id, depth, component) => {
     setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
   }
 
   const closePopup = (id) => {
+    if (contextMenuPopup) setContextMenuPopup(null)
     setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
   }
 
diff --git a/src/store/popupAtom.js b/src/store/popupAtom.js
index 498f4eed..c5c75501 100644
--- a/src/store/popupAtom.js
+++ b/src/store/popupAtom.js
@@ -12,6 +12,12 @@ export const popupState = atom({
   dangerouslyAllowMutability: true,
 })
 
+export const contextPopupState = atom({
+  key: 'contextPopupState',
+  default: null,
+  dangerouslyAllowMutability: true,
+})
+
 export const contextPopupPositionState = atom({
   key: 'contextPopupPositionState',
   default: {

From dbb3a3fce0d0a38d31e50b7399c37b25e447ed32 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 31 Oct 2024 14:31:03 +0900
Subject: [PATCH 45/60] =?UTF-8?q?modal=20hidden=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../floor-plan/modal/object/ObjectSetting.jsx |  7 ++--
 src/hooks/object/useObjectBatch.js            | 36 ++++++++++++++-----
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/floor-plan/modal/object/ObjectSetting.jsx b/src/components/floor-plan/modal/object/ObjectSetting.jsx
index 86a4f3a0..707e0c3a 100644
--- a/src/components/floor-plan/modal/object/ObjectSetting.jsx
+++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx
@@ -19,7 +19,8 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
   const canvas = useRecoilValue(canvasState)
   const [buttonAct, setButtonAct] = useState(1)
   const { swalFire } = useSwal()
-  const { applyOpeningAndShadow, applyDormers } = useObjectBatch()
+  const [isHidden, setIsHidden] = useState(false)
+  const { applyOpeningAndShadow, applyDormers } = useObjectBatch({ isHidden, setIsHidden })
   const { closePopup } = usePopup()
 
   const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
@@ -58,6 +59,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
     }
 
     //개구배치, 그림자배치
+    setIsHidden(true)
     if (buttonAct === 1 || buttonAct === 2) {
       applyOpeningAndShadow(objectPlacement, buttonAct, surfaceShapePolygons)
     } else {
@@ -71,9 +73,10 @@ 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`}>
+      <div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js
index 3dba8436..7b85b5a3 100644
--- a/src/hooks/object/useObjectBatch.js
+++ b/src/hooks/object/useObjectBatch.js
@@ -4,13 +4,13 @@ import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
-import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, triangleToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
+import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, setSurfaceShapePattern, triangleToPolygon } from '@/util/canvas-util'
 import { useSwal } from '@/hooks/useSwal'
 import * as turf from '@turf/turf'
 import { usePolygon } from '@/hooks/usePolygon'
 import { QPolygon } from '@/components/fabric/QPolygon'
 
-export function useObjectBatch() {
+export function useObjectBatch({ isHidden, setIsHidden }) {
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
   const { addCanvasMouseEventListener, initEvent } = useEvent()
@@ -21,12 +21,12 @@ export function useObjectBatch() {
     const selectedType = objectPlacement.typeRef.current.find((radio) => radio.checked).value
     const isCrossChecked = buttonAct === 1 ? objectPlacement.isCrossRef.current.checked : false
     const objName = buttonAct === 1 ? BATCH_TYPE.OPENING : BATCH_TYPE.SHADOW
-    const objTempName = buttonAct === 1 ? BATCH_TYPE.OPENING_TEMP : BATCH_TYPE.SHADOW_TEMP
 
+    const objTempName = buttonAct === 1 ? BATCH_TYPE.OPENING_TEMP : BATCH_TYPE.SHADOW_TEMP
     let rect, isDown, origX, origY
     let selectedSurface
-
     //프리입력
+    console.log('useObjectBatch', isHidden)
     if (selectedType === INPUT_TYPE.FREE) {
       addCanvasMouseEventListener('mouse:down', (e) => {
         isDown = true
@@ -41,6 +41,7 @@ export function useObjectBatch() {
         if (!selectedSurface) {
           swalFire({ text: '지붕안에 그려야해요', icon: 'error' })
           initEvent() //이벤트 초기화
+          if (setIsHidden) setIsHidden(false)
           return
         }
 
@@ -117,6 +118,8 @@ export function useObjectBatch() {
           rect.set({ name: objName })
           rect.setCoords()
           initEvent()
+
+          if (setIsHidden) setIsHidden(false)
         }
       })
     } else if (selectedType === INPUT_TYPE.DIMENSION) {
@@ -196,6 +199,7 @@ export function useObjectBatch() {
           rect.set({ name: objName })
           rect.setCoords()
           initEvent()
+          if (setIsHidden) setIsHidden(false)
         }
       })
     }
@@ -399,6 +403,7 @@ export function useObjectBatch() {
 
           isDown = false
           initEvent()
+          if (setIsHidden) setIsHidden(false)
         }
       })
     } else if (buttonAct === 4) {
@@ -494,6 +499,7 @@ export function useObjectBatch() {
           //지붕 밖으로 그렸을때
           if (!turf.booleanWithin(pentagonPolygon, selectedSurfacePolygon)) {
             swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
+
             //일단 지워
             deleteTempObjects()
             return
@@ -574,6 +580,7 @@ export function useObjectBatch() {
 
           isDown = false
           initEvent()
+          if (setIsHidden) setIsHidden(false)
         }
       })
     }
@@ -591,6 +598,7 @@ export function useObjectBatch() {
       )
     canvas?.remove(...deleteTarget)
     initEvent() //이벤트 초기화
+    if (setIsHidden) setIsHidden(false)
   }
 
   const splitDormerTriangle = (triangle, direction) => {
@@ -690,28 +698,40 @@ export function useObjectBatch() {
       leftPoints = [
         { x: points[0].x, y: points[0].y },
         { x: points[0].x - (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
-        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
+        {
+          x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y),
+          y: points[0].y - (points[0].x - points[1].x),
+        },
         { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
       ]
 
       rightPoints = [
         { x: points[0].x, y: points[0].y },
         { x: points[0].x - (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
-        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
+        {
+          x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y),
+          y: points[0].y + (points[0].x - points[1].x),
+        },
         { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
       ]
     } else if (direction === 'right') {
       leftPoints = [
         { x: points[0].x, y: points[0].y },
         { x: points[0].x + (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
-        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
+        {
+          x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y),
+          y: points[0].y + (points[0].x - points[1].x),
+        },
         { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
       ]
 
       rightPoints = [
         { x: points[0].x, y: points[0].y },
         { x: points[0].x + (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
-        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
+        {
+          x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y),
+          y: points[0].y - (points[0].x - points[1].x),
+        },
         { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
       ]
     }

From 12f2e502325ddda0d4404a6febc2ca362aa0b1f4 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Thu, 31 Oct 2024 14:46:53 +0900
Subject: [PATCH 46/60] feat: Add EstimateFileUploader

---
 src/app/floor-plan/page.jsx                   |  1 -
 src/components/estimate/Estimate.jsx          | 60 ++++++++-----------
 .../estimate/EstimateFileUploader.jsx         | 59 ++++++++++++++++++
 src/components/floor-plan/FloorPlan.jsx       |  4 --
 4 files changed, 84 insertions(+), 40 deletions(-)
 create mode 100644 src/components/estimate/EstimateFileUploader.jsx

diff --git a/src/app/floor-plan/page.jsx b/src/app/floor-plan/page.jsx
index b38a7ef0..78873b04 100644
--- a/src/app/floor-plan/page.jsx
+++ b/src/app/floor-plan/page.jsx
@@ -1,5 +1,4 @@
 import CanvasFrame from '@/components/floor-plan/CanvasFrame'
-import FloorPlan from '@/components/floor-plan/FloorPlan'
 
 export default function FloorPlanPage() {
   return (
diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx
index de96d1a3..7cbf936a 100644
--- a/src/components/estimate/Estimate.jsx
+++ b/src/components/estimate/Estimate.jsx
@@ -1,20 +1,31 @@
 'use client'
+
 import { useEffect, useState, useRef } from 'react'
-import { useMessage } from '@/hooks/useMessage'
-import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 import { useRecoilValue } from 'recoil'
 import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
-import { Button } from '@nextui-org/react'
 import { sessionStore } from '@/store/commonAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+import SingleDatePicker from '../common/datepicker/SingleDatePicker'
+import EstimateFileUploader from './EstimateFileUploader'
 
 export default function Estimate({ params }) {
-  const sessionState = useRecoilValue(sessionStore)
-  const { getMessage } = useMessage()
-  const objectRecoil = useRecoilValue(floorPlanObjectState)
   const [objectNo, setObjectNo] = useState('')
-  const fileInputRef = useRef(null)
   const [files, setFiles] = useState([]) //첨부파일
-  const fileId = useRef(0)
+
+  const sessionState = useRecoilValue(sessionStore)
+  const objectRecoil = useRecoilValue(floorPlanObjectState)
+  const { getMessage } = useMessage()
+
+  const { setMenuNumber } = useCanvasMenu()
+
+  const fileUploadProps = {
+    // objectNo: '',
+    // planNo: params.pid,
+    // category: '10',
+    uploadFiles: files,
+    setUploadFiles: setFiles,
+  }
 
   useEffect(() => {
     setObjectNo(objectRecoil.floorPlanObjectNo)
@@ -28,31 +39,9 @@ export default function Estimate({ params }) {
     }
   }, [objectNo])
 
-  const handleButtonClick = () => {
-    fileInputRef.current.click()
-  }
-
-  const onChangeFiles = (e) => {
-    // e.preventDefault()
-    // e.persist()
-    // console.log('파일::', e.target.files[0])
-    // console.log('파일::', e.target.files)
-    // let selectFiles = []
-    // let tempFiles = files
-    // selectFiles = e.target.files
-    // for (const file of selectFiles) {
-    //   tempFiles = [
-    //     ...tempFiles,
-    //     {
-    //       id: fileId.current++,
-    //       object: file,
-    //     },
-    //   ]
-    // }
-    // setFiles(tempFiles)
-    // const formData = new FormData()
-    // formData.append('file', e.target.files[0])
-  }
+  useEffect(() => {
+    setMenuNumber(5)
+  }, [])
 
   return (
     <div className="sub-content estimate">
@@ -210,7 +199,8 @@ export default function Estimate({ params }) {
                   <tr>
                     <th>{getMessage('estimate.detail.header.fileList1')}</th>
                     <td>
-                      <div className="drag-file-box">
+                      <EstimateFileUploader {...fileUploadProps} />
+                      {/* <div className="drag-file-box">
                         <div className="btn-area">
                           <Button type="button" className="btn-origin grey" onClick={handleButtonClick}>
                             {getMessage('estimate.detail.fileList.btn')}
@@ -228,7 +218,7 @@ export default function Estimate({ params }) {
                           <p>Drag file here</p>
                           <ul className="file-list"></ul>
                         </div>
-                      </div>
+                      </div> */}
                     </td>
                   </tr>
                 </tbody>
diff --git a/src/components/estimate/EstimateFileUploader.jsx b/src/components/estimate/EstimateFileUploader.jsx
new file mode 100644
index 00000000..a9bf0f33
--- /dev/null
+++ b/src/components/estimate/EstimateFileUploader.jsx
@@ -0,0 +1,59 @@
+'use client'
+
+import { useContext, useRef } from 'react'
+import { v4 as uuidv4 } from 'uuid'
+import { useMessage } from '@/hooks/useMessage'
+import { SessionContext } from '@/app/SessionProvider'
+
+export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
+  const fileInputRef = useRef(null)
+  const { getMessage } = useMessage()
+  const { session } = useContext(SessionContext)
+
+  const handleButtonClick = (e) => {
+    e.preventDefault()
+    fileInputRef.current.click()
+  }
+
+  const onChangeFiles = async (e) => {
+    // const formData = new FormData()
+    // formData.append('file', e.target.files[0])
+    // formData.append('objectNo', objectNo) // 받아와야 하는 값
+    // formData.append('planNo', planNo) // 받아와야 하는 값
+    // formData.append('category', category) // 받아와야 하는 값
+    // formData.append('userId', session.userId)
+
+    // await promisePost({ url: '/api/file/fileUpload', data: formData }).then((res) => {
+    //   if (res.data > 0) setUploadFiles([...files, { name: e.target.files[0].name, id: uuidv4() }])
+    // })
+    setUploadFiles([...uploadFiles, { data: e.target.files[0], id: uuidv4() }])
+  }
+
+  const deleteFile = (id) => {
+    setUploadFiles(uploadFiles.filter((file) => file.id !== id))
+  }
+
+  return (
+    <div className="drag-file-box">
+      <div className="btn-area">
+        <label className="file-upload" htmlFor="img" onClick={handleButtonClick}>
+          {getMessage('estimate.detail.fileList.btn')}
+        </label>
+        <input type="file" name="file" id="img" ref={fileInputRef} style={{ display: 'none' }} onChange={(e) => onChangeFiles(e)} />
+      </div>
+      <div className="drag-file-area">
+        <p>Drag file here</p>
+        <ul className="file-list">
+          {uploadFiles.length > 0 &&
+            uploadFiles.map((file) => (
+              <li className="file-item" key={file.id}>
+                <span>
+                  {file.data.name} <button className="delete" onClick={() => deleteFile(file.id)}></button>
+                </span>
+              </li>
+            ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index 5639b93f..4baf3eb0 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/src/components/floor-plan/FloorPlan.jsx
@@ -26,10 +26,6 @@ export default function FloorPlan({ children }) {
     fetchSettings()
   }, [objectNo])
 
-  useEffect(() => {
-    setMenuNumber(1)
-  }, [])
-
   return (
     <>
       <div className="canvas-wrap">

From d077b6b50d9d75f8b4c200049c3a57c53fe3faf4 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Thu, 31 Oct 2024 15:17:03 +0900
Subject: [PATCH 47/60] fix: Add custom dropzone event

---
 .../estimate/EstimateFileUploader.jsx         | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/estimate/EstimateFileUploader.jsx b/src/components/estimate/EstimateFileUploader.jsx
index a9bf0f33..c2bccb22 100644
--- a/src/components/estimate/EstimateFileUploader.jsx
+++ b/src/components/estimate/EstimateFileUploader.jsx
@@ -33,6 +33,31 @@ export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
     setUploadFiles(uploadFiles.filter((file) => file.id !== id))
   }
 
+  const handleDrop = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const fileList = []
+    Array.from(e.dataTransfer.files).forEach((file) => {
+      fileList.push({ data: file, id: uuidv4() })
+    })
+    setUploadFiles([...uploadFiles, ...fileList])
+  }
+
+  const handleDragOver = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDragEnd = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDragLeave = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
   return (
     <div className="drag-file-box">
       <div className="btn-area">
@@ -41,7 +66,14 @@ export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
         </label>
         <input type="file" name="file" id="img" ref={fileInputRef} style={{ display: 'none' }} onChange={(e) => onChangeFiles(e)} />
       </div>
-      <div className="drag-file-area">
+      <div
+        className="drag-file-area"
+        draggable
+        onDrop={(e) => handleDrop(e)}
+        onDragOver={(e) => handleDragOver(e)}
+        onDragEnd={(e) => handleDragEnd(e)}
+        onDragLeave={(e) => handleDragLeave(e)}
+      >
         <p>Drag file here</p>
         <ul className="file-list">
           {uploadFiles.length > 0 &&

From d7316560b38dfa18336f134bda04ca69ed6cdb16 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Thu, 31 Oct 2024 17:57:06 +0900
Subject: [PATCH 48/60] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=ED=98=84=ED=99=A9=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=ED=99=94=EB=A9=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/MainContents.jsx          |  4 +-
 src/components/management/Stuff.jsx           | 64 +++++++++++++---
 .../management/StuffSearchCondition.jsx       | 75 ++++++++++++-------
 3 files changed, 104 insertions(+), 39 deletions(-)

diff --git a/src/components/main/MainContents.jsx b/src/components/main/MainContents.jsx
index 9490a868..77df845a 100644
--- a/src/components/main/MainContents.jsx
+++ b/src/components/main/MainContents.jsx
@@ -15,7 +15,7 @@ export default function MainContents() {
   const { getMessage } = useMessage()
   const router = useRouter()
   const globalLocaleState = useRecoilValue(globalLocaleStore)
-  const { promiseGet, get } = useAxios(globalLocaleState)
+  const { promiseGet } = useAxios(globalLocaleState)
 
   const sessionState = useRecoilValue(sessionStore)
 
@@ -118,7 +118,7 @@ export default function MainContents() {
                     key={row.objectNo}
                     className="recently-item"
                     onClick={() => {
-                      if (row.objectNo.substring(0, 1) === 'R') {
+                      if (row.tempFlg === '0') {
                         router.push(`/management/stuff/detail?objectNo=${row.objectNo.toString()}`)
                       } else {
                         router.push(`/management/stuff/tempdetail?objectNo=${row.objectNo.toString()}`)
diff --git a/src/components/management/Stuff.jsx b/src/components/management/Stuff.jsx
index d9c6022e..7fabc8b9 100644
--- a/src/components/management/Stuff.jsx
+++ b/src/components/management/Stuff.jsx
@@ -1,12 +1,11 @@
 'use client'
 
-import React, { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useContext } from 'react'
 import { useRouter, usePathname } from 'next/navigation'
-import { Button } from '@nextui-org/react'
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import StuffQGrid from './StuffQGrid'
-import { useRecoilValue, useRecoilState } from 'recoil'
+import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'
 import { stuffSearchState } from '@/store/stuffAtom'
 import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
 import dayjs from 'dayjs'
@@ -17,10 +16,12 @@ import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
 import QPagination from '../common/pagination/QPagination'
 import { sessionStore } from '@/store/commonAtom'
+import { SessionContext } from '@/app/SessionProvider'
 
 export default function Stuff() {
   const sessionState = useRecoilValue(sessionStore)
-  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
+  const { session } = useContext(SessionContext)
+  const setAppMessageState = useSetRecoilState(appMessageStore)
   const stuffSearchParams = useRecoilValue(stuffSearchState)
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
   const { getMessage } = useMessage()
@@ -224,11 +225,31 @@ export default function Stuff() {
 
   // 진입시 그리드 데이터 조회
   useEffect(() => {
-    if (isObjectNotEmpty(sessionState)) {
-      //물건 메뉴 눌러서 최초 진입 sessionState
+    // if (isObjectNotEmpty(sessionState)) {
+    if (isObjectNotEmpty(session)) {
+      //물건 메뉴 눌러서 최초 진입
       if (stuffSearchParams?.code === 'S') {
+        // const params = {
+        //   saleStoreId: sessionState?.storeId,
+        //   schObjectNo: stuffSearchParams?.schObjectNo,
+        //   schAddress: stuffSearchParams?.schAddress,
+        //   schObjectName: stuffSearchParams?.schObjectName,
+        //   schSaleStoreName: stuffSearchParams?.schSaleStoreName,
+        //   schReceiveUser: stuffSearchParams?.schReceiveUser,
+        //   schDispCompanyName: stuffSearchParams?.schDispCompanyName,
+        //   schDateType: stuffSearchParams.schDateType,
+        //   schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
+        //   schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
+        //   startRow: (pageNo - 1) * pageSize + 1,
+        //   endRow: pageNo * pageSize,
+        //   schSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId
+        //     ? stuffSearchParams.schOtherSelSaleStoreId
+        //     : stuffSearchParams.schSelSaleStoreId,
+        //   schSortType: stuffSearchParams.schSortType,
+        // }
+
         const params = {
-          saleStoreId: sessionState?.storeId,
+          saleStoreId: session?.storeId,
           schObjectNo: stuffSearchParams?.schObjectNo,
           schAddress: stuffSearchParams?.schAddress,
           schObjectName: stuffSearchParams?.schObjectName,
@@ -260,8 +281,26 @@ export default function Stuff() {
         fetchData()
       } else if (stuffSearchParams?.code === 'M') {
         //메인화면에서 진입
+        // const params = {
+        //   saleStoreId: sessionState?.storeId,
+        //   schObjectNo: stuffSearchParams.schObjectNo,
+        //   schAddress: 'dfdfdfdfdf',
+        //   schObjectName: '',
+        //   schSaleStoreName: '',
+        //   schReceiveUser: '',
+        //   schDispCompanyName: '',
+        //   schDateType: 'U',
+        //   schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
+        //   schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
+        //   startRow: (pageNo - 1) * pageSize + 1,
+        //   endRow: pageNo * pageSize,
+        //   schSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId
+        //     ? stuffSearchParams.schOtherSelSaleStoreId
+        //     : stuffSearchParams.schSelSaleStoreId,
+        //   schSortType: 'R',
+        // }
         const params = {
-          saleStoreId: sessionState?.storeId,
+          saleStoreId: session?.storeId,
           schObjectNo: stuffSearchParams.schObjectNo,
           schAddress: 'dfdfdfdfdf',
           schObjectName: '',
@@ -309,7 +348,8 @@ export default function Stuff() {
 
       //조회를 눌렀을때
       async function fetchData() {
-        const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+        // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+        const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
         await get({ url: apiUrl }).then((res) => {
           if (!isEmptyArray(res)) {
             setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@@ -341,7 +381,8 @@ export default function Stuff() {
     })
 
     setPageNo(1)
-    const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+    // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
     get({ url: apiUrl }).then((res) => {
       if (!isEmptyArray(res)) {
         setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@@ -373,7 +414,8 @@ export default function Stuff() {
     })
 
     setPageNo(1)
-    const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+    // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
     get({ url: apiUrl }).then((res) => {
       if (!isEmptyArray(res)) {
         setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
diff --git a/src/components/management/StuffSearchCondition.jsx b/src/components/management/StuffSearchCondition.jsx
index 62e6a9f2..127329cb 100644
--- a/src/components/management/StuffSearchCondition.jsx
+++ b/src/components/management/StuffSearchCondition.jsx
@@ -1,8 +1,8 @@
 'use client'
 
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useContext } from 'react'
 import { useAxios } from '@/hooks/useAxios'
-import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
 import Select from 'react-select'
 import KO from '@/locales/ko.json'
@@ -15,10 +15,13 @@ import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 import { sessionStore } from '@/store/commonAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { isObjectNotEmpty } from '@/util/common-utils'
-import { searchState } from '@/store/boardAtom'
+
+import { SessionContext } from '@/app/SessionProvider'
+
 export default function StuffSearchCondition() {
+  const { session } = useContext(SessionContext)
   const sessionState = useRecoilValue(sessionStore)
-  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
+  const setAppMessageState = useSetRecoilState(appMessageStore)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { getMessage } = useMessage()
   const ref = useRef()
@@ -128,7 +131,8 @@ export default function StuffSearchCondition() {
     setDateType('U')
     setStartDate(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
     setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
-    if (sessionState?.storeId === 'T01') {
+    // if (sessionState?.storeId === 'T01') {
+    if (session?.storeId === 'T01') {
       setSchSelSaleStoreId('')
       handleClear1() //판매대리점선택 자동완성 클리어
       resetStuffRecoil()
@@ -152,18 +156,24 @@ export default function StuffSearchCondition() {
   }
 
   useEffect(() => {
-    if (isObjectNotEmpty(sessionState)) {
+    // if (isObjectNotEmpty(sessionState)) {
+    if (isObjectNotEmpty(session)) {
       // storeId가 T01 이거나 storeLvl이 1차점일때만 판매대리점 선택 활성화
       let url
-      if (sessionState?.storeId === 'T01') {
+      // if (sessionState?.storeId === 'T01') {
+      if (session?.storeId === 'T01') {
         //T01일떄
-        url = `/api/object/saleStore/${sessionState?.storeId}/firstList?userId=${sessionState?.userId}`
+        // url = `/api/object/saleStore/${sessionState?.storeId}/firstList?userId=${sessionState?.userId}`
+        url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
       } else {
-        if (sessionState.storeLvl === '1') {
+        // if (sessionState.storeLvl === '1') {
+        if (session.storeLvl === '1') {
           //T01아닌 1차점일때
-          url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          // url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
         } else {
-          url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          // url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
         }
       }
 
@@ -177,22 +187,26 @@ export default function StuffSearchCondition() {
           let allList
           let favList
           let otherList
-          if (sessionState?.storeId === 'T01') {
+          // if (sessionState?.storeId === 'T01') {
+          if (session?.storeId === 'T01') {
             allList = res
             allList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
             favList = res.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
             setSchSelSaleStoreList(allList)
             setFavoriteStoreList(favList)
             setShowSaleStoreList(favList)
-            setSchSelSaleStoreId(sessionState?.storeId)
+            // setSchSelSaleStoreId(sessionState?.storeId)
+            setSchSelSaleStoreId(session?.storeId)
             setStuffSearch({
               ...stuffSearch,
               code: 'S',
-              schSelSaleStoreId: sessionState?.storeId,
+              // schSelSaleStoreId: sessionState?.storeId,
+              schSelSaleStoreId: session?.storeId,
             })
 
-            //T01일때 2차 판매점 호출하기
-            url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=0&userId=${sessionState?.userId}`
+            //T01일때 2차 판매점 호출하기 디폴트로 1차점을 본인으로 셋팅해서 세션storeId사용
+            // url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=0&userId=${sessionState?.userId}`
+            url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=0&userId=${session?.userId}`
 
             get({ url: url }).then((res) => {
               if (!isEmptyArray(res)) {
@@ -208,7 +222,8 @@ export default function StuffSearchCondition() {
               }
             })
           } else {
-            if (sessionState?.storeLvl === '1') {
+            // if (sessionState?.storeLvl === '1') {
+            if (session?.storeLvl === '1') {
               allList = res
               favList = res.filter((row) => row.priority !== 'B')
               otherList = res.filter((row) => row.firstAgentYn === 'N')
@@ -235,7 +250,8 @@ export default function StuffSearchCondition() {
               setOtherSaleStoreList(otherList)
 
               //선택한 2차점 세션으로 자동셋팅
-              setOtherSaleStoreId(sessionState?.storeId)
+              // setOtherSaleStoreId(sessionState?.storeId)
+              setOtherSaleStoreId(session?.storeId)
               setStuffSearch({
                 ...stuffSearch,
                 code: 'S',
@@ -246,7 +262,8 @@ export default function StuffSearchCondition() {
         }
       })
     }
-  }, [sessionState])
+    // }, [sessionState])
+  }, [session])
 
   //초기화 눌렀을 때 1차판매점 자동완성도..
   const handleClear1 = () => {
@@ -279,7 +296,8 @@ export default function StuffSearchCondition() {
       stuffSearch.schSelSaleStoreId = key.saleStoreId
       //T01아닌 1차점은 본인으로 디폴트셋팅이고 수정할수없어서 여기안옴
       //고른 1차점의 saleStoreId로 2차점 API호출하기
-      let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
+      // let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
+      let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
       let otherList
       get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
@@ -470,7 +488,8 @@ export default function StuffSearchCondition() {
                 <td colSpan={3}>
                   <div className="form-flex-wrap">
                     <div className="select-wrap mr5" style={{ flex: 1 }}>
-                      {sessionState?.storeId === 'T01' && (
+                      {/* {sessionState?.storeId === 'T01' && ( */}
+                      {session?.storeId === 'T01' && (
                         <Select
                           id="long-value-select1"
                           instanceId="long-value-select1"
@@ -483,7 +502,7 @@ export default function StuffSearchCondition() {
                           onChange={onSelectionChange}
                           getOptionLabel={(x) => x.saleStoreName}
                           getOptionValue={(x) => x.saleStoreId}
-                          value={showSaleStoreList.filter(function (option) {
+                          value={schSelSaleStoreList.filter(function (option) {
                             if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
                               return false
                             } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
@@ -498,11 +517,13 @@ export default function StuffSearchCondition() {
                               }
                             }
                           })}
-                          isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
+                          // isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
+                          isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
                           isClearable={true}
                         />
                       )}
-                      {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && (
+                      {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && ( */}
+                      {session?.storeId !== 'T01' && session?.storeLvl === '1' && (
                         <Select
                           id="long-value-select1"
                           instanceId="long-value-select1"
@@ -529,11 +550,13 @@ export default function StuffSearchCondition() {
                               }
                             }
                           })}
-                          isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
+                          // isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
+                          isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
                           isClearable={false}
                         />
                       )}
-                      {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && (
+                      {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && ( */}
+                      {session?.storeId !== 'T01' && session?.storeLvl !== '1' && (
                         <Select
                           id="long-value-select1"
                           instanceId="long-value-select1"

From 1c6bb5294637681eb3f1cfdad7ea045520e95b08 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Thu, 31 Oct 2024 18:01:54 +0900
Subject: [PATCH 49/60] =?UTF-8?q?=EB=B3=B4=EC=A1=B0=EC=84=A0=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/common/useCommonUtils.js         |   9 ++
 src/hooks/roofcover/useAuxiliaryDrawing.js | 104 +++++++++++++++++++--
 src/hooks/roofcover/useMovementSetting.js  |  32 ++++---
 src/hooks/useContextMenu.js                |   3 +-
 src/util/qpolygon-utils.js                 |   2 +-
 5 files changed, 128 insertions(+), 22 deletions(-)

diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js
index b70ae0c8..f151f953 100644
--- a/src/hooks/common/useCommonUtils.js
+++ b/src/hooks/common/useCommonUtils.js
@@ -757,6 +757,14 @@ export function useCommonUtils() {
     })
   }
 
+  const deleteOuterLineObject = () => {
+    const selectedOuterLine = canvas.getActiveObject()
+    if (selectedOuterLine && selectedOuterLine.name === 'outerLine') {
+      canvas.remove(selectedOuterLine)
+      canvas.renderAll()
+    }
+  }
+
   return {
     commonFunctions,
     dimensionSettings,
@@ -767,5 +775,6 @@ export function useCommonUtils() {
     copyObject,
     editText,
     changeDimensionExtendLine,
+    deleteOuterLineObject,
   }
 }
diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js
index 39294260..ba631080 100644
--- a/src/hooks/roofcover/useAuxiliaryDrawing.js
+++ b/src/hooks/roofcover/useAuxiliaryDrawing.js
@@ -561,17 +561,62 @@ export function useAuxiliaryDrawing(id) {
     }
 
     const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
-
-    const allLines = [...auxiliaryLines]
+    /*const allLines = [...auxiliaryLines]
 
     roofBases.forEach((roofBase) => {
-      roofBase.lines.forEach((line) => {
-        allLines.push(line)
-      })
+      allLines.push(...roofBase.lines)
+    })*/
+
+    const innerLines = [...auxiliaryLines]
+    const roofLines = []
+
+    roofBases.forEach((roofBase) => {
+      innerLines.push(...roofBase.innerLines)
+      roofLines.push(...roofBase.lines)
     })
 
     auxiliaryLines.forEach((line1) => {
-      allLines.forEach((line2) => {
+      let interSectionPointsWithRoofLines = []
+
+      //지붕선과 만나는 점을 찾는다.
+      roofLines.forEach((line2) => {
+        const intersectionPoint = calculateIntersection(line1, line2)
+        if (!intersectionPoint) {
+          return
+        }
+        // 기존 점과 겹치는지 확인
+        if (interSectionPointsWithRoofLines.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
+          return
+        }
+
+        interSectionPointsWithRoofLines.push(intersectionPoint)
+      })
+
+      //지붕선과 만나는 점이 두개일 경우 넘친 보조선을 잘라준다 (케라바로 만든 마루)
+      if (interSectionPointsWithRoofLines.length === 2) {
+        const newLine = addLine(
+          [
+            interSectionPointsWithRoofLines[0].x,
+            interSectionPointsWithRoofLines[0].y,
+            interSectionPointsWithRoofLines[1].x,
+            interSectionPointsWithRoofLines[1].y,
+          ],
+          {
+            stroke: 'black',
+            strokeWidth: 1,
+            selectable: false,
+            name: 'auxiliaryLine',
+            isFixed: true,
+          },
+        )
+        lineHistory.current.push(newLine)
+        removeLine(line1)
+        intersectionPoints.current.push(...interSectionPointsWithRoofLines)
+        return
+      }
+
+      //보조선과 만나는 점을 찾는다.
+      innerLines.forEach((line2) => {
         if (line1 === line2) {
           return
         }
@@ -615,6 +660,53 @@ export function useAuxiliaryDrawing(id) {
         lineHistory.current.push(newLine)
         removeLine(line1)
       })
+
+      /*auxiliaryLines.forEach((line1) => {
+        allLines.forEach((line2) => {
+          if (line1 === line2) {
+            return
+          }
+          const intersectionPoint = calculateIntersection(line1, line2)
+          if (!intersectionPoint) {
+            return
+          }
+          roofAdsorptionPoints.current.push(intersectionPoint)
+          intersectionPoints.current.push(intersectionPoint)
+
+          const distance1 = distanceBetweenPoints({ x: line1.x1, y: line1.y1 }, intersectionPoint)
+          const distance2 = distanceBetweenPoints({ x: line1.x2, y: line1.y2 }, intersectionPoint)
+
+          if (distance1 === 0 || distance2 === 0) {
+            return
+          }
+          //historyLine에서 기존 line을 제거한다.
+          lineHistory.current = lineHistory.current.filter((history) => history !== line1)
+
+          let newLine
+
+          if (distance1 >= distance2) {
+            newLine = addLine([line1.x1, line1.y1, intersectionPoint.x, intersectionPoint.y], {
+              stroke: 'black',
+              strokeWidth: 1,
+              selectable: false,
+              name: 'auxiliaryLine',
+              isFixed: true,
+              intersectionPoint,
+            })
+          } else {
+            newLine = addLine([line1.x2, line1.y2, intersectionPoint.x, intersectionPoint.y], {
+              stroke: 'black',
+              strokeWidth: 1,
+              selectable: false,
+              name: 'auxiliaryLine',
+              isFixed: true,
+              intersectionPoint,
+            })
+          }
+          lineHistory.current.push(newLine)
+          removeLine(line1)
+        })
+      })*/
     })
     addCanvasMouseEventListener('mouse:move', mouseMove)
   }
diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js
index bdee51e4..f0814a44 100644
--- a/src/hooks/roofcover/useMovementSetting.js
+++ b/src/hooks/roofcover/useMovementSetting.js
@@ -70,9 +70,7 @@ export function useMovementSetting(id) {
       updownEvent(e)
     }
   }
-  const flowLineEvent = (e) => {
-    console.log('flow')
-  }
+  const flowLineEvent = (e) => {}
 
   const updownEvent = (e) => {
     const target = canvas.getActiveObject()
@@ -113,18 +111,24 @@ export function useMovementSetting(id) {
     canvas?.renderAll()
   }
 
-  const getOnlyDecimal = function (_number, _length) {
-    let result
-
-    result = _number % 1
-
-    result = Number(result.toFixed(_length))
-
-    return result * 10
-  }
-
   const handleSave = () => {
-    closePopup(id)
+    if (type === TYPE.FLOW_LINE) {
+      // 동선이동
+      if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked) {
+        // 높이 변경: 아래, 왼쪽 체크
+      } else {
+        // 높이 변경: 위, 오른쪽 체크
+      }
+    } else {
+      // 형 올림내림
+      if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
+        // 자릿수를 올리다 체크
+        const length = Number(UP_DOWN_REF.UP_INPUT_REF.current.value)
+      } else {
+        // 자릿수를 내리다 체크
+        const length = Number(UP_DOWN_REF.DOWN_INPUT_REF.current.value)
+      }
+    }
   }
 
   return {
diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index 99fa585f..62c8139c 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -43,7 +43,7 @@ export function useContextMenu() {
   const { addPopup } = usePopup()
   const [popupId, setPopupId] = useState(uuidv4())
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
-  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils()
+  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine, deleteOuterLineObject } = useCommonUtils()
   const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
   const [cell, setCell] = useState(null)
   const [column, setColumn] = useState(null)
@@ -116,6 +116,7 @@ export function useContextMenu() {
             {
               id: 'wallLineRemove',
               name: getMessage('contextmenu.wallline.remove'),
+              fn: () => deleteOuterLineObject(),
             },
             {
               id: 'imageSizeEdit',
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index c5ddc9cb..7ca7fb79 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -1166,7 +1166,7 @@ export const splitPolygonWithLines = (polygon) => {
 }
 
 const isSamePoint = (a, b) => {
-  return a.x === b.x && a.y === b.y
+  return Math.abs(Math.round(a.x) - Math.round(b.x)) <= 1 && Math.abs(Math.round(a.y) - Math.round(b.y)) <= 1
 }
 
 /**

From 119103a539ee7a909deecd3eb01e33e4bf6b4f46 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 31 Oct 2024 18:04:03 +0900
Subject: [PATCH 50/60] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/_contents.scss    | 2603 +++++++++++-----------
 src/styles/_grid-detail.scss |    2 +-
 src/styles/_modal.scss       | 3910 +++++++++++++++-------------------
 src/styles/_reset.scss       |    2 -
 4 files changed, 2968 insertions(+), 3549 deletions(-)

diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index fc7bd799..7c8f334a 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -17,1465 +17,1416 @@
 //     }
 // }
 // CanvasMenu
-.canvas-menu-wrap {
-  position: fixed;
-  top: 46px;
-  left: 0;
-  display: block;
-  width: 100%;
-  min-width: 1280px;
-  padding-bottom: 0;
-  background-color: #383838;
-  transition: padding 0.17s ease-in-out;
-  z-index: 999;
-  .canvas-menu-inner {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 0 40px 0 20px;
-    background-color: #2c2c2c;
-    height: 46.8px;
-    z-index: 999;
-    .canvas-menu-list {
-      display: flex;
-      align-items: center;
-      height: 100%;
-      .canvas-menu-item {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        button {
-          display: flex;
-          align-items: center;
-          font-size: 12px;
-          height: 100%;
-          color: #fff;
-          font-weight: 600;
-          padding: 15px 20px;
-          opacity: 0.55;
-          transition: all 0.17s ease-in-out;
-          .menu-icon {
-            display: block;
-            width: 14px;
-            height: 14px;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: contain;
-            margin-right: 10px;
-            &.con00 {
-              background-image: url(/static/images/canvas/menu_icon00.svg);
-            }
-            &.con01 {
-              background-image: url(/static/images/canvas/menu_icon01.svg);
-            }
-            &.con02 {
-              background-image: url(/static/images/canvas/menu_icon02.svg);
-            }
-            &.con03 {
-              background-image: url(/static/images/canvas/menu_icon03.svg);
-            }
-            &.con04 {
-              background-image: url(/static/images/canvas/menu_icon04.svg);
-            }
-            &.con05 {
-              background-image: url(/static/images/canvas/menu_icon05.svg);
-            }
-            &.con06 {
-              background-image: url(/static/images/canvas/menu_icon06.svg);
-            }
-          }
-        }
-        &.active {
-          background-color: #383838;
-          button {
-            opacity: 1;
-          }
-        }
-      }
-    }
-    .canvas-side-btn-wrap {
-      display: flex;
-      align-items: center;
-      margin-left: auto;
-      .select-box {
-        width: 124px;
-        margin-right: 5px;
-        height: 30px;
-        > div {
-          width: 100%;
-        }
-      }
-      .btn-from {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        button {
-          display: block;
-          width: 30px;
-          height: 30px;
-          border-radius: 2px;
-          background-color: #3d3d3d;
-          background-position: center;
-          background-repeat: no-repeat;
-          background-size: 15px 15px;
-          transition: all 0.17s ease-in-out;
-          &.btn01 {
-            background-image: url(../../public/static/images/canvas/side_icon03.svg);
-          }
-          &.btn02 {
-            background-image: url(../../public/static/images/canvas/side_icon02.svg);
-          }
-          &.btn03 {
-            background-image: url(../../public/static/images/canvas/side_icon01.svg);
-          }
-          &.btn04 {
-            background-image: url(../../public/static/images/canvas/side_icon04.svg);
-          }
-          &.btn05 {
-            background-image: url(../../public/static/images/canvas/side_icon05.svg);
-          }
-          &.btn06 {
-            background-image: url(../../public/static/images/canvas/side_icon06.svg);
-          }
-          &.btn07 {
-            background-image: url(../../public/static/images/canvas/side_icon07.svg);
-          }
-          &.btn08 {
-            background-image: url(../../public/static/images/canvas/side_icon08.svg);
-          }
-          &.btn09 {
-            background-image: url(../../public/static/images/canvas/side_icon09.svg);
-          }
-          &:hover {
-            background-color: #1083e3;
-          }
-          &.active {
-            background-color: #1083e3;
-          }
-        }
-      }
-      .ico-btn-from {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        button {
-          .ico {
-            display: block;
-            width: 15px;
-            height: 15px;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: contain;
-            &.ico01 {
-              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
-            }
-            &.ico02 {
-              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
-            }
-            &.ico03 {
-              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
-            }
-            &.ico04 {
-              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
-            }
-          }
-          .name {
-            font-size: 12px;
-            color: #fff;
-          }
-        }
-        &.form06 {
-          .name {
-            font-size: 13px;
-          }
-        }
-      }
-      .vertical-horizontal {
-        display: flex;
-        min-width: 170px;
-        height: 28px;
-        margin: 0 5px;
-        border-radius: 2px;
-        background: #373737;
-        line-height: 28px;
-        overflow: hidden;
-        span {
-          padding: 0 10px;
-          font-size: 13px;
-          color: #fff;
-        }
-        button {
-          margin-left: auto;
-          height: 100%;
-          background-color: #4b4b4b;
-          font-size: 13px;
-          font-weight: 400;
-          color: #fff;
-          padding: 0 7.5px;
-          transition: all 0.17s ease-in-out;
-        }
-        &.on {
-          button {
-            background-color: #1083e3;
-          }
-        }
-      }
-      .size-control {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-        background-color: #3d3d3d;
-        border-radius: 2px;
-        width: 100px;
-        height: 30px;
-        margin: 0 5px;
-        span {
-          font-size: 13px;
-          color: #fff;
-        }
-        .control-btn {
-          display: block;
-          width: 12px;
-          height: 12px;
-          background-repeat: no-repeat;
-          background-size: cover;
-          background-position: center;
-          &.minus {
-            background-image: url(../../public/static/images/canvas/minus.svg);
-          }
-          &.plus {
-            background-image: url(../../public/static/images/canvas/plus.svg);
-          }
-        }
-      }
-    }
-  }
-  .canvas-depth2-wrap {
-    position: absolute;
-    top: -100%;
+.canvas-menu-wrap{
+    position: fixed;
+    top: 46px;
     left: 0;
-    background-color: #383838;
+    display: block;
     width: 100%;
-    height: 50px;
-    transition: all 0.17s ease-in-out;
-    .canvas-depth2-inner {
-      display: flex;
-      align-items: center;
-      padding: 0 40px;
-      height: 100%;
-      .canvas-depth2-list {
+    min-width: 1280px;
+    padding-bottom: 0;
+    background-color: #383838;
+    transition: padding .17s ease-in-out;
+    z-index: 999;
+    .canvas-menu-inner{
+        position: relative;
         display: flex;
         align-items: center;
-        height: 100%;
-        .canvas-depth2-item {
-          display: flex;
-          align-items: center;
-          margin-right: 26px;
-          height: 100%;
-          button {
-            position: relative;
-            opacity: 0.55;
-            color: #fff;
-            font-size: 12px;
-            font-weight: normal;
+        padding: 0 40px 0 20px;
+        background-color: #2C2C2C;
+        height: 46.8px;
+        z-index: 999;
+        .canvas-menu-list{
+            display: flex;
+            align-items: center;
             height: 100%;
-            padding-right: 12px;
-          }
-          &.active {
-            button {
-              opacity: 1;
-              font-weight: 600;
-              &:after {
-                content: '';
-                position: absolute;
-                top: 50%;
-                right: 0;
-                transform: translateY(-50%);
-                width: 5px;
-                height: 8px;
-                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
-              }
+            .canvas-menu-item{
+                display: flex;
+                align-items: center;
+                height: 100%;
+                button{
+                    display: flex;
+                    align-items: center;
+                    font-size: 12px;
+                    height: 100%;
+                    color: #fff;
+                    font-weight: 600;
+                    padding: 15px 20px;
+                    opacity: 0.55;
+                    transition: all .17s ease-in-out;
+                    .menu-icon{
+                        display: block;
+                        width: 14px;
+                        height: 14px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        margin-right: 10px;
+                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
+                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
+                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
+                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
+                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
+                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
+                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
+                    }
+                }
+                &.active{
+                    background-color: #383838;
+                    button{
+                        opacity: 1;
+                    }
+                }
             }
-          }
         }
-      }
-      .canvas-depth2-btn-list {
-        display: flex;
-        align-items: center;
-        margin-left: auto;
-        height: 100%;
-        .depth2-btn-box {
-          display: flex;
-          align-items: center;
-          margin-right: 34px;
-          height: 100%;
-          transition: all 0.17s ease-in-out;
-          button {
-            position: relative;
-            font-size: 12px;
-            font-weight: 400;
+        .canvas-side-btn-wrap{
+            display: flex;
+            align-items: center;
+            margin-left: auto;
+            .select-box{
+                width: 124px;
+                margin: 0 5px;
+                height: 30px;
+                > div{
+                    width: 100%;
+                }
+            }
+            .btn-from{
+                display: flex;
+                align-items: center;
+                gap: 5px;
+                button{
+                    display: block;
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 2px;
+                    background-color: #3D3D3D;
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 15px 15px;
+                    transition: all .17s ease-in-out;
+                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
+                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
+                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
+                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
+                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
+                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
+                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
+                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
+                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
+                    &:hover{
+                        background-color: #1083E3;
+                    }
+                    &.active{
+                        background-color: #1083E3;
+                    }
+                }
+            }
+            .ico-btn-from{
+                display: flex;
+                align-items: center;
+                gap: 5px;
+                button{
+                    .ico{
+                        display: block;
+                        width: 15px;
+                        height: 15px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
+                        &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
+                        &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
+                        &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
+                    }
+                    .name{
+                        font-size: 12px;
+                        color: #fff;
+                    }
+                }
+                &.form06{
+                    .name{
+                        font-size: 13px;
+                    }
+                }
+            }
+            .vertical-horizontal{
+                display: flex;
+                min-width: 170px;
+                height: 28px;
+                margin-right: 5px;
+                border-radius: 2px;
+                background: #373737;
+                line-height: 28px;
+                overflow: hidden;
+                span{
+                    padding: 0 10px;
+                    font-size: 13px;
+                    color: #fff;
+                }
+                button{
+                    margin-left: auto;
+                    height: 100%;
+                    background-color: #4B4B4B;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #fff;
+                    padding: 0 7.5px;
+                    transition: all .17s ease-in-out;
+                }
+                &.on{
+                    button{
+                        background-color: #1083E3;
+                    }
+                }
+            }
+            .size-control{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 10px;
+                background-color: #3D3D3D;
+                border-radius: 2px;
+                width: 100px;
+                height: 30px;
+                margin: 0 5px;
+                span{
+                    font-size: 13px;
+                    color: #fff;
+                }
+                .control-btn{
+                    display: block;
+                    width: 12px;
+                    height: 12px;
+                    background-repeat: no-repeat;
+                    background-size: cover;
+                    background-position: center;
+                    &.minus{
+                        background-image: url(../../public/static/images/canvas/minus.svg);
+                    }
+                    &.plus{
+                        background-image: url(../../public/static/images/canvas/plus.svg);
+                    }
+                }
+            }
+        }
+    }
+    .canvas-depth2-wrap{
+        position: absolute;
+        top: -100%;
+        left: 0;
+        background-color: #383838;
+        width: 100%;
+        height: 50px;
+        transition: all .17s ease-in-out;
+        .canvas-depth2-inner{
+            display: flex;
+            align-items: center;
+            padding: 0 40px;
             height: 100%;
-            color: #fff;
-            padding-right: 12px;
-            &:after {
-              content: '';
-              position: absolute;
-              top: 50%;
-              right: 0;
-              transform: translateY(-50%);
-              width: 5px;
-              height: 8px;
-              background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+            .canvas-depth2-list{
+                display: flex;
+                align-items: center ;
+                height: 100%;
+                .canvas-depth2-item{
+                    display: flex; 
+                    align-items: center;
+                    margin-right: 26px;
+                    height: 100%;
+                    button{
+                        position: relative;
+                        opacity: 0.55;
+                        color: #fff;
+                        font-size: 12px;
+                        font-weight: normal;
+                        height: 100%;
+                        padding-right: 12px;
+                    }
+                    &.active{
+                        button{
+                            opacity: 1;
+                            font-weight: 600;
+                            &:after{
+                                content: '';
+                                position: absolute;
+                                top: 50%;
+                                right: 0;
+                                transform: translateY(-50%);
+                                width: 5px;
+                                height: 8px;
+                                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+                            }
+                        }
+                    }
+                }
+            }
+            .canvas-depth2-btn-list{
+                display: flex;
+                align-items: center;
+                margin-left: auto;
+                height: 100%;
+                .depth2-btn-box{
+                    display: flex;
+                    align-items: center;
+                    margin-right: 34px;
+                    height: 100%;
+                    transition: all .17s ease-in-out;
+                    button{
+                        position: relative;
+                        font-size: 12px;
+                        font-weight: 400;
+                        height: 100%;
+                        color: #fff;
+                        padding-right: 12px;
+                        &:after{
+                            content: '';
+                            position: absolute;
+                            top: 50%;
+                            right: 0;
+                            transform: translateY(-50%);
+                            width: 5px;
+                            height: 8px;
+                            background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+                        }
+                    }
+                    &:last-child{
+                        margin-right: 0;
+                    }
+                    &.mouse{
+                        opacity: 0.55;
+                    }
+                }
             }
-          }
-          &:last-child {
-            margin-right: 0;
-          }
-          &.mouse {
-            opacity: 0.55;
-          }
         }
-      }
+        &.active{
+            top: 47px;
+        }
     }
-    &.active {
-      top: 47px;
+    &.active{
+        padding-bottom: 50px;
     }
-  }
-  &.active {
-    padding-bottom: 50px;
-  }
 }
 
 // canvas-layout
-.canvas-content {
-  padding-top: 46.8px;
-  transition: all 0.17s ease-in-out;
-  .canvas-frame {
-    height: calc(100vh - 129.3px);
-  }
-  &.active {
-    padding-top: calc(46.8px + 50px);
-    .canvas-frame {
-      height: calc(100vh - 179.4px);
+.canvas-content{
+    padding-top: 46.8px;
+    transition: all .17s ease-in-out;
+    .canvas-frame{
+        height: calc(100vh - 129.3px);
+    }
+    &.active{
+        padding-top: calc(46.8px + 50px);
+        .canvas-frame{
+            height: calc(100vh - 179.4px);
+        }
     }
-  }
 }
-.canvas-layout {
-  padding-top: 37px;
-  .canvas-page-list {
-    position: fixed;
-    top: 92.8px;
-    left: 0;
-    display: flex;
-    background-color: #1c1c1c;
-    border-top: 1px solid #000;
-    width: 100%;
-    min-width: 1280px;
-    transition: all 0.17s ease-in-out;
-    z-index: 99;
-    &.active {
-      top: calc(92.8px + 50px);
-    }
-    .canvas-plane-wrap {
-      display: flex;
-      align-items: center;
-      max-width: calc(100% - 45px);
-      .canvas-page-box {
+.canvas-layout{
+    padding-top: 37px;
+    .canvas-page-list{
+        position: fixed;
+        top: 92.8px;
+        left: 0;
         display: flex;
-        align-items: center;
-        background-color: #1c1c1c;
-        padding: 9.6px 20px;
-        border-right: 1px solid #000;
-        min-width: 0;
-        transition: all 0.17s ease-in-out;
-        span {
-          display: flex;
-          align-items: center;
-          width: 100%;
-          font-size: 12px;
-          font-family: 'Pretendard', sans-serif;
-          color: #aaa;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
+        background-color: #1C1C1C;
+        border-top: 1px solid #000;
+        width: 100%;
+        min-width: 1280px;
+        transition: all .17s ease-in-out;
+        z-index: 99;
+        &.active{
+            top: calc(92.8px + 50px);
         }
-        .close {
-          flex: none;
-          display: block;
-          width: 7px;
-          height: 8px;
-          margin-left: 15px;
-          background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
-          background-size: cover;
+        .canvas-plane-wrap{
+            display: flex;
+            align-items: center;
+            max-width: calc(100% - 45px);
+            .canvas-page-box{
+                display: flex;
+                align-items: center;
+                background-color: #1c1c1c;
+                padding: 9.6px 20px;
+                border-right:1px solid #000;
+                min-width: 0;
+                transition: all .17s ease-in-out;
+                span{
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    font-size: 12px;
+                    font-family: 'Pretendard', sans-serif;
+                    color: #AAA;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+                .close{
+                    flex: none;
+                    display: block;
+                    width: 7px;
+                    height: 8px;
+                    margin-left: 15px;
+                    background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
+                    background-size: cover;
+                }
+                &.on{
+                    background-color: #fff;
+                    span{
+                        font-weight: 600;
+                        color: #101010;
+                    }
+                    .close{
+                        background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
+                    }
+                    &:hover{
+                        background-color: #fff;
+                    }
+                }
+                &:hover{
+                    background-color: #000;
+                }
+            }
         }
-        &.on {
-          background-color: #fff;
-          span {
-            font-weight: 600;
-            color: #101010;
-          }
-          .close {
-            background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
-          }
-          &:hover {
-            background-color: #fff;
-          }
+        .plane-add{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 45px;
+            padding: 13.5px 0;
+            background-color: #1C1C1C;
+            border-right: 1px solid #000;
+            transition: all .17s ease-in-out;
+            span{
+                display: block;
+                width: 9px;
+                height: 9px;
+                background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
+                background-size: cover;
+            }
+            &:hover{
+                background-color: #000;
+            }
         }
-        &:hover {
-          background-color: #000;
-        }
-      }
     }
-    .plane-add {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 45px;
-      padding: 13.5px 0;
-      background-color: #1c1c1c;
-      border-right: 1px solid #000;
-      transition: all 0.17s ease-in-out;
-      span {
-        display: block;
-        width: 9px;
-        height: 9px;
-        background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
-        background-size: cover;
-      }
-      &:hover {
-        background-color: #000;
-      }
-    }
-  }
 }
 
-.canvas-frame {
-  position: relative;
-  // height: calc(100% - 36.5px);
-  background-color: #f4f4f7;
-  overflow: auto;
-  transition: all 0.17s ease-in-out;
-  // &::-webkit-scrollbar {
-  //     width: 10px;
-  //     height: 10px;
-  //     background-color: #fff;
-  // }
-  // &::-webkit-scrollbar-thumb {
-  //     background-color: #C1CCD7;
-  //     border-radius: 30px;
-  // }
-  // &::-webkit-scrollbar-track {
-  //     background-color: #fff;
-  // }
-  .canvas-container {
-    margin: 0 auto;
-    background-color: #fff;
-  }
-  canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+.canvas-frame{
+    position: relative;
+    // height: calc(100% - 36.5px);
+    background-color: #F4F4F7;
+    overflow: auto;
+    transition: all .17s ease-in-out;
+    // &::-webkit-scrollbar {
+    //     width: 10px;
+    //     height: 10px;
+    //     background-color: #fff;
+    // }
+    // &::-webkit-scrollbar-thumb {
+    //     background-color: #C1CCD7;
+    //     border-radius: 30px;
+    // }
+    // &::-webkit-scrollbar-track {
+    //     background-color: #fff;
+    // }
+    .canvas-container{
+        margin: 0 auto;
+        background-color: #fff;
+    }
+    canvas{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 // sub-page
-.sub-header {
-  position: fixed;
-  top: 46px;
-  left: 0;
-  width: 100%;
-  min-width: 1280px;
-  height: 46px;
-  border-bottom: 1px solid #000;
-  background: #2c2c2c;
-  z-index: 999;
-  .sub-header-inner {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 100px;
-    .sub-header-title-wrap {
-      display: flex;
-      align-items: center;
-      .title-item {
-        position: relative;
-        padding: 0 24px;
-        a {
-          display: flex;
-          align-items: center;
-          .icon {
-            width: 22px;
-            height: 22px;
-            margin-right: 8px;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: cover;
-            &.drawing {
-              background-image: url(../../public/static/images/main/drawing_icon.svg);
-            }
-          }
-        }
-        &:after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateY(-50%);
-          width: 1px;
-          height: 16px;
-          background-color: #d9d9d9;
-        }
-        &:first-child {
-          padding-left: 0;
-        }
-        &:last-child {
-          padding-right: 0;
-          &:after {
-            display: none;
-          }
-        }
-      }
-    }
-    .sub-header-title {
-      font-size: 16px;
-      color: #fff;
-      font-weight: 600;
-    }
-    .sub-header-location {
-      margin-left: auto;
-      display: flex;
-      align-items: center;
-      .location-item {
-        position: relative;
+.sub-header{
+    position: fixed;
+    top: 46px;
+    left: 0;
+    width: 100%;
+    min-width: 1280px;
+    height: 46px;
+    border-bottom: 1px solid #000;
+    background: #2C2C2C;
+    z-index: 999;
+    .sub-header-inner{
         display: flex;
         align-items: center;
-        padding: 0 10px;
-        span {
-          display: flex;
-          font-size: 12px;
-          color: #aaa;
-          font-weight: normal;
-          cursor: default;
+        height: 100%;
+        padding: 0 100px;
+        .sub-header-title-wrap{
+            display: flex;
+            align-items: center;
+            .title-item{
+                position: relative;
+                padding: 0 24px;
+                a{
+                    display: flex;
+                    align-items: center;
+                    .icon{
+                        width: 22px;
+                        height: 22px;
+                        margin-right: 8px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: cover;
+                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
+                    }
+                }
+                &:after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 1px;
+                    height: 16px;
+                    background-color: #D9D9D9;
+                }
+                &:first-child{
+                    padding-left: 0;
+                }
+                &:last-child{
+                    padding-right: 0;
+                    &:after{
+                        display: none;
+                    }
+                }
+            }
         }
-        &:after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateY(-50%);
-          width: 4px;
-          height: 6px;
-          background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
-        }
-        &:first-child {
-          padding-left: 0;
-        }
-        &:last-child {
-          padding-right: 0;
-          span {
+        .sub-header-title{
+            font-size: 16px;
             color: #fff;
-          }
-          &:after {
-            display: none;
-          }
+            font-weight: 600;
+        }
+        .sub-header-location{
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            .location-item{
+                position: relative;
+                display: flex;
+                align-items: center;
+                padding: 0 10px;
+                span{
+                    display: flex;
+                    font-size: 12px;
+                    color: #AAA;
+                    font-weight: normal;
+                    cursor: default;
+                }
+                &:after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 4px;
+                    height: 6px;
+                    background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center;
+                }
+                &:first-child{
+                    padding-left: 0;
+                }
+                &:last-child{
+                    padding-right: 0;
+                    span{
+                        color: #fff;
+                    }
+                    &:after{
+                        display: none;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 
 // sub content
-.sub-content {
-  padding-top: 46px;
-  .sub-content-inner {
-    max-width: 1760px;
-    margin: 0 auto;
-    padding: 20px 20px 0;
-    .sub-content-box {
-      margin-bottom: 20px;
-      &:last-child {
-        margin-bottom: 0;
-      }
+.sub-content{
+    padding-top: 46px;
+    .sub-content-inner{
+        max-width: 1760px;
+        margin: 0 auto;
+        padding: 20px 20px 0;
+        .sub-content-box{
+            margin-bottom: 20px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
     }
-  }
-  &.estimate {
-    display: flex;
-    flex-direction: column;
-    padding-top: 0;
-    .sub-content-inner {
-      flex: 1;
-      width: 100%;
+    &.estimate{
+        display: flex;
+        flex-direction: column;
+        padding-top: 0;
+        .sub-content-inner{
+            flex: 1;
+            width: 100%;
+        }
     }
-  }
 }
-.sub-table-box {
-  padding: 20px;
-  border-radius: 6px;
-  border: 1px solid #e9eaed;
-  background: #fff;
-  box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-  .table-box-title-wrap {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-    .title-wrap {
-      display: flex;
-      align-items: center;
-      h3 {
-        display: block;
-        font-size: 15px;
-        color: #101010;
-        font-weight: 600;
-        margin-right: 14px;
-        &.product {
-          margin-right: 10px;
-        }
-      }
-      .product_tit {
-        position: relative;
-        font-size: 15px;
-        font-weight: 600;
-        color: #1083e3;
-        padding-left: 10px;
-        &::before {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 0;
-          transform: translateY(-50%);
-          width: 1px;
-          height: 11px;
-          background-color: #d9d9d9;
-        }
-      }
-      .option {
-        padding-left: 5px;
-        font-size: 13px;
-        color: #101010;
-        font-weight: 400;
-      }
-      .info-wrap {
+.sub-table-box{
+    padding: 20px;
+    border-radius: 6px; 
+    border: 1px solid #E9EAED;
+    background: #FFF;
+    box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+    .table-box-title-wrap{
         display: flex;
         align-items: center;
-        li {
-          position: relative;
-          padding: 0 6px;
-          font-size: 12px;
-          color: #101010;
-          font-weight: normal;
-          span {
-            font-weight: 600;
-            &.red {
-              color: #e23d70;
+        margin-bottom: 15px;
+        .title-wrap{
+            display: flex;
+            align-items: center;
+            h3{
+                display: block;
+                font-size: 15px;
+                color: #101010;
+                font-weight: 600;
+                margin-right: 14px;
+                &.product{
+                    margin-right: 10px;
+                }
             }
-          }
-          &:after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            right: 0;
-            transform: translateY(-50%);
-            width: 1px;
-            height: 11px;
-            background-color: #d9d9d9;
-          }
-          &:first-child {
-            padding-left: 0;
-          }
-          &:last-child {
-            padding-right: 0;
-            &::after {
-              display: none;
+            .product_tit{
+                position: relative;
+                font-size: 15px;
+                font-weight: 600;
+                color: #1083E3;
+                padding-left: 10px;
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    width: 1px;
+                    height: 11px;
+                    background-color: #D9D9D9;
+                }
+            }
+            .option{
+                padding-left: 5px;
+                font-size: 13px;
+                color: #101010;
+                font-weight: 400;
+            }
+            .info-wrap{
+                display: flex;
+                align-items: center;
+                li{
+                    position: relative;
+                    padding: 0 6px;
+                    font-size: 12px;
+                    color: #101010;
+                    font-weight: normal;
+                    span{
+                        font-weight: 600;
+                        &.red{
+                            color: #E23D70;
+                        }
+                    }
+                    &:after{
+                        content: '';
+                        position: absolute;
+                        top: 50%;
+                        right: 0;
+                        transform: translateY(-50%);
+                        width: 1px;
+                        height: 11px;
+                        background-color: #D9D9D9;
+                    }
+                    &:first-child{padding-left: 0;}
+                    &:last-child{padding-right: 0;&::after{display: none;}}
+                }
             }
-          }
         }
-      }
     }
-  }
-  .left-unit-box {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-  }
-  .promise-gudie {
-    display: block;
-    font-size: 13px;
-    font-weight: 700;
-    color: #101010;
-    margin-bottom: 20px;
-  }
-  .important {
-    color: #f00;
-  }
-  .sub-center-footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
-  }
-  .sub-right-footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-top: 20px;
-  }
+    .left-unit-box{
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+    }
+    .promise-gudie{
+        display: block;
+        font-size: 13px;
+        font-weight: 700;
+        color: #101010;
+        margin-bottom: 20px;
+    }
+    .important{
+        color: #f00;
+    }
+    .sub-center-footer{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 20px;
+    }
+    .sub-right-footer{
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
 }
-.pagination-wrap {
-  margin-top: 24px;
+.pagination-wrap{
+    margin-top: 24px;
 }
 
-.infomation-wrap {
-  margin-bottom: 30px;
+.infomation-wrap{
+    margin-bottom: 30px;
 }
 
-.infomation-box-wrap {
-  display: flex;
-  gap: 10px;
-  .sub-table-box {
-    flex: 1;
-  }
-  .info-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: #344356;
-    margin-bottom: 10px;
-  }
-  .info-inner {
-    position: relative;
-    font-size: 13px;
-    color: #344356;
-    .copy-ico {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      width: 16px;
-      height: 16px;
-      background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center;
-      background-size: cover;
+.infomation-box-wrap{
+    display: flex;
+    gap: 10px;
+    .sub-table-box{
+        flex: 1 ;
+    }
+    .info-title{
+        font-size: 14px;
+        font-weight: 500;
+        color: #344356;
+        margin-bottom: 10px;
+    }
+    .info-inner{
+        position: relative;
+        font-size: 13px;
+        color: #344356;
+        .copy-ico{
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            width: 16px;
+            height: 16px;
+            background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center;
+            background-size: cover;
+        }
     }
-  }
 }
 
 // 견적서
-.estimate-list-wrap {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  &.one {
-    .estimate-box {
-      &:last-child {
-        min-width: unset;
-      }
-    }
-  }
-  .estimate-box {
-    flex: 1;
+.estimate-list-wrap{
     display: flex;
     align-items: center;
-    &:last-child {
-      flex: none;
-      min-width: 220px;
+    margin-bottom: 10px;
+    &.one{
+        .estimate-box{
+            &:last-child{
+                min-width: unset;
+            }
+        }
     }
-    .estimate-tit {
-      width: 105px;
-      height: 30px;
-      line-height: 30px;
-      background-color: #f4f4f7;
-      border-radius: 100px;
-      text-align: center;
-      font-size: 13px;
-      font-weight: 500;
-      color: #344356;
+    .estimate-box{
+        flex: 1 ;
+        display: flex;
+        align-items: center;
+        &:last-child{
+            flex: none;
+            min-width: 220px;
+        }
+        .estimate-tit{
+            width: 105px;
+            height: 30px;
+            line-height: 30px;
+            background-color: #F4F4F7;
+            border-radius: 100px;
+            text-align: center;
+            font-size: 13px;
+            font-weight: 500;
+            color: #344356;
+        }
+        .estimate-name{
+            font-size: 13px;
+            color: #344356;
+            margin-left: 14px;
+            font-weight: 400;
+            &.blue{
+                font-size: 16px;
+                font-weight: 700;
+                color: #1083E3;
+            }
+            &.red{
+                font-size: 16px;
+                font-weight: 700;
+                color: #D72A2A;
+            }
+        }
     }
-    .estimate-name {
-      font-size: 13px;
-      color: #344356;
-      margin-left: 14px;
-      font-weight: 400;
-      &.blue {
-        font-size: 16px;
-        font-weight: 700;
-        color: #1083e3;
-      }
-      &.red {
-        font-size: 16px;
-        font-weight: 700;
-        color: #d72a2a;
-      }
+    &:last-child{
+        margin-bottom: 0;
     }
-  }
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 // file drag box
-.drag-file-box {
-  padding: 10px;
-  .btn-area {
-    padding-bottom: 15px;
-    border-bottom: 1px solid #ecf0f4;
-    .file-upload {
-      display: inline-block;
-      height: 30px;
-      background-color: #94a0ad;
-      padding: 0 10px;
-      border-radius: 2px;
-      font-size: 13px;
-      line-height: 30px;
-      color: #fff;
-      font-weight: 500;
-      cursor: pointer;
-      transition: background 0.15s ease-in-out;
-      &:hover {
-        background-color: #607f9a;
-      }
-    }
-  }
-  .drag-file-area {
-    position: relative;
-    margin-top: 15px;
-    p {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 13px;
-      color: #ccc;
-      font-weight: 400;
-      cursor: default;
-    }
-  }
-  .file-list {
-    .file-item {
-      margin-bottom: 15px;
-      span {
-        position: relative;
-        font-size: 13px;
-        color: #45576f;
-        font-weight: 400;
-        white-space: nowrap;
-        padding-right: 55px;
-        button {
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateY(-50%);
-          width: 15px;
-          height: 15px;
-          background: url(../../public/static/images/sub/file_delete.svg) no-repeat center;
-          background-size: cover;
+.drag-file-box{
+    padding: 10px;
+    .btn-area{
+        padding-bottom: 15px;
+        border-bottom: 1px solid #ECF0F4;
+        .file-upload{
+            display: inline-block;
+            height: 30px;
+            background-color: #94A0AD;
+            padding: 0 10px;
+            border-radius: 2px;
+            font-size: 13px;
+            line-height: 30px;
+            color: #fff;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background .15s ease-in-out;
+            &:hover{
+                background-color: #607F9A;
+            }
+        }
+    }
+    .drag-file-area{
+        position: relative;
+        margin-top: 15px;
+        p{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 13px;
+            color: #ccc;
+            font-weight: 400;
+            cursor: default;
+        }
+    }
+    .file-list{
+        .file-item{
+            margin-bottom: 15px;
+            span{
+                position: relative;
+                font-size: 13px;
+                color: #45576F;
+                font-weight: 400;
+                white-space: nowrap;
+                padding-right: 55px;
+                button{
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 15px;
+                    height: 15px;
+                    background: url(../../public/static/images/sub/file_delete.svg)no-repeat center;
+                    background-size: cover;
+                }
+            }
+            &:last-child{
+                margin-bottom: 0;
+            }
         }
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
     }
-  }
 }
 
-.special-note-check-wrap {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  border: 1px solid #ecf0f4;
-  border-radius: 3px;
-  margin-bottom: 30px;
-  .special-note-check-item {
-    padding: 14px 10px;
-    border-right: 1px solid #ecf0f4;
-    border-top: 1px solid #ecf0f4;
-    &:nth-child(5n) {
-      border-right: none;
+.special-note-check-wrap{
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    border: 1px solid #ECF0F4;
+    border-radius: 3px;
+    margin-bottom: 30px;
+    .special-note-check-item{
+        padding: 14px 10px;
+        border-right: 1px solid #ECF0F4;
+        border-top: 1px solid #ECF0F4;
+        &:nth-child(5n){
+            border-right: none;
+        }
+        &:nth-child(-n+5){
+            border-top: none;
+        }
+        &.act{
+            background-color: #F7F9FA;
+        }
     }
-    &:nth-child(-n + 5) {
-      border-top: none;
-    }
-    &.act {
-      background-color: #f7f9fa;
-    }
-  }
 }
 
-.calculation-estimate {
-  border: 1px solid #ecf0f4;
-  border-radius: 3px;
-  padding: 24px;
-  max-height: 350px;
-  overflow-y: auto;
-  margin-bottom: 30px;
-  dl {
-    margin-bottom: 35px;
-    &:last-child {
-      margin-bottom: 0;
+.calculation-estimate{
+    border: 1px solid #ECF0F4;
+    border-radius: 3px;
+    padding: 24px;
+    max-height: 350px;
+    overflow-y: auto;
+    margin-bottom: 30px;
+    dl{
+        margin-bottom: 35px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+        dt{
+            font-size: 13px;
+            font-weight: 600;
+            color: #1083E3;
+            margin-bottom: 15px;
+        }
+        dd{
+            font-size: 12px;
+            font-weight: 400;
+            color: #45576F;
+            margin-bottom: 8px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
     }
-    dt {
-      font-size: 13px;
-      font-weight: 600;
-      color: #1083e3;
-      margin-bottom: 15px;
+    &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
     }
-    dd {
-      font-size: 12px;
-      font-weight: 400;
-      color: #45576f;
-      margin-bottom: 8px;
-      &:last-child {
-        margin-bottom: 0;
-      }
+    &::-webkit-scrollbar-thumb {
+        background-color: #d9dee2;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
     }
-  }
-  &::-webkit-scrollbar {
-    width: 4px;
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #d9dee2;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
 }
-.esimate-wrap {
-  margin-bottom: 20px;
+.esimate-wrap{
+    margin-bottom: 20px;
 }
 
-.estimate-product-option {
-  display: flex;
-  align-items: center;
-  margin-bottom: 15px;
-  .product-price-wrap {
+.estimate-product-option{
     display: flex;
     align-items: center;
-    .product-price-tit {
-      font-size: 13px;
-      font-weight: 400;
-      color: #45576f;
-      margin-right: 10px;
-    }
-    .select-wrap {
-      width: 110px;
-    }
-  }
-  .product-edit-wrap {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    .product-edit-explane {
-      display: flex;
-      align-items: center;
-      margin-right: 15px;
-      .explane-item {
-        position: relative;
+    margin-bottom: 15px;
+    .product-price-wrap{
         display: flex;
         align-items: center;
-        padding: 0 10px;
-        font-size: 12px;
-        font-weight: 400;
-        span {
-          width: 20px;
-          height: 20px;
-          margin-right: 5px;
-          background-size: cover;
-          background-repeat: no-repeat;
-          background-position: center;
+        .product-price-tit{
+            font-size: 13px;
+            font-weight: 400;
+            color: #45576F;
+            margin-right: 10px;
         }
-        &:before {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 0;
-          transform: translateY(-50%);
-          width: 1px;
-          height: 12px;
-          background-color: #d9d9d9;
+        .select-wrap{
+            width: 110px;
         }
-        &:first-child {
-          padding-left: 0;
-          &::before {
-            display: none;
-          }
-        }
-        &:last-child {
-          padding-right: 0;
-        }
-        &.item01 {
-          color: #3bbb48;
-          span {
-            background-image: url(../../public/static/images/sub/open_ico.svg);
-          }
-        }
-        &.item02 {
-          color: #909000;
-          span {
-            background-image: url(../../public/static/images/sub/change_ico.svg);
-          }
-        }
-        &.item03 {
-          color: #0191c9;
-          span {
-            background-image: url(../../public/static/images/sub/attachment_ico.svg);
-          }
-        }
-        &.item04 {
-          color: #f16a6a;
-          span {
-            background-image: url(../../public/static/images/sub/click_check_ico.svg);
-          }
-        }
-      }
     }
-    .product-edit-btn {
-      display: flex;
-      align-items: center;
-      button {
+    .product-edit-wrap{
         display: flex;
         align-items: center;
-        span {
-          width: 13px;
-          height: 13px;
-          margin-right: 5px;
-          background-size: cover;
-          &.plus {
-            background: url(../../public/static/images/sub/plus_btn.svg) no-repeat center;
-          }
-          &.minus {
-            background: url(../../public/static/images/sub/minus_btn.svg) no-repeat center;
-          }
+        margin-left: auto;
+        .product-edit-explane{
+            display: flex;
+            align-items: center;
+            margin-right: 15px;
+            .explane-item{
+                position: relative;
+                display: flex;
+                align-items: center;
+                padding: 0 10px;
+                font-size: 12px;
+                font-weight: 400;
+                span{
+                    width: 20px;
+                    height: 20px;
+                    margin-right: 5px;
+                    background-size: cover;
+                    background-repeat: no-repeat;
+                    background-position: center;
+                }
+                &:before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    width: 1px;
+                    height: 12px;
+                    background-color: #D9D9D9;
+                }
+                &:first-child{
+                    padding-left: 0;
+                    &::before{
+                        display: none;
+                    }
+                }
+                &:last-child{
+                    padding-right: 0;
+                }
+                &.item01{
+                    color: #3BBB48;
+                    span{
+                        background-image: url(../../public/static/images/sub/open_ico.svg);
+                    }
+                }
+                &.item02{
+                    color: #909000;
+                    span{
+                        background-image: url(../../public/static/images/sub/change_ico.svg);
+                    }
+                }
+                &.item03{
+                    color: #0191C9;
+                    span{
+                        background-image: url(../../public/static/images/sub/attachment_ico.svg);
+                    }
+                }
+                &.item04{
+                    color: #F16A6A;
+                    span{
+                        background-image: url(../../public/static/images/sub/click_check_ico.svg);
+                    }
+                }
+            }
+        }
+        .product-edit-btn{
+            display: flex;
+            align-items: center;
+            button{
+                display: flex;
+                align-items: center;
+                span{
+                    width: 13px;
+                    height: 13px;
+                    margin-right: 5px;
+                    background-size: cover;
+                    &.plus{
+                        background: url(../../public/static/images/sub/plus_btn.svg)no-repeat center;
+                    }
+                    &.minus{
+                        background: url(../../public/static/images/sub/minus_btn.svg)no-repeat center;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 
 // 발전시물레이션
-.chart-wrap {
-  display: flex;
-  gap: 20px;
-  width: 100%;
-  .sub-table-box {
-    height: 100%;
-  }
-  .chart-inner {
-    flex: 1;
-    .chart-box {
-      margin-bottom: 30px;
-    }
-  }
-  .chart-table-wrap {
+.chart-wrap{
     display: flex;
-    flex-direction: column;
-    flex: none;
-    width: 650px;
-    .sub-table-box {
-      flex: 1;
-      &:first-child {
-        margin-bottom: 20px;
-      }
+    gap: 20px;
+    width: 100%;
+    .sub-table-box{
+        height: 100%;
+    }
+    .chart-inner{
+        flex: 1;
+        .chart-box{
+            margin-bottom: 30px;
+        }
+    }
+    .chart-table-wrap{
+        display: flex;
+        flex-direction: column;
+        flex: none;
+        width: 650px;
+        .sub-table-box{
+            flex: 1;
+            &:first-child{
+                margin-bottom: 20px;
+            }
+        }
     }
-  }
 }
 
-.chart-month-table {
-  table {
-    table-layout: fixed;
-    border-collapse: collapse;
-    border: 1px solid #ecf0f4;
-    border-radius: 4px;
-    thead {
-      th {
-        padding: 4.5px 0;
-        border-bottom: 1px solid #ecf0f4;
+.chart-month-table{
+    table{
+        table-layout: fixed;
+        border-collapse:collapse;
+        border: 1px solid #ECF0F4;
+        border-radius: 4px;
+        thead{
+            th{
+                padding: 4.5px 0;
+                border-bottom: 1px solid #ECF0F4;
+                text-align: center;
+                font-size: 13px;
+                color: #45576F;
+                font-weight: 500;
+                background-color: #F8F9FA;
+            }
+        }
+        tbody{
+            td{
+                font-size: 13px;
+                color: #45576F;
+                text-align: center;
+                padding: 4.5px 0;
+            }
+        }
+    }
+}
+
+.simulation-guide-wrap{
+    display: flex;
+    padding: 20px;
+    .simulation-tit-wrap{
+        flex: none;
+        padding-right: 40px;
+        border-right: 1px solid #EEEEEE;
+        span{
+            display: block;
+            position: relative;
+            padding-left: 60px;
+            font-size: 15px;
+            color: #14324F;
+            font-weight: 600;
+            &::before{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 0;
+                transform: translateY(-50%);
+                width: 40px;
+                height: 40px;
+                background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center;
+                background-size: cover;
+            }
+        }
+    }
+    .simulation-guide-box{
+        flex: 1;
+        padding-left: 40px;
+        dl{
+            margin-bottom: 25px;
+            dt{
+                font-size: 13px;
+                color: #101010;
+                font-weight: 600;
+                margin-bottom: 5px;
+            }
+            dd{
+                font-size: 12px;
+                color: #45576F;
+                font-weight: 400;
+                line-height: 24px;
+            }
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+        ul, ol{
+            list-style: unset;
+        }
+    }
+}
+
+.module-total{
+    display: flex;
+    align-items: center;
+    background-color: #F8F9FA;
+    padding: 9px 0;
+    margin-right: 4px;
+    border: 1px solid #ECF0F4;
+    border-top: none;
+    .total-title{
+        flex: 1;
         text-align: center;
         font-size: 13px;
-        color: #45576f;
+        color: #344356;
         font-weight: 500;
-        background-color: #f8f9fa;
-      }
     }
-    tbody {
-      td {
-        font-size: 13px;
-        color: #45576f;
+    .total-num{
+        flex: none;
+        width: 121px;
         text-align: center;
-        padding: 4.5px 0;
-      }
+        font-size: 15px;
+        color: #344356;
+        font-weight: 500;
     }
-  }
-}
-
-.simulation-guide-wrap {
-  display: flex;
-  padding: 20px;
-  .simulation-tit-wrap {
-    flex: none;
-    padding-right: 40px;
-    border-right: 1px solid #eeeeee;
-    span {
-      display: block;
-      position: relative;
-      padding-left: 60px;
-      font-size: 15px;
-      color: #14324f;
-      font-weight: 600;
-      &::before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-        width: 40px;
-        height: 40px;
-        background: url(../../public/static/images/sub/simulation_guide.svg) no-repeat center;
-        background-size: cover;
-      }
-    }
-  }
-  .simulation-guide-box {
-    flex: 1;
-    padding-left: 40px;
-    dl {
-      margin-bottom: 25px;
-      dt {
-        font-size: 13px;
-        color: #101010;
-        font-weight: 600;
-        margin-bottom: 5px;
-      }
-      dd {
-        font-size: 12px;
-        color: #45576f;
-        font-weight: 400;
-        line-height: 24px;
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    ul,
-    ol {
-      list-style: unset;
-    }
-  }
-}
-
-.module-total {
-  display: flex;
-  align-items: center;
-  background-color: #f8f9fa;
-  padding: 9px 0;
-  margin-right: 4px;
-  border: 1px solid #ecf0f4;
-  border-top: none;
-  .total-title {
-    flex: 1;
-    text-align: center;
-    font-size: 13px;
-    color: #344356;
-    font-weight: 500;
-  }
-  .total-num {
-    flex: none;
-    width: 121px;
-    text-align: center;
-    font-size: 15px;
-    color: #344356;
-    font-weight: 500;
-  }
 }
 
 // 물건상세
-.information-help-wrap {
-  display: flex;
-  padding: 24px;
-  background-color: #f4f4f4;
-  border-radius: 4px;
-  margin-bottom: 15px;
-  .information-help-tit-wrap {
-    position: relative;
+.information-help-wrap{
     display: flex;
-    align-items: center;
-    padding-right: 40px;
-    border-right: 1px solid #e0e0e3;
-    .help-tit-icon {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      margin-right: 10px;
-      background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center;
-      background-size: 20px 20px;
+    padding: 24px;
+    background-color: #F4F4F4;
+    border-radius: 4px;
+    margin-bottom: 15px;
+    .information-help-tit-wrap{
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding-right: 40px;
+        border-right: 1px solid #E0E0E3;
+        .help-tit-icon{
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 10px;
+            background: #fff url(../../public/static/images/sub/information_help.svg)no-repeat center;
+            background-size: 20px 20px;
+        }
+        .help-tit{
+            font-size: 13px;
+            font-weight: 600;
+            color: #45576F;
+        }
     }
-    .help-tit {
-      font-size: 13px;
-      font-weight: 600;
-      color: #45576f;
+    .information-help-guide{
+        padding-left: 40px;
+        span{
+            display: block;
+            font-size: 12px;
+            font-weight: 400;
+            color: #45576F;
+            margin-bottom: 7px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
     }
-  }
-  .information-help-guide {
-    padding-left: 40px;
-    span {
-      display: block;
-      font-size: 12px;
-      font-weight: 400;
-      color: #45576f;
-      margin-bottom: 7px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
 }
 
-.community-search-warp {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 10px 0 30px 0;
-  border-bottom: 1px solid #e5e5e5;
-  margin-bottom: 24px;
-  .community-search-box {
-    position: relative;
+.community-search-warp{
     display: flex;
+    flex-direction: column;
     align-items: center;
-    width: 580px;
-    height: 45px;
-    padding: 0 45px 0 20px;
-    margin-bottom: 20px;
-    border-radius: 2px;
-    border: 1px solid #101010;
-    .community-input {
-      width: 100%;
-      height: 100%;
-      font-size: 13px;
-      font-weight: 400;
-      color: #101010;
-      &::placeholder {
-        color: #c8c8c8;
-      }
+    padding: 10px 0 30px 0;
+    border-bottom: 1px solid #E5E5E5;
+    margin-bottom: 24px;
+    .community-search-box{
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 580px;
+        height: 45px;
+        padding: 0 45px 0 20px;
+        margin-bottom: 20px;
+        border-radius: 2px;
+        border: 1px solid #101010;
+        .community-input{
+            width: 100%;
+            height: 100%;
+            font-size: 13px;
+            font-weight: 400;
+            color: #101010;
+            &::placeholder{
+                color: #C8C8C8;
+            }
+        }
+        .community-search-ico{
+            position: absolute;
+            top: 50%;
+            right: 20px;
+            transform: translateY(-50%);
+            flex: none;
+            width: 21px;
+            height: 100%;
+            background: url(../../public/static/images/sub/community_search.svg)no-repeat center;
+            background-size: 21px 21px;
+            z-index: 3;
+        }
     }
-    .community-search-ico {
-      position: absolute;
-      top: 50%;
-      right: 20px;
-      transform: translateY(-50%);
-      flex: none;
-      width: 21px;
-      height: 100%;
-      background: url(../../public/static/images/sub/community_search.svg) no-repeat center;
-      background-size: 21px 21px;
-      z-index: 3;
+    .community-search-keyword{
+        font-size: 13px;
+        font-weight: 400;
+        color: #45576F;
+        span{
+            font-weight: 600;
+            color: #F16A6A;
+        }
     }
-  }
-  .community-search-keyword {
-    font-size: 13px;
-    font-weight: 400;
-    color: #45576f;
-    span {
-      font-weight: 600;
-      color: #f16a6a;
-    }
-  }
 }
 
 // 자료 다운로드
-.file-down-list {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 14px;
-  .file-down-item {
-    display: flex;
-    align-items: center;
-    padding: 24px;
-    border-radius: 4px;
-    border: 1px solid #e5e5e5;
-    background: #fff;
-    transition: all 0.15s ease-in-out;
-    .file-item-info {
-      .item-num {
-        display: inline-block;
-        padding: 6px 17.5px;
-        border-radius: 60px;
-        background-color: #f4f4f7;
-        font-size: 13px;
-        font-weight: 600;
-        color: #101010;
-        margin-bottom: 15px;
-      }
-      .item-name {
-        font-size: 16px;
-        color: #101010;
-        font-weight: 500;
-        margin-bottom: 13px;
-      }
-      .item-date {
-        font-size: 13px;
-        font-weight: 400;
-        color: #344356;
-      }
+.file-down-list{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+    .file-down-item{
+        display: flex;
+        align-items: center;
+        padding: 24px;
+        border-radius: 4px;
+        border: 1px solid #E5E5E5;
+        background: #FFF; 
+        transition: all .15s ease-in-out;
+        .file-item-info{
+            .item-num{
+                display: inline-block;
+                padding: 6px 17.5px;
+                border-radius: 60px;
+                background-color: #F4F4F7;
+                font-size: 13px;
+                font-weight: 600;
+                color: #101010;
+                margin-bottom: 15px;
+            }
+            .item-name{
+                font-size: 16px;
+                color: #101010;
+                font-weight: 500;
+                margin-bottom: 13px;
+            }
+            .item-date{
+                font-size: 13px;
+                font-weight: 400;
+                color: #344356;
+            }
+        }
+        .file-down-box{
+            display: flex;
+            align-items: center;
+            flex: none;
+            margin-left: auto;
+            height: 100%;
+            .file-down-btn{
+                width: 36px;
+                height: 36px;
+                background: url(../../public/static/images/sub/file_down_btn.svg)no-repeat center;
+                background-size: cover;
+            }
+        }
+        &:hover{
+            background-color: #F4F4F7;
+        }
     }
-    .file-down-box {
-      display: flex;
-      align-items: center;
-      flex: none;
-      margin-left: auto;
-      height: 100%;
-      .file-down-btn {
-        width: 36px;
-        height: 36px;
-        background: url(../../public/static/images/sub/file_down_btn.svg) no-repeat center;
-        background-size: cover;
-      }
-    }
-    &:hover {
-      background-color: #f4f4f7;
-    }
-  }
 }
 
-.file-down-nodata {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 148px;
-  padding: 24px;
-  border-radius: 4px;
-  border: 1px solid #e5e5e5;
-  font-size: 16px;
-  font-weight: 500;
-  color: #344356;
+.file-down-nodata{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 148px;
+    padding: 24px;
+    border-radius: 4px;
+    border: 1px solid #E5E5E5;
+    font-size: 16px;
+    font-weight: 500;
+    color: #344356;
 }
 
 //신규물건 등록
-.product-input-wrap {
-  display: flex;
-  align-items: center;
-  width: 200px;
-  height: 30px;
-  background-color: #fafafa;
-  border: 1px solid #eee;
-  padding: 0 10px;
-  input {
-    font-size: 13px;
-    font-weight: 400;
-    color: #999999;
-    padding: 0;
-    height: 100%;
-    flex: 1;
-    background-color: inherit;
-  }
-  .product-delete {
-    flex: none;
-    display: block;
-    width: 15px;
-    height: 100%;
-    background: url(../../public/static/images/sub/product-del.svg) no-repeat center;
-    background-size: 15px 15px;
-  }
+.product-input-wrap{
+    display: flex;
+    align-items: center;
+    width: 200px;
+    height: 30px;
+    background-color: #FAFAFA;
+    border: 1px solid #EEE;
+    padding: 0 10px;
+    input{
+        font-size: 13px;
+        font-weight: 400;
+        color: #999999;
+        padding: 0;
+        height: 100%;
+        flex: 1 ;
+        background-color: inherit;
+    }
+    .product-delete{
+        flex: none;
+        display: block;
+        width: 15px;
+        height: 100%;
+        background: url(../../public/static/images/sub/product-del.svg)no-repeat center;
+        background-size: 15px 15px;
+    }
 }
 
 @media screen and (max-width: 1800px) {
-  .canvas-menu-wrap {
-    .canvas-menu-inner {
-      .canvas-menu-list {
-        .canvas-menu-item button {
-          .menu-icon {
-            margin-right: 5px;
-          }
-        }
-        .canvas-menu-item {
-          button {
-            padding: 15px 15px;
-            font-size: 11px;
-          }
-        }
-      }
-    }
-    .canvas-depth2-wrap {
-      .canvas-depth2-inner {
-        .canvas-depth2-list {
-          .canvas-depth2-item {
-            button {
-              font-size: 11px;
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item button{
+                    .menu-icon{
+                        margin-right: 5px;
+                    }
+                } 
+                .canvas-menu-item{
+                    button{
+                        padding: 15px 15px;
+                        font-size: 11px;
+                    }
+                }
             }
-          }
         }
-      }
-    }
-  }
+        .canvas-depth2-wrap{
+            .canvas-depth2-inner{
+                .canvas-depth2-list{
+                    .canvas-depth2-item{
+                        button{
+                            font-size: 11px;
+                        }
+                    } 
+                } 
+            }
+        }
+    } 
 }
 
 @media screen and (max-width: 1600px) {
-  .canvas-menu-wrap {
-    .canvas-menu-inner {
-      .canvas-menu-list {
-        .canvas-menu-item button {
-          .menu-icon {
-            display: none;
-          }
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item button{
+                    .menu-icon{
+                        display: none;
+                    }
+                } 
+            }
         }
-      }
-    }
-  }
-  .canvas-content {
-    .canvas-frame {
-      height: calc(100vh - 129.5px);
-    }
-    &.active {
-      .canvas-frame {
-        height: calc(100vh - 179.5px);
-      }
-    }
-  }
+    } 
+    .canvas-content{
+        .canvas-frame{
+            height: calc(100vh - 129.5px);
+        }
+        &.active{
+            .canvas-frame{
+                height: calc(100vh - 179.5px);
+            }
+        } 
+    } 
 }
 
 @media screen and (max-width: 1500px) {
-  .canvas-menu-wrap {
-    .canvas-menu-inner {
-      .canvas-menu-list {
-        .canvas-menu-item {
-          button {
-            padding: 15px 10px;
-            font-size: 10px;
-          }
-        }
-      }
-      .canvas-side-btn-wrap {
-        .btn-from {
-          gap: 3px;
-        }
-        .vertical-horizontal {
-          margin: 0 3px;
-          min-width: 150px;
-        }
-        .select-box {
-          width: 100px;
-          margin-right: 3px;
-        }
-        .size-control {
-          width: 90px;
-          margin: 0 3px;
-        }
-      }
-    }
-  }
-  .sub-header {
-    .sub-header-inner {
-      .sub-header-title {
-        font-size: 15px;
-      }
-      .sub-header-title-wrap {
-        .title-item {
-          a {
-            .icon {
-              width: 20px;
-              height: 20px;
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item{
+                    button{
+                        padding: 15px 10px;
+                        font-size: 10px;
+                    }
+                }
             }
-          }
+            .canvas-side-btn-wrap{
+                .btn-from{
+                    gap: 3px;
+                }
+                .vertical-horizontal{
+                    margin-right: 3px;
+                    min-width: 150px;
+                }
+                .select-box{
+                    width: 100px;
+                    margin: 0 3px;
+                }
+                .size-control{
+                    width: 90px;
+                    margin: 0 3px;
+                }
+            } 
         }
-      }
     }
-  }
+    .sub-header{
+        .sub-header-inner{
+            .sub-header-title{
+                font-size: 15px;
+            }
+            .sub-header-title-wrap{
+                .title-item{
+                    a{
+                        .icon{
+                            width: 20px;
+                            height: 20px;
+                        }
+                    } 
+                } 
+            } 
+        } 
+    } 
+    
 }
diff --git a/src/styles/_grid-detail.scss b/src/styles/_grid-detail.scss
index 1f6a2270..d6f34b13 100644
--- a/src/styles/_grid-detail.scss
+++ b/src/styles/_grid-detail.scss
@@ -39,7 +39,7 @@
                 background-color: #F7F9FA;
             }
             &.important_row{
-                background-color: #e7e7e7;
+                background-color: #f5fcff;
             }
         }
         .ag-cell{
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index ec3883d7..7c40ab1e 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,2411 +4,1881 @@ $pop-bold-weight: 500;
 $pop-normal-size: 12px;
 $alert-color: #101010;
 
-@keyframes mountpop {
-  from {
-    opacity: 0;
-    scale: 0.95;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
+@keyframes mountpop{
+    from{opacity: 0; scale: 0.95;}
+    to{opacity: 1; scale: 1;}
+}
+@keyframes unmountpop{
+    from{opacity: 1; scale: 1;}
+    to{opacity: 0; scale: 0.95;}
 }
 
-@keyframes unmountpop {
-  from {
-    opacity: 1;
-    scale: 1;
-  }
-  to {
-    opacity: 0;
-    scale: 0.95;
-  }
+.normal-font{
+    font-size: 12px;
+    font-weight: 400;
+    color: #fff;
+}
+.bold-font{
+    font-size: 12px;
+    font-weight: 500;
+    color: #fff;
 }
 
-.normal-font {
-  font-size: 12px;
-  font-weight: 400;
-  color: #fff;
-}
-
-.bold-font {
-  font-size: 12px;
-  font-weight: 500;
-  color: #fff;
-}
-
-.modal-pop-wrap {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  border: 1px solid #000;
-  border-radius: 4px;
-  background-color: #272727;
-  z-index: 9999999;
-
-  &.xsm {
-    width: 200px;
-  }
-
-  &.xxxm {
-    width: 240px;
-  }
-
-  &.xxm {
-    width: 270px;
-  }
-
-  &.xm {
-    width: 300px;
-  }
-
-  &.ssm {
-    width: 380px;
-  }
-
-  &.sm {
-    width: 580px;
-  }
-
-  &.r {
-    width: 400px;
-  }
-
-  &.lr {
-    width: 440px;
-  }
-
-  &.lr-2 {
-    width: 450px;
-  }
-
-  &.lrr {
-    width: 480px;
-  }
-
-  &.ml {
-    width: 530px;
-  }
-
-  &.l-2 {
-    width: 640px;
-  }
-
-  &.lx-2 {
-    width: 740px;
-  }
-
-  &.lx {
-    width: 770px;
-  }
-
-  &.l {
-    width: 800px;
-  }
-
-  &.mount {
-    animation: mountpop .17s ease-in-out forwards;
-  }
-
-  &.unmount {
-    animation: unmountpop .17s ease-in-out forwards;
-  }
-
-  &.alert {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: transparent;
-    border: none;
-
-    .modal-head {
-      background-color: transparent;
-      padding: 0 0 8px;
-
-      .modal-close {
-        width: 20px;
-        height: 20px;
-        background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
-      }
+.modal-pop-wrap{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    border: 1px solid #000;
+    border-radius: 4px;
+    background-color: #272727;
+    z-index: 9999999;
+    &.xsm{
+        width: 200px;
     }
-
-    .modal-body {
-      background-color: #fff;
-      padding: 22px;
-      border-radius: 4px;
-      border: 1px solid #101010;
-      color: $alert-color;
-
-      .alert-title {
+    &.xxxm{
+        width: 240px;
+    }
+    &.xxm{
+        width: 270px;
+    }
+    &.xm{
+        width: 300px;
+    }
+    &.ssm{
+        width: 380px;
+    }
+    &.sm{
+        width: 580px;
+    }
+    &.r{
+        width: 400px;
+    }
+    &.lr{
+        width: 440px;
+    }
+    &.lr-2{
+        width: 450px;
+    }
+    &.lrr{
+        width: 480px;
+    }
+    &.ml{
+        width: 530px;
+    }
+    &.l-2{
+        width: 640px;
+    }
+    &.lx-2{
+        width: 740px;
+    }
+    &.lx{
+        width: 770px;
+    }
+    &.l{
+        width: 800px;
+    }
+    &.mount{
+        animation: mountpop .17s ease-in-out forwards;
+    }
+    &.unmount{
+        animation: unmountpop .17s ease-in-out forwards;
+    }
+    &.alert{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: transparent;
+        border: none;
+        .modal-head{
+            background-color: transparent;
+            padding: 0 0 8px;
+            .modal-close{
+                width: 20px;
+                height: 20px;
+                background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
+            }
+        }
+        .modal-body{
+            background-color: #fff;
+            padding: 22px;
+            border-radius: 4px;
+            border: 1px solid #101010;
+            color: $alert-color;
+            .alert-title{
+                font-size: 13px;
+                font-weight: 700;
+                color: $alert-color;
+                margin-bottom: 15px;
+            }
+        }
+    }
+}
+.modal-head{
+    display: flex;
+    align-items: center;
+    padding: 10px 24px;
+    background-color: #000;
+    // overflow: hidden;
+    h1.title{
         font-size: 13px;
+        color: $pop-color;
         font-weight: 700;
-        color: $alert-color;
+    }
+    .modal-close{
+        margin-left: auto;
+        color: transparent;
+        font-size: 0;
+        width: 10px;
+        height: 10px;
+        background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
+    }
+}
+.modal-body{
+    padding: 24px;
+    .modal-btn-wrap{
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        button{
+            flex: 1;
+        }
+        &.sub{
+            button{
+                flex: 1 1 auto;
+                padding: 0;
+            }
+            margin-bottom: 14px;
+        }
+    }
+    .modal-check-btn-wrap{
+        margin-top: 15px;
+        .check-wrap-title{
+            font-size: $pop-normal-size;
+            color: $pop-color;
+            font-weight: 600;
+            &.light{
+                font-weight: $pop-normal-weight;
+            }
+        }
+        .flex-check-box{
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 15px;
+            &.for2{
+                justify-content: flex-end;
+                button{
+                    width: calc(50% - 5px);
+                }
+                &.btn{
+                    gap: 5px;
+                    button{
+                        width: calc(50% - 2.5px);
+                    }
+                }
+            }
+            &.for-line{
+                button{
+                    flex: 1;
+                }
+            }
+        }
+    }
+    .outer-line-wrap{
+        border-top: 1px solid #3C3C3C;
+        margin-top: 10px;
+        padding-top: 15px;
         margin-bottom: 15px;
-      }
+        > div{
+            margin-bottom: 15px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
     }
-  }
-}
-
-.modal-head {
-  display: flex;
-  align-items: center;
-  padding: 10px 24px;
-  background-color: #000;
-  // overflow: hidden;
-  h1.title {
-    font-size: 13px;
-    color: $pop-color;
-    font-weight: 700;
-  }
-
-  .modal-close {
-    margin-left: auto;
-    color: transparent;
-    font-size: 0;
-    width: 10px;
-    height: 10px;
-    background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
-  }
-}
-
-.modal-body {
-  padding: 24px;
-
-  .modal-btn-wrap {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-
-    button {
-      flex: 1;
-    }
-
-    &.sub {
-      button {
-        flex: 1 1 auto;
-        padding: 0;
-      }
-
-      margin-bottom: 14px;
-    }
-  }
-
-  .modal-check-btn-wrap {
-    margin-top: 15px;
-
-    .check-wrap-title {
-      font-size: $pop-normal-size;
-      color: $pop-color;
-      font-weight: 600;
-
-      &.light {
+    .modal-guide{
+        display: block;
+        font-size: $pop-normal-size;
+        color: $alert-color;
         font-weight: $pop-normal-weight;
-      }
     }
-
-    .flex-check-box {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      margin-top: 15px;
-
-      &.for2 {
-        justify-content: flex-end;
-
-        button {
-          width: calc(50% - 5px);
-        }
-
-        &.btn {
-          gap: 5px;
-
-          button {
-            width: calc(50% - 2.5px);
-          }
-        }
-      }
-
-      &.for-line {
-        button {
-          flex: 1;
-        }
-      }
-    }
-  }
-
-  .outer-line-wrap {
-    border-top: 1px solid #3C3C3C;
-    margin-top: 10px;
-    padding-top: 15px;
-    margin-bottom: 15px;
-
-    > div {
-      margin-bottom: 15px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .modal-guide {
-    display: block;
-    font-size: $pop-normal-size;
-    color: $alert-color;
-    font-weight: $pop-normal-weight;
-  }
 }
 
-.adsorption-point {
-  display: flex;
-  align-items: center;
-  background-color: #3A3A3A;
-  border-radius: 3px;
-  padding-left: 11px;
-  overflow: hidden;
-  transition: all 0.17s ease-in-out;
-
-  span {
-    font-size: $pop-normal-size;
-    color: #898989;
-  }
-
-  i {
+.adsorption-point{
     display: flex;
     align-items: center;
-    padding: 0 7px;
-    margin-left: auto;
-    height: 100%;
-    font-size: 13px;
-    color: #898989;
-  }
-
-  &.act {
-    i {
-      color: $pop-color;
-      background-color: #1083E3;
+    background-color: #3A3A3A;
+    border-radius: 3px;
+    padding-left: 11px;
+    overflow: hidden;
+    transition: all 0.17s ease-in-out;
+    span{
+        font-size: $pop-normal-size;
+        color: #898989;
+    }
+    i{
+        display: flex;
+        align-items: center;
+        padding: 0 7px;
+        margin-left: auto;
+        height: 100%;
+        font-size: 13px;
+        color: #898989;
+    }
+    &.act{
+        i{
+            color: $pop-color;
+            background-color: #1083E3;
+        }
     }
-  }
 }
 
 // grid-option
-.grid-check-form {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding-bottom: 15px;
-
-  &.border {
-    border-bottom: 1px solid #424242;
-  }
-}
-
-.grid-option-wrap {
-  .grid-option-box {
+.grid-check-form{
     display: flex;
     align-items: center;
-    background-color: transparent;
-    border: 1px solid #3D3D3D;
-    border-radius: 2px;
-    padding: 15px 10px;
-    gap: 20px;
-    margin-bottom: 10px;
-
-    .grid-input-form {
-      display: flex;
-      align-items: center;
-
-      span {
-        flex: none;
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-      }
-
-      .input-grid {
-        width: 54px;
-
-        input {
-          width: 100%;
+    gap: 15px;
+    padding-bottom: 15px;
+    &.border{
+        border-bottom: 1px solid #424242;
+    }
+}
+.grid-option-wrap{
+    .grid-option-box{
+        display: flex;
+        align-items: center;
+        background-color: transparent;
+        border: 1px solid #3D3D3D;
+        border-radius: 2px;
+        padding: 15px 10px;
+        gap: 20px;
+        margin-bottom: 10px;
+        .grid-input-form{
+            display: flex;
+            align-items: center;
+            span{
+                flex: none;
+                font-size: $pop-normal-size;
+                color: $pop-color;
+                font-weight: $pop-bold-weight;
+            }
+            .input-grid{
+                width: 54px;
+                input{
+                    width: 100%;
+                }
+            }
+        }
+        &:last-child{
+            margin-bottom: 0;
         }
-      }
     }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
 }
-
-.select-form {
-  .sort-select {
-    width: 100%;
-  }
+.select-form{
+    .sort-select{width: 100%;}
 }
-
-.grid-select {
-  flex: 1;
-
-  &.no-flx {
-    flex: unset;
-  }
-
-  .sort-select {
-    width: 100%;
-    background-color: #313131;
-    min-width: auto;
-    font-size: 12px;
-    border: none;
-
-    p {
-      font-size: 12px;
+.grid-select{
+    flex: 1;
+    &.no-flx{
+        flex: unset;
     }
-
-    > ul {
-      border: none;
+    .sort-select{
+        width: 100%;
+        background-color: #313131;
+        min-width: auto;
+        font-size: 12px;
+        border: none;
+        p{
+            font-size: 12px;
+        }
+        > ul{
+            border: none;
+        }
     }
-  }
-
-  &.right {
-    p {
-      text-align: right;
+    &.right{
+        p{
+            text-align: right;
+        }
+        ul{
+            li{
+                justify-content: flex-end;
+            }
+        }
     }
-
-    ul {
-      li {
-        justify-content: flex-end;
-      }
-    }
-  }
 }
-
-.grid-btn-wrap {
-  padding-top: 15px;
-  text-align: right;
-
-  button {
-    padding: 0 10px;
-  }
+.grid-btn-wrap{
+    padding-top: 15px;
+    text-align: right;
+    button{
+        padding: 0 10px;
+    }
 }
 
 // grid copy
-.grid-option-tit {
-  font-size: $pop-normal-size;
-  color: $pop-color;
-  font-weight: $pop-normal-weight;
-  padding-bottom: 15px;
+.grid-option-tit{
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-normal-weight;
+    padding-bottom: 15px;
 
 }
-
-.grid-direction {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  flex: 1;
+.grid-direction{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    flex: 1;
 }
-
-.direction {
-  width: 22px;
-  height: 22px;
-  background-color: #757575;
-  background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 16px 15px;
-  border-radius: 50%;
-  transition: all .15s ease-in-out;
-  opacity: 0.6;
-
-  &.down {
-    transform: rotate(180deg);
-  }
-
-  &.left {
-    transform: rotate(-90deg);
-  }
-
-  &.right {
-    transform: rotate(90deg);
-  }
-
-  &:hover,
-  &.act {
-    opacity: 1;
-  }
+.direction{
+    width: 22px;
+    height: 22px;
+    background-color: #757575;
+    background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 16px 15px;
+    border-radius: 50%;
+    transition: all .15s ease-in-out;
+    opacity: 0.6;
+    &.down{transform: rotate(180deg);}
+    &.left{transform: rotate(-90deg);}
+    &.right{transform: rotate(90deg);}
+    &:hover,
+    &.act{
+        opacity: 1;
+    }
 }
 
 // grid-move
-.move-form {
-  width: 100%;
-
-  p {
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-bold-weight;
-  }
-}
-
-.input-move-wrap {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-
-  span {
-    color: $pop-color;
-    font-size: $pop-normal-size;
-  }
-
-  .input-move {
-    width: 130px;
-
-    input {
-      width: 100%;
-    }
-  }
-}
-
-.direction-move-wrap {
-  flex: none;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 5px;
-  margin-left: auto;
-}
-
-// 배치면 초기 설정
-.placement-table {
-  table {
-    table-layout: fixed;
-
-    tr {
-      th {
-        display: flex;
-        align-items: center;
+.move-form{
+    width: 100%;
+    p{
         font-size: $pop-normal-size;
         color: $pop-color;
         font-weight: $pop-bold-weight;
-        padding: 18px 0;
-        border-bottom: 1px solid #424242;
-      }
-
-      td {
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        border-bottom: 1px solid #424242;
-        padding-left: 20px;
-        vertical-align: middle;
-
-        .flex-box {
-          display: flex;
-          align-items: center;
-          height: 100%;
-        }
-      }
-
-      &:first-child {
-        td,
-        th {
-          padding-top: 0;
-        }
-      }
     }
-  }
-
-  .tooltip {
-    position: relative;
-    display: block;
-    width: 15px;
-    height: 15px;
-    margin-left: 5px;
-    background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
-    background-size: cover;
-  }
-
-  &.light {
-    padding: 0;
-
-    th, td {
-      color: $alert-color;
-      border-bottom: none;
-      border-top: 1px solid #EFEFEF;
-    }
-
-    th {
-      padding: 14px 0;
-    }
-
-    tr {
-      &:first-child {
-        td,
-        th {
-          padding-top: 14px;
-        }
-      }
-
-      &:last-child {
-        td,
-        th {
-          padding-bottom: 0px;
-        }
-      }
-    }
-  }
 }
-
-.pop-form-radio {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.placement-option {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.select-wrap {
-  .sort-select {
-    width: 100%;
-  }
-}
-
-.flex-ment {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-
-  span {
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-normal-weight;
-  }
-}
-
-.img-edit-wrap {
-  flex: none;
-
-  .img-edit-btn {
+.input-move-wrap{
     display: flex;
     align-items: center;
-    height: 30px;
-    padding: 0 10px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #101010;
-    background-color: #fff;
-    border-radius: 2px;
-    cursor: pointer;
-    transition: all .15s ease-in-out;
-
-    .img-edit {
-      width: 16px;
-      height: 16px;
-      background: url(../../public/static/images/canvas/img_edit_ico.svg) no-repeat center;
-      background-size: cover;
-      margin-right: 5px;
+    gap: 5px;
+    span{
+        color: $pop-color;
+        font-size: $pop-normal-size;
     }
-
-    &:hover {
-      background-color: #ebebeb;
+    .input-move{
+        width: 130px;
+        input{
+            width: 100%;
+        }
     }
-  }
+}
+.direction-move-wrap{
+    flex: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 5px;
+    margin-left: auto;
 }
 
-.img-name-wrap {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-left: 10px;
+// 배치면 초기 설정
+.placement-table{
+    table{
+        table-layout: fixed;
+        tr{
+            th{
+                display: flex;
+                align-items: center;
+                font-size: $pop-normal-size;
+                color: $pop-color;
+                font-weight: $pop-bold-weight;
+                padding: 18px 0;
+                border-bottom: 1px solid #424242;
+            }
+            td{
+                font-size: $pop-normal-size;
+                color: $pop-color;
+                border-bottom: 1px solid #424242;
+                padding-left: 20px;
+                vertical-align: middle;
+                .flex-box{
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                }
+            }
+            &:first-child{
+                td,
+                th{
+                    padding-top: 0;
+                }
+            }
+        }
+    }
+    .tooltip{
+        position: relative;
+        display: block;
+        width: 15px;
+        height: 15px;
+        margin-left: 5px;
+        background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
+        background-size: cover;
+    }
+    &.light{
+        padding: 0;
+        th,td{
+            color: $alert-color;
+            border-bottom: none;
+            border-top: 1px solid #EFEFEF;
+        }
+        th{
+            padding: 14px 0;
+        }
+        tr{
+            &:first-child{
+                td,
+                th{
+                    padding-top: 14px;
+                }
+            }
+            &:last-child{
+                td,
+                th{
+                    padding-bottom: 0px;
+                }
+            }
+        }
+    }
+}
 
-  input {
-    flex: 1;
+.pop-form-radio{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.placement-option{
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+.select-wrap{
+    .sort-select{
+        width: 100%;
+    }
+}
+.flex-ment{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    span{
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-normal-weight;
+    }
+}
 
-  }
-
-  .img-check {
+.img-edit-wrap{
     flex: none;
-    width: 18px;
-    height: 18px;
-    margin-left: 5px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    background-image: url(../../public/static/images/canvas/img_check_fail.svg);
-  }
+    .img-edit-btn{
+        display: flex;
+        align-items: center;
+        height: 30px;
+        padding: 0 10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #101010;
+        background-color: #fff;
+        border-radius: 2px;
+        cursor: pointer;
+        transition: all .15s ease-in-out;
+        .img-edit{
+            width: 16px;
+            height: 16px;
+            background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center;
+            background-size: cover;
+            margin-right: 5px;
+        }
+        &:hover{
+            background-color: #ebebeb;
+        }
+    }
+}
+.img-name-wrap{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-left: 10px;
+    input{
+        flex: 1;
+
+    }
+    .img-check{
+        flex: none;
+        width: 18px;
+        height: 18px;
+        margin-left: 5px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+    }
 }
 
 // 외벽선 그리기
-.outline-wrap {
-  padding: 24px 0;
-  border-top: 1px solid #424242;
-
-  .outline-inner {
+.outline-wrap{
+    padding: 24px 0;
+    border-top: 1px solid #424242;
+    
+    .outline-inner{
+        display: flex;
+        align-items: center;
+        margin-bottom: 14px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+        .outline-form{
+            // width: 50%;
+            margin-right: 15px;
+        }
+    }
+    &:last-child{
+        border-bottom: 1px solid #424242;
+    }
+}
+.outline-form{
     display: flex;
     align-items: center;
-    margin-bottom: 14px;
-
-    &:last-child {
-      margin-bottom: 0;
+    
+    span{
+        width: 60px;
+        flex: none;
+        font-size: $pop-normal-size;
+        font-weight: $pop-bold-weight;
+        color: $pop-color;
+        margin-right: 10px;
+        &.thin{
+            width: auto;
+            font-weight: $pop-normal-weight;
+            margin-right: 0;
+        }
     }
 
-    .outline-form {
-      // width: 50%;
-      margin-right: 15px;
+    .reset-btn{
+        flex: none;
+        width: 30px;
+        height: 30px;
+        background: transparent;
+        border: 1px solid #484848;
+        border-radius: 2px;
+        margin-left: 5px;
+        background-image: url(../../public/static/images/canvas/reset_ico.svg);
+        background-repeat: no-repeat;
+        background-size: 12px 12px;
+        background-position: center;
+    }
+    &:last-child{
+        margin-right: 0;
     }
-  }
-
-  &:last-child {
-    border-bottom: 1px solid #424242;
-  }
 }
 
-.outline-form {
-  display: flex;
-  align-items: center;
-
-  span {
-    width: 60px;
-    flex: none;
-    font-size: $pop-normal-size;
-    font-weight: $pop-bold-weight;
-    color: $pop-color;
-    margin-right: 10px;
-
-    &.thin {
-      width: auto;
-      font-weight: $pop-normal-weight;
-      margin-right: 0;
-    }
-  }
-
-  .reset-btn {
-    flex: none;
-    width: 30px;
-    height: 30px;
-    background: transparent;
-    border: 1px solid #484848;
-    border-radius: 2px;
-    margin-left: 5px;
-    background-image: url(../../public/static/images/canvas/reset_ico.svg);
-    background-repeat: no-repeat;
-    background-size: 12px 12px;
-    background-position: center;
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-}
-
-.cul-wrap {
-  display: flex;
-
-  .outline-box {
-    width: 50%;
-    margin-right: 15px;
-
-    .outline-form {
-      width: 100%;
-      margin-bottom: 14px;
-      margin-right: 0;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .cul-box {
+.cul-wrap{
     display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50%;
-    background-color: #3D3D3D;
-    border-radius: 2px;
-  }
+    .outline-box{
+        width: 50%;
+        margin-right: 15px;
+        .outline-form{
+            width: 100%;
+            margin-bottom: 14px;
+            margin-right: 0;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+    }
+    .cul-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50%;
+        background-color: #3D3D3D;
+        border-radius: 2px ;
+    }
 }
 
 // 외벽선 속성 설정
-.properties-guide {
-  font-size: $pop-normal-size;
-  color: #AAA;
-  font-weight: $pop-normal-weight;
-  margin-bottom: 14px;
+.properties-guide{
+    font-size: $pop-normal-size;
+    color: #AAA;
+    font-weight: $pop-normal-weight;
+    margin-bottom: 14px;
 }
 
-.setting-tit {
-  font-size: 13px;
-  color: $pop-color;
-  font-weight: $pop-bold-weight;
-  margin-bottom: 10px;
+.setting-tit{
+    font-size: 13px;
+    color: $pop-color;
+    font-weight: $pop-bold-weight;
+    margin-bottom: 10px;
 }
-
-.properties-setting-wrap {
-  &.outer {
-    margin-top: 24px;
-  }
-
-  .setting-btn-wrap {
-    display: flex;
-    align-items: center;
-    padding: 14px 0;
-    border-top: 1px solid #424242;
-    border-bottom: 1px solid #424242;
-
-    .setting-btn {
-      display: block;
-      width: 100%;
-      height: 40px;
-      font-size: 13px;
-      color: #fff;
-      font-weight: 700;
-      border-radius: 2px;
-      transition: all .15s ease-in-out;
-
-      &.green {
-        background-color: #305941;
-        border: 1px solid #45CD7D;
-
-        &:hover {
-          background-color: #3a6b4e;
-        }
-      }
-
-      &.blue {
-        background-color: #2E5360;
-        border: 1px solid #3FBAE6;
-
-        &:hover {
-          background-color: #365f6e;
-        }
-      }
+.properties-setting-wrap{
+    &.outer{
+        margin-top: 24px;
+    }
+    .setting-btn-wrap{
+        display: flex;
+        align-items: center;
+        padding: 14px 0;
+        border-top: 1px solid #424242;
+        border-bottom: 1px solid #424242;
+        .setting-btn{
+            display: block;
+            width: 100%;
+            height: 40px;
+            font-size: 13px;
+            color: #fff;
+            font-weight: 700;
+            border-radius: 2px;
+            transition: all .15s ease-in-out;
+            &.green{
+                background-color: #305941;
+                border: 1px solid #45CD7D;
+                &:hover{
+                    background-color: #3a6b4e;
+                }
+            }
+            &.blue{
+                background-color: #2E5360;
+                border: 1px solid #3FBAE6;
+                &:hover{
+                    background-color: #365f6e;
+                }
+            }
+        }
     }
-  }
 }
 
 // 지붕형상 설정
-.roof-shape-menu {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  gap: 24px 10px;
-  margin-bottom: 24px;
-
-  .shape-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    padding: 13px;
-    background-color: #3D3D3D;
-    transition: background .15s ease-in-out;
-
-    img {
-      max-width: 100%;
-    }
-  }
-
-  .shape-title {
-    font-size: $pop-normal-size;
-    font-weight: $pop-bold-weight;
-    color: $pop-color;
-    margin-top: 10px;
-    text-align: center;
-    transition: color .15s ease-in-out;
-  }
-
-  .shape-menu-box {
-    &.act,
-    &:hover {
-      .shape-box {
-        background-color: #008BFF;
-      }
-
-      .shape-title {
-        color: #008BFF;
-      }
-    }
-  }
-}
-
-.setting-box {
-  padding: 14px 0;
-  border-top: 1px solid #424242;
-  border-bottom: 1px solid #424242;
-}
-
-.padding-form {
-  padding-left: 23px;
-}
-
-.discrimination-box {
-  padding: 16px 12px;
-  border: 1px solid #3D3D3D;
-  border-radius: 2px;
-}
-
-.modal-bottom-border-bx {
-  margin-top: 24px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid #424242;
-}
-
-// 처마∙케라바 변경
-.eaves-keraba-table {
-  display: table;
-  border-collapse: collapse;
-
-  .eaves-keraba-item {
-    display: table-row;
-
-    .eaves-keraba-th,
-    .eaves-keraba-td {
-      font-size: $pop-normal-size;
-      color: $pop-color;
-      font-weight: $pop-normal-weight;
-      display: table-cell;
-      vertical-align: middle;
-      padding-bottom: 14px;
-    }
-
-    .eaves-keraba-td {
-      padding-left: 10px;
-    }
-
-    .eaves-keraba-ico {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 5px;
-      background-color: #3D3D3D;
-      border: 1px solid #3D3D3D;
-      border-radius: 2px;
-      cursor: pointer;
-
-      &.act {
-        border: 1px solid #ED0004;
-      }
-    }
-
-    &:last-child {
-      .eaves-keraba-th,
-      .eaves-keraba-td {
-        padding-bottom: 0;
-      }
-    }
-  }
-}
-
-.guide {
-  font-size: $pop-normal-size;
-  font-weight: $pop-normal-weight;
-  color: $pop-color;
-  margin-bottom: 24px;
-
-  &.sm {
-    margin-bottom: 15px;
-  }
-
-  span {
-    display: block;
-  }
-}
-
-// 지붕면 할당
-.allocation-select-wrap {
-  display: flex;
-  align-items: center;
-  padding-bottom: 14px;
-  border-bottom: 1px solid #424242;
-  margin-bottom: 14px;
-
-  span {
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-bold-weight;
-    margin-right: 10px;
-  }
-
-  .allocation-edit {
-    display: flex;
-    align-items: center;
-    height: 30px;
-    padding: 0 10px;
-    margin-left: 5px;
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-normal-weight;
-    border: 1px solid #484848;
-    background-color: #323234;
-
-    i {
-      display: block;
-      width: 12px;
-      height: 12px;
-      margin-right: 5px;
-      background: url(../../public/static/images/canvas/allocation_edit.svg) no-repeat center;
-      background-size: cover;
-    }
-  }
-}
-
-.block-box {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
-
-  .flex-ment {
-    gap: 10px;
-
-    .dec {
-      text-decoration: underline;
-    }
-
-    .delete {
-      display: block;
-      width: 15px;
-      height: 15px;
-      background: url(../../public/static/images/canvas/allocation_delete.svg) no-repeat center;
-      background-size: cover;
-    }
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.icon-btn-wrap {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-
-  button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 30px;
-    font-size: $pop-normal-size;
-    font-weight: $pop-normal-weight;
-    color: $pop-color;
-    border: 1px solid #646464;
-    border-radius: 2px;
-    padding: 0 10px;
-    transition: all .15s ease-in-out;
-
-    i {
-      height: 15px;
-      display: block;
-      margin-left: 10px;
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: cover;
-      transition: all .15s ease-in-out;
-
-      &.allocation01 {
-        background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
-        width: 15px;
-      }
-
-      &.allocation02 {
-        background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
-        width: 18px;
-      }
-    }
-
-    &.act,
-    &:hover {
-      color: #101010;
-      border: 1px solid #101010;
-      background-color: #fff;
-
-      i {
-        &.allocation01 {
-          background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
-        }
-
-        &.allocation02 {
-          background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
-        }
-      }
-    }
-  }
-}
-
-// 경사설정
-.slope-wrap {
-  padding-bottom: 24px;
-  border-bottom: 1px solid #424242;
-}
-
-// 면형상 배치
-.plane-frame-wrap {
-  display: flex;
-  gap: 10px;
-
-  .plane-shape-wrap {
-    flex: none;
-    width: 73px;
-  }
-}
-
-.plane-shape-menu {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 5px;
-
-  .shape-menu-box {
-    border-radius: 2px;
-    width: 34px;
-    height: 34px;
-    background-color: #373737;
-    border: 1px solid #676767;
-    transition: background .15s ease-in-out, border .15s ease-in-out;
-
-    .shape-box {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      border-radius: 2px;
-    }
-
-    &.act,
-    &:hover {
-      border-color: #008BFF;
-      background-color: #008BFF;
-    }
-  }
-}
-
-.shape-library {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  padding-top: 5px;
-
-  .library-btn {
-    width: 100%;
-    height: 34px;
-    border: 1px solid #6C6C6C;
-    border-radius: 2px;
-    background-color: #373737;
-    background-repeat: no-repeat;
-    background-position: center;
-    transition: all .15s ease-in-out;
-
-    &.ico01 {
-      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
-      background-size: 19px 18px;
-    }
-
-    &.ico02 {
-      background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
-      background-size: 15px 20px;
-    }
-
-    &.ico03 {
-      background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
-      background-size: 19px 16px;
-    }
-
-    &:hover {
-      border-color: #1083E3;
-      background-color: #1083E3;
-    }
-  }
-}
-
-.plane-detail-wrap {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.plane-shape-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  .plane-box {
-    width: 100%;
-    padding: 10px 18px;
-    border-radius: 2px;
-    background-color: #313131;
-    border: 1px solid #484848;
-
-    .plane-box-tit {
-      font-size: $pop-normal-size;
-      font-weight: 600;
-      color: $pop-color;
-      margin-bottom: 10px;
-    }
-
-    &.shape-box {
-      .shape-box-inner {
-        display: flex;
-        gap: 15px;
-        min-height: 140px;
-
-        .shape-img {
-          position: relative;
-          flex: none;
-          width: 150px;
-          background-color: #fff;
-          border-radius: 2px;
-
-          img {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-          }
-        }
-
-        .shape-data {
-          flex: 1;
-
-          .eaves-keraba-table {
-            .eaves-keraba-item {
-              .eaves-keraba-th,
-              .eaves-keraba-td {
-                padding-bottom: 10px;
-              }
-
-              &:last-child {
-                .eaves-keraba-th,
-                .eaves-keraba-td {
-                  padding-bottom: 0px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &.direction-box {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-
-      .plane-direction-box {
-        flex: 1;
+.roof-shape-menu{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 24px 10px;
+    margin-bottom: 24px;
+    .shape-box{
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
-      }
+        padding: 13px;
+        background-color: #3D3D3D;
+        transition: background .15s ease-in-out;
+        img{
+            max-width: 100%;
+        }
+    }
+    .shape-title{
+        font-size: $pop-normal-size;
+        font-weight: $pop-bold-weight;
+        color: $pop-color;
+        margin-top: 10px;
+        text-align: center;
+        transition: color .15s ease-in-out;
+    }
+    .shape-menu-box{
+        &.act,
+        &:hover{
+            .shape-box{background-color: #008BFF;}
+            .shape-title{color: #008BFF;}
+        }
     }
-  }
 }
 
-.plane-direction {
-  width: 150px;
-  position: relative;
-  height: 120px;
-
-  span {
-    position: absolute;
-    font-size: 12px;
-    font-weight: 500;
-    color: #B1B1B1;
-
-    &.top {
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &.right {
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-    }
-
-    &.bottom {
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &.left {
-      top: 50%;
-      left: 0;
-      transform: translateY(-50%);
-    }
-  }
-
-  .plane-btn {
-    position: absolute;
-    width: 28px;
-    height: 28px;
-    background-color: #777777;
-    background-image: url(../../public/static/images/canvas/plane_arr.svg);
-    background-size: 12px 13px;
-    background-repeat: no-repeat;
-    background-position: center;
-    border-radius: 50%;
-    transition: all .15s ease-in-out;
-
-    &.up {
-      top: 22px;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &.right {
-      top: 50%;
-      right: 32px;
-      transform: translateY(-50%) rotate(90deg);
-    }
-
-    &.down {
-      bottom: 22px;
-      left: 50%;
-      transform: translateX(-50%) rotate(180deg);
-    }
-
-    &.left {
-      top: 50%;
-      left: 32px;
-      transform: translateY(-50%) rotate(270deg);
-    }
-
-    &:hover,
-    &.act {
-      background-color: #fff;
-      background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
-    }
-  }
+.setting-box{
+    padding: 14px 0;
+    border-top: 1px solid #424242;
+    border-bottom: 1px solid #424242;
+}
+.padding-form{
+    padding-left: 23px;
+}
+.discrimination-box{
+    padding: 16px 12px;
+    border: 1px solid #3D3D3D;
+    border-radius: 2px;
 }
 
-.plane-tab-guide {
-  font-size: $pop-normal-size;
-  font-weight: $pop-normal-weight;
-  color: $pop-color;
-  margin-top: 10px;
+.modal-bottom-border-bx{
+    margin-top: 24px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #424242;
 }
 
-.plane-shape-btn {
-  padding-top: 10px;
-  margin-top: auto;
-
-  button {
-    display: block;
-    width: 100%;
-  }
-}
-
-// 오브젝트 배치
-.mb-box {
-  margin-bottom: 24px;
-}
-
-.object-direction-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.discrimination-tit {
-  font-size: 13px;
-  color: #fff;
-  font-weight: 500;
-}
-
-.object-size-wrap {
-  display: flex;
-  min-height: 206px;
-  gap: 24px;
-  margin-top: 14px;
-
-  .object-size-img {
-    position: relative;
-    flex: none;
-    width: 200px;
-    background-color: #fff;
-
-    img {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+// 처마∙케라바 변경
+.eaves-keraba-table{
+    display: table;
+    border-collapse: collapse;
+    .eaves-keraba-item{
+        display: table-row;
+        .eaves-keraba-th,
+        .eaves-keraba-td{
+            font-size: $pop-normal-size;
+            color: $pop-color;
+            font-weight: $pop-normal-weight;
+            display: table-cell;
+            vertical-align: middle;
+            padding-bottom: 14px;
+        }
+        .eaves-keraba-td{
+            padding-left: 10px;
+        }
+        .eaves-keraba-ico{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 5px;
+            background-color: #3D3D3D;
+            border: 1px solid #3D3D3D;
+            border-radius: 2px;
+            cursor: pointer;
+            &.act{
+                border: 1px solid #ED0004;
+            }
+        }
+        &:last-child{
+            .eaves-keraba-th,
+            .eaves-keraba-td{
+                padding-bottom: 0;
+            }
+        }
+    }
+}
+.guide{
+    font-size: $pop-normal-size;
+    font-weight: $pop-normal-weight;
+    color: $pop-color;
+    margin-bottom: 24px;
+    &.sm{
+        margin-bottom: 15px;
+    }
+    span{
+        display: block;
     }
-  }
 }
 
-// 표시변경
-.display-change-wrap {
-  margin: 24px 0;
+// 지붕면 할당
+.allocation-select-wrap{
+    display: flex;
+    align-items: center;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #424242;
+    margin-bottom: 14px;
+    span{
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-bold-weight;
+        margin-right: 10px;
+    }
+    .allocation-edit{
+        display: flex;
+        align-items: center;
+        height: 30px;
+        padding: 0 10px;
+        margin-left: 5px;
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-normal-weight;
+        border: 1px solid #484848;
+        background-color: #323234;
+        i{
+            display: block;
+            width: 12px;
+            height: 12px;
+            margin-right: 5px;
+            background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center;
+            background-size: cover;
+        }
+    }
 }
 
-.warning {
-  font-size: $pop-normal-size;
-  font-weight: $pop-normal-weight;
-  color: #FFAFAF;
+.block-box{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+    .flex-ment{
+        gap: 10px;
+        .dec{
+            text-decoration: underline;
+        }
+        .delete{
+            display: block;
+            width: 15px;
+            height: 15px;
+            background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center;
+            background-size: cover;
+        }
+    }
+    &:last-child{
+        margin-bottom: 0;
+    }
 }
 
-// 각 변 속성 변경
-.radio-grid-wrap {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px 15px;
+.icon-btn-wrap{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    button{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 30px;
+        font-size: $pop-normal-size;
+        font-weight: $pop-normal-weight;
+        color: $pop-color;
+        border: 1px solid #646464;
+        border-radius: 2px;
+        padding: 0 10px;
+        transition: all .15s ease-in-out;
+        i{
+            height: 15px;
+            display: block;
+            margin-left: 10px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+            transition: all .15s ease-in-out;
+            &.allocation01{
+                background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
+                width: 15px;
+            }
+            &.allocation02{
+                background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
+                width: 18px;
+            }
+        }
+        &.act,
+        &:hover{
+            color: #101010;
+            border: 1px solid #101010;
+            background-color: #fff;
+            i{
+                &.allocation01{
+                    background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
+                }
+                &.allocation02{
+                    background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
+                }
+            }
+        }
+    }
 }
 
-// 면 흐름 설정
-.drawing-flow-wrap {
-  display: flex;
-  gap: 10px;
+// 경사설정
+.slope-wrap{
+    padding-bottom: 24px;
+    border-bottom: 1px solid #424242;
+}
 
-  .discrimination-box {
+// 면형상 배치
+.plane-frame-wrap{
+    display: flex;
+    gap: 10px;
+    .plane-shape-wrap{
+        flex: none;
+        width: 73px;
+    }
+}
+
+.plane-shape-menu{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 5px;
+    .shape-menu-box{
+        border-radius: 2px;
+        width: 34px;
+        height: 34px;
+        background-color: #373737;
+        border: 1px solid #676767;
+        transition: background .15s ease-in-out, border .15s ease-in-out;
+        .shape-box{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            width: 100%;
+            height: 100%;
+            border-radius: 2px;
+        }
+        &.act,
+        &:hover{
+            border-color: #008BFF;
+            background-color: #008BFF;
+        }
+    }
+}
+
+.shape-library{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    padding-top: 5px;
+    .library-btn{
+        width: 100%;
+        height: 34px;
+        border: 1px solid #6C6C6C;
+        border-radius: 2px;
+        background-color: #373737;
+        background-repeat: no-repeat;
+        background-position: center;
+        transition: all .15s ease-in-out;
+        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
+        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
+        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
+        &:hover{
+            border-color: #1083E3;
+            background-color: #1083E3;
+        }
+    }
+}
+
+.plane-detail-wrap{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.plane-shape-wrapper{
     flex: 1;
     display: flex;
     flex-direction: column;
-
-    .object-direction-wrap {
-      flex: 1;
+    gap: 10px;
+    .plane-box{
+        width: 100%;
+        padding: 10px 18px;
+        border-radius: 2px;
+        background-color: #313131;
+        border: 1px solid #484848;
+        .plane-box-tit{
+            font-size: $pop-normal-size;
+            font-weight: 600;
+            color: $pop-color;
+            margin-bottom: 10px;
+        }
+        &.shape-box{
+            .shape-box-inner{
+                display: flex;
+                gap:15px;
+                min-height: 140px;
+                .shape-img{
+                    position: relative;
+                    flex: none;
+                    width: 150px;
+                    background-color: #fff;
+                    border-radius: 2px;
+                    img{
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+                }
+                .shape-data{
+                    flex: 1;
+                    .eaves-keraba-table{
+                        .eaves-keraba-item{
+                            .eaves-keraba-th,
+                            .eaves-keraba-td{
+                                padding-bottom: 10px;
+                            }
+                            &:last-child{
+                                .eaves-keraba-th,
+                                .eaves-keraba-td{
+                                    padding-bottom: 0px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &.direction-box{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            .plane-direction-box{
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+            }
+        }
+    }
+}
+.plane-direction{
+    width: 150px;
+    position: relative;
+    height: 120px;
+    span{
+        position: absolute;
+        font-size: 12px;
+        font-weight: 500;
+        color: #B1B1B1;
+        &.top{top: 0; left: 50%; transform: translateX(-50%);}
+        &.right{top: 50%; right: 0; transform: translateY(-50%);}
+        &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
+        &.left{top: 50%; left: 0; transform: translateY(-50%);}
+    }
+    .plane-btn{
+        position: absolute;
+        width: 28px;
+        height: 28px;
+        background-color: #777777;
+        background-image: url(../../public/static/images/canvas/plane_arr.svg);
+        background-size: 12px 13px;
+        background-repeat: no-repeat;
+        background-position: center;
+        border-radius: 50%;
+        transition: all .15s ease-in-out;
+        &.up{top: 22px; left: 50%; transform: translateX(-50%);}
+        &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
+        &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
+        &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
+        &:hover,
+        &.act{
+            background-color: #fff;
+            background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
+        }
     }
-  }
 }
 
-.compas-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.plane-tab-guide{
+    font-size: $pop-normal-size;
+    font-weight: $pop-normal-weight;
+    color: $pop-color;
+    margin-top: 10px;
+}
+.plane-shape-btn{
+    padding-top: 10px;
+    margin-top: auto;
+    button{
+        display: block;
+        width: 100%;
+    }
 }
 
+// 오브젝트 배치
+.mb-box{
+    margin-bottom: 24px;
+}
+
+.object-direction-wrap{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.discrimination-tit{
+    font-size: 13px;
+    color: #fff;
+    font-weight: 500;
+}
+
+.object-size-wrap{
+    display: flex;
+    min-height: 206px;
+    gap: 24px;
+    margin-top: 14px;
+    .object-size-img{
+        position: relative;
+        flex: none;
+        width: 200px;
+        background-color: #fff;
+        img{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}
+
+// 표시변경
+.display-change-wrap{
+    margin: 24px 0;
+}
+.warning{
+    font-size: $pop-normal-size;
+    font-weight: $pop-normal-weight;
+    color: #FFAFAF;
+}
+
+// 각 변 속성 변경
+.radio-grid-wrap{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px 15px;
+}
+
+// 면 흐름 설정
+.drawing-flow-wrap{
+    display: flex;
+    gap: 10px;
+    .discrimination-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .object-direction-wrap{
+            flex: 1;
+        }
+    }
+}
+
+.compas-box{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 .compas-box-inner {
-  position: relative;
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
-
-  .circle {
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    border: 1px solid #fff;
+    position: relative;
+    width: 200px;
+    height: 200px;
     border-radius: 50%;
-    top: 95%;
-    left: 50%;
-    transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
-    cursor: pointer;
-    z-index: 3;
-    /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
-    i {
-      position: absolute;
-      top: 12.5px;
-      left: 50%;
-      font-size: 11px;
-      color: #8B8B8B;
-      font-weight: 500;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-use-select: none;
-      user-select: none;
+    
+    .circle {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        top: 95%;
+        left: 50%;
+        transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+        cursor:pointer;
+        z-index: 3;
+        /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
+        i{
+            position: absolute;
+            top: 12.5px;
+            left: 50%;
+            font-size: 11px;
+            color: #8B8B8B;
+            font-weight: 500;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-use-select: none;
+            user-select: none;
+        }
+        &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
+        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
+        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
+        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
+        &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
+        &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
+        &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
+        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
+        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
+        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
+        &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
+        &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
+        &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
+        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
+        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
+        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
+        &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
+        &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
+        &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
+        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
+        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
+        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
+        &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
+        &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
+        &.act{
+            &::after{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 5px;
+                height: 5px;
+                background-color: #fff;
+            }
+            i{
+                color: #fff;
+            }
+        }
     }
-
-    &:nth-child(1) {
-      transform: rotate(180deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(180deg);
-      }
-    }
-
-    &:nth-child(2) {
-      transform: rotate(195deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(165deg);
-      }
-    }
-
-    &:nth-child(3) {
-      transform: rotate(210deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(150deg);
-      }
-    }
-
-    &:nth-child(4) {
-      transform: rotate(225deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(135deg);
-      }
-    }
-
-    &:nth-child(5) {
-      transform: rotate(240deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(120deg);
-      }
-    }
-
-    &:nth-child(6) {
-      transform: rotate(255deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(105deg);
-      }
-    }
-
-    &:nth-child(7) {
-      transform: rotate(270deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(90deg);
-      }
-    }
-
-    &:nth-child(8) {
-      transform: rotate(285deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(75deg);
-      }
-    }
-
-    &:nth-child(9) {
-      transform: rotate(300deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(60deg);
-      }
-    }
-
-    &:nth-child(10) {
-      transform: rotate(315deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(45deg);
-      }
-    }
-
-    &:nth-child(11) {
-      transform: rotate(330deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(30deg);
-      }
-    }
-
-    &:nth-child(12) {
-      transform: rotate(345deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(15deg);
-      }
-    }
-
-    &:nth-child(13) {
-      transform: rotate(0deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(0deg);
-      }
-    }
-
-    &:nth-child(14) {
-      transform: rotate(15deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(-15deg);
-      }
-    }
-
-    &:nth-child(15) {
-      transform: rotate(30deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(-30deg);
-      }
-    }
-
-    &:nth-child(16) {
-      transform: rotate(45deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(-45deg);
-      }
-    }
-
-    &:nth-child(17) {
-      transform: rotate(60deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(-60deg);
-      }
-    }
-
-    &:nth-child(18) {
-      transform: rotate(75deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(-75deg);
-      }
-    }
-
-    &:nth-child(19) {
-      transform: rotate(90deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(-90deg);
-      }
-    }
-
-    &:nth-child(20) {
-      transform: rotate(105deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(-105deg);
-      }
-    }
-
-    &:nth-child(21) {
-      transform: rotate(120deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(-120deg);
-      }
-    }
-
-    &:nth-child(22) {
-      transform: rotate(135deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(-135deg);
-      }
-    }
-
-    &:nth-child(23) {
-      transform: rotate(150deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(-150deg);
-      }
-    }
-
-    &:nth-child(24) {
-      transform: rotate(165deg) translate(-50%, -50%);
-
-      i {
-        transform: translateX(-50%) rotate(-165deg);
-      }
-    }
-
-    &.act {
-      &::after {
-        content: '';
+    .compas{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 5px;
-        height: 5px;
-        background-color: #fff;
-      }
-
-      i {
-        color: #fff;
-      }
+        width: 148px;
+        height: 148px;
+        border: 4px solid #fff;
+        border-radius: 50%;
+        .compas-arr{
+            width: 100%;
+            height: 100%;
+            background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
+            background-size: 122px 122px;
+        }
     }
-  }
-
-  .compas {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 148px;
-    height: 148px;
-    border: 4px solid #fff;
-    border-radius: 50%;
-
-    .compas-arr {
-      width: 100%;
-      height: 100%;
-      background: url(../../public/static/images/canvas/compas.svg) no-repeat center;
-      background-size: 122px 122px;
-    }
-  }
 }
 
 
 // 지붕모듈선택
-.roof-module-tab {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 14px;
+.roof-module-tab{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 14px;
+    .module-tab-bx{
+        flex: 1;
+        height: 34px;
+        line-height: 31px;
+        border: 1px solid #484848;
+        border-radius: 2px;
+        background-color: transparent;
+        font-size: 12px;
+        color: #AAA;
+        text-align: center;
+        cursor: default;
+        transition: all .15s ease-in-out;
+        &.act{
+            background-color: #1083E3;
+            border: 1px solid #1083E3;
+            color: #fff;
+            font-weight: 500;
+        }
+    }
+    .tab-arr{
+        display: block;
+        width: 9px;
+        height: 14px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
+        transition: all .15s ease-in-out;
+        &.act{
+            background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
+        }
+    }
+}
 
-  .module-tab-bx {
+.roof-module-compas{
+    margin-bottom: 24px;
+    .compas-box-inner{
+        width: 280px;
+        height: 253px;
+        .circle{
+            top: 86%;
+            &:nth-child(1),
+            &:nth-child(7),
+            &:nth-child(13),
+            &:nth-child(19){
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 20px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    width: 1px;
+                    height: 6px;
+                    background-color: #8B8B8B;
+                }
+            }
+            i{
+                top: 32px;
+            }
+            &.act{
+                i{color: #8B8B8B;}
+            }
+        }
+    }
+}
+.center-wrap{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.module-table-flex-wrap{
+    display: flex;
+    gap: 10px;
+    .outline-form{
+        flex: 1;
+    }
+}
+
+.module-box-tab{
+    display: flex;
+    .module-btn{
+        flex: 1;
+        border-top: 1px solid #505050;
+        border-bottom: 1px solid #505050;
+        border-right: 1px solid #505050;
+        background-color: #454545;
+        color: #fff;
+        height: 30px;
+        font-size: 12px;
+        font-weight: 400;
+        transition: all .15s ease-in-out;
+        &:first-child{
+            border-left: 1px solid #505050;
+        }
+        &.act{
+            border-color: #fff;
+            background-color: #fff;
+            color: #101010;
+        }
+    }
+}
+
+.module-table-box{
     flex: 1;
-    height: 34px;
-    line-height: 31px;
-    border: 1px solid #484848;
+    background-color: #3D3D3D;
     border-radius: 2px;
-    background-color: transparent;
-    font-size: 12px;
-    color: #AAA;
-    text-align: center;
-    cursor: default;
-    transition: all .15s ease-in-out;
-
-    &.act {
-      background-color: #1083E3;
-      border: 1px solid #1083E3;
-      color: #fff;
-      font-weight: 500;
-    }
-  }
-
-  .tab-arr {
-    display: block;
-    width: 9px;
-    height: 14px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-    transition: all .15s ease-in-out;
-
-    &.act {
-      background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
-    }
-  }
-}
-
-.roof-module-compas {
-  margin-bottom: 24px;
-
-  .compas-box-inner {
-    width: 280px;
-    height: 253px;
-
-    .circle {
-      top: 86%;
-
-      &:nth-child(1),
-      &:nth-child(7),
-      &:nth-child(13),
-      &:nth-child(19) {
-        &::before {
-          content: '';
-          position: absolute;
-          top: 20px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 1px;
-          height: 6px;
-          background-color: #8B8B8B;
+    .module-table-inner{
+        padding: 10px;
+        .outline-form{
+            span{
+                width: auto;
+            }
         }
-      }
-
-      i {
-        top: 32px;
-      }
-
-      &.act {
-        i {
-          color: #8B8B8B;
+        .module-table-tit{
+            padding: 10px 0;
+            font-size: 12px;
+            color: #fff;
+            border-bottom: 1px solid #4D4D4D;
+        }
+        .eaves-keraba-table{
+            width: 100%;
+            margin-top: 15px;
+            .eaves-keraba-th{
+                width: 72px;
+            }
+            .eaves-keraba-th,
+            .eaves-keraba-td{
+                padding-bottom: 5px;
+            }
+        }
+        .self-table-tit{
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+            padding-bottom: 15px;
+        }
+    }
+    .warning-guide{
+        padding: 20px;
+        .warning{
+            color: #FFCACA;
+            max-height: 55px;
+            overflow-y: auto;
+            padding-right: 30px;
+            &::-webkit-scrollbar {
+                width: 4px;
+                background-color: transparent;
+            }
+            &::-webkit-scrollbar-thumb {
+                background-color: #D9D9D9;
+            }
+            &::-webkit-scrollbar-track {
+                background-color: transparent;
+            }
         }
-      }
     }
-  }
 }
 
-.center-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
+.module-self-table{
+    display: table;
+    border-top: 1px solid #4D4D4D;
+    border-collapse: collapse;
+    width: 100%;
+    .self-table-item{
+        display: table-row;
+        .self-item-td,
+        .self-item-th{
+            display: table-cell;
+            vertical-align: middle;
+            border-bottom: 1px solid #4D4D4D;
+        }
+        .self-item-th{
+            width: 60px;
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+        }
+        .self-item-td{
+            font-size: 12px;
+            font-weight: 400;
+            color: #fff;
+            padding: 15px 20px;
+        }
+    }
 }
 
-.module-table-flex-wrap {
-  display: flex;
-  gap: 10px;
-
-  .outline-form {
-    flex: 1;
-  }
-}
-
-.module-box-tab {
-  display: flex;
-
-  .module-btn {
-    flex: 1;
-    border-top: 1px solid #505050;
-    border-bottom: 1px solid #505050;
-    border-right: 1px solid #505050;
-    background-color: #454545;
-    color: #fff;
-    height: 30px;
-    font-size: 12px;
-    font-weight: 400;
-    transition: all .15s ease-in-out;
-
-    &:first-child {
-      border-left: 1px solid #505050;
-    }
-
-    &.act {
-      border-color: #fff;
-      background-color: #fff;
-      color: #101010;
-    }
-  }
-}
-
-.module-table-box {
-  flex: 1;
-  background-color: #3D3D3D;
-  border-radius: 2px;
-
-  .module-table-inner {
-    padding: 10px;
-
-    .outline-form {
-      span {
-        width: auto;
-      }
-    }
-
-    .module-table-tit {
-      padding: 10px 0;
-      font-size: 12px;
-      color: #fff;
-      border-bottom: 1px solid #4D4D4D;
-    }
-
-    .eaves-keraba-table {
-      width: 100%;
-      margin-top: 15px;
-
-      .eaves-keraba-th {
-        width: 72px;
-      }
-
-      .eaves-keraba-th,
-      .eaves-keraba-td {
-        padding-bottom: 5px;
-      }
-    }
-
-    .self-table-tit {
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-      padding-bottom: 15px;
-    }
-  }
-
-  .warning-guide {
-    padding: 20px;
-
-    .warning {
-      color: #FFCACA;
-      max-height: 55px;
-      overflow-y: auto;
-      padding-right: 30px;
-
-      &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
-      }
-
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
-    }
-  }
-}
-
-.module-self-table {
-  display: table;
-  border-top: 1px solid #4D4D4D;
-  border-collapse: collapse;
-  width: 100%;
-
-  .self-table-item {
-    display: table-row;
-
-    .self-item-td,
-    .self-item-th {
-      display: table-cell;
-      vertical-align: middle;
-      border-bottom: 1px solid #4D4D4D;
-    }
-
-    .self-item-th {
-      width: 60px;
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-    }
-
-    .self-item-td {
-      font-size: 12px;
-      font-weight: 400;
-      color: #fff;
-      padding: 15px 20px;
-    }
-  }
-}
-
-.self-table-flx {
-  display: flex;
-  align-items: center;
-  margin-top: 15px;
-
-  button {
-    margin-left: auto;
-  }
-}
-
-.hexagonal-wrap {
-  .hexagonal-item {
-    padding: 15px 0;
-    border-bottom: 1px solid #4D4D4D;
-
-    &:first-child {
-      padding-top: 0;
-    }
-
-    &:last-child {
-      padding-bottom: 0;
-      border: none;
-    }
-
-    .hexagonal-flx-auto {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .hexagonal-flx {
-      display: flex;
-      align-items: center;
-
-      button {
+.self-table-flx{
+    display: flex;
+    align-items: center;
+    margin-top: 15px;
+    button{
         margin-left: auto;
-      }
     }
-  }
+}
+.hexagonal-wrap{
+    .hexagonal-item{
+        padding: 15px 0;
+        border-bottom: 1px solid #4D4D4D;
+        &:first-child{
+            padding-top: 0;
+        }
+        &:last-child{
+            padding-bottom: 0;
+            border: none;
+        }
+        .hexagonal-flx-auto{
+            display: flex;
+            justify-content: space-between;
+        }
+        .hexagonal-flx{
+            display: flex;
+            align-items: center;
+            button{
+                margin-left: auto;
+            }
+        }
+    }
 }
 
 // 회로 및 가대설정
-.circuit-check-inner {
-  padding: 5px 0;
+.circuit-check-inner{
+    padding: 5px 0;
 }
 
-.x-scroll-table {
-  overflow-x: auto;
-  padding-bottom: 5px;
-
-  .roof-module-table {
-    min-width: 1200px;
-  }
-
-  &::-webkit-scrollbar {
-    height: 4px;
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #D9D9D9;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
-
-.circuit-right-wrap {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.circuit-data-form {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  min-height: 60px;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.20);
-
-  span {
-    display: inline-flex;
-    align-items: center;
-
-    .del {
-      display: block;
-      margin-left: 10px;
-      width: 15px;
-      height: 15px;
-      background: url(../../public/static/images/canvas/circuit_del.svg) no-repeat center;
-      background-size: cover;
+.x-scroll-table{
+    overflow-x: auto;
+    padding-bottom: 5px;
+    .roof-module-table{
+        min-width: 1200px;
+    }
+    &::-webkit-scrollbar {
+        height: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #D9D9D9;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
     }
-  }
 }
 
-.circuit-table-tit {
-  color: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 11px 10px;
-  background-color: #474747;
-  border: 1px solid #505050;
-  border-bottom: none;
+.circuit-right-wrap{
+    display: flex;
+    justify-content: flex-end;
 }
 
-.circuit-overflow {
-  max-height: 400px;
-  overflow-y: auto;
-  margin-bottom: 15px;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #D9D9D9;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
-
-.circuit-table-flx-wrap {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 10px;
-
-  .circuit-table-flx-box {
-    flex: 1;
+.circuit-data-form{
     display: flex;
     flex-direction: column;
-
-    .bottom-wrap {
-      margin-top: auto;
+    gap: 5px;
+    min-height: 60px;
+    padding: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    span{
+        display: inline-flex;
+        align-items: center;
+        .del{
+            display: block;
+            margin-left: 10px;
+            width: 15px;
+            height: 15px;
+            background: url(../../public/static/images/canvas/circuit_del.svg)no-repeat center;
+            background-size: cover;
+        }
     }
-
-    .roof-module-table {
-      table {
-        table-layout: fixed;
-      }
-    }
-  }
+}
+.circuit-table-tit{
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 11px 10px;
+    background-color: #474747;
+    border: 1px solid #505050;
+    border-bottom: none;
 }
 
-.circuit-count-input {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.circuit-overflow{
+    max-height: 400px;
+    overflow-y: auto;
+    margin-bottom: 15px;
+    &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #D9D9D9;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+}
+
+.circuit-table-flx-wrap{
+    display: flex;
+    gap: 10px;
+    margin-bottom: 10px;
+    .circuit-table-flx-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .bottom-wrap{
+            margin-top: auto;
+        }
+        .roof-module-table{
+            table{
+                table-layout: fixed;
+            }
+        }
+    }
+}
+
+.circuit-count-input{
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
 // 모듈부가기능
-.additional-radio-wrap {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 15px 0;
-  margin-bottom: 24px;
+.additional-radio-wrap{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px 0;
+    margin-bottom: 24px;
+}
+.additional-wrap{
+    padding: 24px 0;
+    border-top: 1px solid #424242;
 }
 
-.additional-wrap {
-  padding: 24px 0;
-  border-top: 1px solid #424242;
-}
-
-.additional-color-wrap {
-  display: flex;
-  align-items: center;
-  padding: 5px 0;
-  gap: 15px;
-
-  .additional-color-box {
+.additional-color-wrap{
     display: flex;
     align-items: center;
-    gap: 8px;
-
-    .additional-color {
-      display: block;
-      width: 16px;
-      height: 16px;
-
-      &.pink {
-        border: 2px solid #ce1c9c;
-        background-color: #16417D;
-      }
-
-      &.white {
-        border: 2px solid #FFF;
-        background-color: #001027;
-      }
+    padding: 5px 0;
+    gap: 15px;
+    .additional-color-box{
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        .additional-color{
+            display: block;
+            width: 16px;
+            height: 16px;
+            &.pink{
+                border: 2px solid #ce1c9c;
+                background-color: #16417D;
+            }
+            &.white{
+                border: 2px solid #FFF;
+                background-color: #001027;
+            }
+        }
     }
-  }
 }
 
 // color setting
-.color-setting-wrap {
-  padding-bottom: 15px;
-  border-bottom: 1px solid #424242;
-
-  .color-tit {
-    font-size: 13px;
-    font-weight: 500;
-    color: #ffffff;
-    margin-bottom: 10px;
-  }
-
-  .color-picker {
-    .react-colorful {
-      width: 100%;
-      height: auto;
-      gap: 20px;
-
-      .react-colorful__pointer {
-        width: 15px;
-        height: 15px;
-        border: 4px solid #Fff;
-      }
-
-      .react-colorful__saturation {
-        border-radius: 2px;
-        height: 200px;
-        border-bottom: 5px solid #000;
-      }
-
-      .react-colorful__last-control {
-        border-radius: 2px;
-        height: 10px;
-      }
-    }
-
-    .hex-color-box {
-      display: flex;
-      align-items: center;
-      margin-top: 15px;
-
-      .color-box-tit {
-        font-size: 12px;
-        color: #fff;
+.color-setting-wrap{
+    padding-bottom: 15px;
+    border-bottom: 1px solid #424242;
+    .color-tit{
+        font-size: 13px;
         font-weight: 500;
-        margin-right: 10px;
-      }
-
-      .color-hex-input {
-        width: 150px;
-        margin-right: 5px;
-
-        input {
-          width: 100%;
-        }
-      }
-
-      .color-box {
-        display: block;
-        width: 30px;
-        height: 30px;
-        border-radius: 4px;
-      }
+        color: #ffffff;
+        margin-bottom: 10px;
     }
+    .color-picker{
+        .react-colorful{
+            width: 100%;
+            height: auto;
+            gap: 20px;
+            .react-colorful__pointer{
+                width: 15px;
+                height: 15px;
+                border: 4px solid #Fff;
+            }
+            .react-colorful__saturation{
+                border-radius: 2px;
+                height: 200px;
+                border-bottom: 5px solid #000;
+            }
+            .react-colorful__last-control{
+                border-radius: 2px;
+                height: 10px;
+            }
+        }
+        .hex-color-box{
+            display: flex;
+            align-items: center;
+            margin-top: 15px;
+            .color-box-tit{
+                font-size: 12px;
+                color: #fff;
+                font-weight: 500;
+                margin-right: 10px;
+            }
+            .color-hex-input{
+                width: 150px;
+                margin-right: 5px;
+                input{
+                    width: 100%;
+                }
+            }
+            .color-box{
+                display: block;
+                width: 30px;
+                height: 30px;
+                border-radius: 4px;
+            }
+        }
+        .default-color-wrap{
+            margin-top: 25px;
+            .default-tit{
+                font-size: 12px;
+                font-weight: 500;
+                color: #fff;
+                margin-bottom: 10px;
+            }
+            .color-button-wrap{
+                display: grid;
+                grid-template-columns: repeat(8, 1fr);
+                gap: 21px;
+                .default-color{
+                    display: block;
+                    width: 100%;
+                    height: 30px;
+                    border-radius: 4px;
+                }
+            }
+        }
+    }
+}
 
-    .default-color-wrap {
-      margin-top: 25px;
-
-      .default-tit {
+// 글꼴 설정 팝업
+.font-option-warp{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px 5px;
+    margin-bottom: 15px;
+    .font-option-item{
+        .option-item-tit{
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+            margin-bottom: 10px;
+        }
+    }
+}
+.font-ex-wrap{
+    margin-bottom: 15px;
+    .font-ex-tit{
         font-size: 12px;
         font-weight: 500;
         color: #fff;
         margin-bottom: 10px;
-      }
-
-      .color-button-wrap {
-        display: grid;
-        grid-template-columns: repeat(8, 1fr);
-        gap: 21px;
-
-        .default-color {
-          display: block;
-          width: 100%;
-          height: 30px;
-          border-radius: 4px;
-        }
-      }
     }
-  }
-}
-
-// 글꼴 설정 팝업
-.font-option-warp {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 15px 5px;
-  margin-bottom: 15px;
-
-  .font-option-item {
-    .option-item-tit {
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-      margin-bottom: 10px;
+    .font-ex-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-height: 80px;
+        background-color: #fff;
     }
-  }
-}
-
-.font-ex-wrap {
-  margin-bottom: 15px;
-
-  .font-ex-tit {
-    font-size: 12px;
-    font-weight: 500;
-    color: #fff;
-    margin-bottom: 10px;
-  }
-
-  .font-ex-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    min-height: 80px;
-    background-color: #fff;
-  }
-
+    
 }
 
 // 치수선 설정
-.font-btn-wrap {
-  margin-bottom: 15px;
-
-  button {
-    width: 100%;
-    height: 30px;
-    line-height: 28px;
-  }
-}
-
-.line-color-wrap {
-  margin-bottom: 15px;
-
-  .color-btn {
-    display: block;
-    width: 100%;
-    height: 30px;
-    border-radius: 2px;
-  }
-}
-
-.form-box {
-  width: 100%;
-  background-color: #fff;
-  padding: 10px 15px 20px;
-
-  .line-form {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    min-width: 102px;
-    min-height: 40px;
-    margin: 0 auto;
-
-    &::before {
-      content: '';
-      position: absolute;
-      bottom: 0px;
-      left: 0;
-      width: 100%;
-      height: 40px;
-      border-left: 1px dashed #101010;
-      border-right: 1px dashed #101010;
+.font-btn-wrap{
+    margin-bottom: 15px;
+    button{
+        width: 100%;
+        height: 30px;
+        line-height: 28px;
     }
+}
 
-    .line-font-box {
-      .font {
-        display: block;
-        padding-bottom: 15px;
-        color: #101010;
-        text-align: center;
-        line-height: 1;
-      }
-
-      .line {
-        position: relative;
+.line-color-wrap{
+    margin-bottom: 15px;
+    .color-btn{
         display: block;
         width: 100%;
-        height: 1px;
-        border-radius: 30px;
-
-        &::before {
-          content: '';
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%) rotate(45deg);
-          left: 1px;
-          width: 9px;
-          height: +9px;
-          border: 1px solid;
-          border-color: inherit;
-          border-top: none;
-          border-right: none;
-        }
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%) rotate(45deg);
-          right: 1px;
-          width: 9px;
-          height: 9px;
-          border: 1px solid;
-          border-color: inherit;
-          border-bottom: none;
-          border-left: none;
-        }
-      }
+        height: 30px;
+        border-radius: 2px;
+    }
+}
+
+.form-box{
+    width: 100%;
+    background-color: #fff;
+    padding: 10px 15px 20px;
+    .line-form{
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        min-width: 102px;
+        min-height: 40px;
+        margin: 0 auto;
+
+        &::before{
+            content: '';
+            position: absolute;
+            bottom: 0px;
+            left: 0;
+            width: 100%;
+            height: 40px;
+            border-left: 1px dashed #101010;
+            border-right: 1px dashed #101010;
+        }
+        .line-font-box{
+            .font{
+                display: block;
+                padding-bottom: 15px;
+                color: #101010;
+                text-align: center;
+                line-height: 1;
+            }
+            .line{
+                position: relative;
+                display: block;
+                width: 100%;
+                height: 1px;
+                border-radius: 30px;
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%) rotate(45deg);
+                    left: 1px;
+                    width: 9px;
+                    height:+ 9px;
+                    border: 1px solid;
+                    border-color: inherit;
+                    border-top: none;
+                    border-right: none;
+                }
+                &::after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%) rotate(45deg);
+                    right: 1px;
+                    width: 9px;
+                    height: 9px;
+                    border: 1px solid;
+                    border-color: inherit;
+                    border-bottom: none;
+                    border-left: none;
+                }
+            }
+        }
     }
-  }
 }
 
 // 사이즈 변경
-.size-inner-warp {
-  position: relative;
+.size-inner-warp{
+    position: relative;
 }
-
-.size-check-wrap {
-  position: relative;
-  display: block;
-  width: 132px;
-  height: 132px;
-  margin: 0 auto;
-
-  .size-btn {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    border: 1px solid #fff;
-    border-radius: 50%;
-
-    &.act {
-      &::after {
-        content: '';
+.size-check-wrap{
+    position: relative;
+    display: block;
+    width: 132px;
+    height: 132px;
+    margin: 0 auto;
+    .size-btn{
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        &.act{
+            &::after{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 8px;
+                height: 8px;
+                background-color: #fff;
+                border-radius: 50%;
+            }
+        }
+        &:nth-child(1){ top: 0; left: 0; }
+        &:nth-child(2){ top: 0; right: 0; }
+        &:nth-child(3){ bottom: 0; left: 0; }
+        &:nth-child(4){ bottom: 0; right: 0; }
+    }
+    .size-box{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 8px;
-        height: 8px;
+        width: 100px;
+        height: 100px;
         background-color: #fff;
-        border-radius: 50%;
-      }
     }
+}
 
-    &:nth-child(1) {
-      top: 0;
-      left: 0;
-    }
-
-    &:nth-child(2) {
-      top: 0;
-      right: 0;
-    }
-
-    &:nth-child(3) {
-      bottom: 0;
-      left: 0;
-    }
-
-    &:nth-child(4) {
-      bottom: 0;
-      right: 0;
-    }
-  }
-
-  .size-box {
+.size-option-top{
+    margin-bottom: 15px;
+}
+.size-option-side{
     position: absolute;
     top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100px;
-    height: 100px;
-    background-color: #fff;
-  }
+    left: 0;
+    transform: translateY(-50%);
 }
-
-.size-option-top {
-  margin-bottom: 15px;
-}
-
-.size-option-side {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
-}
-
-.size-option-wrap {
-  width: 88px;
-  margin: 0 auto;
-
-  .size-option {
-    display: flex;
-    align-items: center;
-
-    input {
-      width: 100%;
-      flex: 1;
+.size-option-wrap{
+    width: 88px;
+    margin: 0 auto;
+    .size-option{
+        display: flex;
+        align-items: center;
+        input{
+            width: 100%;
+            flex: 1;
+        }
+        span{
+            flex: none;
+        }
     }
-
-    span {
-      flex: none;
-    }
-  }
 }
 
 //이미지 크기 설정
-.range-wrap {
-  display: flex;
-  align-items: center;
-
-  input {
-    flex: 1;
-    margin-right: 10px;
-  }
-
-  label {
-    flex: none;
-    text-align: right;
-    width: 38px;
-    font-size: 13px;
-    color: #fff;
-    font-weight: 500;
-  }
+.range-wrap{
+    display: flex;
+    align-items: center;
+    input{
+        flex: 1;
+        margin-right: 10px;
+    }
+    label{
+        flex: none;
+        text-align: right;
+        width: 38px;
+        font-size: 13px;
+        color: #fff;
+        font-weight: 500;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index b7778926..711ef44a 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -9,8 +9,6 @@
     box-sizing: border-box;
 }
 html, body{
-    width: 100%;
-    height: 100%;
     font-size: 16px;
 }
 html, body, div, span, applet, object, iframe,

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 51/60] =?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)}>

From 44c07e0f93fa4d495854cc03efd27e114ad7d753 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 31 Oct 2024 18:07:59 +0900
Subject: [PATCH 52/60] =?UTF-8?q?=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/ja.json | 2 +-
 src/locales/ko.json | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/locales/ja.json b/src/locales/ja.json
index 73141fb0..aed7d34d 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -13,7 +13,7 @@
   "header.go": "移動",
   "header.online.warranty.system": "オンライン保証シ",
   "header.stem": "ステム",
-  "plan.menu.plan.drawing": "도면작성",
+  "plan.menu.plan.drawing": "물건정보(JA)",
   "plan.menu.placement.surface.initial.setting": "配置面 初期設定",
   "modal.placement.initial.setting.plan.drawing.size.stuff": "寸法入力による物品作成",
   "modal.placement.initial.setting.plan.": "図面の作成方法",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index e1230a15..9d550aa0 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -13,7 +13,7 @@
   "header.go": "이동",
   "header.online.warranty.system": "온라인 보증 시스템",
   "header.stem": "Stem",
-  "plan.menu.plan.drawing": "도면작성",
+  "plan.menu.plan.drawing": "물건정보",
   "plan.menu.placement.surface.initial.setting": "배치면 초기 설정",
   "modal.placement.initial.setting.plan.drawing": "도면 작성방법",
   "modal.placement.initial.setting.plan.drawing.size.stuff": "치수 입력에 의한 물건 작성",
@@ -292,6 +292,7 @@
   "margin": "간격",
   "contextmenu.roof.material.placement": "지붕재 배치",
   "contextmenu.roof.material.edit": "지붕재 변경",
+  "modal.roof.material.edit": "지붕재 변경",
   "contextmenu.roof.material.remove": "지붕재 삭제",
   "contextmenu.roof.material.remove.all": "지붕재 전체 삭제",
   "contextmenu.dormer.offset": "도머 오프셋",

From 4324f3d53b268970554a1632110fe69fd37022ac Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 31 Oct 2024 18:08:32 +0900
Subject: [PATCH 53/60] =?UTF-8?q?contextmenu=20list=20recoil=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useContextMenu.js | 9 +++++----
 src/store/contextMenu.js    | 6 ++++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index e60b80ae..8a6226a1 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -23,7 +23,7 @@ import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/Fl
 import { useCommonUtils } from './common/useCommonUtils'
 import { useMessage } from '@/hooks/useMessage'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
-import { contextMenuState } from '@/store/contextMenu'
+import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
 import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
 import PanelEdit from '@/components/floor-plan/modal/module/PanelEdit'
 import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
@@ -36,7 +36,7 @@ import CircuitNumberEdit from '@/components/floor-plan/modal/module/CircuitNumbe
 export function useContextMenu() {
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
   const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
-  const [contextMenu, setContextMenu] = useState([[]]) // 메뉴.object 별 context menu
+  const [contextMenu, setContextMenu] = useRecoilState(contextMenuListState) // 메뉴.object 별 context menu
   const [currentContextMenu, setCurrentContextMenu] = useRecoilState(contextPopupState) // 선택한 contextMenu
   const currentObject = useRecoilValue(currentObjectState)
   const { getMessage } = useMessage()
@@ -221,9 +221,10 @@ export function useContextMenu() {
     if (menu?.fn) {
       menu.fn()
     }
+
     setContextPopupPosition({
-      x: e?.clientX,
-      y: e?.clientY,
+      x: window.innerWidth / 2,
+      y: 180,
     })
     setCurrentContextMenu(menu)
     setQContextMenu({ ...qContextMenu, visible: false })
diff --git a/src/store/contextMenu.js b/src/store/contextMenu.js
index 31b18f53..b97fea65 100644
--- a/src/store/contextMenu.js
+++ b/src/store/contextMenu.js
@@ -9,3 +9,9 @@ export const contextMenuState = atom({
   },
   dangerouslyAllowMutability: true,
 })
+
+export const contextMenuListState = atom({
+  key: 'contextMenuListState',
+  default: null,
+  dangerouslyAllowMutability: true,
+})

From ba23e3b55c4d401810b321bd3992087612bfc849 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Thu, 31 Oct 2024 23:25:25 +0900
Subject: [PATCH 54/60] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/management/StuffDetail.jsx | 473 +++++++++++++++++-----
 1 file changed, 380 insertions(+), 93 deletions(-)

diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index 6d3a83ee..740bf38e 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useContext } from 'react'
 import { useRouter, useSearchParams, usePathname } from 'next/navigation'
 import { Button } from '@nextui-org/react'
 import Select, { components } from 'react-select'
@@ -12,6 +12,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { useForm } from 'react-hook-form'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { sessionStore } from '@/store/commonAtom'
+import { SessionContext } from '@/app/SessionProvider'
 import FindAddressPop from './popup/FindAddressPop'
 import PlanRequestPop from './popup/PlanRequestPop'
 import WindSelectPop from './popup/WindSelectPop'
@@ -22,19 +23,13 @@ import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
 export default function StuffDetail() {
   const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState) //견적서 화면용 물건번호리코일
 
-  // const inputReceiveUserEl = useRef(null) //담당자ref
-  // const inputObjectNameEl = useRef(null) //물건명ref
-  // const inputZipNoEl = useRef(null) //우편번호ref
-  // const inputAddressEl = useRef(null) //주소ref
-  // const inputVerticalSnowCoverEl = useRef(null) //수직적설량ref
-  // const inputInstallHeightEl = useRef(null) //설치높이ref
-
   //공통코드
   const { commonCode, findCommonCode } = useCommonCode()
   const [selOptions, setSelOptions] = useState('') //선택한 1차점
   const [otherSelOptions, setOtherSelOptions] = useState('') //선택한 1차점외
 
   const sessionState = useRecoilValue(sessionStore)
+  const { session } = useContext(SessionContext)
 
   const router = useRouter()
   const pathname = usePathname()
@@ -252,6 +247,7 @@ export default function StuffDetail() {
             }
           }
 
+          console.log('buttonStyle:::', buttonStyle, params.value)
           return (
             <>
               <div className="grid-cell-btn">
@@ -322,55 +318,132 @@ export default function StuffDetail() {
       //1차점 : X167 T01
       //2차점 : 10X22, 201X112
       let url
-      if (sessionState?.storeId === 'T01') {
-        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
-        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+      let firstList
+      let otherList
+      let favList
+      // if (sessionState?.storeId === 'T01') {
+      if (session?.storeId === 'T01') {
+        console.log('신규T01::::::::::::::::::::::::::::::::::::')
+        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+        url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
       } else {
-        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+        // url = `/api/object/saleStore/${sessionState?.storeId}/list`
+        if (session.storeLvl === '1') {
+          console.log('로그인이1차:::::::')
+          //url = `/api/object/saleStore/${session?.storeId}/list`
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+        } else {
+          console.log('로그인이2차:::')
+          url = ``
+        }
       }
 
       get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
-          const firstList = res.filter((row) => row.saleStoreLevel === '1')
-          let favList
-          if (sessionState?.storeId === 'T01') {
+          res.map((row) => {
+            row.value = row.saleStoreId
+            row.label = row.saleStoreName
+          })
+          if (session?.storeId === 'T01') {
+            firstList = res
             firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
             favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
+
             setSaleStoreList(firstList)
             setFavoriteStoreList(favList)
             setShowSaleStoreList(favList)
-          } else {
-            //1차점 셀렉트박스
-            setSaleStoreList(firstList)
-          }
-          const otherList = res.filter((row) => row.saleStoreLevel !== '1')
-          let filterOtherList
-          if (sessionState?.storeId === 'T01') {
-            filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
+            setSelOptions(session?.storeId)
+            form.setValue('saleStoreId', session?.storeId)
+            form.setValue('saleStoreLevel', session?.storeLvl)
+            //T01일떄는 1차점을 고른다음 2차점 목록 조회하기
+            //디폴트 값(T01)으로 2차점목록 조회하기
+            url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=0&userId=${session?.userId}`
+            get({ url: url }).then((res) => {
+              if (!isEmptyArray(res)) {
+                res.map((row) => {
+                  row.value = row.saleStoreId
+                  row.label = row.saleStoreName
+                })
 
-            setOriginOtherSaleStoreList(filterOtherList)
-            setOtherSaleStoreList(filterOtherList)
+                otherList = res
+                setOtherSaleStoreList(otherList)
+              } else {
+                setOtherSaleStoreList([])
+              }
+            })
           } else {
-            //T01 아니고 2차점 판매점 셀렉트박스
-            setOriginOtherSaleStoreList(otherList)
-            setOtherSaleStoreList(otherList)
-          }
+            if (session?.storeLvl === '1') {
+              firstList = res
+              favList = res.filter((row) => row.priority !== 'B')
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
 
-          if (sessionState?.storeLvl === '1') {
-            setSelOptions(sessionState?.storeId)
-            form.setValue('saleStoreId', sessionState?.storeId)
-            form.setValue('saleStoreLevel', sessionState?.storeLvl)
-          } else {
-            setSelOptions(firstList[0].saleStoreId)
-            setOtherSelOptions(sessionState?.storeId)
-            form.setValue('saleStoreId', firstList[0].saleStoreId)
-            form.setValue('otherSaleStoreId', sessionState?.storeId)
-            form.setValue('otherSaleStoreLevel', sessionState?.storeLvl)
+              setSaleStoreList(firstList)
+              setFavoriteStoreList(firstList)
+              setShowSaleStoreList(firstList)
+              setSelOptions(firstList[0].saleStoreId)
+              form.setValue('saleStoreId', session?.storeId)
+              form.setValue('saleStoreLevel', session?.storeLvl)
+
+              setOtherSaleStoreList(otherList)
+            } else {
+              console.log('1차점아님:::::::::', res)
+            }
           }
         }
       })
+
+      // get({ url: url }).then((res) => {
+      //   if (!isEmptyArray(res)) {
+      //     const firstList = res.filter((row) => row.saleStoreLevel === '1')
+      //     let favList
+      //     // if (sessionState?.storeId === 'T01') {
+      //     if (session?.storeId === 'T01') {
+      //       firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
+      //       favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
+      //       setSaleStoreList(firstList)
+      //       setFavoriteStoreList(favList)
+      //       setShowSaleStoreList(favList)
+      //     } else {
+      //       //1차점 셀렉트박스
+      //       setSaleStoreList(firstList)
+      //     }
+      //     const otherList = res.filter((row) => row.saleStoreLevel !== '1')
+      //     let filterOtherList
+      //     // if (sessionState?.storeId === 'T01') {
+      //     if (session?.storeId === 'T01') {
+      //       filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
+
+      //       setOriginOtherSaleStoreList(filterOtherList)
+      //       setOtherSaleStoreList(filterOtherList)
+      //     } else {
+      //       //T01 아니고 2차점 판매점 셀렉트박스
+      //       setOriginOtherSaleStoreList(otherList)
+      //       setOtherSaleStoreList(otherList)
+      //     }
+
+      //     // if (sessionState?.storeLvl === '1') {
+      //     if (session?.storeLvl === '1') {
+      //       // setSelOptions(sessionState?.storeId)
+      //       setSelOptions(session?.storeId)
+      //       // form.setValue('saleStoreId', sessionState?.storeId)
+      //       form.setValue('saleStoreId', session?.storeId)
+      //       // form.setValue('saleStoreLevel', sessionState?.storeLvl)
+      //       form.setValue('saleStoreLevel', session?.storeLvl)
+      //     } else {
+      //       setSelOptions(firstList[0].saleStoreId)
+      //       // setOtherSelOptions(sessionState?.storeId)
+      //       setOtherSelOptions(session?.storeId)
+      //       form.setValue('saleStoreId', firstList[0].saleStoreId)
+      //       // form.setValue('otherSaleStoreId', sessionState?.storeId)
+      //       form.setValue('otherSaleStoreId', session?.storeId)
+      //       // form.setValue('otherSaleStoreLevel', sessionState?.storeLvl)
+      //       form.setValue('otherSaleStoreLevel', session?.storeLvl)
+      //     }
+      //   }
+      // })
     }
-  }, [objectNo, sessionState])
+    // }, [objectNo, sessionState])
+  }, [objectNo, session])
 
   useEffect(() => {
     const code1 = findCommonCode(200800) //경칭
@@ -389,7 +462,7 @@ export default function StuffDetail() {
 
   useEffect(() => {
     if (isObjectNotEmpty(detailData)) {
-      // console.log('상세데이타세팅:::::', detailData)
+      console.log('상세데이타세팅:::::', detailData)
       // 도도부현API
       get({ url: '/api/object/prefecture/list' }).then((res) => {
         if (!isEmptyArray(res)) {
@@ -400,38 +473,73 @@ export default function StuffDetail() {
       //1차점 : X167 T01
       //2차점 : 10X22, 201X112
       let url
-      if (sessionState?.storeId === 'T01') {
-        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
-        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+      let firstList
+      let otherList
+      let favList
+      // if (sessionState?.storeId === 'T01') {
+      if (session?.storeId === 'T01') {
+        // url = `/api/object/saleStore/${sessionState?.storeId}/firstList?userId=${sessionState?.userId}`
+        url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
       } else {
-        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+        // if (sessionState.storeLvl === '1') {
+        if (session.storeLvl === '1') {
+          // url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
+        } else {
+          // url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
+        }
       }
       get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
-          const firstList = res.filter((row) => row.saleStoreLevel === '1')
-          const otherList = res.filter((row) => row.saleStoreLevel !== '1')
-          let favList
-
-          if (sessionState?.storeId === 'T01') {
+          // if (sessionState?.storeId === 'T01') {
+          if (session?.storeId === 'T01') {
+            firstList = res.filter((row) => row.saleStoreLevel === '1')
             firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
             favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
             setSaleStoreList(firstList)
             setFavoriteStoreList(favList)
             setShowSaleStoreList(favList)
+
+            //상세데이터의 1차점 아이디로 2차점 목록 조회하기
+            // url = `/api/object/saleStore/${detailData?.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
+            url = `/api/object/saleStore/${detailData?.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
+
+            get({ url: url }).then((res) => {
+              if (!isEmptyArray(res)) {
+                res.map((row) => {
+                  row.value = row.saleStoreId
+                  row.label = row.saleStoreName
+                })
+
+                otherList = res
+                setOriginOtherSaleStoreList(otherList)
+                setOtherSaleStoreList(otherList)
+              }
+            })
           } else {
             //1차점 셀렉트박스
-            setSaleStoreList(firstList)
-          }
+            // if (sessionState?.storeLvl === '1') {
+            if (session?.storeLvl === '1') {
+              firstList = res
+              favList = res.filter((row) => row.priority !== 'B')
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
 
-          let filterOtherList
-          if (sessionState?.storeId === 'T01') {
-            filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
-            setOriginOtherSaleStoreList(filterOtherList)
-            setOtherSaleStoreList(filterOtherList)
-          } else {
-            //1차점 아닌 판매점 셀렉트박스
-            setOriginOtherSaleStoreList(otherList)
-            setOtherSaleStoreList(otherList)
+              setSaleStoreList(firstList)
+              setFavoriteStoreList(firstList)
+              setShowSaleStoreList(firstList)
+
+              setOtherSaleStoreList(otherList)
+            } else {
+              setSelOptions(res[0].saleStoreId)
+              form.setValue('saleStoreId', res[0].saleStoreId)
+              form.setValue('saleStoreLevel', res[0].storeLvl)
+              setSaleStoreList(res)
+              setFavoriteStoreList(res)
+              setShowSaleStoreList(res)
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
+              setOtherSaleStoreList(otherList)
+            }
           }
         }
 
@@ -442,9 +550,6 @@ export default function StuffDetail() {
           form.setValue('saleStoreId', detailData.saleStoreId)
           form.setValue('saleStoreLevel', detailData.saleStoreLevel)
         } else {
-          setSelOptions(sessionState?.storeId)
-          form.setValue('saleStoreId', sessionState?.storeId)
-          form.setValue('saleStoreLevel', sessionState?.storeLvl)
           setOtherSelOptions(detailData.saleStoreId)
           form.setValue('otherSaleStoreId', detailData.saleStoreId)
           form.setValue('otherSaleStoreLevel', detailData.saleStoreLevel)
@@ -504,7 +609,8 @@ export default function StuffDetail() {
         form.setValue('remarks', detailData.remarks)
       })
     }
-  }, [detailData, sessionState])
+    // }, [detailData, sessionState])
+  }, [detailData, session])
 
   //경칭선택 변경 이벤트
   const onChangeHonorificCode = (key) => {
@@ -586,8 +692,9 @@ export default function StuffDetail() {
             setSelOptions(key.saleStoreId)
             //선택한 1차점 정보로 2차점 list 추리기
             //長府工産株式会社　大阪支社
-            let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
-            setOtherSaleStoreList(newOtherSaleStoreList)
+            console.log('여기도?????????????????????')
+            // let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
+            // setOtherSaleStoreList(newOtherSaleStoreList)
           } else {
             //X누름
             setSelOptions('')
@@ -604,15 +711,38 @@ export default function StuffDetail() {
         }
       } else {
         if (isObjectNotEmpty(key)) {
-          setOtherSaleStoreList(otherSaleStoreList)
+          setSelOptions(key.saleStoreId)
           form.setValue('saleStoreId', key.saleStoreId)
           form.setValue('saleStoreName', key.saleStoreName)
           form.setValue('saleStoreLevel', key.saleStoreLevel)
-          setSelOptions(key.saleStoreId)
-          //선택한 1차점 정보로 2차점 list 추리기
+          //선택한 1차점 정보로 2차점 조회하기
           //長府工産株式会社　大阪支社
-          let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
-          setOtherSaleStoreList(newOtherSaleStoreList)
+          console.log('바꿔조ㅜㅝ............', key.saleStoreId)
+          let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
+          let otherList
+          get({ url: url }).then((res) => {
+            console.log('고른1차점으로 2차점목록조회결과;:::', res)
+            if (!isEmptyArray(res)) {
+              res.map((row) => {
+                row.value = row.saleStoreId
+                row.label = row.saleStoreName
+              })
+
+              otherList = res
+              console.log('otherList::::::::', otherList)
+              setOtherSaleStoreList(otherList)
+              setOtherSelOptions('')
+              form.setValue('otherSaleStoreId', '')
+              form.setValue('otherSaleStoreName', '')
+              form.setValue('otherSaleStoreLevel', '')
+            } else {
+              setOtherSelOptions('')
+              form.setValue('otherSaleStoreId', '')
+              form.setValue('otherSaleStoreName', '')
+              form.setValue('otherSaleStoreLevel', '')
+              setOtherSaleStoreList([])
+            }
+          })
         } else {
           //X누름
           setSelOptions('')
@@ -636,8 +766,9 @@ export default function StuffDetail() {
         setSelOptions(key.saleStoreId)
         //선택한 1차점 정보로 2차점 list 추리기
         //長府工産株式会社　大阪支社
-        let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
-        setOtherSaleStoreList(newOtherSaleStoreList)
+        console.log('여기도용')
+        // let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
+        // setOtherSaleStoreList(newOtherSaleStoreList)
       } else {
         //X누름
         setSelOptions('')
@@ -1170,8 +1301,10 @@ export default function StuffDetail() {
 
     //1차점 or 2차점 안고르고 임시저장하면
     if (params.saleStoreId == '') {
-      params.saleStoreId = sessionState.storeId
-      params.saleStoreLevel = sessionState.storeLvl
+      // params.saleStoreId = sessionState.storeId
+      params.saleStoreId = session.storeId
+      // params.saleStoreLevel = sessionState.storeLvl
+      params.saleStoreLevel = session.storeLvl
     }
     //수직적설량, 설치높이 0인지 체크
     // let snow = params.verticalSnowCover
@@ -1343,7 +1476,113 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        {(sessionState?.storeId === 'T01' && (
+                        {/* {sessionState?.storeId === 'T01' && ( */}
+                        {session?.storeId === 'T01' && (
+                          <>
+                            <div className="select-wrap mr5" style={{ width: '567px' }}>
+                              <Select
+                                id="long-value-select1"
+                                instanceId="long-value-select1"
+                                className="react-select-custom"
+                                classNamePrefix="custom"
+                                placeholder="Select"
+                                options={showSaleStoreList}
+                                onInputChange={onInputChange}
+                                onChange={onSelectionChange}
+                                getOptionLabel={(x) => x.saleStoreName}
+                                getOptionValue={(x) => x.saleStoreId}
+                                // isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                isClearable={session?.storeLvl === '1' ? true : false}
+                                // isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                isDisabled={session?.storeLvl !== '1' ? true : false}
+                                value={saleStoreList.filter(function (option) {
+                                  // console.log('showSaleStoreList:::::', option.saleStoreId)
+                                  return option.saleStoreId === selOptions
+                                })}
+                              ></Select>
+                            </div>
+                            <div className="input-wrap" style={{ width: '216px' }}>
+                              <input
+                                type="text"
+                                className="input-light"
+                                value={form.watch('saleStoreId') || ''}
+                                {...form.register('saleStoreId')}
+                                readOnly
+                              />
+                            </div>
+                          </>
+                        )}
+
+                        {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && ( */}
+                        {session?.storeId !== 'T01' && session?.storeLvl === '1' && (
+                          <>
+                            신규 T01아닌 1차점
+                            <div className="select-wrap mr5" style={{ width: '567px' }}>
+                              <Select
+                                id="long-value-select1"
+                                instanceId="long-value-select1"
+                                className="react-select-custom"
+                                classNamePrefix="custom"
+                                placeholder="Select"
+                                options={showSaleStoreList[0]}
+                                onChange={onSelectionChange}
+                                getOptionLabel={(x) => x.saleStoreName}
+                                getOptionValue={(x) => x.saleStoreId}
+                                isClearable={session?.storeLvl === '1' ? true : false}
+                                isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
+                                value={showSaleStoreList.filter(function (option) {
+                                  return option.saleStoreId === selOptions
+                                })}
+                              ></Select>
+                            </div>
+                            <div className="input-wrap" style={{ width: '216px' }}>
+                              <input
+                                type="text"
+                                className="input-light"
+                                value={form.watch('saleStoreId') || ''}
+                                {...form.register('saleStoreId')}
+                                readOnly
+                              />
+                            </div>
+                          </>
+                        )}
+                        {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && ( */}
+                        {session?.storeId !== 'T01' && session?.storeLvl !== '1' && (
+                          <>
+                            신규 로그인이2차점
+                            <div className="select-wrap mr5" style={{ width: '567px' }}>
+                              <Select
+                                id="long-value-select1"
+                                instanceId="long-value-select1"
+                                className="react-select-custom"
+                                classNamePrefix="custom"
+                                placeholder="Select"
+                                options={saleStoreList}
+                                onChange={onSelectionChange}
+                                getOptionLabel={(x) => x.saleStoreName}
+                                getOptionValue={(x) => x.saleStoreId}
+                                // isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                isClearable={session?.storeLvl === '1' ? true : false}
+                                // isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                isDisabled={session?.storeLvl !== '1' ? true : false}
+                                value={saleStoreList.filter(function (option) {
+                                  return option.saleStoreId === selOptions
+                                })}
+                              ></Select>
+                            </div>
+                            <div className="input-wrap" style={{ width: '216px' }}>
+                              <input
+                                type="text"
+                                className="input-light"
+                                value={form.watch('saleStoreId') || ''}
+                                {...form.register('saleStoreId')}
+                                readOnly
+                              />
+                            </div>
+                          </>
+                        )}
+
+                        {/* {(sessionState?.storeId === 'T01' && (
                           <>
                             <div className="select-wrap mr5" style={{ width: '567px' }}>
                               <Select
@@ -1377,6 +1616,7 @@ export default function StuffDetail() {
                         )) || (
                           <>
                             <div className="select-wrap mr5" style={{ width: '567px' }}>
+                              T01아님
                               <Select
                                 id="long-value-select1"
                                 instanceId="long-value-select1"
@@ -1404,7 +1644,7 @@ export default function StuffDetail() {
                               />
                             </div>
                           </>
-                        )}
+                        )} */}
                       </div>
                     </td>
                   </tr>
@@ -1432,8 +1672,10 @@ export default function StuffDetail() {
                             onChange={onSelectionChange2}
                             getOptionLabel={(x) => x.saleStoreName}
                             getOptionValue={(x) => x.saleStoreId}
-                            isDisabled={sessionState?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
-                            isClearable={sessionState?.storeLvl === '1' ? true : false}
+                            // isDisabled={session?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
+                            isDisabled={session?.storeLvl === '1' && form.watch('saleStoreId') != '' && otherSaleStoreList.length > 1 ? false : true}
+                            // isClearable={sessionState?.storeLvl === '1' ? true : false}
+                            isClearable={session?.storeLvl === '1' ? true : false}
                             value={otherSaleStoreList.filter(function (option) {
                               return option.saleStoreId === otherSelOptions
                             })}
@@ -1688,7 +1930,7 @@ export default function StuffDetail() {
                             <div className="product-input-wrap mr5">
                               <input type="text" className="product-input" readOnly value={form.watch('planReqNo') || ''} />
                               {/* {detailData?.tempFlg === '1' && form.watch('planReqNo') ? ( */}
-                              {objectNo.substring(0, 1) === 'T' && form.watch('planReqNo') ? (
+                              {detailData?.tempFlg === '1' && form.watch('planReqNo') ? (
                                 <button
                                   type="button"
                                   className="product-delete"
@@ -1699,7 +1941,7 @@ export default function StuffDetail() {
                               ) : null}
                             </div>
                             {/* {detailData?.tempFlg === '1' ? ( */}
-                            {objectNo.substring(0, 1) === 'T' ? (
+                            {detailData?.tempFlg === '1' ? (
                               <>
                                 <Button className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
                                   {getMessage('stuff.planReqPopup.title')}
@@ -1790,10 +2032,12 @@ export default function StuffDetail() {
                         </th>
                         <td>
                           <div className="flx-box">
-                            {(sessionState?.storeId === 'T01' && (
+                            {/* {sessionState?.storeId === 'T01' && ( */}
+                            {session?.storeId === 'T01' && (
                               <>
                                 <div className="select-wrap mr5" style={{ width: '567px' }}>
                                   <Select
+                                    menuPlacement={'auto'}
                                     id="long-value-select1"
                                     instanceId="long-value-select1"
                                     className="react-select-custom"
@@ -1804,8 +2048,10 @@ export default function StuffDetail() {
                                     onChange={onSelectionChange}
                                     getOptionLabel={(x) => x.saleStoreName}
                                     getOptionValue={(x) => x.saleStoreId}
-                                    isClearable={sessionState?.storeLvl === '1' ? true : false}
-                                    isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                    // isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                    isClearable={session?.storeLvl === '1' ? true : false}
+                                    // isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                    isDisabled={session?.storeLvl !== '1' ? true : false}
                                     value={saleStoreList.filter(function (option) {
                                       return option.saleStoreId === selOptions
                                     })}
@@ -1821,22 +2067,26 @@ export default function StuffDetail() {
                                   />
                                 </div>
                               </>
-                            )) || (
+                            )}
+                            {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && ( */}
+                            {session?.storeId !== 'T01' && session?.storeLvl === '1' && (
                               <>
                                 <div className="select-wrap mr5" style={{ width: '567px' }}>
                                   <Select
+                                    menuPlacement={'auto'}
                                     id="long-value-select1"
                                     instanceId="long-value-select1"
                                     className="react-select-custom"
                                     classNamePrefix="custom"
                                     placeholder="Select"
-                                    options={saleStoreList}
+                                    options={showSaleStoreList[0]}
                                     onChange={onSelectionChange}
                                     getOptionLabel={(x) => x.saleStoreName}
                                     getOptionValue={(x) => x.saleStoreId}
-                                    isClearable={sessionState?.storeLvl === '1' ? true : false}
-                                    isDisabled={sessionState?.storeLvl !== '1' ? true : false}
-                                    value={saleStoreList.filter(function (option) {
+                                    isClearable={false}
+                                    // isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
+                                    isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
+                                    value={showSaleStoreList.filter(function (option) {
                                       return option.saleStoreId === selOptions
                                     })}
                                   />
@@ -1852,6 +2102,41 @@ export default function StuffDetail() {
                                 </div>
                               </>
                             )}
+                            {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && ( */}
+                            {session?.storeId !== 'T01' && session?.storeLvl !== '1' && (
+                              <>
+                                <div className="select-wrap mr5" style={{ width: '567px' }}>
+                                  <Select
+                                    menuPlacement={'auto'}
+                                    id="long-value-select1"
+                                    instanceId="long-value-select1"
+                                    className="react-select-custom"
+                                    classNamePrefix="custom"
+                                    placeholder="Select"
+                                    options={showSaleStoreList[0]}
+                                    onChange={onSelectionChange}
+                                    getOptionLabel={(x) => x.saleStoreName}
+                                    getOptionValue={(x) => x.saleStoreId}
+                                    isClearable={false}
+                                    isDisabled={true}
+                                    value={showSaleStoreList.filter(function (option) {
+                                      if (option.firstAgentYn === 'Y') {
+                                        return option.saleStoreId
+                                      }
+                                    })}
+                                  />
+                                </div>
+                                <div className="input-wrap" style={{ width: '216px' }}>
+                                  <input
+                                    type="text"
+                                    className="input-light"
+                                    value={form.watch('saleStoreId') || ''}
+                                    {...form.register('saleStoreId')}
+                                    readOnly
+                                  />
+                                </div>
+                              </>
+                            )}
                           </div>
                         </td>
                       </tr>
@@ -1878,8 +2163,10 @@ export default function StuffDetail() {
                                 onChange={onSelectionChange2}
                                 getOptionLabel={(x) => x.saleStoreName}
                                 getOptionValue={(x) => x.saleStoreId}
-                                isDisabled={sessionState?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
-                                isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                // isDisabled={sessionState?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
+                                isDisabled={session?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
+                                // isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                isClearable={session?.storeLvl === '1' ? true : false}
                                 value={otherSaleStoreList.filter(function (option) {
                                   return option.saleStoreId === otherSelOptions
                                 })}
@@ -2112,7 +2399,7 @@ export default function StuffDetail() {
                 </div>
               </div>
               {/* {detailData?.tempFlg === '0' ? ( */}
-              {objectNo.substring(0, 1) !== 'T' ? (
+              {detailData?.tempFlg === '0' ? (
                 <>
                   {/* 진짜R 플랜시작 */}
                   <div className="table-box-title-wrap">

From 7e598bcc13661c446b3ae67770ec7d599142d2c8 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Fri, 1 Nov 2024 09:53:45 +0900
Subject: [PATCH 55/60] =?UTF-8?q?=EC=9E=84=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/management/StuffDetail.jsx     | 187 +++---------------
 .../management/StuffSearchCondition.jsx       |   2 +-
 .../management/popup/PlanRequestPop.jsx       |  12 +-
 3 files changed, 39 insertions(+), 162 deletions(-)

diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index 740bf38e..dc0ce981 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -247,7 +247,6 @@ export default function StuffDetail() {
             }
           }
 
-          console.log('buttonStyle:::', buttonStyle, params.value)
           return (
             <>
               <div className="grid-cell-btn">
@@ -323,18 +322,12 @@ export default function StuffDetail() {
       let favList
       // if (sessionState?.storeId === 'T01') {
       if (session?.storeId === 'T01') {
-        console.log('신규T01::::::::::::::::::::::::::::::::::::')
-        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
         url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
       } else {
-        // url = `/api/object/saleStore/${sessionState?.storeId}/list`
         if (session.storeLvl === '1') {
-          console.log('로그인이1차:::::::')
-          //url = `/api/object/saleStore/${session?.storeId}/list`
           url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
         } else {
-          console.log('로그인이2차:::')
-          url = ``
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
         }
       }
 
@@ -386,61 +379,26 @@ export default function StuffDetail() {
 
               setOtherSaleStoreList(otherList)
             } else {
-              console.log('1차점아님:::::::::', res)
+              //10X22, 201X112,202X217
+              firstList = res.filter((row) => row.firstAgentYn === 'Y')
+              setSaleStoreList(firstList)
+              setFavoriteStoreList(firstList)
+              setShowSaleStoreList(firstList)
+              setSelOptions(firstList[0].saleStoreId)
+
+              form.setValue('saleStoreId', firstList[0].saleStoreId)
+              form.setValue('saleStoreLevel', firstList[0].saleStoreLevel)
+
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
+              setOtherSaleStoreList(otherList)
+              //2차 판매점명/ID는  본인을 셀렉트
+              setOtherSelOptions(session?.storeId)
+              form.setValue('otherSaleStoreId', session?.storeId)
+              form.setValue('otherSaleStoreLevel', session?.storeLvl)
             }
           }
         }
       })
-
-      // get({ url: url }).then((res) => {
-      //   if (!isEmptyArray(res)) {
-      //     const firstList = res.filter((row) => row.saleStoreLevel === '1')
-      //     let favList
-      //     // if (sessionState?.storeId === 'T01') {
-      //     if (session?.storeId === 'T01') {
-      //       firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
-      //       favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
-      //       setSaleStoreList(firstList)
-      //       setFavoriteStoreList(favList)
-      //       setShowSaleStoreList(favList)
-      //     } else {
-      //       //1차점 셀렉트박스
-      //       setSaleStoreList(firstList)
-      //     }
-      //     const otherList = res.filter((row) => row.saleStoreLevel !== '1')
-      //     let filterOtherList
-      //     // if (sessionState?.storeId === 'T01') {
-      //     if (session?.storeId === 'T01') {
-      //       filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
-
-      //       setOriginOtherSaleStoreList(filterOtherList)
-      //       setOtherSaleStoreList(filterOtherList)
-      //     } else {
-      //       //T01 아니고 2차점 판매점 셀렉트박스
-      //       setOriginOtherSaleStoreList(otherList)
-      //       setOtherSaleStoreList(otherList)
-      //     }
-
-      //     // if (sessionState?.storeLvl === '1') {
-      //     if (session?.storeLvl === '1') {
-      //       // setSelOptions(sessionState?.storeId)
-      //       setSelOptions(session?.storeId)
-      //       // form.setValue('saleStoreId', sessionState?.storeId)
-      //       form.setValue('saleStoreId', session?.storeId)
-      //       // form.setValue('saleStoreLevel', sessionState?.storeLvl)
-      //       form.setValue('saleStoreLevel', session?.storeLvl)
-      //     } else {
-      //       setSelOptions(firstList[0].saleStoreId)
-      //       // setOtherSelOptions(sessionState?.storeId)
-      //       setOtherSelOptions(session?.storeId)
-      //       form.setValue('saleStoreId', firstList[0].saleStoreId)
-      //       // form.setValue('otherSaleStoreId', sessionState?.storeId)
-      //       form.setValue('otherSaleStoreId', session?.storeId)
-      //       // form.setValue('otherSaleStoreLevel', sessionState?.storeLvl)
-      //       form.setValue('otherSaleStoreLevel', session?.storeLvl)
-      //     }
-      //   }
-      // })
     }
     // }, [objectNo, sessionState])
   }, [objectNo, session])
@@ -659,6 +617,7 @@ export default function StuffDetail() {
 
     if (editMode === 'NEW') {
       if (planReqNo !== '') {
+        // console.log('삭제됩니다1111111111111')
         if (confirm(getMessage('stuff.detail.confirm.message1'))) {
           delFlg = true
         } else {
@@ -668,6 +627,7 @@ export default function StuffDetail() {
     } else {
       // EDIT
       if (planReqNo !== null && planReqNo !== '') {
+        // console.log('삭제됩니다2222222222222')
         if (confirm(getMessage('stuff.detail.confirm.message1'))) {
           delFlg = true
         } else {
@@ -680,6 +640,8 @@ export default function StuffDetail() {
     if (objectNo) {
       tempObjectNo = objectNo.substring(0, 1)
     }
+
+    // console.log('설계의뢰있을때 1차점 변경 ::::::::::tempObjectNo:::::::', tempObjectNo, planReqNo, delFlg)
     if (tempObjectNo === 'T') {
       if (planReqNo) {
         if (delFlg) {
@@ -692,7 +654,7 @@ export default function StuffDetail() {
             setSelOptions(key.saleStoreId)
             //선택한 1차점 정보로 2차점 list 추리기
             //長府工産株式会社　大阪支社
-            console.log('여기도?????????????????????')
+            console.log('111111??????111???????????????')
             // let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
             // setOtherSaleStoreList(newOtherSaleStoreList)
           } else {
@@ -716,12 +678,9 @@ export default function StuffDetail() {
           form.setValue('saleStoreName', key.saleStoreName)
           form.setValue('saleStoreLevel', key.saleStoreLevel)
           //선택한 1차점 정보로 2차점 조회하기
-          //長府工産株式会社　大阪支社
-          console.log('바꿔조ㅜㅝ............', key.saleStoreId)
           let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
           let otherList
           get({ url: url }).then((res) => {
-            console.log('고른1차점으로 2차점목록조회결과;:::', res)
             if (!isEmptyArray(res)) {
               res.map((row) => {
                 row.value = row.saleStoreId
@@ -729,7 +688,6 @@ export default function StuffDetail() {
               })
 
               otherList = res
-              console.log('otherList::::::::', otherList)
               setOtherSaleStoreList(otherList)
               setOtherSelOptions('')
               form.setValue('otherSaleStoreId', '')
@@ -766,7 +724,7 @@ export default function StuffDetail() {
         setSelOptions(key.saleStoreId)
         //선택한 1차점 정보로 2차점 list 추리기
         //長府工産株式会社　大阪支社
-        console.log('여기도용')
+        console.log('3333333333333')
         // let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
         // setOtherSaleStoreList(newOtherSaleStoreList)
       } else {
@@ -818,6 +776,7 @@ export default function StuffDetail() {
     if (objectNo) {
       tempObjectNo = objectNo.substring(0, 1)
     }
+
     if (tempObjectNo === 'T') {
       if (planReqNo) {
         if (delFlg) {
@@ -1306,16 +1265,7 @@ export default function StuffDetail() {
       // params.saleStoreLevel = sessionState.storeLvl
       params.saleStoreLevel = session.storeLvl
     }
-    //수직적설량, 설치높이 0인지 체크
-    // let snow = params.verticalSnowCover
-    // let height = params.installHeight
 
-    // if (snow === '0') {
-    //   return alert(getMessage('stuff.detail.save.valierror1'))
-    // }
-    // if (height === '0') {
-    //   return alert(getMessage('stuff.detail.save.valierror2'))
-    // }
     await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
       if (res.status === 201) {
         alert(getMessage('stuff.detail.tempSave.message1'))
@@ -1389,7 +1339,7 @@ export default function StuffDetail() {
                           )) ||
                             null}
                         </div>
-                        <Button className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
+                        <Button type="button" className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
                           {getMessage('stuff.planReqPopup.title')}
                         </Button>
                       </div>
@@ -1491,12 +1441,9 @@ export default function StuffDetail() {
                                 onChange={onSelectionChange}
                                 getOptionLabel={(x) => x.saleStoreName}
                                 getOptionValue={(x) => x.saleStoreId}
-                                // isClearable={sessionState?.storeLvl === '1' ? true : false}
-                                isClearable={session?.storeLvl === '1' ? true : false}
-                                // isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                isClearable={true}
                                 isDisabled={session?.storeLvl !== '1' ? true : false}
                                 value={saleStoreList.filter(function (option) {
-                                  // console.log('showSaleStoreList:::::', option.saleStoreId)
                                   return option.saleStoreId === selOptions
                                 })}
                               ></Select>
@@ -1516,7 +1463,6 @@ export default function StuffDetail() {
                         {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && ( */}
                         {session?.storeId !== 'T01' && session?.storeLvl === '1' && (
                           <>
-                            신규 T01아닌 1차점
                             <div className="select-wrap mr5" style={{ width: '567px' }}>
                               <Select
                                 id="long-value-select1"
@@ -1528,7 +1474,7 @@ export default function StuffDetail() {
                                 onChange={onSelectionChange}
                                 getOptionLabel={(x) => x.saleStoreName}
                                 getOptionValue={(x) => x.saleStoreId}
-                                isClearable={session?.storeLvl === '1' ? true : false}
+                                isClearable={false}
                                 isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
                                 value={showSaleStoreList.filter(function (option) {
                                   return option.saleStoreId === selOptions
@@ -1548,41 +1494,6 @@ export default function StuffDetail() {
                         )}
                         {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && ( */}
                         {session?.storeId !== 'T01' && session?.storeLvl !== '1' && (
-                          <>
-                            신규 로그인이2차점
-                            <div className="select-wrap mr5" style={{ width: '567px' }}>
-                              <Select
-                                id="long-value-select1"
-                                instanceId="long-value-select1"
-                                className="react-select-custom"
-                                classNamePrefix="custom"
-                                placeholder="Select"
-                                options={saleStoreList}
-                                onChange={onSelectionChange}
-                                getOptionLabel={(x) => x.saleStoreName}
-                                getOptionValue={(x) => x.saleStoreId}
-                                // isClearable={sessionState?.storeLvl === '1' ? true : false}
-                                isClearable={session?.storeLvl === '1' ? true : false}
-                                // isDisabled={sessionState?.storeLvl !== '1' ? true : false}
-                                isDisabled={session?.storeLvl !== '1' ? true : false}
-                                value={saleStoreList.filter(function (option) {
-                                  return option.saleStoreId === selOptions
-                                })}
-                              ></Select>
-                            </div>
-                            <div className="input-wrap" style={{ width: '216px' }}>
-                              <input
-                                type="text"
-                                className="input-light"
-                                value={form.watch('saleStoreId') || ''}
-                                {...form.register('saleStoreId')}
-                                readOnly
-                              />
-                            </div>
-                          </>
-                        )}
-
-                        {/* {(sessionState?.storeId === 'T01' && (
                           <>
                             <div className="select-wrap mr5" style={{ width: '567px' }}>
                               <Select
@@ -1592,12 +1503,11 @@ export default function StuffDetail() {
                                 classNamePrefix="custom"
                                 placeholder="Select"
                                 options={showSaleStoreList}
-                                onInputChange={onInputChange}
                                 onChange={onSelectionChange}
                                 getOptionLabel={(x) => x.saleStoreName}
                                 getOptionValue={(x) => x.saleStoreId}
-                                isClearable={sessionState?.storeLvl === '1' ? true : false}
-                                isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                isClearable={false}
+                                isDisabled={true}
                                 value={showSaleStoreList.filter(function (option) {
                                   return option.saleStoreId === selOptions
                                 })}
@@ -1613,38 +1523,7 @@ export default function StuffDetail() {
                               />
                             </div>
                           </>
-                        )) || (
-                          <>
-                            <div className="select-wrap mr5" style={{ width: '567px' }}>
-                              T01아님
-                              <Select
-                                id="long-value-select1"
-                                instanceId="long-value-select1"
-                                className="react-select-custom"
-                                classNamePrefix="custom"
-                                placeholder="Select"
-                                options={saleStoreList}
-                                onChange={onSelectionChange}
-                                getOptionLabel={(x) => x.saleStoreName}
-                                getOptionValue={(x) => x.saleStoreId}
-                                isClearable={sessionState?.storeLvl === '1' ? true : false}
-                                isDisabled={sessionState?.storeLvl !== '1' ? true : false}
-                                value={saleStoreList.filter(function (option) {
-                                  return option.saleStoreId === selOptions
-                                })}
-                              ></Select>
-                            </div>
-                            <div className="input-wrap" style={{ width: '216px' }}>
-                              <input
-                                type="text"
-                                className="input-light"
-                                value={form.watch('saleStoreId') || ''}
-                                {...form.register('saleStoreId')}
-                                readOnly
-                              />
-                            </div>
-                          </>
-                        )} */}
+                        )}
                       </div>
                     </td>
                   </tr>
@@ -1672,10 +1551,8 @@ export default function StuffDetail() {
                             onChange={onSelectionChange2}
                             getOptionLabel={(x) => x.saleStoreName}
                             getOptionValue={(x) => x.saleStoreId}
-                            // isDisabled={session?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
-                            isDisabled={session?.storeLvl === '1' && form.watch('saleStoreId') != '' && otherSaleStoreList.length > 1 ? false : true}
-                            // isClearable={sessionState?.storeLvl === '1' ? true : false}
-                            isClearable={session?.storeLvl === '1' ? true : false}
+                            isDisabled={otherSaleStoreList.length > 1 ? false : true}
+                            isClearable={true}
                             value={otherSaleStoreList.filter(function (option) {
                               return option.saleStoreId === otherSelOptions
                             })}
diff --git a/src/components/management/StuffSearchCondition.jsx b/src/components/management/StuffSearchCondition.jsx
index 127329cb..7da382f9 100644
--- a/src/components/management/StuffSearchCondition.jsx
+++ b/src/components/management/StuffSearchCondition.jsx
@@ -240,7 +240,7 @@ export default function StuffSearchCondition() {
                 schSelSaleStoreId: allList[0].saleStoreId,
               })
             } else {
-              //201X112 그냥2차점
+              //10X22, 201X112 그냥2차점
               //2차점인데 34들고있는애 202X217
               setSchSelSaleStoreList(res)
               setFavoriteStoreList(res)
diff --git a/src/components/management/popup/PlanRequestPop.jsx b/src/components/management/popup/PlanRequestPop.jsx
index bbe0f6c9..bec3c223 100644
--- a/src/components/management/popup/PlanRequestPop.jsx
+++ b/src/components/management/popup/PlanRequestPop.jsx
@@ -87,10 +87,10 @@ export default function PlanRequestPop(props) {
   const onSubmit = (page, type) => {
     //2차점 테스트 201X112
     const params = {
-      // saleStoreId: 'T100',
-      // saleStoreLevel: '1',
-      saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
-      saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
+      saleStoreId: 'T100',
+      saleStoreLevel: '1',
+      // saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
+      // saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
       schPlanReqNo: schPlanReqNo,
       schTitle: schTitle,
       schAddress: schAddress,
@@ -98,8 +98,8 @@ export default function PlanRequestPop(props) {
       schPlanReqName: schPlanReqName,
       schPlanStatCd: schPlanStatCd,
       schDateGbn: schDateGbn,
-      schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
-      schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
+      // schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
+      // schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
       startRow: type === 'S' ? (1 - 1) * pageSize + 1 : (page - 1) * pageSize + 1,
       endRow: type === 'S' ? 1 * pageSize : page * pageSize,
     }

From a2a3ba121f5a736c41896afe62fcfa9ea46d1d2a Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 1 Nov 2024 10:02:17 +0900
Subject: [PATCH 56/60] =?UTF-8?q?contextmenu=20list=20recoil=20default=20?=
 =?UTF-8?q?=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/CanvasFrame.jsx | 5 ++---
 src/store/contextMenu.js                  | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index 2eec41a5..b0881b6e 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -8,8 +8,7 @@ import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
 import { usePlan } from '@/hooks/usePlan'
 import { useContextMenu } from '@/hooks/useContextMenu'
-import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
-import { useCanvasEvent } from '@/hooks/useCanvasEvent'
+import { currentMenuState } from '@/store/canvasAtom'
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
 import { MENU } from '@/common/common'
@@ -59,7 +58,7 @@ export default function CanvasFrame() {
       <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
 
       <QContextMenu contextRef={canvasRef} canvasProps={canvas} handleKeyup={handleKeyup}>
-        {contextMenu.map((menus, index) => (
+        {contextMenu?.map((menus, index) => (
           <ul key={index}>
             {menus.map((menu) => (
               <li key={menu.id} onClick={(e) => handleClick(e, menu)}>
diff --git a/src/store/contextMenu.js b/src/store/contextMenu.js
index b97fea65..2687df60 100644
--- a/src/store/contextMenu.js
+++ b/src/store/contextMenu.js
@@ -12,6 +12,6 @@ export const contextMenuState = atom({
 
 export const contextMenuListState = atom({
   key: 'contextMenuListState',
-  default: null,
+  default: [[]],
   dangerouslyAllowMutability: true,
 })

From c0cf7c4f9bbd5507c55fc569826efe640cc2e5ab Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 1 Nov 2024 10:02:17 +0900
Subject: [PATCH 57/60] =?UTF-8?q?contextmenu=20list=20recoil=20default=20?=
 =?UTF-8?q?=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/CanvasFrame.jsx | 5 ++---
 src/store/contextMenu.js                  | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index 2eec41a5..b0881b6e 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -8,8 +8,7 @@ import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
 import { usePlan } from '@/hooks/usePlan'
 import { useContextMenu } from '@/hooks/useContextMenu'
-import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
-import { useCanvasEvent } from '@/hooks/useCanvasEvent'
+import { currentMenuState } from '@/store/canvasAtom'
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
 import { MENU } from '@/common/common'
@@ -59,7 +58,7 @@ export default function CanvasFrame() {
       <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
 
       <QContextMenu contextRef={canvasRef} canvasProps={canvas} handleKeyup={handleKeyup}>
-        {contextMenu.map((menus, index) => (
+        {contextMenu?.map((menus, index) => (
           <ul key={index}>
             {menus.map((menu) => (
               <li key={menu.id} onClick={(e) => handleClick(e, menu)}>
diff --git a/src/store/contextMenu.js b/src/store/contextMenu.js
index b97fea65..2687df60 100644
--- a/src/store/contextMenu.js
+++ b/src/store/contextMenu.js
@@ -12,6 +12,6 @@ export const contextMenuState = atom({
 
 export const contextMenuListState = atom({
   key: 'contextMenuListState',
-  default: null,
+  default: [[]],
   dangerouslyAllowMutability: true,
 })

From 57fbcea3a109dfb8f78ad58164c0a8bf374f8f8c Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Fri, 1 Nov 2024 10:47:35 +0900
Subject: [PATCH 58/60] =?UTF-8?q?=EB=B3=B4=EC=A1=B0=EC=84=A0=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/roofcover/useAuxiliaryDrawing.js | 38 ++++++++++++++++++----
 src/util/qpolygon-utils.js                 |  5 +--
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js
index ba631080..956bcf8f 100644
--- a/src/hooks/roofcover/useAuxiliaryDrawing.js
+++ b/src/hooks/roofcover/useAuxiliaryDrawing.js
@@ -22,6 +22,7 @@ import { useSwal } from '@/hooks/useSwal'
 import { booleanPointInPolygon } from '@turf/turf'
 import { usePopup } from '@/hooks/usePopup'
 import { calculateAngle } from '@/util/qpolygon-utils'
+import { QPolygon } from '@/components/fabric/QPolygon'
 
 // 보조선 작성
 export function useAuxiliaryDrawing(id) {
@@ -742,15 +743,38 @@ export function useAuxiliaryDrawing(id) {
     }
 
     const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
-    const innerLines = [...lineHistory.current]
+
+    //lineHistory.current에 있는 선들 중 startPoint와 endPoint가 겹치는 line은 제거
+    // 겹치는 선 하나는 canvas에서 제거한다.
+
+    const tempLines = [...lineHistory.current]
+    lineHistory.current = []
+    tempLines.forEach((line) => {
+      if (
+        lineHistory.current.some(
+          (history) =>
+            JSON.stringify(history.startPoint) === JSON.stringify(line.startPoint) &&
+            JSON.stringify(history.endPoint) === JSON.stringify(line.endPoint),
+        )
+      ) {
+        canvas.remove(line)
+        return
+      }
+
+      lineHistory.current.push(line)
+    })
+
+    const innerLines = lineHistory.current
 
     roofBases.forEach((roofBase) => {
+      const tempPolygonPoints = [...roofBase.points].map((obj) => {
+        return { x: Math.round(obj.x), y: Math.round(obj.y) }
+      })
       const roofInnerLines = innerLines.filter((line) => {
-        const turfPolygon = polygonToTurfPolygon(roofBase)
-
-        // innerLines의 두 점이 모두 polygon 안에 있는지 확인
-        const inPolygon1 = booleanPointInPolygon([line.x1, line.y1], turfPolygon)
-        const inPolygon2 = booleanPointInPolygon([line.x2, line.y2], turfPolygon)
+        const inPolygon1 =
+          tempPolygonPoints.some((point) => point.x === line.x1 && point.y === line.y1) || roofBase.inPolygon({ x: line.x1, y: line.y1 })
+        const inPolygon2 =
+          tempPolygonPoints.some((point) => point.x === line.x2 && point.y === line.y2) || roofBase.inPolygon({ x: line.x2, y: line.y2 })
 
         if (inPolygon1 && inPolygon2) {
           line.attributes = { ...line.attributes, roofId: roofBase.id }
@@ -759,6 +783,8 @@ export function useAuxiliaryDrawing(id) {
       })
 
       roofBase.innerLines = [...roofInnerLines]
+
+      canvas.renderAll()
     })
 
     closePopup(id)
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 7ca7fb79..01140300 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -1034,9 +1034,10 @@ export const splitPolygonWithLines = (polygon) => {
     const routes = []
 
     // 시작점은 시작 hip라인의 출발점
-    const startPoint = point
+    const startPoint = { x: Math.round(point.x), y: Math.round(point.y) }
     // 도착점은 마지막 hip라인의 끝나는 점
-    const endPoint = polygon.points[(index + 1) % polygon.points.length]
+    let endPoint = polygon.points[(index + 1) % polygon.points.length]
+    endPoint = { x: Math.round(endPoint.x), y: Math.round(endPoint.y) }
 
     const startLine = allLines.find((line) => line.startPoint.x === startPoint.x && line.startPoint.y === startPoint.y)
     const endLine = allLines.find((line) => line.startPoint.x === endPoint.x && line.startPoint.y === endPoint.y)

From a63edd0249e98dc5bc8d94445fc74c6e8fba18fc Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Fri, 1 Nov 2024 10:47:55 +0900
Subject: [PATCH 59/60] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=ED=98=84=ED=99=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/management/StuffDetail.jsx     | 50 +++++++++++++------
 .../management/popup/PlanRequestPop.jsx       | 12 ++---
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index dc0ce981..49fc92f8 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -420,7 +420,7 @@ export default function StuffDetail() {
 
   useEffect(() => {
     if (isObjectNotEmpty(detailData)) {
-      console.log('상세데이타세팅:::::', detailData)
+      // console.log('상세데이타세팅:::::', detailData)
       // 도도부현API
       get({ url: '/api/object/prefecture/list' }).then((res) => {
         if (!isEmptyArray(res)) {
@@ -459,6 +459,11 @@ export default function StuffDetail() {
             setFavoriteStoreList(favList)
             setShowSaleStoreList(favList)
 
+            form.setValue('saleStoreId', firstList[0].saleStoreId)
+            form.setValue('saleStoreName', firstList[0].saleStoreName)
+            form.setValue('saleStoreLevel', firstList[0].saleStoreLevel)
+            setSelOptions(firstList[0].saleStoreId)
+
             //상세데이터의 1차점 아이디로 2차점 목록 조회하기
             // url = `/api/object/saleStore/${detailData?.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
             url = `/api/object/saleStore/${detailData?.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
@@ -617,7 +622,6 @@ export default function StuffDetail() {
 
     if (editMode === 'NEW') {
       if (planReqNo !== '') {
-        // console.log('삭제됩니다1111111111111')
         if (confirm(getMessage('stuff.detail.confirm.message1'))) {
           delFlg = true
         } else {
@@ -627,7 +631,6 @@ export default function StuffDetail() {
     } else {
       // EDIT
       if (planReqNo !== null && planReqNo !== '') {
-        // console.log('삭제됩니다2222222222222')
         if (confirm(getMessage('stuff.detail.confirm.message1'))) {
           delFlg = true
         } else {
@@ -641,7 +644,6 @@ export default function StuffDetail() {
       tempObjectNo = objectNo.substring(0, 1)
     }
 
-    // console.log('설계의뢰있을때 1차점 변경 ::::::::::tempObjectNo:::::::', tempObjectNo, planReqNo, delFlg)
     if (tempObjectNo === 'T') {
       if (planReqNo) {
         if (delFlg) {
@@ -652,11 +654,21 @@ export default function StuffDetail() {
             form.setValue('saleStoreName', key.saleStoreName)
             form.setValue('saleStoreLevel', key.saleStoreLevel)
             setSelOptions(key.saleStoreId)
-            //선택한 1차점 정보로 2차점 list 추리기
-            //長府工産株式会社　大阪支社
-            console.log('111111??????111???????????????')
-            // let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
-            // setOtherSaleStoreList(newOtherSaleStoreList)
+            let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
+            let otherList
+            get({ url: url }).then((res) => {
+              if (!isEmptyArray(res)) {
+                res.map((row) => {
+                  row.value = row.saleStoreId
+                  row.label = row.saleStoreName
+                })
+
+                otherList = res
+                setOtherSaleStoreList(otherList)
+              } else {
+                setOtherSaleStoreList([])
+              }
+            })
           } else {
             //X누름
             setSelOptions('')
@@ -722,11 +734,21 @@ export default function StuffDetail() {
         form.setValue('saleStoreName', key.saleStoreName)
         form.setValue('saleStoreLevel', key.saleStoreLevel)
         setSelOptions(key.saleStoreId)
-        //선택한 1차점 정보로 2차점 list 추리기
-        //長府工産株式会社　大阪支社
-        console.log('3333333333333')
-        // let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
-        // setOtherSaleStoreList(newOtherSaleStoreList)
+        let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
+        let otherList
+        get({ url: url }).then((res) => {
+          if (!isEmptyArray(res)) {
+            res.map((row) => {
+              row.value = row.saleStoreId
+              row.label = row.saleStoreName
+            })
+
+            otherList = res
+            setOtherSaleStoreList(otherList)
+          } else {
+            setOtherSaleStoreList([])
+          }
+        })
       } else {
         //X누름
         setSelOptions('')
diff --git a/src/components/management/popup/PlanRequestPop.jsx b/src/components/management/popup/PlanRequestPop.jsx
index bec3c223..bbe0f6c9 100644
--- a/src/components/management/popup/PlanRequestPop.jsx
+++ b/src/components/management/popup/PlanRequestPop.jsx
@@ -87,10 +87,10 @@ export default function PlanRequestPop(props) {
   const onSubmit = (page, type) => {
     //2차점 테스트 201X112
     const params = {
-      saleStoreId: 'T100',
-      saleStoreLevel: '1',
-      // saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
-      // saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
+      // saleStoreId: 'T100',
+      // saleStoreLevel: '1',
+      saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
+      saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
       schPlanReqNo: schPlanReqNo,
       schTitle: schTitle,
       schAddress: schAddress,
@@ -98,8 +98,8 @@ export default function PlanRequestPop(props) {
       schPlanReqName: schPlanReqName,
       schPlanStatCd: schPlanStatCd,
       schDateGbn: schDateGbn,
-      // schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
-      // schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
+      schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
+      schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
       startRow: type === 'S' ? (1 - 1) * pageSize + 1 : (page - 1) * pageSize + 1,
       endRow: type === 'S' ? 1 * pageSize : page * pageSize,
     }

From 1b399160d368b8a2dd18dbfa84c089272df3b88f Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Fri, 1 Nov 2024 10:50:20 +0900
Subject: [PATCH 60/60] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/management/StuffSubHeader.jsx | 2 +-
 src/locales/ja.json                          | 1 +
 src/locales/ko.json                          | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/management/StuffSubHeader.jsx b/src/components/management/StuffSubHeader.jsx
index 12a51394..9c7fef64 100644
--- a/src/components/management/StuffSubHeader.jsx
+++ b/src/components/management/StuffSubHeader.jsx
@@ -88,7 +88,7 @@ export default function StuffSubHeader({ type }) {
                 <li className="title-item">
                   <a className="sub-header-title" onClick={moveFloorPlan}>
                     <span className="icon drawing"></span>
-                    {getMessage('plan.menu.plan.drawing')}
+                    {getMessage('stuff.temp.subTitle2')}
                   </a>
                 </li>
               </ul>
diff --git a/src/locales/ja.json b/src/locales/ja.json
index aed7d34d..a1850300 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -586,6 +586,7 @@
   "stuff.addressPopup.btn2": "住所適用",
   "stuff.planReqPopup.title": "設計依頼のインポート",
   "stuff.temp.subTitle": "商品情報",
+  "stuff.temp.subTitle2": "作図",
   "stuff.detail.header.message1": "存在しないものです。",
   "stuff.detail.header.message2": "商品番号がコピーされました。",
   "stuff.detail.header.message3": "存在しないものです。",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 9d550aa0..a6de574e 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -592,6 +592,7 @@
   "stuff.addressPopup.btn2": "주소적용",
   "stuff.planReqPopup.title": "설계의뢰 불러오기",
   "stuff.temp.subTitle": "물건정보",
+  "stuff.temp.subTitle2": "도면작성",
   "stuff.detail.header.message1": "존재하지 않는 물건입니다.",
   "stuff.detail.header.message2": "물건번호가 복사되었습니다.",
   "stuff.detail.header.message3": "물건번호 복사에 실패했습니다.",