지붕면 할당 => 지붕재 추가 시 관리 atom addedRoofs로 수정

src/components/floor-plan/CanvasMenu.jsx

@@ -18,6 +18,7 @@ import { outerLinePointsState } from '@/store/outerLineAtom'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
 import {
   addedRoofsSelector,
+  addedRoofsState,
   basicSettingState,
   roofMaterialsSelector,
   selectedRoofMaterialSelector,
@@ -85,8 +86,9 @@ export default function CanvasMenu(props) {
   const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
   const { restoreModuleInstArea } = useModuleBasicSetting()
 
-  const addedRoofs = useRecoilValue(addedRoofsSelector)
+  const addedRoofs = useRecoilValue(addedRoofsState)
   const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
+  const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
 
   //견적서버튼 노출용
   const [buttonStyle, setButtonStyle] = useState('')
@@ -307,7 +309,14 @@ export default function CanvasMenu(props) {
               </div>
               {addedRoofs.length > 0 && (
                 <div className="select-box">
-                  {<QSelectBox value={addedRoofs.find((roof) => roof.selected)} options={addedRoofs} onChange={changeSelectedRoofMaterial} />}
+                  {
+                    <QSelectBox
+                      title={selectedRoofMaterial?.roofMatlNm}
+                      showKey={'roofMatlNm'}
+                      options={addedRoofs}
+                      onChange={changeSelectedRoofMaterial}
+                    />
+                  }
                 </div>
               )}
               <div className="btn-from">

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -25,12 +25,14 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   const { closePopup } = usePopup()
   const { getMessage } = useMessage()
   const roofMaterials = useRecoilValue(roofMaterialsAtom)
-  const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting()
+
+  const globalLocale = useRecoilValue(globalLocaleStore)
+  const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave, addedRoofs, setAddedRoofs } = useCanvasSetting()
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([])
-  const [currentRoofMaterial, setCurrentRoofMaterial] = useState(basicSetting.selectedRoofMaterial)
+  //const [currentRoofMaterial, setCurrentRoofMaterial] = useState(basicSetting.selectedRoofMaterial)
-  const globalLocale = useRecoilValue(globalLocaleStore)
+  const [currentRoofMaterial, setCurrentRoofMaterial] = useState(addedRoofs[0]) // 지붕재 정보
-  const [roofLayout, setRoofLayout] = useState(basicSetting.selectedRoofMaterial.layout)
+  const [roofLayout, setRoofLayout] = useState(addedRoofs[0].layout) // 지붕 레이아웃
 
   const roofRef = {
     roofCd: useRef(null),
@@ -47,6 +49,28 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     setRaftCodes(raftCodeList)
   }, [])
 
+  useEffect(() => {
+    //console.log('currentRoofMaterial >>>>>>>>>>>>>>>>>>> ', currentRoofMaterial)
+
+    console.log(' basicSetting.roofs[0] >>>>>>>>>>>>>>>>>>> ', basicSetting.roofs[0])
+    //console.log('basicSetting >>>>>>>>>>>>>>>>>>> ', basicSetting)
+    console.log('roofLayout >>>>>>>>>>>>>>>>>>> ', roofLayout)
+
+    setBasicSettings({
+      ...basicSetting,
+      roofsData: {
+        roofApply: true,
+        roofSeq: 1,
+        roofMatlCd: currentRoofMaterial.roofMatlCd === null ? 'ROOF_ID_WA_53A' : currentRoofMaterial.roofMatlCd,
+        roofWidth: currentRoofMaterial.width === null ? 0 : currentRoofMaterial.width,
+        roofHeight: currentRoofMaterial.length === null ? 0 : currentRoofMaterial.length,
+        roofHajebichi: currentRoofMaterial.hajebichi === null ? 0 : currentRoofMaterial.hajebichi,
+        roofGap: currentRoofMaterial.raftBaseCd === null ? 'HEI_455' : currentRoofMaterial.raftBaseCd,
+        roofLayout: roofLayout,
+      },
+    })
+  }, [currentRoofMaterial, roofLayout, basicSetting.roofSizeSet, basicSetting.roofAngleSet])
+
   // Function to update the roofType and corresponding values
   const handleRoofTypeChange = (value) => {
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
@@ -71,8 +95,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
       layout: roofLayout,
     }
 
-    const addedRoofs = []
+    const newAddedRoofs = [...addedRoofs]
-    addedRoofs.push(roofInfo)
+    if (addedRoofs.length === 1) {
+      newAddedRoofs[0] = roofInfo
+
+      setAddedRoofs(newAddedRoofs)
+    }
 
     console.log('save Info', {
       ...basicSetting,
@@ -80,7 +108,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
         // 선택된 지붕재 정보
         roofInfo,
       },
-      roofs: addedRoofs,
       roofsData: {
         roofApply: true,
         roofSeq: 1,
@@ -92,6 +119,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
         roofLayout: roofLayout,
       },
     })
