From 7eff8eefd8a40f938ef356b702c81af40436b20d Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Mon, 9 Sep 2024 14:51:14 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=20=EC=84=A4=EC=A0=95=20CRUD=20=ED=8C=9D=EC=97=85=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/[locale]/initSettingsModal/page.jsx | 16 ++ src/components/Headers.jsx | 1 + src/components/InitSettingsModal.jsx | 194 +++++++++++++++----- src/components/Settings.jsx | 82 +++++++++ 4 files changed, 252 insertions(+), 41 deletions(-) create mode 100644 src/app/[locale]/initSettingsModal/page.jsx diff --git a/src/app/[locale]/initSettingsModal/page.jsx b/src/app/[locale]/initSettingsModal/page.jsx new file mode 100644 index 00000000..a081ef47 --- /dev/null +++ b/src/app/[locale]/initSettingsModal/page.jsx @@ -0,0 +1,16 @@ +import Hero from '@/components/Hero' +import InitSettingsModal from '@/components/InitSettingsModal' +import { initCheck } from '@/util/session-util' + +export default async function InitSettingsModalPage() { + await initCheck() + + return ( + <> + +
+ +
+ + ) +} diff --git a/src/components/Headers.jsx b/src/components/Headers.jsx index 331e899c..02859c96 100644 --- a/src/components/Headers.jsx +++ b/src/components/Headers.jsx @@ -10,6 +10,7 @@ export default function Headers() {
Intro Playground + Basic Settings Canvas Settings Roof Roof2 diff --git a/src/components/InitSettingsModal.jsx b/src/components/InitSettingsModal.jsx index a79c7a9e..1deb81a7 100644 --- a/src/components/InitSettingsModal.jsx +++ b/src/components/InitSettingsModal.jsx @@ -1,22 +1,31 @@ +'use client' + import { useEffect, useState, memo, useCallback } from 'react' import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react' import { useRecoilState, useRecoilValue } from 'recoil' import { modalContent, modalState } from '@/store/modalAtom' import { canvasSettingState } from '@/store/canvasAtom' import { useAxios } from '@/hooks/useAxios' +import { get, post } from '@/lib/Axios' export default function InitSettingsModal(props) { + const [objectNo, setObjectNo] = useState('test123240909001') // 후에 삭제 필요 const [open, setOpen] = useRecoilState(modalState) const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState) const [roofMaterials, setRoofMaterials] = useState([]) const [basicSetting, setBasicSettings] = useState({ - type: '1', - inputType: '1', - angleType: 'slope', + roofDrawingSet: '1', + roofSizeSet: '1', + roofAngleSet: 'slope', roofs: [], }) - const { get, post } = useAxios() + const modelProps = { + open, + setOpen, + } + + //const { get, post } = useAxios() useEffect(() => { get({ url: '/api/roof-material/roof-material-infos' }).then((res) => { @@ -26,6 +35,41 @@ export default function InitSettingsModal(props) { setRoofMaterials(res) }) + get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => { + if (!res) return + + // 'roofs' 배열을 생성하여 각 항목을 추가 + const roofsRow = res.map((item) => { + return { + roofDrawingSet: String(item.roofDrawingSet), + roofSizeSet: String(item.roofSizeSet), + roofAngleSet: item.roofAngleSet, + } + }) + + 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, + } + }) + + // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음 + const patternData = { + roofDrawingSet: roofsRow[0].roofDrawingSet, // 첫 번째 항목의 값을 사용 + roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용 + roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용 + roofs: roofsArray, // 만들어진 roofs 배열 + } + + // 데이터 설정 + setBasicSettings({ ...patternData }) + }) + if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) { setBasicSettings({ ...canvasSetting }) } @@ -46,12 +90,12 @@ export default function InitSettingsModal(props) { //기본값 const newRoofSettings = { - id: basicSetting.roofs.length + 1, - roofId: '3', - width: '200', - height: '200', - gap: '0', - layout: 'parallel', + roofSeq: basicSetting.roofs.length + 1, + roofType: '3', + roofWidth: '200', + roofHeight: '200', + roofGap: '0', + roofLayout: 'parallel', } setBasicSettings((prevState) => ({ @@ -62,19 +106,45 @@ export default function InitSettingsModal(props) { //배열 값 변경 함수 const handleRoofSettings = (id, event) => { - const roof = basicSetting.roofs.map((roof, i) => (id === roof.id ? { ...roof, [event.target.name]: event.target.value } : roof)) + const roof = basicSetting.roofs.map((roof, i) => (id === roof.roofSeq ? { ...roof, [event.target.name]: event.target.value } : roof)) setBasicSettings((prevState) => ({ ...prevState, roofs: [...roof], })) } - const submitCanvasConfig = () => { - post({ url: '/api/canvas-config', data: basicSetting }).then((res) => { - if (!res) { - setCanvasSetting({ ...basicSetting }) - } - }) + //저장 + const submitCanvasConfig = async () => { + if (!objectNo) { + alert('object_no를 입력하세요.') + return + } + + const patternData = { + objectNo, + roofDrawingSet: basicSetting.roofDrawingSet, + roofSizeSet: basicSetting.roofSizeSet, + roofAngleSet: basicSetting.roofAngleSet, + roofMaterialsAddList: basicSetting.roofs, + } + await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }) + + //Recoil 설정 + setCanvasSetting({ ...basicSetting }) + + // 저장 후 재조회 + //await handleSelect() + } + + // 삭제버튼 클릭시 해당 요소 id를 targetId로 전달받음 + const onRemove = async (targetId) => { + console.log(targetId) + + setBasicSettings((prevState) => ({ + ...prevState, + roofs: prevState.roofs.filter((roof) => roof.roofSeq !== targetId), + })) + // setBasicSettings({ ...newRoofSettings }) // 삭제한 데이터 배열을 setData()에 상태를 변화시킴 } return ( @@ -84,7 +154,13 @@ export default function InitSettingsModal(props) {
- + 치수 입력에 의한 물건작성
@@ -92,7 +168,13 @@ export default function InitSettingsModal(props) {
- + 복사도 입력 실측값 입력 육지붕 @@ -102,13 +184,20 @@ export default function InitSettingsModal(props) {
- + 경사 각도
+
지붕재 추가(단위 : mm)
+ setObjectNo(e.target.value)} />
@@ -137,15 +227,16 @@ export default function InitSettingsModal(props) { const RoofSelectBox = (props) => { return (
+ 타입 : + 너비 : props.onChange(props.roof.id, e)} - /> - props.onChange(props.roof.id, e)} + onChange={(e) => props.onChange(props.roof.roofSeq, e)} /> mm - props.onChange(props.roof.id, e)} /> + 높이 : + props.onChange(props.roof.roofSeq, e)} + /> + mm + 서까래 간격 : + props.onChange(props.roof.roofSeq, e)} + /> mm
props.onChange(props.roof.id, e)} + onChange={(e) => props.onChange(props.roof.roofSeq, e)} > 병렬식 계단식
+
+ +
) } diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx index 2d6e5142..43288dbe 100644 --- a/src/components/Settings.jsx +++ b/src/components/Settings.jsx @@ -6,12 +6,57 @@ import { Button } from '@nextui-org/react' import { get, post } from '@/lib/Axios' import { useRecoilState } from 'recoil' import { customSettingsState } from '@/store/canvasAtom' +import { modalContent, modalState } from '@/store/modalAtom' + +import ColorPicker from './common/color-picker/ColorPicker' export default function Settings() { const [objectNo, setObjectNo] = useState('test123240829010') const [error, setError] = useState(null) const [customSettings, setCustomSettings] = useRecoilState(customSettingsState) + const [color, setColor] = useState('#ff0000') + + const [open, setOpen] = useRecoilState(modalState) + const [contents, setContent] = useRecoilState(modalContent) + + const handleSavePopup = () => { + console.log('color ', color) + } + + const handleClosePopup = () => { + setContent('') + setOpen(false) + console.log('colorSetting ', color) + } + + const colorSetting = ( + <> +
+

React ColorPicker

+ +
{color}
+
+

+ +

+ + ) + + const customStyles = { + overlay: { + backgroundColor: 'rgba(0,0,0,0.5)', + }, + content: { + width: '300px', + height: '400px', + margin: 'auto', + borderRadius: '4px', + boxShadow: '0 2px 4px rgba(0,0,0,0.2)', + padding: '20px', + }, + } + // 상태를 하나의 객체로 관리 const [settings, setSettings] = useState({ display1: Array(11).fill(false), // 화면 표시1 @@ -48,6 +93,21 @@ export default function Settings() { // 클릭 시 상태 변경 함수 const handleToggle = (type, index) => { + // '실선 그리드' 클릭 시 팝업 열기 + if (type === 'gridSettings' && gridItems.gridSettings[index] === '실선 그리드') { + //openGridPopup() + } + + // '그리드 색 설정' 클릭 시 팝업 열기 + if (type === 'gridSettings' && gridItems.gridSettings[index] === '그리드 색 설정') { + //setSelectedGridSetting(gridItems.gridSettings[index]) + //setIsPopupOpen(true) + //return prevSettings // 설정은 변경하지 않음 + + setOpen(true) + setContent({ ...colorSetting }) + } + setSettings((prevSettings) => { // prevSettings[type]이 배열인지 확인하고, 그렇지 않은 경우 빈 배열로 초기화 let updated = Array.isArray(prevSettings[type]) ? [...prevSettings[type]] : [] @@ -61,6 +121,24 @@ export default function Settings() { }) } + // '실선 그리드' 클릭 시 팝업을 열기 위한 함수 + const openGridPopup = () => { + const popupWidth = 500 + const popupHeight = 300 + + // 팝업 창 위치를 화면 중앙으로 조정하기 위해 계산 + const left = window.innerWidth / 2 - popupWidth / 2 + const top = window.innerHeight / 2 - popupHeight / 2 + + // 새 창 열기 + window + .open + //'./components/intro', // 팝업으로 띄울 페이지의 URL + //'_blank', // 새 창으로 열기 + //`width=${popupWidth},height=${popupHeight},top=${top},left=${left}`, // 크기와 위치 지정 + () + } + // Canvas Setting 조회 및 초기화 const handleSelect = async () => { try { @@ -221,6 +299,10 @@ export default function Settings() {
흡착점 ON

[그리드 설정]

+
+ +
{color}
+
{gridItems.gridSettings.map((item, index) => (