지붕면 할당 경사 추가 작업중

2025-01-10 10:13:08 +09:00 · 2025-01-10 10:13:08 +09:00 · 8d8ea47d2c
commit 8d8ea47d2c
parent b9c4772ac8
3 changed files with 136 additions and 45 deletions
--- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
@ -11,6 +11,9 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { useRoofShapeSetting } from '@/hooks/roofcover/useRoofShapeSetting'
+import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
+import { getDegreeByChon } from '@/util/canvas-util'
+import { onlyNumberWithDotInputChange } from '@/util/input-utils'

 export default function RoofAllocationSetting(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@ -29,11 +32,13 @@ export default function RoofAllocationSetting(props) {
    handleChangeRaft,
    handleChangeLayout,
    currentRoofList,
+    handleChangeInput,
  } = useRoofAllocationSetting(id)
-  const { pitchText } = useRoofShapeSetting(id)
+  const pitchText = useRecoilValue(pitchTextSelector)
  const { findCommonCode } = useCommonCode()
  const [raftCodes, setRaftCodes] = useState([])
  const globalLocale = useRecoilValue(globalLocaleStore)
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
  useEffect(() => {
    const raftCodeList = findCommonCode('203800')
    setRaftCodes(raftCodeList.map((raft) => ({ ...raft, name: raft.clCodeNm })))
@ -110,7 +115,14 @@ export default function RoofAllocationSetting(props) {
                        <div className="flex-ment">
                          <span>{getMessage('slope')}</span>
                          <div className="input-grid" style={{ width: '214px' }}>
-                            <input type="text" className="input-origin block" defaultValue={4} />
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              onChange={(e) => {
+                                handleChangeInput(e, 'pitch', index)
+                              }}
+                              defaultValue={currentAngleType === 'slope' ? roof.pitch : getDegreeByChon(roof.pitch)}
+                            />
                          </div>
                          <span>{pitchText}</span>
                        </div>
@ -121,7 +133,13 @@ export default function RoofAllocationSetting(props) {
                            <div className="flex-ment">
                              <span>W</span>
                              <div className="input-grid" style={{ width: '100px' }}>
-                                <input type="text" className="input-origin block" defaultValue={roof.width} readOnly={roof.widAuth === 'R'} />
+                                <input
+                                  type="text"
+                                  className="input-origin block"
+                                  defaultValue={roof.width}
+                                  onChange={(e) => handleChangeInput(e, 'width', index)}
+                                  readOnly={roof.widAuth === 'R'}
+                                />
                              </div>
                            </div>
                          )}
@ -129,7 +147,13 @@ export default function RoofAllocationSetting(props) {
                            <div className="flex-ment">
                              <span>L</span>
                              <div className="input-grid" style={{ width: '100px' }}>
-                                <input type="text" className="input-origin block" defaultValue={roof.length} readOnly={roof.lenAuth === 'R'} />
+                                <input
+                                  type="text"
+                                  className="input-origin block"
+                                  defaultValue={roof.length}
+                                  onChange={(e) => handleChangeInput(e, 'length', index)}
+                                  readOnly={roof.lenAuth === 'R'}
+                                />
                              </div>
                            </div>
                          )}
@ -164,6 +188,7 @@ export default function RoofAllocationSetting(props) {
                                  <input
                                    type="text"
                                    className="input-origin block"
+                                    onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
                                    value={parseInt(roof.hajebichi)}
                                    readOnly={roof.roofPchAuth === 'R'}
                                  />
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@ -1,10 +1,17 @@
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
+import { canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useRef, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
-import { correntObjectNoState, addedRoofsState, basicSettingState, roofDisplaySelector, roofMaterialsSelector, selectedRoofMaterialSelector } from '@/store/settingAtom'
+import {
+  correntObjectNoState,
+  addedRoofsState,
+  basicSettingState,
+  roofDisplaySelector,
+  roofMaterialsSelector,
+  selectedRoofMaterialSelector,
+} from '@/store/settingAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { POLYGON_TYPE } from '@/common/common'
 import { v4 as uuidv4 } from 'uuid'
@ -16,6 +23,7 @@ import { menuTypeState } from '@/store/menuAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { globalLocaleStore } from '@/store/localeAtom'
+import { getChonByDegree } from '@/util/canvas-util'

 // 지붕면 할당
 export function useRoofAllocationSetting(id) {
@ -37,6 +45,7 @@ export function useRoofAllocationSetting(id) {
  const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열
  const [editingLines, setEditingLines] = useState([])
  const [currentRoofList, setCurrentRoofList] = useState(roofList)
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)

  const globalLocaleState = useRecoilValue(globalLocaleStore)
  const { get, post } = useAxios(globalLocaleState)
@ -110,7 +119,6 @@ export function useRoofAllocationSetting(id) {
            }
          })
        } else {
-
          roofsArray = [
            {
              roofApply: true,
@ -131,27 +139,28 @@ export function useRoofAllocationSetting(id) {
        }

        console.log('fetchBasicSettings roofsArray', roofsArray)
-         
+
        // 데이터 설정
        const selectRoofs = []
-        for (let i = 0; i < roofsArray.length; i++) {            
-          roofMaterials?.map((material) => {          
+        for (let i = 0; i < roofsArray.length; i++) {
+          roofMaterials?.map((material) => {
            if (material.roofMatlCd === roofsArray[i].roofMatlCd) {
-              selectRoofs.push({ ...material
-                                    , selected: roofsArray[i].roofApply
-                                    , index: roofsArray[i].roofSeq
-                                    , id: roofsArray[i].roofMatlCd 
-                                    , width: roofsArray[i].roofWidth 
-                                    , length: roofsArray[i].roofHeight
-                                    , hajebichi: roofsArray[i].roofHajebichi
-                                    , raft: roofsArray[i].roofGap
-                                    , layout: roofsArray[i].roofLayout
-                                  })
+              selectRoofs.push({
+                ...material,
+                selected: roofsArray[i].roofApply,
+                index: roofsArray[i].roofSeq,
+                id: roofsArray[i].roofMatlCd,
+                width: roofsArray[i].roofWidth,
+                length: roofsArray[i].roofHeight,
+                hajebichi: roofsArray[i].roofHajebichi,
+                raft: roofsArray[i].roofGap,
+                layout: roofsArray[i].roofLayout,
+              })
              setCurrentRoofList(selectRoofs)
            }
          })
        }
-        setBasicSetting({ ...basicSetting, roofsData: roofsArray})  
+        setBasicSetting({ ...basicSetting, roofsData: roofsArray })
      })
    } catch (error) {
      console.error('Data fetching error:', error)
@ -160,11 +169,10 @@ export function useRoofAllocationSetting(id) {

  // 저장
  const basicSettingSave = async () => {
-   
    const patternData = {
      objectNo: correntObjectNo,
      roofSizeSet: basicSetting.roofSizeSet,
-      roofAngleSet: basicSetting.roofAngleSet,  
+      roofAngleSet: basicSetting.roofAngleSet,
      roofMaterialsAddList: currentRoofList.map((item) => ({
        roofApply: item.selected === null || item.selected === undefined ? 'true' : item.selected,
        roofSeq: item.index === null || item.index === undefined ? 0 : item.index,
@ -174,24 +182,23 @@ export function useRoofAllocationSetting(id) {
        roofHajebichi: item.hajebichi === null || item.hajebichi === undefined ? 0 : item.hajebichi,
        roofGap: item.raft === null || item.raft === undefined ? 'HEI_455' : item.raft,
        roofLayout: item.layout === null || item.layout === undefined ? 'P' : item.layout,
+      })),
+    }
+
+    console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData)
+
+    // HTTP POST 요청 보내기
+    await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData })
+      .then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+
+        //Recoil 설정
+        // setCanvasSetting({ ...basicSetting })
+        fetchBasicSettings()
+      })
+      .catch((error) => {
+        swalFire({ text: error.message, icon: 'error' })
      })
-    ),
-  }
-
-  console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData)
-
-  // HTTP POST 요청 보내기
-  await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData })
-    .then((res) => {
-      swalFire({ text: getMessage(res.returnMessage) })
-
-      //Recoil 설정
-      // setCanvasSetting({ ...basicSetting })
-      fetchBasicSettings()
-    })
-    .catch((error) => {
-      swalFire({ text: error.message, icon: 'error' })
-    })
  }

  const onAddRoofMaterial = () => {
@ -221,17 +228,15 @@ export function useRoofAllocationSetting(id) {
  }

  // 선택한 지붕재로 할당
-  const handleSave = () => {    
-    
+  const handleSave = () => {
    basicSettingSave()

    // 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정
-    if (checkInnerLines()) {      
+    if (checkInnerLines()) {
      addPopup(popupId, 1, <ActualSizeSetting id={popupId} />)
    } else {
      apply()
    }
-
  }

  // 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우
@ -417,6 +422,65 @@ export function useRoofAllocationSetting(id) {
    setCurrentRoofList(newRoofList)
  }

+  const handleChangeInput = (e, type, index) => {
+    const value = e.target.value
+    if (type === 'pitch') {
+      // type이 pitch인 경우 소수점 1자리까지만 입력 가능
+      const reg = /^[0-9]+(\.[0-9]{0,1})?$/
+
+      if (!reg.test(value)) {
+        e.target.value = value.substring(0, value.length - 1)
+        const newRoofList = currentRoofList.map((roof, idx) => {
+          if (idx === index) {
+            return {
+              ...roof,
+              [type]: currentAngleType === 'slope' ? value.substring(0, value.length - 1) : getChonByDegree(value.substring(0, value.length - 1)),
+            }
+          }
+          return roof
+        })
+
+        setCurrentRoofList(newRoofList)
+
+        return
+      } else {
+        const newRoofList = currentRoofList.map((roof, idx) => {
+          if (idx === index) {
+            return {
+              ...roof,
+              [type]: currentAngleType === 'slope' ? value : getChonByDegree(value),
+            }
+          }
+          return roof
+        })
+
+        setCurrentRoofList(newRoofList)
+      }
+
+      return
+    }
+    const newRoofList = currentRoofList.map((roof, idx) => {
+      if (idx === index) {
+        return { ...roof, [type]: value }
+      }
+      return roof
+    })
+
+    setCurrentRoofList(newRoofList)
+  }
+
+  const handleChangePitch = (e, index) => {
+    const value = e.target.value
+    const newRoofList = currentRoofList.map((roof, idx) => {
+      if (idx === index) {
+        return { ...roof, pitch: value }
+      }
+      return roof
+    })
+
+    setCurrentRoofList(newRoofList)
+  }
+
  return {
    handleSave,
    onAddRoofMaterial,
@ -435,5 +499,7 @@ export function useRoofAllocationSetting(id) {
    handleChangeLayout,
    handleSaveContext,
    currentRoofList,
+    handleChangeInput,
+    handleChangePitch,
  }
 }
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@ -268,7 +268,7 @@ export const usePolygon = () => {
      surfaceCompass: polygon.surfaceCompass,
      moduleCompass: polygon.moduleCompass,
      visible: isFlowDisplay,
-      pitch: polygon.pitch,
+      pitch: polygon.roofMaterial.pitch ?? 4,
      parentId: polygon.id,
    })