Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into qcast-pub

src/app/floor-plan/EventProvider.js

@@ -0,0 +1,34 @@
+import { useEvent } from '@/hooks/useEvent'
+import { createContext, useState } from 'react'
+
+export const EventContext = createContext({})
+
+const EventProvider = ({ children }) => {
+  const {
+    addDocumentEventListener,
+    addCanvasMouseEventListener,
+    addTargetMouseEventListener,
+    removeAllMouseEventListeners,
+    removeAllDocumentEventListeners,
+    removeDocumentEvent,
+    removeMouseEvent,
+    removeMouseLine,
+    initEvent,
+  } = useEvent()
+
+  const [value, setValue] = useState({
+    addDocumentEventListener,
+    addCanvasMouseEventListener,
+    addTargetMouseEventListener,
+    removeAllMouseEventListeners,
+    removeAllDocumentEventListeners,
+    removeDocumentEvent,
+    removeMouseEvent,
+    removeMouseLine,
+    initEvent,
+  })
+
+  return <EventContext.Provider value={value}>{children}</EventContext.Provider>
+}
+
+export default EventProvider

src/app/floor-plan/layout.js

@@ -3,17 +3,20 @@
 import FloorPlanProvider from './FloorPlanProvider'
 import FloorPlan from '@/components/floor-plan/FloorPlan'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
+import EventProvider from './EventProvider'
 
 export default function FloorPlanLayout({ children }) {
   console.log('🚀 ~ FloorPlanLayout ~ FloorPlanLayout:')
 
   return (
     <>
+      <EventProvider>
         <FloorPlanProvider>
           <FloorPlan>
             <CanvasLayout>{children}</CanvasLayout>
           </FloorPlan>
         </FloorPlanProvider>
+      </EventProvider>
     </>
   )
 }

src/components/common/context-menu/QContextMenu.jsx

