From d1ea6229a2b68b435ef30a5b85856ff77862fa43 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Fri, 18 Apr 2025 11:44:58 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B9=98=EC=88=98=ED=91=9C=EC=8B=9C=20selector?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/common/useMenu.js                   | 43 +++----------------
 .../roofcover/useRoofAllocationSetting.js     | 16 ++-----
 src/store/settingAtom.js                      | 16 +++++++
 3 files changed, 24 insertions(+), 51 deletions(-)

diff --git a/src/hooks/common/useMenu.js b/src/hooks/common/useMenu.js
index 8b0540dd..f8bc2a31 100644
--- a/src/hooks/common/useMenu.js
+++ b/src/hooks/common/useMenu.js
@@ -22,7 +22,7 @@ import { MENU } from '@/common/common'
 import { useTrestle } from '@/hooks/module/useTrestle'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useOrientation } from '@/hooks/module/useOrientation'
-import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { corridorDimensionSelector, settingModalFirstOptionsState } from '@/store/settingAtom'
 
 /**
  * 메뉴 처리 훅
@@ -37,22 +37,11 @@ export default function useMenu() {
   const { deleteAllSurfacesAndObjects } = useSurfaceShapeBatch({})
   const { clear: trestleClear, setAllModuleSurfaceIsComplete } = useTrestle()
   const { nextStep } = useOrientation()
-  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const [corridorDimension, setCorridorDimension] = useRecoilState(corridorDimensionSelector)
   const handleMenu = (type) => {
     if (type === 'outline') {
       // 지붕 덮개 메뉴의 경우는 복도치수로 적용한다.
-      setSettingModalFirstOptions((prev) => {
-        return {
-          ...prev,
-          dimensionDisplay: prev.dimensionDisplay.map((item, index) => {
-            if (index === 0) {
-              return { ...item, selected: true }
-            } else {
-              return { ...item, selected: false }
-            }
-          }),
-        }
-      })
+      setCorridorDimension(0)
       switch (currentMenu) {
         case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
           addPopup(popupId, 1, <WallLineSetting id={popupId} />)
@@ -83,18 +72,7 @@ export default function useMenu() {
 
     if (type === 'surface') {
       // 배치면 메뉴의 경우는 실치수로 적용한다.
-      setSettingModalFirstOptions((prev) => {
-        return {
-          ...prev,
-          dimensionDisplay: prev.dimensionDisplay.map((item, index) => {
-            if (index === 1) {
-              return { ...item, selected: true }
-            } else {
-              return { ...item, selected: false }
-            }
-          }),
-        }
-      })
+      setCorridorDimension(1)
       switch (currentMenu) {
         // case MENU.BATCH_CANVAS.SLOPE_SETTING:
         //   addPopup(popupId, 1, <Slope id={popupId} />)
@@ -116,18 +94,7 @@ export default function useMenu() {
 
     if (type === 'module') {
       // 모듈,회로 구성 메뉴의 경우는 실치수로 적용한다.
-      setSettingModalFirstOptions((prev) => {
-        return {
-          ...prev,
-          dimensionDisplay: prev.dimensionDisplay.map((item, index) => {
-            if (index === 1) {
-              return { ...item, selected: true }
-            } else {
-              return { ...item, selected: false }
-            }
-          }),
-        }
-      })
+      setCorridorDimension(1)
       switch (currentMenu) {
         case MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING:
           trestleClear()
diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index 5f7e7505..d9c2073c 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@@ -12,6 +12,7 @@ import {
   roofMaterialsSelector,
   selectedRoofMaterialSelector,
   settingModalFirstOptionsState,
+  corridorDimensionSelector,
 } from '@/store/settingAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { POLYGON_TYPE } from '@/common/common'
@@ -59,7 +60,7 @@ export function useRoofAllocationSetting(id) {
   const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
   const resetPoints = useResetRecoilState(outerLinePointsState)
-  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const [corridorDimension, setCorridorDimension] = useRecoilState(corridorDimensionSelector)
 
   useEffect(() => {
     /** 배치면 초기설정에서 선택한 지붕재 배열 설정 */
@@ -436,18 +437,7 @@ export function useRoofAllocationSetting(id) {
     closeAll()
     setSelectedMenu('surface')
     //지붕면 완성 후 실측치 로 보이도록 수정
-    setSettingModalFirstOptions((prev) => {
-      return {
-        ...prev,
-        dimensionDisplay: prev.dimensionDisplay.map((item, index) => {
-          if (index === 1) {
-            return { ...item, selected: true }
-          } else {
-            return { ...item, selected: false }
-          }
-        }),
-      }
-    })
+    setCorridorDimension(1)
 
     /** 모듈 선택 데이터 초기화 */
     // modifyModuleSelectionData()
diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js
index 012e5bdc..32a620a1 100644
--- a/src/store/settingAtom.js
+++ b/src/store/settingAtom.js
@@ -221,6 +221,22 @@ export const corridorDimensionSelector = selector({
     const settingModalFirstOptions = get(settingModalFirstOptionsState)
     return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected)
   },
+  set: ({ set }, newValue) => {
+    //0 : 복도치수 , 1 : 실제치수
+
+    set(settingModalFirstOptionsState, (prev) => {
+      return {
+        ...prev,
+        dimensionDisplay: prev.dimensionDisplay.map((item, index) => {
+          if (index === newValue) {
+            return { ...item, selected: true }
+          } else {
+            return { ...item, selected: false }
+          }
+        }),
+      }
+    })
+  },
   dangerouslyAllowMutability: true,
 })