소스 간소화 및 불필요 제거

src/components/InitSettingsModal.jsx

@@ -9,7 +9,8 @@ import { useAxios } from '@/hooks/useAxios'
 import { get, post } from '@/lib/Axios'
 
 export default function InitSettingsModal(props) {
-  const [objectNo, setObjectNo] = useState('test123240909001') // 후에 삭제 필요
+  const [objectNo, setObjectNo] = useState('test123240909002') // 후에 삭제 필요
+  const [lastRoofSeq, setLastRoofSeq] = useState(0) // 마지막 roofSeq를 추적
   const [open, setOpen] = useRecoilState(modalState)
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
   const [roofMaterials, setRoofMaterials] = useState([])
@@ -36,7 +37,7 @@ export default function InitSettingsModal(props) {
     })
 
     get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
-      if (!res) return
+      if (res.length == 0) return
 
       // 'roofs' 배열을 생성하여 각 항목을 추가
       const roofsRow = res.map((item) => {
@@ -47,16 +48,16 @@ export default function InitSettingsModal(props) {
         }
       })
 
-      const roofsArray = res.map((item) => {
-        return {
-          roofSeq: String(item.roofSeq),
-          roofType: String(item.roofType),
-          roofWidth: String(item.roofWidth),
-          roofHeight: String(item.roofHeight),
-          roofGap: String(item.roofGap),
-          roofLayout: item.roofLayout,
-        }
-      })
+      const roofsArray = res.some((item) => !item.roofSeq)
+        ? null //지붕재 추가 정보가 없다면 roofsArray를 null 처리하여 지붕재 추가 정보가 보이지 않게 한다.
+        : res.map((item) => ({
+            roofSeq: String(item.roofSeq),
+            roofType: String(item.roofType),
+            roofWidth: String(item.roofWidth),
+            roofHeight: String(item.roofHeight),
+            roofGap: String(item.roofGap),
+            roofLayout: item.roofLayout,
+          }))
 
       // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
       const patternData = {
@@ -68,6 +69,14 @@ 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)) {
@@ -83,14 +92,20 @@ export default function InitSettingsModal(props) {
 
   //배열 추가 함수
   const addRoofSetting = () => {
-    if (basicSetting.roofs.length === 4) {
+    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: basicSetting.roofs.length + 1,
+      roofSeq: lastRoofSeq, // 마지막 roofSeq를 1 증가
       roofType: '3',
       roofWidth: '200',
       roofHeight: '200',
@@ -102,15 +117,40 @@ export default function InitSettingsModal(props) {
       ...prevState,
       roofs: [...prevState.roofs, newRoofSettings],
     }))
+
+    setLastRoofSeq(newRoofSettings.roofSeq + 1) // roofSeq 값을 업데이트
   }
 
   //배열 값 변경 함수
   const handleRoofSettings = (id, event) => {
-    const roof = basicSetting.roofs.map((roof, i) => (id === roof.roofSeq ? { ...roof, [event.target.name]: event.target.value } : roof))
-    setBasicSettings((prevState) => ({
-      ...prevState,
-      roofs: [...roof],
-    }))
+    console.log(id)
+
+    // 기본 세팅에서 roofs 배열을 복사
+    const updatedRoofs = [...basicSetting.roofs]
+
+    // roofSeq가 id와 일치하는 항목의 인덱스 찾기
+    const index = updatedRoofs.findIndex((roof) => roof.roofSeq === id)
+
+    if (index !== -1) {
+      // 해당 인덱스의 항목을 수정
+      updatedRoofs[index] = {
+        ...updatedRoofs[index],
+        [event.target.name]: event.target.value,
+      }
+
+      // 수정된 배열을 상태에 반영
+      setBasicSettings((prevState) => ({
+        ...prevState,
+        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],
+    // }))
   }
 
   //저장
@@ -205,9 +245,82 @@ export default function InitSettingsModal(props) {
           <span className="text-sm text-gray-500">※ 지붕재는 최대 4종까지 선택할 수 있습니다.</span>
         </div>
 
+        {/* Roofs Array Rendering */}
         {basicSetting.roofs &&
           basicSetting.roofs.map((roof, index) => {
-            return <RoofSelectBox roofMaterials={roofMaterials} roof={roof} key={index} onChange={handleRoofSettings} onRemove={onRemove} />
+            return (
+              <div key={index} className="mb-4 flex flex-wrap items-center space-x-4" style={{ border: '1px solid black' }}>
+                <span> 타입 : </span>
+                <Select
+                  aria-label="roofMaterial"
+                  className={'w-52'}
+                  name="roofType"
+                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
+                  items={roofMaterials}
+                  defaultSelectedKeys={roof.roofType ? roof.roofType : ''}
+                  selectedKeys={roof.roofType}
+                  value={roof.roofType}
+                >
+                  {(roofMaterial) => (
+                    <SelectItem key={roofMaterial.id} value={roofMaterial.id}>
+                      {roofMaterial.name}
+                    </SelectItem>
+                  )}
+                </Select>
+                <span> 너비 : </span>
+                <Input
+                  type="text"
+                  name="roofWidth"
+                  placeholder="너비"
+                  value={roof.roofWidth}
+                  className="w-24"
+                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
+                />
+                mm
+                <span> 높이 : </span>
+                <Input
+                  type="text"
+                  name="roofHeight"
+                  placeholder="높이"
+                  value={roof.roofHeight}
+                  className="w-24"
+                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
+                />
+                mm
+                <span> 서까래 간격 : </span>
+                <Input
+                  type="text"
+                  name="roofGap"
+                  placeholder="간격"
+                  value={roof.roofGap}
+                  className="w-24"
+                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
+                />
+                mm
+                <div className="flex space-x-4">
+                  <RadioGroup
+                    orientation="horizontal"
+                    name="roofLayout"
+                    value={roof.roofLayout}
+                    defaultValue="parallel"
+                    onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
+                  >
+                    <Radio value="parallel">병렬식</Radio>
+                    <Radio value="cascade">계단식</Radio>
+                  </RadioGroup>
+                </div>
+                <div className="flex space-x-4">
+                  <Button
+                    size="sm"
+                    onClick={() => {
+                      onRemove(roof.roofSeq)
+                    }}
+                  >
+                    삭제
+                  </Button>
+                </div>
+              </div>
+            )
           })}
 
         <div className="flex gap-4 items-right">
@@ -223,79 +336,3 @@ export default function InitSettingsModal(props) {
     </>
   )
 }
-
-const RoofSelectBox = (props) => {
-  return (
-    <div className="mb-4 flex flex-wrap items-center space-x-4" style={{ border: '1px solid black' }}>
-      <span> 타입 : </span>
-      <Select
-        aria-label="roofMaterial"
-        className={'w-52'}
-        name="roofType"
-        onChange={(e) => props.onChange(props.roof.roofSeq, e)}
-        items={props.roofMaterials}
-        defaultSelectedKeys={props.roof.roofType ? props.roof.roofType : ''}
-        selectedKeys={props.roof.roofType}
-        value={props.roof.roofType}
-      >
-        {(roofMaterial) => (
-          <SelectItem key={roofMaterial.id} value={roofMaterial.id}>
-            {roofMaterial.name}
-          </SelectItem>
-        )}
-      </Select>
-      <span> 너비 : </span>
-      <Input
-        type="text"
-        name="roofWidth"
-        placeholder="너비"
-        value={props.roof.roofWidth}
-        className="w-24"
-        onChange={(e) => props.onChange(props.roof.roofSeq, e)}
-      />
-      mm
-      <span> 높이 : </span>
-      <Input
-        type="text"
-        name="roofHeight"
-        placeholder="높이"
-        value={props.roof.roofHeight}
-        className="w-24"
-        onChange={(e) => props.onChange(props.roof.roofSeq, e)}
-      />
-      mm
-      <span> 서까래 간격 : </span>
-      <Input
-        type="text"
-        name="roofGap"
-        placeholder="간격"
-        value={props.roof.roofGap}
-        className="w-24"
-        onChange={(e) => props.onChange(props.roof.roofSeq, e)}
-      />
-      mm
-      <div className="flex space-x-4">
-        <RadioGroup
-          orientation="horizontal"
-          name="roofLayout"
-          value={props.roof.roofLayout}
-          defaultValue="parallel"
-          onChange={(e) => props.onChange(props.roof.roofSeq, e)}
-        >
-          <Radio value="parallel">병렬식</Radio>
-          <Radio value="cascade">계단식</Radio>
-        </RadioGroup>
-      </div>
-      <div className="flex space-x-4">
-        <Button
-          size="sm"
-          onClick={() => {
-            props.onRemove(props.roof.roofSeq)
-          }}
-        >
-          삭제
-        </Button>
-      </div>
-    </div>
-  )
-}