컨텍스트 유틸 삭제 및 페이지로 변경, 그리드 설정 컴포넌트 생성

src/components/Roof2.jsx

@@ -3,7 +3,7 @@
 import { useCanvas } from '@/hooks/useCanvas'
 import { useEffect, useState, useRef } from 'react'
 import { Mode, useMode } from '@/hooks/useMode'
-import { Button } from '@nextui-org/react'
+import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input } from '@nextui-org/react'
 import RangeSlider from './ui/RangeSlider'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import {
@@ -21,7 +21,10 @@ import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import ThumbnailList from './ui/ThumbnailLIst'
-import CanvasWithContextMenu from '@/util/context-util'
+// import CanvasWithContextMenu from '@/util/context-util'
+import QContextMenu from './common/context-menu/QContextMenu'
+import { modalContent, modalState } from '@/store/modalAtom'
+import SettingsModal from './SettingsModal'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
@@ -55,6 +58,15 @@ export default function Roof2() {
 
   const wall = useRecoilValue(wallState)
 
+  const [open, setOpen] = useRecoilState(modalState)
+  const [contents, setContent] = useRecoilState(modalContent)
+
+  // const gridHandleClick = (e) => {
+  //   console.log(e !== 'custom')
+
+  //   setIsCustomGridSetting(e !== 'custom')
+  // }
+
   //canvas 썸네일
   const [thumbnails, setThumbnails] = useState([])
   const thumbnailProps = {
@@ -530,6 +542,16 @@ export default function Roof2() {
       {canvas && (
         <>
           <div className=" my-8 w-full text:pretty">
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`}
+              onClick={() => {
+                setContent(<SettingsModal />)
+                setOpen(true)
+              }}
+            >
+              그리드 설정
+            </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`} onClick={fillCellInPolygon}>
               모드 DEFAULT
             </Button>
@@ -705,7 +727,7 @@ export default function Roof2() {
       <ThumbnailList {...thumbnailProps} />
       <div className="flex justify-start my-8 mx-2 w-full">
         <canvas ref={canvasRef} id="canvas" style={{ border: '1px solid black' }} />
-        {canvas !== undefined && <CanvasWithContextMenu ref={canvasRef} canvasProps={canvas} />}
+        {canvas !== undefined && <QContextMenu contextRef={canvasRef} canvasProps={canvas} />}
       </div>
     </>
   )

src/components/SettingsModal.jsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react'
+import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input } from '@nextui-org/react'
+
+export default function SettingsModal() {
+  const [isCustomGridSetting, setIsCustomGridSetting] = useState(true)
+  const [ratioValue, setRatioValue] = useState('원치수')
+
+  useEffect(() => {
+    setIsCustomGridSetting(ratioValue !== 'custom')
+  }, [ratioValue])
+
+  return (
+    <>
+      <div>
+        <h3 style={{ margin: '0', fontSize: '16px', marginBottom: '10px' }}>점 그리드 설정</h3>
+        <label style={{ display: 'block', marginBottom: '5px' }}>
+          <CheckboxGroup label="그리드 설정" defaultValue={[]}>
+            <Checkbox value="dot">점 그리드</Checkbox>
+            <Checkbox value="line">점선 그리드</Checkbox>
+          </CheckboxGroup>
+        </label>
+        <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+          <Input type="number" label="모듈" />
+          mm
+        </div>
+
+        <p className="text-default-500 text-small">Selected: {ratioValue}</p>
+
+        <RadioGroup label="비율 설정" onValueChange={setRatioValue}>
+          <Radio value="원치수">원치수</Radio>
+          <Radio value="1/2">1/2</Radio>
+          <Radio value="1/4">1/4</Radio>
+          <Radio value="1/10">1/10</Radio>
+          <Radio value="custom">임의간격</Radio>
+        </RadioGroup>
+        <Checkbox value="linked" isDisabled={isCustomGridSetting}>
+          종횡연동
+        </Checkbox>
+        <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+          <Input type="number" label="가로간격" min={0} isDisabled={isCustomGridSetting} />
+          mm
+        </div>
+        <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+          <Input type="number" label="세로간격" min={0} isDisabled={isCustomGridSetting} />
+          mm
+        </div>
+        <div className="flex gap-4 items-center">
+          <Button size="sm">초기화</Button>
+          <Button size="sm" color="secondary">
+            저장
+          </Button>
+          <Button size="sm">취소</Button>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/common/context-menu/QContextMenu.jsx

@@ -1,10 +1,15 @@
-import React, { useState, useEffect, forwardRef, useContext } from 'react'
+'use client'
+import { useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
 
-const CanvasWithContextMenu = forwardRef(({ canvasProps }, ref) => {
+export default function QContextMenu(props) {
+  const { contextRef, canvasProps } = props
+
+  //   const children = useRecoilValue(modalContent)
   const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
 
   useEffect(() => {
-    if (!ref.current) return
+    if (!contextRef.current) return
 
     const handleContextMenu = (e) => {
       e.preventDefault() //기존 contextmenu 막고
@@ -34,7 +39,7 @@ const CanvasWithContextMenu = forwardRef(({ canvasProps }, ref) => {
       document.removeEventListener('click', handleClick)
       document.removeEventListener('click', handleOutsideClick)
     }
-  }, [ref, contextMenu])
+  }, [contextRef, contextMenu])
 
   const handleMenuClick = (option) => {
     alert(`option ${option} clicked`)
@@ -60,6 +65,4 @@ const CanvasWithContextMenu = forwardRef(({ canvasProps }, ref) => {
       )}
     </>
   )
-})
-
-export default CanvasWithContextMenu
+}