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']);
-  //화면 표시2
-  const [selectedIndices2, setSelectedIndices2] = useState(['N','N','N']);
-  //흡착 범위 설정 (default:극소)
-  const [selectedIndices3, setSelectedIndices3] = useState(0);
-  //그리드 설정
-  const [selectedIndices4, setSelectedIndices4] = useState([]);
+  
+  const [selectedIndices1, setSelectedIndices1] = useState(['N','N','N','N','N','N','N','N','N','N','N']);  //화면 표시1  
+  const [selectedIndices2, setSelectedIndices2] = useState(['N','N','N']);  //화면 표시2 
+  const [selectedIndices3, setSelectedIndices3] = useState(0);   //흡착 범위 설정 (default:극소)  
+  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,19 +160,31 @@ 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(() => {
-    get({ url: '/api/canvas-management/canvas-settings/by-object/test123240829010' }).then((res) => {    
+  const handleSelect = async () => {
+    //console.log("handleSelect objectNo : ", objectNo)
+
+    //화면 초기화 후 조회
+    handleClick1(0)
+    handleClick2(0)
+    handleClick3(0)
+    handleClick4(0)
+
+    try {
+      get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }).then((res) => {    
         const arrangeData = res.map((item) => {
   
-        console.log("item : ", item)
+          //console.log("item : ", item)
   
           return {
             objectNo : item.objectNo,
@@ -273,15 +292,54 @@ export default function Settings() {
           adsorpRangeSetting = gridItems3.adsorpRangeSetting        
         ))}
   
+         //흡착 범위 설정 data
         setSelectedIndices3(Number(adsorpRangeSetting))
   
       })
+    } catch (error) {
+      console.error('Data fetching error:', error);
+    } finally {
+      
+    }
+  };
+
+  // Canvas Setting 조회
+  useEffect(() => {
+
+    //console.log("useEffect objectNo : ", objectNo)
+
+    if (objectNo) {
+      handleSelect(objectNo);
+    } else {
+      alert('object_no를 입력하세요.');
+    }
+    
   }, [])
 
+  // 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">