배치면 설정 추가

public/drawTemplates/153302.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="600" height="300" viewBox="0 0 1280 875"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,875.000000) scale(0.100000,-0.100000)" fill="purple" stroke="#000000" stroke-width="10">
+
+<path d="M3403 7423 c-257 -762 -623 -1817 -636 -1829 -11 -11 -1264 -358
+-1817 -504 -405 -106 -540 -144 -539 -150 0 -3 30 -28 67 -55 117 -88 1826
+-1407 1841 -1421 12 -11 11 -104 -8 -646 -24 -697 -58 -1634 -64 -1770 -3 -49
+-3 -88 -1 -88 5 0 949 674 1528 1092 l479 346 61 -23 c34 -13 279 -104 546
+-203 267 -100 754 -282 1083 -405 328 -123 597 -219 597 -215 0 5 -54 189
+-119 411 -66 221 -192 652 -280 957 -88 305 -187 643 -219 751 l-58 195 304
+385 c168 211 503 636 745 944 242 308 447 568 455 578 8 9 12 20 8 24 -4 4
+-220 11 -479 15 -413 6 -1036 22 -1745 44 l-213 7 -427 636 c-235 350 -541
+808 -682 1018 -140 210 -258 383 -261 383 -3 0 -78 -215 -166 -477z"/>
+
+</g>
+</svg>

public/drawTemplates/shape21.svg

@@ -0,0 +1,4 @@
+<svg height="280" width="600" xmlns="http://www.w3.org/2000/svg">
+<polygon points="120,15 42,202 400,202 400,99 150,99 " style="fill:lime;stroke:purple;stroke-width:3" />
+</svg>
+

src/components/GridSettingsModal.jsx

@@ -7,7 +7,7 @@ import { fabric } from 'fabric'
 import { ColorPicker, useColor } from 'react-color-palette'
 import 'react-color-palette/css'
 
