육지붕 구현

2025-02-06 17:44:44 +09:00 · 2025-02-06 17:44:44 +09:00 · 57bfe51146
commit 57bfe51146
parent 17378dc3ad
5 changed files with 795 additions and 693 deletions
--- a/src/components/floor-plan/modal/basic/BasicSetting.jsx
+++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx
@ -12,7 +12,7 @@ import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientatio
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { useEvent } from '@/hooks/useEvent'
 import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
-import { addedRoofsState } from '@/store/settingAtom'
+import { addedRoofsState, corridorDimensionSelector } from '@/store/settingAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import Swal from 'sweetalert2'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
@ -40,31 +40,40 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
    if (tabNum === 1) {
      orientationRef.current.handleNextStep()
    } else if (tabNum === 2) {
-      if (!isObjectNotEmpty(moduleSelectionData.module)) {
-        Swal.fire({
-          title: getMessage('module.not.found'),
-          icon: 'warning',
-        })
-        return
-      }
+      if (canvasSetting.roofSizeSet !== '3') {
+        if (!isObjectNotEmpty(moduleSelectionData.module)) {
+          Swal.fire({
+            title: getMessage('module.not.found'),
+            icon: 'warning',
+          })
+          return
+        }

-      if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
-        Swal.fire({
-          title: getMessage('construction.length.difference'),
-          icon: 'warning',
+        if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
+          Swal.fire({
+            title: getMessage('construction.length.difference'),
+            icon: 'warning',
+          })
+          return
+        }
+        //물건정보 갱신일 수정
+        updateObjectDataApi({
+          objectNo: currentCanvasPlan.objectNo, //오브젝트_no
+          standardWindSpeedId: moduleSelectionData.common.stdWindSpeed, //기준풍속코드
+          verticalSnowCover: moduleSelectionData.common.stdSnowLd, //적설량
+          surfaceType: moduleSelectionData.common.illuminationTpNm, //면조도구분
+          installHeight: moduleSelectionData.common.instHt, //설치높이
+          userId: loginUserState.userId, //작성자아아디
        })
-        return
+      } else {
+        if (!isObjectNotEmpty(moduleSelectionData.flatModule)) {
+          Swal.fire({
+            title: getMessage('module.not.found'),
+            icon: 'warning',
+          })
+          return
+        }
      }
-
-      //물건정보 갱신일 수정
-      updateObjectDataApi({
-        objectNo: currentCanvasPlan.objectNo, //오브젝트_no
-        standardWindSpeedId: moduleSelectionData.common.stdWindSpeed, //기준풍속코드
-        verticalSnowCover: moduleSelectionData.common.stdSnowLd, //적설량
-        surfaceType: moduleSelectionData.common.illuminationTpNm, //면조도구분
-        installHeight: moduleSelectionData.common.instHt, //설치높이
-        userId: loginUserState.userId, //작성자아아디
-      })
    }

    setTabNum(tabNum + 1)
@ -88,6 +97,14 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
    const res = await updateObjectDate(params)
  }

