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

@@ -1,4 +1,4 @@
-import { MODULE_SETUP_TYPE, POLYGON_TYPE } from '@/common/common'
+import { POLYGON_TYPE, MODULE_SETUP_TYPE } from '@/common/common'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
 import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
@@ -74,7 +74,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const { trigger: trestleTrigger } = useCanvasPopupStatusController(2)
   const { trigger: placementTrigger } = useCanvasPopupStatusController(3)
   const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
-  const [isFold, setIsFold] = useState(false)
 
   // const { initEvent } = useContext(EventContext)
   const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup, restoreModuleInstArea } =
@@ -283,14 +282,8 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
   return (
     <WithDraggable isShow={true} pos={pos} className={basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' ? 'll' : 'lx-2'}>
-      <WithDraggable.Header
-        title={getMessage('plan.menu.module.circuit.setting.default')}
-        isFold={isFold}
-        onClose={() => handleClosePopup(id)}
-        onFold={() => setIsFold(!isFold)}
-      />
+      <WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} />
       <WithDraggable.Body>
-        <div style={{ display: isFold ? 'none' : 'block' }}>
         <div className="roof-module-tab">
           <div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
           <span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
@@ -318,7 +311,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
         {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && (
           <PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
         )}
-        </div>
 
         <div className="grid-btn-wrap">
           {/* {tabNum === 1 && <button className="btn-frame modal mr5">{getMessage('modal.common.save')}</button>} */}

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

@@ -20,8 +20,8 @@ import { useEstimate } from '@/hooks/useEstimate'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 import { useImgLoader } from '@/hooks/floorPlan/useImgLoader'
 import { QcastContext } from '@/app/QcastProvider'
-import { fontSelector } from '@/store/fontAtom'
 import { fabric } from 'fabric'
+import { fontSelector } from '@/store/fontAtom'
 
 const ALLOCATION_TYPE = {
   AUTO: 'auto',
@@ -59,9 +59,6 @@ export default function CircuitTrestleSetting({ id }) {
   const passivityCircuitAllocationRef = useRef()
   const { setIsGlobalLoading } = useContext(QcastContext)
 
-  const originCanvasViewPortTransform = useRef([])
-  const [isFold, setIsFold] = useState(false)
-
   const {
     makers,
     setMakers,
@@ -86,7 +83,6 @@ export default function CircuitTrestleSetting({ id }) {
   } = useCircuitTrestle()
   // const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
   useEffect(() => {
-    originCanvasViewPortTransform.current = [...canvas.viewportTransform]
     if (!managementState) {
     }
     // setCircuitData({
@@ -175,12 +171,15 @@ export default function CircuitTrestleSetting({ id }) {
       })
     }
 
+    canvas.renderAll()
+
+    // roof polygon들의 중간점 계산
+    const roofPolygons = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     let x, y
     x = canvas.width / 2
     y = canvas.height / 2
     
     canvas.zoomToPoint(new fabric.Point(x, y), 0.4)
-
     changeFontSize('lengthText', '28')
     changeFontSize('circuitNumber', '28')
     changeFontSize('flowText', '28')
@@ -189,12 +188,9 @@ export default function CircuitTrestleSetting({ id }) {
 
   // 캡쳐 후 처리
   const afterCapture = (type) => {
-    if (originCanvasViewPortTransform.current[0] !== 1) {
-      setCanvasZoom(Number((originCanvasViewPortTransform.current[0] * 100).toFixed(0)))
-    }
-    canvas.viewportTransform = [...originCanvasViewPortTransform.current]
-    canvas.renderAll()
-
+    setCanvasZoom(100)
+    canvas.set({ zoom: 1 })
+    canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
     changeFontSize('lengthText', lengthText.fontSize.value)
     changeFontSize('circuitNumber', circuitNumberText.fontSize.value)
     changeFontSize('flowText', flowText.fontSize.value)
@@ -792,15 +788,8 @@ export default function CircuitTrestleSetting({ id }) {
 
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="l-2">
-      <WithDraggable.Header
-        title={getMessage('modal.circuit.trestle.setting')}
-        onClose={() => handleClose()}
-        isFold={isFold}
-        onFold={() => setIsFold(!isFold)}
-      />
+      <WithDraggable.Header title={getMessage('modal.circuit.trestle.setting')} onClose={() => handleClose()} />
       <WithDraggable.Body>
-        <div style={{ display: !(tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY) && isFold ? 'none' : 'block' }}>
-          <div style={{ display: tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && isFold ? 'none' : 'block' }}>
         <div className="roof-module-tab">
           <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
           <span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
@@ -808,14 +797,11 @@ export default function CircuitTrestleSetting({ id }) {
             {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
           </div>
         </div>
-          </div>
         {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
         {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
-            <PassivityCircuitAllocation {...passivityProps} ref={passivityCircuitAllocationRef} isFold={isFold} />
+          <PassivityCircuitAllocation {...passivityProps} ref={passivityCircuitAllocationRef} />
         )}
         {tabNum === 2 && <StepUp {...stepUpProps} onInitialize={handleStepUpInitialize} />}
-        </div>
-
         {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
           <div className="grid-btn-wrap">
             <button className="btn-frame modal mr5 act" onClick={() => onAutoRecommend()}>

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

@@ -1,6 +1,7 @@
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { POLYGON_TYPE } from '@/common/common'
 import { useMasterController } from '@/hooks/common/useMasterController'
+import { useModule } from '@/hooks/module/useModule'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
@@ -10,7 +11,7 @@ import { fontSelector } from '@/store/fontAtom'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { circuitNumDisplaySelector } from '@/store/settingAtom'
 import { useContext, useEffect, useState } from 'react'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { normalizeDigits } from '@/util/input-utils'
 
 export default function PassivityCircuitAllocation(props) {
@@ -21,7 +22,6 @@ export default function PassivityCircuitAllocation(props) {
     getOptYn: getApiProps,
     getUseModuleItemList: getSelectedModuleList,
     getSelectModelList: getSelectModelList,
-    isFold,
   } = props
   const { swalFire } = useSwal()
   const { getMessage } = useMessage()
@@ -497,7 +497,6 @@ export default function PassivityCircuitAllocation(props) {
   return (
     <>
       <div className="properties-setting-wrap outer">
-        <div style={{ display: isFold ? 'none' : 'block' }}>
         <div className="setting-tit">{getMessage('modal.circuit.trestle.setting.circuit.allocation')}</div>
         <div className="module-table-box mb10">
           <div className="module-table-inner">
@@ -542,9 +541,7 @@ export default function PassivityCircuitAllocation(props) {
           <div className="module-table-inner">
             <div className="hexagonal-wrap">
               <div className="hexagonal-item">
-                  <div className="bold-font">
-                    {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}
-                  </div>
+                <div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
               </div>
               <div className="hexagonal-item">
                 {selectedModels.map((model, index) => (
@@ -571,7 +568,6 @@ export default function PassivityCircuitAllocation(props) {
             </div>
           </div>
         </div>
-        </div>
         <div className="slope-wrap">
           <div className="circuit-right-wrap mb15">
             <div className="outline-form">

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

@@ -21,8 +21,8 @@ export default function SizeSetting(props) {
   const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch({})
   const widthRef = useRef(null)
   const heightRef = useRef(null)
-  const [width, setWidth] = useState(target?.width ? (target.width * 10).toFixed() : 0)
-  const [height, setHeight] = useState(target?.height ? (target.height * 10) : 0)
+  const [width, setWidth] = useState(target?.originWidth ? (target.originWidth * 10) : 0)
+  const [height, setHeight] = useState(target?.originHeight ? (target.originHeight * 10) : 0)
   // const { initEvent } = useEvent()
   // const { initEvent } = useContext(EventContext)
 
@@ -31,11 +31,11 @@ export default function SizeSetting(props) {
   // }, [])
 
   useEffect(() => {
-    if (target?.width !== undefined) {
-      setWidth((target.width * 10).toFixed());
+    if (target?.originWidth !== undefined) {
+      setWidth(target.originWidth * 10);
     }
-    if (target?.height !== undefined) {
-      setHeight((target.height * 10).toFixed());
+    if (target?.originHeight !== undefined) {
+      setHeight(target.originHeight * 10);
     }
   }, [target]);
 

src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx

@@ -76,7 +76,7 @@ export default function Jerkinhead({
             label=""
             className="input-origin block"
             value={jerkinHeadPitch}
-            onChange={(value) => setJerkinHeadPitch(value)}
+            onChange={(value) => jerkinHeadPitch(value)}
             options={{
               allowNegative: false,
               allowDecimal: true //(index !== 0),

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -569,7 +569,7 @@ export function useRoofAllocationSetting(id) {
    * 피치 변경
    */
   const handleChangePitch = (e, index) => {
-    let value = e //e.target.value
+    let value = e.target.value
 
     const reg = /^[0-9]+(\.[0-9]{0,1})?$/
     if (!reg.test(value)) {