그리드 recoil 추가

src/components/Roof2.jsx

@@ -26,6 +26,7 @@ import ThumbnailList from './ui/ThumbnailLIst'
 import QContextMenu from './common/context-menu/QContextMenu'
 import { modalContent, modalState } from '@/store/modalAtom'
 import SettingsModal from './SettingsModal'
+import { get } from '@/lib/Axios'
 
 export default function Roof2(props) {
   const { name, userId, email, isLoggedIn } = props
@@ -63,6 +64,8 @@ export default function Roof2(props) {
   const [open, setOpen] = useRecoilState(modalState)
   const [contents, setContent] = useRecoilState(modalContent)
 
+  const [scale, setScale] = useState(1)
+
   //canvas 썸네일
   const [thumbnails, setThumbnails] = useState([])
   const thumbnailProps = {

src/components/SettingsModal.jsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input } from '@nextui-org/react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { modalContent, modalState } from '@/store/modalAtom'
+import { guideLineState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
 
 export default function SettingsModal(props) {
@@ -12,12 +13,15 @@ export default function SettingsModal(props) {
   const moduleLength = useRef(90) //모듈 mm 길이 입력
 
   const [open, setOpen] = useRecoilState(modalState)
+  const [guideLine, setGuideLine] = useRecoilState(guideLineState)
 
   useEffect(() => {
     setIsCustomGridSetting(ratioValue !== 'custom')
   }, [ratioValue])
 
   const drawGridSettings = () => {
+    const gridSettingArray = []
+
     if (gridCheckedValue.includes('line')) {
       // fabric.GuideRect = fabric.util.createClass(fabric.Rect, {
       //   _render: function (ctx) {
@@ -98,20 +102,15 @@ export default function SettingsModal(props) {
         verticalLineArray.push(verticalLine)
       }
       canvasProps.renderAll()
-      const snapDistance = 10
 
-      console.log('horizontalLineArray', horizontalLineArray)
+      const snapDistance = 10
 
       canvasProps.on('mouse:move', function (e) {
         let mouseObj = e
         const mouseCursorX = e.pointer.x
         const mouseCursorY = e.pointer.y
 
-        console.log(`mouseCursorX : ${mouseCursorX}, mouseCursorY : ${mouseCursorY}`)
-
         horizontalLineArray.forEach((line) => {
-          console.log()
-
           if (Math.abs(mouseCursorY - line.y1) < snapDistance) {
             mouseObj.x = mouseCursorX
             mouseObj.y = line.y1
@@ -154,11 +153,19 @@ export default function SettingsModal(props) {
       //     }
       //   })
       // })
+
+      const recoilObj = {
+        guideMode: 'guideLine',
+        horizontalLineArray,
+        verticalLineArray,
+        moduleLength: moduleLength.current.value,
+      }
+      gridSettingArray.push(recoilObj)
     }
 
     if (gridCheckedValue.includes('dot')) {
       const circle = new fabric.Circle({
-        radius: 5,
+        radius: 2,
         fill: 'red',
         originX: 'center',
         originY: 'center',
@@ -204,9 +211,16 @@ export default function SettingsModal(props) {
       )
       canvasProps.add(backgroundPolygon)
       canvasProps.renderAll()
-    }
 
+      const recoilObj = {
+        guideMode: 'guideDot',
+        moduleLength: moduleLength.current.value,
+      }
+
+      gridSettingArray.push(recoilObj)
+    }
     canvasProps.renderAll()
+    setGuideLine(gridSettingArray)
   }
 
   return (

src/hooks/useMode.js

@@ -23,6 +23,7 @@ import {
   sortedPolygonArray,
   templateTypeState,
   wallState,
+  guideLineState,
 } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
@@ -64,6 +65,8 @@ export function useMode() {
   const compass = useRecoilValue(compassState)
   const [isCellCenter, setIsCellCenter] = useState(false)
 
+  const guideLine = useRecoilValue(guideLineState)
+
   useEffect(() => {
     // 이벤트 리스너 추가
     // if (!canvas) {
@@ -104,6 +107,8 @@ export function useMode() {
   }, [mode, isGuidePointMode])
 
   const drawMouseLines = (e) => {
+    console.log('guideLine', guideLine)
+
     // 현재 마우스 포인터의 위치를 가져옵니다.
     const pointer = canvas?.getPointer(e.e)
 

src/store/canvasAtom.js

@@ -88,3 +88,9 @@ export const compassState = atom({
   default: undefined,
   dangerouslyAllowMutability: true,
 })
+
+export const guideLineState = atom({
+  key: 'guideLine',
+  default: {},
+  dangerouslyAllowMutability: true,
+})