배치면 설정 화면설계서 변경에 따른 수정

src/components/InitSettingsModal.jsx

@@ -9,8 +9,7 @@ import { useAxios } from '@/hooks/useAxios'
 import { get, post } from '@/lib/Axios'
 
 export default function InitSettingsModal(props) {
-  const [objectNo, setObjectNo] = useState('test123240909002') // 후에 삭제 필요
-  const [lastRoofSeq, setLastRoofSeq] = useState(0) // 마지막 roofSeq를 추적
+  const [objectNo, setObjectNo] = useState('test123240909003') // 후에 삭제 필요
   const [open, setOpen] = useRecoilState(modalState)
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
   const [roofMaterials, setRoofMaterials] = useState([])
@@ -18,7 +17,7 @@ export default function InitSettingsModal(props) {
     roofDrawingSet: '1',
     roofSizeSet: '1',
     roofAngleSet: 'slope',
-    roofs: [],
+    roofs: [{ roofSeq: '1', roofType: '3', roofWidth: '200', roofHeight: '200', roofGap: '0', roofLayout: 'parallel' }],
   })
 
   const modelProps = {
@@ -49,7 +48,8 @@ export default function InitSettingsModal(props) {
       })
 
       const roofsArray = res.some((item) => !item.roofSeq)
-        ? null //지붕재 추가 정보가 없다면 roofsArray를 null 처리하여 지붕재 추가 정보가 보이지 않게 한다.
+        ? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
+          [{ roofSeq: '1', roofType: '3', roofWidth: '200', roofHeight: '200', roofGap: '0', roofLayout: 'parallel' }]
         : res.map((item) => ({
             roofSeq: String(item.roofSeq),
             roofType: String(item.roofType),
@@ -69,14 +69,6 @@ export default function InitSettingsModal(props) {
 
       // 데이터 설정
       setBasicSettings({ ...patternData })
-
-      // 초기 roofSeq 값을 업데이트
-      if (roofsArray == null) {
-        //roofs(지붕재추가) 값이 없으면 lastRoofSeq는 1 설정
-        setLastRoofSeq(1)
-      } else {
-        setLastRoofSeq(roofsArray.length + 1)
-      }
     })
 
     if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
@@ -90,41 +82,8 @@ export default function InitSettingsModal(props) {
     setBasicSettings(newBasicSetting)
   }
 
-  //배열 추가 함수
-  const addRoofSetting = () => {
-    if (basicSetting.roofs != null && basicSetting.roofs.length === 4) {
-      alert('지붕재는 최대 4종까지 선택할 수 있습니다.')
-      return
-    }
-
-    //roofs가 null인 경우 배열 생성
-    if (basicSetting.roofs == null) {
-      basicSetting.roofs = []
-    }
-
-    //기본값
-    const newRoofSettings = {
-      //roofSeq: basicSetting.roofs.length + 1,
-      roofSeq: lastRoofSeq, // 마지막 roofSeq를 1 증가
-      roofType: '3',
-      roofWidth: '200',
-      roofHeight: '200',
-      roofGap: '0',
-      roofLayout: 'parallel',
-    }
-
-    setBasicSettings((prevState) => ({
-      ...prevState,
-      roofs: [...prevState.roofs, newRoofSettings],
-    }))
-
-    setLastRoofSeq(newRoofSettings.roofSeq + 1) // roofSeq 값을 업데이트
-  }
-
   //배열 값 변경 함수
   const handleRoofSettings = (id, event) => {
-    console.log(id)
-
     // 기본 세팅에서 roofs 배열을 복사
     const updatedRoofs = [...basicSetting.roofs]
 
@@ -144,13 +103,6 @@ export default function InitSettingsModal(props) {
         roofs: updatedRoofs,
       }))
     }
-
-    // const roof = basicSetting.roofs.map((roof, i) => (id === roof.roofSeq ? { ...roof, [event.target.name]: event.target.value } : roof))
-
-    // setBasicSettings((prevState) => ({
-    //   ...prevState,
-    //   roofs: [...roof],
-    // }))
   }
 
   //저장
@@ -176,17 +128,6 @@ export default function InitSettingsModal(props) {
     //await handleSelect()
   }
 
-  // 삭제버튼 클릭시 해당 요소 id를 targetId로 전달받음
-  const onRemove = async (targetId) => {
-    console.log(targetId)
-
-    setBasicSettings((prevState) => ({
-      ...prevState,
-      roofs: prevState.roofs.filter((roof) => roof.roofSeq !== targetId),
-    }))
-    // setBasicSettings({ ...newRoofSettings }) // 삭제한 데이터 배열을 setData()에 상태를 변화시킴
-  }
-
   return (
     <>
       <div className="container mx-auto mt-10 p-6 bg-white shadow-lg rounded-lg">
@@ -236,15 +177,7 @@ export default function InitSettingsModal(props) {
             </RadioGroup>
           </div>
         </div>
-
-        <div className="flex space-x-4">지붕재 추가(단위 : mm)</div>
-        <div className="flex items-center mb-4">
-          <button className="px-3 py-1 bg-blue-500 text-white rounded mr-3" onClick={addRoofSetting}>
-            Add
-          </button>
-          <span className="text-sm text-gray-500">※ 지붕재는 최대 4종까지 선택할 수 있습니다.</span>
-        </div>
-
+        <RadioGroup label="지붕재 추가(단위 : mm)" />
         {/* Roofs Array Rendering */}
         {basicSetting.roofs &&
           basicSetting.roofs.map((roof, index) => {
@@ -257,7 +190,7 @@ export default function InitSettingsModal(props) {
                   name="roofType"
                   onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
                   items={roofMaterials}
-                  defaultSelectedKeys={roof.roofType ? roof.roofType : ''}
+                  defaultSelectedKeys={roof.roofType ? [roof.roofType] : []}
                   selectedKeys={roof.roofType}
                   value={roof.roofType}
                 >
@@ -309,16 +242,6 @@ export default function InitSettingsModal(props) {
                     <Radio value="cascade">계단식</Radio>
                   </RadioGroup>
                 </div>
-                <div className="flex space-x-4">
-                  <Button
-                    size="sm"
-                    onClick={() => {
-                      onRemove(roof.roofSeq)
-                    }}
-                  >
-                    삭제
-                  </Button>
-                </div>
               </div>
             )
           })}