@@ -1,11 +1,12 @@
 'use client'
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import '@/styles/contents.scss'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useEvent } from '@/hooks/useEvent'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function QContextMenu(props) {
   const { contextRef, canvasProps } = props
@@ -14,7 +15,8 @@ export default function QContextMenu(props) {
   const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
   const { tempGridMode, setTempGridMode } = useTempGrid()
   const { handleKeyup } = useContextMenu()
-  const { addDocumentEventListener, removeDocumentEvent } = useEvent()
+  // const { addDocumentEventListener, removeDocumentEvent } = useEvent()
+  const { addDocumentEventListener, removeDocumentEvent } = useContext(EventContext)
 
   let contextType = ''
 

src/components/common/font/FontSetting.jsx

@@ -54,23 +54,6 @@ export default function FontSetting(props) {
     { id: 'gold', name: getMessage('color.gold'), value: 'gold' },
     { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
   ]
-  useEffect(() => {
-    if (font.fontFamily) {
-      setSelectedFont(fonts.filter((data) => data.value === font.fontFamily)[0])
-    }
-
-    if (font.fontWeight) {
-      setSelectedFontWeight(fontOptions.filter((data) => data.value === font.fontWeight)[0])
-    }
-
-    if (font.fontSize) {
-      setSelectedFontSize(fontSizes.filter((data) => data.value === font.fontSize)[0])
-    }
-
-    if (font.fontColor) {
-      setSelectedFontColor(fontColors.filter((data) => data.value === font.fontColor)[0])
-    }
-  }, [])
 
   const handleSaveBtn = () => {
     onSave({
@@ -131,10 +114,10 @@ export default function FontSetting(props) {
               <div className="font-ex-box">
                 <span
                   style={{
-                    fontFamily: selectedFont?.value ?? '',
+                    fontFamily: selectedFont?.value ?? 'MS PGothic',
                     fontWeight: selectedFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
                     fontStyle: selectedFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
-                    fontSize: selectedFontSize?.value ?? '12px',
+                    fontSize: selectedFontSize?.value ?? 16,
                     color: selectedFontColor?.value ?? 'black',
                   }}
                 >

src/components/estimate/Estimate.jsx

@@ -20,6 +20,8 @@ import ProductFeaturesPop from './popup/ProductFeaturesPop'
 import { v4 as uuidv4 } from 'uuid'
 
 export default function Estimate({ params }) {
+  const [handlePricingFlag, setHandlePricingFlag] = useState(false)
+  const [specialNoteFirstFlg, setSpecialNoteFirstFlg] = useState(false)
   const fixedKey = 'itemKey'
   const [itemChangeYn, setItemChangeYn] = useState(false)
   const { session } = useContext(SessionContext)
@@ -62,6 +64,7 @@ export default function Estimate({ params }) {
 
   //견적특이사항 List
   const [specialNoteList, setSpecialNoteList] = useState([])
+  const [popShowSpecialNoteList, setPopShowSpecialNoteList] = useState([])
 
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get, promisePost } = useAxios(globalLocaleState)
@@ -97,22 +100,41 @@ export default function Estimate({ params }) {
         setDisplayItemList(res)
       }
     })
+    //견적특이사항 API호출
+    //여러개 선택하면 구분자로 (、)
+    //제품영역 팝업용
+    let url = '/api/estimate/special-note-list'
+    get({ url: url }).then((res) => {
+      if (isNotEmptyArray(res)) {
+        setPopShowSpecialNoteList(res)
+      }
+    })
   }, [])
 
   useEffect(() => {
     //견적특이사항 API호출
     //여러개 선택하면 구분자로 (、)
-    let url = `/api/estimate/special-note-list`
+    //체크용
+    if (!specialNoteFirstFlg) {
+      let url = `/api/estimate/special-note-title-list`
       get({ url: url }).then((res) => {
         if (isNotEmptyArray(res)) {
+          //디테일 ATTR001、ATTR002、ATTR003、ATTR007、ATTR009、ATTR010、ATTR015、ATTR019
           if (estimateContextState?.estimateOption) {
             res.map((row) => {
               let estimateOption = estimateContextState?.estimateOption?.split('、')
               row.check = false
               estimateOption.map((row2) => {
+                if (row.pkgYn === '0') {
                   if (row2 === row.code) {
                     row.check = true
                   }
+                } else {
+                  if (row.code.includes(row2)) {
+                    row.check = true
+                    return
+                  }
+                }
               })
               //detail과 상관없이 디폴트 체크목록
               //ATTR003,ATTR007
@@ -123,10 +145,14 @@ export default function Estimate({ params }) {
                 row.check = true
               }
             })
+
             setSpecialNoteList(res)
+
+            setSpecialNoteFirstFlg(true)
           }
         }
       })
+    }
   }, [estimateContextState?.estimateOption])
 
   //API데이터로 견적일 셋팅
@@ -141,7 +167,9 @@ export default function Estimate({ params }) {
   //견적일 set
   useEffect(() => {
     let estimateDate = dayjs(startDate).format('YYYY-MM-DD')
+    if (begin === 1) {
       setEstimateContextState({ estimateDate: estimateDate })
+    }
   }, [startDate])
 
   useEffect(() => {
@@ -226,7 +254,9 @@ export default function Estimate({ params }) {
         }
 
         //YJSS UNIT_PIRCE로 프라이싱 실행
+        if (handlePricingFlag) {
           handlePricing('UNIT_PRICE')
+        }
       } else {
         if (specialNoteList.length > 0) {
           specialNoteList.map((item) => {
@@ -243,8 +273,10 @@ export default function Estimate({ params }) {
         })
 
         //YJOD로 돌아가도 UNIT_PRICE로 프라이싱 실행해서 정가로 셋팅
+        if (handlePricingFlag) {
           handlePricing('UNIT_PRICE')
         }
+      }
 
       setItemChangeYn(true)
     }
@@ -335,7 +367,6 @@ export default function Estimate({ params }) {
                   updateList.push({ ...item, salePrice: '0', saleTotPrice: '0' })
                 }
               })
-
               setEstimateContextState({
                 priceCd: showPriceCd,
                 itemList: updateList,
@@ -398,7 +429,6 @@ export default function Estimate({ params }) {
       })
       //아이템들 중 조건에 맞는애들 뽑아서 상단 공급가액 부가세 총액 수정
       setItemChangeYn(true)
-    } else {
     }
   }
 
@@ -422,10 +452,13 @@ export default function Estimate({ params }) {
     updateList = estimateContextState.itemList.map((item) => {
       if (item.dispOrder === dispOrder) {
         return { ...item, ...updates }
+      } else if (item.paDispOrder === dispOrder) {
+        return { ...item, ...updates, amount: (item.bomAmount * amount?.replaceAll(',', '')).toLocaleString(), saleTotPrice: '0' }
       } else {
         return item
       }
     })
+
     setEstimateContextState({
       itemList: updateList,
     })
@@ -492,6 +525,7 @@ export default function Estimate({ params }) {
       updates.itemGroup = res.itemGroup
       updates.delFlg = '0' // 삭제플래그 0
       updates.saleTotPrice = (res.salePrice * estimateContextState.itemList[index].amount).toString()
+      updates.amount = ''
 
       if (estimateContextState.estimateType === 'YJSS') {
         if (res.pkgMaterialFlg === '0') {
@@ -506,8 +540,8 @@ export default function Estimate({ params }) {
         if (item.dispOrder === dispOrder) {
           return { ...item, ...updates }
         } else if (item.paDispOrder === dispOrder) {
-          return { ...item, delFlg: '0' }
+          //봄제품을 바꿨을떄
-          // return { ...item, delFlg: '1' }
+          return { ...item, delFlg: '1' }
         } else {
           return item
         }
@@ -520,14 +554,16 @@ export default function Estimate({ params }) {
             bomItem.dispOrder = (index + 1 + maxItemDispOrder).toString()
             bomItem.paDispOrder = dispOrder
             bomItem.salePrice = '0'
-            //unitPrice는??
             bomItem.saleTotPrice = '0'
+            bomItem.unitPrice = '0'
+            // bomItem.amount = null
           } else {
             bomItem.dispOrder = (index + 1 + Number(dispOrder)).toString()
             bomItem.paDispOrder = dispOrder
             bomItem.salePrice = '0'
-            //unitPrice는??
             bomItem.saleTotPrice = '0'
+            bomItem.unitPrice = '0'
+            // bomItem.amount = null
           }
 
           bomItem.delFlg = '0'
@@ -599,11 +635,10 @@ export default function Estimate({ params }) {
       let totPrice = 0
       let addSupplyPrice = 0
       if (estimateContextState.estimateType === 'YJOD') {
-        console.log('YJOD 토탈만들어주기::::::::::', estimateContextState.itemList)
-
         estimateContextState.itemList.sort((a, b) => {
           return a.dispOrder - b.dispOrder
         })
+        console.log('YJOD 토탈만들어주기::::::::::', estimateContextState.itemList)
 
         estimateContextState.itemList.map((item) => {
           //delete item.showSalePrice
@@ -647,15 +682,15 @@ export default function Estimate({ params }) {
         estimateContextState.itemList.map((item) => {
           if (item.delFlg === '0') {
             let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', ''))
-            let price = Number(item.saleTotPrice?.replaceAll(',', ''))
             let salePrice = Number(item.salePrice?.replaceAll(',', ''))
+            let saleTotPrice = Number(item.saleTotPrice?.replaceAll(',', ''))
 
             if (isNaN(amount)) {
               amount = 0
             }
 
-            if (isNaN(price)) {
+            if (isNaN(saleTotPrice)) {
-              price = 0
+              saleTotPrice = 0
             }
 
             if (isNaN(salePrice)) {
@@ -667,8 +702,11 @@ export default function Estimate({ params }) {
               totVolKw += volKw
             }
 
-            // const price
+            setEstimateContextState({
-            supplyPrice += price
+              pkgTotPrice: estimateContextState.pkgAsp.replaceAll(',', '') * totVolKw,
+            })
+            //pkgTotPrice
+            // const saleTotPrice
             totAmount += amount
             if (item.pkgMaterialFlg === '1') {
               const pkgPrice = amount * salePrice
@@ -676,6 +714,7 @@ export default function Estimate({ params }) {
               //YJSS는 PKG제외상품들만(1) 모아서 수량 * 단가를 공급가액(supplyPrice)에 추가로 더해줌
               addSupplyPrice += pkgPrice
             }
+
             if (!item.paDispOrder) {
               //paDispOrder
               if (item.pkgMaterialFlg === '0') {
@@ -685,8 +724,7 @@ export default function Estimate({ params }) {
             }
           }
         })
-
+        supplyPrice = addSupplyPrice + Number(estimateContextState.pkgTotPrice)
-        supplyPrice += addSupplyPrice
         vatPrice = supplyPrice * 0.1
         totPrice = supplyPrice + vatPrice
         setEstimateContextState({
@@ -855,6 +893,7 @@ export default function Estimate({ params }) {
                             checked={estimateContextState?.estimateType === 'YJSS' ? true : false}
                             onChange={(e) => {
                               //주문분류
+                              setHandlePricingFlag(true)
                               setEstimateContextState({ estimateType: e.target.value })
                             }}
                           />
@@ -868,6 +907,7 @@ export default function Estimate({ params }) {
                             value={'YJOD'}
                             checked={estimateContextState?.estimateType === 'YJOD' ? true : false}
                             onChange={(e) => {
+                              setHandlePricingFlag(true)
                               setEstimateContextState({ estimateType: e.target.value })
                             }}
                           />
@@ -1051,7 +1091,9 @@ export default function Estimate({ params }) {
                                 settingShowContent(row.code, event)
                               }}
                             />
-                            <label htmlFor={row.code}>{row.codeNm}</label>
+                            <label htmlFor={row.code}>
+                              {row.codeNm} / {row.code}
+                            </label>
                           </div>
                         </div>
                       )
@@ -1096,15 +1138,15 @@ export default function Estimate({ params }) {
                 </div>
                 <div className="estimate-box">
                   <div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.supplyPrice')}</div>
-                  <div className="estimate-name blue">{convertNumberToPriceDecimalToFixed(estimateContextState?.supplyPrice, 2)}</div>
+                  <div className="estimate-name blue">{convertNumberToPriceDecimal(estimateContextState?.supplyPrice)}</div>
                 </div>
                 <div className="estimate-box">
                   <div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.vatPrice')}</div>
-                  <div className="estimate-name blue">{convertNumberToPriceDecimalToFixed(estimateContextState?.vatPrice, 2)}</div>
+                  <div className="estimate-name blue">{convertNumberToPriceDecimal(estimateContextState?.vatPrice)}</div>
                 </div>
                 <div className="estimate-box">
                   <div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.totPrice')}</div>
-                  <div className="estimate-name red">{convertNumberToPriceDecimalToFixed(estimateContextState?.totPrice, 2)}</div>
+                  <div className="estimate-name red">{convertNumberToPriceDecimal(estimateContextState?.totPrice)}</div>
                 </div>
               </div>
             </div>
@@ -1138,9 +1180,9 @@ export default function Estimate({ params }) {
                       </div>
                     </td>
                     <th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgWeight')}</th>
-                    <td>{convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 2)}</td>
+                    <td>{convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 3)}</td>
                     <th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgPrice')}</th>
-                    <td>{convertNumberToPriceDecimalToFixed(estimateContextState?.pkgTotPrice, 2)}</td>
+                    <td>{convertNumberToPriceDecimal(estimateContextState?.pkgTotPrice)}</td>
                   </tr>
                 </tbody>
               </table>
@@ -1172,6 +1214,7 @@ export default function Estimate({ params }) {
                   type="button"
                   className="btn-origin grey ml5"
                   onClick={() => {
+                    setHandlePricingFlag(true)
                     handlePricing(showPriceCd)
                   }}
                 >
@@ -1356,7 +1399,7 @@ export default function Estimate({ params }) {
                             </div> */}
                               </div>
                             </td>
-                            <td className="al-r">{convertNumberToPriceDecimalToFixed(item?.saleTotPrice?.replaceAll(',', ''), 2)}</td>
+                            <td className="al-r">{convertNumberToPriceDecimal(item?.saleTotPrice?.replaceAll(',', ''))}</td>
                             {/* {item?.showSaleTotPrice === '0' ? (
                               <td className="al-r"></td>
                             ) : (
@@ -1379,7 +1422,7 @@ export default function Estimate({ params }) {
       </div>
       {productFeaturesPopupOpen && (
         <ProductFeaturesPop
-          specialNoteList={specialNoteList}
+          popShowSpecialNoteList={popShowSpecialNoteList}
           showProductFeatureData={showProductFeatureData}
           setProductFeaturesPopupOpen={setProductFeaturesPopupOpen}
         />

src/components/estimate/popup/ProductFeaturesPop.jsx

@@ -1,13 +1,13 @@
 'use client'
 import { useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-export default function ProductFeaturesPop({ specialNoteList, showProductFeatureData, setProductFeaturesPopupOpen }) {
+export default function ProductFeaturesPop({ popShowSpecialNoteList, showProductFeatureData, setProductFeaturesPopupOpen }) {
   const [showSpecialNoteList, setShowSpecialNoteList] = useState([])
   const { getMessage } = useMessage()
 
   useEffect(() => {
     let pushData = []
-    specialNoteList.map((row) => {
+    popShowSpecialNoteList.map((row) => {
       let option = showProductFeatureData.split('、')
       option.map((row2) => {
         if (row.code === row2) {
@@ -16,7 +16,7 @@ export default function ProductFeaturesPop({ specialNoteList, showProductFeature
       })
     })
     setShowSpecialNoteList(pushData)
-  }, [specialNoteList])
+  }, [popShowSpecialNoteList])
 
   return (
     <div className="modal-popup">

src/components/floor-plan/CanvasFrame.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 
 import { useRecoilValue } from 'recoil'
 
@@ -15,6 +15,7 @@ import { MENU } from '@/common/common'
 import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
 import { totalDisplaySelector } from '@/store/settingAtom'
 import ImgLoad from '@/components/floor-plan/modal/ImgLoad'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
@@ -24,7 +25,9 @@ export default function CanvasFrame() {
   const { contextMenu, handleClick } = useContextMenu()
   const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans, currentCanvasPlan } = usePlan()
   const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부
-  useEvent()
+  // useEvent()
+  // const { initEvent } = useContext(EventContext)
+  // initEvent()
 
   const loadCanvas = () => {
     if (canvas) {

src/components/floor-plan/CanvasLayout.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect } from 'react'
 import { useRecoilValue } from 'recoil'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { useMessage } from '@/hooks/useMessage'
@@ -20,7 +20,7 @@ export default function CanvasLayout({ children }) {
 
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
-  const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
+  const { plans, initCanvasPlans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
 
   useEffect(() => {
     loadCanvasPlanData(session.userId, objectNo, pid)
@@ -37,14 +37,18 @@ export default function CanvasLayout({ children }) {
               onClick={() => handleCurrentPlan(session.userId, plan.id)}
             >
               <span>
-                {plan.name}
+                {!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) && 'New '}
+                {`Plan ${plan.ordering}`}
                 {modifiedPlans.some((modifiedPlan) => modifiedPlan === plan.id) && ' [ M ]'}
               </span>
               <i
                 className="close"
                 onClick={(e) =>
                   swalFire({
-                    text: `${plan.name} ` + getMessage('plan.message.confirm.delete'),
+                    text:
+                      (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') +
+                      `Plan ${plan.ordering} ` +
+                      getMessage('plan.message.confirm.delete'),
                     type: 'confirm',
                     confirmFn: () => {
                       handleDeletePlan(e, plan.id)

src/components/floor-plan/CanvasMenu.jsx

@@ -41,6 +41,7 @@ import EstimateCopyPop from '../estimate/popup/EstimateCopyPop'
 import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
 import { pwrGnrSimTypeState } from '@/store/simulatorAtom'
 import { useAxios } from '@/hooks/useAxios'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function CanvasMenu(props) {
   const { menuNumber, setMenuNumber } = props
@@ -70,7 +71,8 @@ export default function CanvasMenu(props) {
   const { getMessage } = useMessage()
   const { currentCanvasPlan, saveCanvas } = usePlan()
   const { swalFire } = useSwal()
-  const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
+  // const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
+  const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useContext(EventContext)
   const commonUtils = useRecoilValue(commonUtilsState)
   const { commonFunctions } = useCommonUtils()
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -1,6 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import Module from '@/components/floor-plan/modal/basic/step/Module'
 import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
 import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
@@ -11,6 +11,7 @@ import { usePopup } from '@/hooks/usePopup'
 import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { useEvent } from '@/hooks/useEvent'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
@@ -18,7 +19,8 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const [tabNum, setTabNum] = useState(1)
   const canvasSetting = useRecoilValue(canvasSettingState)
   const orientationRef = useRef(null)
-  const { initEvent } = useEvent()
+  // const { initEvent } = useEvent()
+  const { initEvent } = useContext(EventContext)
   const { makeModuleInstArea, manualModuleSetup, autoModuleSetup } = useModuleBasicSetting()
   const handleBtnNextStep = () => {
     if (tabNum === 1) {

src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx

@@ -3,10 +3,11 @@ import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useContext } from 'react'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
 import { useEvent } from '@/hooks/useEvent'
 import { LINE_TYPE } from '@/common/common'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function LinePropertySetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -14,7 +15,8 @@ export default function LinePropertySetting(props) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { changeSurfaceLinePropertyEvent, changeSurfaceLineProperty, changeSurfaceLinePropertyReset } = useSurfaceShapeBatch()
-  const { initEvent } = useEvent()
+  // const { initEvent } = useEvent()
+  const { initEvent } = useContext(EventContext)
 
   const properties = [
     { name: getMessage('eaves.line'), value: LINE_TYPE.WALLLINE.EAVES },

src/components/floor-plan/modal/object/SizeSetting.jsx

@@ -5,11 +5,12 @@ import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { contextPopupPositionState } from '@/store/popupAtom'
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useContext } from 'react'
 import { useObjectBatch } from '@/hooks/object/useObjectBatch'
 import { useEvent } from '@/hooks/useEvent'
 import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function SizeSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -22,11 +23,12 @@ export default function SizeSetting(props) {
   const widthRef = useRef(null)
   const heightRef = useRef(null)
 
-  const { initEvent } = useEvent()
+  // const { initEvent } = useEvent()
+  // const { initEvent } = useContext(EventContext)
 
-  useEffect(() => {
+  // useEffect(() => {
-    initEvent()
+  //   initEvent()
-  }, [])
+  // }, [])
 
   const handleReSizeObject = () => {
     const width = widthRef.current.value

src/components/floor-plan/modal/setting01/SecondOption.jsx

@@ -25,11 +25,7 @@ export default function SecondOption() {
   const [planSizeId, setPlanSizeId] = useState(uuidv4())
 
   const {
-    //horizon, setHorizon, vertical, setVertical,
+    fetchSettings,
-    // originHorizon,
-    // setOriginHorizon,
-    // originVertical,
-    // setOriginVertical,
     planSizeSettingMode,
     setPlanSizeSettingMode,
     settingModalSecondOptions,
@@ -40,12 +36,9 @@ export default function SecondOption() {
   } = useCanvasSetting()
   const { option3, option4 } = settingModalSecondOptions
 
-  // const [horizon, setHorizon] = useState(originHorizon)
-  // const [vertical, setVertical] = useState(originVertical)
-
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
-    console.log('SecondOption useEffect 실행', planSizeSettingMode)
+    console.log('SecondOption useEffect 실행')
   }, [])
 
   const handlePopup = (type) => {
@@ -119,6 +112,7 @@ export default function SecondOption() {
       case 'planSize': {
         //도면크기 설정
         if (!showPlanSizeSettingModal) {
+          fetchSettings() //화면 오픈 시 데이터 조회
           setShowPlanSizeSettingModal(true)
           addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />, true)
         } else {
@@ -135,10 +129,14 @@ export default function SecondOption() {
       return {
         ...prev,
         [fontProps.type]: {
-          fontFamily: font.fontFamily.value,
+          // fontFamily: font.fontFamily.value,
-          fontWeight: font.fontWeight.value,
+          // fontWeight: font.fontWeight.value,
-          fontSize: font.fontSize.value,
+          // fontSize: font.fontSize.value,
-          fontColor: font.fontColor.value,
+          // fontColor: font.fontColor.value,
+          fontFamily: font.fontFamily,
+          fontWeight: font.fontWeight,
+          fontSize: font.fontSize,
+          fontColor: font.fontColor,
         },
         fontFlag: true,
       }
@@ -161,10 +159,6 @@ export default function SecondOption() {
 
   const planSizeProps = {
     id: planSizeId,
-    // horizon,
-    // setHorizon,
-    // vertical,
-    // setVertical,
     horizon: planSizeSettingMode.originHorizon,
     vertical: planSizeSettingMode.originVertical,
     isShow: showPlanSizeSettingModal,

src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx

@@ -77,28 +77,9 @@ export default function DimensionLineSetting(props) {
     { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
   ]
 
-  let originPixelView
-
   useEffect(() => {
     if (originPixel) {
       setOriginPixel(pixels?.filter((data) => data.value === originPixel)[0])
-      originPixelView = originPixel
-    }
-
-    if (globalFont.dimensionLineText.fontFamily) {
-      setOriginFont(fonts.filter((data) => data.value === globalFont.dimensionLineText.fontFamily)[0])
-    }
-
-    if (globalFont.dimensionLineText.fontWeight) {
-      setOriginFontWeight(fontOptions.filter((data) => data.value === globalFont.dimensionLineText.fontWeight)[0])
-    }
-
-    if (globalFont.dimensionLineText.fontSize) {
-      setOriginFontSize(fontSizes.filter((data) => data.value === globalFont.dimensionLineText.fontSize)[0])
-    }
-
-    if (globalFont.dimensionLineText.fontColor) {
-      setOriginFontColor(fontColors.filter((data) => data.value === globalFont.dimensionLineText.fontColor)[0])
     }
 
     setIsShow(true)
@@ -106,7 +87,6 @@ export default function DimensionLineSetting(props) {
 
   useEffect(() => {
     if (originPixel.name) {
-      originPixelView = originPixel.name
       setOriginPixel(originPixel)
     }
   }, [originPixel])
@@ -142,10 +122,10 @@ export default function DimensionLineSetting(props) {
     isShow: showFontModal,
     setIsShow: setShowFontModal,
     font: {
-      fontFamily: originFont?.value,
+      fontFamily: originFont,
-      fontWeight: originFontWeight?.value,
+      fontWeight: originFontWeight,
-      fontSize: originFontSize?.value,
+      fontSize: originFontSize,
-      fontColor: originFontColor?.value,
+      fontColor: originFontColor,
     },
     onSave: handleFontSave,
     isConfig: true,
@@ -172,10 +152,10 @@ export default function DimensionLineSetting(props) {
       return {
         ...prev,
         dimensionLineText: {
-          fontFamily: originFont.value,
+          fontFamily: originFont,
-          fontWeight: originFontWeight.value,
+          fontWeight: originFontWeight,
-          fontSize: originFontSize.value,
+          fontSize: originFontSize,
-          fontColor: originFontColor.value,
+          fontColor: originFontColor,
         },
         fontFlag: true,
       }

src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx

@@ -13,28 +13,19 @@ export default function PlanSizeSetting(props) {
   const { getMessage } = useMessage()
 
   const canvas = useRecoilValue(canvasState)
-
-  // const [originHorizon, setOriginHorizon] = useCanvasSetting(horizon)
-  // const [originVertical, setOriginVertical] = useCanvasSetting(vertical)
-  // const { originHorizon, setOriginHorizon, originVertical, setOriginVertical } = useCanvasSetting()
   const { planSizeSettingMode, setPlanSizeSettingMode } = useCanvasSetting()
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('PlanSizeSetting useEffect 실행')
-    console.log('11111', planSizeSettingMode)
-    //setOriginHorizon({ originHorizon: horizon, flag: false })
-    //setOriginVertical({ originVertical: vertical, flag: false })
   }, [])
 
   const onSave = () => {
-    console.log('22222', planSizeSettingMode)
     setPlanSizeSettingMode((prev) => {
-      console.log('4', prev)
       return {
         ...prev,
-        originHorizon: planSizeSettingMode.originHorizon,
+        originHorizon: Number(planSizeSettingMode.originHorizon),
-        originVertical: planSizeSettingMode.originVertical,
+        originVertical: Number(planSizeSettingMode.originVertical),
         flag: true,
       }
     })
@@ -53,7 +44,7 @@ export default function PlanSizeSetting(props) {
     setPlanSizeSettingMode((prev) => {
       return {
         ...prev,
-        [name]: value,
+        [name]: Number(value),
         flag: false,
       }
     })

src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx

@@ -1,10 +1,12 @@
 import { useMessage } from '@/hooks/useMessage'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) {
   const { getMessage } = useMessage()
-  const { addDocumentEventListener, initEvent } = useEvent()
+  // const { addDocumentEventListener, initEvent } = useEvent()
+  const { addDocumentEventListener, initEvent } = useContext(EventContext)
 
   useEffect(() => {
     addDocumentEventListener('keydown', document, keyDown)

src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx

@@ -1,10 +1,12 @@
 import { useMessage } from '@/hooks/useMessage'
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
+import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref, arrow2Ref, radioTypeRef, currentWallLineRef }, ref) {
   const { getMessage } = useMessage()
-  const { addDocumentEventListener, initEvent } = useEvent()
+  // const { addDocumentEventListener, initEvent } = useEvent()
+  const { addDocumentEventListener, initEvent } = useContext(EventContext)
   const [type, setType] = useState(1)
   const [arrow1, setArrow1] = useState('up')
   const [arrow2, setArrow2] = useState('up')

src/components/management/StuffDetail.jsx

@@ -142,6 +142,16 @@ export default function StuffDetail() {
         headerName: getMessage('stuff.detail.planGridHeader.capacity'),
         width: 120,
         cellStyle: { justifyContent: 'flex-end' /* 우측정렬*/ },
+        cellRenderer: (params) => {
+          let origin = params.value
+          let capacity
+          if (origin) {
+            capacity = origin / 1000
+            return capacity.toFixed(3)
+          } else {
+            return null
+          }
+        },
       },
       {
         field: 'roofMaterialIdMulti',
@@ -170,8 +180,8 @@ export default function StuffDetail() {
         },
       },
       {
-        field: 'constructSpecification',
+        field: 'constructSpecificationMulti',
-        headerName: getMessage('stuff.detail.planGridHeader.constructSpecification'),
+        headerName: getMessage('stuff.detail.planGridHeader.constructSpecificationMulti'),
         wrapText: true,
         autoHeight: true,
         cellStyle: { justifyContent: 'flex-start' /* 좌측정렬*/ },

src/hooks/common/useCommonUtils.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
@@ -9,11 +9,13 @@ import { canvasState } from '@/store/canvasAtom'
 import { v4 as uuidv4 } from 'uuid'
 import { usePopup } from '@/hooks/usePopup'
 import Distance from '@/components/floor-plan/modal/distance/Distance'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export function useCommonUtils() {
   const canvas = useRecoilValue(canvasState)
   const wordDisplay = useRecoilValue(wordDisplaySelector)
-  const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useContext(EventContext)
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
   const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
@@ -21,7 +23,7 @@ export function useCommonUtils() {
   const { addPopup } = usePopup()
 
   useEffect(() => {
-    initEvent()
+    // initEvent()
     if (commonUtils.text) {
       commonTextMode()
     } else if (commonUtils.dimension) {

src/hooks/common/useFont.js

@@ -12,7 +12,7 @@ export function useFont() {
   const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
 
   useEffect(() => {
-    if (canvas && commonText.fontWeight?.value) {
+    if (canvas && commonText.fontWeight.value) {
       const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
       textObjs.forEach((obj) => {
         obj.set({
@@ -28,7 +28,7 @@ export function useFont() {
   }, [commonText])
 
   useEffect(() => {
-    if (canvas && dimensionLineText.fontWeight?.value) {
+    if (canvas && dimensionLineText.fontWeight.value) {
       const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
       textObjs.forEach((obj) => {
         obj.set({
@@ -44,7 +44,7 @@ export function useFont() {
   }, [dimensionLineText])
 
   useEffect(() => {
-    if (canvas && flowText.fontWeight?.value) {
+    if (canvas && flowText.fontWeight.value) {
       const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
       textObjs.forEach((obj) => {
         obj.set({
@@ -60,7 +60,7 @@ export function useFont() {
   }, [flowText])
 
   useEffect(() => {
-    if (canvas && lengthText.fontWeight?.value) {
+    if (canvas && lengthText.fontWeight.value) {
       const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
       textObjs.forEach((obj) => {
         obj.set({

src/hooks/floorPlan/estimate/useEstimateController.js

@@ -80,7 +80,7 @@ export const useEstimateController = (planNo) => {
           itemId: '', //제품번호
           itemNo: '',
           itemName: '', //형명
-          amount: '0', //수량
+          amount: '', //수량
           unitPrice: '0',
           unit: '', //단위
           salePrice: '', //단가
@@ -141,7 +141,6 @@ export const useEstimateController = (planNo) => {
       return alert(getMessage('estimate.detail.save.requiredEstimateDate'))
     }
 
-    // console.log('첨부파일:::::', estimateData.fileList)
     //첨부파일을 첨부안했는데
     //아이템 fileUploadFlg가1(첨부파일 필수)이 1개라도 있는데 후일 자료 제출(fileFlg) 체크안했으면(0) alert 저장안돼
     let fileFlg = true
@@ -159,8 +158,34 @@ export const useEstimateController = (planNo) => {
         })
       }
     }
+    let itemFlg = true
+    estimateData.itemList.map((item) => {
+      item.amount = item.amount?.replaceAll(',', '')
+      item.salePrice = parseFloat(item.salePrice?.replaceAll(',', '')).toFixed(2)
+      item.saleTotPrice = parseFloat(item.saleTotPrice?.replaceAll(',', '')).toFixed(2)
 
-    if (flag && fileFlg) {
+      if (!item.paDispOrder) {
+        if (itemFlg) {
+          if (isNaN(item.amount)) {
+            item.amount = 0
+          } else {
+            Number(item.amount)
+          }
+
+          if (item.amount < 1) {
+            itemFlg = false
+            return alert(getMessage('estimate.detail.save.requiredAmount'))
+          }
+
+          if (Number(item.salePrice) < 1) {
+            itemFlg = false
+            return alert(getMessage('estimate.detail.save.requiredSalePrice'))
+          }
+        }
+      }
+    })
+
+    if (flag && fileFlg && itemFlg) {
       //1. 첨부파일 저장시작
       const formData = new FormData()
       formData.append('file', estimateData.fileList)
@@ -173,7 +198,7 @@ export const useEstimateController = (planNo) => {
       //첨부파일저장끝
 
       //제품라인 추가했는데 아이템 안고르고 저장하면itemId=''은 날리고 나머지 저장하기
-      estimateData.itemList = estimateData.itemList.filter((item) => item.itemId !== '')
+      estimateData.itemList = estimateData.itemList.filter((item) => item.itemId !== '' && item.delFlg === '0')
 
       let delCnt = 0
       estimateData.itemList.map((item) => {
@@ -186,12 +211,6 @@ export const useEstimateController = (planNo) => {
       }
 
       console.log('최종 아이템 정보::;', estimateData.itemList)
-      estimateData.itemList.map((item) => {
-        item.amount = item.amount?.replaceAll(',', '')
-        item.salePrice = parseFloat(item.salePrice?.replaceAll(',', '')).toFixed(2)
-        item.saleTotPrice = parseFloat(item.saleTotPrice?.replaceAll(',', '')).toFixed(2)
-      })
-
       console.log('최종 정보::;', estimateData)
       //2. 상세데이터 저장
       // return

src/hooks/module/useModuleBasicSetting.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { rectToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
@@ -11,14 +11,15 @@ import { useEvent } from '@/hooks/useEvent'
 import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
 
 import * as turf from '@turf/turf'
-import next from 'next'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export function useModuleBasicSetting() {
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
   const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
-  const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
+  // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   let selectedModuleInstSurfaceArray = []
 
   const makeModuleInstArea = () => {

src/hooks/object/useObjectBatch.js

@@ -1,5 +1,5 @@
 'use client'
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
@@ -12,11 +12,13 @@ import { usePolygon } from '@/hooks/usePolygon'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { v4 as uuidv4 } from 'uuid'
 import { fontSelector } from '@/store/fontAtom'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export function useObjectBatch({ isHidden, setIsHidden }) {
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
-  const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
+  // const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
+  const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useContext(EventContext)
   const { swalFire } = useSwal()
   const { drawDirectionArrow } = usePolygon()
   const lengthTextFont = useRecoilValue(fontSelector('lengthText'))

src/hooks/option/useCanvasSetting.js

@@ -32,7 +32,7 @@ export function useCanvasSetting() {
 
   const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
   const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
-  const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(adsorptionRangeState)
+  const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(planSizeSettingState)
   //const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
 
   const [selectedFont, setSelectedFont] = useState()
@@ -40,13 +40,8 @@ export function useCanvasSetting() {
   const [selectedFontSize, setSelectedFontSize] = useState()
   const [selectedFontColor, setSelectedFontColor] = useState()
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
-  //const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-
   const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
 
-  //const [originHorizon, setOriginHorizon] = useState({ originHorizon: 1600, flag: false })
-  //const [originVertical, setOriginVertical] = useState({ originVertical: 1600, flag: false })
-
   useEffect(() => {
     if (!canvas) {
       return
@@ -97,9 +92,9 @@ export function useCanvasSetting() {
     console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
     if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
       onClickOption2()
+      frontSettings()
       fetchSettings()
     }
-    frontSettings()
   }, [settingModalFirstOptions, settingModalSecondOptions])
 
   // 글꼴 변경 시
@@ -114,20 +109,81 @@ export function useCanvasSetting() {
 
   // 도명크기 변경 시
   useEffect(() => {
-    console.log(
+    console.log('useCanvasSetting useEffect 실행5', planSizeSettingMode.flag, correntObjectNo)
-      'useCanvasSetting useEffect 실행5',
-      correntObjectNo,
-      planSizeSettingMode.flag,
-      planSizeSettingMode.originHorizon,
-      planSizeSettingMode.originVertical,
-    )
 
     if (planSizeSettingMode.flag) {
       onClickOption2()
       frontSettings()
       fetchSettings()
     }
-  }, [planSizeSettingMode.flag])
+  }, [planSizeSettingMode])
+
+  const getFonts = (itemValue) => {
+    const data = [
+      { id: 1, name: 'MS PGothic', value: 'MS PGothic' },
+      { id: 2, name: '@Yu Gothic', value: '@Yu Gothic' },
+      { id: 3, name: 'Yu Gothic', value: 'Yu Gothic' },
+      { id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
+      { id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
+    ].filter((font) => font.value === itemValue)[0]
+    if (data.length !== 0) {
+      return data
+    } else {
+      return { id: 1, name: 'MS PGothic', value: 'MS PGothic' }
+    }
+  }
+
+  const getFontSizes = (itemValue) => {
+    const data = [
+      ...Array.from({ length: 4 }).map((_, index) => {
+        return { id: index + 8, name: index + 8, value: index + 8 }
+      }),
+      ...Array.from({ length: 9 }).map((_, index) => {
+        return { id: (index + 6) * 2, name: (index + 6) * 2, value: (index + 6) * 2 }
+      }),
+      { id: 36, name: 36, value: 36 },
+      { id: 48, name: 48, value: 48 },
+      { id: 72, name: 72, value: 72 },
+    ].filter((fontSize) => fontSize.value === itemValue)[0]
+    if (data.length !== 0) {
+      return data
+    } else {
+      return { id: 16, name: 16, value: 16 }
+    }
+  }
+
+  const getFontStyles = (itemValue) => {
+    const data = [
+      { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' },
+      { id: 'italic', name: getMessage('font.style.italic'), value: 'italic' },
+      { id: 'bold', name: getMessage('font.style.bold'), value: 'bold' },
+      { id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
+    ].filter((fontStyle) => fontStyle.value === itemValue)[0]
+    if (data.length !== 0) {
+      return data
+    } else {
+      return { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' }
+    }
+  }
+
+  const getFontColors = (itemValue) => {
+    const data = [
+      { id: 'black', name: getMessage('color.black'), value: 'black' },
+      { id: 'red', name: getMessage('color.red'), value: 'red' },
+      { id: 'blue', name: getMessage('color.blue'), value: 'blue' },
+      { id: 'gray', name: getMessage('color.gray'), value: 'gray' },
+      { id: 'yellow', name: getMessage('color.yellow'), value: 'yellow' },
+      { id: 'green', name: getMessage('color.green'), value: 'green' },
+      { id: 'pink', name: getMessage('color.pink'), value: 'pink' },
+      { id: 'gold', name: getMessage('color.gold'), value: 'gold' },
+      { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
+    ].filter((fontColor) => fontColor.value === itemValue)[0]
+    if (data.length !== 0) {
+      return data
+    } else {
+      return { id: 'black', name: getMessage('color.black'), value: 'black' }
+    }
+  }
 
   const fetchSettings = async () => {
     try {
@@ -141,8 +197,6 @@ export function useCanvasSetting() {
         const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
         const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))
 
-        //setObjectNo(floorPlanState.objectNo)
-
         //흡착점 ON/OFF
         setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint, fontFlag: false })
 
@@ -156,16 +210,6 @@ export function useCanvasSetting() {
           originVertical: res.originVertical,
           flag: false,
         })
-        // setOriginHorizon({
-        //   ...originHorizon,
-        //   originHorizon: res.originHorizon,
-        //   flag: false,
-        // })
-        // setOriginVertical({
-        //   ...originVertical,
-        //   originVertical: res.originVertical,
-        //   flag: false,
-        // })
 
         // 데이터 설정
         setSettingModalFirstOptions({
@@ -185,43 +229,43 @@ export function useCanvasSetting() {
         const fontPatternData = {
           commonText: {
             //문자 글꼴 조회 데이터
-            fontFamily: res.wordFont,
+            fontFamily: getFonts(res.wordFont),
-            fontWeight: res.wordFontStyle,
+            fontWeight: getFontStyles(res.wordFontStyle),
-            fontSize: res.wordFontSize,
+            fontSize: getFontSizes(res.wordFontSize),
-            fontColor: res.wordFontColor,
+            fontColor: getFontColors(res.wordFontColor),
           },
           flowText: {
             //흐름방향 글꼴 조회 데이터
-            fontFamily: res.flowFont,
+            fontFamily: getFonts(res.flowFont),
-            fontWeight: res.flowFontStyle,
+            fontWeight: getFontStyles(res.flowFontStyle),
-            fontSize: res.flowFontSize,
+            fontSize: getFontSizes(res.flowFontSize),
-            fontColor: res.flowFontColor,
+            fontColor: getFontColors(res.flowFontColor),
           },
           dimensionLineText: {
             //치수 글꼴 조회 데이터
-            fontFamily: res.dimensioFont,
+            fontFamily: getFonts(res.dimensioFont),
-            fontWeight: res.dimensioFontStyle,
+            fontWeight: getFontStyles(res.dimensioFontStyle),
-            fontSize: res.dimensioFontSize,
+            fontSize: getFontSizes(res.dimensioFontSize),
-            fontColor: res.dimensioFontColor,
+            fontColor: getFontColors(res.dimensioFontColor),
           },
           circuitNumberText: {
             //회로번호 글꼴 조회 데이터
-            fontFamily: res.circuitNumFont,
+            fontFamily: getFonts(res.circuitNumFont),
-            fontWeight: res.circuitNumFontStyle,
+            fontWeight: getFontStyles(res.circuitNumFontStyle),
-            fontSize: res.circuitNumFontSize,
+            fontSize: getFontSizes(res.circuitNumFontSize),
-            fontColor: res.circuitNumFontColor,
+            fontColor: getFontColors(res.circuitNumFontColor),
           },
           lengthText: {
             //치수선 글꼴 조회 데이터
-            fontFamily: res.lengthFont,
+            fontFamily: getFonts(res.lengthFont),
-            fontWeight: res.lengthFontStyle,
+            fontWeight: getFontStyles(res.lengthFontStyle),
-            fontSize: res.lengthFontSize,
+            fontSize: getFontSizes(res.lengthFontSize),
-            fontColor: res.lengthFontColor,
+            fontColor: getFontColors(res.lengthFontColor),
           },
           //글꼴 설정 Flag
           fontFlag: false,
         }
-        //console.log('fontPatternData', fontPatternData)
+        console.log('fontPatternData', fontPatternData)
 
         //조회된 글꼴 데이터 set
         setGlobalFont(fontPatternData)
@@ -239,14 +283,6 @@ export function useCanvasSetting() {
           ...planSizeSettingMode,
           flag: false,
         })
-        // setOriginHorizon({
-        //   ...originHorizon,
-        //   flag: false,
-        // })
-        // setOriginVertical({
-        //   ...originVertical,
-        //   flag: false,
-        // })
 
         // 데이터 설정
         setSettingModalFirstOptions({
@@ -258,52 +294,7 @@ export function useCanvasSetting() {
           fontFlag: false,
         })
 
-        //console.log('globalFont2', globalFont)
+        setGlobalFont({ ...globalFont, fontFlag: false })
-        const fontPatternData = {
-          commonText: {
-            //문자 글꼴
-            fontFamily: globalFont.commonText.fontFamily.value,
-            fontWeight: globalFont.commonText.fontWeight.value,
-            fontSize: globalFont.commonText.fontSize.value,
-            fontColor: globalFont.commonText.fontColor.value,
-          },
-          flowText: {
-            //흐름방향 글꼴
-            fontFamily: globalFont.flowText.fontFamily.value,
-            fontWeight: globalFont.flowText.fontWeight.value,
-            fontSize: globalFont.flowText.fontSize.value,
-            fontColor: globalFont.flowText.fontColor.value,
-          },
-          dimensionLineText: {
-            //치수 글꼴
-            fontFamily: globalFont.dimensionLineText.fontFamily.value,
-            fontWeight: globalFont.dimensionLineText.fontWeight.value,
-            fontSize: globalFont.dimensionLineText.fontSize.value,
-            fontColor: globalFont.dimensionLineText.fontColor.value,
-          },
-          circuitNumberText: {
-            //회로번호 글꼴
-            fontFamily: globalFont.circuitNumberText.fontFamily.value,
-            fontWeight: globalFont.circuitNumberText.fontWeight.value,
-            fontSize: globalFont.circuitNumberText.fontSize.value,
-            fontColor: globalFont.circuitNumberText.fontColor.value,
-          },
-          lengthText: {
-            //치수선 글꼴
-            fontFamily: globalFont.lengthText.fontFamily.value,
-            fontWeight: globalFont.lengthText.fontWeight.value,
-            fontSize: globalFont.lengthText.fontSize.value,
-            fontColor: globalFont.lengthText.fontColor.value,
-          },
-          //글꼴 설정 Flag
-          fontFlag: false,
-        }
-
-        //console.log('fontPatternData', fontPatternData)
-
-        setGlobalFont(fontPatternData)
-
-        //setGlobalFont({ ...globalFont, fontFlag: false })
       }
       frontSettings()
     } catch (error) {
@@ -332,7 +323,7 @@ export function useCanvasSetting() {
         selected: item.selected,
       })),
     }
-
+    // console.log('globalFont', globalFont)
     const patternData = {
       //견적서 번호
       objectNo: correntObjectNo,
@@ -366,34 +357,34 @@ export function useCanvasSetting() {
 
       //글꼴 설정
       //문자 글꼴
-      wordFont: globalFont.commonText.fontFamily,
+      wordFont: globalFont.commonText.fontFamily?.value ?? 'MS PGothic',
-      wordFontStyle: globalFont.commonText.fontWeight,
+      wordFontStyle: globalFont.commonText.fontWeight?.value ?? 'normal',
-      wordFontSize: globalFont.commonText.fontSize,
+      wordFontSize: globalFont.commonText.fontSize?.value ?? 16,
-      wordFontColor: globalFont.commonText.fontColor,
+      wordFontColor: globalFont.commonText.fontColor?.value ?? 'black',
 
       //흐름방향 글꼴
-      flowFont: globalFont.flowText.fontFamily,
+      flowFont: globalFont.flowText.fontFamily?.value ?? 'MS PGothic',
-      flowFontStyle: globalFont.flowText.fontWeight,
+      flowFontStyle: globalFont.flowText.fontWeight?.value ?? 'normal',
-      flowFontSize: globalFont.flowText.fontSize,
+      flowFontSize: globalFont.flowText.fontSize?.value ?? 16,
-      flowFontColor: globalFont.flowText.fontColor,
+      flowFontColor: globalFont.flowText.fontColor?.value ?? 'black',
 
       //치수 글꼴
-      dimensioFont: globalFont.dimensionLineText.fontFamily,
+      dimensioFont: globalFont.dimensionLineText.fontFamily?.value ?? 'MS PGothic',
-      dimensioFontStyle: globalFont.dimensionLineText.fontWeight,
+      dimensioFontStyle: globalFont.dimensionLineText.fontWeight?.value ?? 'normal',
-      dimensioFontSize: globalFont.dimensionLineText.fontSize,
+      dimensioFontSize: globalFont.dimensionLineText.fontSize?.value ?? 16,
-      dimensioFontColor: globalFont.dimensionLineText.fontColor,
+      dimensioFontColor: globalFont.dimensionLineText.fontColor?.value ?? 'black',
 
       //회로번호 글꼴
-      circuitNumFont: globalFont.circuitNumberText.fontFamily,
+      circuitNumFont: globalFont.circuitNumberText.fontFamily?.value ?? 'MS PGothic',
-      circuitNumFontStyle: globalFont.circuitNumberText.fontWeight,
+      circuitNumFontStyle: globalFont.circuitNumberText.fontWeight?.value ?? 'normal',
-      circuitNumFontSize: globalFont.circuitNumberText.fontSize,
+      circuitNumFontSize: globalFont.circuitNumberText.fontSize?.value ?? 16,
-      circuitNumFontColor: globalFont.circuitNumberText.fontColor,
+      circuitNumFontColor: globalFont.circuitNumberText.fontColor?.value ?? 'black',
 
       //치수선 글꼴
-      lengthFont: globalFont.lengthText.fontFamily,
+      lengthFont: globalFont.lengthText.fontFamily?.value ?? 'MS PGothic',
-      lengthFontStyle: globalFont.lengthText.fontWeight,
+      lengthFontStyle: globalFont.lengthText.fontWeight?.value ?? 'normal',
-      lengthFontSize: globalFont.lengthText.fontSize,
+      lengthFontSize: globalFont.lengthText.fontSize?.value ?? 16,
-      lengthFontColor: globalFont.lengthText.fontColor,
+      lengthFontColor: globalFont.lengthText.fontColor?.value ?? 'black',
 
       //치수선 설정
       originPixel: dimensionLineSettings.pixel,
@@ -402,8 +393,6 @@ export function useCanvasSetting() {
       //치수선 설정
       originHorizon: planSizeSettingMode.originHorizon,
       originVertical: planSizeSettingMode.originVertical,
-      // originHorizon: originHorizon.originHorizon,
-      // originVertical: originVertical.originVertical,
     }
 
     console.log('patternData ', patternData)

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { adsorptionRangeState, canvasState, verticalHorizontalModeState } from '@/store/canvasAtom'
 import { useEvent } from '@/hooks/useEvent'
@@ -22,11 +22,13 @@ import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
 import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils'
 import { POLYGON_TYPE } from '@/common/common'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 // 보조선 작성
 export function useAuxiliaryDrawing(id) {
   const canvas = useRecoilValue(canvasState)
-  const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useContext(EventContext)
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
   const { tempGridMode } = useTempGrid()

src/hooks/roofcover/useEavesGableEdit.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
@@ -10,12 +10,14 @@ import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
 import { getChonByDegree } from '@/util/canvas-util'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 // 처마.케라바 변경
 export function useEavesGableEdit(id) {
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
-  const { addCanvasMouseEventListener, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const { closePopup } = usePopup()
   const TYPES = {
     EAVES: 'eaves',

src/hooks/roofcover/useMovementSetting.js

@@ -2,11 +2,12 @@ import { useRecoilValue } from 'recoil'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
 import { POLYGON_TYPE } from '@/common/common'
 import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import { QLine } from '@/components/fabric/QLine'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@@ -15,7 +16,8 @@ export function useMovementSetting(id) {
     UP_DOWN: 'updown', //형 올림내림
   }
   const canvas = useRecoilValue(canvasState)
-  const { initEvent, addCanvasMouseEventListener } = useEvent()
+  // const { initEvent, addCanvasMouseEventListener } = useEvent()
+  const { initEvent, addCanvasMouseEventListener } = useContext(EventContext)
   const { closePopup } = usePopup()
   const { getMessage } = useMessage()
   const currentObject = useRecoilValue(currentObjectState)

src/hooks/roofcover/useOuterLineWall.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 import { distanceBetweenPoints } from '@/util/canvas-util'
 import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import {
@@ -31,6 +31,7 @@ import { fabric } from 'fabric'
 import { outlineDisplaySelector } from '@/store/settingAtom'
 import { usePopup } from '@/hooks/usePopup'
 import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 //외벽선 그리기
 export function useOuterLineWall(id, propertiesId) {
@@ -43,6 +44,14 @@ export function useOuterLineWall(id, propertiesId) {
     removeAllDocumentEventListeners,
     removeMouseEvent,
   } = useEvent()
+  // const {
+  //   initEvent,
+  //   // addCanvasMouseEventListener,
+  //   // addDocumentEventListener,
+  //   removeAllMouseEventListeners,
+  //   removeAllDocumentEventListeners,
+  //   removeMouseEvent,
+  // } = useContext(EventContext)
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
   const { tempGridMode } = useTempGrid()

src/hooks/roofcover/useRoofShapePassivitySetting.js

@@ -1,6 +1,6 @@
 import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useLine } from '@/hooks/useLine'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
@@ -11,6 +11,7 @@ import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
 import { getChonByDegree } from '@/util/canvas-util'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 //지붕형상 수동 설정
 export function useRoofShapePassivitySetting(id) {
@@ -25,7 +26,8 @@ export function useRoofShapePassivitySetting(id) {
   const { getMessage } = useMessage()
   const { showLine, hideLine, addPitchTextsByOuterLines } = useLine()
   const { swalFire } = useSwal()
-  const { addCanvasMouseEventListener, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const { drawRoofPolygon } = useMode()
   const { addPolygonByLines } = usePolygon()
   const currentObject = useRecoilValue(currentObjectState)

src/hooks/roofcover/useWallLineOffsetSetting.js

@@ -1,11 +1,12 @@
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
 import { useLine } from '@/hooks/useLine'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 // 외벽선 편집 및 오프셋
 export function useWallLineOffsetSetting(id) {
@@ -14,7 +15,8 @@ export function useWallLineOffsetSetting(id) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { swalFire } = useSwal()
-  const { addCanvasMouseEventListener, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const wallLineEditRef = useRef(null)
   const length1Ref = useRef(null)
   const length2Ref = useRef(null)

src/hooks/surface/usePlacementShapeDrawing.js

@@ -12,7 +12,7 @@ import { useEvent } from '@/hooks/useEvent'
 import { useMouse } from '@/hooks/useMouse'
 import { useLine } from '@/hooks/useLine'
 import { useTempGrid } from '@/hooks/useTempGrid'
-import { useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 import { distanceBetweenPoints, setSurfaceShapePattern } from '@/util/canvas-util'
 import { fabric } from 'fabric'
 import { calculateAngle } from '@/util/qpolygon-utils'
@@ -33,12 +33,15 @@ import { POLYGON_TYPE } from '@/common/common'
 import { usePopup } from '@/hooks/usePopup'
 
 import { roofDisplaySelector } from '@/store/settingAtom'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 // 면형상 배치
 export function usePlacementShapeDrawing(id) {
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
+  // const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
+  //   useEvent()
   const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
-    useEvent()
+    useContext(EventContext)
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
   const { addPolygonByLines, drawDirectionArrow } = usePolygon()

src/hooks/surface/useSurfaceShapeBatch.js

@@ -15,6 +15,8 @@ import { usePolygon } from '@/hooks/usePolygon'
 import { fontSelector } from '@/store/fontAtom'
 import { slopeSelector } from '@/store/commonAtom'
 import { QLine } from '@/components/fabric/QLine'
+import { EventContext } from '@/app/floor-plan/EventProvider'
+import { useContext } from 'react'
 
 export function useSurfaceShapeBatch() {
   const { getMessage } = useMessage()
@@ -26,7 +28,8 @@ export function useSurfaceShapeBatch() {
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const slope = useRecoilValue(slopeSelector(globalPitch))
   const { swalFire } = useSwal()
-  const { addCanvasMouseEventListener, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const { closePopup } = usePopup()
 
   const applySurfaceShape = (surfaceRefs, selectedType, id) => {

src/hooks/useEvent.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'

src/hooks/useMode.js

@@ -1265,7 +1265,6 @@ export function useMode() {
 
     const wall = makePolygon(null, sort)
     wall.name = 'wall'
-    // wall.set({ name: 'wall' })
 
     return wall
   }
@@ -1363,7 +1362,8 @@ export function useMode() {
     const polygon = new QPolygon(
       points,
       {
-        stroke: 'black',
+        stroke: '#1083E3',
+        strokeWidth: 2,
         fill: 'transparent',
         viewLengthText: true,
         fontSize: fontSize,
@@ -1515,7 +1515,24 @@ export function useMode() {
         pitch: 4,
         sleeve: true,
       }*/
-      if (index % 2 === 0) {
+      /*if (index % 2 === 0) {
+        line.attributes = {
+          type: LINE_TYPE.WALLLINE.GABLE,
+          offset: 30,
+          width: 50,
+          pitch: 4,
+          sleeve: true,
+        }
+      } else {
+        line.attributes = {
+          type: LINE_TYPE.WALLLINE.EAVES,
+          offset: 50,
+          width: 50,
+          pitch: 4,
+          sleeve: true,
+        }
+      }*/
+      if (index === polygon.lines.length - 1) {
         line.attributes = {
           type: LINE_TYPE.WALLLINE.GABLE,
           offset: 30,
@@ -1748,6 +1765,10 @@ export function useMode() {
       roofId: roof.id,
     }
 
+    canvas
+      .getObjects()
+      .filter((line) => line.attributes?.wallId === wall.id)
+      .forEach((line) => canvas.remove(line))
     wall.lines.forEach((line, index) => {
       const lineLength = Math.sqrt(
         Math.pow(Math.round(Math.abs(line.x1 - line.x2) * 10), 2) + Math.pow(Math.round(Math.abs(line.y1 - line.y2) * 10), 2),
@@ -1756,11 +1777,45 @@ export function useMode() {
       line.attributes.currentRoof = roof.lines[index].id
       line.attributes.planeSize = lineLength
       line.attributes.actualSize = lineLength
+
+      let wallStroke, wallStrokeWidth
+      switch (line.attributes.type) {
+        case LINE_TYPE.WALLLINE.EAVES:
+          wallStroke = '#45CD7D'
+          wallStrokeWidth = 4
+          break
+        case LINE_TYPE.WALLLINE.HIPANDGABLE:
+          wallStroke = '#45CD7D'
+          wallStrokeWidth = 4
+          break
+        case LINE_TYPE.WALLLINE.GABLE:
+          wallStroke = '#3FBAE6'
+          wallStrokeWidth = 4
+          break
+        case LINE_TYPE.WALLLINE.JERKINHEAD:
+          wallStroke = '#3FBAE6'
+          wallStrokeWidth = 4
+          break
+        case LINE_TYPE.WALLLINE.SHED:
+          wallStroke = '#000000'
+          wallStrokeWidth = 4
+          break
+        case LINE_TYPE.WALLLINE.WALL:
+          wallStroke = '#000000'
+          wallStrokeWidth = 4
+          break
+      }
+      const wallLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], {
+        attributes: { wallId: wall.id },
+        stroke: wallStroke,
+        strokeWidth: wallStrokeWidth,
+        selectable: false,
+      })
+      canvas.add(wallLine)
     })
 
     setRoof(roof)
     setWall(wall)
-
     return roof
   }
 

src/hooks/usePlan.js

@@ -23,9 +23,6 @@ export function usePlan() {
   const { getMessage } = useMessage()
   const { get, promisePost, promisePut, promiseDel } = useAxios()
 
-  const planLabel = 'Plan '
-  const newPlanLabel = 'New Plan '
-
   /**
    * 마우스 포인터의 가이드라인을 제거합니다.
    */
@@ -145,7 +142,9 @@ export function usePlan() {
    */
   const checkUnsavedCanvasPlan = async (userId) => {
     swalFire({
-      text: `저장 안된 ${currentCanvasPlan.name} PLAN을 저장하시겠습니까? `,
+      text:
+        (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') +
+        `Plan ${plan.ordering}의 변경 사항을 저장하시겠습니까?`,
       type: 'confirm',
       confirmFn: async () => {
         initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
@@ -185,20 +184,20 @@ export function usePlan() {
    */
   const getCanvasByObjectNo = async (userId, objectNo) => {
     return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
-      res.map((item) => ({
+      res.map((item, index) => ({
         id: item.id,
-        name: planLabel + item.id,
         userId: item.userId,
         canvasStatus: dbToCanvasFormat(item.canvasStatus),
         isCurrent: false,
         bgImageName: item.bgImageName,
         mapPositionAddress: item.mapPositionAddress,
+        ordering: index + 1,
       })),
     )
   }
 
   /**
-   * canvas 데이터를 추가
+   * 신규 canvas 데이터를 저장
    */
   const postCanvasStatus = async (userId, canvasStatus) => {
     const planData = {
@@ -216,7 +215,6 @@ export function usePlan() {
               ? {
                   ...plan,
                   id: res.data,
-                  name: planLabel + res.data,
                   canvasStatus: canvasStatus,
                 }
               : plan,
@@ -306,7 +304,10 @@ export function usePlan() {
   const handleAddPlan = (userId, objectNo) => {
     JSON.parse(currentCanvasData()).objects.length > 0
       ? swalFire({
-          text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.copy'),
+          text:
+            (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === currentCanvasPlan.id) ? 'New ' : '') +
+            `Plan ${currentCanvasPlan.ordering} ` +
+            getMessage('plan.message.confirm.copy'),
           type: 'confirm',
           confirmFn: () => {
             addPlan(userId, objectNo, currentCanvasData())
@@ -321,10 +322,10 @@ export function usePlan() {
     const id = uuidv4()
     const newPlan = {
       id: id,
-      name: newPlanLabel + `${planNum + 1}`,
       objectNo: objectNo,
       userId: userId,
       canvasStatus: canvasStatus,
+      ordering: planNum + 1,
     }
     setPlans([...plans, newPlan])
     handleCurrentPlan(userId, id)
@@ -373,9 +374,10 @@ export function usePlan() {
       if (res.length > 0) {
         setInitCanvasPlans(res)
         setPlans(res)
-        updateCurrentPlan(Number(pid)) // last 데이터에 포커싱
+        updateCurrentPlan(Number(pid))
+        setPlanNum(res.length)
       } else {
-        addPlan(userId, objectNo)
+        addPlan(userId, objectNo, '')
       }
     })
   }
@@ -383,6 +385,7 @@ export function usePlan() {
   return {
     canvas,
     plans,
+    initCanvasPlans,
     selectedPlan,
     currentCanvasPlan,
     modifiedPlans,

src/locales/ja.json

@@ -731,7 +731,7 @@
   "stuff.detail.planGridHeader.moduleModel": "モジュール",
   "stuff.detail.planGridHeader.capacity": "システム容量",
   "stuff.detail.planGridHeader.roofMaterialIdMulti": "屋根材",
-  "stuff.detail.planGridHeader.constructSpecification": "施工方法",
+  "stuff.detail.planGridHeader.constructSpecificationMulti": "施工方法",
   "stuff.detail.planGridHeader.supportMethodIdMulti": "架台",
   "stuff.detail.planGridHeader.pcTypeNo": "パワーコンディショナー",
   "stuff.detail.planGridHeader.management": "管理",
@@ -897,6 +897,8 @@
   "estimate.detail.save.requiredCharger": "担当者は必須です.",
   "estimate.detail.save.requiredObjectName": "案件名は必須です.",
   "estimate.detail.save.requiredEstimateDate": "見積日は必須です.",
+  "estimate.detail.save.requiredAmount": "数量は0より大きい値を入力してください.",
+  "estimate.detail.save.requiredSalePrice": "単価は0より大きい値を入力してください.",
   "estimate.detail.reset.confirmMsg": "保存した見積書情報が初期化され、図面情報が反映されます。本当に初期化しますか?",
   "simulator.title.sub1": "物件番号",
   "simulator.title.sub2": "作成日",

src/locales/ko.json

@@ -741,7 +741,7 @@
   "stuff.detail.planGridHeader.moduleModel": "모듈",
   "stuff.detail.planGridHeader.capacity": "시스템용량",
   "stuff.detail.planGridHeader.roofMaterialIdMulti": "지붕재",
-  "stuff.detail.planGridHeader.constructSpecification": "시공방법",
+  "stuff.detail.planGridHeader.constructSpecificationMulti": "시공방법",
   "stuff.detail.planGridHeader.supportMethodIdMulti": "가대",
   "stuff.detail.planGridHeader.pcTypeNo": "파워컨디셔너",
   "stuff.detail.planGridHeader.management": "관리",
@@ -907,6 +907,8 @@
   "estimate.detail.save.requiredCharger": "담당자는 필수값 입니다.",
   "estimate.detail.save.requiredObjectName": "안건명은 필수값 입니다.",
   "estimate.detail.save.requiredEstimateDate": "견적일은 필수값 입니다.",
+  "estimate.detail.save.requiredAmount": "수량은 0보다 큰값을 입력해주세요.",
+  "estimate.detail.save.requiredSalePrice": "단가는 0보다 큰값을 입력해주세요.",
   "estimate.detail.reset.confirmMsg": "저장된 견적서 정보가 초기화되고, 도면정보가 반영됩니다. 정말로 초기화 하시겠습니까?",
   "simulator.title.sub1": "물건번호",
   "simulator.title.sub2": "작성일",

src/util/qpolygon-utils.js

@@ -1786,7 +1786,7 @@ const drawRidge = (roof, canvas) => {
       const checkLine = new QLine([startXPoint, startYPoint, checkEndXPoint, checkEndYPoint], {
         fontSize: roof.fontSize,
         stroke: 'red',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: LINE_TYPE.SUBLINE.HIP,
         attributes: { roofId: roof.id, currentRoof: currentRoof.id, actualSize: 0 },
       })
@@ -1838,8 +1838,8 @@ const drawRidge = (roof, canvas) => {
 
       const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], {
         fontSize: roof.fontSize,
-        stroke: 'blue',
+        stroke: '#1083E3',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: LINE_TYPE.SUBLINE.RIDGE,
         attributes: { roofId: roof.id },
       })
@@ -1877,8 +1877,8 @@ const drawRidge = (roof, canvas) => {
           let y2 = Math.max(ridge.y1, ridge2.y1, ridge.y2, ridge2.y2)
           const newRidge = new QLine([x1, y1, x2, y2], {
             fontSize: roof.fontSize,
-            stroke: 'blue',
+            stroke: '#1083E3',
-            strokeWidth: 1,
+            strokeWidth: 2,
             name: LINE_TYPE.SUBLINE.RIDGE,
             attributes: { roofId: roof.id },
           })
@@ -1964,12 +1964,11 @@ const drawHips = (roof, canvas) => {
       const vectorX1 = ridgeCoordinate.x1 - currentRoof.x1
       const vectorY1 = ridgeCoordinate.y1 - currentRoof.y1
       const angle1 = Math.atan2(vectorY1, vectorX1) * (180 / Math.PI)
-      console.log('angle1', Math.abs(Math.round(angle1)) % 45)
       if (Math.abs(Math.round(angle1)) % 45 === 0) {
         const hip1 = new QLine([currentRoof.x1, currentRoof.y1, ridgeCoordinate.x1, ridgeCoordinate.y1], {
           fontSize: roof.fontSize,
-          stroke: 'red',
+          stroke: '#1083E3',
-          strokeWidth: 1,
+          strokeWidth: 2,
           name: LINE_TYPE.SUBLINE.HIP,
           attributes: { roofId: roof.id, currentRoof: currentRoof.id, actualSize: 0 },
         })
@@ -1991,8 +1990,8 @@ const drawHips = (roof, canvas) => {
       if (Math.abs(Math.round(angle2)) % 45 === 0) {
         const hip2 = new QLine([currentRoof.x2, currentRoof.y2, ridgeCoordinate.x1, ridgeCoordinate.y1], {
           fontSize: roof.fontSize,
-          stroke: 'red',
+          stroke: '#1083E3',
-          strokeWidth: 1,
+          strokeWidth: 2,
           name: LINE_TYPE.SUBLINE.HIP,
           attributes: { roofId: roof.id, currentRoof: currentRoof.id, actualSize: 0 },
         })
@@ -2063,8 +2062,8 @@ const drawHips = (roof, canvas) => {
       if (ridgePoints !== undefined) {
         const hip = new QLine([currentRoof.x1, currentRoof.y1, ridgePoints.x, ridgePoints.y], {
           fontSize: roof.fontSize,
-          stroke: 'yellow',
+          stroke: '#1083E3',
-          strokeWidth: 1,
+          strokeWidth: 2,
           name: LINE_TYPE.SUBLINE.HIP,
           attributes: { roofId: roof.id, currentRoof: currentRoof.id, actualSize: 0 },
         })
@@ -2211,8 +2210,8 @@ const connectLinePoint = (polygon) => {
     const line = new QLine([p.x1, p.y1, p.x2, p.y2], {
       attributes: { roofId: polygon.id },
       fontSize: polygon.fontSize,
-      stroke: 'purple',
+      stroke: '#1083E3',
-      strokeWidth: 1,
+      strokeWidth: 2,
     })
     line.attributes.planeSize = Math.round(Math.sqrt(Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2)) * 10) / 10
     line.attributes.actualSize = Math.round(Math.sqrt(Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2)) * 10) / 10
@@ -2269,8 +2268,8 @@ const connectLinePoint = (polygon) => {
     const line = new QLine([p.x1, p.y1, p.x2, p.y2], {
       attributes: { roofId: polygon.id },
       fontSize: polygon.fontSize,
-      stroke: 'purple',
+      stroke: '#1083E3',
-      strokeWidth: 1,
+      strokeWidth: 2,
     })
     line.attributes.planeSize = Math.round(Math.sqrt(Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2)) * 10)
     line.attributes.actualSize = Math.round(Math.sqrt(Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2)) * 10)
@@ -2323,8 +2322,8 @@ const connectLinePoint = (polygon) => {
         let y2 = Math.max(ridge.y1, ridge2.y1, ridge.y2, ridge2.y2)
         const newRidge = new QLine([x1, y1, x2, y2], {
           fontSize: polygon.fontSize,
-          stroke: 'blue',
+          stroke: '#1083E3',
-          strokeWidth: 1,
+          strokeWidth: 2,
           name: LINE_TYPE.SUBLINE.RIDGE,
           attributes: { roofId: polygon.id },
         })
@@ -2554,8 +2553,6 @@ const changeEavesRoof = (currentRoof, canvas) => {
 
     if (ridgeLines.length > 0) {
       const ridge = ridgeLines[0]
-      console.log(currentRoof.attributes.ridgeCoordinate)
-      console.log('ridge.x1 : ', ridge.x1, 'ridge.y1 : ', ridge.y1, 'ridge.x2 : ', ridge.x2, 'ridge.y2 : ', ridge.y2)
       if (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) {
         ridge.set({
           x1: hipX2,
@@ -2574,7 +2571,6 @@ const changeEavesRoof = (currentRoof, canvas) => {
         })
         currentRoof.attributes.ridgeCoordinate = { x1: ridge.x2, y1: ridge.y2 }
       }
-      console.log('ridge.x1 : ', ridge.x1, 'ridge.y1 : ', ridge.y1, 'ridge.x2 : ', ridge.x2, 'ridge.y2 : ', ridge.y2)
       ridge.attributes.planeSize = Math.round(Math.sqrt(Math.pow(ridge.x1 - ridge.x2, 2) + Math.pow(ridge.y1 - ridge.y2, 2)) * 10)
       ridge.attributes.actualSize = Math.round(Math.sqrt(Math.pow(ridge.x1 - ridge.x2, 2) + Math.pow(ridge.y1 - ridge.y2, 2)) * 10)
     }
@@ -2592,8 +2588,8 @@ const changeEavesRoof = (currentRoof, canvas) => {
 
     const hip1 = new QLine([currentRoof.x1, currentRoof.y1, hipX2, hipY2], {
       fontSize: roof.fontSize,
-      stroke: 'red',
+      stroke: '#1083E3',
-      strokeWidth: 1,
+      strokeWidth: 2,
       name: LINE_TYPE.SUBLINE.HIP,
       attributes: {
         roofId: roof.id,
@@ -2611,8 +2607,8 @@ const changeEavesRoof = (currentRoof, canvas) => {
 
     const hip2 = new QLine([currentRoof.x2, currentRoof.y2, hipX2, hipY2], {
       fontSize: roof.fontSize,
-      stroke: 'red',
+      stroke: '#1083E3',
-      strokeWidth: 1,
+      strokeWidth: 2,
       name: LINE_TYPE.SUBLINE.HIP,
       attributes: {
         roofId: roof.id,
@@ -2761,8 +2757,8 @@ const changeGableRoof = (currentRoof, canvas) => {
 
       let hip1 = new QLine([currentRoof.x1, currentRoof.y1, midX, midY], {
         fontSize: roof.fontSize,
-        stroke: 'red',
+        stroke: '#1083E3',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: LINE_TYPE.SUBLINE.HIP,
         attributes: {
           roofId: roofId,
@@ -2778,8 +2774,8 @@ const changeGableRoof = (currentRoof, canvas) => {
 
       let hip2 = new QLine([currentRoof.x2, currentRoof.y2, midX, midY], {
         fontSize: roof.fontSize,
-        stroke: 'red',
+        stroke: '#1083E3',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: LINE_TYPE.SUBLINE.HIP,
         attributes: {
           roofId: roofId,
@@ -2950,8 +2946,8 @@ const changeHipAndGableRoof = (currentRoof, canvas) => {
 
       const hip1 = new QLine([currentRoof.x1, currentRoof.y1, midX + hipX2, midY + hipY2], {
         fontSize: roof.fontSize,
-        stroke: 'red',
+        stroke: '#1083E3',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: LINE_TYPE.SUBLINE.HIP,
         attributes: {
           roofId: roof.id,
@@ -2970,8 +2966,8 @@ const changeHipAndGableRoof = (currentRoof, canvas) => {
 
       const hip2 = new QLine([currentRoof.x2, currentRoof.y2, midX + hipX2, midY + hipY2], {
         fontSize: roof.fontSize,
-        stroke: 'red',
+        stroke: '#1083E3',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: LINE_TYPE.SUBLINE.HIP,
         attributes: {
           roofId: roof.id,
@@ -3005,8 +3001,8 @@ const changeHipAndGableRoof = (currentRoof, canvas) => {
       hipLines.forEach((hip, i) => {
         const gableLine = new QLine([hip.x2, hip.y2, currentRoof.attributes.ridgeCoordinate.x1, currentRoof.attributes.ridgeCoordinate.y1], {
           fontSize: roof.fontSize,
-          stroke: 'red',
+          stroke: '#1083E3',
-          strokeWidth: 1,
+          strokeWidth: 2,
           name: LINE_TYPE.SUBLINE.GABLE,
           attributes: {
             roofId: roof.id,
@@ -3191,8 +3187,8 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => {
 
       const gable1 = new QLine([midX + hipX1, midY + hipY1, hipX2, hipY2], {
         fontSize: roof.fontSize,
-        stroke: 'red',
+        stroke: '#1083E3',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: LINE_TYPE.SUBLINE.GABLE,
         attributes: {
           roofId: roof.id,
@@ -3213,8 +3209,8 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => {
 
       const gable2 = new QLine([midX + hipX1, midY + hipY1, hipX2, hipY2], {
         fontSize: roof.fontSize,
-        stroke: 'red',
+        stroke: '#1083E3',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: LINE_TYPE.SUBLINE.GABLE,
         attributes: {
           roofId: roof.id,
@@ -3231,8 +3227,8 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => {
 
       const gable3 = new QLine([gable1.x1, gable1.y1, gable2.x1, gable2.y1], {
         fontSize: roof.fontSize,
-        stroke: 'red',
+        stroke: '#1083E3',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: LINE_TYPE.SUBLINE.GABLE,
         attributes: {
           roofId: roof.id,
@@ -3247,8 +3243,8 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => {
 
       const hip1 = new QLine([currentRoof.x1, currentRoof.y1, gable1.x1, gable1.y1], {
         fontSize: roof.fontSize,
-        stroke: 'red',
+        stroke: '#1083E3',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: LINE_TYPE.SUBLINE.GABLE,
         attributes: {
           roofId: roof.id,
@@ -3265,8 +3261,8 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => {
 
       const hip2 = new QLine([currentRoof.x2, currentRoof.y2, gable2.x1, gable2.y1], {
         fontSize: roof.fontSize,
-        stroke: 'red',
+        stroke: '#1083E3',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: LINE_TYPE.SUBLINE.HIP,
         attributes: {
           roofId: roof.id,
@@ -3421,8 +3417,8 @@ const changeWallRoof = (currentRoof, canvas) => {
 
     const addPrevWallLine1 = new QLine([prevX2, prevY2, wallLine.x1 - prevWidthX, wallLine.y1 - prevWidthY], {
       fontSize: roof.fontSize,
-      stroke: 'red',
+      stroke: '#1083E3',
-      strokeWidth: 1,
+      strokeWidth: 2,
       name: 'roofLine',
       attributes: { roofId: roofId, type: LINE_TYPE.WALLLINE.ETC },
     })
@@ -3431,8 +3427,8 @@ const changeWallRoof = (currentRoof, canvas) => {
       [addPrevWallLine1.x2, addPrevWallLine1.y2, addPrevWallLine1.x2 + prevWidthX, addPrevWallLine1.y2 + prevWidthY],
       {
         fontSize: roof.fontSize,
-        stroke: 'cyan',
+        stroke: '#1083E3',
-        strokeWidth: 1,
+        strokeWidth: 2,
         name: 'roofLine',
         attributes: { roofId: roofId, type: LINE_TYPE.WALLLINE.ETC },
       },
@@ -3440,16 +3436,16 @@ const changeWallRoof = (currentRoof, canvas) => {
 
     const addNextWallLine1 = new QLine([wallLine.x2, wallLine.y2, wallLine.x2 + nextWidthX, wallLine.y2 + nextWidthY], {
       fontSize: roof.fontSize,
-      stroke: 'green',
+      stroke: '#1083E3',
-      strokeWidth: 1,
+      strokeWidth: 2,
       name: 'roofLine',
       attributes: { roofId: roofId, type: LINE_TYPE.WALLLINE.ETC },
     })
 
     const addNextWallLine2 = new QLine([addNextWallLine1.x2, addNextWallLine1.y2, nextX1, nextY1], {
       fontSize: roof.fontSize,
-      stroke: 'red',
+      stroke: '#1083E3',
-      strokeWidth: 1,
+      strokeWidth: 2,
       name: 'roofLine',
       attributes: { roofId: roofId, type: LINE_TYPE.WALLLINE.ETC },
     })
@@ -3493,8 +3489,8 @@ const changeWallRoof = (currentRoof, canvas) => {
 
     let hip1 = new QLine([currentRoof.x1, currentRoof.y1, wallMidX, wallMidY], {
       fontSize: roof.fontSize,
-      stroke: 'red',
+      stroke: '#1083E3',
-      strokeWidth: 1,
+      strokeWidth: 2,
       name: LINE_TYPE.SUBLINE.HIP,
       attributes: {
         roofId: roof.id,
@@ -3509,8 +3505,8 @@ const changeWallRoof = (currentRoof, canvas) => {
 
     let hip2 = new QLine([currentRoof.x2, currentRoof.y2, wallMidX, wallMidY], {
       fontSize: roof.fontSize,
-      stroke: 'red',
+      stroke: '#1083E3',
-      strokeWidth: 1,
+      strokeWidth: 2,
       name: LINE_TYPE.SUBLINE.HIP,
       attributes: {
         roofId: roof.id,