배치면초기설정 수정

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

@@ -41,15 +41,30 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     hajebichi: useRef(null),
   }
 
+  //치수 입력방법(복시도입력/실측값입력/육지붕)
+  const roofSizeSetArray = [
+    { id: 'ra01', name: 'roofSizeSet', value: '1', checked: 'ture', message: 'modal.placement.initial.setting.size.roof' },
+    { id: 'ra02', name: 'roofSizeSet', value: '2', checked: 'false', message: 'modal.placement.initial.setting.size.actual' },
+    { id: 'ra03', name: 'roofSizeSet', value: '3', checked: 'false', message: 'modal.placement.initial.setting.size.none.pitch' },
+  ]
+
+  //지붕각도 설정(경사/각도)
+  const roofAngleSetArray = [
+    { id: 'ra04', name: 'roofAngleSet', value: 'slope', checked: 'true', message: 'modal.placement.initial.setting.roof.pitch'},
+    { id: 'ra05', name: 'roofAngleSet', value: 'flat', checked: 'false', message: 'modal.placement.initial.setting.roof.angle' },
+  ]
+
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return
     const raftCodeList = findCommonCode('203800')
     setRaftCodes(raftCodeList)
-    setCurrentRoof({ ...currentRoof, roofSizeSet: basicSetting.roofMaterials.roofSizeSet, roofAngleSet: basicSetting.roofMaterials.roofAngleSet })
+    setCurrentRoof({ ...currentRoof, roofSizeSet: basicSetting.roofSizeSet, roofAngleSet: basicSetting.roofAngleSet })
+    console.log('🚀 ~ fetchBasicSettings ~ currentRoof 11:', currentRoof)
   }, [])
 
   useEffect(() => {
+    console.log('🚀 ~ fetchBasicSettings ~ currentRoof 22:', currentRoof)
     setBasicSettings({
       ...basicSetting,
       roofSizeSet: String(currentRoof.roofSizeSet),
@@ -110,10 +125,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     }
 
     const newAddedRoofs = [...addedRoofs]
-    if (addedRoofs.length === 1) {
+    newAddedRoofs[0] = { ...roofInfo }
-      newAddedRoofs[0] = { ...roofInfo }
+    setAddedRoofs(newAddedRoofs)
-      setAddedRoofs(newAddedRoofs)
-    }
 
     console.log('save Info', {
       ...basicSetting,
@@ -179,42 +192,22 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                   </th>
                   <td>
                     <div className="pop-form-radio">                      
-                      <div className="d-check-radio pop">
+                      {currentRoof &&
-                        <input
+                        roofSizeSetArray.map((item) => (
-                          type="radio"
+                          <div className="d-check-radio pop">
-                          name="roofSizeSet"
+                          <input type="radio" 
-                          id="ra01"
+                                key={item.id}
-                          value="1" // roofSizeSet 값이 '1'인 경우
+                                id={item.id}
-                          checked={currentRoof?.roofSizeSet === '1'} // 선택 여부 확인
+                                name={item.name}
-                          //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
+                                value={item.value}
-                          onClick={() => handleRoofSizeSetChange('1')}
+                                checked={currentRoof?.roofSizeSet === item.value}
-                        />
+                                defaultChecked={'1'}
-                        <label htmlFor="ra01">{getMessage('modal.placement.initial.setting.size.roof')}</label>
+                                onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
-                      </div>
+                          />
-                      <div className="d-check-radio pop">
+                          <label htmlFor={item.id}>{getMessage(item.message)}</label>
-                        <input
+                          </div>
-                          type="radio"
+                        ))
-                          name="roofSizeSet"
+                      }
-                          id="ra02"
-                          value="2" // roofSizeSet 값이 '2'인 경우
-                          checked={currentRoof?.roofSizeSet === '2'} // 선택 여부 확인
-                          //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
-                          onClick={() => handleRoofSizeSetChange('2')}
-                        />
-                        <label htmlFor="ra02">{getMessage('modal.placement.initial.setting.size.actual')}</label>
-                      </div>
-                      <div className="d-check-radio pop">
-                        <input
-                          type="radio"
-                          name="roofSizeSet"
-                          id="ra03"
-                          value="3" // roofSizeSet 값이 '3'인 경우
-                          checked={currentRoof?.roofSizeSet === '3'} // 선택 여부 확인
-                          //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
-                          onClick={() => handleRoofSizeSetChange('3')}
-                        />
-                        <label htmlFor="ra03">{getMessage('modal.placement.initial.setting.size.none.pitch')}</label>
-                      </div>
                     </div>
                   </td>
                 </tr>
@@ -222,30 +215,22 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                   <th>{getMessage('modal.placement.initial.setting.roof.angle.setting')}</th>
                   <td>
                     <div className="pop-form-radio">                      
-                      <div className="d-check-radio pop">
+                      {currentRoof &&
-                        <input
+                        roofAngleSetArray.map((item) => (
-                          type="radio"
+                          <div className="d-check-radio pop">
-                          name="roofAngleSet"
+                          <input type="radio"
-                          id="ra04"
+                                key={item.id}
-                          value="slope" // 첫 번째 라디오 버튼의 값
+                                id={item.id}
-                          checked={currentRoof?.roofAngleSet === 'slope'} // 현재 선택된 값인지 확인
+                                name={item.name}
-                          //onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
+                                value={item.value}
-                          onClick={() => handleRoofAngleSetChange('slope')}
+                                checked={currentRoof?.roofAngleSet === item.value}
-                        />
+                                defaultChecked={'slope'}
-                        <label htmlFor="ra04">{getMessage('modal.placement.initial.setting.roof.pitch')}</label>
+                                onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
-                      </div>
+                          />
-                      <div className="d-check-radio pop">
+                          <label htmlFor={item.id}>{getMessage(item.message)}</label>
-                        <input
+                          </div>
-                          type="radio"
+                        ))
-                          name="roofAngleSet"
+                      }
-                          id="ra05"
-                          value="flat" // 두 번째 라디오 버튼의 값
-                          checked={currentRoof?.roofAngleSet === 'flat'} // 현재 선택된 값인지 확인
-                          //onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
-                          onClick={() => handleRoofAngleSetChange('flat')}
-                        />
-                        <label htmlFor="ra05">{getMessage('modal.placement.initial.setting.roof.angle')}</label>
-                      </div>
                     </div>
                   </td>
                 </tr>
@@ -264,7 +249,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                             currentRoof?.roofSizeSet === '3' ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof?.roofMatlNm
                           }
                           ref={roofRef.roofCd}
-                          options={roofMaterials.map((roof, index) => {
+                          options={roofMaterials.map((roof) => {
                             return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
                           })}
                           value={currentRoof?.roofSizeSet === '3' ? null : currentRoof?.roofMatlCd}

src/hooks/option/useCanvasSetting.js

@@ -328,33 +328,35 @@ export function useCanvasSetting() {
 
         // 데이터 설정        
         const addRoofs = []
-        roofMaterials?.map((material) => {
+        for (let i = 0; i < roofsArray.length; i++) {
-          if (material.roofMatlCd === roofsArray[0].roofMatlCd) {
+          roofMaterials?.map((material) => {
-            addRoofs.push({
+            if (material.roofMatlCd === roofsArray[i].roofMatlCd) {
-              ...material,
+              addRoofs.push({
-              selected: true,
+                ...material,
-              index: 0,
+                selected: roofsArray[i].roofApply,
-              width: roofsArray[0].roofWidth,
+                index: i,
-              length: roofsArray[0].roofHeight,
+                width: roofsArray[i].roofWidth,
-              hajebichi: roofsArray[0].roofHajebichi,
+                length: roofsArray[i].roofHeight,
-              raft: roofsArray[0].roofGap,
+                hajebichi: roofsArray[i].roofHajebichi,
-              layout: roofsArray[0].roofLayout,
+                raft: roofsArray[i].roofGap,
-              roofSizeSet: roofsRow[0].roofSizeSet,
+                layout: roofsArray[i].roofLayout,
-              roofAngleSet: roofsRow[0].roofAngleSet,
+                roofSizeSet: roofsRow[i].roofSizeSet,
-              pitch: roofsArray[0].roofPitch,
+                roofAngleSet: roofsRow[i].roofAngleSet,
-              angle: roofsArray[0].roofAngle,
+                pitch: roofsArray[i].roofPitch,
-            })
+                angle: roofsArray[i].roofAngle,
-
+              })           
-            setAddedRoofs(addRoofs)
+            }
-            setBasicSettings({
+          })
-              ...basicSetting,
+        }
-              roofMaterials: addRoofs[0],
+        console.log('🚀 ~ fetchBasicSettings ~ addRoofs:', addRoofs)
-              roofSizeSet: roofsRow[0].roofSizeSet,
+        setAddedRoofs(addRoofs)
-              roofAngleSet: roofsRow[0].roofAngleSet,
+        setBasicSettings({
-              roofsData: roofsArray,
+          ...basicSetting,
-              selectedRoofMaterial: addRoofs[0],
+          roofMaterials: addRoofs[0],
-            })
+          roofSizeSet: roofsRow[0].roofSizeSet,
-          }
+          roofAngleSet: roofsRow[0].roofAngleSet,
+          roofsData: roofsArray,
+          selectedRoofMaterial: addRoofs[0],
         })
       })
     } catch (error) {

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -151,10 +151,11 @@ export function useRoofAllocationSetting(id) {
                 pitch: roofsArray[i].roofPitch,
                 angle: roofsArray[i].roofAngle,
               })
-              setCurrentRoofList(selectRoofs)
             }
           })
         }
+        
+        setCurrentRoofList(selectRoofs)
         setBasicSetting({ ...basicSetting, roofsData: roofsArray })
       })
     } catch (error) {