Merge branch 'dev' of https://git.hanasys.jp/qcast3/qcast-front into dev_ysCha

# Conflicts:
#	src/components/floor-plan/modal/object/SizeSetting.jsx

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

@@ -1,4 +1,4 @@
-import { POLYGON_TYPE, MODULE_SETUP_TYPE } from '@/common/common'
+import { MODULE_SETUP_TYPE, POLYGON_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,6 +74,7 @@ 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 } =
@@ -282,35 +283,42 @@ 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')} onClose={() => handleClosePopup(id)} />
+      <WithDraggable.Header
+        title={getMessage('plan.menu.module.circuit.setting.default')}
+        isFold={isFold}
+        onClose={() => handleClosePopup(id)}
+        onFold={() => setIsFold(!isFold)}
+      />
       <WithDraggable.Body>
-        <div className="roof-module-tab">
+        <div style={{ display: isFold ? 'none' : 'block' }}>
-          <div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
+          <div className="roof-module-tab">
-          <span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
+            <div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
-          {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
+            <span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
-            <>
+            {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
-              <div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
+              <>
-              <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
+                <div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
-              <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
+                <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
-            </>
+                <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
+              </>
+            )}
+            {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
+              <>
+                <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
+              </>
+            )}
+          </div>
+          {tabNum === 1 && <Orientation ref={orientationRef} {...orientationProps} />}
+          {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
+          {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Trestle ref={trestleRef} {...trestleProps} />}
+          {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
+            <Placement setTabNum={setTabNum} layoutSetup={layoutSetup} setLayoutSetup={setLayoutSetup} />
           )}
-          {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
+          {/*배치면 초기설정 - 입력방법: 육지붕*/}
-            <>
+          {/* {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && <PitchModule setTabNum={setTabNum} />} */}
-              <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
+          {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && (
-            </>
+            <PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
           )}
         </div>
-        {tabNum === 1 && <Orientation ref={orientationRef} {...orientationProps} />}
-        {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Trestle ref={trestleRef} {...trestleProps} />}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
-          <Placement setTabNum={setTabNum} layoutSetup={layoutSetup} setLayoutSetup={setLayoutSetup} />
-        )}
-        {/*배치면 초기설정 - 입력방법: 육지붕*/}
-        {/* {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && <PitchModule setTabNum={setTabNum} />} */}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && (
-          <PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
-        )}
 
         <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 { fabric } from 'fabric'
 import { fontSelector } from '@/store/fontAtom'
