validation 추가

src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx

@@ -36,8 +36,13 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
         </div>
         <div className="modal-body">
           <div className="modal-btn-wrap">
-            {buttons.map((button) => (
-              <button id={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}>
+            {buttons.map((button, idx) => (
+              <button
+                id={button.id}
+                key={`${button.type}-${idx}`}
+                className={`btn-frame modal ${type === button.type ? 'act' : ''}`}
+                onClick={() => setType(button.type)}
+              >
                 {button.name}
               </button>
             ))}

src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx

@@ -20,7 +20,7 @@ export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModa
     length2Ref,
     handleSave,
     wallLineEditRef,
-  } = useWallLineOffsetSetting()
+  } = useWallLineOffsetSetting(setShowWallLineOffsetSettingModal)
 
   const wallLineProps = {
     length1Ref,

src/hooks/roofcover/useEavesGableEdit.js

@@ -6,9 +6,11 @@ import { useEvent } from '@/hooks/useEvent'
 import { LINE_TYPE } from '@/common/common'
 import { useLine } from '@/hooks/useLine'
 import { useMode } from '@/hooks/useMode'
+import { outerLineFixState } from '@/store/outerLineAtom'
+import { useSwal } from '@/hooks/useSwal'
 
 // 처마.케라바 변경
-export function useEavesGableEdit() {
+export function useEavesGableEdit(setShowEavesGableEditModal) {
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
   const { addCanvasMouseEventListener, initEvent } = useEvent()
@@ -21,6 +23,7 @@ export function useEavesGableEdit() {
   const [type, setType] = useState(TYPES.EAVES)
   const typeRef = useRef(TYPES.EAVES)
   const { removeLine } = useLine()
+  const { swalFire } = useSwal()
 
   const { drawRoofPolygon } = useMode()
 
@@ -28,6 +31,7 @@ export function useEavesGableEdit() {
   const offsetRef = useRef(null)
   const widthRef = useRef(null)
   const radioTypeRef = useRef('1') // 각 페이지에서 사용하는 radio type
+  const outerLineFix = useRecoilValue(outerLineFixState)
 
   const buttonMenu = [
     { id: 1, name: getMessage('eaves'), type: TYPES.EAVES },
@@ -36,6 +40,14 @@ export function useEavesGableEdit() {
     { id: 4, name: getMessage('shed'), type: TYPES.SHED },
   ]
 
+  useEffect(() => {
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    if (!outerLineFix || outerLines.length === 0) {
+      swalFire({ text: '외벽선이 없습니다.' })
+      setShowEavesGableEditModal(false)
+    }
+  }, [])
+
   useEffect(() => {
     const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
     wallLines.forEach((wallLine) => {

src/hooks/roofcover/useOuterLineWall.js

@@ -207,6 +207,7 @@ export function useOuterLineWall(setShowOutlineModal) {
         removeAllMouseEventListeners()
         removeAllDocumentEventListeners()
         canvas?.renderAll()
+        setOuterLineFix(true)
         setShowOutlineModal(false)
       }
 

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -1,13 +1,16 @@
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { setSurfaceShapePattern } from '@/util/canvas-util'
 import { splitPolygonWithLines } from '@/util/qpolygon-utils'
+import { useSwal } from '@/hooks/useSwal'
 
 // 지붕면 할당
 export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
   const canvas = useRecoilValue(canvasState)
 
+  const { swalFire } = useSwal()
+
   const roofMaterials = [
     {
       id: 'A',
@@ -71,6 +74,14 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
 
   const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(roofMaterials[0])
 
+  useEffect(() => {
+    const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
+    if (roofBases.length === 0) {
+      swalFire({ text: '할당할 지붕이 없습니다.' })
+      setShowRoofAllocationSettingModal(false)
+    }
+  }, [])
+
   const onAddRoofMaterial = () => {
     setValues([...values, selectedRoofMaterial])
   }

src/hooks/roofcover/useRoofShapePassivitySetting.js

@@ -7,6 +7,8 @@ import { useEvent } from '@/hooks/useEvent'
 import { LINE_TYPE } from '@/common/common'
 import { useMode } from '@/hooks/useMode'
 import { usePolygon } from '@/hooks/usePolygon'
+import { outerLineFixState } from '@/store/outerLineAtom'
+import { useSwal } from '@/hooks/useSwal'
 
 //지붕형상 수동 설정
 export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingModal) {
@@ -18,6 +20,7 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
   const { showLine, hideLine } = useLine()
+  const { swalFire } = useSwal()
   const { addCanvasMouseEventListener, initEvent } = useEvent()
   const { drawRoofPolygon } = useMode()
   const { addPolygonByLines } = usePolygon()
@@ -36,6 +39,16 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
     { id: 3, name: getMessage('windage'), type: TYPES.SHED },
   ]
 
+  const outerLineFix = useRecoilValue(outerLineFixState)
+
+  useEffect(() => {
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    if (!outerLineFix || outerLines.length === 0) {
+      swalFire({ text: '외벽선이 없습니다.' })
+      setShowRoofShapePassivitySettingModal(false)
+    }
+  }, [])
+
   useEffect(() => {
     addCanvasMouseEventListener('mouse:down', mouseDown)
     const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')

src/hooks/roofcover/useRoofShapeSetting.js

@@ -6,11 +6,14 @@ import { LINE_TYPE, MENU } from '@/common/common'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useMode } from '@/hooks/useMode'
 import { useLine } from '@/hooks/useLine'
+import { outerLineFixState } from '@/store/outerLineAtom'
+import { useSwal } from '@/hooks/useSwal'
 
 // 지붕형상 설정
 export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
   const [shapeNum, setShapeNum] = useState(1)
   const [buttonAct, setButtonAct] = useState(1)
+  const { swalFire } = useSwal()
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
   const { addPolygonByLines } = usePolygon()
@@ -28,9 +31,18 @@ export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
   const { hideLine, showLine } = useLine()
 
   const setCurrentMenu = useSetRecoilState(currentMenuState)
+  const outerLineFix = useRecoilValue(outerLineFixState)
 
   const history = useRef([])
 
+  useEffect(() => {
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    if (!outerLineFix || outerLines.length === 0) {
+      swalFire({ text: '외벽선이 없습니다.' })
+      setShowRoofShapeSettingModal(false)
+    }
+  }, [])
+
   useEffect(() => {
     if (shapeNum !== 4) {
       return

src/hooks/roofcover/useWallLineOffsetSetting.js

@@ -4,12 +4,14 @@ import { useEffect, useRef, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
 import { useLine } from '@/hooks/useLine'
+import { useSwal } from '@/hooks/useSwal'
 
 // 외벽선 편집 및 오프셋
-export function useWallLineOffsetSetting() {
+export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
   const canvas = useRecoilValue(canvasState)
   const { showLine, addLine } = useLine()
   const { getMessage } = useMessage()
+  const { swalFire } = useSwal()
   const { addCanvasMouseEventListener, initEvent } = useEvent()
   const wallLineEditRef = useRef(null)
   const length1Ref = useRef(null)
@@ -19,6 +21,8 @@ export function useWallLineOffsetSetting() {
   const arrow1Ref = useRef(null)
   const arrow2Ref = useRef(null)
 
+  const [isLoading, setIsLoading] = useState(false)
+
   const drawLine = (point1, point2, idx, direction = currentWallLineRef.current.direction) => {
     const line = addLine([point1.x, point1.y, point2.x, point2.y], {
       stroke: 'black',
@@ -51,6 +55,8 @@ export function useWallLineOffsetSetting() {
   useEffect(() => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     if (outerLines.length === 0) {
+      swalFire({ text: '외벽선이 없습니다.' })
+      setShowWallLineOffsetSettingModal(false)
       return
     }
     outerLines.forEach((outerLine) => {
@@ -69,7 +75,7 @@ export function useWallLineOffsetSetting() {
     addCircleByLine(currentWallLineRef.current)
 
     addCanvasMouseEventListener('mouse:down', mouseDown)
-
+    setIsLoading(true)
     return () => {
       removeOuterLineEditCircle()
       canvas.discardActiveObject()
@@ -78,6 +84,9 @@ export function useWallLineOffsetSetting() {
   }, [])
 
   useEffect(() => {
+    if (!isLoading) {
+      return
+    }
     removeOuterLineEditCircle()
     addCanvasMouseEventListener('mouse:down', mouseDown)
     if (type === TYPES.WALL_LINE_EDIT) {