From 51c4fcfe1462e0c82b0ff1c33422d3e886e88e1c Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 1 Nov 2024 18:10:27 +0900
Subject: [PATCH 01/18] =?UTF-8?q?canvas=20menu=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20zoom=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasMenu.jsx | 12 ++++++++----
 src/hooks/useCanvasEvent.js              | 15 ++++++++++++++-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 63f1840d..c77e1870 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -49,7 +49,7 @@ export default function CanvasMenu(props) {
   const sessionState = useRecoilValue(sessionStore)
   const globalLocale = useRecoilValue(globalLocaleStore)
   const canvas = useRecoilValue(canvasState)
-  const { handleZoomClear } = useCanvasEvent()
+  const { handleZoomClear, handleZoom } = useCanvasEvent()
   const { handleMenu } = useMenu()
 
   const { getMessage } = useMessage()
@@ -201,14 +201,18 @@ export default function CanvasMenu(props) {
                 <button
                   className="control-btn minus"
                   onClick={() => {
-                    canvas.setZoom(canvas.getZoom() - 0.1)
+                    handleZoom(false)
                   }}
                 ></button>
                 <span>{canvasZoom}%</span>
-                <button className="control-btn plus" onClick={handleZoomClear}></button>
+                <button
+                  className="control-btn plus"
+                  onClick={() => {
+                    handleZoom(true)
+                  }}
+                ></button>
               </div>
               <div className="btn-from">
-                <button className="btn07" onClick={handleClear}></button>
                 <button className="btn08" onClick={handleSaveCanvas}></button>
                 <button className="btn09"></button>
               </div>
diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js
index ad3e8e75..4bab1fd6 100644
--- a/src/hooks/useCanvasEvent.js
+++ b/src/hooks/useCanvasEvent.js
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 import { canvasSizeState, canvasState, canvasZoomState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
@@ -18,6 +18,10 @@ export function useCanvasEvent() {
   const lengthTextOption = useRecoilValue(fontSelector('lengthText'))
   const { modifiedPlanFlag, setModifiedPlanFlag } = usePlan()
 
+  useEffect(() => {
+    canvas?.setZoom(canvasZoom / 100)
+  }, [canvasZoom])
+
   // 기본적인 이벤트 필요시 추가
   const attachDefaultEventOnCanvas = () => {
     removeEventOnCanvas()
@@ -365,6 +369,14 @@ export function useCanvasEvent() {
     })
   }
 
+  const handleZoom = (isZoom) => {
+    if (isZoom) {
+      setCanvasZoom(canvasZoom + 10)
+    } else {
+      setCanvasZoom(canvasZoom - 10)
+    }
+  }
+
   const handleZoomClear = () => {
     setCanvasZoom(100)
     canvas.set({ zoom: 1 })
@@ -376,5 +388,6 @@ export function useCanvasEvent() {
     setCanvasForEvent,
     attachDefaultEventOnCanvas,
     handleZoomClear,
+    handleZoom,
   }
 }

From ea8b4a3e36570f2b26a4c0aaeafb73ec2c8a0aff Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 1 Nov 2024 18:10:42 +0900
Subject: [PATCH 02/18] =?UTF-8?q?contextmenu=20modal=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/context-menu/QContextMenu.jsx |  3 +++
 src/hooks/useContextMenu.js                         | 13 +++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx
index f710485f..9d3eb4f3 100644
--- a/src/components/common/context-menu/QContextMenu.jsx
+++ b/src/components/common/context-menu/QContextMenu.jsx
@@ -3,12 +3,14 @@ import { useEffect } from 'react'
 import '@/styles/contents.scss'
 import { useRecoilState } from 'recoil'
 import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
+import { useTempGrid } from '@/hooks/useTempGrid'
 
 export default function QContextMenu(props) {
   const { contextRef, canvasProps, handleKeyup } = props
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
   const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
   const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
+  const { tempGridMode, setTempGridMode } = useTempGrid()
 
   let contextType = ''
 
@@ -32,6 +34,7 @@ export default function QContextMenu(props) {
 
     const handleContextMenu = (e) => {
       // e.preventDefault() //기존 contextmenu 막고
+      if (tempGridMode) return
       const position = {
         x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
         y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index 8a6226a1..ccc8b8d8 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -43,12 +43,11 @@ 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)
   const { handleZoomClear } = useCanvasEvent()
-
   const currentMenuSetting = () => {
     switch (currentMenu) {
       case MENU.PLAN_DRAWING:
@@ -172,6 +171,7 @@ export function useContextMenu() {
             {
               id: 'sizeEdit',
               name: getMessage('contextmenu.size.edit'),
+              component: <SizeSetting id={popupId} target={currentObject} />,
             },
             {
               id: 'remove',
@@ -207,6 +207,7 @@ export function useContextMenu() {
             {
               id: 'flowDirectionEdit',
               name: getMessage('contextmenu.flow.direction.edit'),
+              component: <FlowDirectionSetting id={popupId} />,
             },
           ],
         ])
@@ -241,7 +242,7 @@ export function useContextMenu() {
       if (temp.length > 0) menu = temp
     }
 
-    handleClick(null, menu)
+    if (menu) handleClick(null, menu)
   }
 
   useEffect(() => {
@@ -342,6 +343,7 @@ export function useContextMenu() {
               {
                 id: 'sizeEdit',
                 name: getMessage('contextmenu.size.edit'),
+                component: <SizeSetting id={popupId} target={currentObject} />,
               },
               {
                 id: 'openingRemove',
@@ -419,19 +421,23 @@ export function useContextMenu() {
           ])
           break
         case 'lineGrid':
+        case 'tempGrid':
           setContextMenu([
             [
               {
                 id: 'gridMove',
                 name: getMessage('modal.grid.move'),
+                component: <GridMove id={popupId} />,
               },
               {
                 id: 'gridCopy',
                 name: getMessage('modal.grid.copy'),
+                component: <GridCopy id={popupId} />,
               },
               {
                 id: 'gridColorEdit',
                 name: getMessage('contextmenu.grid.color.edit'),
+                component: <ColorPickerModal id={popupId} color={gridColor} setColor={setGridColor} />,
               },
               {
                 id: 'remove',
@@ -561,7 +567,6 @@ export function useContextMenu() {
           ])
           break
         case 'module':
-        case 'dimensionLineText':
           setContextMenu([
             [
               {

From f8f769fd49c43d2fb327320360e52d839b7f0977 Mon Sep 17 00:00:00 2001
From: nalpari <yoo32767@gmail.com>
Date: Mon, 4 Nov 2024 13:40:42 +0900
Subject: [PATCH 03/18] feat: add useEstimateController

---
 .../estimate/useEstimateController.js         | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/hooks/floorPlan/estimate/useEstimateController.js

diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js
new file mode 100644
index 00000000..280c70da
--- /dev/null
+++ b/src/hooks/floorPlan/estimate/useEstimateController.js
@@ -0,0 +1,60 @@
+import { useAxios } from '@/hooks/useAxios'
+import { useReducer } from 'react'
+
+const reducer = (prevState, nextState) => {
+  return { ...prevState, ...nextState }
+}
+
+// Constants
+const ESTIMATE_API_ENDPOINT = '/api/estimates' // API 엔드포인트 정의
+
+const defaultEstimateData = {
+  name: '',
+  objectName: '',
+  estimateDate: '',
+  itemList: [{ id: 1, name: '' }],
+}
+
+// Helper functions
+const updateItemInList = (itemList, id, updates) => {
+  return itemList.map((item) => (item.id === id ? { ...item, ...updates } : item))
+}
+
+export const useEstimateController = () => {
+  const { promisePost } = useAxios()
+  const [state, setState] = useReducer(reducer, defaultEstimateData)
+
+  const updateItem = (id, updates) => {
+    setState({
+      itemList: updateItemInList(state.itemList, id, updates),
+    })
+  }
+
+  const addItem = () => {
+    const newId = Math.max(...state.itemList.map((item) => item.id)) + 1
+    setState({
+      itemList: [...state.itemList, { id: newId, name: '' }],
+    })
+  }
+
+  const handleEstimateSubmit = async () => {
+    try {
+      const result = await promisePost({
+        url: ESTIMATE_API_ENDPOINT,
+        data: state,
+      })
+      return result
+    } catch (error) {
+      console.error('Failed to submit estimate:', error)
+      throw error
+    }
+  }
+
+  return {
+    state,
+    setState,
+    updateItem,
+    addItem,
+    handleEstimateSubmit,
+  }
+}

From c476709850506fb106b79801d95ac5e826479e74 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Mon, 4 Nov 2024 14:11:27 +0900
Subject: [PATCH 04/18] =?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=20=EB=A9=94=EC=84=B8=EC=A7=80=20&?=
 =?UTF-8?q?=20=EA=B2=AC=EC=A0=81=EC=84=9C=20=EC=83=81=EC=84=B8=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EC=83=81=EB=8B=A8=20CanvasMenu=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5=20=EB=B2=84=ED=8A=BC=20=EA=B4=80=EB=A0=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasMenu.jsx | 5 ++++-
 src/locales/ja.json                      | 5 ++++-
 src/locales/ko.json                      | 5 ++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 6ac20787..09253f72 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -32,6 +32,8 @@ import { menusState, menuTypeState } from '@/store/menuAtom'
 import useMenu from '@/hooks/common/useMenu'
 import { MENU } from '@/common/common'
 
+import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
+
 export default function CanvasMenu(props) {
   const { menuNumber, setMenuNumber } = props
   const pathname = usePathname()
@@ -51,6 +53,7 @@ export default function CanvasMenu(props) {
   const canvas = useRecoilValue(canvasState)
   const { handleZoomClear } = useCanvasEvent()
   const { handleMenu } = useMenu()
+  const { handleEstimateSubmit } = useEstimateController()
 
   const { getMessage } = useMessage()
   const { currentCanvasPlan, saveCanvas } = usePlan()
@@ -222,7 +225,7 @@ export default function CanvasMenu(props) {
                   <span className="ico ico01"></span>
                   <span>{getMessage('plan.menu.estimate.docDown')}</span>
                 </button>
-                <button className="btn-frame gray ico-flx">
+                <button className="btn-frame gray ico-flx" onClick={handleEstimateSubmit}>
                   <span className="ico ico02"></span>
                   <span>{getMessage('plan.menu.estimate.save')}</span>
                 </button>
diff --git a/src/locales/ja.json b/src/locales/ja.json
index c57582b2..e4605537 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -814,7 +814,10 @@
   "estimate.detail.sepcialEstimateProductInfo.calcFormula2": "PKG単価 (W)×PKG容量(W)",
   "estimate.detail.header.showPrice": "価格表示",
   "estimate.detail.showPrice.btn1": "Pricing",
-  "estimate.detail.showPrice.description": "クリックして製品の特異性を確認する",
+  "estimate.detail.showPrice.description1": "製品価格 OPEN",
+  "estimate.detail.showPrice.description2": "追加, 変更資材",
+  "estimate.detail.showPrice.description3": "添付必須",
+  "estimate.detail.showPrice.description4": "クリックして製品の特異性を確認する",
   "estimate.detail.showPrice.btn2": "製品を追加",
   "estimate.detail.showPrice.btn3": "製品削除"
 }
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 1cb2c279..03443a0b 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -820,7 +820,10 @@
   "estimate.detail.sepcialEstimateProductInfo.calcFormula2": "PKG단가(W) * PKG용량(W)",
   "estimate.detail.header.showPrice": "가격표시",
   "estimate.detail.showPrice.btn1": "Pricing",
-  "estimate.detail.showPrice.description": "클릭하여 제품 특이사항 확인",
+  "estimate.detail.showPrice.description1": "제품 가격 OPEN",
+  "estimate.detail.showPrice.description2": "추가, 변경 자재",
+  "estimate.detail.showPrice.description3": "첨부필수",
+  "estimate.detail.showPrice.description4": "클릭하여 제품 특이사항 확인",
   "estimate.detail.showPrice.btn2": "제품추가",
   "estimate.detail.showPrice.btn3": "제품삭제"
 }

From 0adfe0916c496e3503818cf4ed7eabbb848ccf26 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Mon, 4 Nov 2024 14:46:38 +0900
Subject: [PATCH 05/18] =?UTF-8?q?polygon=20name=20=EC=88=98=EC=A0=95,=20?=
 =?UTF-8?q?=EC=A7=80=EB=B6=95=20=EB=82=98=EB=88=84=EA=B8=B0=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/hooks/option/useCanvasSetting.js          |   8 +-
 src/hooks/option/useFirstOption.js            |   8 +-
 src/hooks/roofcover/useAuxiliaryDrawing.js    |  19 +-
 src/hooks/roofcover/useEavesGableEdit.js      |   8 +-
 src/hooks/roofcover/useMovementSetting.js     |   5 +-
 src/hooks/roofcover/usePropertiesSetting.js   |   4 +-
 .../roofcover/useRoofAllocationSetting.js     |  11 +-
 .../roofcover/useRoofShapePassivitySetting.js |  10 +-
 src/hooks/roofcover/useRoofShapeSetting.js    |  10 +-
 src/store/settingAtom.js                      |   2 +-
 src/util/canvas-util.js                       |   6 +-
 src/util/qpolygon-utils.js                    | 257 +++++++++++++++++-
 12 files changed, 299 insertions(+), 49 deletions(-)

diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 0f87e156..2b2ea3c5 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -225,9 +225,9 @@ export function useCanvasSetting() {
     const option1 = settingModalFirstOptions.option1
 
     // 'allocDisplay' 할당 표시
-    // 'outlineDisplay' 외벽선 표시  'outerLine', 'wallLine'
+    // 'outlineDisplay' 외벽선 표시  'outerLine', POLYGON_TYPE.WALL
     // 'gridDisplay' 그리드 표시     'lindGrid', 'dotGrid'
-    // 'lineDisplay' 지붕선 표시     'roof', 'roofBase'
+    // 'lineDisplay' 지붕선 표시     'roof', POLYGON_TYPE.ROOF
     // 'wordDisplay' 문자 표시
     // 'circuitNumDisplay' 회로번호 표시
     // 'flowDisplay' 흐름방향 표시   'arrow'
@@ -244,13 +244,13 @@ export function useCanvasSetting() {
           optionName = ['1']
           break
         case 'outlineDisplay': //외벽선 표시
-          optionName = ['outerLine', 'wallLine']
+          optionName = ['outerLine', POLYGON_TYPE.WALL]
           break
         case 'gridDisplay': //그리드 표시
           optionName = ['lindGrid', 'dotGrid']
           break
         case 'lineDisplay': //지붕선 표시
-          optionName = ['roof', 'roofBase']
+          optionName = ['roof', POLYGON_TYPE.ROOF]
           break
         case 'wordDisplay': //문자 표시
           optionName = ['6']
diff --git a/src/hooks/option/useFirstOption.js b/src/hooks/option/useFirstOption.js
index c3778587..4b85b4c4 100644
--- a/src/hooks/option/useFirstOption.js
+++ b/src/hooks/option/useFirstOption.js
@@ -12,9 +12,9 @@ export function useFirstOption() {
     const option1 = settingModalFirstOptions.option1
 
     // 'allocDisplay' 할당 표시
-    // 'outlineDisplay' 외벽선 표시  'outerLine', 'wallLine'
+    // 'outlineDisplay' 외벽선 표시  'outerLine', POLYGON_TYPE.WALL
     // 'gridDisplay' 그리드 표시     'lindGrid', 'dotGrid'
-    // 'lineDisplay' 지붕선 표시     'roof', 'roofBase'
+    // 'lineDisplay' 지붕선 표시     'roof', POLYGON_TYPE.ROOF
     // 'wordDisplay' 문자 표시
     // 'circuitNumDisplay' 회로번호 표시
     // 'flowDisplay' 흐름방향 표시   'arrow'
@@ -30,13 +30,13 @@ export function useFirstOption() {
           optionName = ['1']
           break
         case 'outlineDisplay': //외벽선 표시
-          optionName = ['outerLine', 'wallLine']
+          optionName = ['outerLine', POLYGON_TYPE.WALL]
           break
         case 'gridDisplay': //그리드 표시
           optionName = ['lineGrid', 'dotGrid', 'adsorptionPoint', 'tempGrid']
           break
         case 'lineDisplay': //지붕선 표시
-          optionName = ['roof', 'roofBase']
+          optionName = ['roof', POLYGON_TYPE.ROOF]
           break
         case 'wordDisplay': //문자 표시
           optionName = ['6']
diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js
index 956bcf8f..72b094c9 100644
--- a/src/hooks/roofcover/useAuxiliaryDrawing.js
+++ b/src/hooks/roofcover/useAuxiliaryDrawing.js
@@ -15,7 +15,7 @@ import {
   outerLineLength2State,
   outerLineTypeState,
 } from '@/store/outerLineAtom'
-import { calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
+import { calculateIntersection, distanceBetweenPoints, findClosestPoint, isPointOnLine, polygonToTurfPolygon } from '@/util/canvas-util'
 import { fabric } from 'fabric'
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 import { useSwal } from '@/hooks/useSwal'
@@ -23,6 +23,7 @@ import { booleanPointInPolygon } from '@turf/turf'
 import { usePopup } from '@/hooks/usePopup'
 import { calculateAngle } from '@/util/qpolygon-utils'
 import { QPolygon } from '@/components/fabric/QPolygon'
+import { POLYGON_TYPE } from '@/common/common'
 
 // 보조선 작성
 export function useAuxiliaryDrawing(id) {
@@ -80,7 +81,7 @@ export function useAuxiliaryDrawing(id) {
 
   useEffect(() => {
     // innerLines가 있을경우 삭제
-    const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roofBase')
+    const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     if (roofs.length === 0) {
       swalFire({ text: '지붕형상이 없습니다.' })
       closePopup(id)
@@ -561,7 +562,7 @@ export function useAuxiliaryDrawing(id) {
       return
     }
 
-    const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
+    const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     /*const allLines = [...auxiliaryLines]
 
     roofBases.forEach((roofBase) => {
@@ -611,6 +612,7 @@ export function useAuxiliaryDrawing(id) {
           },
         )
         lineHistory.current.push(newLine)
+        lineHistory.current = lineHistory.current.filter((history) => history !== line1)
         removeLine(line1)
         intersectionPoints.current.push(...interSectionPointsWithRoofLines)
         return
@@ -659,6 +661,7 @@ export function useAuxiliaryDrawing(id) {
           })
         }
         lineHistory.current.push(newLine)
+        lineHistory.current = lineHistory.current.filter((history) => history !== line1)
         removeLine(line1)
       })
 
@@ -742,7 +745,7 @@ export function useAuxiliaryDrawing(id) {
       return
     }
 
-    const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
+    const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
 
     //lineHistory.current에 있는 선들 중 startPoint와 endPoint가 겹치는 line은 제거
     // 겹치는 선 하나는 canvas에서 제거한다.
@@ -772,9 +775,13 @@ export function useAuxiliaryDrawing(id) {
       })
       const roofInnerLines = innerLines.filter((line) => {
         const inPolygon1 =
-          tempPolygonPoints.some((point) => point.x === line.x1 && point.y === line.y1) || roofBase.inPolygon({ x: line.x1, y: line.y1 })
+          tempPolygonPoints.some((point) => point.x === line.x1 && point.y === line.y1) ||
+          roofBase.inPolygon({ x: line.x1, y: line.y1 }) ||
+          roofBase.lines.some((line) => isPointOnLine(line, { 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 })
+          tempPolygonPoints.some((point) => point.x === line.x2 && point.y === line.y2) ||
+          roofBase.inPolygon({ x: line.x2, y: line.y2 }) ||
+          roofBase.lines.some((line) => isPointOnLine(line, { x: line.x2, y: line.y2 }))
 
         if (inPolygon1 && inPolygon2) {
           line.attributes = { ...line.attributes, roofId: roofBase.id }
diff --git a/src/hooks/roofcover/useEavesGableEdit.js b/src/hooks/roofcover/useEavesGableEdit.js
index 7696dc7a..5619abfb 100644
--- a/src/hooks/roofcover/useEavesGableEdit.js
+++ b/src/hooks/roofcover/useEavesGableEdit.js
@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
-import { LINE_TYPE } from '@/common/common'
+import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import { useLine } from '@/hooks/useLine'
 import { useMode } from '@/hooks/useMode'
 import { outerLineFixState } from '@/store/outerLineAtom'
@@ -54,7 +54,7 @@ export function useEavesGableEdit(id) {
   }, [])
 
   useEffect(() => {
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
     wallLines.forEach((wallLine) => {
       convertPolygonToLines(wallLine)
     })
@@ -160,7 +160,7 @@ export function useEavesGableEdit(id) {
       attributes,
     })
 
-    const roofBases = canvas?.getObjects().filter((obj) => obj.name === 'roofBase')
+    const roofBases = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
 
     roofBases.forEach((roof) => {
       roof.innerLines.forEach((line) => {
@@ -169,7 +169,7 @@ export function useEavesGableEdit(id) {
       canvas.remove(roof)
     })
 
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
     const removeTargets = canvas.getObjects().filter((obj) => obj.name === 'pitchText')
     removeTargets.forEach((obj) => {
       canvas.remove(obj)
diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js
index f0814a44..f09aee6b 100644
--- a/src/hooks/roofcover/useMovementSetting.js
+++ b/src/hooks/roofcover/useMovementSetting.js
@@ -4,6 +4,7 @@ import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useRef, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
+import { POLYGON_TYPE } from '@/common/common'
 
 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@@ -41,7 +42,7 @@ export function useMovementSetting(id) {
   }, [type])
 
   useEffect(() => {
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine') // 기존 wallLine의 visible false
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) // 기존 wallLine의 visible false
     wallLines.forEach((line) => {
       line.set({ visible: false })
     })
@@ -55,7 +56,7 @@ export function useMovementSetting(id) {
     addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
     return () => {
       initEvent()
-      const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+      const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
       wallLines.forEach((line) => {
         line.set({ visible: true })
       })
diff --git a/src/hooks/roofcover/usePropertiesSetting.js b/src/hooks/roofcover/usePropertiesSetting.js
index b999c001..3a1535a3 100644
--- a/src/hooks/roofcover/usePropertiesSetting.js
+++ b/src/hooks/roofcover/usePropertiesSetting.js
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import { LINE_TYPE } from '@/common/common'
+import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useMode } from '@/hooks/useMode'
@@ -135,7 +135,7 @@ export function usePropertiesSetting(id) {
       hideLine(line)
     })
 
-    const wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+    const wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
 
     wall.lines = [...lines]
 
diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index 3be745d6..c229549e 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@@ -7,6 +7,7 @@ import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
 import { roofDisplaySelector } from '@/store/settingAtom'
 import { usePopup } from '@/hooks/usePopup'
+import { POLYGON_TYPE } from '@/common/common'
 
 // 지붕면 할당
 export function useRoofAllocationSetting(id) {
@@ -81,12 +82,12 @@ export function useRoofAllocationSetting(id) {
   const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(roofMaterials[0])
 
   useEffect(() => {
-    const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
+    const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     if (roofBases.length === 0) {
       swalFire({ text: '할당할 지붕이 없습니다.' })
       closePopup(id)
     }
-    // if (type === 'roofBase') {
+    // if (type === POLYGON_TYPE.ROOF) {
     //   // 지붕면 할당
     //
     // } else if ('roof') {
@@ -104,8 +105,8 @@ export function useRoofAllocationSetting(id) {
 
   // 선택한 지붕재로 할당
   const handleSave = () => {
-    const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+    const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
     roofBases.forEach((roofBase) => {
       try {
         splitPolygonWithLines(roofBase)
@@ -117,7 +118,7 @@ export function useRoofAllocationSetting(id) {
         canvas.remove(line)
       })
 
-      canvas.remove(roofBase)
+      // canvas.remove(roofBase)
     })
 
     wallLines.forEach((wallLine) => {
diff --git a/src/hooks/roofcover/useRoofShapePassivitySetting.js b/src/hooks/roofcover/useRoofShapePassivitySetting.js
index ef7a4477..e0af3205 100644
--- a/src/hooks/roofcover/useRoofShapePassivitySetting.js
+++ b/src/hooks/roofcover/useRoofShapePassivitySetting.js
@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useLine } from '@/hooks/useLine'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
-import { LINE_TYPE } from '@/common/common'
+import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import { useMode } from '@/hooks/useMode'
 import { usePolygon } from '@/hooks/usePolygon'
 import { outerLineFixState } from '@/store/outerLineAtom'
@@ -60,7 +60,7 @@ export function useRoofShapePassivitySetting(id) {
   useEffect(() => {
     if (!isLoading) return
     addCanvasMouseEventListener('mouse:down', mouseDown)
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
 
     canvas?.remove(...wallLines)
 
@@ -185,7 +185,7 @@ export function useRoofShapePassivitySetting(id) {
   }
 
   const handleLineToPolygon = () => {
-    const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
+    const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     const exceptObjs = canvas.getObjects().filter((obj) => obj.name !== 'outerLine' && obj.parent?.name !== 'outerLine')
     const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     exceptObjs.forEach((obj) => {
@@ -199,10 +199,10 @@ export function useRoofShapePassivitySetting(id) {
     let wall
 
     if (isFix.current) {
-      wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+      wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
     } else {
       // 그냥 닫을 경우 처리
-      wall = addPolygonByLines([...initLines.current], { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+      wall = addPolygonByLines([...initLines.current], { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
       lines.forEach((line, idx) => {
         line.attributes = initLines.current[idx].attributes
       })
diff --git a/src/hooks/roofcover/useRoofShapeSetting.js b/src/hooks/roofcover/useRoofShapeSetting.js
index ae886ce9..2823415d 100644
--- a/src/hooks/roofcover/useRoofShapeSetting.js
+++ b/src/hooks/roofcover/useRoofShapeSetting.js
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
-import { LINE_TYPE } from '@/common/common'
+import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useMode } from '@/hooks/useMode'
 import { useLine } from '@/hooks/useLine'
@@ -129,7 +129,7 @@ export function useRoofShapeSetting(id) {
 
   useEffect(() => {
     if (shapeNum === 4) {
-      canvas?.remove(canvas.getObjects().find((obj) => obj.name === 'wallLine'))
+      canvas?.remove(canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.WALL))
       const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
       outerLines.forEach((line) => {
         showLine(line)
@@ -376,20 +376,20 @@ export function useRoofShapeSetting(id) {
     // 기존 wallLine, roofBase 제거
     canvas
       .getObjects()
-      .filter((obj) => obj.name === 'wallLine')
+      .filter((obj) => obj.name === POLYGON_TYPE.WALL)
       .forEach((line) => {
         canvas.remove(line)
       })
 
     canvas
       .getObjects()
-      .filter((obj) => obj.name === 'roofBase')
+      .filter((obj) => obj.name === POLYGON_TYPE.ROOF)
       .forEach((obj) => {
         canvas.remove(...obj.innerLines)
         canvas.remove(obj)
       })
 
-    const polygon = addPolygonByLines(outerLines, { name: 'wallLine' })
+    const polygon = addPolygonByLines(outerLines, { name: POLYGON_TYPE.WALL })
     polygon.lines = [...outerLines]
 
     addPitchTextsByOuterLines()
diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js
index 9679d2d7..fede515e 100644
--- a/src/store/settingAtom.js
+++ b/src/store/settingAtom.js
@@ -5,7 +5,7 @@ export const settingModalFirstOptionsState = atom({
   default: {
     option1: [
       { id: 1, column: 'allocDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
-      { id: 2, column: 'outlineDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false },
+      { id: 2, column: 'outlineDisplay', name: 'modal.canvas.setting.first.option.outline', selected: true },
       { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
       { id: 4, column: 'lineDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
       { id: 5, column: 'wordDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js
index be2249a6..1a78f991 100644
--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@@ -521,9 +521,11 @@ export function isPointOnLine(line, point) {
   const a = line.y2 - line.y1
   const b = line.x1 - line.x2
   const c = line.x2 * line.y1 - line.x1 * line.y2
-  return a * point.x + b * point.y + c === 0
-}
+  const result = Math.abs(a * point.x + b * point.y + c) / 100
 
+  // 점이 선 위에 있는지 확인
+  return result <= 10
+}
 /**
  * 점과 가까운 line 찾기
  * @param point
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 8e9c3553..65cbc96d 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -1,6 +1,14 @@
 import { fabric } from 'fabric'
 import { QLine } from '@/components/fabric/QLine'
-import { calculateIntersection, distanceBetweenPoints, findClosestPoint, getDegreeByChon, getDirectionByPoint } from '@/util/canvas-util'
+import {
+  calculateIntersection,
+  distanceBetweenPoints,
+  findClosestPoint,
+  getDegreeByChon,
+  getDirectionByPoint,
+  isPointOnLine,
+} from '@/util/canvas-util'
+
 import { QPolygon } from '@/components/fabric/QPolygon'
 import * as turf from '@turf/turf'
 import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
@@ -957,10 +965,13 @@ export default function offsetPolygon(vertices, offset) {
   }
 }
 
-export const splitPolygonWithLines = (polygon) => {
+/*export const splitPolygonWithLines = (polygon) => {
   const roofs = []
   const allLines = [...polygon.innerLines]
 
+  const polygonLines = polygon.lines
+  const innerLines = polygon.innerLines
+
   allLines.forEach((line) => {
     line.startPoint = { x: line.x1, y: line.y1 }
     line.endPoint = { x: line.x2, y: line.y2 }
@@ -983,10 +994,10 @@ export const splitPolygonWithLines = (polygon) => {
     })
   })
 
-  /**
+  /!**
    * 좌표 테스트용
-   */
-  /*allLines.forEach((line) => {
+   *!/
+  /!*allLines.forEach((line) => {
     const text = new fabric.Text(`(${line.startPoint.x},${line.startPoint.y})`, {
       left: line.startPoint.x,
       top: line.startPoint.y,
@@ -1015,10 +1026,10 @@ export const splitPolygonWithLines = (polygon) => {
 
     polygon.canvas.add(text)
     polygon.canvas.renderAll()
-  })*/
-  /**
+  })*!/
+  /!**
    * 좌표 테스트용 끝
-   */
+   *!/
 
   polygon.points.forEach((point, index) => {
     allLines.forEach((line) => {
@@ -1164,6 +1175,233 @@ export const splitPolygonWithLines = (polygon) => {
     polygon.canvas.add(roof)
     polygon.canvas.renderAll()
   })
+}*/
+export const splitPolygonWithLines = (polygon) => {
+  const canvas = polygon.canvas
+  polygon.set({ visible: false })
+  let innerLines = [...polygon.innerLines]
+  let polygonLines = [...polygon.lines]
+  const roofs = []
+
+  let delIndexs = []
+  let newLines = []
+
+  polygonLines.forEach((line, index) => {
+    line.tempIndex = index
+    innerLines.forEach((innerLine) => {
+      let newLine1, newLine2
+      if (isPointOnLine(line, innerLine.startPoint)) {
+        // 해당 line을 startPoint로 나눈 line2개를 canvas에 추가 하고 기존 line을 제거한다.
+        newLine1 = new QLine([line.x1, line.y1, innerLine.startPoint.x, innerLine.startPoint.y], {
+          fontSize: polygon.fontSize,
+          stroke: 'black',
+          strokeWidth: 3,
+        })
+
+        newLine2 = new QLine([innerLine.startPoint.x, innerLine.startPoint.y, line.x2, line.y2], {
+          fontSize: polygon.fontSize,
+          stroke: 'black',
+          strokeWidth: 3,
+        })
+        delIndexs.push(polygonLines.indexOf(line))
+        canvas.remove(polygonLines[polygonLines.indexOf(line)])
+        if (newLine1.length / 10 > 10) {
+          newLines.push(newLine1)
+        }
+        if (newLine2.length / 10 > 10) {
+          newLines.push(newLine2)
+        }
+      }
+      if (isPointOnLine(line, innerLine.endPoint)) {
+        newLine1 = new QLine([line.x1, line.y1, innerLine.endPoint.x, innerLine.endPoint.y], {
+          fontSize: polygon.fontSize,
+          stroke: 'black',
+          strokeWidth: 3,
+        })
+
+        newLine2 = new QLine([innerLine.endPoint.x, innerLine.endPoint.y, line.x2, line.y2], {
+          fontSize: polygon.fontSize,
+          stroke: 'black',
+          strokeWidth: 3,
+        })
+        delIndexs.push(polygonLines.indexOf(line))
+        canvas.remove(polygonLines[polygonLines.indexOf(line)])
+        if (newLine1.length / 10 > 10) {
+          newLines.push(newLine1)
+        }
+        if (newLine2.length / 10 > 10) {
+          newLines.push(newLine2)
+        }
+      }
+    })
+  })
+  polygonLines = polygonLines.filter((line) => !delIndexs.includes(line.tempIndex))
+  polygonLines = [...polygonLines, ...newLines]
+
+  const allLines = [...polygonLines, ...innerLines]
+
+  /**
+   * 왼쪽 상단을 startPoint로 전부 변경
+   */
+  allLines.forEach((line) => {
+    let startPoint // 시작점
+    let endPoint // 끝점
+    if (line.x1 < line.x2) {
+      startPoint = { x: line.x1, y: line.y1 }
+      endPoint = { x: line.x2, y: line.y2 }
+    } else if (line.x1 > line.x2) {
+      startPoint = { x: line.x2, y: line.y2 }
+      endPoint = { x: line.x1, y: line.y1 }
+    } else {
+      if (line.y1 < line.y2) {
+        startPoint = { x: line.x1, y: line.y1 }
+        endPoint = { x: line.x2, y: line.y2 }
+      } else {
+        startPoint = { x: line.x2, y: line.y2 }
+        endPoint = { x: line.x1, y: line.y1 }
+      }
+    }
+
+    line.startPoint = startPoint
+    line.endPoint = endPoint
+  })
+
+  polygonLines.forEach((line) => {
+    const startPoint = line.startPoint // 시작점
+    let arrivalPoint = line.endPoint // 도착점
+
+    let currentPoint = startPoint
+    const roofPoints = [startPoint]
+
+    const startLine = line
+    const visitPoints = [startPoint]
+    const visitLines = [startLine]
+    let cnt = 0
+
+    while (!isSamePoint(currentPoint, arrivalPoint)) {
+      line.set({ stroke: 'red' })
+      canvas.renderAll()
+      let nextLines = allLines.filter(
+        (line2) =>
+          (isSamePoint(line2.startPoint, currentPoint) || isSamePoint(line2.endPoint, currentPoint)) &&
+          line !== line2 &&
+          innerLines.includes(line2) &&
+          !visitLines.includes(line2),
+      )
+
+      if (nextLines.length === 0) {
+        nextLines = allLines.filter(
+          (line2) =>
+            (isSamePoint(line2.startPoint, currentPoint) || isSamePoint(line2.endPoint, currentPoint)) &&
+            line !== line2 &&
+            !visitLines.includes(line2),
+        )
+      }
+
+      if (!nextLines) {
+        break
+      }
+
+      let comparisonPoints = []
+
+      nextLines.forEach((nextLine) => {
+        if (isSamePoint(nextLine.startPoint, currentPoint)) {
+          comparisonPoints.push(nextLine.endPoint)
+        } else {
+          comparisonPoints.push(nextLine.startPoint)
+        }
+      })
+
+      comparisonPoints = comparisonPoints.filter((point) => !visitPoints.some((visitPoint) => isSamePoint(visitPoint, point)))
+      comparisonPoints = comparisonPoints.filter((point) => !isSamePoint(point, currentPoint))
+
+      const minDistancePoint = comparisonPoints.reduce((prev, current) => {
+        const prevDistance = Math.sqrt(Math.pow(prev.x - arrivalPoint.x, 2) + Math.pow(prev.y - arrivalPoint.y, 2))
+        const currentDistance = Math.sqrt(Math.pow(current.x - arrivalPoint.x, 2) + Math.pow(current.y - arrivalPoint.y, 2))
+
+        return prevDistance < currentDistance ? prev : current
+      }, comparisonPoints[0])
+
+      nextLines.forEach((nextLine) => {
+        if (isSamePoint(nextLine.startPoint, minDistancePoint) || isSamePoint(nextLine.endPoint, minDistancePoint)) {
+          visitLines.push(nextLine)
+        }
+      })
+
+      currentPoint = { ...minDistancePoint }
+      roofPoints.push(currentPoint)
+      cnt++
+      if (cnt > 100) {
+        throw new Error('무한루프')
+      }
+    }
+    roofs.push(roofPoints)
+  })
+
+  const newRoofs = removeDuplicatePolygons(roofs)
+  console.log(newRoofs)
+  newRoofs.forEach((roofPoint, index) => {
+    let defense, pitch
+    const direction = getDirectionByPoint(roofPoint[0], roofPoint[roofPoint.length - 1])
+
+    switch (direction) {
+      case 'top':
+        defense = 'east'
+        break
+      case 'right':
+        defense = 'south'
+        break
+      case 'bottom':
+        defense = 'west'
+        break
+      case 'left':
+        defense = 'north'
+        break
+    }
+    pitch = polygon.lines[index].attributes?.pitch ?? 0
+
+    const roof = new QPolygon(roofPoint, {
+      fontSize: polygon.fontSize,
+      stroke: 'black',
+      fill: 'transparent',
+      strokeWidth: 3,
+      name: POLYGON_TYPE.ROOF,
+      originX: 'center',
+      originY: 'center',
+      selectable: true,
+      defense: defense,
+      direction: defense,
+      pitch: pitch,
+    })
+
+    polygon.canvas.add(roof)
+    canvas.remove(polygon)
+    polygon.canvas.renderAll()
+  })
+}
+
+const removeDuplicatePolygons = (polygons) => {
+  const uniquePolygons = []
+
+  polygons.forEach((polygon) => {
+    const sortedPolygon = polygon
+      .map((point) => `${Math.floor(point.x)},${Math.floor(point.y)}`)
+      .sort()
+      .join('|')
+    const isDuplicate = uniquePolygons.some((uniquePolygon) => {
+      const sortedUniquePolygon = uniquePolygon
+        .map((point) => `${Math.floor(point.x)},${Math.floor(point.y)}`)
+        .sort()
+        .join('|')
+      return sortedPolygon === sortedUniquePolygon
+    })
+
+    if (!isDuplicate) {
+      uniquePolygons.push(polygon)
+    }
+  })
+
+  return uniquePolygons
 }
 
 const isSamePoint = (a, b) => {
@@ -1218,6 +1456,7 @@ export const drawRidgeRoof = (roofId, canvas) => {
  * @param canvas
  */
 const drawRidge = (roof, canvas) => {
+  debugger
   const wallLines = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.WALL && object.attributes.roofId === roof.id).lines // 외벽의 라인
   const roofLines = roof.lines // 지붕의 라인
   let ridgeRoof = []
@@ -3312,7 +3551,7 @@ function createRoofPaddingPolygon(polygon, lines, arcSegments = 0) {
 }
 
 function arePointsEqual(point1, point2) {
-  return point1.x === point2.x && point1.y === point2.y
+  return Math.abs(point1.x - point2.x) < 1 && Math.abs(point1.y - point2.y) - 1
 }
 
 function arraysHaveSamePoints(array1, array2) {

From c60db3cda56005746c34a3fc55f97cf1bde819c0 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Mon, 4 Nov 2024 15:07:27 +0900
Subject: [PATCH 06/18] =?UTF-8?q?=EA=B0=99=EC=9D=80=EC=A2=8C=ED=91=9C?=
 =?UTF-8?q?=ED=8C=90=EB=8B=A8=201=EC=98=A4=EC=B0=A8=20=ED=97=88=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/qpolygon-utils.js | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 65cbc96d..a574c393 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -1380,22 +1380,27 @@ export const splitPolygonWithLines = (polygon) => {
   })
 }
 
-const removeDuplicatePolygons = (polygons) => {
+function normalizePoint(point) {
+  return {
+    x: Math.round(point.x),
+    y: Math.round(point.y),
+  }
+}
+
+function arePolygonsEqual(polygon1, polygon2) {
+  if (polygon1.length !== polygon2.length) return false
+
+  const normalizedPolygon1 = polygon1.map(normalizePoint).sort((a, b) => a.x - b.x || a.y - b.y)
+  const normalizedPolygon2 = polygon2.map(normalizePoint).sort((a, b) => a.x - b.x || a.y - b.y)
+
+  return normalizedPolygon1.every((point, index) => arePointsEqual(point, normalizedPolygon2[index]))
+}
+
+function removeDuplicatePolygons(polygons) {
   const uniquePolygons = []
 
   polygons.forEach((polygon) => {
-    const sortedPolygon = polygon
-      .map((point) => `${Math.floor(point.x)},${Math.floor(point.y)}`)
-      .sort()
-      .join('|')
-    const isDuplicate = uniquePolygons.some((uniquePolygon) => {
-      const sortedUniquePolygon = uniquePolygon
-        .map((point) => `${Math.floor(point.x)},${Math.floor(point.y)}`)
-        .sort()
-        .join('|')
-      return sortedPolygon === sortedUniquePolygon
-    })
-
+    const isDuplicate = uniquePolygons.some((uniquePolygon) => arePolygonsEqual(polygon, uniquePolygon))
     if (!isDuplicate) {
       uniquePolygons.push(polygon)
     }
@@ -3551,7 +3556,7 @@ function createRoofPaddingPolygon(polygon, lines, arcSegments = 0) {
 }
 
 function arePointsEqual(point1, point2) {
-  return Math.abs(point1.x - point2.x) < 1 && Math.abs(point1.y - point2.y) - 1
+  return Math.abs(point1.x - point2.x) <= 1 && Math.abs(point1.y - point2.y) <= 1
 }
 
 function arraysHaveSamePoints(array1, array2) {

From 19e22ba9eaaa105e10ff728999b2ae394003ae82 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Mon, 4 Nov 2024 15:15:36 +0900
Subject: [PATCH 07/18] =?UTF-8?q?=EB=B3=B4=EC=A1=B0=EC=84=A0=20=EC=9E=90?=
 =?UTF-8?q?=EB=A5=B4=EA=B8=B0=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/hooks/roofcover/useAuxiliaryDrawing.js | 31 ++++++++++++++++++++++
 src/util/qpolygon-utils.js                 |  1 -
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js
index 72b094c9..46311ad9 100644
--- a/src/hooks/roofcover/useAuxiliaryDrawing.js
+++ b/src/hooks/roofcover/useAuxiliaryDrawing.js
@@ -616,6 +616,37 @@ export function useAuxiliaryDrawing(id) {
         removeLine(line1)
         intersectionPoints.current.push(...interSectionPointsWithRoofLines)
         return
+      } else if (interSectionPointsWithRoofLines.length === 1) {
+        //지붕선과 만나는 점이 하나일 경우
+        const distance1 = distanceBetweenPoints({ x: line1.x1, y: line1.y1 }, interSectionPointsWithRoofLines[0])
+        const distance2 = distanceBetweenPoints({ x: line1.x2, y: line1.y2 }, interSectionPointsWithRoofLines[0])
+
+        if (!(distance1 === 0 || distance2 === 0)) {
+          if (distance1 >= distance2) {
+            const newLine = addLine([line1.x1, line1.y1, interSectionPointsWithRoofLines[0].x, interSectionPointsWithRoofLines[0].y], {
+              stroke: 'black',
+              strokeWidth: 1,
+              selectable: false,
+              name: 'auxiliaryLine',
+              isFixed: true,
+            })
+            lineHistory.current.push(newLine)
+            lineHistory.current = lineHistory.current.filter((history) => history !== line1)
+            removeLine(line1)
+          } else {
+            const newLine = addLine([line1.x2, line1.y2, interSectionPointsWithRoofLines[0].x, interSectionPointsWithRoofLines[0].y], {
+              stroke: 'black',
+              strokeWidth: 1,
+              selectable: false,
+              name: 'auxiliaryLine',
+              isFixed: true,
+            })
+            lineHistory.current.push(newLine)
+            lineHistory.current = lineHistory.current.filter((history) => history !== line1)
+            removeLine(line1)
+          }
+          intersectionPoints.current.push(interSectionPointsWithRoofLines[0])
+        }
       }
 
       //보조선과 만나는 점을 찾는다.
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index a574c393..1e82aefb 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -1461,7 +1461,6 @@ export const drawRidgeRoof = (roofId, canvas) => {
  * @param canvas
  */
 const drawRidge = (roof, canvas) => {
-  debugger
   const wallLines = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.WALL && object.attributes.roofId === roof.id).lines // 외벽의 라인
   const roofLines = roof.lines // 지붕의 라인
   let ridgeRoof = []

From 4891eb50aa08c70d3fde895a7e4e7722241fb384 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Mon, 4 Nov 2024 16:02:02 +0900
Subject: [PATCH 08/18] =?UTF-8?q?=EC=A7=80=EB=B6=95=EB=A9=B4=20=ED=95=A0?=
 =?UTF-8?q?=EB=8B=B9=20=EC=8B=9C=20=EB=B0=A9=ED=96=A5=20=EC=84=A4=EC=A0=95?=
 =?UTF-8?q?=20=EC=9E=91=EC=97=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/qpolygon-utils.js | 39 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 1e82aefb..0e0ac586 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -1339,10 +1339,45 @@ export const splitPolygonWithLines = (polygon) => {
   })
 
   const newRoofs = removeDuplicatePolygons(roofs)
-  console.log(newRoofs)
   newRoofs.forEach((roofPoint, index) => {
     let defense, pitch
-    const direction = getDirectionByPoint(roofPoint[0], roofPoint[roofPoint.length - 1])
+    const polygonLines = [...polygon.lines]
+
+    let representLines = []
+    let representLine
+
+    // 지붕을 그리면서 기존 polygon의 line중 연결된 line을 찾는다.
+    polygonLines.forEach((line) => {
+      let startFlag = false
+      let endFlag = false
+      const startPoint = line.startPoint
+      const endPoint = line.endPoint
+      roofPoint.forEach((point, index) => {
+        if (isSamePoint(point, startPoint)) {
+          startFlag = true
+        }
+        if (isSamePoint(point, endPoint)) {
+          endFlag = true
+        }
+      })
+
+      if (startFlag && endFlag) {
+        representLines.push(line)
+      }
+    })
+
+    // representLines중 가장 긴 line을 찾는다.
+    representLines.forEach((line) => {
+      if (!representLine) {
+        representLine = line
+      } else {
+        if (representLine.length < line.length) {
+          representLine = line
+        }
+      }
+    })
+
+    const direction = representLine.direction
 
     switch (direction) {
       case 'top':

From 1838320606ed938b761744932738da60c56695b2 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Mon, 4 Nov 2024 16:11:58 +0900
Subject: [PATCH 09/18] =?UTF-8?q?modal=20=EB=B2=84=EA=B7=B8=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/common/font/FontSetting.jsx    |  4 +-
 .../common/popupManager/PopupManager.jsx      |  6 +-
 src/components/floor-plan/CanvasMenu.jsx      |  2 +-
 .../floor-plan/modal/setting01/GridOption.jsx |  4 +-
 .../modal/setting01/SecondOption.jsx          | 21 ++++--
 .../modal/setting01/SettingModal01.jsx        |  4 +-
 .../dimensionLine/DimensionLineSetting.jsx    |  7 +-
 .../setting01/planSize/PlanSizeSetting.jsx    |  4 +-
 src/hooks/useContextMenu.js                   |  2 +-
 src/hooks/usePopup.js                         | 75 +++++++++++++++----
 src/store/popupAtom.js                        |  3 +-
 11 files changed, 94 insertions(+), 38 deletions(-)

diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx
index 60181021..54b22b3b 100644
--- a/src/components/common/font/FontSetting.jsx
+++ b/src/components/common/font/FontSetting.jsx
@@ -47,7 +47,7 @@ const fontColors = [
 ]
 export default function FontSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
-  const { id, setIsShow, pos = contextPopupPosition, type } = props
+  const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
@@ -83,7 +83,7 @@ export default function FontSetting(props) {
             className="modal-close"
             onClick={() => {
               if (setIsShow) setIsShow(false)
-              closePopup(id)
+              closePopup(id, isConfig)
             }}
           >
             닫기
diff --git a/src/components/common/popupManager/PopupManager.jsx b/src/components/common/popupManager/PopupManager.jsx
index aa4b6cae..f24a8526 100644
--- a/src/components/common/popupManager/PopupManager.jsx
+++ b/src/components/common/popupManager/PopupManager.jsx
@@ -5,5 +5,9 @@ import { Fragment } from 'react'
 
 export default function PopupManager() {
   const [popup, setPopup] = useRecoilState(popupState)
-  return popup.children?.map((child) => <Fragment key={child.id}>{child.component}</Fragment>)
+
+  return [
+    ...popup?.config.map((child) => <Fragment key={child.id}>{child.component}</Fragment>),
+    ...popup?.other.map((child) => <Fragment key={child.id}>{child.component}</Fragment>),
+  ]
 }
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index adcd34b3..22ac4131 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -129,7 +129,7 @@ export default function CanvasMenu(props) {
 
   const handlePopup = () => {
     const id = uuidv4()
-    addPopup(id, 0, <SettingModal01 id={id} />)
+    addPopup(id, 1, <SettingModal01 id={id} />, true)
   }
 
   useEffect(() => {
diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx
index 5edb2167..8ef1095f 100644
--- a/src/components/floor-plan/modal/setting01/GridOption.jsx
+++ b/src/components/floor-plan/modal/setting01/GridOption.jsx
@@ -78,14 +78,14 @@ export default function GridOption() {
       // 점 선 그리드 설정 모달
       setShowDotLineGridModal(selectedOption.selected)
 
-      addPopup(dotLineId, 2, <DotLineGrid {...dotLineGridProps} />)
+      addPopup(dotLineId, 2, <DotLineGrid {...dotLineGridProps} />, true)
     } else if (selectedOption.id === 3) {
       // 흡착점 모드
       setAdsorptionPointAddMode(selectedOption.selected)
     } else if (selectedOption.id === 4) {
       // 그리드 색 설정 모달
       setShowColorPickerModal(selectedOption.selected)
-      addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />)
+      addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />, true)
     }
 
     setGridOptions(newGridOptions)
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx
index c09dfdc1..385c7bef 100644
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@@ -1,4 +1,4 @@
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
 import React, { useEffect, useState } from 'react'
 import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
@@ -67,6 +67,7 @@ export default function SecondOption() {
     id: fontId,
     pos: { x: 745, y: 180 },
     setIsShow: setShowFontSettingModal,
+    isConfig: true,
   }
   const planSizeProps = {
     id: planSizeId,
@@ -86,36 +87,41 @@ export default function SecondOption() {
       case 'font1': {
         //문자 글꼴변경
         setShowFontSettingModal(true)
+        setShowDimensionLineSettingModal(false)
         fontProps.type = 'commonText'
         fontProps.id = fontId + 1
-        addPopup(fontId + 1, 2, <FontSetting {...fontProps} />)
+        addPopup(fontId + 1, 2, <FontSetting {...fontProps} />, true)
         break
       }
 
       case 'font2': {
         //흐름 방향 글꼴 변경
         setShowFontSettingModal(true)
+        setShowDimensionLineSettingModal(false)
         fontProps.type = 'flowText'
         fontProps.id = fontId + 2
-        addPopup(fontId + 2, 2, <FontSetting {...fontProps} />)
+        addPopup(fontId + 2, 2, <FontSetting {...fontProps} />, true)
         break
       }
 
       case 'font3': {
         //치수 글꼴변경
         setShowFontSettingModal(true)
+
+        setShowDimensionLineSettingModal(false)
         fontProps.type = 'lengthText'
         fontProps.id = fontId + 3
-        addPopup(fontId + 3, 2, <FontSetting {...fontProps} />)
+        addPopup(fontId + 3, 2, <FontSetting {...fontProps} />, true)
         break
       }
 
       case 'font4': {
         //회로번호 글꼴변경
         setShowFontSettingModal(true)
+        setShowDimensionLineSettingModal(false)
         fontProps.type = 'circuitNumberText'
         fontProps.id = fontId
-        addPopup(fontId, 2, <FontSetting {...fontProps} />)
+        addPopup(fontId, 2, <FontSetting {...fontProps} />, true)
         break
       }
 
@@ -123,7 +129,7 @@ export default function SecondOption() {
         //치수선 설정
         if (!showDimensionLineSettingModal) {
           setShowDimensionLineSettingModal(true)
-          addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
+          addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />, true)
         } else {
           setShowDimensionLineSettingModal(false)
           closePopup(dimensionId)
@@ -134,7 +140,8 @@ export default function SecondOption() {
       case 'planSize': {
         //도면크기 설정
         setShowPlanSizeSettingModal(true)
-        addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
+        setShowDimensionLineSettingModal(false)
+        addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />, true)
         break
       }
     }
diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
index 8570555e..e1bef1f0 100644
--- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx
+++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
@@ -11,7 +11,7 @@ import { useRecoilValue } from 'recoil'
 import { usePopup } from '@/hooks/usePopup'
 
 export default function SettingModal01(props) {
-  const { setShowDotLineGridModal, setShowFontSettingModal, id } = props
+  const { setShowDotLineGridModal, setShowFontSettingModal, id, isConfig } = props
   console.log(props)
   const [buttonAct, setButtonAct] = useState(1)
   const { getMessage } = useMessage()
@@ -27,7 +27,7 @@ export default function SettingModal01(props) {
         <div className={`modal-pop-wrap sm mount`}>
           <div className="modal-head">
             <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
-            <button className="modal-close" onClick={() => closePopup(id)}>
+            <button className="modal-close" onClick={() => closePopup(id, true)}>
               닫기
             </button>
           </div>
diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
index 2afbd184..1aa39e74 100644
--- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
@@ -87,6 +87,7 @@ export default function DimensionLineSetting(props) {
     setFontColor: setOriginFontColor,
     fontSize: originFontSize,
     setFontSize: setOriginFontSize,
+    isConfig: true,
     id: fontModalId,
     pos: {
       x: 455,
@@ -97,17 +98,17 @@ export default function DimensionLineSetting(props) {
   const popupHandle = (type) => {
     switch (type) {
       case 'color':
-        addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />)
+        addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />, true)
         break
       case 'font':
-        addPopup(fontModalId, 3, <FontSetting {...fontProps} />)
+        addPopup(fontModalId, 3, <FontSetting {...fontProps} />, true)
         break
     }
   }
 
   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.canvas.setting.font.plan.absorption.dimension.line')} </h1>
           <button
diff --git a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
index 18a92bf9..f83648c9 100644
--- a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
@@ -15,14 +15,14 @@ export default function PlanSizeSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xsm`}>
+      <div className={`modal-pop-wrap xsm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1>
           <button
             className="modal-close"
             onClick={() => {
               setIsShow(false)
-              closePopup(id)
+              closePopup(id, true)
             }}
           >
             닫기
diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index 84051f74..9099752e 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -475,7 +475,7 @@ export function useContextMenu() {
               {
                 id: 'dimensionLineDisplayEdit',
                 name: getMessage('contextmenu.display.edit'),
-                component: <DimensionLineSetting id={popupId} />,
+                component: <DimensionLineSetting id={popupId} isConfig={false} />,
               },
             ],
           ])
diff --git a/src/hooks/usePopup.js b/src/hooks/usePopup.js
index b126996d..5ef59bdc 100644
--- a/src/hooks/usePopup.js
+++ b/src/hooks/usePopup.js
@@ -4,47 +4,90 @@ 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 addPopup = (id, depth, component, isConfig = false) => {
+    setPopup({
+      config: isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.config],
+      other: !isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.other],
+    })
   }
 
-  const closePopup = (id) => {
+  const closePopup = (id, isConfig = false) => {
     if (contextMenuPopup) setContextMenuPopup(null)
-    setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
+    if (isConfig) {
+      setPopup({
+        config: [...filterChildrenPopup(id, isConfig).filter((child) => child.id !== id)],
+        other: popup.other,
+      })
+    } else {
+      setPopup({
+        config: popup.config,
+        other: [...filterChildrenPopup(id, isConfig).filter((child) => child.id !== id)],
+      })
+    }
   }
 
   const filterPopup = (depth) => {
-    setPopup({ children: [...filterDepth(depth)] })
+    setPopup({
+      config: [...filterDepth(depth)],
+      other: [],
+    })
   }
 
-  const filterChildrenPopup = (id) => {
-    const target = popup.children.filter((child) => child.id === id)
-    if (target.length !== 0) {
-      return popup.children.filter((child) => child.depth <= target[0].depth)
+  const filterChildrenPopup = (id, isConfig) => {
+    let target = []
+    if (isConfig) {
+      target = popup?.config.filter((child) => child.id === id)
+    } else {
+      target = popup?.other.filter((child) => child.id === id)
     }
 
-    return popup.children
+    if (target.length !== 0) {
+      if (isConfig) {
+        return popup?.config.filter((child) => child.depth <= target[0].depth)
+      } else {
+        return popup?.other.filter((child) => child.depth <= target[0].depth)
+      }
+    } else {
+      if (isConfig) {
+        return popup.config
+      } else {
+        return popup.other
+      }
+    }
   }
 
   const closePopups = (ids) => {
-    setPopup({ children: [...popup.children.filter((child) => !ids.includes(child.id))] })
+    setPopup({
+      config: [...popup?.config.filter((child) => !ids.includes(child.id))],
+      other: [...popup?.other.filter((child) => !ids.includes(child.id))],
+    })
   }
 
   const closeAll = () => {
-    setPopup({ children: [] })
+    setPopup({
+      other: [],
+      config: [],
+    })
   }
 
   const closePrevPopup = () => {
-    setPopup({ children: [...popup.children.slice(popup.children.length - 1)] })
+    setPopup({
+      config: [...popup?.slice(popup?.length - 1)],
+      other: [],
+    })
   }
 
-  const filterDepth = (depth) => {
-    return [...popup.children.filter((child) => child.depth !== depth)]
+  const filterDepth = (depth, isConfig) => {
+    if (isConfig) {
+      return [...popup?.config.filter((child) => child.depth < depth)]
+    } else {
+      return [...popup?.other.filter((child) => child.depth < depth)]
+    }
   }
 
   return {
     popup,
-    setPopup,
     addPopup,
     closePopup,
     closePopups,
diff --git a/src/store/popupAtom.js b/src/store/popupAtom.js
index c5c75501..8cba0bdc 100644
--- a/src/store/popupAtom.js
+++ b/src/store/popupAtom.js
@@ -7,7 +7,8 @@ import { atom } from 'recoil'
 export const popupState = atom({
   key: 'popupState',
   default: {
-    children: [],
+    config: [],
+    other: [],
   },
   dangerouslyAllowMutability: true,
 })

From 45c9abd86abcf1d764cdfd25eb555a0d5e19cb66 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Mon, 4 Nov 2024 16:19:20 +0900
Subject: [PATCH 10/18] =?UTF-8?q?modal=20=EB=B2=84=EA=B7=B8=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

---
 .../common/color-picker/ColorPickerModal.jsx           |  6 +++---
 src/components/floor-plan/modal/grid/DotLineGrid.jsx   | 10 ++++------
 .../floor-plan/modal/setting01/GridOption.jsx          |  2 ++
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx
index add20a7e..9d0074e0 100644
--- a/src/components/common/color-picker/ColorPickerModal.jsx
+++ b/src/components/common/color-picker/ColorPickerModal.jsx
@@ -8,7 +8,7 @@ import { contextPopupPositionState } from '@/store/popupAtom'
 
 export default function ColorPickerModal(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState) // 현재 메뉴
-  const { isShow, setIsShow, pos = contextPopupPosition, color = '#ff0000', setColor, id } = props
+  const { isShow, setIsShow, pos = contextPopupPosition, color = '#ff0000', setColor, id, isConfig = false } = props
   const { getMessage } = useMessage()
   const [originColor, setOriginColor] = useState(color)
   const { closePopup } = usePopup()
@@ -29,7 +29,7 @@ export default function ColorPickerModal(props) {
                 setIsShow(false)
               }
               console.log(id)
-              closePopup(id)
+              closePopup(id, isConfig)
             }}
           >
             닫기
@@ -49,7 +49,7 @@ export default function ColorPickerModal(props) {
                 if (setColor) setColor(originColor)
                 if (setIsShow) setIsShow(false)
 
-                closePopup(id)
+                closePopup(id, isConfig)
               }}
             >
               {getMessage('common.message.save')}
diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
index 520d56dd..f4caa40b 100644
--- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx
+++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
@@ -5,9 +5,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { canvasState, dotLineGridSettingState, dotLineIntervalSelector } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import { onlyNumberInputChange } from '@/util/input-utils'
-import { fabric } from 'fabric'
-import { gridColorState } from '@/store/gridAtom'
-import { gridDisplaySelector, settingModalGridOptionsState } from '@/store/settingAtom'
+import { settingModalGridOptionsState } from '@/store/settingAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
@@ -33,7 +31,7 @@ export default function DotLineGrid(props) {
   // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const [close, setClose] = useState(false)
-  const { id, setIsShow, pos = { x: 840, y: -815 } } = props
+  const { id, setIsShow, pos = { x: 840, y: -815 }, isConfig = false } = props
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
 
   const canvas = useRecoilValue(canvasState)
@@ -142,7 +140,7 @@ export default function DotLineGrid(props) {
       await post({ url: `/api/canvas-management/canvas-grid-settings`, data: patternData }).then((res) => {
         swalFire({ text: getMessage(res.returnMessage) })
         setDotLineGridSettingState({ ...currentSetting })
-        closePopup(id)
+        closePopup(id, isConfig)
       })
     } catch (error) {
       swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
@@ -213,7 +211,7 @@ export default function DotLineGrid(props) {
             className="modal-close"
             onClick={() => {
               setIsShow(false)
-              closePopup(id)
+              closePopup(id, isConfig)
             }}
           >
             닫기
diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx
index 8ef1095f..f3465365 100644
--- a/src/components/floor-plan/modal/setting01/GridOption.jsx
+++ b/src/components/floor-plan/modal/setting01/GridOption.jsx
@@ -94,6 +94,7 @@ export default function GridOption() {
   const dotLineGridProps = {
     id: dotLineId,
     setIsShow: setShowDotLineGridModal,
+    isConfig: true,
     pos: {
       x: 845,
       y: 180,
@@ -106,6 +107,7 @@ export default function GridOption() {
     setColor: setGridColor,
     isShow: showColorPickerModal,
     setIsShow: setShowColorPickerModal,
+    isConfig: true,
     pos: {
       x: 785,
       y: 180,

From 62ef25c048e6b9aebc1b02b95c0a7be4a0472a20 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Mon, 4 Nov 2024 17:36:18 +0900
Subject: [PATCH 11/18] =?UTF-8?q?=ED=9A=8C=EB=A1=9C=20=EB=B0=8F=20?=
 =?UTF-8?q?=EA=B0=80=EB=8C=80=20=EC=84=A4=EC=A0=95=20=EB=8B=A4=EA=B5=AD?=
 =?UTF-8?q?=EC=96=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../circuitTrestle/CircuitTrestleSetting.jsx  |  6 ++++-
 .../step/PowerConditionalSelect.jsx           |  6 ++---
 .../modal/circuitTrestle/step/StepUp.jsx      | 26 +++++++++----------
 .../step/type/PassivityCircuitAllocation.jsx  |  4 +--
 src/locales/ja.json                           |  9 +++++++
 src/locales/ko.json                           |  9 +++++++
 6 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index 36082642..a71036c6 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -50,7 +50,11 @@ export default function CircuitTrestleSetting({ id }) {
                 Next
               </button>
             )}
-            {tabNum === 3 && <button className="btn-frame modal act">保存 (仮割り当て)</button>}
+            {tabNum === 3 && (
+              <button className="btn-frame modal act">
+                {`${getMessage('modal.common.save')} (${getMessage('modal.circuit.trestle.setting.alloc.trestle')})`}
+              </button>
+            )}
           </div>
         </div>
       </div>
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
index 9eadeb7f..927f973b 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
@@ -114,7 +114,7 @@ export default function PowerConditionalSelect({ setTabNum }) {
             </div>
           </div>
           <div className="circuit-right-wrap mb10">
-            <button className="btn-frame self mr5">追加</button>
+            <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
           </div>
           <div className="circuit-data-form">
             <span className="normal-font">
@@ -132,12 +132,12 @@ export default function PowerConditionalSelect({ setTabNum }) {
       <div className="slope-wrap">
         <div className="d-check-box pop mb15">
           <input type="checkbox" id="ch03" />
-          <label htmlFor="ch03">同一傾斜同一方面の面積の場合、同じ面として回路を分ける。</label>
+          <label htmlFor="ch03"> {getMessage('modal.circuit.trestle.setting.power.conditional.select.check1')}</label>
         </div>
         <div className="d-check-box pop">
           <input type="checkbox" id="ch04" />
           <label className="red" htmlFor="ch04">
-            MAX接続（過積）で回路を分ける。
+            {getMessage('modal.circuit.trestle.setting.power.conditional.select.check2')}
           </label>
         </div>
       </div>
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
index 6a11ed71..bfb8422c 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
@@ -18,8 +18,8 @@ export default function StepUp({}) {
                   <table>
                     <thead>
                       <tr>
-                        <th>シリアル枚数</th>
-                        <th>総回路数</th>
+                        <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.serial.amount')}</th>
+                        <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.total.amount')}</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -49,14 +49,14 @@ export default function StepUp({}) {
               </div>
               <div className="circuit-table-flx-wrap">
                 <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">接続する</div>
+                  <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}</div>
                   <div className="roof-module-table mb10">
                     <table>
                       <thead>
                         <tr>
-                          <th style={{ width: '140px' }}>名称</th>
-                          <th>回路数</th>
-                          <th>昇圧回路数</th>
+                          <th style={{ width: '140px' }}>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
+                          <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}</th>
+                          <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
                         </tr>
                       </thead>
                       <tbody>
@@ -80,7 +80,7 @@ export default function StepUp({}) {
                   </div>
                   <div className="bottom-wrap">
                     <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">追加</button>
+                      <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
                     </div>
                     <div className="circuit-data-form">
                       <span className="normal-font">
@@ -90,13 +90,13 @@ export default function StepUp({}) {
                   </div>
                 </div>
                 <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">昇圧オプション</div>
+                  <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}</div>
                   <div className="roof-module-table mb10">
                     <table>
                       <thead>
                         <tr>
-                          <th>名称</th>
-                          <th>昇圧回路数</th>
+                          <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
+                          <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
                         </tr>
                       </thead>
                       <tbody>
@@ -113,7 +113,7 @@ export default function StepUp({}) {
                   </div>
                   <div className="bottom-wrap">
                     <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">追加</button>
+                      <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
                     </div>
                     <div className="circuit-data-form">
                       <span className="normal-font">
@@ -124,7 +124,7 @@ export default function StepUp({}) {
                 </div>
               </div>
               <div className="circuit-count-input">
-                <span className="normal-font">綿調道区分</span>
+                <span className="normal-font">{getMessage('modal.module.basic.setting.module.cotton.classification')}</span>
                 <div className="input-grid mr5" style={{ width: '40px' }}>
                   <input type="text" className="input-origin block" />
                 </div>
@@ -395,7 +395,7 @@ export default function StepUp({}) {
         <div className="slope-wrap">
           <div className="outline-form">
             <span className="mr10" style={{ width: 'auto' }}>
-              モニターの選択
+              {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
             </span>
             <div className="grid-select mr10">
               <QSelectBox title={'電力検出ユニット (モニター付き)'} option={SelectOption01} />
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
index 5233d992..67bb2195 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
@@ -4,13 +4,13 @@ export default function PassivityCircuitAllocation() {
   const { getMessage } = useMessage()
   const moduleData = {
     header: [
-      { name: getMessage('屋根面'), prop: 'roofShape' },
+      { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
       {
         name: getMessage('Q.TRON M-G2'),
         prop: 'moduleName',
       },
       {
-        name: getMessage('発電量 (kW)'),
+        name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`,
         prop: 'powerGeneration',
       },
     ],
diff --git a/src/locales/ja.json b/src/locales/ja.json
index e4605537..390b3fe7 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -123,6 +123,7 @@
   "modal.module.basic.setting.auto.placement": "設定値に自動配置",
   "plan.menu.module.circuit.setting.circuit.trestle.setting": "回路と架台の設定",
   "modal.circuit.trestle.setting": "回路と架台設定",
+  "modal.circuit.trestle.setting.alloc.trestle": "仮割り当て",
   "modal.circuit.trestle.setting.power.conditional.select": "パワーコンディショナーを選択",
   "modal.circuit.trestle.setting.power.conditional.select.name": "名称",
   "modal.circuit.trestle.setting.power.conditional.select.rated.output": "定格出力",
@@ -130,6 +131,8 @@
   "modal.circuit.trestle.setting.power.conditional.select.max.connection": "最大接続枚数",
   "modal.circuit.trestle.setting.power.conditional.select.max.overload": "過積最大枚数",
   "modal.circuit.trestle.setting.power.conditional.select.output.current": "出力電流",
+  "modal.circuit.trestle.setting.power.conditional.select.check1": "同一傾斜同一方面の面積の場合、同じ面として回路を分ける。",
+  "modal.circuit.trestle.setting.power.conditional.select.check2": "MAX接続（過積）で回路を分ける。",
   "modal.circuit.trestle.setting.circuit.allocation": "回路割り当て",
   "modal.circuit.trestle.setting.circuit.allocation.auto": "自動回路割り当て",
   "modal.circuit.trestle.setting.circuit.allocation.passivity": "手動回路割当",
@@ -140,6 +143,12 @@
   "modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset": "すべての回路番号の初期化",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix": "番号確定",
   "modal.circuit.trestle.setting.step.up.allocation": "昇圧設定",
+  "modal.circuit.trestle.setting.step.up.allocation.serial.amount": "シリアル枚数",
+  "modal.circuit.trestle.setting.step.up.allocation.total.amount": "総回路数",
+  "modal.circuit.trestle.setting.step.up.allocation.connected": "接続する",
+  "modal.circuit.trestle.setting.step.up.allocation.circuit.amount": "昇圧回路数",
+  "modal.circuit.trestle.setting.step.up.allocation.option": "昇圧オプション",
+  "modal.circuit.trestle.setting.step.up.allocation.select.monitor": "モニターの選択",
   "plan.menu.module.circuit.setting.plan.orientation": "図面方位の適用",
   "plan.menu.estimate": "見積",
   "plan.menu.estimate.roof.alloc": "屋根面の割り当て",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 03443a0b..5f3fd48d 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -127,6 +127,7 @@
   "modal.module.basic.setting.auto.placement": "설정값으로 자동 배치",
   "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로 및 가대 설정",
   "modal.circuit.trestle.setting": "회로 및 가대설정",
+  "modal.circuit.trestle.setting.alloc.trestle": "가대할당",
   "modal.circuit.trestle.setting.power.conditional.select": "파워컨디셔너 선택",
   "modal.circuit.trestle.setting.power.conditional.select.name": "명칭",
   "modal.circuit.trestle.setting.power.conditional.select.rated.output": "정격출력",
@@ -134,6 +135,8 @@
   "modal.circuit.trestle.setting.power.conditional.select.max.connection": "최대접속매수",
   "modal.circuit.trestle.setting.power.conditional.select.max.overload": "과적최대매수",
   "modal.circuit.trestle.setting.power.conditional.select.output.current": "출력전류",
+  "modal.circuit.trestle.setting.power.conditional.select.check1": "동일경사 동일 방면의 면적인 경우, 같은 면으로서 회로를 나눈다.",
+  "modal.circuit.trestle.setting.power.conditional.select.check2": "MAX 접속(과적)으로 회로를 나눈다.",
   "modal.circuit.trestle.setting.circuit.allocation": "회로 할당",
   "modal.circuit.trestle.setting.circuit.allocation.auto": "자동 회로 할당",
   "modal.circuit.trestle.setting.circuit.allocation.passivity": "수동 회로 할당",
@@ -144,6 +147,12 @@
   "modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset": "모든 회로번호 초기화",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix": "번호 확정",
   "modal.circuit.trestle.setting.step.up.allocation": "승압 설정",
+  "modal.circuit.trestle.setting.step.up.allocation.serial.amount": "직렬매수",
+  "modal.circuit.trestle.setting.step.up.allocation.total.amount": "총 회로수",
+  "modal.circuit.trestle.setting.step.up.allocation.connected": "연결함",
+  "modal.circuit.trestle.setting.step.up.allocation.circuit.amount": "승압회로수",
+  "modal.circuit.trestle.setting.step.up.allocation.option": "승압옵션",
+  "modal.circuit.trestle.setting.step.up.allocation.select.monitor": "모니터 선택",
   "plan.menu.module.circuit.setting.plan.orientation": "도면 방위 적용",
   "plan.menu.estimate": "견적서",
   "plan.menu.estimate.roof.alloc": "지붕면 할당",

From 204ab66f90b72f3b21fb7e0a12b5989ad40ba953 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Mon, 4 Nov 2024 17:37:01 +0900
Subject: [PATCH 12/18] =?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 |  1 +
 src/styles/_layout.scss   |  1 +
 src/styles/_main.scss     |  5 +++--
 src/styles/_modal.scss    | 27 ++++++++++++++++++++++++---
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 7c8f334a..50abad0d 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -1312,6 +1312,7 @@
         font-weight: 400;
         color: #999999;
         padding: 0;
+        width: 100%;
         height: 100%;
         flex: 1 ;
         background-color: inherit;
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index fc8870a2..a549ad0e 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -239,6 +239,7 @@ footer{
                 nav{
                     .nav-list{
                         .nav-item{
+                            a,
                             button{
                                 font-size: 13px;
                             }
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index 75632a27..0733f285 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -37,9 +37,10 @@
             top: 50%;
             left: 0;
             transform: translateY(-50%);
-            width: 20px;
-            height: 20px;
+            width: 22px;
+            height: 22px;
             background: url(../../public/static/images/main/id_icon.svg)no-repeat center;
+            background-size: cover;
         }
     }
     .store-arr{
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 7c40ab1e..da421f16 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -391,19 +391,22 @@ $alert-color: #101010;
         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;
+                vertical-align: middle;
+                .tip-wrap{
+                    display: flex;
+                    align-items: center;
+                }
             }
             td{
                 font-size: $pop-normal-size;
                 color: $pop-color;
                 border-bottom: 1px solid #424242;
-                padding-left: 20px;
+                padding: 18px 0 18px 20px;
                 vertical-align: middle;
                 .flex-box{
                     display: flex;
@@ -479,6 +482,7 @@ $alert-color: #101010;
         color: $pop-color;
         font-weight: $pop-normal-weight;
     }
+
 }
 
 .img-edit-wrap{
@@ -528,6 +532,23 @@ $alert-color: #101010;
     }
 }
 
+.for-address{
+    input{
+        flex: 1;
+    }
+    .check-address{
+        flex: none;
+        width: 18px;
+        height: 18px;
+        margin-left: 5px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
+        &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
+    }
+}
+
 // 외벽선 그리기
 .outline-wrap{
     padding: 24px 0;

From c7549b243aa9c505760324898730fe6df0fd0348 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Mon, 4 Nov 2024 17:50:57 +0900
Subject: [PATCH 13/18] =?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/estiment_arr.svg  |  3 ++
 .../images/canvas/estiment_arr_color.svg      |  3 ++
 src/styles/_contents.scss                     | 45 +++++++++++++++----
 3 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 public/static/images/canvas/estiment_arr.svg
 create mode 100644 public/static/images/canvas/estiment_arr_color.svg

diff --git a/public/static/images/canvas/estiment_arr.svg b/public/static/images/canvas/estiment_arr.svg
new file mode 100644
index 00000000..bcdbb42b
--- /dev/null
+++ b/public/static/images/canvas/estiment_arr.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L5.5 5.5L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/static/images/canvas/estiment_arr_color.svg b/public/static/images/canvas/estiment_arr_color.svg
new file mode 100644
index 00000000..45588c74
--- /dev/null
+++ b/public/static/images/canvas/estiment_arr_color.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 7174" d="M1 1L5.5 5.5L10 1" stroke="#C2D0DD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 50abad0d..6715d48b 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -828,22 +828,49 @@
     }
 }
 
+.estimate-arr-btn{
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-color: #94A0AD;
+    border: 1px solid #94A0AD;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-image: url(../../public/static/images/canvas/estiment_arr.svg);
+    background-size: 11px 7px;
+    border-radius: 2px;
+    &.up{
+        rotate: 180deg;
+    }
+    &.on{
+        background-color: #fff;
+        border-color: #C2D0DD;
+        background-image: url(../../public/static/images/canvas/estiment_arr_color.svg)
+    }
+}
+.estimate-check-wrap{
+    .estimate-check-inner{
+        display: block;
+    }
+    &.hide{
+        border-bottom: 1px solid #ECF0F4;
+        margin-bottom: 15px;
+        .estimate-check-inner{
+            display: 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;
-        }
+        border: 1px solid #ECF0F4;
+        margin-top: -1px;
+        margin-right: -1px;
         &.act{
             background-color: #F7F9FA;
         }

From 187f11df199ba1293a9ed9dbea5dc570319e6cff Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Mon, 4 Nov 2024 17:54:34 +0900
Subject: [PATCH 14/18] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=99=94=EB=A9=B4=20=EC=9E=91=EC=97=85=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/estimate/Estimate.jsx          | 302 ++++++---
 .../estimate/useEstimateController.js         | 120 +++-
 src/store/floorPlanObjectAtom.js              |   6 +
 yarn.lock                                     | 595 +++++++++++++-----
 4 files changed, 779 insertions(+), 244 deletions(-)

diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx
index 7cbf936a..47f99c3d 100644
--- a/src/components/estimate/Estimate.jsx
+++ b/src/components/estimate/Estimate.jsx
@@ -8,13 +8,41 @@ import { useMessage } from '@/hooks/useMessage'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 import EstimateFileUploader from './EstimateFileUploader'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { isObjectNotEmpty } from '@/util/common-utils'
+import dayjs from 'dayjs'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+import Select from 'react-select'
+import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
 
 export default function Estimate({ params }) {
-  const [objectNo, setObjectNo] = useState('')
-  const [files, setFiles] = useState([]) //첨부파일
+  const [objectNo, setObjectNo] = useState('') //물건번호
+  const [planNo, setPlanNo] = useState('') //플랜번호
+  const [files, setFiles] = useState([]) // 보내는 첨부파일
+
+  //견적특이사항 접고 펼치기
+  const [hidden, setHidden] = useState(false)
+
+  //공통코드
+  const { findCommonCode } = useCommonCode()
+  const [honorificCodeList, setHonorificCodeList] = useState([]) //경칭 공통코드
+
+  const [startDate, setStartDate] = useState(new Date())
+  const singleDatePickerProps = {
+    startDate,
+    setStartDate,
+  }
 
   const sessionState = useRecoilValue(sessionStore)
   const objectRecoil = useRecoilValue(floorPlanObjectState)
+
+  //견적서 상세데이터
+  const { state, setState } = useEstimateController(params.pid)
+
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { get, post } = useAxios(globalLocaleState)
+
   const { getMessage } = useMessage()
 
   const { setMenuNumber } = useCanvasMenu()
@@ -27,46 +55,54 @@ export default function Estimate({ params }) {
     setUploadFiles: setFiles,
   }
 
-  useEffect(() => {
-    setObjectNo(objectRecoil.floorPlanObjectNo)
-  }, [objectRecoil])
-
-  useEffect(() => {
-    if (objectNo) {
-      //Q101X278191023001
-      console.log('세션정보::::', sessionState)
-      //상세API호출
-    }
-  }, [objectNo])
-
   useEffect(() => {
     setMenuNumber(5)
+    setObjectNo(objectRecoil.floorPlanObjectNo)
+    setPlanNo(params.pid)
+
+    // 공통코드
+    const code1 = findCommonCode(200800)
+    if (code1 != null) {
+      setHonorificCodeList(code1)
+    }
+
+    //견적특이사항 API호출
+    //http://localhost:8080/api/estimate/special-note-list
   }, [])
 
+  //견적일 set
+  useEffect(() => {
+    let estimateDatej = dayjs(startDate).format('YYYY-MM-DD')
+    setState({ estimateDate: estimateDatej })
+  }, [startDate])
+
   return (
     <div className="sub-content estimate">
       <div className="sub-content-inner">
         {/* 물건번호, 견적서번호, 등록일, 변경일시 시작 */}
+        {/* <form onSubmit={handleSubmit(onValid)}> */}
         <div className="sub-content-box">
           <div className="sub-table-box">
             <div className="estimate-list-wrap one">
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('estimate.detail.objectNo')}</div>
                 <div className="estimate-name">
-                  {objectNo} (Plan No: {params.pid})
+                  {objectNo} (Plan No: {planNo})
                 </div>
               </div>
               <div className="estimate-box">
-                <div className="estimate-tit">{getMessage('estimate.detail.estimateNo')}</div>
-                <div className="estimate-name">5242310200065242</div>
+                <div className="estimate-tit">{getMessage('estimate.detail.docNo')}</div>
+                <div className="estimate-name">{state.docNo}</div>
               </div>
               <div className="estimate-box">
-                <div className="estimate-tit">{getMessage('estimate.detail.createDatetime')}</div>
-                <div className="estimate-name">9999.09.28</div>
+                <div className="estimate-tit">{getMessage('estimate.detail.drawingEstimateCreateDate')}</div>
+                <div className="estimate-name">
+                  {state?.drawingEstimateCreateDate ? `${dayjs(state.drawingEstimateCreateDate).format('YYYY.MM.DD')}` : ''}
+                </div>
               </div>
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('estimate.detail.lastEditDatetime')}</div>
-                <div className="estimate-name">9999.09.28 06:36</div>
+                <div className="estimate-name">{state?.lastEditDatetime ? `${dayjs(state.lastEditDatetime).format('YYYY.MM.DD HH:mm')}` : ''}</div>
               </div>
             </div>
           </div>
@@ -99,7 +135,7 @@ export default function Estimate({ params }) {
                     </th>
                     <td>
                       <div className="date-picker" style={{ width: '350px' }}>
-                        <SingleDatePicker />
+                        <SingleDatePicker {...singleDatePickerProps} />
                       </div>
                     </td>
                   </tr>
@@ -113,64 +149,152 @@ export default function Estimate({ params }) {
                     </th>
                     <td>
                       <div className="input-wrap" style={{ width: '350px' }}>
-                        <input type="text" className="input-light" defaultValue={'물건정보에서 입력한 담당자명 표시'} />
+                        <input
+                          type="text"
+                          className="input-light"
+                          defaultValue={state?.charger}
+                          onChange={(e) => {
+                            //담당자 charger
+                            // console.log('담당자:::::', e.target.value)
+                            setState({ charger: e.target.value })
+                          }}
+                        />
                       </div>
                     </td>
                   </tr>
                   <tr>
                     {/* 안건명 */}
                     <th>
-                      {getMessage('estimate.detail.title')} <span className="important">*</span>
+                      {getMessage('estimate.detail.objectName')} <span className="important">*</span>
                     </th>
                     <td colSpan={3}>
                       <div className="form-flex-wrap">
                         <div className="input-wrap mr5" style={{ width: '610px' }}>
-                          <input type="text" className="input-light" defaultValue={'안건명:::'} />
+                          <input
+                            type="text"
+                            className="input-light"
+                            defaultValue={state?.objectName}
+                            onChange={(e) => {
+                              //안건명 objectName
+                              // console.log('안건명::::', e.target.value)
+                              setState({ objectName: e.target.value })
+                            }}
+                          />
                         </div>
-                        <div className="input-wrap" style={{ width: '200px' }}>
-                          <input type="text" className="input-light" defaultValue={'경칭?'} />
+                        <div className="select-wrap" style={{ width: '200px' }}>
+                          <Select
+                            id="objectNameOmit"
+                            instanceId="objectNameOmit"
+                            className="react-select-custom"
+                            classNamePrefix="custom"
+                            placeholder="Select"
+                            options={honorificCodeList}
+                            onChange={(e) => {
+                              if (isObjectNotEmpty(e)) {
+                                setState({ objectNameOmit: e.clCodeNm })
+                              } else {
+                                // console.log('XXX')
+                                setState({ objectNameOmit: '' })
+                              }
+                            }}
+                            getOptionLabel={(x) => x.clCodeNm}
+                            getOptionValue={(x) => x.clCode}
+                            isClearable={true}
+                            isSearchable={false}
+                            value={honorificCodeList.filter(function (option) {
+                              return option.clCodeNm === state.objectNameOmit
+                            })}
+                          />
                         </div>
                       </div>
                     </td>
                   </tr>
                   <tr>
-                    {/* 메모 */}
-                    <th>{getMessage('estimate.detail.remarks')}</th>
-                    <td colSpan={3}>물건정보에서 입력한 메모 표시</td>
+                    {/* 물건정보에서 입력한 메모 */}
+                    <th>{getMessage('estimate.detail.objectRemarks')}</th>
+                    <td colSpan={3}>{state?.objectRemarks}</td>
                   </tr>
                   <tr>
                     {/* 주문분류 */}
                     <th>
-                      {getMessage('estimate.detail.orderType')} <span className="important">*</span>
+                      {getMessage('estimate.detail.estimateType')} <span className="important">*</span>
                     </th>
                     <td colSpan={3}>
-                      <div className="radio-wrap"></div>
+                      <div className="radio-wrap">
+                        <div className="d-check-radio light mr10">
+                          <input
+                            type="radio"
+                            name="estimateType"
+                            id="YJSS"
+                            value={'YJSS'}
+                            checked={state?.estimateType === 'YJSS' ? true : false}
+                            onChange={(e) => {
+                              setState({ estimateType: e.target.value })
+                            }}
+                          />
+                          <label htmlFor="YJSS">住宅PKG</label>
+                        </div>
+                        <div className="d-check-radio light">
+                          <input
+                            type="radio"
+                            name="estimateType"
+                            id="YJOD"
+                            value={'YJOD'}
+                            checked={state?.estimateType === 'YJOD' ? true : false}
+                            onChange={(e) => {
+                              setState({ estimateType: e.target.value })
+                            }}
+                          />
+                          <label htmlFor="YJOD">積上げ( YJOD )</label>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr>
                     {/* 지붕재・사양시공 최대4개*/}
                     <th>{getMessage('estimate.detail.roofCns')}</th>
                     <td colSpan={3}>
-                      <div className="form-flex-wrap mb5">
-                        <div className="input-wrap mr5" style={{ width: '610px' }}>
-                          <input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly />
-                        </div>
-                        <div className="input-wrap" style={{ width: '200px' }}>
-                          <input type="text" className="input-light" defaultValue={'標準施工'} readOnly />
-                        </div>
-                      </div>
-                      <div className="form-flex-wrap mb5"></div>
-                      <div className="form-flex-wrap mb5"></div>
-                      {/* 마지막div엔 mb5 제외 */}
-                      <div className="form-flex-wrap"></div>
+                      {state?.roofMaterialIdMulti?.split('、').map((row, index) => {
+                        //지붕재
+                        let roofList = row
+                        let roofListLength = state?.roofMaterialIdMulti?.split('、').length
+                        let style = 'mb5'
+                        if (roofListLength == index + 1) {
+                          style = ''
+                        }
+                        //사양시공
+                        let constructSpecificationMulti = state?.constructSpecificationMulti?.split('、')
+
+                        return (
+                          <>
+                            <div className={`form-flex-wrap ${style}`}>
+                              <div className="input-wrap mr5" style={{ width: '610px' }}>
+                                <input type="text" className="input-light" defaultValue={roofList} readOnly />
+                              </div>
+                              <div className="input-wrap" style={{ width: '200px' }}>
+                                <input type="text" className="input-light" defaultValue={constructSpecificationMulti[index]} readOnly />
+                              </div>
+                            </div>
+                          </>
+                        )
+                      })}
                     </td>
                   </tr>
                   <tr>
                     {/* 비고 */}
-                    <th>{getMessage('estimate.detail.note')}</th>
+                    <th>{getMessage('estimate.detail.remarks')}</th>
                     <td colSpan={3}>
                       <div className="input-wrap">
-                        <input type="text" className="input-light" />
+                        <input
+                          type="text"
+                          className="input-light"
+                          defaultValue={state?.remarks}
+                          onChange={(e) => {
+                            //비고
+                            // console.log('비고:::::', e.target.value)
+                            setState({ remarks: e.target.value })
+                          }}
+                        />
                       </div>
                     </td>
                   </tr>
@@ -200,25 +324,6 @@ export default function Estimate({ params }) {
                     <th>{getMessage('estimate.detail.header.fileList1')}</th>
                     <td>
                       <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')}
-                          </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>
-                          <ul className="file-list"></ul>
-                        </div>
-                      </div> */}
                     </td>
                   </tr>
                 </tbody>
@@ -246,21 +351,40 @@ export default function Estimate({ params }) {
                 <h3 className="product">{getMessage('estimate.detail.header.specialEstimate')}</h3>
                 <div className="product_tit">{getMessage('estimate.detail.header.specialEstimateProductInfo')}</div>
               </div>
+              <div className="left-unit-box">
+                <button className={`estimate-arr-btn down mr5 ${hidden ? '' : 'on'}`} onClick={() => setHidden(false)}></button>
+                <button className={`estimate-arr-btn up ${hidden ? 'on' : ''}`} onClick={() => setHidden(true)}></button>
+              </div>
             </div>
-            {/* 공통코드영역시작 */}
-            <div className="special-note-check-wrap"></div>
-            {/* 공통코드영역끝 */}
-            {/* 견적특이사항 내용영역시작 */}
-            <div className="calculation-estimate"></div>
-            {/* 견적특이사항 내용영역끝 */}
-            {/* 견적특이사항 끝 */}
+            {/* 견적 특이사항 코드영역시작 */}
+            <div className={`estimate-check-wrap ${hidden ? 'hide' : ''}`}>
+              <div className="estimate-check-inner">
+                <div className="special-note-check-wrap"></div>
+                {/* 견적특이사항 선택한 내용?영역시작 */}
+                <div className="calculation-estimate">
+                  <dl>
+                    <dt>제목11??</dt>
+                    <dd>제목1 비고</dd>
+                  </dl>
+                  <dl>
+                    <dt>제목22??</dt>
+                    <dd>제목2 비고</dd>
+                  </dl>
+                </div>
+                {/* 견적특이사항 선택한 내용?영역끝 */}
+              </div>
+            </div>
+
+            {/* 견적 특이사항 코드영역 끝 */}
+
+            {/* 견적특이사항 영역끝 */}
             {/* 제품정보 시작 */}
             <div className="table-box-title-wrap">
               <div className="title-wrap">
                 <h3>{getMessage('estimate.detail.header.specialEstimateProductInfo')}</h3>
               </div>
             </div>
-            <div className="estimate-wrap">
+            <div className="esimate-wrap">
               <div className="estimate-list-wrap one">
                 <div className="estimate-box">
                   <div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.totPcs')}</div>
@@ -285,7 +409,7 @@ export default function Estimate({ params }) {
               </div>
             </div>
             {/* YJOD면 아래영역 숨김 */}
-            <div className="common-table bt-able">
+            <div className="common-table bt-able" style={{ display: state?.estimateType === 'YJSS' ? '' : 'none' }}>
               <table>
                 <colgroup>
                   <col style={{ width: '160px' }} />
@@ -319,18 +443,35 @@ export default function Estimate({ params }) {
             <div className="estimate-product-option">
               <div className="product-price-wrap">
                 <div className="product-price-tit">{getMessage('estimate.detail.header.showPrice')}</div>
-                <div className="select-wrap"></div>
+                <div className="select-wrap">
+                  <select className="select-light" name="" id="">
+                    <option value="">111</option>
+                    <option value="">222</option>
+                  </select>
+                </div>
                 <button className="btn-origin grey ml5">{getMessage('estimate.detail.showPrice.btn1')}</button>
               </div>
               <div className="product-edit-wrap">
-                <div className="product-edit-explane">
-                  <div className="click-check">
+                <ul className="product-edit-explane">
+                  <li className="explane-item item01">
                     <span className="ico"></span>
-                    {getMessage('estimate.detail.showPrice.description')}
-                  </div>
-                </div>
+                    {getMessage('estimate.detail.showPrice.description1')}
+                  </li>
+                  <li className="explane-item item02">
+                    <span className="ico"></span>
+                    {getMessage('estimate.detail.showPrice.description2')}
+                  </li>
+                  <li className="explane-item item03">
+                    <span className="ico"></span>
+                    {getMessage('estimate.detail.showPrice.description3')}
+                  </li>
+                  <li className="explane-item item04">
+                    <span className="ico"></span>
+                    {getMessage('estimate.detail.showPrice.description4')}
+                  </li>
+                </ul>
                 <div className="product-edit-btn">
-                  <button className="btn-origin navy mr5">
+                  <button className="btn-origin navy mr5" type="submit">
                     <span className="plus"></span>
                     {getMessage('estimate.detail.showPrice.btn2')}
                   </button>
@@ -348,6 +489,7 @@ export default function Estimate({ params }) {
           </div>
         </div>
         {/* 기본정보끝 */}
+        {/* </form> */}
       </div>
     </div>
   )
diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js
index 280c70da..3af6d048 100644
--- a/src/hooks/floorPlan/estimate/useEstimateController.js
+++ b/src/hooks/floorPlan/estimate/useEstimateController.js
@@ -1,6 +1,9 @@
 import { useAxios } from '@/hooks/useAxios'
-import { useReducer } from 'react'
-
+import { useEffect, useReducer, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
+import { isObjectNotEmpty } from '@/util/common-utils'
 const reducer = (prevState, nextState) => {
   return { ...prevState, ...nextState }
 }
@@ -9,39 +12,127 @@ const reducer = (prevState, nextState) => {
 const ESTIMATE_API_ENDPOINT = '/api/estimates' // API 엔드포인트 정의
 
 const defaultEstimateData = {
-  name: '',
-  objectName: '',
-  estimateDate: '',
-  itemList: [{ id: 1, name: '' }],
+  estimateDate: new Date(), //견적일
+  charger: '', //담당자
+  objectName: '', //안건명
+  objectNameOmit: '', //경칭코드
+  estimateType: 'YJOD', //주문분류
+  remarks: '', //비고
+  // itemList: [{ id: 1, name: '' }],
+  //아이템에 필요없는거 빼기
+  itemList: [
+    {
+      amount: '',
+      fileUploadFlg: '',
+      itemChangeFlg: '',
+      itemGroup: '',
+      itemId: '', //키값??
+      itemName: '',
+      itemNo: '',
+      moduleFlg: '',
+      objectNo: '',
+      pkgMaterialFlg: '',
+      planNo: '',
+      pnowW: '',
+      salePrice: '',
+      saleTotPrice: '',
+      specification: '',
+      unit: '',
+    },
+  ],
 }
 
 // Helper functions
-const updateItemInList = (itemList, id, updates) => {
-  return itemList.map((item) => (item.id === id ? { ...item, ...updates } : item))
+// const updateItemInList = (itemList, id, updates) => {
+const updateItemInList = (itemList, itemId, updates) => {
+  // return itemList.map((item) => (item.id === id ? { ...item, ...updates } : item))
+  return itemList.map((item) => (item.itemId === itemId ? { ...item, ...updates } : item))
 }
 
-export const useEstimateController = () => {
+export const useEstimateController = (planNo) => {
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const objectRecoil = useRecoilValue(floorPlanObjectState)
+  const [estimateData, setEstimateData] = useRecoilState(estimateState)
+
+  const { get, post } = useAxios(globalLocaleState)
+
+  const [isLoading, setIsLoading] = useState(false)
   const { promisePost } = useAxios()
   const [state, setState] = useReducer(reducer, defaultEstimateData)
 
-  const updateItem = (id, updates) => {
+  useEffect(() => {
+    if (!isLoading) {
+      if (objectRecoil.floorPlanObjectNo && planNo) {
+        fetchSetting()
+      }
+    }
+  }, [])
+
+  // 상세 조회
+  const fetchSetting = async () => {
+    try {
+      await get({ url: `/api/estimate/${objectRecoil.floorPlanObjectNo}/${planNo}/detail` }).then((res) => {
+        if (isObjectNotEmpty(res)) {
+          setState(res)
+        }
+      })
+      setIsLoading(true)
+    } catch (error) {
+      console.error('견적서 상세조회 Error: ', error)
+      setIsLoading(true)
+    }
+  }
+
+  // const updateItem = (id, updates) => {
+  const updateItem = (itemId, updates) => {
     setState({
-      itemList: updateItemInList(state.itemList, id, updates),
+      // itemList: updateItemInList(state.itemList, id, updates),
+      itemList: updateItemInList(state.itemList, itemId, updates),
     })
   }
 
   const addItem = () => {
-    const newId = Math.max(...state.itemList.map((item) => item.id)) + 1
+    // const newId = Math.max(...state.itemList.map((item) => item.id)) + 1
+    const newItemId = Math.max(...state.itemList.map((item) => item.itemId)) + 1
     setState({
-      itemList: [...state.itemList, { id: newId, name: '' }],
+      // itemList: [...state.itemList, { id: newId, name: '' }],
+      //셋팅할필요없는거 빼기
+      itemList: [
+        ...state.itemList,
+        {
+          itemId: newItemId,
+          amount: '',
+          fileUploadFlg: '',
+          itemChangeFlg: '',
+          itemGroup: '',
+          itemName: '',
+          itemNo: '',
+          moduleFlg: '',
+          objectNo: '',
+          pkgMaterialFlg: '',
+          planNo: '',
+          pnowW: '',
+          salePrice: '',
+          saleTotPrice: '',
+          specification: '',
+          unit: '',
+        },
+      ],
     })
   }
 
+  useEffect(() => {
+    setEstimateData({ ...state })
+  }, [state])
+
+  //견적서 저장
   const handleEstimateSubmit = async () => {
+    console.log('::담긴 estimateData:::', estimateData)
+    return
     try {
       const result = await promisePost({
         url: ESTIMATE_API_ENDPOINT,
-        data: state,
+        data: estimateData,
       })
       return result
     } catch (error) {
@@ -56,5 +147,6 @@ export const useEstimateController = () => {
     updateItem,
     addItem,
     handleEstimateSubmit,
+    fetchSetting,
   }
 }
diff --git a/src/store/floorPlanObjectAtom.js b/src/store/floorPlanObjectAtom.js
index 3acd49a3..d514fe54 100644
--- a/src/store/floorPlanObjectAtom.js
+++ b/src/store/floorPlanObjectAtom.js
@@ -7,3 +7,9 @@ export const floorPlanObjectState = atom({
   },
   dangerouslyAllowMutability: true,
 })
+
+export const estimateState = atom({
+  key: `estimateState`,
+  default: {},
+  dangerouslyAllowMutability: true,
+})
diff --git a/yarn.lock b/yarn.lock
index f2bcf8b4..a167fa9d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -223,14 +223,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@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":
+"@babel/runtime@^7.20.13", "@babel/runtime@^7.24.8":
   version "7.25.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz"
   integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
@@ -534,6 +527,21 @@
   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.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz#417db42b7f5323d79e93b34a6d7a2a12c0df43fa"
+  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"
@@ -1238,7 +1246,7 @@
     "@react-types/shared" "3.23.1"
     clsx "^1.2.1"
 
-"@nextui-org/system@>=2.0.0", "@nextui-org/system@>=2.1.0", "@nextui-org/system@2.2.5":
+"@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==
@@ -1291,7 +1299,7 @@
     "@react-types/tabs" "3.3.7"
     scroll-into-view-if-needed "3.0.10"
 
-"@nextui-org/theme@>=2.1.0", "@nextui-org/theme@>=2.2.0", "@nextui-org/theme@2.2.9":
+"@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==
@@ -1512,7 +1520,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -1645,7 +1653,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==
@@ -1667,7 +1675,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==
@@ -1697,7 +1705,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==
@@ -1725,7 +1733,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==
@@ -1745,7 +1753,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==
@@ -1754,7 +1762,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==
@@ -1766,7 +1774,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==
@@ -1788,7 +1796,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==
@@ -1807,7 +1815,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==
@@ -1852,7 +1860,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==
@@ -1905,7 +1913,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==
@@ -1965,7 +1973,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==
@@ -2006,7 +2014,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==
@@ -2028,7 +2036,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==
@@ -2038,7 +2046,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==
@@ -2049,7 +2057,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==
@@ -2060,7 +2068,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==
@@ -2076,7 +2084,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==
@@ -2091,7 +2099,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==
@@ -2112,7 +2120,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==
@@ -2139,7 +2147,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==
@@ -2161,7 +2169,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==
@@ -2171,7 +2179,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==
@@ -2189,7 +2197,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==
@@ -2222,7 +2230,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==
@@ -2232,7 +2240,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==
@@ -2247,7 +2255,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==
@@ -2257,7 +2265,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==
@@ -2275,7 +2283,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==
@@ -2284,7 +2292,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==
@@ -2295,7 +2303,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==
@@ -2309,7 +2317,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==
@@ -2325,7 +2333,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==
@@ -2333,7 +2341,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==
@@ -2347,7 +2355,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==
@@ -2355,7 +2363,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==
@@ -2369,14 +2377,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==
@@ -2394,7 +2402,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==
@@ -2408,7 +2416,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==
@@ -2422,7 +2430,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==
@@ -2430,7 +2438,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==
@@ -2444,20 +2452,27 @@
   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"
@@ -2465,14 +2480,7 @@
   dependencies:
     "@react-types/shared" "^3.24.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":
+"@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==
@@ -2496,7 +2504,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==
@@ -2504,21 +2512,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==
@@ -2531,7 +2539,7 @@
   resolved "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz"
   integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
 
-"@swc/helpers@^0.5.0", "@swc/helpers@0.5.5":
+"@swc/helpers@0.5.5", "@swc/helpers@^0.5.0":
   version "0.5.5"
   resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz"
   integrity sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==
@@ -4037,7 +4045,7 @@
   dependencies:
     "@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":
+"@types/react@*":
   version "18.3.11"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz"
   integrity sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==
@@ -4058,6 +4066,11 @@ 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.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  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"
@@ -4108,13 +4121,6 @@ ag-grid-react@^32.0.2:
     ag-grid-community "32.1.0"
     prop-types "^15.8.1"
 
-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"
-  integrity sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==
-  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"
@@ -4122,6 +4128,13 @@ agent-base@6:
   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"
+  integrity sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==
+  dependencies:
+    debug "^4.3.4"
+
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
@@ -4164,6 +4177,19 @@ 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.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
+  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.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz#372e0e7bd279d8e94c653aaa1f67200884bf3e1c"
+  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"
@@ -4231,6 +4257,14 @@ 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.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  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"
@@ -4285,6 +4319,15 @@ 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.yarnpkg.com/canvas/-/canvas-2.11.2.tgz#553d87b1e0228c7ac0fc72887c3adbac4abbd860"
+  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.npmjs.org/chalk/-/chalk-2.4.2.tgz"
@@ -4294,7 +4337,7 @@ chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chokidar@^3.5.3, "chokidar@>=3.0.0 <4.0.0":
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.6.0"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -4309,22 +4352,22 @@ chokidar@^3.5.3, "chokidar@>=3.0.0 <4.0.0":
   optionalDependencies:
     fsevents "~2.3.2"
 
+chownr@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
+  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:
-  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:
+clsx@^1.1.1, 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==
@@ -4348,16 +4391,16 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-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-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-string@^1.9.0:
   version "1.9.1"
   resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz"
@@ -4366,6 +4409,16 @@ 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.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
+  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"
@@ -4374,11 +4427,6 @@ 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"
@@ -4386,6 +4434,11 @@ 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"
@@ -4396,11 +4449,6 @@ 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"
@@ -4411,6 +4459,11 @@ 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.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
 concaveman@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/concaveman/-/concaveman-1.2.1.tgz"
@@ -4421,6 +4474,11 @@ 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.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+  integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
+
 convert-source-map@^1.5.0:
   version "1.9.0"
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz"
@@ -4521,6 +4579,13 @@ dayjs@^1.11.13:
   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:
+  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.npmjs.org/debug/-/debug-4.3.7.tgz"
@@ -4528,18 +4593,18 @@ debug@^4.3.1:
   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"
-
 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.yarnpkg.com/decompress-response/-/decompress-response-4.2.1.tgz#414023cc7a302da25ce2ec82d0d5238ccafd8986"
+  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"
@@ -4555,6 +4620,16 @@ 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.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
+
+detect-libc@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
+  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"
@@ -4745,13 +4820,25 @@ 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@>=10.17.0:
+framer-motion@^11.2.13:
   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.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
+  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
+  dependencies:
+    minipass "^3.0.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  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"
@@ -4767,6 +4854,21 @@ 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.yarnpkg.com/gauge/-/gauge-3.0.2.tgz#03bf4441c044383908bcfa0656ad91803259b395"
+  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"
@@ -4811,6 +4913,18 @@ glob@^10.3.10:
     minipass "^7.1.2"
     path-scurry "^1.11.1"
 
+glob@^7.1.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  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.npmjs.org/globals/-/globals-11.12.0.tgz"
@@ -4831,6 +4945,11 @@ has-flag@^3.0.0:
   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.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+  integrity sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==
+
 hasown@^2.0.0:
   version "2.0.2"
   resolved "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz"
@@ -4885,7 +5004,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==
@@ -4910,9 +5029,17 @@ import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-inherits@^2.0.4:
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.3, inherits@^2.0.4:
   version "2.0.4"
-  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 international-types@^0.8.1:
@@ -5243,6 +5370,13 @@ 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.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  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"
@@ -5293,6 +5427,18 @@ mime-types@^2.1.12:
   dependencies:
     mime-db "1.52.0"
 
+mimic-response@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.1.0.tgz#d13763d35f613d09ec37ebb30bac0469c0ee8f43"
+  integrity sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==
+
+minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  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"
@@ -5300,17 +5446,37 @@ minimatch@^9.0.4:
   dependencies:
     brace-expansion "^2.0.1"
 
-"minipass@^5.0.0 || ^6.0.2 || ^7.0.0":
+minipass@^3.0.0:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.3.6.tgz#7bba384db3a1520d18c9c0e5251c3444e95dd94a"
+  integrity sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==
+  dependencies:
+    yallist "^4.0.0"
+
+minipass@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-5.0.0.tgz#3e9788ffb90b694a5d0ec94479a45b5d8738133d"
+  integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.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==
 
-minipass@^7.1.2:
-  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.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
+  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
+  dependencies:
+    minipass "^3.0.0"
+    yallist "^4.0.0"
 
-ms@^2.1.1, ms@2.1.2:
+mkdirp@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
+ms@2.1.2, ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
@@ -5341,6 +5507,11 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
+nan@^2.17.0:
+  version "2.22.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.22.0.tgz#31bc433fc33213c97bad36404bb68063de604de3"
+  integrity sha512-nbajikzWTMwsW+eSsNm3QwlOs7het9gGJU5dDZzRTQGk03vyBOauxgI4VakDzE0PtsGTmXPsXTbbjVhRwR5mpw==
+
 nanoid@^3.3.6, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
@@ -5383,11 +5554,35 @@ 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.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  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.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
+  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.yarnpkg.com/npmlog/-/npmlog-5.0.1.tgz#f06678e80e29419ad67ab964e0fa69959c1eb8b0"
+  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"
@@ -5403,6 +5598,13 @@ 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.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  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"
@@ -5434,6 +5636,11 @@ 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.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  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"
@@ -5539,15 +5746,6 @@ 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"
@@ -5557,6 +5755,15 @@ 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"
@@ -5646,7 +5853,7 @@ react-datepicker@^7.3.0:
     prop-types "^15.7.2"
     react-onclickoutside "^6.13.0"
 
-"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:
+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==
@@ -5758,7 +5965,7 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-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:
+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==
@@ -5772,6 +5979,15 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
+readable-stream@^3.6.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  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"
@@ -5831,6 +6047,13 @@ 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.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  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"
@@ -5863,7 +6086,7 @@ safe-buffer@~5.1.1:
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass@^1.3.0, sass@^1.77.8:
+sass@^1.77.8:
   version "1.77.8"
   resolved "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz"
   integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
@@ -5898,6 +6121,16 @@ 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.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+semver@^7.3.5:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
 semver@^7.5.4:
   version "7.6.2"
   resolved "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz"
@@ -5908,6 +6141,11 @@ 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.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  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"
@@ -5920,11 +6158,30 @@ 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.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  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.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
+  integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
+
+simple-get@^3.0.3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-3.1.1.tgz#cc7ba77cfbe761036fbfce3d021af25fc5584d55"
+  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"
@@ -5937,7 +6194,7 @@ skmeans@0.9.7:
   resolved "https://registry.npmjs.org/skmeans/-/skmeans-0.9.7.tgz"
   integrity sha512-hNj1/oZ7ygsfmPZ7ZfN5MUBRoGg1gtpnImuJBgLO0ljQ67DtJuiQaiYdS4lUA6s0KCwnPhGivtC/WRwIZLkHyg==
 
-source-map-js@^1.0.2, source-map-js@^1.2.0, "source-map-js@>=0.6.2 <2.0.0":
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
@@ -5972,13 +6229,6 @@ 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"
@@ -5988,16 +6238,16 @@ string_decoder@^1.3.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^4.1.0:
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.3:
   version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
   dependencies:
     emoji-regex "^8.0.0"
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.1:
+string-width@^5.0.1, 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==
@@ -6006,14 +6256,12 @@ string-width@^5.0.1:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-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==
+string_decoder@^1.1.1, string_decoder@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
   dependencies:
-    eastasianwidth "^0.2.0"
-    emoji-regex "^9.2.2"
-    strip-ansi "^7.0.1"
+    safe-buffer "~5.2.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
@@ -6085,7 +6333,7 @@ sweetalert2-react-content@^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==
 
-sweetalert2@^11.0.0, sweetalert2@^11.14.1:
+sweetalert2@^11.14.1:
   version "11.14.1"
   resolved "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.14.1.tgz"
   integrity sha512-xadhfcA4STGMh8nC5zHFFWURhRpWc4zyI3GdMDFH/m3hGWZeQQNWhX9xcG4lI9gZYsi/IlazKbwvvje3juL3Xg==
@@ -6112,7 +6360,7 @@ tailwind-variants@^0.1.20:
   dependencies:
     tailwind-merge "^1.14.0"
 
-tailwindcss@*, tailwindcss@^3.4.1, tailwindcss@>=3.4.0:
+tailwindcss@^3.4.1:
   version "3.4.4"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz"
   integrity sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==
@@ -6140,6 +6388,18 @@ tailwindcss@*, tailwindcss@^3.4.1, tailwindcss@>=3.4.0:
     resolve "^1.22.2"
     sucrase "^3.32.0"
 
+tar@^6.1.11:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a"
+  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"
@@ -6228,6 +6488,11 @@ tr46@^3.0.0:
   dependencies:
     punycode "^2.1.1"
 
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  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"
@@ -6298,9 +6563,9 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-util-deprecate@^1.0.2:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
 uuid@^10.0.0:
@@ -6327,6 +6592,11 @@ w3c-xmlserializer@^3.0.0:
   dependencies:
     xml-name-validator "^4.0.0"
 
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  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"
@@ -6360,6 +6630,14 @@ 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.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  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"
@@ -6367,6 +6645,13 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+wide-align@^1.1.2:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.5.tgz#df1d4c206854369ecf3c9a4898f1b23fbd9d15d3"
+  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"
@@ -6385,6 +6670,11 @@ wrap-ansi@^8.1.0:
     string-width "^5.0.1"
     strip-ansi "^7.0.1"
 
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  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"
@@ -6400,6 +6690,11 @@ 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.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
 yaml@^1.10.0:
   version "1.10.2"
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"

From a1f80b0752f65eadad0ef8c1b49e1550f7ac5786 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Mon, 4 Nov 2024 18:03:43 +0900
Subject: [PATCH 15/18] =?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 | 2777 +++++++++++++--------------
 src/styles/_modal.scss    | 3711 +++++++++++++++++++------------------
 2 files changed, 3369 insertions(+), 3119 deletions(-)

diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 6715d48b..7795cab8 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -17,1444 +17,1493 @@
 //     }
 // }
 // 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: 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%;
-            .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: 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 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-right: 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;
         }
-    }
-}
-
-// 견적서
-.estimate-list-wrap{
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    &.one{
-        .estimate-box{
-            &:last-child{
-                min-width: unset;
-            }
+        .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-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;
-            }
-        }
-    }
-}
-
-.estimate-arr-btn{
-    display: block;
-    width: 20px;
-    height: 20px;
-    background-color: #94A0AD;
-    border: 1px solid #94A0AD;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-image: url(../../public/static/images/canvas/estiment_arr.svg);
-    background-size: 11px 7px;
-    border-radius: 2px;
-    &.up{
-        rotate: 180deg;
-    }
-    &.on{
-        background-color: #fff;
-        border-color: #C2D0DD;
-        background-image: url(../../public/static/images/canvas/estiment_arr_color.svg)
-    }
-}
-.estimate-check-wrap{
-    .estimate-check-inner{
-        display: block;
-    }
-    &.hide{
-        border-bottom: 1px solid #ECF0F4;
-        margin-bottom: 15px;
-        .estimate-check-inner{
-            display: none;
-        }
-    }
-}
-
-.special-note-check-wrap{
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    border-radius: 3px;
-    margin-bottom: 30px;
-    .special-note-check-item{
-        padding: 14px 10px;
-        border: 1px solid #ECF0F4;
-        margin-top: -1px;
-        margin-right: -1px;
-        &.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;
+      }
+    }
+  }
+}
+
+.estimate-arr-btn {
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-color: #94a0ad;
+  border: 1px solid #94a0ad;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url(../../public/static/images/canvas/estiment_arr.svg);
+  background-size: 11px 7px;
+  border-radius: 2px;
+  &.up {
+    rotate: 180deg;
+  }
+  &.on {
+    background-color: #fff;
+    border-color: #c2d0dd;
+    background-image: url(../../public/static/images/canvas/estiment_arr_color.svg);
+  }
+}
+.estimate-check-wrap {
+  .estimate-check-inner {
+    display: block;
+  }
+  &.hide {
+    border-bottom: 1px solid #ecf0f4;
+    margin-bottom: 15px;
+    .estimate-check-inner {
+      display: none;
+    }
+  }
+}
+
+.special-note-check-wrap {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  border-radius: 3px;
+  margin-bottom: 30px;
+  .special-note-check-item {
+    padding: 14px 10px;
+    border: 1px solid #ecf0f4;
+    margin-top: -1px;
+    margin-right: -1px;
+    &.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;
-        width: 100%;
-        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;
+    width: 100%;
+    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-right: 3px;
-                    min-width: 150px;
-                }
-                .select-box{
-                    width: 100px;
-                    margin: 0 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-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 {
+    .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;
-                        }
-                    } 
-                } 
-            } 
-        } 
-    } 
-    
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index da421f16..4ddb3bad 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,1902 +4,2103 @@ $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;
+.normal-font {
+  font-size: 12px;
+  font-weight: 400;
+  color: #fff;
 }
-.bold-font{
-    font-size: 12px;
-    font-weight: 500;
-    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;
+.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 0.17s ease-in-out forwards;
+  }
+  &.unmount {
+    animation: unmountpop 0.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;
+      }
     }
-    &.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{
+    .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 0.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;
-    }
+.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: 5px;
-    margin-left: auto;
+.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{
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                font-weight: $pop-bold-weight;
-                padding: 18px 0;
-                border-bottom: 1px solid #424242;
-                vertical-align: middle;
-                .tip-wrap{
-                    display: flex;
-                    align-items: center;
-                }
-            }
-            td{
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                border-bottom: 1px solid #424242;
-                padding: 18px 0 18px 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{
+.placement-table {
+  table {
+    table-layout: fixed;
+    tr {
+      th {
         font-size: $pop-normal-size;
         color: $pop-color;
-        font-weight: $pop-normal-weight;
+        font-weight: $pop-bold-weight;
+        padding: 18px 0;
+        border-bottom: 1px solid #424242;
+        vertical-align: middle;
+        .tip-wrap {
+          display: flex;
+          align-items: center;
+        }
+      }
+      td {
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        border-bottom: 1px solid #424242;
+        padding: 18px 0 18px 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;
+        }
+      }
+    }
+  }
 }
 
-.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;
-        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;
-        }
-    }
+.pop-form-radio {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
-.img-name-wrap{
+.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 0.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);
+  }
 }
 
-.for-address{
-    input{
-        flex: 1;
+.for-address {
+  input {
+    flex: 1;
+  }
+  .check-address {
+    flex: none;
+    width: 18px;
+    height: 18px;
+    margin-left: 5px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    &.fail {
+      background-image: url(../../public/static/images/canvas/img_check_fail.svg);
     }
-    .check-address{
-        flex: none;
-        width: 18px;
-        height: 18px;
-        margin-left: 5px;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
-        &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
+    &.success {
+      background-image: url(../../public/static/images/canvas/img_check_success.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;
     }
+    .outline-form {
+      // width: 50%;
+      margin-right: 15px;
+    }
+  }
+  &:last-child {
+    border-bottom: 1px solid #424242;
+  }
+}
+.outline-form {
+  display: flex;
+  align-items: center;
 
-    .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;
+  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{
+.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;
+.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;
-                }
-            }
-        }
-    }
-}
-
-// 지붕형상 설정
-.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{
+.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;
-}
-.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 0.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 0.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 0.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 0.15s ease-in-out;
+    i {
+      height: 15px;
+      display: block;
+      margin-left: 10px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      transition: all 0.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 0.15s ease-in-out,
+      border 0.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 0.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;
-}
-
-// 각 변 속성 변경
-.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: 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;
+        .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;
                 }
+              }
             }
-            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 0.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;
+      }
+      i {
+        color: #fff;
+      }
     }
-}
-
-.size-option-top{
-    margin-bottom: 15px;
-}
-.size-option-side{
+  }
+  .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 0.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 0.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 0.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.2);
+  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;
-    }
-}
\ No newline at end of file
+.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;
+  }
+}

From 70ebb63fa78346f06ed3769715afd837f1d84b97 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 5 Nov 2024 10:17:40 +0900
Subject: [PATCH 16/18] =?UTF-8?q?api=20=ED=98=B8=EC=B6=9C=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/app/roof2/RoofSelect.jsx         | 128 ---------------------------
 src/app/roof2/page.jsx               |   6 --
 src/components/InitSettingsModal.jsx |   7 --
 3 files changed, 141 deletions(-)
 delete mode 100644 src/app/roof2/RoofSelect.jsx

diff --git a/src/app/roof2/RoofSelect.jsx b/src/app/roof2/RoofSelect.jsx
deleted file mode 100644
index d759398b..00000000
--- a/src/app/roof2/RoofSelect.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-'use client'
-
-import { Select, SelectItem } from '@nextui-org/react'
-import { useEffect, useState } from 'react'
-import { useAxios } from '@/hooks/useAxios'
-
-export default function RoofSelect() {
-  const [roofMaterials, setRoofMaterials] = useState([])
-  const [manufacturers, setManufacturers] = useState([])
-  const [trestles, setTrestles] = useState([])
-  const [modules, setModules] = useState([])
-  const [originTrestles, setOriginTrestles] = useState([])
-
-  const [roofMaterialId, setRoofMaterialId] = useState(null)
-  const [manufacturerId, setManufacturerId] = useState(null)
-  const [trestleId, setTrestleId] = useState(null)
-
-  const { get } = useAxios()
-
-  useEffect(() => {
-    get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
-      //TODO: error handling
-      if (!res) return
-
-      setRoofMaterials(res)
-    })
-  }, [])
-
-  useEffect(() => {
-    if (!roofMaterialId) {
-      return
-    }
-
-    get({ url: `/api/roof-material/roof-material-infos/${roofMaterialId}/trestles` }).then((res) => {
-      if (res.length === 0) {
-        return
-      }
-      setOriginTrestles(res)
-      const manufactural = res.map((trestle) => {
-        return { id: trestle.manufacturerId, name: trestle.manufacturerName }
-      })
-      // Remove duplicates
-      const uniqueManufactural = Array.from(new Set(manufactural.map((a) => a.id))).map((id) => {
-        return manufactural.find((a) => a.id === id)
-      })
-
-      setManufacturers(uniqueManufactural)
-    })
-  }, [roofMaterialId])
-
-  useEffect(() => {
-    if (!manufacturerId) {
-      return
-    }
-
-    const trestles = originTrestles.filter((trestle) => trestle.manufacturerId === manufacturerId)
-    setTrestles(trestles)
-  }, [manufacturerId])
-
-  useEffect(() => {
-    if (!trestleId) {
-      return
-    }
-    get({ url: `/api/module/module-infos?roofMaterialId=${roofMaterialId}&trestleId=${trestleId}` }).then((res) => {
-      if (res.length === 0) {
-        return
-      }
-      setModules(res)
-    })
-  }, [trestleId])
-
-  const handleRoofMaterialOnChange = (e) => {
-    const roofMaterialId = e.target.value
-    setRoofMaterialId(roofMaterialId)
-    setManufacturers([])
-    setManufacturerId(null)
-    setTrestleId(null)
-    setTrestles([])
-    setModules([])
-  }
-
-  const handleManufacturersOnChange = (e) => {
-    const manufacturerId = Number(e.target.value)
-    setTrestles([])
-    setManufacturerId(manufacturerId)
-    setTrestleId(null)
-    setModules([])
-  }
-
-  const handleTrestlesOnChange = (e) => {
-    const trestleId = Number(e.target.value)
-    setTrestleId(trestleId)
-    setModules([])
-  }
-
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      {roofMaterials.length > 0 && (
-        <Select label="지붕재" className="max-w-xs" onChange={handleRoofMaterialOnChange}>
-          {roofMaterials.map((roofMaterial) => (
-            <SelectItem key={roofMaterial.id}>{roofMaterial.name}</SelectItem>
-          ))}
-        </Select>
-      )}
-      {manufacturers.length > 0 && (
-        <Select label="제조 회사" className="max-w-xs" onChange={handleManufacturersOnChange}>
-          {manufacturers.map((manufacturer) => (
-            <SelectItem key={manufacturer.id}>{manufacturer.name}</SelectItem>
-          ))}
-        </Select>
-      )}
-      {trestles.length > 0 && (
-        <Select label="가대" className="max-w-xs" onChange={handleTrestlesOnChange}>
-          {trestles.map((trestle) => (
-            <SelectItem key={trestle.id}>{trestle.name}</SelectItem>
-          ))}
-        </Select>
-      )}
-      {modules.length > 0 && (
-        <Select label="설치가능 모듈" className="max-w-xs">
-          {modules.map((module) => (
-            <SelectItem key={module.id}>{module.name}</SelectItem>
-          ))}
-        </Select>
-      )}
-    </div>
-  )
-}
diff --git a/src/app/roof2/page.jsx b/src/app/roof2/page.jsx
index dce69910..94e86fbe 100644
--- a/src/app/roof2/page.jsx
+++ b/src/app/roof2/page.jsx
@@ -1,14 +1,8 @@
 import Roof2 from '@/components/Roof2'
-import RoofSelect from '@/app/roof2/RoofSelect'
 
 export default async function Roof2Page() {
   return (
     <>
-      <div>
-        <div className="m-2">
-          <RoofSelect />
-        </div>
-      </div>
       <div className="flex flex-col justify-center my-8 pt-20">
         <Roof2 />
       </div>
diff --git a/src/components/InitSettingsModal.jsx b/src/components/InitSettingsModal.jsx
index 5f0837a8..52c82e86 100644
--- a/src/components/InitSettingsModal.jsx
+++ b/src/components/InitSettingsModal.jsx
@@ -29,13 +29,6 @@ export default function InitSettingsModal(props) {
   //const { get, post } = useAxios()
 
   useEffect(() => {
-    get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
-      //TODO: error handling
-      if (!res) return
-
-      setRoofMaterials(res)
-    })
-
     get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
       if (res.length == 0) return
 

From 34e3872123da165564787954cfbde94b765e7509 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Tue, 5 Nov 2024 13:13:22 +0900
Subject: [PATCH 17/18] =?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/components/common/font/FontSetting.jsx | 43 +++++++++++-----------
 src/locales/ja.json                        | 13 +++++++
 src/locales/ko.json                        | 13 +++++++
 3 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx
index 54b22b3b..a658871d 100644
--- a/src/components/common/font/FontSetting.jsx
+++ b/src/components/common/font/FontSetting.jsx
@@ -14,15 +14,7 @@ const fonts = [
   { name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
   { name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
 ]
-const fontOptions = [
-  { name: '보통', value: 'normal' },
-  { name: '기울임꼴', value: 'italic' },
-  {
-    name: '굵게',
-    value: 'bold',
-  },
-  { name: '굵은 기울임꼴', value: 'boldAndItalic' },
-]
+
 const fontSizes = [
   ...Array.from({ length: 4 }).map((_, index) => {
     return { name: index + 8, value: index + 8 }
@@ -34,17 +26,7 @@ const fontSizes = [
   { name: 48, value: 48 },
   { name: 72, value: 72 },
 ]
-const fontColors = [
-  { name: '검정색', value: 'black' },
-  { name: '빨강색', value: 'red' },
-  { name: '파랑색', value: 'blue' },
-  { name: '회색', value: 'gray' },
-  { name: '황색', value: 'yellow' },
-  { name: '녹색', value: 'green' },
-  { name: '분홍색', value: 'pink' },
-  { name: '황금색', value: 'gold' },
-  { name: '남색', value: 'darkblue' },
-]
+
 export default function FontSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false } = props
@@ -57,7 +39,26 @@ export default function FontSetting(props) {
   const [selectedFontWeight, setSelectedFontWeight] = useState(currentFont.fontWeight)
   const [selectedFontSize, setSelectedFontSize] = useState(currentFont.fontSize)
   const [selectedFontColor, setSelectedFontColor] = useState(currentFont.fontColor)
-
+  const fontOptions = [
+    { name: getMessage('font.style.normal'), value: 'normal' },
+    { name: getMessage('font.style.italic'), value: 'italic' },
+    {
+      name: getMessage('font.style.bold'),
+      value: 'bold',
+    },
+    { name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
+  ]
+  const fontColors = [
+    { name: getMessage('color.black'), value: 'black' },
+    { name: getMessage('color.red'), value: 'red' },
+    { name: getMessage('color.blue'), value: 'blue' },
+    { name: getMessage('color.gray'), value: 'gray' },
+    { name: getMessage('color.yellow'), value: 'yellow' },
+    { name: getMessage('color.green'), value: 'green' },
+    { name: getMessage('color.pink'), value: 'pink' },
+    { name: getMessage('color.gold'), value: 'gold' },
+    { name: getMessage('color.darkblue'), value: 'darkblue' },
+  ]
   const handleSaveBtn = () => {
     setGlobalFont((prev) => {
       return {
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 390b3fe7..05ab09cf 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -483,6 +483,19 @@
   "commons.east": "ドン",
   "commons.south": "南",
   "commons.north": "北",
+  "font.style.normal": "보통(JA)",
+  "font.style.italic": "기울임꼴(JA)",
+  "font.style.bold": "굵게(JA)",
+  "font.style.bold.italic": "굵은 기울임꼴(JA)",
+  "color.black": "검정색(JA)",
+  "color.red": "빨강색(JA)",
+  "color.blue": "파랑색(JA)",
+  "color.gray": "회색(JA)",
+  "color.yellow": "황색(JA)",
+  "color.green": "녹색(JA)",
+  "color.pink": "분홍색(JA)",
+  "color.gold": "황금색(JA)",
+  "color.darkblue": "남색(JA)",
   "site.name": "Q.CAST III",
   "site.sub_name": "太陽光発電システム図面管理サイト",
   "board.notice.title": "お知らせ",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 5f3fd48d..d8cef240 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -489,6 +489,19 @@
   "commons.east": "동",
   "commons.south": "남",
   "commons.north": "북",
+  "font.style.normal": "보통",
+  "font.style.italic": "기울임꼴",
+  "font.style.bold": "굵게",
+  "font.style.bold.italic": "굵은 기울임꼴",
+  "color.black": "검정색",
+  "color.red": "빨강색",
+  "color.blue": "파랑색",
+  "color.gray": "회색",
+  "color.yellow": "황색",
+  "color.green": "녹색",
+  "color.pink": "분홍색",
+  "color.gold": "황금색",
+  "color.darkblue": "남색",
   "site.name": "Q.CAST III",
   "site.sub_name": "태양광 발전 시스템 도면관리 사이트",
   "board.notice.title": "공지사항",

From 30dc9a12155ad876d4ad20d9826c0fb9e9a27d34 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Tue, 5 Nov 2024 13:14:53 +0900
Subject: [PATCH 18/18] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/floorPlan/estimate/useEstimateController.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js
index 3af6d048..87fa15ca 100644
--- a/src/hooks/floorPlan/estimate/useEstimateController.js
+++ b/src/hooks/floorPlan/estimate/useEstimateController.js
@@ -18,6 +18,7 @@ const defaultEstimateData = {
   objectNameOmit: '', //경칭코드
   estimateType: 'YJOD', //주문분류
   remarks: '', //비고
+  estimateOption: '', //견적특이사항
   // itemList: [{ id: 1, name: '' }],
   //아이템에 필요없는거 빼기
   itemList: [