+import { fabric } from 'fabric'
 
 const ALLOCATION_TYPE = {
   AUTO: 'auto',
@@ -59,6 +59,9 @@ export default function CircuitTrestleSetting({ id }) {
   const passivityCircuitAllocationRef = useRef()
   const { setIsGlobalLoading } = useContext(QcastContext)
 
+  const originCanvasViewPortTransform = useRef([])
+  const [isFold, setIsFold] = useState(false)
+
   const {
     makers,
     setMakers,
@@ -83,6 +86,7 @@ export default function CircuitTrestleSetting({ id }) {
   } = useCircuitTrestle()
   // const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
   useEffect(() => {
+    originCanvasViewPortTransform.current = [...canvas.viewportTransform]
     if (!managementState) {
     }
     // setCircuitData({
@@ -171,15 +175,12 @@ 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')
@@ -188,9 +189,12 @@ export default function CircuitTrestleSetting({ id }) {
 
   // 캡쳐 후 처리
   const afterCapture = (type) => {
-    setCanvasZoom(100)
+    if (originCanvasViewPortTransform.current[0] !== 1) {
-    canvas.set({ zoom: 1 })
+      setCanvasZoom(Number((originCanvasViewPortTransform.current[0] * 100).toFixed(0)))
-    canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
+    }
+    canvas.viewportTransform = [...originCanvasViewPortTransform.current]
+    canvas.renderAll()
+
     changeFontSize('lengthText', lengthText.fontSize.value)
     changeFontSize('circuitNumber', circuitNumberText.fontSize.value)
     changeFontSize('flowText', flowText.fontSize.value)
@@ -788,20 +792,30 @@ 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()} />
+      <WithDraggable.Header
+        title={getMessage('modal.circuit.trestle.setting')}
+        onClose={() => handleClose()}
+        isFold={isFold}
+        onFold={() => setIsFold(!isFold)}
+      />
       <WithDraggable.Body>
-        <div className="roof-module-tab">
+        <div style={{ display: !(tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY) && isFold ? 'none' : 'block' }}>
-          <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
+          <div style={{ display: tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && isFold ? 'none' : 'block' }}>
-          <span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
+            <div className="roof-module-tab">
-          <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
+              <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
-            {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
+              <span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
+              <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
+                {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} />
+          )}
+          {tabNum === 2 && <StepUp {...stepUpProps} onInitialize={handleStepUpInitialize} />}
         </div>
-        {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
+
-        {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
-          <PassivityCircuitAllocation {...passivityProps} ref={passivityCircuitAllocationRef} />
-        )}
-        {tabNum === 2 && <StepUp {...stepUpProps} onInitialize={handleStepUpInitialize} />}
         {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,7 +1,6 @@
 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'
@@ -11,7 +10,7 @@ import { fontSelector } from '@/store/fontAtom'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { circuitNumDisplaySelector } from '@/store/settingAtom'
 import { useContext, useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { normalizeDigits } from '@/util/input-utils'
 
 export default function PassivityCircuitAllocation(props) {
@@ -22,6 +21,7 @@ export default function PassivityCircuitAllocation(props) {
     getOptYn: getApiProps,
     getUseModuleItemList: getSelectedModuleList,
     getSelectModelList: getSelectModelList,
+    isFold,
   } = props
   const { swalFire } = useSwal()
   const { getMessage } = useMessage()
@@ -497,73 +497,77 @@ export default function PassivityCircuitAllocation(props) {
   return (
     <>
       <div className="properties-setting-wrap outer">
-        <div className="setting-tit">{getMessage('modal.circuit.trestle.setting.circuit.allocation')}</div>
+        <div style={{ display: isFold ? 'none' : 'block' }}>
-        <div className="module-table-box mb10">
+          <div className="setting-tit">{getMessage('modal.circuit.trestle.setting.circuit.allocation')}</div>
-          <div className="module-table-inner">
+          <div className="module-table-box mb10">
-            <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div>
+            <div className="module-table-inner">
-            <div className="normal-font mb15">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.info')}</div>
+              <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div>
-            <div className="roof-module-table overflow-y">
+              <div className="normal-font mb15">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.info')}</div>
-              {header && (
+              <div className="roof-module-table overflow-y">
-                <table>
+                {header && (
-                  <thead>
+                  <table>
-                    <tr>
+                    <thead>
-                      {header.map((header, index) => (
+                      <tr>
-                        <th key={'header' + index}>{header.name}</th>
+                        {header.map((header, index) => (
+                          <th key={'header' + index}>{header.name}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {rows.map((row, index) => (
+                        <tr key={'row' + index}>
+                          {header.map((header, i) => (
+                            <td className="al-c" key={'rowcell' + i}>
+                              {typeof row[header.prop] === 'number'
+                                ? (row[header.prop] ?? 0).toLocaleString('ko-KR', { maximumFractionDigits: 4 })
+                                : (row[header.prop] ?? 0)}
+                            </td>
+                          ))}
+                        </tr>
                       ))}
-                    </tr>
+                      <tr>
-                  </thead>
-                  <tbody>
-                    {rows.map((row, index) => (
-                      <tr key={'row' + index}>
                         {header.map((header, i) => (
-                          <td className="al-c" key={'rowcell' + i}>
+                          <td className="al-c" key={'footer' + i}>
-                            {typeof row[header.prop] === 'number'
+                            {footer[header.prop]}
-                              ? (row[header.prop] ?? 0).toLocaleString('ko-KR', { maximumFractionDigits: 4 })
-                              : (row[header.prop] ?? 0)}
                           </td>
                         ))}
                       </tr>
-                    ))}
+                    </tbody>
-                    <tr>
+                  </table>
-                      {header.map((header, i) => (
+                )}
-                        <td className="al-c" key={'footer' + i}>
+              </div>
-                          {footer[header.prop]}
-                        </td>
-                      ))}
-                    </tr>
-                  </tbody>
-                </table>
-              )}
             </div>
           </div>
-        </div>
+          <div className="module-table-box mb10">
-        <div className="module-table-box mb10">
+            <div className="module-table-inner">
-          <div className="module-table-inner">
+              <div className="hexagonal-wrap">
-            <div className="hexagonal-wrap">
+                <div className="hexagonal-item">
-              <div className="hexagonal-item">
+                  <div className="bold-font">
-                <div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
+                    {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}
-              </div>
-              <div className="hexagonal-item">
-                {selectedModels.map((model, index) => (
-                  <div className="d-check-radio pop mb10" key={'model' + index}>
-                    <input
-                      type="radio"
-                      name="radio01"
-                      id={`ra0${index + 1}`}
-                      value={model}
-                      checked={selectedPcs?.id === model.id}
-                      onChange={() => setSelectedPcs(model)}
-                    />
-                    <label htmlFor={`ra0${index + 1}`}>
-                      {model.goodsNo} (
-                      {getMessage(
-                        'modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info',
-                        managementState?.coldRegionFlg === '1' ? [model.serMinQty, model.serColdZoneMaxQty] : [model.serMinQty, model.serMaxQty],
-                      )}
-                      )
-                    </label>
                   </div>
-                ))}
+                </div>
+                <div className="hexagonal-item">
+                  {selectedModels.map((model, index) => (
+                    <div className="d-check-radio pop mb10" key={'model' + index}>
+                      <input
+                        type="radio"
+                        name="radio01"
+                        id={`ra0${index + 1}`}
+                        value={model}
+                        checked={selectedPcs?.id === model.id}
+                        onChange={() => setSelectedPcs(model)}
+                      />
+                      <label htmlFor={`ra0${index + 1}`}>
+                        {model.goodsNo} (
+                        {getMessage(
+                          'modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info',
+                          managementState?.coldRegionFlg === '1' ? [model.serMinQty, model.serColdZoneMaxQty] : [model.serMinQty, model.serMaxQty],
+                        )}
+                        )
+                      </label>
+                    </div>
+                  ))}
+                </div>
               </div>
             </div>
           </div>