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

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'}
                                   />

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++) {            
+        for (let i = 0; i < roofsArray.length; i++) {
-          roofMaterials?.map((material) => {          
+          roofMaterials?.map((material) => {
             if (material.roofMatlCd === roofsArray[i].roofMatlCd) {
-              selectRoofs.push({ ...material
+              selectRoofs.push({
-                                    , selected: roofsArray[i].roofApply
+                ...material,
-                                    , index: roofsArray[i].roofSeq
+                selected: roofsArray[i].roofApply,
-                                    , id: roofsArray[i].roofMatlCd 
+                index: roofsArray[i].roofSeq,
-                                    , width: roofsArray[i].roofWidth 
+                id: roofsArray[i].roofMatlCd,
-                                    , length: roofsArray[i].roofHeight
+                width: roofsArray[i].roofWidth,
-                                    , hajebichi: roofsArray[i].roofHajebichi
+                length: roofsArray[i].roofHeight,
-                                    , raft: roofsArray[i].roofGap
+                hajebichi: roofsArray[i].roofHajebichi,
-                                    , layout: roofsArray[i].roofLayout
+                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,
   }
 }

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,
     })