grid option 추가

src/app/roof2/page.jsx

@@ -1,6 +1,6 @@
 import Roof2 from '@/components/Roof2'
-import RoofSelect from '@/app/[locale]/roof2/RoofSelect'
 import { initCheck } from '@/util/session-util'
+import RoofSelect from '@/app/roof2/RoofSelect'
 
 export default async function Roof2Page() {
   const session = await initCheck()

src/components/common/color-picker/ColorPickerModal.jsx

@@ -10,7 +10,6 @@ export default function ColorPickerModal(props) {
   const [originColor, setOriginColor] = useState(color)
   const { closePopup } = usePopup()
 
-  console.log(props)
   useEffect(() => {
     setOriginColor(color)
   }, [isShow])

src/components/floor-plan/CanvasFrame.jsx

@@ -12,7 +12,6 @@ import QContextMenu from '@/components/common/context-menu/QContextMenu'
 
 export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
-  console.log(canvasRef)
   const { canvas } = useCanvas('canvas')
   const { handleZoomClear } = useCanvasEvent()
   const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu({

src/components/floor-plan/CanvasMenu.jsx

@@ -15,20 +15,18 @@ import { canvasState, canvasZoomState, currentCanvasPlanState, currentMenuState,
 import { sessionStore } from '@/store/commonAtom'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
-import { wordDisplaySelector } from '@/store/settingAtom'
+import { settingModalFirstOptionsState, wordDisplaySelector } from '@/store/settingAtom'
 import { MENU } from '@/common/common'
 
 import { checkLineOrientation, getDistance } from '@/util/canvas-util'
 
 import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
-import { settingModalFirstOptionsState } from '@/store/settingAtom'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { popupState } from '@/store/popupAtom'
 import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
 import { usePopup } from '@/hooks/usePopup'
 import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
-import { lineSegment } from '@turf/turf'
 
 const canvasMenus = [
   { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
@@ -95,19 +93,7 @@ export default function CanvasMenu(props) {
   const [popup, setPopup] = useRecoilState(popupState)
 
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
-  useEffect(() => {
-    console.log(canvas)
-    if (canvas) {
-      const circle = new fabric.Circle({
-        left: 300,
-        top: 300,
-        radius: 5,
-        stroke: 'black',
-      })
-      canvas.add(circle)
-      canvas.renderAll()
-    }
-  }, [])
+
   const onClickNav = (menu) => {
     setMenuNumber(menu.index)
     setCurrentMenu(menu.title)

src/components/floor-plan/modal/setting01/GridOption.jsx

@@ -21,17 +21,9 @@ export default function GridOption() {
   const [color, setColor] = useColor(gridColor)
   const [showColorPickerModal, setShowColorPickerModal] = useState(false)
   const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
-  const { addPopup, closePopup } = usePopup()
-  // const [colorId, setColorId] = useState(uuidv4())
-  // const [dotLineId, setDotLineId] = useState(uuidv4())
-
-  let colorId = null
-  let dotLineId = null
-
-  useEffect(() => {
-    colorId = uuidv4()
-    dotLineId = uuidv4()
-  }, [])
+  const { addPopup, closePopup, closePopups } = usePopup()
+  const [colorId, setColorId] = useState(uuidv4())
+  const [dotLineId, setDotLineId] = useState(uuidv4())
 
   useEffect(() => {
     setGridColor(color.hex)
@@ -43,7 +35,7 @@ export default function GridOption() {
   }, [showColorPickerModal])
 
   useEffect(() => {
-    gridOptions[2].selected = showDotLineGridModal
+    gridOptions[1].selected = showDotLineGridModal
     setGridOptions([...gridOptions])
   }, [showDotLineGridModal])
 
@@ -63,13 +55,11 @@ export default function GridOption() {
     const newGridOptions = [...gridOptions]
 
     // 초기화
-    setShowColorPickerModal(false)
-    setShowDotLineGridModal(false)
+    // setShowColorPickerModal(false)
+    // setShowDotLineGridModal(false)
     setTempGridMode(false)
     setAdsorptionPointAddMode(false)
-    closePopup(dotLineId)
-    closePopup(colorId)
-    //
+    closePopups([colorId, dotLineId])
 
     newGridOptions.forEach((item) => {
       if (item.id === id) {
@@ -78,65 +68,30 @@ export default function GridOption() {
         item.selected = false
       }
     })
-    console.log(colorId, dotLineId)
-    newGridOptions.map((item) => {
-      if (item.id === option.id) {
-        item.selected = !item.selected
-      }
-    })
-
-    if (option.id === 1) {
-      // 점 그리드
-      setAdsorptionPointAddMode(false)
-      setTempGridMode(option.selected)
-      newGridOptions[2].selected = false
-    }
-
     const selectedOption = newGridOptions.find((item) => item.id === option.id)
     if (selectedOption.id === 1) {
       // 임의 그리드 모드
-      setTempGridMode(selectedOption.selected)
+      // setAdsorptionPointAddMode(false)
+      setTempGridMode(option.selected)
+      // newGridOptions[2].selected = false
     } else if (selectedOption.id === 2) {
       // 점 선 그리드 설정 모달
       setShowDotLineGridModal(selectedOption.selected)
-      addPopup(dotLineId, 2, <DotLineGrid setShowDotLineGridModal={setShowDotLineGridModal} id={dotLineId} />)
+
+      addPopup(dotLineId, 2, <DotLineGrid {...dotLineGridProps} />)
     } else if (selectedOption.id === 3) {
       // 흡착점 모드
       setAdsorptionPointAddMode(selectedOption.selected)
     } else if (selectedOption.id === 4) {
       // 그리드 색 설정 모달
       setShowColorPickerModal(selectedOption.selected)
-      addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} id={colorId} />)
-    if (option.id === 2) {
-      // 점.선 그리드
-      if (option.selected) {
-        addPopup(dotLineId, 2, <DotLineGrid {...dotListGridProps} />)
-      } else {
-        closePopup(dotLineId)
-      }
-    }
-
-    if (option.name === 'modal.canvas.setting.grid.absorption.add') {
-      setAdsorptionPointAddMode(!adsorptionPointAddMode)
-      setTempGridMode(false)
-      newGridOptions[0].selected = false
-    }
-
-    if (option.id === 4) {
-      // 그리드 색 설정
-      if (option.selected) {
-        setShowColorPickerModal(true)
-        addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />)
-      } else {
-        setShowColorPickerModal(false)
-        closePopup(colorId)
-      }
+      addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />)
     }
 
     setGridOptions(newGridOptions)
   }
 
-  const dotListGridProps = {
+  const dotLineGridProps = {
     id: dotLineId,
     setIsShow: setShowDotLineGridModal,
     pos: {

src/hooks/usePopup.js

@@ -14,7 +14,6 @@ export function usePopup() {
   }
 
   const closePopup = (id) => {
-    console.log(id)
     setPopup({ children: [...popup.children.filter((child) => child.id !== id)] })
   }