배치면 그리기 패턴 추가

src/hooks/surface/usePlacementShapeDrawing.js

@@ -30,15 +30,17 @@ import {
 } from '@/store/placementShapeDrawingAtom'
 import { usePolygon } from '@/hooks/usePolygon'
 import { POLYGON_TYPE } from '@/common/common'
-
+import { roofDisplaySelector } from '@/store/settingAtom'
 // 면형상 배치
 export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
   const canvas = useRecoilValue(canvasState)
+  const roofDisplay = useRecoilValue(roofDisplaySelector)
   const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
     useEvent()
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
   const { addPolygonByLines, drawDirectionArrow } = usePolygon()
+
   const { tempGridMode } = useTempGrid()
 
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
@@ -221,7 +223,7 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
           pitch: globalPitch,
         })
 
-        setSurfaceShapePattern(roof)
+        setSurfaceShapePattern(roof, roofDisplay.column)
         drawDirectionArrow(roof)
 
         lines.forEach((line) => {

src/hooks/surface/useSurfaceShapeBatch.js

@@ -9,17 +9,16 @@ import { QPolygon } from '@/components/fabric/QPolygon'
 import { useSwal } from '@/hooks/useSwal'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
-import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import { roofDisplaySelector } from '@/store/settingAtom'
 
 export function useSurfaceShapeBatch() {
   const { getMessage } = useMessage()
 
   const canvas = useRecoilValue(canvasState)
   const globalPitch = useRecoilValue(globalPitchState)
+  const roofDisplay = useRecoilValue(roofDisplaySelector)
   const { swalFire } = useSwal()
   const { addCanvasMouseEventListener, initEvent } = useEvent()
-  const firstSettings = useRecoilValue(settingModalFirstOptionsState)
-  const secondSettings = useRecoilValue(settingModalSecondOptionsState)
 
   const applySurfaceShape = (surfaceRefs, selectedType, setShowPlacementSurfaceSettingModal) => {
     let length1, length2, length3, length4, length5
@@ -122,8 +121,7 @@ export function useSurfaceShapeBatch() {
         isDrawing = false
         obj.set('name', POLYGON_TYPE.ROOF)
         initEvent()
-        const displayMode = firstSettings.option2.filter((item) => item.selected)[0].column
-        setSurfaceShapePattern(obj, displayMode)
+        setSurfaceShapePattern(obj, roofDisplay.column)
         setShowPlacementSurfaceSettingModal(true)
       })
     }

src/store/settingAtom.js

@@ -149,10 +149,11 @@ export const corridorDimensionSelector = selector({
 })
 
 // 디스플레이 설정 - 화면 표시
-export const realDimensionSelector = selector({
-  key: 'realDimensionSelector',
+export const roofDisplaySelector = selector({
+  key: 'roofDisplaySelector',
   get: ({ get }) => {
     const settingModalFirstOptions = get(settingModalFirstOptionsState)
-    return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected)
+    return settingModalFirstOptions.option2.find((option) => option.selected)
   },
+  dangerouslyAllowMutability: true,
 })