-export default function SettingsModal(props) {
+export default function GridSettingsModal(props) {
   const { canvasProps } = props
   const [isCustomGridSetting, setIsCustomGridSetting] = useState(true)
   const [gridCheckedValue, setGridCheckValue] = useState([])

src/components/InitSettingsModal.jsx

@@ -2,13 +2,21 @@ 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'
 
 export default function InitSettingsModal(props) {
   const [open, setOpen] = useRecoilState(modalState)
+  const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
   const [roofMaterials, setRoofMaterials] = useState([])
-  const [roofSettings, setRoofSettings] = useState([])
-  const { get } = useAxios()
+  const [basicSetting, setBasicSettings] = useState({
+    type: '1',
+    inputType: '1',
+    angleType: 'slope',
+    roofs: [],
+  })
+
+  const { get, post } = useAxios()
 
   useEffect(() => {
     get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
@@ -17,32 +25,56 @@ export default function InitSettingsModal(props) {
 
       setRoofMaterials(res)
     })
+
+    if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
+      setBasicSettings({ ...canvasSetting })
+    }
   }, [])
 
+  //기본 설정값 변경 함수
+  const handleBasicSetting = (event) => {
+    const newBasicSetting = { ...basicSetting, [event.target.name]: event.target.value }
+    setBasicSettings(newBasicSetting)
+  }
+
+  //배열 추가 함수
   const addRoofSetting = () => {
-    if (roofSettings.length === 4) {
-      alert('지붕재는 최대 4개까지 선택할 수 있습니다.')
+    if (basicSetting.roofs.length === 4) {
+      alert('지붕재는 최대 4종까지 선택할 수 있습니다.')
       return
     }
 
+    //기본값
     const newRoofSettings = {
-      id: roofSettings.length + 1,
-      roofId: '',
-      width: '',
-      height: '',
-      type: '',
-      gap: '',
-      layout: '병렬식',
+      id: basicSetting.roofs.length + 1,
+      roofId: '3',
+      width: '200',
+      height: '200',
+      gap: '0',
+      layout: 'parallel',
     }
 
-    setRoofSettings([...roofSettings, newRoofSettings])
+    setBasicSettings((prevState) => ({
+      ...prevState,
+      roofs: [...prevState.roofs, newRoofSettings],
+    }))
   }
 
+  //배열 값 변경 함수
   const handleRoofSettings = (id, event) => {
-    const newRoofSettings = [...roofSettings]
-    let setting = newRoofSettings.find((setting) => setting.id === id)
-    setting[event.target.name] = event.target.value
-    setRoofSettings(newRoofSettings)
+    const roof = basicSetting.roofs.map((roof, i) => (id === roof.id ? { ...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 })
+      }
+    })
   }
 
   return (
@@ -52,7 +84,7 @@ export default function InitSettingsModal(props) {
 
         <div className="mb-6">
           <div className="flex space-x-4">
-            <RadioGroup label="도면 작성방법" orientation="horizontal" defaultValue="1">
+            <RadioGroup label="도면 작성방법" name="type" orientation="horizontal" value={basicSetting.type} onChange={handleBasicSetting}>
               <Radio value="1">치수 입력에 의한 물건작성</Radio>
             </RadioGroup>
           </div>
@@ -60,7 +92,7 @@ export default function InitSettingsModal(props) {
 
         <div className="mb-6">
           <div className="flex space-x-4">
-            <RadioGroup label="치수 입력방법" orientation="horizontal" defaultValue="1">
+            <RadioGroup label="치수 입력방법" name="inputType" orientation="horizontal" value={basicSetting.inputType} onChange={handleBasicSetting}>
               <Radio value="1">복사도 입력</Radio>
               <Radio value="2">실측값 입력</Radio>
               <Radio value="3">육지붕</Radio>
@@ -70,7 +102,7 @@ export default function InitSettingsModal(props) {
 
         <div className="mb-6">
           <div className="flex space-x-4">
-            <RadioGroup label="지붕각도 설정" orientation="horizontal" defaultValue="slope">
+            <RadioGroup label="지붕각도 설정" name="angleType" orientation="horizontal" value={basicSetting.angleType} onChange={handleBasicSetting}>
               <Radio value="slope">경사</Radio>
               <Radio value="angle">각도</Radio>
             </RadioGroup>
@@ -84,12 +116,13 @@ export default function InitSettingsModal(props) {
           <span className="text-sm text-gray-500">※ 지붕재는 최대 4종까지 선택할 수 있습니다.</span>
         </div>
 
-        {roofSettings.map((setting, index) => {
-          return <RoofSelectBox roofMaterials={roofMaterials} setting={setting} key={index} onChange={handleRoofSettings} />
-        })}
+        {basicSetting.roofs &&
+          basicSetting.roofs.map((roof, index) => {
+            return <RoofSelectBox roofMaterials={roofMaterials} roof={roof} key={index} onChange={handleRoofSettings} />
+          })}
 
         <div className="flex gap-4 items-right">
-          <Button size="sm" color="secondary">
+          <Button size="sm" color="secondary" onClick={submitCanvasConfig}>
             저장
           </Button>
           <Button size="sm" onClick={() => setOpen(!open)}>
@@ -103,56 +136,49 @@ export default function InitSettingsModal(props) {
 
 const RoofSelectBox = (props) => {
   return (
-    <div className="mb-4 flex flex-wrap items-center space-x-4">
+    <div className="mb-4 flex flex-wrap items-center space-x-4" style={{ border: '1px solid black' }}>
       <Select
         aria-label="roofMaterial"
         className={'w-52'}
         name="roofId"
-        value={props.setting.roofId}
-        onChange={(e) => props.onChange(props.setting.id, e)}
+        onChange={(e) => props.onChange(props.roof.id, e)}
+        items={props.roofMaterials}
+        defaultSelectedKeys={props.roof.roofId ? props.roof.roofId : ''}
+        selectedKeys={props.roof.roofId}
+        value={props.roof.roofId}
       >
-        {props.roofMaterials.map((roofMaterial) => {
-          return (
-            <SelectItem key={roofMaterial.id} value={roofMaterial.id}>
-              {roofMaterial.name}
-            </SelectItem>
-          )
-        })}
+        {(roofMaterial) => (
+          <SelectItem key={roofMaterial.id} value={roofMaterial.id}>
+            {roofMaterial.name}
+          </SelectItem>
+        )}
       </Select>
       <Input
         type="text"
         name="width"
         placeholder="너비"
-        value={props.setting.width}
+        value={props.roof.width}
         className="w-24"
-        onChange={(e) => props.onChange(props.setting.id, e)}
+        onChange={(e) => props.onChange(props.roof.id, e)}
       />
-      mm
       <Input
         type="text"
         name="height"
         placeholder="높이"
-        value={props.setting.height}
+        value={props.roof.height}
         className="w-24"
-        onChange={(e) => props.onChange(props.setting.id, e)}
+        onChange={(e) => props.onChange(props.roof.id, e)}
       />
       mm
-      <Input
-        type="text"
-        name="gap"
-        placeholder="간격"
-        value={props.setting.gap}
-        className="w-24"
-        onChange={(e) => props.onChange(props.setting.id, e)}
-      />
+      <Input type="text" name="gap" placeholder="간격" value={props.roof.gap} className="w-24" onChange={(e) => props.onChange(props.roof.id, e)} />
       mm
       <div className="flex space-x-4">
         <RadioGroup
           orientation="horizontal"
           name="layout"
-          value={props.setting.layout}
+          value={props.roof.layout}
           defaultValue="parallel"
-          onChange={(e) => props.onChange(props.setting.id, e)}
+          onChange={(e) => props.onChange(props.roof.id, e)}
         >
           <Radio value="parallel">병렬식</Radio>
           <Radio value="cascade">계단식</Radio>

src/components/Roof2.jsx

@@ -107,6 +107,8 @@ export default function Roof2(props) {
 
   useEffect(() => {
     get({ url: `/api/canvas-management/canvas-statuses/by-object/test123240822001` }).then((res) => {
+      console.log(res)
+
       const arrangeData = res.map((item) => {
         console.log(item.canvasStatus.replace(/##/g, '"').replace(/\\/g, ''))
         const test = item.canvasStatus.replace(/##/g, '"').replace(/\\/g, '')
@@ -1724,6 +1726,14 @@ export default function Roof2(props) {
       {canvas && (
         <>
           <div className=" my-8 w-full text:pretty">
+            <Button
+              className="m-1 p-2"
+              onClick={() => {
+                svgLoad()
+              }}
+            >
+              svg로딩
+            </Button>
             <Button
               className="m-1 p-2"
               onClick={() => {

src/store/canvasAtom.js

@@ -105,5 +105,10 @@ export const horiGuideLinesState = atom({
 export const vertGuideLinesState = atom({
   key: 'vertGuideLines',
   default: [],
+})
+
+export const canvasSettingState = atom({
+  key: 'canvasSetting',
+  default: {},
   dangerouslyAllowMutability: true,
 })