diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx index 2d8eaeda..2d6e5142 100644 --- a/src/components/Settings.jsx +++ b/src/components/Settings.jsx @@ -1,99 +1,127 @@ 'use client' -import React, { useEffect, useState } from 'react'; -import { Button } from '@nextui-org/react'; +import React, { useEffect, useState } from '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 [error, setError] = useState(null); + const [objectNo, setObjectNo] = useState('test123240829010') + const [error, setError] = useState(null) + const [customSettings, setCustomSettings] = useRecoilState(customSettingsState) // 상태를 하나의 객체로 관리 const [settings, setSettings] = useState({ - display1: Array(11).fill('N'), // 화면 표시1 - display2: Array(3).fill('N'), // 화면 표시2 - rangeSetting: 0, // 흡착 범위 설정 - gridSettings: [] // 그리드 설정 - }); + display1: Array(11).fill(false), // 화면 표시1 + display2: Array(3).fill(false), // 화면 표시2 + rangeSetting: 0, // 흡착 범위 설정 + 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'; - return { ...prevSettings, [type]: updated }; - }); - }; + updated[index] = updated[index] === false ? true : false + return { ...prevSettings, [type]: updated } + }) + } // Canvas Setting 조회 및 초기화 const handleSelect = async () => { try { - const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }); - - // 데이터가 없는 경우 - 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; // 이후 코드 실행을 중단 + if (!objectNo) { + alert('object_no를 입력하세요.') + 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, - item.hallwayDimenDisplay, item.actualDimenDisplay, item.noDimenDisplay, item.trestleDisplay, - item.coordiDisplay, item.drawConverDisplay + res.assignDisplay, + res.drawDisplay, + 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], - rangeSetting: Number(item.adsorpRangeSetting) - })); - + display2: [res.onlyBorder, res.lineHatch, res.allPainted], + rangeSetting: res.adsorpRangeSetting, + gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd], + } + + // 데이터 설정 setSettings({ - display1: data[0].display1, - display2: data[0].display2, - rangeSetting: data[0].rangeSetting, - gridSettings: [] // 초기화 - }); + display1: data.display1, + display2: data.display2, + rangeSetting: data.rangeSetting, + gridSettings: data.gridSettings, + }) } catch (error) { - console.error('Data fetching error:', error); + console.error('Data fetching error:', error) } - }; + } // Canvas Setting 저장 - const handleSubmit = async (e) => { - e.preventDefault(); - + const handleSubmit = async () => { if (!objectNo) { - alert('object_no를 입력하세요.'); - return; + alert('object_no를 입력하세요.') + 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(); - }; - - // 초기 조회 - useEffect(() => { - if (objectNo) { - handleSelect(objectNo); - } else { - alert('object_no를 입력하세요.'); - } - }, []); + await handleSelect() + } return ( <> @@ -145,7 +174,7 @@ export default function Settings() { {gridItems.display1.map((item, index) => (
handleToggle('display1', index)} > {settings.display1[index]} {item} @@ -158,7 +187,7 @@ export default function Settings() { {gridItems.display2.map((item, index) => (
handleToggle('display2', index)} > {settings.display2[index]} {item} @@ -166,6 +195,14 @@ export default function Settings() { ))}

[글꼴/도면크기 설정]

+

* 글꼴 및 크기 변경

+
+
문자 글꼴 변경
+
흐름방향 글꼴 변경
+
치수 글꼴 변경
+
회로번호 글꼴 변경
+
+ ``

* 흡착 범위 설정

{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}
))}
+
+
치수선 설정
+
도면 크기 설정
+
흡착점 ON
+

[그리드 설정]

-
+
{gridItems.gridSettings.map((item, index) => (
handleToggle('gridSettings', index)} > - {settings.gridSettings.includes(index) ? 'Y' : 'N'} {item} + {settings.gridSettings[index]} {item}
))}
- ); -} \ No newline at end of file + ) +} diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index 58bc626b..ed90c2e7 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -119,3 +119,10 @@ export const currentPatternState = atom({ default: {}, dangerouslyAllowMutability: true, }) + +// 설정 +export const customSettingsState = atom({ + key: 'customSettings', + default: {}, + dangerouslyAllowMutability: true, +})