그리드 초기화 기능 추가

src/components/Roof2.jsx

@@ -13,6 +13,7 @@ import {
   compassState,
   currentObjectState,
   fontSizeState,
+  guideLineState,
   roofMaterialState,
   roofState,
   sortedPolygonArray,
@@ -30,6 +31,7 @@ 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 { isObjectNotEmpty } from '@/util/common-utils'
 
 export default function Roof2(props) {
   const { name, userId, email, isLoggedIn } = props
@@ -72,6 +74,8 @@ export default function Roof2(props) {
   const [scale, setScale] = useState(1)
   const currentObject = useRecoilValue(currentObjectState)
 
+  const [guideLine, setGuideLine] = useRecoilState(guideLineState)
+
   //canvas 썸네일
   const [thumbnails, setThumbnails] = useState([])
   const thumbnailProps = {
@@ -575,15 +579,28 @@ export default function Roof2(props) {
       {canvas && (
         <>
           <div className=" my-8 w-full text:pretty">
-            <Button
+            {!isObjectNotEmpty(guideLine) ? (
-              className="m-1 p-2"
+              <Button
-              onClick={() => {
+                className="m-1 p-2"
-                setContent(<SettingsModal canvasProps={canvas} />)
+                onClick={() => {
-                setOpen(true)
+                  setContent(<SettingsModal canvasProps={canvas} />)
-              }}
+                  setOpen(true)
-            >
+                }}
-              그리드 설정
+              >
-            </Button>
+                그리드 설정
+              </Button>
+            ) : (
+              <Button
+                className="m-1 p-2"
+                onClick={() => {
+                  const guideLines = canvas?._objects.filter((obj) => obj.name === 'guideLine' || obj.name === 'guideDot')
+                  guideLines?.forEach((item) => canvas?.remove(item))
+                  setGuideLine({})
+                }}
+              >
+                그리드 초기화
+              </Button>
+            )}
             <Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DEFAULT)}>
               모드 DEFAULT
             </Button>