#1008 보조선 관련 오류 수정

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -5,16 +5,6 @@ import { useEvent } from '@/hooks/useEvent'
 import { useMouse } from '@/hooks/useMouse'
 import { useLine } from '@/hooks/useLine'
 import { useTempGrid } from '@/hooks/useTempGrid'
-import {
-  outerLineAngle1State,
-  outerLineAngle2State,
-  outerLineArrow1State,
-  outerLineArrow2State,
-  outerLineDiagonalState,
-  outerLineLength1State,
-  outerLineLength2State,
-  outerLineTypeState,
-} from '@/store/outerLineAtom'
 import { calculateIntersection, distanceBetweenPoints, findClosestPoint, isPointOnLine } from '@/util/canvas-util'
 import { fabric } from 'fabric'
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
@@ -23,6 +13,16 @@ import { usePopup } from '@/hooks/usePopup'
 import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils'
 import { POLYGON_TYPE } from '@/common/common'
 import { useMessage } from '../useMessage'
+import {
+  auxiliaryLineAngle1State,
+  auxiliaryLineAngle2State,
+  auxiliaryLineArrow1State,
+  auxiliaryLineArrow2State,
+  auxiliaryLineDiagonalState,
+  auxiliaryLineLength1State,
+  auxiliaryLineLength2State,
+  auxiliaryLineTypeState,
+} from '@/store/auxiliaryLineAtom'
 
 // 보조선 작성
 export function useAuxiliaryDrawing(id, isUseEffect = true) {
@@ -49,20 +49,20 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
   const length2Ref = useRef(0)
   const angle1Ref = useRef('')
   const angle2Ref = useRef('')
-  const [length1, setLength1] = useRecoilState(outerLineLength1State)
+  const [length1, setLength1] = useRecoilState(auxiliaryLineLength1State)
-  const [length2, setLength2] = useRecoilState(outerLineLength2State)
+  const [length2, setLength2] = useRecoilState(auxiliaryLineLength2State)
-  const [arrow1, setArrow1] = useRecoilState(outerLineArrow1State)
+  const [arrow1, setArrow1] = useRecoilState(auxiliaryLineArrow1State)
-  const [arrow2, setArrow2] = useRecoilState(outerLineArrow2State)
+  const [arrow2, setArrow2] = useRecoilState(auxiliaryLineArrow2State)
-  const [type, setType] = useRecoilState(outerLineTypeState)
+  const [type, setType] = useRecoilState(auxiliaryLineTypeState)
-  const [angle1, setAngle1] = useRecoilState(outerLineAngle1State)
+  const [angle1, setAngle1] = useRecoilState(auxiliaryLineAngle1State)
-  const [angle2, setAngle2] = useRecoilState(outerLineAngle2State)
+  const [angle2, setAngle2] = useRecoilState(auxiliaryLineAngle2State)
-  const [outerLineDiagonalLength, setOuterLineDiagonalLength] = useRecoilState(outerLineDiagonalState)
+  const [auxiliaryLineDiagonalLength, setAuxiliaryLineDiagonalLength] = useRecoilState(auxiliaryLineDiagonalState)
   const arrow1Ref = useRef(arrow1)
   const arrow2Ref = useRef(arrow2)
 
   const typeRef = useRef(type)
 
-  const outerLineDiagonalLengthRef = useRef(0)
+  const auxiliaryLineDiagonalLengthRef = useRef(0)
   const intersectionPoints = useRef([])
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
 
@@ -124,7 +124,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
     setAngle1(0)
     setAngle2(0)
 
-    setOuterLineDiagonalLength(0)
+    setAuxiliaryLineDiagonalLength(0)
   }
 
   const move = (object, x, y) => {
@@ -408,7 +408,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
   //대각선 완료될 경우 확인
   const checkDiagonal = (direction) => {
     const activeElem = document.activeElement
-    const diagonalLength = outerLineDiagonalLengthRef.current.value // 대각선 길이
+    const diagonalLength = auxiliaryLineDiagonalLengthRef.current.value // 대각선 길이
 
     const length1Value = length1Ref.current.value
 
@@ -913,9 +913,9 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
     angle2,
     setAngle2,
     angle2Ref,
-    outerLineDiagonalLength,
+    auxiliaryLineDiagonalLength,
-    setOuterLineDiagonalLength,
+    setAuxiliaryLineDiagonalLength,
-    outerLineDiagonalLengthRef,
+    auxiliaryLineDiagonalLengthRef,
     type,
     setType,
     handleFix,

src/store/auxiliaryLineAtom.js

@@ -0,0 +1,71 @@
+import { atom } from 'recoil'
+
+// 보조선 타입
+export const AUXILIARY_LINE_TYPE = {
+  OUTER_LINE: 'outerLine', // 외벽선
+  RIGHT_ANGLE: 'rightAngle', // 직각
+  DOUBLE_PITCH: 'doublePitch',
+  ANGLE: 'angle', // 각도
+  DIAGONAL_LINE: 'diagonalLine', // 대각선
+}
+
+/**
+ * 보조선 작성에서 사용하는 recoilState
+ */
+
+export const auxiliaryLineLength1State = atom({
+  //길이1
+  key: 'auxiliaryLineLength1State',
+  default: 0,
+})
+
+export const auxiliaryLineLength2State = atom({
+  // 길이2
+  key: 'auxiliaryLineLength2State',
+  default: 0,
+})
+
+export const auxiliaryLineArrow1State = atom({
+  // 방향1
+  key: 'auxiliaryLineArrow1State',
+  default: '',
+})
+
+export const auxiliaryLineArrow2State = atom({
+  // 방향2
+  key: 'auxiliaryLineArrow2State',
+  default: '',
+})
+
+export const auxiliaryLineAngle1State = atom({
+  // 각도1
+  key: 'auxiliaryLineAngle1State',
+  default: 0,
+})
+
+export const auxiliaryLineAngle2State = atom({
+  // 각도2
+  key: 'auxiliaryLineAngle2State',
+  default: 0,
+})
+
+export const auxiliaryLineDiagonalState = atom({
+  // 대각선
+  key: 'auxiliaryLineDiagonalState',
+  default: 0,
+})
+
+export const auxiliaryLineTypeState = atom({
+  key: 'auxiliaryLineTypeState',
+  default: AUXILIARY_LINE_TYPE.OUTER_LINE,
+})
+
+export const auxiliaryLinePointsState = atom({
+  key: 'auxiliaryLinePointsState',
+  default: [],
+})
+
+export const auxiliaryLineFixState = atom({
+  key: 'auxiliaryLineFixState',
+  default: false,
+})