+  useEffect(() => {
+    if (canvasSetting.roofSizeSet !== '3') {
+      manualModuleSetup(placementRef)
+    } else {
+      manualFlatroofModuleSetup(placementFlatRef)
+    }
+  }, [isManualModuleSetup])
+
  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap lx-2`}>
@ -107,12 +124,12 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
          </div>
          {tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
          {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 2 && <Module setTabNum={setTabNum} />}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}

          {/*배치면 초기설정 - 입력방법: 육지붕*/}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 3 && (
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == '3' && tabNum === 3 && (
            <PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
          )}

@ -141,9 +158,10 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
                    </button>
                  </>
                )}
-                {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet === 3 && (
+                {console.log('canvasSetting.roofSizeSet', canvasSetting.roofSizeSet)}
+                {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && (
                  <>
-                    <button className="btn-frame modal mr5" onClick={() => manualFlatroofModuleSetup(placementFlatRef)}>
+                    <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
                      {getMessage('modal.module.basic.setting.passivity.placement')}
                    </button>
                    <button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>
--- a/src/components/floor-plan/modal/basic/step/Placement.jsx
+++ b/src/components/floor-plan/modal/basic/step/Placement.jsx
@ -74,6 +74,7 @@ const Placement = forwardRef((props, refs) => {
    setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
  }

+  //최초 지입시 체크
  useEffect(() => {
    if (moduleSelectionData && moduleSelectionData.module.itemList.length > 0) {
      let initCheckedModule = {}
@ -114,29 +115,27 @@ const Placement = forwardRef((props, refs) => {
                <tbody>
                  {selectedModules.itemList &&
                    selectedModules.itemList.map((item, index) => (
-                      <>
-                        <tr key={index}>
-                          <td className="al-c">
-                            <div className="d-check-box no-text pop">
-                              <input
-                                type="checkbox"
-                                id={item.itemId}
-                                name={item.itemId}
-                                checked={selectedItems[item.itemId]}
-                                onChange={handleSelectedItem}
-                              />
-                              <label htmlFor={item.itemId}></label>
-                            </div>
-                          </td>
-                          <td>
-                            <div className="color-wrap">
-                              <span className="color-box" style={{ backgroundColor: item.color }}></span>
-                              <span className="name">{item.itemNm}</span>
-                            </div>
-                          </td>
-                          <td className="al-r">{item.wpOut}</td>
-                        </tr>
-                      </>
+                      <tr key={index}>
+                        <td className="al-c">
+                          <div className="d-check-box no-text pop">
+                            <input
+                              type="checkbox"
+                              id={item.itemId}
+                              name={item.itemId}
+                              checked={selectedItems[item.itemId]}
+                              onChange={handleSelectedItem}
+                            />
+                            <label htmlFor={item.itemId}></label>
+                          </div>
+                        </td>
+                        <td>
+                          <div className="color-wrap">
+                            <span className="color-box" style={{ backgroundColor: item.color }}></span>
+                            <span className="name">{item.itemNm}</span>
+                          </div>
+                        </td>
+                        <td className="al-r">{item.wpOut}</td>
+                      </tr>
                    ))}
                </tbody>
              </table>
--- a/src/components/floor-plan/modal/basic/step/pitch/PitchModule.jsx
+++ b/src/components/floor-plan/modal/basic/step/pitch/PitchModule.jsx
@ -1,12 +1,22 @@
+import { useState, useEffect } from 'react'
+import { useRecoilState } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
 import QSelectBox from '@/components/common/select/QSelectBox'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
+import { isObjectNotEmpty } from '@/util/common-utils'

 export default function PitchModule({}) {
  const { getMessage } = useMessage()
-  const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
+  const { getModuleTypeItemList } = useMasterController()
+  const [moduleList, setModuleList] = useState([])
+  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
+  const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
+
  const moduleData = {
    header: [
-      { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
+      { name: getMessage('module'), width: 250, prop: 'module', type: 'color-box' },
      {
        name: `${getMessage('높이')}  (mm)`,
        prop: 'height',
@ -14,24 +24,45 @@ export default function PitchModule({}) {
      { name: `${getMessage('width')} (mm)`, prop: 'width' },
      { name: `${getMessage('output')} (W)`, prop: 'output' },
    ],
-    rows: [
-      {
-        module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
-        height: { name: '1134' },
-        width: { name: '1722' },
-        output: { name: '440' },
-      },
-      {
-        module: {
-          name: 'Re.RISE MS-G3 290',
-          color: '#67A2AA',
-        },
-        height: { name: '1134' },
-        width: { name: '1722' },
-        output: { name: '240' },
-      },
-    ],
  }
+
+  const getModuleData = async (roofsIds) => {
+    const list = await getModuleTypeItemList(roofsIds)
+    if (list.data.length > 0) {
+      //selectbox에 이름을 넣는다
+      list.data.forEach((item) => {
+        item.name = item.itemNm
+      })
+      //셀렉트박스 데이터 초기화
+      setModuleList(list.data)
+    }
+  }
+
+  useEffect(() => {
+    getModuleData(['FLAT_ROOF'])
+  }, [])
+
+  const handleChangeModule = (option) => {
+    //선택된 모듈
+    setSelectedModules(option) //선택값 저장
+    setModuleSelectionData({
+      ...moduleSelectionData,
+      flatModule: option,
+    })
+    moduleSelectedDataTrigger({
+      ...moduleSelectionData,
+      flatModule: option,
+    })
+  }
+
+  useEffect(() => {
+    if (isObjectNotEmpty(moduleSelectionData.flatModule) && moduleList.length > 0) {
+      handleChangeModule(moduleSelectionData.flatModule)
+    }
+  }, [moduleList])
+
+  const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
+
  return (
    <>
      <div className="module-table-box">
@ -39,7 +70,17 @@ export default function PitchModule({}) {
          <div className="outline-form mb10">
            <span className="mr10">{getMessage('modal.module.basic.setting.module.setting')}</span>
            <div className="grid-select">
-              <QSelectBox title={'Search'} option={SelectOption01} />
+              {moduleList && (
+                <QSelectBox
+                  title={getMessage('selectbox.title')}
+                  options={moduleList}
+                  value={selectedModules}
+                  targetKey={'itemId'}
+                  sourceKey={'itemId'}
+                  showKey={'itemNm'}
+                  onChange={handleChangeModule}
+                />
+              )}
            </div>
          </div>
          <div className="roof-module-table">
@ -54,33 +95,21 @@ export default function PitchModule({}) {
                </tr>
              </thead>
              <tbody>
-                {moduleData.rows.map((row) => (
-                  <>
-                    <tr>
-                      {moduleData.header.map((header) => (
-                        <>
-                          {header.type === 'color-box' && (
-                            <td>
-                              <div className="color-wrap">
-                                <span className="color-box" style={{ backgroundColor: row[header.prop].color }}></span>
-                                <span className="name">{row[header.prop].name}</span>
-                              </div>
-                            </td>
-                          )}
-                          {!header.type && header.type !== 'color-box' && <td className="al-r">{row[header.prop].name}</td>}
-                        </>
-                      ))}
+                {selectedModules &&
+                  selectedModules.itemList &&
+                  selectedModules.itemList.map((row, index) => (
+                    <tr key={index}>
+                      <td>
+                        <div className="color-wrap">
+                          <span className="color-box" style={{ backgroundColor: row.color }}></span>
+                          <span className="name">{row.itemNm}</span>
+                        </div>
+                      </td>
+                      <td>{Number(row.shortAxis).toFixed(0)}</td>
+                      <td>{Number(row.longAxis).toFixed(0)}</td>
+                      <td>{Number(row.wpOut).toFixed(0)}</td>
                    </tr>
-                  </>
-                ))}
-                {Array.from({ length: 3 - moduleData.rows.length }).map((_, i) => (
-                  <tr key={i}>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                ))}
+                  ))}
              </tbody>
            </table>
          </div>
--- a/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx
+++ b/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx
@ -1,49 +1,48 @@
 import { forwardRef, useState, useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { canvasState } from '@/store/canvasAtom'
-import { useRecoilValue } from 'recoil'
+import { canvasState, checkedModuleState } from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { POLYGON_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
+import { moduleSelectionDataState } from '@/store/selectedModuleOptions'

 const PitchPlacement = forwardRef((props, refs) => {
  const { getMessage } = useMessage()
  const [setupLocation, setSetupLocation] = useState('south')
-  const { makeModuleInstArea } = useModuleBasicSetting()
  const canvas = useRecoilValue(canvasState)
  const { initEvent } = useEvent()

-  useEffect(() => {
-    makeModuleInstArea()
-  }, [])
+  const { selectedModules } = useModuleBasicSetting(3)
+  const setCheckedModules = useSetRecoilState(checkedModuleState)
+  const moduleSelectionData = useRecoilValue(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
+  const [selectedItems, setSelectedItems] = useState({})

  useEffect(() => {
    handleChangeSetupLocation()
  }, [setupLocation])

+  const handleSelectedItem = (e) => {
+    setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
+  }
+
  const moduleData = {
    header: [
      { type: 'check', name: '', prop: 'check', width: 70 },
      { type: 'color-box', name: getMessage('module'), prop: 'module' },
      { type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
    ],
-    rows: [
-      {
-        check: false,
-        module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
-        output: { name: '440' },
-      },
-      {
-        check: false,
-        module: {
-          name: 'Re.RISE MS-G3 290',
-          color: '#67A2AA',
-        },
-        output: { name: '240' },
-      },
-    ],
  }

+  //체크된 모듈 데이터
+  useEffect(() => {
+    const checkedModuleIds = Object.keys(selectedItems).filter((key) => selectedItems[key])
+    const moduleArray = selectedModules.itemList.filter((item) => {
+      return checkedModuleIds.includes(item.itemId)
+    })
+    setCheckedModules(moduleArray)
+  }, [selectedItems])
+
  const handleSetupLocation = (e) => {
    initEvent()
    refs.setupLocation.current = e.target
@ -81,6 +80,20 @@ const PitchPlacement = forwardRef((props, refs) => {
    }
  }

+  useEffect(() => {
+    if (moduleSelectionData && moduleSelectionData.flatModule.itemList.length > 0) {
+      let initCheckedModule = {}
+      moduleSelectionData.flatModule.itemList.forEach((obj, index) => {
+        if (index === 0) {
+          initCheckedModule = { [obj.itemId]: true }
+        } else {
+          initCheckedModule = { ...initCheckedModule, [obj.itemId]: true }
+        }
+      })
+      setSelectedItems(initCheckedModule)
+    }
+  }, [])
+
  return (
    <>
      <div className="module-table-box mb10">
@ -104,33 +117,30 @@ const PitchPlacement = forwardRef((props, refs) => {
                </tr>
              </thead>
              <tbody>
-                {moduleData.rows.map((row) => (
-                  <>
-                    <tr>
-                      {moduleData.header.map((header) => (
-                        <>
-                          {header.type === 'color-box' && (
-                            <td>
-                              <div className="color-wrap">
-                                <span className="color-box" style={{ backgroundColor: row[header.prop].color }}></span>
-                                <span className="name">{row[header.prop].name}</span>
-                              </div>
-                            </td>
-                          )}
-                          {header.type === 'check' && (
-                            <td className="al-c">
-                              <div className="d-check-box no-text pop">
-                                <input type="checkbox" id="ch02" />
-                                <label htmlFor="ch02"></label>
-                              </div>
-                            </td>
-                          )}
-                          {header.type && header.type !== 'color-box' && header.type !== 'check' && <td className="al-r">{row[header.prop].name}</td>}
-                        </>
-                      ))}
+                {selectedModules.itemList &&
+                  selectedModules.itemList.map((item, index) => (
+                    <tr key={index}>
+                      <td className="al-c">
+                        <div className="d-check-box no-text pop">
+                          <input
+                            type="checkbox"
+                            id={item.itemId}
+                            name={item.itemId}
+                            checked={selectedItems[item.itemId]}
+                            onChange={handleSelectedItem}
+                          />
+                          <label htmlFor={item.itemId}></label>
+                        </div>
+                      </td>
+                      <td>
+                        <div className="color-wrap">
+                          <span className="color-box" style={{ backgroundColor: item.color }}></span>
+                          <span className="name">{item.itemNm}</span>
+                        </div>
+                      </td>
+                      <td className="al-r">{item.wpOut}</td>
                    </tr>
-                  </>
-                ))}
+                  ))}
              </tbody>
            </table>
          </div>
@ -150,8 +160,7 @@ const PitchPlacement = forwardRef((props, refs) => {
                    name="radio01"
                    id="ra01"
                    value={'south'}
-                    checked={setupLocation === 'south'}
-                    defaultChecked
+                    defaultChecked={setupLocation === 'south'}
                    onClick={handleSetupLocation}
                  />
                  <label htmlFor="ra01">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.south')}</label>
@ -162,7 +171,7 @@ const PitchPlacement = forwardRef((props, refs) => {
                    name="radio01"
                    id="ra02"
                    value={'excreta'}
-                    checked={setupLocation === 'excreta'}
+                    defaultChecked={setupLocation === 'excreta'}
                    onClick={handleSetupLocation}
                  />
                  <label htmlFor="ra02">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.select')}</label>
--- a/src/hooks/module/useModuleBasicSetting.js
+++ b/src/hooks/module/useModuleBasicSetting.js