Merge pull request 'v0.3' (#448) from dev_cha into dev

Reviewed-on: #448

.gitignore

@@ -43,3 +43,4 @@ yarn.lock
 package-lock.json
 pnpm-lock.yaml
 certificates
+.ai

package.json

@@ -22,7 +22,7 @@
     "chart.js": "^4.4.6",
     "dayjs": "^1.11.13",
     "env-cmd": "^10.1.0",
-    "fabric": "^5.3.0",
+    "fabric": "^5.5.2",
     "framer-motion": "^11.2.13",
     "fs": "^0.0.1-security",
     "iron-session": "^8.0.2",

src/common/common.js

@@ -219,7 +219,8 @@ export const SAVE_KEY = [
   'originWidth',
   'originHeight',
   'skeletonLines',
-  'skeleton'
+  'skeleton',
+  'viewportTransform',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype]

src/components/fabric/QPolygon.js

@@ -336,8 +336,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     if (types.every((type) => type === LINE_TYPE.WALLLINE.EAVES)) {
       // 용마루 -- straight-skeleton
       console.log('용마루 지붕')
-      drawRidgeRoof(this.id, this.canvas, textMode)
-      //drawSkeletonRidgeRoof(this.id, this.canvas, textMode);
+      //drawRidgeRoof(this.id, this.canvas, textMode)
+      drawSkeletonRidgeRoof(this.id, this.canvas, textMode);
     } else if (isGableRoof(types)) {
       // A형, B형 박공 지붕
       console.log('패턴 지붕')

src/components/floor-plan/CanvasFrame.jsx

@@ -2,7 +2,7 @@
 
 import { useContext, useEffect, useRef } from 'react'
 
-import { useRecoilValue, useResetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
@@ -11,7 +11,7 @@ import { useCanvas } from '@/hooks/useCanvas'
 import { usePlan } from '@/hooks/usePlan'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
-import { currentMenuState } from '@/store/canvasAtom'
+import { canvasZoomState, currentMenuState } from '@/store/canvasAtom'
 import { totalDisplaySelector } from '@/store/settingAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
@@ -50,6 +50,7 @@ export default function CanvasFrame() {
   const resetSeriesState = useResetRecoilState(seriesState)
   const resetModelsState = useResetRecoilState(modelsState)
   const resetCompasDeg = useResetRecoilState(compasDegAtom)
+  const [zoom, setCanvasZoom] = useRecoilState(canvasZoomState)
   const resetSelectedModelsState = useResetRecoilState(selectedModelsState)
   const resetPcsCheckState = useResetRecoilState(pcsCheckState)
   const { handleModuleSelectionTotal } = useCanvasPopupStatusController()
@@ -67,6 +68,13 @@ export default function CanvasFrame() {
           canvasLoadInit() //config된 상태로 캔버스 객체를 그린다
           canvas?.renderAll() // 캔버스를 다시 그립니다.
 
+          if (canvas.viewportTransform) {
+            if (canvas.viewportTransform[0] !== 1) {
+              setCanvasZoom(Number((canvas.viewportTransform[0] * 100).toFixed(0)))
+            }
+          }
+          canvas.originViewPortTransform = canvas.viewportTransform
+
           if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE).length > 0) {
             setTimeout(() => {
               setSelectedMenu('module')

src/components/floor-plan/CanvasMenu.jsx

@@ -2,7 +2,7 @@
 
 import { useContext, useEffect, useState } from 'react'
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 
 import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 
@@ -25,17 +25,18 @@ import { useCommonUtils } from '@/hooks/common/useCommonUtils'
 import useMenu from '@/hooks/common/useMenu'
 import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
 import { useAxios } from '@/hooks/useAxios'
-import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState, currentCanvasPlanState } from '@/store/canvasAtom'
+import {
+  canvasSettingState,
+  canvasState,
+  canvasZoomState,
+  currentCanvasPlanState,
+  currentMenuState,
+  verticalHorizontalModeState,
+} from '@/store/canvasAtom'
 import { sessionStore } from '@/store/commonAtom'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
-import {
-  addedRoofsState,
-  basicSettingState,
-  corridorDimensionSelector,
-  selectedRoofMaterialSelector,
-  settingModalFirstOptionsState,
-} from '@/store/settingAtom'
+import { addedRoofsState, basicSettingState, selectedRoofMaterialSelector, settingModalFirstOptionsState } from '@/store/settingAtom'
 import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
 import { commonUtilsState } from '@/store/commonUtilsAtom'
 import { menusState } from '@/store/menuAtom'
@@ -51,6 +52,7 @@ import { QcastContext } from '@/app/QcastProvider'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useTrestle } from '@/hooks/module/useTrestle'
+
 export default function CanvasMenu(props) {
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const { selectedMenu, setSelectedMenu } = props
@@ -515,7 +517,10 @@ export default function CanvasMenu(props) {
                 if (createUser === 'T01' && sessionState.storeId !== 'T01') {
                   setAllButtonStyles('none')
                 } else {
-                  setEstimateContextState({ tempFlg: estimateRecoilState.tempFlg, lockFlg: estimateRecoilState.lockFlg })
+                  setEstimateContextState({
+                    tempFlg: estimateRecoilState.tempFlg,
+                    lockFlg: estimateRecoilState.lockFlg,
+                  })
                   handleButtonStyles(estimateRecoilState.tempFlg, estimateRecoilState.lockFlg, estimateContextState.docNo)
                 }
               }

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -227,11 +227,33 @@ export default function CircuitTrestleSetting({ id }) {
       return
     }
 
+    const isMultiModule = selectedModules.itemList.length > 1
+
+    let isAllIndfcs = false
+
+    if (isMultiModule) {
+      //INDFCS 실내집중, OUTDMULTI 옥외멀티
+      // 1. 모듈이 혼합형일 경우 선택한 pcs가 실내집중인 경우 alert
+      if (selectedModels.length > 0) {
+        isAllIndfcs = selectedModels.every((model) => model.pcsTpCd === 'INDFCS')
+      } else {
+        isAllIndfcs = models.every((model) => model.pcsTpCd === 'INDFCS')
+      }
+    }
+
+    if (isAllIndfcs) {
+      swalFire({
+        title: getMessage('module.circuit.indoor.focused.error'),
+        type: 'alert',
+      })
+      return
+    }
+
     const params = {
       ...getOptYn(),
       useModuleItemList: getUseModuleItemList(),
       roofSurfaceList: getRoofSurfaceList(),
-      pcsItemList: getPcsItemList(),
+      pcsItemList: getPcsItemList(isMultiModule),
     }
 
     // 파워컨디셔너 추천 목록 조회
@@ -292,12 +314,12 @@ export default function CircuitTrestleSetting({ id }) {
       })
     } else {
       // 회로 구성 가능 여부 체크
-      getPcsVoltageChk({ ...params, pcsItemList: getSelectedPcsItemList() }).then((res) => {
+      getPcsVoltageChk({ ...params, pcsItemList: getSelectedPcsItemList(isMultiModule) }).then((res) => {
         if (res.resultCode === 'S') {
           // 회로 구성 가능 여부 체크 통과 시 승압설정 정보 조회
           getPcsVoltageStepUpList({
             ...params,
-            pcsItemList: getSelectedPcsItemList(),
+            pcsItemList: getSelectedPcsItemList(isMultiModule),
           }).then((res) => {
             if (res?.result.resultCode === 'S' && res?.data) {
               setTabNum(2)
@@ -523,6 +545,7 @@ export default function CircuitTrestleSetting({ id }) {
           obj.circuit = null
           obj.pcsItemId = null
           obj.circuitNumber = null
+          obj.pcs = null
         })
         setSelectedModels(
           JSON.parse(JSON.stringify(selectedModels)).map((model) => {

src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx

@@ -649,7 +649,13 @@ export default function StepUp(props) {
                                   style={{ cursor: allocationType === 'auto' ? 'pointer' : 'default' }}
                                 >
                                   <td className="al-r">{item.serQty}</td>
-                                  <td className="al-r">{item.paralQty}</td>
+                                  <td className="al-r">
+                                    {/* 2025.12.04 select 추가 */}
+                                    <select className="select-light dark table-select" name="" id="">
+                                      <option value="">{item.paralQty}</option>
+                                    </select>
+                                  </td>
+                                  {/* <td className="al-r">{item.paralQty}</td> */}
                                 </tr>
                               )
                             })}

src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx

@@ -9,7 +9,7 @@ import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
 import { fontSelector } from '@/store/fontAtom'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { circuitNumDisplaySelector } from '@/store/settingAtom'
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { normalizeDigits } from '@/util/input-utils'
 
@@ -32,6 +32,7 @@ export default function PassivityCircuitAllocation(props) {
   const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
   const [circuitNumber, setCircuitNumber] = useState(1)
   const [targetModules, setTargetModules] = useState([])
+  const targetModulesRef = useRef([])
   const { getPcsManualConfChk } = useMasterController()
   const isDisplayCircuitNumber = useRecoilValue(circuitNumDisplaySelector)
   const { setModuleStatisticsData } = useCircuitTrestle()
@@ -59,6 +60,10 @@ export default function PassivityCircuitAllocation(props) {
     }
   }, [])
 
+  useEffect(() => {
+    targetModulesRef.current = targetModules
+  }, [targetModules])
+
   const handleTargetModules = (obj) => {
     if (!Array.isArray(targetModules)) {
       setTargetModules([])
@@ -79,6 +84,7 @@ export default function PassivityCircuitAllocation(props) {
   }
 
   const handleCircuitNumberFix = () => {
+    const pcsTpCd = selectedPcs.pcsTpCd // 실내집중형, 옥외멀티형
     let uniqueCircuitNumbers = [
       ...new Set(
         canvas
@@ -91,13 +97,13 @@ export default function PassivityCircuitAllocation(props) {
     const surfaceList = targetModules.map((module) => {
       return canvas.getObjects().filter((obj) => obj.id === canvas.getObjects().filter((obj) => obj.id === module)[0].surfaceId)[0]
     })
+    let surfaceType = {}
+
+    surfaceList.forEach((surface) => {
+      surfaceType[`${surface.direction}-${surface.roofMaterial.pitch}`] = surface
+    })
 
     if (surfaceList.length > 1) {
-      let surfaceType = {}
-
-      surfaceList.forEach((surface) => {
-        surfaceType[`${surface.direction}-${surface.roofMaterial.pitch}`] = surface
-      })
       if (Object.keys(surfaceType).length > 1) {
         swalFire({
           text: getMessage('module.circuit.fix.not.same.roof.error'),
@@ -107,6 +113,7 @@ export default function PassivityCircuitAllocation(props) {
         return
       }
     }
+
     if (!circuitNumber || circuitNumber === 0) {
       swalFire({
         text: getMessage('module.circuit.minimun.error'),
@@ -114,31 +121,65 @@ export default function PassivityCircuitAllocation(props) {
         icon: 'warning',
       })
       return
-    } else if (targetModules.length === 0) {
+    }
+
+    if (targetModules.length === 0) {
       swalFire({
         text: getMessage('module.not.found'),
         type: 'alert',
         icon: 'warning',
       })
       return
-    } else if (selectedModels.length > 1) {
-      let result = false
+    }
 
-      uniqueCircuitNumbers.forEach((number) => {
-        if (
-          number.split('-')[1] === circuitNumber + ')' &&
-          number.split('-')[0] !== '(' + (selectedModels.findIndex((model) => model.id === selectedPcs.id) + 1)
-        ) {
-          result = true
-        }
-      })
-      if (result) {
-        swalFire({
-          text: getMessage('module.already.exist.error'),
-          type: 'alert',
-          icon: 'warning',
+    switch (pcsTpCd) {
+      case 'INDFCS': {
+        const originHaveThisPcsModules = canvas
+          .getObjects()
+          .filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.pcs && obj.pcs.id === selectedPcs.id)
+        // 이미 해당 pcs로 설치된 모듈의 surface의 방향을 구한다.
+        const originSurfaceList = canvas
+          .getObjects()
+          .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && originHaveThisPcsModules.map((obj) => obj.surfaceId).includes(obj.id))
+
+        originSurfaceList.concat(originSurfaceList).forEach((surface) => {
+          surfaceType[`${surface.direction}-${surface.roofMaterial.pitch}`] = surface
         })
-        return
+
+        if (surfaceList.length > 1) {
+          if (Object.keys(surfaceType).length > 1) {
+            swalFire({
+              text: getMessage('module.circuit.fix.not.same.roof.error'),
+              type: 'alert',
+              icon: 'warning',
+            })
+            return
+          }
+        }
+
+        break
+      }
+      case 'OUTDMULTI': {
+        if (selectedModels.length > 1) {
+          let result = false
+
+          uniqueCircuitNumbers.forEach((number) => {
+            if (
+              number.split('-')[1] === circuitNumber + ')' &&
+              number.split('-')[0] !== '(' + (selectedModels.findIndex((model) => model.id === selectedPcs.id) + 1)
+            ) {
+              result = true
+            }
+          })
+          if (result) {
+            swalFire({
+              text: getMessage('module.already.exist.error'),
+              type: 'alert',
+              icon: 'warning',
+            })
+            return
+          }
+        }
       }
     }
 
@@ -189,6 +230,7 @@ export default function PassivityCircuitAllocation(props) {
           roofSurfaceId: surface.id,
           roofSurface: surface.direction,
           roofSurfaceIncl: +canvas.getObjects().filter((obj) => obj.id === surface.parentId)[0].pitch,
+          roofSurfaceNorthYn: surface.direction === 'north' ? 'Y' : 'N',
           moduleList: surface.modules.map((module) => {
             return {
               itemId: module.moduleInfo.itemId,
@@ -270,6 +312,12 @@ export default function PassivityCircuitAllocation(props) {
         return
       }
 
+      targetModules.forEach((module) => {
+        const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+        const targetModule = modules.find((obj) => obj.id === module)
+        targetModule.pcs = selectedPcs
+      })
+
       setTargetModules([])
       setCircuitNumber(+circuitNumber + 1)
       setModuleStatisticsData()

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

@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { POLYGON_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
+import { outlineDisplaySelector } from '@/store/settingAtom'
+import { useRecoilValue } from 'recoil'
 
 export default function FirstOption(props) {
   const { getMessage } = useMessage()
@@ -11,6 +13,7 @@ export default function FirstOption(props) {
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { initEvent } = useEvent()
   const { setSurfaceShapePattern } = useRoofFn()
+  const outlineDisplay = useRecoilValue(outlineDisplaySelector)
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
@@ -18,6 +21,13 @@ export default function FirstOption(props) {
     setSettingsDataSave({ ...settingsData })
   }, [])
 
+  useEffect(() => {
+    const outline = canvas.getObjects().filter((obj) => obj.name === 'originRoofOuterLine')
+    outline.forEach((obj) => {
+      obj.visible = outlineDisplay
+    })
+  }, [outlineDisplay])
+
   const onClickOption = async (item) => {
     let dimensionDisplay = settingModalFirstOptions?.dimensionDisplay
     let option1 = settingModalFirstOptions?.option1
@@ -58,7 +68,12 @@ export default function FirstOption(props) {
       // setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: [...options] })
     }
 
-    setSettingsData({ ...settingsData, option1: [...option1], option2: [...option2], dimensionDisplay: [...dimensionDisplay] })
+    setSettingsData({
+      ...settingsData,
+      option1: [...option1],
+      option2: [...option2],
+      dimensionDisplay: [...dimensionDisplay],
+    })
   }
 
   // useEffect(() => {

src/hooks/common/useCommonUtils.js

@@ -31,8 +31,11 @@ export function useCommonUtils() {
   useEffect(() => {
     commonTextMode()
     if (commonUtils.dimension) {
+      generateTempGrid()
       commonDimensionMode()
       return
+    } else {
+      removeTempGrid()
     }
     if (commonUtils.distance) {
       commonDistanceMode()
@@ -645,6 +648,7 @@ export function useCommonUtils() {
             lockMovementY: true,
             name: obj.name,
             editable: false,
+            selectable: true, // 복사된 객체 선택 가능하도록 설정
             id: uuidv4(), //복사된 객체라 새로 따준다
           })
 
@@ -653,19 +657,25 @@ export function useCommonUtils() {
 
           //배치면일 경우
           if (obj.name === 'roof') {
-            clonedObj.setCoords()
-            clonedObj.fire('modified')
-            clonedObj.fire('polygonMoved')
+            clonedObj.canvas = canvas // canvas 참조 설정
             clonedObj.set({
               direction: obj.direction,
               directionText: obj.directionText,
               roofMaterial: obj.roofMaterial,
+              stroke: 'black', // 복사된 객체는 선택 해제 상태의 색상으로 설정
+              selectable: true, // 선택 가능하도록 설정
+              evented: true, // 마우스 이벤트를 받을 수 있도록 설정
+              isFixed: false, // containsPoint에서 특별 처리 방지
             })
 
             obj.lines.forEach((line, index) => {
               clonedObj.lines[index].set({ attributes: line.attributes })
             })
 
+            clonedObj.fire('polygonMoved') // 내부 좌표 재계산 (points, pathOffset)
+            clonedObj.fire('modified')
+            clonedObj.setCoords() // 모든 속성 설정 후 좌표 업데이트
+            canvas.setActiveObject(clonedObj)
             canvas.renderAll()
             addLengthText(clonedObj) //수치 추가
             drawDirectionArrow(clonedObj) //방향 화살표 추가
@@ -905,6 +915,45 @@ export function useCommonUtils() {
     }
   }
 
+  const generateTempGrid = () => {
+    if (!canvas) return
+
+    const objects = canvas.getObjects().filter((obj) => ['QPolygon'].includes(obj.type))
+    const gridLines = []
+
+    objects.forEach((obj) => {
+      const lines = obj.lines
+
+      lines.forEach((line) => {
+        const gridLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], {
+          stroke: 'gray',
+          strokeWidth: 1,
+          selectable: false,
+          evented: false,
+          opacity: 0.5,
+          name: 'tempGrid',
+          direction: line.x1 === line.x2 ? 'vertical' : 'horizontal',
+          visible: false,
+        })
+        gridLines.push(gridLine)
+      })
+    })
+
+    gridLines.forEach((line) => {
+      canvas.add(line)
+    })
+
+    canvas.renderAll()
+  }
+
+  const removeTempGrid = () => {
+    if (!canvas) return
+
+    const tempGrids = canvas.getObjects().filter((obj) => obj.name === 'tempGrid' && !obj.visible)
+    tempGrids.forEach((grid) => canvas.remove(grid))
+    canvas.renderAll()
+  }
+
   return {
     commonFunctions,
     dimensionSettings,
@@ -916,5 +965,7 @@ export function useCommonUtils() {
     editText,
     changeDimensionExtendLine,
     deleteOuterLineObject,
+    generateTempGrid,
+    removeTempGrid,
   }
 }

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -9,6 +9,7 @@ import {
   basicSettingState,
   correntObjectNoState,
   corridorDimensionSelector,
+  outlineDisplaySelector,
   roofDisplaySelector,
   roofMaterialsSelector,
   selectedRoofMaterialSelector,
@@ -29,6 +30,8 @@ import { QcastContext } from '@/app/QcastProvider'
 import { usePlan } from '@/hooks/usePlan'
 import { roofsState } from '@/store/roofAtom'
 import { useText } from '@/hooks/useText'
+import { processEaveHelpLines } from '@/util/skeleton-utils'
+import { QLine } from '@/components/fabric/QLine'
 
 export function useRoofAllocationSetting(id) {
   const canvas = useRecoilValue(canvasState)
@@ -59,9 +62,11 @@ export function useRoofAllocationSetting(id) {
   const { saveCanvas } = usePlan()
   const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
+  const outerLinePoints = useRecoilValue(outerLinePointsState)
   const resetPoints = useResetRecoilState(outerLinePointsState)
   const [corridorDimension, setCorridorDimension] = useRecoilState(corridorDimensionSelector)
   const { changeCorridorDimensionText } = useText()
+  const outlineDisplay = useRecoilValue(outlineDisplaySelector)
 
   useEffect(() => {
     /** 배치면 초기설정에서 선택한 지붕재 배열 설정 */
@@ -303,11 +308,53 @@ export function useRoofAllocationSetting(id) {
       addPopup(popupId, 1, <ActualSizeSetting id={popupId} />)
     } else {
       apply()
+      //기존 지붕 선은 남겨둔다.
+      drawOriginRoofLine()
       resetPoints()
+
       basicSettingSave()
     }
   }
 
+  const drawOriginRoofLine = () => {
+    // outerLinePoints 배열을 이용하여 빨간색 Line 객체들 생성
+    if (outerLinePoints && outerLinePoints.length > 1) {
+      // 연속된 점들을 연결하여 라인 생성
+      for (let i = 0; i < outerLinePoints.length - 1; i++) {
+        const point1 = outerLinePoints[i]
+        const point2 = outerLinePoints[i + 1]
+
+        const line = new fabric.Line([point1.x, point1.y, point2.x, point2.y], {
+          stroke: 'black',
+          strokeDashArray: [5, 2],
+          strokeWidth: 1,
+          selectable: false,
+          name: 'originRoofOuterLine',
+          visible: outlineDisplay,
+        })
+
+        canvas.add(line)
+      }
+
+      // 마지막 점과 첫 점을 연결하여 폐곡선 만들기
+      if (outerLinePoints.length > 2) {
+        const lastPoint = outerLinePoints[outerLinePoints.length - 1]
+        const firstPoint = outerLinePoints[0]
+
+        const closingLine = new fabric.Line([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
+          stroke: 'red',
+          strokeWidth: 2,
+          selectable: false,
+          name: 'originRoofOuterLine',
+        })
+
+        canvas.add(closingLine)
+      }
+
+      canvas.renderAll()
+    }
+  }
+
   /**
    * 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우
    */
@@ -404,6 +451,22 @@ export function useRoofAllocationSetting(id) {
     const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
     roofBases.forEach((roofBase) => {
       try {
+
+        const roofEaveHelpLines = canvas.getObjects().filter((obj) => obj.lineName === 'eaveHelpLine' && obj.roofId === roofBase.id)
+        if (roofEaveHelpLines.length > 0) {
+          if (roofBase.lines) {
+            // Filter out any eaveHelpLines that are already in lines to avoid duplicates
+            const existingEaveLineIds = new Set(roofBase.lines.map((line) => line.id))
+            const newEaveLines = roofEaveHelpLines.filter((line) => !existingEaveLineIds.has(line.id))
+            roofBase.lines = [...newEaveLines]
+          } else {
+            roofBase.lines = [...roofEaveHelpLines]
+          }
+          if (!roofBase.innerLines) {
+            roofBase.innerLines = []
+          }
+        }
+
         if (roofBase.separatePolygon.length > 0) {
           splitPolygonWithSeparate(roofBase.separatePolygon)
         } else {

src/hooks/useCanvasEvent.js

@@ -402,7 +402,8 @@ export function useCanvasEvent() {
       }
     } else {
       zoom = canvasZoom - 10
-      if (zoom < 10) {  //50%->10%
+      if (zoom < 10) {
+        //50%->10%
         return
       }
     }
@@ -412,8 +413,33 @@ export function useCanvasEvent() {
 
   const handleZoomClear = () => {
     setCanvasZoom(100)
-    canvas.set({ zoom: 1 })
-    canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
+
+    zoomToAllObjects()
+    canvas.renderAll()
+  }
+
+  const zoomToAllObjects = () => {
+    const objects = canvas.getObjects().filter((obj) => obj.visible)
+    if (objects.length === 0) return
+
+    let minX = Infinity,
+      minY = Infinity
+    let maxX = -Infinity,
+      maxY = -Infinity
+
+    objects.forEach((obj) => {
+      const bounds = obj.getBoundingRect()
+      minX = Math.min(minX, bounds.left)
+      minY = Math.min(minY, bounds.top)
+      maxX = Math.max(maxX, bounds.left + bounds.width)
+      maxY = Math.max(maxY, bounds.top + bounds.height)
+    })
+
+    const centerX = (minX + maxX) / 2
+    const centerY = (minY + maxY) / 2
+    const centerPoint = new fabric.Point(centerX, centerY)
+
+    canvas.zoomToPoint(centerPoint, 1)
     canvas.renderAll()
   }
 

src/hooks/useCirCuitTrestle.js

@@ -42,7 +42,18 @@ export function useCircuitTrestle(executeEffect = false) {
     }
   }
   // PCS 아이템 목록
-  const getPcsItemList = () => {
+  const getPcsItemList = (isMultiModule = false) => {
+    if (isMultiModule) {
+      return models
+        .filter((model) => model.pcsTpCd !== 'INDFCS')
+        .map((model) => {
+          return {
+            itemId: model.itemId,
+            pcsMkrCd: model.pcsMkrCd,
+            pcsSerCd: model.pcsSerCd,
+          }
+        })
+    }
     return models.map((model) => {
       return {
         itemId: model.itemId,
@@ -53,7 +64,18 @@ export function useCircuitTrestle(executeEffect = false) {
   }
 
   // 선택된 PCS 아이템 목록
-  const getSelectedPcsItemList = () => {
+  const getSelectedPcsItemList = (isMultiModule = false) => {
+    if (isMultiModule) {
+      return selectedModels
+        .filter((model) => model.pcsTpCd !== 'INDFCS')
+        .map((model) => {
+          return {
+            itemId: model.itemId,
+            pcsMkrCd: model.pcsMkrCd,
+            pcsSerCd: model.pcsSerCd,
+          }
+        })
+    }
     return selectedModels.map((model) => {
       return {
         itemId: model.itemId,
@@ -95,6 +117,7 @@ export function useCircuitTrestle(executeEffect = false) {
               uniqueId: module.id ? module.id : null,
             }
           }),
+          roofSurfaceNorthYn: obj.direction === 'north' ? 'Y' : 'N',
         }
       })
       .filter((surface) => surface.moduleList.length > 0)

src/hooks/usePolygon.js

@@ -845,6 +845,8 @@ export const usePolygon = () => {
     polygonLines.forEach((line) => {
       line.need = true
     })
+    // 순서에 의존하지 않도록 모든 조합을 먼저 확인한 후 처리
+    const innerLineMapping = new Map() // innerLine -> polygonLine 매핑 저장
 
     // innerLines와 polygonLines의 겹침을 확인하고 type 변경
     innerLines.forEach((innerLine) => {
@@ -854,14 +856,28 @@ export const usePolygon = () => {
           if (innerLine.attributes && polygonLine.attributes.type) {
             // innerLine이 polygonLine보다 긴 경우 polygonLine.need를 false로 변경
             if (polygonLine.length < innerLine.length) {
-              polygonLine.need = false
+              if(polygonLine.lineName !== 'eaveHelpLine'){
+                polygonLine.need = false
+              }
             }
-            innerLine.attributes.planeSize = innerLine.attributes.planeSize ?? polygonLine.attributes.planeSize
-            innerLine.attributes.actualSize = innerLine.attributes.actualSize ?? polygonLine.attributes.actualSize
-            innerLine.attributes.type = polygonLine.attributes.type
-            innerLine.direction = polygonLine.direction
-            innerLine.attributes.isStart = true
-            innerLine.parentLine = polygonLine
+            // innerLine.attributes.planeSize = innerLine.attributes.planeSize ?? polygonLine.attributes.planeSize
+            // innerLine.attributes.actualSize = innerLine.attributes.actualSize ?? polygonLine.attributes.actualSize
+            // innerLine.attributes.type = polygonLine.attributes.type
+            // innerLine.direction = polygonLine.direction
+            // innerLine.attributes.isStart = true
+            // innerLine.parentLine = polygonLine
+
+
+            // 매핑된 innerLine의 attributes를 변경 (교차점 계산 전에 적용)
+            innerLineMapping.forEach((polygonLine, innerLine) => {
+              innerLine.attributes.planeSize = innerLine.attributes.planeSize ?? polygonLine.attributes.planeSize
+              innerLine.attributes.actualSize = innerLine.attributes.actualSize ?? polygonLine.attributes.actualSize
+              innerLine.attributes.type = polygonLine.attributes.type
+              innerLine.direction = polygonLine.direction
+              innerLine.attributes.isStart = true
+              innerLine.parentLine = polygonLine
+            })
+
           }
         }
       })
@@ -1371,7 +1387,7 @@ export const usePolygon = () => {
       let representLine
 
         // 지붕을 그리면서 기존 polygon의 line중 연결된 line을 찾는다.
-      ;[...polygonLines, ...innerLines].forEach((line) => {
+      [...polygonLines, ...innerLines].forEach((line) => {
         let startFlag = false
         let endFlag = false
         const startPoint = line.startPoint
@@ -1567,52 +1583,126 @@ export const usePolygon = () => {
 
     // ==== Dijkstra pathfinding ====
 
+    // function findShortestPath(start, end, graph, epsilon = 1) {
+    //   const startKey = pointToKey(start, epsilon)
+    //   const endKey = pointToKey(end, epsilon)
+    //
+    //   const distances = {}
+    //   const previous = {}
+    //   const visited = new Set()
+    //   const queue = [{ key: startKey, dist: 0 }]
+    //
+    //   for (const key in graph) distances[key] = Infinity
+    //   distances[startKey] = 0
+    //
+    //   while (queue.length > 0) {
+    //     queue.sort((a, b) => a.dist - b.dist)
+    //     const { key } = queue.shift()
+    //     if (visited.has(key)) continue
+    //     visited.add(key)
+    //
+    //     for (const neighbor of graph[key] || []) {
+    //       const neighborKey = pointToKey(neighbor.point, epsilon)
+    //       const alt = distances[key] + neighbor.distance
+    //       if (alt < distances[neighborKey]) {
+    //         distances[neighborKey] = alt
+    //         previous[neighborKey] = key
+    //         queue.push({ key: neighborKey, dist: alt })
+    //       }
+    //     }
+    //   }
+    //
+    //   const path = []
+    //   let currentKey = endKey
+    //
+    //   if (!previous[currentKey]) return null
+    //
+    //   while (currentKey !== startKey) {
+    //     const [x, y] = currentKey.split(',').map(Number)
+    //     path.unshift({ x, y })
+    //     currentKey = previous[currentKey]
+    //   }
+    //
+    //   const [sx, sy] = startKey.split(',').map(Number)
+    //   path.unshift({ x: sx, y: sy })
+    //
+    //   return path
+    // }
+
     function findShortestPath(start, end, graph, epsilon = 1) {
-      const startKey = pointToKey(start, epsilon)
-      const endKey = pointToKey(end, epsilon)
+      const startKey = pointToKey(start, epsilon);
+      const endKey = pointToKey(end, epsilon);
 
-      const distances = {}
-      const previous = {}
-      const visited = new Set()
-      const queue = [{ key: startKey, dist: 0 }]
+      // 거리와 이전 노드 추적
+      const distances = { [startKey]: 0 };
+      const previous = {};
+      const visited = new Set();
 
-      for (const key in graph) distances[key] = Infinity
-      distances[startKey] = 0
+      // 우선순위 큐 (거리가 짧은 순으로 정렬)
+      const queue = [{ key: startKey, dist: 0 }];
 
-      while (queue.length > 0) {
-        queue.sort((a, b) => a.dist - b.dist)
-        const { key } = queue.shift()
-        if (visited.has(key)) continue
-        visited.add(key)
+      // 모든 노드 초기화
+      for (const key in graph) {
+        if (key !== startKey) {
+          distances[key] = Infinity;
+        }
+      }
 
-        for (const neighbor of graph[key] || []) {
-          const neighborKey = pointToKey(neighbor.point, epsilon)
-          const alt = distances[key] + neighbor.distance
-          if (alt < distances[neighborKey]) {
-            distances[neighborKey] = alt
-            previous[neighborKey] = key
-            queue.push({ key: neighborKey, dist: alt })
+      // 우선순위 큐에서 다음 노드 선택
+      const getNextNode = () => {
+        if (queue.length === 0) return null;
+        queue.sort((a, b) => a.dist - b.dist);
+        return queue.shift();
+      };
+
+      let current;
+      while ((current = getNextNode())) {
+        const currentKey = current.key;
+
+        // 목적지에 도달하면 종료
+        if (currentKey === endKey) break;
+
+        // 이미 방문한 노드는 건너뜀
+        if (visited.has(currentKey)) continue;
+        visited.add(currentKey);
+
+        // 인접 노드 탐색
+        for (const neighbor of graph[currentKey] || []) {
+          const neighborKey = pointToKey(neighbor.point, epsilon);
+          if (visited.has(neighborKey)) continue;
+
+          const alt = distances[currentKey] + neighbor.distance;
+
+          // 더 짧은 경로를 찾은 경우 업데이트
+          if (alt < (distances[neighborKey] || Infinity)) {
+            distances[neighborKey] = alt;
+            previous[neighborKey] = currentKey;
+
+            // 우선순위 큐에 추가
+            queue.push({ key: neighborKey, dist: alt });
           }
         }
       }
 
-      const path = []
-      let currentKey = endKey
+      // 경로 재구성
+      const path = [];
+      let currentKey = endKey;
 
-      if (!previous[currentKey]) return null
-
-      while (currentKey !== startKey) {
-        const [x, y] = currentKey.split(',').map(Number)
-        path.unshift({ x, y })
-        currentKey = previous[currentKey]
+      // 시작점에 도달할 때까지 역추적
+      while (previous[currentKey] !== undefined) {
+        const [x, y] = currentKey.split(',').map(Number);
+        path.unshift({ x, y });
+        currentKey = previous[currentKey];
       }
 
-      const [sx, sy] = startKey.split(',').map(Number)
-      path.unshift({ x: sx, y: sy })
+      // 시작점 추가
+      if (path.length > 0) {
+        const [sx, sy] = startKey.split(',').map(Number);
+        path.unshift({ x: sx, y: sy });
+      }
 
-      return path
+      return path.length > 0 ? path : null;
     }
-
     // 최종 함수
     function getPath(start, end, graph, epsilon = 1) {
       // startPoint와 arrivalPoint가 될 수 있는 점은 line.attributes.type이 'default' 혹은 null이 아닌 line인 경우에만 가능

src/locales/ja.json

@@ -1089,6 +1089,7 @@
   "module.circuit.minimun.error": "回路番号は1以上の数値を入力してください。",
   "module.already.exist.error": "回路番号が同じで異なるパワーコンディショナのモジュールがあります。 別の回路番号を設定してください。",
   "module.circuit.fix.not.same.roof.error": "異なる屋根面のモジュールが選択されています。 モジュールの選択をや直してください。",
+  "module.circuit.indoor.focused.error": "混合モジュールと屋内集中PCSを組み合わせる場合は、手動回路割り当てのみ対応可能です。",
   "construction.length.difference": "屋根面工法をすべて選択してください。",
   "menu.validation.canvas.roof": "パネルを配置するには、屋根面を入力する必要があります。",
   "batch.object.outside.roof": "オブジェクトは屋根に設置する必要があります。",

src/locales/ko.json

@@ -1089,6 +1089,7 @@
   "module.circuit.minimun.error": "회로번호는 1 이상입력해주세요.",
   "module.already.exist.error": "회로번호가 같은 다른 파워 컨디셔너 모듈이 있습니다. 다른 회로번호를 설정하십시오.",
   "module.circuit.fix.not.same.roof.error": "다른 지붕면의 모듈이 선택되어 있습니다. 모듈 선택을 다시 하세요.",
+  "module.circuit.indoor.focused.error": "혼합 모듈과 실내 집중형 PCS를 조합하는 경우, 수동 회로 할당만 가능합니다.",
   "construction.length.difference": "지붕면 공법을 모두 선택하십시오.",
   "menu.validation.canvas.roof": "패널을 배치하려면 지붕면을 입력해야 합니다.",
   "batch.object.outside.roof": "오브젝트는 지붕내에 설치해야 합니다.",

src/styles/_reset.scss

@@ -460,7 +460,11 @@ button{
     }
 }
 
-
+.table-select{
+    height: 20px;
+    color: #fff !important;
+    font-size: 11px !important;
+}
 // input
 .form-input{
     label{

src/util/canvas-util.js

@@ -269,7 +269,7 @@ export const getDegreeByChon = (chon) => {
  * @returns {number}
  */
 export const getChonByDegree = (degree) => {
-  return Number((Math.tan((degree * Math.PI) / 180) * 10).toFixed(1))
+  return Number((Math.tan((degree * Math.PI) / 180) * 10).toFixed(2))
 }
 
 /**
@@ -1036,11 +1036,11 @@ export const getDegreeInOrientation = (degree) => {
     { min: -51, max: -37, value: -45 },
     { min: -36, max: -22, value: -30 },
     { min: -21, max: -7, value: -15 },
-    { min: -6, max: 0, value: 0 }
+    { min: -6, max: 0, value: 0 },
   ]
 
   // 해당 범위에 맞는 값 찾기
-  const range = degreeRanges.find(range => degree >= range.min && degree <= range.max)
+  const range = degreeRanges.find((range) => degree >= range.min && degree <= range.max)
   return range ? range.value : degree
 }