초기셋팅 화면 작업

src/components/GridSettingsModal.jsx

@@ -6,7 +6,6 @@ import { guideLineState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
 import { ColorPicker, useColor } from 'react-color-palette'
 import 'react-color-palette/css'
-import { withRouter } from 'next/router'
 
 export default function SettingsModal(props) {
   const { canvasProps } = props

src/components/InitSettingsModal.jsx

@@ -0,0 +1,163 @@
+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 { useAxios } from '@/hooks/useAxios'
+
+export default function InitSettingsModal(props) {
+  const [open, setOpen] = useRecoilState(modalState)
+  const [roofMaterials, setRoofMaterials] = useState([])
+  const [roofSettings, setRoofSettings] = useState([])
+  const { get } = useAxios()
+
+  useEffect(() => {
+    get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
+      //TODO: error handling
+      if (!res) return
+
+      setRoofMaterials(res)
+    })
+  }, [])
+
+  const addRoofSetting = () => {
+    if (roofSettings.length === 4) {
+      alert('지붕재는 최대 4개까지 선택할 수 있습니다.')
+      return
+    }
+
+    const newRoofSettings = {
+      id: roofSettings.length + 1,
+      roofId: '',
+      width: '',
+      height: '',
+      type: '',
+      gap: '',
+      layout: '병렬식',
+    }
+
+    setRoofSettings([...roofSettings, 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)
+  }
+
+  return (
+    <>
+      <div className="container mx-auto mt-10 p-6 bg-white shadow-lg rounded-lg">
+        <div className="text-lg font-semibold mb-4">배치면 초기설정</div>
+
+        <div className="mb-6">
+          <div className="flex space-x-4">
+            <RadioGroup label="도면 작성방법" orientation="horizontal" defaultValue="1">
+              <Radio value="1">치수 입력에 의한 물건작성</Radio>
+            </RadioGroup>
+          </div>
+        </div>
+
+        <div className="mb-6">
+          <div className="flex space-x-4">
+            <RadioGroup label="치수 입력방법" orientation="horizontal" defaultValue="1">
+              <Radio value="1">복사도 입력</Radio>
+              <Radio value="2">실측값 입력</Radio>
+              <Radio value="3">육지붕</Radio>
+            </RadioGroup>
+          </div>
+        </div>
+
+        <div className="mb-6">
+          <div className="flex space-x-4">
+            <RadioGroup label="지붕각도 설정" orientation="horizontal" defaultValue="slope">
+              <Radio value="slope">경사</Radio>
+              <Radio value="angle">각도</Radio>
+            </RadioGroup>
+          </div>
+        </div>
+
+        <div className="flex items-center mb-4">
+          <button className="px-3 py-1 bg-blue-500 text-white rounded mr-3" onClick={addRoofSetting}>
+            Add
+          </button>
+          <span className="text-sm text-gray-500">※ 지붕재는 최대 4종까지 선택할 수 있습니다.</span>
+        </div>
+
+        {roofSettings.map((setting, index) => {
+          return <RoofSelectBox roofMaterials={roofMaterials} setting={setting} key={index} onChange={handleRoofSettings} />
+        })}
+
+        <div className="flex gap-4 items-right">
+          <Button size="sm" color="secondary">
+            저장
+          </Button>
+          <Button size="sm" onClick={() => setOpen(!open)}>
+            취소
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const RoofSelectBox = (props) => {
+  return (
+    <div className="mb-4 flex flex-wrap items-center space-x-4">
+      <Select
+        aria-label="roofMaterial"
+        className={'w-52'}
+        name="roofId"
+        value={props.setting.roofId}
+        onChange={(e) => props.onChange(props.setting.id, e)}
+      >
+        {props.roofMaterials.map((roofMaterial) => {
+          return (
+            <SelectItem key={roofMaterial.id} value={roofMaterial.id}>
+              {roofMaterial.name}
+            </SelectItem>
+          )
+        })}
+      </Select>
+      <Input
+        type="text"
+        name="width"
+        placeholder="너비"
+        value={props.setting.width}
+        className="w-24"
+        onChange={(e) => props.onChange(props.setting.id, e)}
+      />
+      mm
+      <Input
+        type="text"
+        name="height"
+        placeholder="높이"
+        value={props.setting.height}
+        className="w-24"
+        onChange={(e) => props.onChange(props.setting.id, e)}
+      />
+      mm
+      <Input
+        type="text"
+        name="gap"
+        placeholder="간격"
+        value={props.setting.gap}
+        className="w-24"
+        onChange={(e) => props.onChange(props.setting.id, e)}
+      />
+      mm
+      <div className="flex space-x-4">
+        <RadioGroup
+          orientation="horizontal"
+          name="layout"
+          value={props.setting.layout}
+          defaultValue="parallel"
+          onChange={(e) => props.onChange(props.setting.id, e)}
+        >
+          <Radio value="parallel">병렬식</Radio>
+          <Radio value="cascade">계단식</Radio>
+        </RadioGroup>
+      </div>
+    </div>
+  )
+}

src/components/Roof2.jsx

@@ -26,11 +26,13 @@ import { QPolygon } from '@/components/fabric/QPolygon'
 import ThumbnailList from './ui/ThumbnailLIst'
 import QContextMenu from './common/context-menu/QContextMenu'
 import { modalContent, modalState } from '@/store/modalAtom'
-import SettingsModal from './SettingsModal'
 import { useAxios } from '@/hooks/useAxios'
 import QPolygonContextMenu from '@/components/common/context-menu/QPolygonContextMenu'
 import QLineContextMenu from '@/components/common/context-menu/QLineContextMenu'
 
+import InitSettingsModal from './InitSettingsModal'
+import GridSettingsModal from './GridSettingsModal'
+
 export default function Roof2(props) {
   const { name, userId, email, isLoggedIn } = props
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
@@ -578,7 +580,16 @@ export default function Roof2(props) {
             <Button
               className="m-1 p-2"
               onClick={() => {
-                setContent(<SettingsModal canvasProps={canvas} />)
+                setContent(<InitSettingsModal canvasProps={canvas} />)
+                setOpen(true)
+              }}
+            >
+              배치면 초기설정
+            </Button>
+            <Button
+              className="m-1 p-2"
+              onClick={() => {
+                setContent(<GridSettingsModal canvasProps={canvas} />)
                 setOpen(true)
               }}
             >