🙀fix: useEvent 중복 호출되던 문제

- initEvent() 함수 중복 호출로 이벤트 바인딩 중복 되던 문제 해결
- 초기화 함수 호출 최소화
- useEffect 호출 정리

src/app/floor-plan/layout.js

@@ -3,20 +3,17 @@
 import FloorPlanProvider from './FloorPlanProvider'
 import FloorPlan from '@/components/floor-plan/FloorPlan'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
-import EventProvider from './EventProvider'
 
 export default function FloorPlanLayout({ children }) {
   console.log('🚀 ~ FloorPlanLayout ~ FloorPlanLayout:')
 
   return (
     <>
-      <EventProvider>
+      <FloorPlanProvider>
-        <FloorPlanProvider>
+        <FloorPlan>
-          <FloorPlan>
+          <CanvasLayout>{children}</CanvasLayout>
-            <CanvasLayout>{children}</CanvasLayout>
+        </FloorPlan>
-          </FloorPlan>
+      </FloorPlanProvider>
-        </FloorPlanProvider>
-      </EventProvider>
     </>
   )
 }

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

@@ -3,11 +3,13 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useMessage } from '@/hooks/useMessage'
 import { POLYGON_TYPE } from '@/common/common'
 import { setSurfaceShapePattern } from '@/util/canvas-util'
+import { useEvent } from '@/hooks/useEvent'
 
 export default function FirstOption() {
   const { getMessage } = useMessage()
   const { canvas, settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
+  const { initEvent } = useEvent()
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
@@ -42,6 +44,11 @@ export default function FirstOption() {
     setSettingModalFirstOptions({ ...settingModalFirstOptions, option1, option2, dimensionDisplay, fontFlag: true })
   }
 
+  // useEffect(() => {
+  //   console.log('🚀 ~ useEffect ~ initEvent:')
+  //   initEvent()
+  // }, [onClickOption])
+
   return (
     <>
       <div className="modal-check-btn-wrap">

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

@@ -9,6 +9,7 @@ import { usePopup } from '@/hooks/usePopup'
 import { v4 as uuidv4 } from 'uuid'
 import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+import { useEvent } from '@/hooks/useEvent'
 
 export default function GridOption() {
   const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
@@ -24,6 +25,8 @@ export default function GridOption() {
 
   const { gridColor, setGridColor, color } = useCanvasSetting()
 
+  const { initEvent } = useEvent()
+
   useEffect(() => {
     console.log(gridColor, color)
     setGridColor(color.hex)
@@ -91,6 +94,11 @@ export default function GridOption() {
     setGridOptions(newGridOptions)
   }
 
+  useEffect(() => {
+    console.log('🚀 ~ useEffect ~ initEvent:')
+    initEvent()
+  }, [gridOptions])
+
   const dotLineGridProps = {
     id: dotLineId,
     setIsShow: setShowDotLineGridModal,

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

@@ -8,6 +8,7 @@ import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/Pl
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { fontSelector, globalFontAtom } from '@/store/fontAtom'
+import { useEvent } from '@/hooks/useEvent'
 
 export default function SecondOption() {
   const { getMessage } = useMessage()
@@ -24,6 +25,8 @@ export default function SecondOption() {
   const [fontId, setFontId] = useState(uuidv4())
   const [planSizeId, setPlanSizeId] = useState(uuidv4())
 
+  const { initEvent } = useEvent()
+
   const {
     fetchSettings,
     planSizeSettingMode,
@@ -189,6 +192,11 @@ export default function SecondOption() {
     setAdsorptionRange(50)
   }
 
+  useEffect(() => {
+    console.log('🚀 ~ useEffect ~ initEvent:')
+    initEvent()
+  }, [adsorptionPointMode])
+
   return (
     <>
       <div className="modal-check-btn-wrap">

src/hooks/useEvent.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useRef } from 'react'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
@@ -20,9 +20,15 @@ export function useEvent() {
 
   const textMode = useRecoilValue(textModeState)
 
-  useEffect(() => {
+  // 이벤트 초기화 위치 수정 -> useCanvasSetting에서 세팅값 불러오고 나서 초기화 함수 호출
-    initEvent()
+  // useEffect(() => {
-  }, [currentMenu, canvas, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, dotLineGridSetting, tempGridMode])
+  //   initEvent()
+  // }, [currentMenu, canvas, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, dotLineGridSetting])
+
+  // 임시 그리드 모드 변경 시 이벤트 초기화 호출 위치 수정 -> GridOption 컴포넌트에서 임시 그리드 모드 변경 시 이벤트 초기화 함수 호출
+  // useEffect(() => {
+  //   initEvent()
+  // }, [tempGridMode])
 
   const initEvent = () => {
     if (!canvas) {