+
     setBasicSettings({
       ...basicSetting,
       selectedRoofMaterial: {
@@ -100,6 +128,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
       },
       roofs: addedRoofs,
     })
+
     basicSettingSave()
   }
 

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -51,6 +51,7 @@ export default function RoofAllocationSetting(props) {
             <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
             <div className="grid-select">
               <QSelectBox
+                title={roofMaterials[0]?.name}
                 options={roofMaterials}
                 value={roofMaterials[0]}
                 onChange={(e) => {
@@ -88,7 +89,7 @@ export default function RoofAllocationSetting(props) {
                         <div className="grid-select" style={{ width: '248px' }}>
                           <QSelectBox
                             options={roofMaterials}
-                            value={roofMaterials.find((r) => r.id === roof.id)}
+                            title={roofMaterials.find((r) => r.id === roof.id).name}
                             onChange={(e) => handleChangeRoofMaterial(e, index)}
                           />
                         </div>

src/hooks/option/useCanvasSetting.js

@@ -22,6 +22,7 @@ import {
   settingsState,
   roofMaterialsAtom,
   selectedRoofMaterialSelector,
+  addedRoofsState,
 } from '@/store/settingAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { globalFontAtom } from '@/store/fontAtom'
@@ -97,6 +98,7 @@ export function useCanvasSetting() {
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
   const { getRoofMaterialList, getModuleTypeItemList } = useMasterController()
   const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
+  const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
 
   const SelectOptions = [
     { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
@@ -129,7 +131,7 @@ export function useCanvasSetting() {
       return
     }
     const { data } = await getRoofMaterialList()
-    
+
     const roofLists = data.map((item, idx) => ({
       ...item,
       id: item.roofMatlCd,
@@ -144,9 +146,13 @@ export function useCanvasSetting() {
     }))
     setRoofMaterials(roofLists)
     const selectedRoofMaterial = roofLists[0]
-    const addRoofs = []
+
-    addRoofs.push({ ...selectedRoofMaterial, selected: true })
+    if (addedRoofs.length === 0) {
-    setBasicSettings({ ...basicSetting, roofMaterials: selectedRoofMaterial, roofs: addRoofs })
+      const newAddedRoofs = []
+      newAddedRoofs.push({ ...selectedRoofMaterial, selected: true })
+      setAddedRoofs(newAddedRoofs)
+    }
+    setBasicSettings({ ...basicSetting, roofMaterials: selectedRoofMaterial })
   }
 
   useEffect(() => {
@@ -262,73 +268,78 @@ export function useCanvasSetting() {
         console.log('fetchBasicSettings res ', res)
         //if (res.length == 0) return
 
-      let roofsRow = {}
+        let roofsRow = {}
-      let roofsArray = {}
+        let roofsArray = {}
 
-      if (res.length > 0) {
+        if (res.length > 0) {
-        roofsRow = res.map((item) => {
+          roofsRow = res.map((item) => {
-          return {
+            return {
-            roofSizeSet: item.roofSizeSet,
+              roofSizeSet: item.roofSizeSet,
-            roofAngleSet: item.roofAngleSet,
+              roofAngleSet: item.roofAngleSet,
+            }
+
+            roofsArray = {
+              roofApply: true,
+              roofSeq: 1,
+              roofMatlCd: 'ROOF_ID_WA_53A',
+              roofWidth: 265,
+              roofHeight: 235,
+              roofHajebichi: 0,
+              roofGap: 'HEI_455',
+              roofLayout: 'P',
+            }
+          })
+        } else {
+          roofsRow = [
+            {
+              roofSizeSet: 1,
+              roofAngleSet: 'slope',
+            },
+          ]
+
+          roofsArray = [
+            {
+              roofApply: true,
+              roofSeq: 1,
+              roofMatlCd: 'ROOF_ID_WA_53A',
+              roofWidth: 265,
+              roofHeight: 235,
+              roofHajebichi: 0,
+              roofGap: 'HEI_455',
+              roofLayout: 'P',
+            },
+          ]
+        }
+
+        // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
+        const patternData = {
+          roofSizeSet: roofsRow[0].roofSizeSet,
+          roofAngleSet: roofsRow[0].roofAngleSet,
+          roofs: roofsArray, // 만들어진 roofs 배열
+        }
+
+        console.log('patternData', patternData)
+
+        // 데이터 설정
+        //setBasicSettings({ ...basicSetting, roofSizeSet: roofsRow[0].roofSizeSet, roofAngleSet: roofsRow[0].roofAngleSet, roofsData: roofsArray})
+        const addRoofs = []
+        roofMaterials.map((material) => {
+          if (material.id === roofsArray[0].roofMatlCd) {
+            //setRoofMaterials({ ...roofMaterials, layout: roofsArray[0].roofLayout })
+            addRoofs.push({ ...material, selected: true, layout: roofsArray[0].roofLayout })
+            setBasicSettings({
+              ...basicSetting,
+              roofMaterials: material,
+              roofs: addRoofs,
+              roofSizeSet: roofsRow[0].roofSizeSet,
+              roofAngleSet: roofsRow[0].roofAngleSet,
+              roofsData: roofsArray,
+            })
           }
         })
 
-        roofsArray = res.map((item) => {
+        // 데이터 설정
-          return {
+        setBasicSettings({ ...basicSetting, roofSizeSet: roofsRow[0].roofSizeSet, roofAngleSet: roofsRow[0].roofAngleSet, roofsData: roofsArray })
-            roofApply: item.roofApply === '' || item.roofApply === false ? false : true,
-            roofSeq: item.roofSeq,
-            roofMatlCd: item.roofMatlCd,
-            roofWidth: item.roofWidth,
-            roofHeight: item.roofHeight,
-            roofHajebichi: item.roofHajebichi,
-            roofGap: item.roofGap,
-            roofLayout: item.roofLayout,
-          }
-        })
-
-      } else {
-
-        roofsRow = [{
-          roofSizeSet: 1,
-          roofAngleSet: 'slope',
-        }]
-
-        roofsArray = [{
-          roofApply: true,
-          roofSeq: 1,
-          roofMatlCd: 'ROOF_ID_WA_53A',
-          roofWidth: 265,
-          roofHeight: 235,
-          roofHajebichi: 0,
-          roofGap: 'HEI_455',
-          roofLayout: 'P',
-        }]
-      }
-      
-      // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
-      const patternData = {
-        roofSizeSet: roofsRow[0].roofSizeSet,
-        roofAngleSet: roofsRow[0].roofAngleSet,
-        roofs: roofsArray, // 만들어진 roofs 배열
-      }
-
-      console.log('patternData', patternData)
-      
-      // 데이터 설정
-      //setBasicSettings({ ...basicSetting, roofSizeSet: roofsRow[0].roofSizeSet, roofAngleSet: roofsRow[0].roofAngleSet, roofsData: roofsArray})
-    const addRoofs = []
-    roofMaterials.map((material) => {
-      if (material.id === roofsArray[0].roofMatlCd) {
-        //setRoofMaterials({ ...roofMaterials, layout: roofsArray[0].roofLayout })
-        addRoofs.push({ ...material, selected: true, layout: roofsArray[0].roofLayout })
-        setBasicSettings({ ...basicSetting, roofMaterials: material
-                                          , roofs: addRoofs
-                                          , roofSizeSet: roofsRow[0].roofSizeSet
-                                          , roofAngleSet: roofsRow[0].roofAngleSet
-                                          , roofsData: roofsArray })
-      }
-    })
-
       })
     } catch (error) {
       console.error('Data fetching error:', error)
@@ -347,22 +358,24 @@ export function useCanvasSetting() {
         objectNo: correntObjectNo,
         roofSizeSet: basicSetting.roofSizeSet,
         roofAngleSet: basicSetting.roofAngleSet,
-        roofMaterialsAddList: [{
+        roofMaterialsAddList: [
-          roofApply: true,
+          {
-          roofSeq: 1,
+            roofApply: true,
-          roofMatlCd: basicSetting.roofsData.roofMatlCd === null ? 'ROOF_ID_WA_53A' : basicSetting.roofsData.roofMatlCd,
+            roofSeq: 1,
-          roofWidth: basicSetting.roofsData.roofWidth === null ? 0 : basicSetting.roofsData.roofWidth,
+            roofMatlCd: basicSetting.roofsData.roofMatlCd === null ? 'ROOF_ID_WA_53A' : basicSetting.roofsData.roofMatlCd,
-          roofHeight: basicSetting.roofsData.roofHeight === null ? 0 : basicSetting.roofsData.roofHeight,
+            roofWidth: basicSetting.roofsData.roofWidth === null ? 0 : basicSetting.roofsData.roofWidth,
-          roofHajebichi: basicSetting.roofsData.roofHajebichi === null ? 0 : basicSetting.roofsData.roofHajebichi,
+            roofHeight: basicSetting.roofsData.roofHeight === null ? 0 : basicSetting.roofsData.roofHeight,
-          roofGap: basicSetting.roofsData.roofGap === null ? 'HEI_455' : basicSetting.roofsData.roofGap,
+            roofHajebichi: basicSetting.roofsData.roofHajebichi === null ? 0 : basicSetting.roofsData.roofHajebichi,
-          roofLayout: basicSetting.roofsData.roofLayout,
+            roofGap: basicSetting.roofsData.roofGap === null ? 'HEI_455' : basicSetting.roofsData.roofGap,
-          }],
+            roofLayout: basicSetting.roofsData.roofLayout,
+          },
+        ],
       }
 
       console.log('patternData 55', patternData)
 
       await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
-       swalFire({ text: getMessage(res.returnMessage) })
+        swalFire({ text: getMessage(res.returnMessage) })
       })
 
       //Recoil 설정
@@ -746,5 +759,7 @@ export function useCanvasSetting() {
     setSettingsData,
     settingsDataSave,
     setSettingsDataSave,
+    addedRoofs,
+    setAddedRoofs,
   }
 }

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -3,7 +3,7 @@ import { canvasState, currentMenuState, currentObjectState } from '@/store/canva
 import { useEffect, useRef, useState } from 'react'
 import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
-import { basicSettingState, roofDisplaySelector, roofMaterialsSelector, selectedRoofMaterialSelector } from '@/store/settingAtom'
+import { 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'
@@ -30,7 +30,7 @@ export function useRoofAllocationSetting(id) {
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
   const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
   const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재
-  const [roofList, setRoofList] = useState(basicSetting.roofs) // 배치면 초기설정에서 선택한 지붕재 배열
+  const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열
   const [editingLines, setEditingLines] = useState([])
   const isFirstRef = useRef(0)
 

src/store/settingAtom.js

@@ -209,6 +209,11 @@ export const basicSettingState = atom({
   dangerouslyAllowMutability: true,
 })
 
+export const addedRoofsState = atom({
+  key: 'addedRoofsState',
+  default: [],
+})
+
 // db에 등록된 지붕재 목록
 export const roofMaterialsAtom = atom({
   key: 'roofMaterialState',