옵션2 -> 치수선 설정 (폰트설정 제외) 작업

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

@@ -1,4 +1,4 @@
-import { useRecoilState, useSetRecoilState } from 'recoil'
+import { useRecoilState, useSetRecoilState, useRecoilValue } from 'recoil'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
 import React, { useEffect, useState } from 'react'
@@ -10,6 +10,7 @@ import { usePopup } from '@/hooks/usePopup'
 import { v4 as uuidv4 } from 'uuid'
 import FontSetting from '@/components/common/font/FontSetting'
 import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/PlanSizeSetting'
+import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 
 export default function SecondOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
@@ -28,6 +29,8 @@ export default function SecondOption() {
   const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
   const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
 
+  const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
+
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('SecondOption useEffect 실행')
@@ -139,11 +142,11 @@ export default function SecondOption() {
   let dimensionId = null
   let fontId = null
   let planSizeId = null
-  const [pixel, setPixel] = useState(1)
+  const [pixel, setPixel] = useState(dimensionSettings.pixel)
-  const [color, setColor] = useState('#FF0000')
+  const [color, setColor] = useState(dimensionSettings.color)
   const [font, setFont] = useState(null)
-  const [fontSize, setFontSize] = useState('#FF0000')
+  const [fontSize, setFontSize] = useState(dimensionSettings.fontSize)
-  const [fontColor, setFontColor] = useState('#FF0000')
+  const [fontColor, setFontColor] = useState(dimensionSettings.fontColor)
 
   useEffect(() => {
     dimensionId = uuidv4()

src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx

@@ -6,6 +6,9 @@ import { useEffect, useState } from 'react'
 import FontSetting from '@/components/common/font/FontSetting'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
+import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
+import { useRecoilState } from 'recoil'
+
 /*
  color: 치수선 색
  fontColor: 글꼴 색
@@ -44,6 +47,7 @@ export default function DimensionLineSetting(props) {
   const [showColorPickerModal, setShowColorPickerModal] = useState(false)
   const [showFontModal, setShowFontModal] = useState(false)
   const { getMessage } = useMessage()
+  const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
 
   useEffect(() => {
     console.log(2, isShow)
@@ -59,6 +63,7 @@ export default function DimensionLineSetting(props) {
       closePopups([fontModalId, colorModalId])
     }
   }, [isShow])
+
   const colorPickerProps = {
     isShow: showColorPickerModal,
     setIsShow: setShowColorPickerModal,
@@ -168,6 +173,16 @@ export default function DimensionLineSetting(props) {
                 setPixel(originPixel.value)
                 setColor(originColor)
                 setFont(originFont)
+                setDimensionLineSettings((prev) => {
+                  return {
+                    ...prev,
+                    pixel: originPixel.value,
+                    color: originColor,
+                    font: originFont,
+                    fontColor: originFontColor,
+                    fontSize: originFontSize,
+                  }
+                })
                 setIsShow(false)
                 closePopups([fontModalId, colorModalId, id])
               }}

src/hooks/common/useCommonUtils.js

@@ -3,10 +3,12 @@ import { useRecoilValue } from 'recoil'
 import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { checkLineOrientation, getDistance } from '@/util/canvas-util'
+import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 
 export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionState }) {
   const wordDisplay = useRecoilValue(wordDisplaySelector)
   const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
+  const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
 
   useEffect(() => {
     initEvent()
@@ -17,7 +19,7 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
     } else if (commonFunctionState.distance) {
       commonDistanceMode()
     }
-  }, [commonFunctionState])
+  }, [commonFunctionState, dimensionSettings])
 
   const commonTextMode = () => {
     let textbox
@@ -80,7 +82,7 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
           angle: angle,
           width: 15,
           height: 15,
-          fill: 'black',
+          fill: dimensionSettings.color,
           selectable: false,
         })
       }
@@ -94,8 +96,8 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
       }
 
       const lineOptions = {
-        stroke: 'black',
+        stroke: dimensionSettings.color,
-        strokeWidth: 2,
+        strokeWidth: dimensionSettings.pixel,
         selectable: false,
       }
 
@@ -185,12 +187,16 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
           canvas.add(arrow1)
           canvas.add(arrow2)
 
+          console.log(dimensionSettings)
+
           // 거리 텍스트가 이미 있으면 업데이트하고, 없으면 새로 생성
           distanceText = new fabric.Text(`${distance * 10} `, {
             left: (p1CenterX + p2CenterX) / 2 + (lineDirection === 'horizontal' ? 0 : -15),
             top: (p1CenterY + p2CenterY) / 2 + (lineDirection === 'horizontal' ? +15 : 0),
-            fill: 'black',
+            fill: dimensionSettings.fontColor,
-            fontSize: 16,
+            fontSize: dimensionSettings.fontSize,
+            // fontFamily : dimensionSettings.font, //폰트
+            // fontStyle : dimensionSettings.fontStyle, //폰트스타일
             selectable: true,
             textAlign: 'center',
             originX: 'center',
@@ -359,9 +365,7 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
   }
 
   return {
-    commonTextMode,
-    commonDimensionMode,
-    commonDistanceMode,
     commonFunctions,
+    dimensionSettings,
   }
 }

src/hooks/surface/useSurfaceShapeBatch.js

@@ -128,7 +128,6 @@ export function useSurfaceShapeBatch() {
         setSurfaceShapePattern(obj, roofDisplay.column)
         closePopup(id)
         drawDirectionArrow(obj)
-        setShowPlacementSurfaceSettingModal(true)
       })
     }
   }

src/store/commonUtilsAtom.js

@@ -0,0 +1,13 @@
+import { atom } from 'recoil'
+
+export const dimensionLineSettingsState = atom({
+  key: 'dimensionLineSettingsState',
+  default: {
+    pixel: 1,
+    color: '#000000',
+    font: 'Arial',
+    fontColor: '#000000',
+    fontSize: 15,
+    fontStyle: 'normal',
+  },
+})