그리드 설정 수정 및 DB 컬럼 추가/타입 변경

src/components/Settings.jsx

@@ -1,99 +1,127 @@
 'use client'
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react'
-import { Button } from '@nextui-org/react';
+import { Button } from '@nextui-org/react'
 
-import { get, post } from '@/lib/Axios';
+import { get, post } from '@/lib/Axios'
+import { useRecoilState } from 'recoil'
+import { customSettingsState } from '@/store/canvasAtom'
 
 export default function Settings() {
-  const [objectNo, setObjectNo] = useState('test123240829010');
+  const [objectNo, setObjectNo] = useState('test123240829010')
-  const [error, setError] = useState(null);
+  const [error, setError] = useState(null)
+  const [customSettings, setCustomSettings] = useRecoilState(customSettingsState)
 
   // 상태를 하나의 객체로 관리
   const [settings, setSettings] = useState({
-    display1: Array(11).fill('N'), // 화면 표시1
+    display1: Array(11).fill(false), // 화면 표시1
-    display2: Array(3).fill('N'),  // 화면 표시2
+    display2: Array(3).fill(false), // 화면 표시2
-    rangeSetting: 0,               // 흡착 범위 설정
+    rangeSetting: 0, // 흡착 범위 설정
-    gridSettings: []               // 그리드 설정
+    gridSettings: Array(5).fill(false), // 그리드 설정
-  });
+  })
 
   const gridItems = {
     display1: [
-      '할당 표시', '도면 표시', '그리드 표시', '문자 표시', '흐름방향 표시', 
+      '할당 표시',
-      '복도치수 표시', '실제치수 표시', '치수 표시 없음', '가대 표시', 
+      '도면 표시',
-      '좌표 표시', '도면전환 표시'
+      '그리드 표시',
+      '문자 표시',
+      '흐름방향 표시',
+      '복도치수 표시',
+      '실제치수 표시',
+      '치수 표시 없음',
+      '가대 표시',
+      '좌표 표시',
+      '도면전환 표시',
     ],
     display2: ['테두리만', '라인해치', 'All Painted'],
     rangeSetting: ['극소', '소', '중', '대'],
-    gridSettings: ['임의 그리드', '실선 그리드', '점 그리드', '그리드 색 설정', '흡착점 추가']
+    gridSettings: ['임의 그리드', '실선 그리드', '점 그리드', '그리드 색 설정', '흡착점 추가'],
-  };
+  }
+
+  // 초기 조회
+  useEffect(() => {
+    if (!objectNo) {
+      alert('object_no를 입력하세요.')
+    }
+  }, [])
 
   // 클릭 시 상태 변경 함수
   const handleToggle = (type, index) => {
-        
     setSettings((prevSettings) => {
-
       // prevSettings[type]이 배열인지 확인하고, 그렇지 않은 경우 빈 배열로 초기화
-      let updated = Array.isArray(prevSettings[type]) ? [...prevSettings[type]] : [];
+      let updated = Array.isArray(prevSettings[type]) ? [...prevSettings[type]] : []
 
       if (type === 'rangeSetting') {
-        return { ...prevSettings, [type]: index };
+        return { ...prevSettings, [type]: index }
       }
 
-      updated[index] = updated[index] === 'N' ? 'Y' : 'N';
+      updated[index] = updated[index] === false ? true : false
-      return { ...prevSettings, [type]: updated };
+      return { ...prevSettings, [type]: updated }
-    });
+    })
-  };
+  }
 
   // Canvas Setting 조회 및 초기화
   const handleSelect = async () => {
     try {
-      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` });
+      if (!objectNo) {
-
+        alert('object_no를 입력하세요.')
-      // 데이터가 없는 경우
+        return
-      if (!res || res.length === 0) {
-
-        console.warn('조회 결과가 없습니다.');
-        // 기본값을 설정하거나 사용자에게 알림 표시
-        setSettings({
-          display1: Array(11).fill('N'), // 화면 표시1 기본값
-          display2: Array(3).fill('N'),  // 화면 표시2 기본값
-          rangeSetting: 0,               // 흡착 범위 설정 기본값
-          gridSettings: []               // 그리드 설정 초기화
-        });
-
-        alert('조회된 데이터가 없습니다. 기본 설정이 적용됩니다.');
-        return; // 이후 코드 실행을 중단
       }
 
-      const data = res.map((item) => ({
+      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+
+      // 데이터가 없는 경우
+      if (!res) {
+        console.warn('조회 결과가 없습니다.')
+        // 기본값을 설정하거나 사용자에게 알림 표시
+        setSettings({
+          display1: Array(11).fill(false), // 화면 표시1 기본값
+          display2: Array(3).fill(false), // 화면 표시2 기본값
+          rangeSetting: 0, // 흡착 범위 설정 기본값
+          gridSettings: Array(5).fill(false), // 그리드 설정 기본값
+        })
+
+        alert('조회된 데이터가 없습니다. 기본 설정이 적용됩니다.')
+        return // 이후 코드 실행을 중단
+      }
+
+      const data = {
         display1: [
-          item.assignDisplay, item.drawDisplay, item.gridDisplay, item.charDisplay, item.flowDisplay,
+          res.assignDisplay,
-          item.hallwayDimenDisplay, item.actualDimenDisplay, item.noDimenDisplay, item.trestleDisplay,
+          res.drawDisplay,
-          item.coordiDisplay, item.drawConverDisplay
+          res.gridDisplay,
+          res.charDisplay,
+          res.flowDisplay,
+          res.hallwayDimenDisplay,
+          res.actualDimenDisplay,
+          res.noDimenDisplay,
+          res.trestleDisplay,
+          res.coordiDisplay,
+          res.drawConverDisplay,
         ],
-        display2: [item.onlyBorder, item.lineHatch, item.allPainted],
+        display2: [res.onlyBorder, res.lineHatch, res.allPainted],
-        rangeSetting: Number(item.adsorpRangeSetting)
+        rangeSetting: res.adsorpRangeSetting,
-      }));
+        gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd],
-      
+      }
+
+      // 데이터 설정
       setSettings({
-        display1: data[0].display1,
+        display1: data.display1,
-        display2: data[0].display2,
+        display2: data.display2,
-        rangeSetting: data[0].rangeSetting,
+        rangeSetting: data.rangeSetting,
-        gridSettings: [] // 초기화
+        gridSettings: data.gridSettings,
-      });
+      })
     } catch (error) {
-      console.error('Data fetching error:', error);
+      console.error('Data fetching error:', error)
     }
-  };
+  }
 
   // Canvas Setting 저장
-  const handleSubmit = async (e) => {
+  const handleSubmit = async () => {
-    e.preventDefault();
-
     if (!objectNo) {
-      alert('object_no를 입력하세요.');
+      alert('object_no를 입력하세요.')
-      return;
+      return
     }
 
     const patternData = {
@@ -112,23 +140,24 @@ export default function Settings() {
       onlyBorder: settings.display2[0],
       lineHatch: settings.display2[1],
       allPainted: settings.display2[2],
-      adsorpRangeSetting: String(settings.rangeSetting)
+      adsorpRangeSetting: settings.rangeSetting,
-    };
+      randomGrid: settings.gridSettings[0],
+      solidGrid: settings.gridSettings[1],
+      dotGrid: settings.gridSettings[2],
+      gridColorSet: settings.gridSettings[3],
+      adsorpPointAdd: settings.gridSettings[4],
+    }
 
-    await post({ url: `/api/canvas-management/canvas-settings`, data: patternData });
+    console.log('patternData', patternData)
+
+    await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
+
+    //Recoil 설정
+    setCustomSettings({ ...patternData })
 
     // 저장 후 재조회
-    handleSelect();
+    await handleSelect()
-  };
+  }
-
-  // 초기 조회
-  useEffect(() => {
-    if (objectNo) {
-      handleSelect(objectNo);
-    } else {
-      alert('object_no를 입력하세요.');
-    }
-  }, []);
 
   return (
     <>
@@ -145,7 +174,7 @@ export default function Settings() {
             {gridItems.display1.map((item, index) => (
               <div
                 key={index}
-                className={`grid-item ${settings.display1[index] === 'Y' ? 'selected' : 'unselected'}`}
+                className={`grid-item ${settings.display1[index] === true ? 'selected' : 'unselected'}`}
                 onClick={() => handleToggle('display1', index)}
               >
                 {settings.display1[index]} {item}
@@ -158,7 +187,7 @@ export default function Settings() {
             {gridItems.display2.map((item, index) => (
               <div
                 key={index}
-                className={`grid-item ${settings.display2[index] === 'Y' ? 'selected' : 'unselected'}`}
+                className={`grid-item ${settings.display2[index] === true ? 'selected' : 'unselected'}`}
                 onClick={() => handleToggle('display2', index)}
               >
                 {settings.display2[index]} {item}
@@ -166,6 +195,14 @@ export default function Settings() {
             ))}
           </div>
           <h1>[글꼴/도면크기 설정]</h1>
+          <h1>* 글꼴 및 크기 변경</h1>
+          <div className="grid-container2">
+            <div className="grid-item">문자 글꼴 변경</div>
+            <div className="grid-item">흐름방향 글꼴 변경</div>
+            <div className="grid-item">치수 글꼴 변경</div>
+            <div className="grid-item">회로번호 글꼴 변경</div>
+          </div>
+          ``
           <h1>* 흡착 범위 설정</h1>
           <div className="grid-container4">
             {gridItems.rangeSetting.map((item, index) => (
@@ -174,24 +211,29 @@ export default function Settings() {
                 className={`grid-item ${settings.rangeSetting === index ? 'selected' : 'unselected'}`}
                 onClick={() => handleToggle('rangeSetting', index)}
               >
-                {settings.rangeSetting === index ? 'Y' : 'N'} {item}
+                {item}
               </div>
             ))}
           </div>
+          <div className="grid-container3">
+            <div className="grid-item">치수선 설정</div>
+            <div className="grid-item">도면 크기 설정</div>
+            <div className="grid-item">흡착점 ON</div>
+          </div>
           <h1>[그리드 설정]</h1>
-          <div className="grid-container2 border">
+          <div className="grid-container2">
             {gridItems.gridSettings.map((item, index) => (
               <div
                 key={index}
-                className={`grid-item ${settings.gridSettings.includes(index) ? 'selected' : 'unselected'}`}
+                className={`grid-item ${settings.gridSettings[index] === true ? 'selected' : 'unselected'}`}
                 onClick={() => handleToggle('gridSettings', index)}
               >
-                {settings.gridSettings.includes(index) ? 'Y' : 'N'} {item}
+                {settings.gridSettings[index]} {item}
               </div>
             ))}
           </div>
         </div>
       </div>
     </>
-  );
+  )
-}
+}

src/store/canvasAtom.js

@@ -119,3 +119,10 @@ export const currentPatternState = atom({
   default: {},
   dangerouslyAllowMutability: true,
 })
+
+// 설정
+export const customSettingsState = atom({
+  key: 'customSettings',
+  default: {},
+  dangerouslyAllowMutability: true,
+})