Canvas Settings CRU 화면 수정

src/components/Settings.jsx

@@ -9,15 +9,15 @@ import { get, post } from '@/lib/Axios'
 
 export default function Settings() {
   
+  const [objectNo, setObjectNo] = useState('test123240829010'); // object_no 입력 필드의 상태
+  const [error, setError] = useState(null); // 에러 상태 관리
+
   //초기 상태 설정
-  //화면 표시1
+  
-  const [selectedIndices1, setSelectedIndices1] = useState(['N','N','N','N','N','N','N','N','N','N','N']);
+  const [selectedIndices1, setSelectedIndices1] = useState(['N','N','N','N','N','N','N','N','N','N','N']);  //화면 표시1  
-  //화면 표시2
+  const [selectedIndices2, setSelectedIndices2] = useState(['N','N','N']);  //화면 표시2 
-  const [selectedIndices2, setSelectedIndices2] = useState(['N','N','N']);
+  const [selectedIndices3, setSelectedIndices3] = useState(0);   //흡착 범위 설정 (default:극소)  
-  //흡착 범위 설정 (default:극소)
+  const [selectedIndices4, setSelectedIndices4] = useState([]); //그리드 설정
-  const [selectedIndices3, setSelectedIndices3] = useState(0);
-  //그리드 설정
-  const [selectedIndices4, setSelectedIndices4] = useState([]);
 
   const [gridItems1, setGridItems1] = useState([
     '할당 표시', 
@@ -104,6 +104,13 @@ export default function Settings() {
   const handleSubmit = async (e) => {
     e.preventDefault();
 
+    if (objectNo) {
+      handleSelect(objectNo);
+    } else {
+      alert('object_no를 입력하세요.');
+      return;
+    }
+
     let tempCnt1 = [0,1,2,3,4,5,6,7,8,9,10]
     let display1 = ['N','N','N','N','N','N','N','N','N','N','N']
 
@@ -132,7 +139,7 @@ export default function Settings() {
     let rangeSetting = selectedIndices3
 
     //견적서 번호 << objectNo 받아와야 함.
-    let objectNo = 'test123240829010'
+    //let objectNo = 'test123240829010'
 
 	  // 유저가 올린 데이터를 데이터로 만들어주는 부분
     const patternData = {
@@ -153,135 +160,186 @@ export default function Settings() {
       allPainted : display2[2],
       adsorpRangeSetting : rangeSetting,
     }
-    console.log("patternData : ", patternData)
+    //console.log("patternData : ", patternData)
 
     // Canvas Setting 등록
-    await post({ url: '/api/canvas-management/canvas-settings', data : patternData })
+    await post({ url: `/api/canvas-management/canvas-settings`, data : patternData })
+
+    // 저장 후 재조회
+    handleSelect();
 
   };
 
   // Canvas Setting 조회
-  useEffect(() => {
+  const handleSelect = async () => {
-    get({ url: '/api/canvas-management/canvas-settings/by-object/test123240829010' }).then((res) => {    
+    //console.log("handleSelect objectNo : ", objectNo)
-      const arrangeData = res.map((item) => {
 
-        console.log("item : ", item)
+    //화면 초기화 후 조회
+    handleClick1(0)
+    handleClick2(0)
+    handleClick3(0)
+    handleClick4(0)
 
-        return {
+    try {
-          objectNo : item.objectNo,
+      get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }).then((res) => {    
-          assignDisplay : item.assignDisplay,
+        const arrangeData = res.map((item) => {
-          drawDisplay : item.drawDisplay,
+  
-          gridDisplay : item.gridDisplay,
+          //console.log("item : ", item)
-          charDisplay : item.charDisplay,
+  
-          flowDisplay : item.flowDisplay,
+          return {
-          hallwayDimenDisplay : item.hallwayDimenDisplay,
+            objectNo : item.objectNo,
-          actualDimenDisplay : item.actualDimenDisplay,
+            assignDisplay : item.assignDisplay,
-          noDimenDisplay : item.noDimenDisplay,
+            drawDisplay : item.drawDisplay,
-          trestleDisplay : item.trestleDisplay,
+            gridDisplay : item.gridDisplay,
-          coordiDisplay : item.coordiDisplay,
+            charDisplay : item.charDisplay,
-          drawConverDisplay : item.drawConverDisplay,
+            flowDisplay : item.flowDisplay,
-          onlyBorder : item.onlyBorder,
+            hallwayDimenDisplay : item.hallwayDimenDisplay,
-          lineHatch : item.lineHatch,
+            actualDimenDisplay : item.actualDimenDisplay,
-          allPainted : item.allPainted,
+            noDimenDisplay : item.noDimenDisplay,
-          adsorpRangeSetting : item.adsorpRangeSetting,
+            trestleDisplay : item.trestleDisplay,
+            coordiDisplay : item.coordiDisplay,
+            drawConverDisplay : item.drawConverDisplay,
+            onlyBorder : item.onlyBorder,
+            lineHatch : item.lineHatch,
+            allPainted : item.allPainted,
+            adsorpRangeSetting : item.adsorpRangeSetting,
+          }
+        })
+        
+        // 가공된 데이터를 상태에 저장
+        //setArrangeData(arrangeData);
+  
+        let assignDisplay = ""
+        let drawDisplay = ""
+        let gridDisplay = ""
+        let charDisplay = ""
+        let flowDisplay = ""
+        let hallwayDimenDisplay = ""
+        let actualDimenDisplay = ""
+        let noDimenDisplay = ""
+        let trestleDisplay = ""
+        let coordiDisplay = ""
+        let drawConverDisplay = ""
+        let display1 = []
+  
+        {arrangeData.map((gridYn1) => (
+          assignDisplay = gridYn1.assignDisplay,
+          drawDisplay = gridYn1.drawDisplay,
+          gridDisplay = gridYn1.gridDisplay,
+          charDisplay = gridYn1.charDisplay,
+          flowDisplay = gridYn1.flowDisplay,
+          hallwayDimenDisplay = gridYn1.hallwayDimenDisplay,
+          actualDimenDisplay = gridYn1.actualDimenDisplay,
+          noDimenDisplay = gridYn1.noDimenDisplay,
+          trestleDisplay = gridYn1.trestleDisplay,
+          coordiDisplay = gridYn1.coordiDisplay,
+          drawConverDisplay = gridYn1.drawConverDisplay
+        ))}
+        
+        display1 = [assignDisplay, drawDisplay, gridDisplay, charDisplay, flowDisplay, hallwayDimenDisplay, 
+          actualDimenDisplay, noDimenDisplay, trestleDisplay, coordiDisplay, drawConverDisplay]
+  
+        //console.log("display1 : ", display1)
+        //console.log("gridItems1 : ", gridItems1)
+  
+        //초기화
+        //배열 전체 삭제
+        selectedIndices1.splice(0,11)
+  
+        //화면 표시1 data
+        for (let i = 0; i < 11; i++) {
+          display1.forEach((data, i) => {
+  
+            if ('Y' == data) {
+              selectedIndices1[i] = i
+            }
+          })
         }
+        setSelectedIndices1(selectedIndices1)       
+               
+        let onlyBorder = ""
+        let lineHatch = ""
+        let allPainted = ""
+        let display2 = []
+  
+        {arrangeData.map((gridYn2) => (
+          onlyBorder = gridYn2.onlyBorder,
+          lineHatch = gridYn2.lineHatch,
+          allPainted = gridYn2.allPainted
+        ))}
+        
+        display2 = [onlyBorder, lineHatch, allPainted]
+  
+        //console.log("display2 : ", display2)
+        //console.log("gridItems2 : ", gridItems2)
+  
+        //초기화
+        //배열 전체 삭제
+        selectedIndices2.splice(0,3)
+  
+        //화면 표시2 data        
+        for (let i = 0; i < 3; i++) {
+          display2.forEach((data, i) => {
+            if ('Y' == data) {
+              selectedIndices2[i] = i
+            }
+          })
+        }
+        setSelectedIndices2(selectedIndices2)
+               
+        let adsorpRangeSetting = 0
+        {arrangeData.map((gridItems3) => (
+          adsorpRangeSetting = gridItems3.adsorpRangeSetting        
+        ))}
+  
+         //흡착 범위 설정 data
+        setSelectedIndices3(Number(adsorpRangeSetting))
+  
       })
+    } catch (error) {
+      console.error('Data fetching error:', error);
+    } finally {
       
-      // 가공된 데이터를 상태에 저장
+    }
-      //setArrangeData(arrangeData);
+  };
 
-      let assignDisplay = ""
+  // Canvas Setting 조회
-      let drawDisplay = ""
+  useEffect(() => {
-      let gridDisplay = ""
-      let charDisplay = ""
-      let flowDisplay = ""
-      let hallwayDimenDisplay = ""
-      let actualDimenDisplay = ""
-      let noDimenDisplay = ""
-      let trestleDisplay = ""
-      let coordiDisplay = ""
-      let drawConverDisplay = ""
-      let display1 = []
 
-      {arrangeData.map((gridYn1) => (
+    //console.log("useEffect objectNo : ", objectNo)
-        assignDisplay = gridYn1.assignDisplay,
-        drawDisplay = gridYn1.drawDisplay,
-        gridDisplay = gridYn1.gridDisplay,
-        charDisplay = gridYn1.charDisplay,
-        flowDisplay = gridYn1.flowDisplay,
-        hallwayDimenDisplay = gridYn1.hallwayDimenDisplay,
-        actualDimenDisplay = gridYn1.actualDimenDisplay,
-        noDimenDisplay = gridYn1.noDimenDisplay,
-        trestleDisplay = gridYn1.trestleDisplay,
-        coordiDisplay = gridYn1.coordiDisplay,
-        drawConverDisplay = gridYn1.drawConverDisplay
-      ))}
-      
-      display1 = [assignDisplay, drawDisplay, gridDisplay, charDisplay, flowDisplay, hallwayDimenDisplay, 
-        actualDimenDisplay, noDimenDisplay, trestleDisplay, coordiDisplay, drawConverDisplay]
 
-      //console.log("display1 : ", display1)
+    if (objectNo) {
-      //console.log("gridItems1 : ", gridItems1)
+      handleSelect(objectNo);
-
+    } else {
-      //초기화
+      alert('object_no를 입력하세요.');
-      //배열 전체 삭제
+    }
-      selectedIndices1.splice(0,11)
+    
-
-      //화면 표시1 data
-      for (let i = 0; i < 11; i++) {
-        display1.forEach((data, i) => {
-
-          if ('Y' == data) {
-            selectedIndices1[i] = i
-          }
-        })
-      }
-      setSelectedIndices1(selectedIndices1)       
-             
-      let onlyBorder = ""
-      let lineHatch = ""
-      let allPainted = ""
-      let display2 = []
-
-      {arrangeData.map((gridYn2) => (
-        onlyBorder = gridYn2.onlyBorder,
-        lineHatch = gridYn2.lineHatch,
-        allPainted = gridYn2.allPainted
-      ))}
-      
-      display2 = [onlyBorder, lineHatch, allPainted]
-
-      //console.log("display2 : ", display2)
-      //console.log("gridItems2 : ", gridItems2)
-
-      //초기화
-      // 배열 전체 삭제
-      selectedIndices2.splice(0,3)
-
-      //화면 표시2 data
-      for (let i = 0; i < 3; i++) {
-        display2.forEach((data, i) => {
-          if ('Y' == data) {
-            selectedIndices2[i] = i
-          }
-        })
-      }
-      setSelectedIndices2(selectedIndices2)       
-             
-      let adsorpRangeSetting = 0
-      {arrangeData.map((gridItems3) => (
-        adsorpRangeSetting = gridItems3.adsorpRangeSetting        
-      ))}
-
-      setSelectedIndices3(Number(adsorpRangeSetting))
-
-    })
   }, [])
+
+  // Canvas Setting 조회 버튼 클릭
+  const handleSelectButton = () => {
+
+    //console.log("handleSelectButton objectNo : ", objectNo)
+
+    if (objectNo) {
+      handleSelect(objectNo);
+    } else {
+      alert('object_no를 입력하세요.');
+    }
+    
+  };
+
+  // 입력 필드가 변경될 때 상태 업데이트
+  const handleInputChange = (event) => {
+    setObjectNo(event.target.value);
+  };
   
   return (
     <>
       <div className="container mx-auto p-4 m-4 border">
         <div align="right">
+          <input type="text" placeholder="Object No 입력" value={objectNo} onChange={handleInputChange}/>
+          <Button onClick={handleSelectButton}>조회</Button>
           <Button onClick={handleSubmit}>저장</Button>
         </div>
         <div className="container mx-auto p-4 m-4 border">