Merge branch 'dev' into feature/test-jy

src/common/common.js

@@ -53,8 +53,9 @@ export const Mode = {
 export const LINE_TYPE = {
   WALLLINE: {
     /**
-     * 처마 / 캐라바 / 벽 / 팔작지붕 / 반절처 / 한쪽흐름
+     * 없음 / 처마 / 캐라바 / 벽 / 팔작지붕 / 반절처 / 한쪽흐름
      */
+    DEFAULT: 'default',
     EAVES: 'eaves',
     GABLE: 'gable',
     WALL: 'wall',

src/components/floor-plan/CanvasLayout.jsx

@@ -3,9 +3,12 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import CanvasFrame from './CanvasFrame'
+import { useMessage } from '@/hooks/useMessage'
+import { useSwal } from '@/hooks/useSwal'
 import { usePlan } from '@/hooks/usePlan'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
+import { sessionStore } from '@/store/commonAtom'
 
 export default function CanvasLayout() {
   const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
@@ -14,8 +17,11 @@ export default function CanvasLayout() {
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const sessionState = useRecoilValue(sessionStore)
 
-  const { getCanvasByObjectNo } = usePlan()
+  const { getMessage } = useMessage()
+  const { swalFire } = useSwal()
+  const { getCanvasByObjectNo, delCanvasById } = usePlan()
 
   const handleCurrentPlan = (newCurrentId) => {
     if (!currentCanvasPlan?.id || currentCanvasPlan.id !== newCurrentId) {
@@ -38,21 +44,29 @@ export default function CanvasLayout() {
   const handleDeletePlan = (e, id) => {
     e.stopPropagation() // 이벤트 버블링 방지
 
-    // 삭제할 아이디와 다른 아이템만 남김
+    if (initCanvasPlans.some((plan) => plan.id === id)) {
-    const filterInitPlans = initCanvasPlans.filter((plan) => plan.id !== id)
+      delCanvasById(id)
-    setInitCanvasPlans(filterInitPlans)
+        .then((res) => {
-    const filterAddPlans = addCanvasPlans.filter((plan) => plan.id !== id)
+          swalFire({ text: getMessage('common.message.delete') })
-    setAddCanvasPlans(filterAddPlans)
+          console.log('[DELETE] canvas-statuses res :::::::: %o', res)
-
+          setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
-    const combinedPlans = [...filterInitPlans, ...filterAddPlans]
+        })
-    if (combinedPlans.length === 0) {
+        .catch((error) => {
-      // 모든 데이터가 삭제된 경우
+          swalFire({ text: error.message, icon: 'error' })
-      setPlanNum(0)
+          console.error('[DELETE] canvas-statuses res error :::::::: %o', error)
+        })
     } else {
-      const lastPlanId = combinedPlans.at(-1).id
+      setAddCanvasPlans(addCanvasPlans.filter((plan) => plan.id !== id))
-      if (id !== lastPlanId) {
+      swalFire({ text: getMessage('common.message.delete') })
-        handleCurrentPlan(lastPlanId)
+    }
-      }
+
+    // 삭제 후 last 데이터에 포커싱
+    const lastPlan = [...initCanvasPlans, ...addCanvasPlans].filter((plan) => plan.id !== id).at(-1)
+    if (!lastPlan) {
+      setPlanNum(0)
+      setCurrentCanvasPlan(null)
+    } else if (id !== lastPlan.id) {
+      handleCurrentPlan(lastPlan.id)
     }
   }
 
@@ -63,7 +77,7 @@ export default function CanvasLayout() {
   }
 
   useEffect(() => {
-    getCanvasByObjectNo(objectNo).then((res) => {
+    getCanvasByObjectNo(sessionState.userId, objectNo).then((res) => {
       console.log('canvas 목록 ', res)
       if (res.length > 0) {
         setInitCanvasPlans(res)
@@ -82,7 +96,18 @@ export default function CanvasLayout() {
           {[...initCanvasPlans, ...addCanvasPlans].map((plan) => (
             <button key={plan.id} className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`} onClick={() => handleCurrentPlan(plan.id)}>
               <span>{plan.name}</span>
-              <i className="close" onClick={(e) => handleDeletePlan(e, plan.id)}></i>
+              <i
+                className="close"
+                onClick={(e) =>
+                  swalFire({
+                    html: getMessage('common.message.confirm.delete') + `</br>${plan.name}`,
+                    type: 'confirm',
+                    confirmFn: () => {
+                      handleDeletePlan(e, plan.id)
+                    },
+                  })
+                }
+              ></i>
             </button>
           ))}
         </div>

src/components/floor-plan/CanvasMenu.jsx

@@ -9,7 +9,8 @@ import QSelectBox from '@/components/common/select/QSelectBox'
 
 import { useMessage } from '@/hooks/useMessage'
 import { usePlan } from '@/hooks/usePlan'
-import { canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
+import { useSwal } from '@/hooks/useSwal'
+import { canvasState, canvasZoomState, currentMenuState, currentCanvasPlanState, verticalHorizontalModeState } from '@/store/canvasAtom'
 import { sessionStore } from '@/store/commonAtom'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
@@ -40,6 +41,7 @@ export default function CanvasMenu(props) {
   const setCurrentMenu = useSetRecoilState(currentMenuState)
   const setPoints = useSetRecoilState(outerLinePointsState)
   const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
+  const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
 
   const globalLocale = useRecoilValue(globalLocaleStore)
   const canvas = useRecoilValue(canvasState)
@@ -47,6 +49,7 @@ export default function CanvasMenu(props) {
 
   const { getMessage } = useMessage()
   const { saveCanvas } = usePlan()
+  const { swalFire } = useSwal()
 
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
   const onClickNav = (menu) => {
@@ -78,7 +81,13 @@ export default function CanvasMenu(props) {
 
   // 저장버튼(btn08) 클릭 시 호출되는 함수
   const handleSaveCanvas = () => {
-    saveCanvas(sessionState.userId)
+    swalFire({
+      html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
+      type: 'confirm',
+      confirmFn: () => {
+        saveCanvas(sessionState.userId)
+      },
+    })
   }
 
   const handleClear = () => {

src/components/floor-plan/FloorPlan.jsx

@@ -11,10 +11,12 @@ import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
 import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
 import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
+import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
   const [showOutlineModal, setShowOutlineModal] = useState(false)
+  const [showPropertiesSettingModal, setShowPropertiesSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
@@ -32,6 +34,7 @@ export default function FloorPlan() {
 
   const outlineProps = {
     setShowOutlineModal,
+    setShowPropertiesSettingModal,
   }
 
   const modalProps = {
@@ -75,6 +78,10 @@ export default function FloorPlan() {
     setShowDotLineGridModal,
   }
 
+  const propertiesSettingProps = {
+    setShowPropertiesSettingModal,
+  }
+
   useEffect(() => {}, [showOutlineModal])
 
   return (
@@ -87,6 +94,7 @@ export default function FloorPlan() {
           {/*{showOutlineModal && <OuterLineWall {...outlineProps} />}*/}
           {showOutlineModal && <WallLineSetting {...outlineProps} />}
           {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
+          {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
         </div>
       </div>
     </>

src/components/floor-plan/modal/grid/DotLineGrid.jsx

@@ -1,4 +1,4 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'

src/components/floor-plan/modal/grid/GridCopy.jsx

@@ -1,4 +1,4 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useMessage } from '@/hooks/useMessage'
 
 export default function GridCopy(props) {

src/components/floor-plan/modal/grid/GridMove.jsx

@@ -1,4 +1,4 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useMessage } from '@/hooks/useMessage'
 
 export default function GridMove(props) {

src/components/floor-plan/modal/outerlinesetting/Angle.jsx

@@ -1,8 +1,11 @@
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
-export default function Angle() {
+export default function Angle({ props }) {
   const { getMessage } = useMessage()
+  const { angle1, setAngle1, angle1Ref, length1, setLength1, length1Ref } = props
+
   return (
     <>
       <div className="outline-wrap">
@@ -11,16 +14,40 @@ export default function Angle() {
             <div className="outline-form">
               <span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
               <div className="input-grid" style={{ width: '63px' }}>
-                <input type="text" className="input-origin block" defaultValue={4} />
+                <input
+                  type="text"
+                  className="input-origin block"
+                  value={angle1}
+                  ref={angle1Ref}
+                  onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
+                  placeholder="45"
+                />
               </div>
-              <button className="reset-btn"></button>
+              <button
+                className="reset-btn"
+                onClick={(e) => {
+                  setAngle1(0)
+                }}
+              ></button>
             </div>
             <div className="outline-form">
-              <span className="mr10">{getMessage('modal.cover.outline.arrow')}</span>
+              <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
               <div className="input-grid" style={{ width: '63px' }}>
-                <input type="text" className="input-origin block" defaultValue={5000} />
+                <input
+                  type="text"
+                  className="input-origin block"
+                  value={length1}
+                  ref={length1Ref}
+                  onChange={(e) => onlyNumberInputChange(e, setLength1)}
+                  placeholder="3000"
+                />
               </div>
-              <button className="reset-btn"></button>
+              <button
+                className="reset-btn"
+                onClick={() => {
+                  setLength1(0)
+                }}
+              ></button>
             </div>
           </div>
           <div className="cul-box">

src/components/floor-plan/modal/outerlinesetting/Diagonal.jsx

@@ -1,7 +1,24 @@
 import { useMessage } from '@/hooks/useMessage'
+import { onlyNumberInputChange } from '@/util/input-utils'
 
-export default function Diagonal() {
+export default function Diagonal({ props }) {
   const { getMessage } = useMessage()
+
+  const {
+    length1,
+    setLength1,
+    length1Ref,
+    length2,
+    setLength2,
+    length2Ref,
+    outerLineDiagonalLength,
+    setOuterLineDiagonalLength,
+    outerLineDiagonalLengthRef,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+  } = props
   return (
     <>
       <div className="outline-wrap">
@@ -13,26 +30,77 @@ export default function Diagonal() {
               {getMessage('modal.cover.outline.length')}
             </span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input type="text" className="input-origin block" defaultValue={1000} />
+              <input
+                type="text"
+                className="input-origin block"
+                value={outerLineDiagonalLength}
+                ref={outerLineDiagonalLengthRef}
+                onChange={(e) => onlyNumberInputChange(e, setOuterLineDiagonalLength)}
+                placeholder="3000"
+              />
             </div>
-            <button className="reset-btn"></button>
+            <button
+              className="reset-btn"
+              onClick={() => {
+                setOuterLineDiagonalLength(0)
+              }}
+            ></button>
           </div>
         </div>
         <div className="outline-inner">
           <div className="outline-form">
             <span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input type="text" className="input-origin block" defaultValue={5000} />
+              <input
+                type="text"
+                className="input-origin block"
+                value={length1}
+                ref={length1Ref}
+                onChange={(e) => onlyNumberInputChange(e, setLength1)}
+                placeholder="3000"
+              />
             </div>
-            <button className="reset-btn"></button>
+            <button
+              className="reset-btn"
+              onClick={() => {
+                setLength1(0)
+                setLength2(0)
+                setArrow1('')
+                setArrow2('')
+              }}
+            ></button>
           </div>
           <div className="outline-form">
             <span> {getMessage('modal.cover.outline.arrow')}</span>
             <div className="grid-direction">
-              <button className="direction up"></button>
+              <button
-              <button className="direction down act"></button>
+                className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
-              <button className="direction left"></button>
+                onClick={() => {
-              <button className="direction right"></button>
+                  setArrow1('↑')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                }}
+              ></button>
+              <button
+                className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow1('↓')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                }}
+              ></button>
+              <button
+                className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow1('←')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                }}
+              ></button>
+              <button
+                className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow1('→')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                }}
+              ></button>
             </div>
           </div>
         </div>
@@ -40,16 +108,48 @@ export default function Diagonal() {
           <div className="outline-form">
             <span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
             <div className="input-grid" style={{ width: '98px' }}>
-              <input type="text" className="input-origin block" defaultValue={8000} />
+              <input
+                type="text"
+                className="input-origin block"
+                value={length2}
+                ref={length2Ref}
+                onChange={(e) => onlyNumberInputChange(e, setLength2)}
+                readOnly={true}
+                placeholder="3000"
+              />
             </div>
           </div>
           <div className="outline-form">
             <span> {getMessage('modal.cover.outline.arrow')}</span>
             <div className="grid-direction">
-              <button className="direction up"></button>
+              <button
-              <button className="direction down act"></button>
+                className={`direction up ${arrow2 === '↑' ? 'act' : ''}`}
-              <button className="direction left"></button>
+                onClick={() => {
-              <button className="direction right"></button>
+                  setArrow2('↑')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                }}
+              ></button>
+              <button
+                className={`direction down ${arrow2 === '↓' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow2('↓')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                }}
+              ></button>
+              <button
+                className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow2('←')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                }}
+              ></button>
+              <button
+                className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow2('→')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                }}
+              ></button>
             </div>
           </div>
         </div>

src/components/floor-plan/modal/outerlinesetting/DoublePitch.jsx

@@ -1,7 +1,48 @@
 import { useMessage } from '@/hooks/useMessage'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
+import { getDegreeByChon } from '@/util/canvas-util'
 
-export default function DoublePitch() {
+export default function DoublePitch({ props }) {
   const { getMessage } = useMessage()
+  const {
+    angle1,
+    setAngle1,
+    angle1Ref,
+    angle2,
+    setAngle2,
+    angle2Ref,
+    length1,
+    setLength1,
+    length1Ref,
+    length2,
+    setLength2,
+    length2Ref,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+    arrow1Ref,
+    arrow2Ref,
+  } = props
+
+  const getLength2 = () => {
+    const angle1Value = angle1Ref.current.value
+    const angle2Value = angle2Ref.current.value
+    const length1Value = length1Ref.current.value
+
+    const arrow1Value = arrow1Ref.current
+    const arrow2Value = arrow2Ref.current
+
+    if (angle1Value !== 0 && length1Value !== 0 && angle2Value !== 0 && arrow1Value !== '') {
+      const radian1 = (getDegreeByChon(angle1Value) * Math.PI) / 180
+
+      const radian2 = (getDegreeByChon(angle2Value) * Math.PI) / 180
+      return Math.floor((Math.tan(radian1) * length1Value) / Math.tan(radian2))
+    }
+
+    return 0
+  }
+
   return (
     <>
       <div className="outline-wrap">
@@ -9,26 +50,70 @@ export default function DoublePitch() {
           <div className="outline-form">
             <span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input type="text" className="input-origin block" defaultValue={4} />
+              <input
+                type="text"
+                className="input-origin block"
+                value={angle1}
+                ref={angle1Ref}
+                onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
+                placeholder="45"
+              />
             </div>
-            <button className="reset-btn"></button>
+            <button className="reset-btn" onClick={() => setAngle1(0)}></button>
           </div>
         </div>
         <div className="outline-inner">
           <div className="outline-form">
             <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input type="text" className="input-origin block" defaultValue={5000} />
+              <input
+                type="text"
+                className="input-origin block"
+                value={length1}
+                ref={length1Ref}
+                onChange={(e) => onlyNumberInputChange(e, setLength1)}
+                placeholder="3000"
+              />
             </div>
-            <button className="reset-btn"></button>
+            <button
+              className="reset-btn"
+              onClick={() => {
+                setLength1(0)
+                setArrow1('')
+              }}
+            ></button>
           </div>
           <div className="outline-form">
             <span>{getMessage('modal.cover.outline.arrow')}</span>
             <div className="grid-direction">
-              <button className="direction up"></button>
+              <button
-              <button className="direction down act"></button>
+                className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
-              <button className="direction left"></button>
+                onClick={() => {
-              <button className="direction right"></button>
+                  setArrow1('↑')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                }}
+              ></button>
+              <button
+                className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow1('↓')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                }}
+              ></button>
+              <button
+                className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow1('←')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                }}
+              ></button>
+              <button
+                className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow1('→')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                }}
+              ></button>
             </div>
           </div>
         </div>
@@ -38,26 +123,80 @@ export default function DoublePitch() {
           <div className="outline-form">
             <span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input type="text" className="input-origin block" defaultValue={6} />
+              <input
+                type="text"
+                className="input-origin block"
+                value={angle2}
+                ref={angle2Ref}
+                onChange={(e) => {
+                  onlyNumberWithDotInputChange(e, setAngle2)
+                  console.log(getLength2())
+                  setLength2(getLength2())
+                }}
+                placeholder="45"
+              />
             </div>
-            <button className="reset-btn"></button>
+            <button
+              className="reset-btn"
+              onClick={() => {
+                setAngle2(0)
+              }}
+            ></button>
           </div>
         </div>
         <div className="outline-inner">
           <div className="outline-form">
             <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input type="text" className="input-origin block" defaultValue={3000} />
+              <input
+                type="text"
+                className="input-origin block"
+                value={length2}
+                ref={length2Ref}
+                onChange={(e) => onlyNumberInputChange(e, setLength2)}
+                readOnly={true}
+                placeholder="3000"
+              />
             </div>
-            <button className="reset-btn"></button>
+            <button
+              className="reset-btn"
+              onClick={() => {
+                setLength2(0)
+                setArrow2('')
+              }}
+            ></button>
           </div>
           <div className="outline-form">
             <span>{getMessage('modal.cover.outline.arrow')}</span>
             <div className="grid-direction">
-              <button className="direction up"></button>
+              <button
-              <button className="direction down act"></button>
+                className={`direction up ${arrow2 === '↑' ? 'act' : ''}`}
-              <button className="direction left"></button>
+                onClick={() => {
-              <button className="direction right"></button>
+                  setArrow2('↑')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                }}
+              ></button>
+              <button
+                className={`direction down ${arrow2 === '↓' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow2('↓')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                }}
+              ></button>
+              <button
+                className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow2('←')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                }}
+              ></button>
+              <button
+                className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                onClick={() => {
+                  setArrow2('→')
+                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                }}
+              ></button>
             </div>
           </div>
         </div>

src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx

@@ -1,12 +1,12 @@
 'use client'
 
 import { useMessage } from '@/hooks/useMessage'
-import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
 import { onlyNumberInputChange } from '@/util/input-utils'
 
-export default function OuterLineWall(props) {
+export default function OuterLineWall({ props }) {
   const { getMessage } = useMessage()
-  const { length1, setLength1, length1Ref, arrow1, setArrow1 } = useOuterLineWall()
+
+  const { length1, setLength1, length1Ref, arrow1, setArrow1 } = props
   return (
     <div className="outline-wrap">
       <div className="outline-inner">
@@ -22,15 +22,39 @@ export default function OuterLineWall(props) {
               placeholder="3000"
             />
           </div>
-          <button className="reset-btn"></button>
+          <button className="reset-btn" onClick={() => setLength1(0)}></button>
         </div>
         <div className="outline-form">
           <span>{getMessage('modal.cover.outline.arrow')}</span>
           <div className="grid-direction">
-            <button className={`direction up ${arrow1 === '↑' ? 'act' : ''}`} onClick={() => setArrow1('↑')}></button>
+            <button
-            <button className={`direction down ${arrow1 === '↓' ? 'act' : ''}`} onClick={() => setArrow1('↓')}></button>
+              className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
-            <button className={`direction left ${arrow1 === '←' ? 'act' : ''}`} onClick={() => setArrow1('←')}></button>
+              onClick={() => {
-            <button className={`direction right ${arrow1 === '→' ? 'act' : ''}`} onClick={() => setArrow1('→')}></button>
+                setArrow1('↑')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+              }}
+            ></button>
+            <button
+              className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+              onClick={() => {
+                setArrow1('↓')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+              }}
+            ></button>
+            <button
+              className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
+              onClick={() => {
+                setArrow1('←')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+              }}
+            ></button>
+            <button
+              className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
+              onClick={() => {
+                setArrow1('→')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+              }}
+            ></button>
           </div>
         </div>
       </div>

src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx

@@ -0,0 +1,56 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useMessage } from '@/hooks/useMessage'
+import { usePropertiesSetting } from '@/hooks/roofcover/usePropertiesSetting'
+
+export default function PropertiesSetting(props) {
+  const { getMessage } = useMessage()
+  const { setShowPropertiesSettingModal } = props
+
+  const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting()
+
+  return (
+    <WithDraggable isShow={true}>
+      <div className={`modal-pop-wrap ssm`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
+          <button
+            className="modal-close"
+            onClick={() => {
+              closeModal(setShowPropertiesSettingModal)
+            }}
+          >
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-guide">{getMessage('modal.canvas.setting.wallline.properties.setting.info')}</div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('setting')}</div>
+            <div className="setting-btn-wrap">
+              <button className="setting-btn green mr5" onClick={handleSetEaves}>
+                {getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
+              </button>
+              <button className="setting-btn blue" onClick={handleSetGable}>
+                {getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
+              </button>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5" onClick={handleRollback}>
+              {getMessage('modal.cover.outline.rollback')}
+            </button>
+            <button
+              className="btn-frame modal act"
+              onClick={() => {
+                handleFix()
+                setShowPropertiesSettingModal(false)
+              }}
+            >
+              {getMessage('modal.cover.outline.finish')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/outerlinesetting/RightAngle.jsx

@@ -1,24 +1,63 @@
 import { useMessage } from '@/hooks/useMessage'
+import { onlyNumberInputChange } from '@/util/input-utils'
 
-export default function RightAngle() {
+export default function RightAngle({ props }) {
   const { getMessage } = useMessage()
+  const { length1, setLength1, length1Ref, length2, setLength2, length2Ref, arrow1, setArrow1, arrow2, setArrow2 } = props
   return (
     <div className="outline-wrap">
       <div className="outline-inner">
         <div className="outline-form">
           <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
           <div className="input-grid" style={{ width: '63px' }}>
-            <input type="text" className="input-origin block" defaultValue={1000} />
+            <input
+              type="text"
+              className="input-origin block"
+              value={length1}
+              ref={length1Ref}
+              onChange={(e) => onlyNumberInputChange(e, setLength1)}
+              placeholder="3000"
+            />
           </div>
-          <button className="reset-btn"></button>
+          <button
+            className="reset-btn"
+            onClick={() => {
+              setLength1(0)
+              setArrow1('')
+            }}
+          ></button>
         </div>
         <div className="outline-form">
           <span>{getMessage('modal.cover.outline.arrow')}</span>
           <div className="grid-direction">
-            <button className="direction up"></button>
+            <button
-            <button className="direction down act"></button>
+              className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
-            <button className="direction left"></button>
+              onClick={() => {
-            <button className="direction right"></button>
+                setArrow1('↑')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+              }}
+            ></button>
+            <button
+              className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+              onClick={() => {
+                setArrow1('↓')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+              }}
+            ></button>
+            <button
+              className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
+              onClick={() => {
+                setArrow1('←')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+              }}
+            ></button>
+            <button
+              className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
+              onClick={() => {
+                setArrow1('→')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+              }}
+            ></button>
           </div>
         </div>
       </div>
@@ -26,17 +65,53 @@ export default function RightAngle() {
         <div className="outline-form">
           <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
           <div className="input-grid" style={{ width: '63px' }}>
-            <input type="text" className="input-origin block" defaultValue={1000} />
+            <input
+              type="text"
+              className="input-origin block"
+              value={length2}
+              ref={length2Ref}
+              onChange={(e) => onlyNumberInputChange(e, setLength2)}
+              placeholder="3000"
+            />
           </div>
-          <button className="reset-btn"></button>
+          <button
+            className="reset-btn"
+            onClick={() => {
+              setLength2(0)
+            }}
+          ></button>
         </div>
         <div className="outline-form">
           <span>{getMessage('modal.cover.outline.arrow')}</span>
           <div className="grid-direction">
-            <button className="direction up"></button>
+            <button
-            <button className="direction down act"></button>
+              className={`direction up ${arrow2 === '↑' ? 'act' : ''}`}
-            <button className="direction left"></button>
+              onClick={() => {
-            <button className="direction right"></button>
+                setArrow2('↑')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+              }}
+            ></button>
+            <button
+              className={`direction down ${arrow2 === '↓' ? 'act' : ''}`}
+              onClick={() => {
+                setArrow2('↓')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+              }}
+            ></button>
+            <button
+              className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
+              onClick={() => {
+                setArrow2('←')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+              }}
+            ></button>
+            <button
+              className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+              onClick={() => {
+                setArrow2('→')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+              }}
+            ></button>
           </div>
         </div>
       </div>

src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useMessage } from '@/hooks/useMessage'
 import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
@@ -11,9 +11,102 @@ import DoublePitch from '@/components/floor-plan/modal/outerlinesetting/DoublePi
 import Diagonal from '@/components/floor-plan/modal/outerlinesetting/Diagonal'
 
 export default function WallLineSetting(props) {
-  const { setShowOutlineModal } = props
+  const { setShowOutlineModal, setShowPropertiesSettingModal } = props
   const { getMessage } = useMessage()
-  const { type, setType, handleFix, handleRollback } = useOuterLineWall()
+  const {
+    length1,
+    setLength1,
+    length2,
+    setLength2,
+    length1Ref,
+    length2Ref,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+    angle1,
+    setAngle1,
+    angle1Ref,
+    angle2,
+    setAngle2,
+    angle2Ref,
+    type,
+    setType,
+    arrow1Ref,
+    arrow2Ref,
+    outerLineDiagonalLength,
+    setOuterLineDiagonalLength,
+    outerLineDiagonalLengthRef,
+    handleRollback,
+    handleFix,
+  } = useOuterLineWall()
+
+  const outerLineProps = {
+    length1,
+    setLength1,
+    length1Ref,
+    arrow1,
+    setArrow1,
+  }
+
+  const rightAngleProps = {
+    length1,
+    setLength1,
+    length1Ref,
+    length2,
+    setLength2,
+    length2Ref,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+  }
+
+  const doublePitchProps = {
+    angle1,
+    setAngle1,
+    angle1Ref,
+    angle2,
+    setAngle2,
+    angle2Ref,
+    length1,
+    setLength1,
+    length1Ref,
+    length2,
+    setLength2,
+    length2Ref,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+    arrow1Ref,
+    arrow2Ref,
+  }
+
+  const angleProps = {
+    angle1,
+    setAngle1,
+    angle1Ref,
+    length1,
+    setLength1,
+    length1Ref,
+  }
+
+  const diagonalLineProps = {
+    length1,
+    setLength1,
+    length1Ref,
+    length2,
+    setLength2,
+    length2Ref,
+    outerLineDiagonalLength,
+    setOuterLineDiagonalLength,
+    outerLineDiagonalLengthRef,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+  }
 
   return (
     <WithDraggable isShow={true} pos={{ x: -1390, y: 30 }}>
@@ -55,24 +148,33 @@ export default function WallLineSetting(props) {
               {getMessage('modal.cover.outline.diagonal')}
             </button>
           </div>
-          {type === OUTER_LINE_TYPE.OUTER_LINE ? (
+          <div className="properties-setting-wrap outer">
-            <OuterLineWall />
+            <div className="setting-tit">{getMessage('modal.cover.outline.setting')}</div>
-          ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
+            {type === OUTER_LINE_TYPE.OUTER_LINE ? (
-            <RightAngle />
+              <OuterLineWall props={outerLineProps} />
-          ) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
+            ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
-            <DoublePitch />
+              <RightAngle props={rightAngleProps} />
-          ) : type === OUTER_LINE_TYPE.ANGLE ? (
+            ) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
-            <Angle />
+              <DoublePitch props={doublePitchProps} />
-          ) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
+            ) : type === OUTER_LINE_TYPE.ANGLE ? (
-            <Diagonal />
+              <Angle props={angleProps} />
-          ) : (
+            ) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
-            <></>
+              <Diagonal props={diagonalLineProps} />
-          )}
+            ) : (
+              <></>
+            )}
+          </div>
           <div className="grid-btn-wrap">
             <button className="btn-frame modal mr5" onClick={handleRollback}>
               {getMessage('modal.cover.outline.rollback')}
             </button>
-            <button className="btn-frame modal act" onClick={handleFix}>
+            <button
+              className="btn-frame modal act"
+              onClick={() => {
+                handleFix(setShowOutlineModal)
+                setShowPropertiesSettingModal(true)
+              }}
+            >
               {getMessage('modal.cover.outline.fix')}
             </button>
           </div>

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

@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import FirstOption from './FirstOption'
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
 import { useMessage } from '@/hooks/useMessage'
 import GridOption from '@/components/floor-plan/modal/setting01/GridOption'

src/hooks/roofcover/useOuterLineWall.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import { distanceBetweenPoints } from '@/util/canvas-util'
+import { distanceBetweenPoints, getDegreeByChon } from '@/util/canvas-util'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import {
   adsorptionPointAddModeState,
@@ -16,14 +16,17 @@ import { useTempGrid } from '@/hooks/useTempGrid'
 import { usePolygon } from '@/hooks/usePolygon'
 import {
   outerLineAngle1State,
+  outerLineAngle2State,
   outerLineArrow1State,
   outerLineArrow2State,
+  outerLineDiagonalState,
   outerLineLength1State,
   outerLineLength2State,
   outerLinePointsState,
   outerLineTypeState,
 } from '@/store/outerLineAtom'
 import { calculateAngle } from '@/util/qpolygon-utils'
+import { fabric } from 'fabric'
 
 export function useOuterLineWall() {
   const canvas = useRecoilValue(canvasState)
@@ -33,6 +36,7 @@ export function useOuterLineWall() {
   const { addLine, removeLine } = useLine()
   const { tempGridMode } = useTempGrid()
   const { addPolygonByLines } = usePolygon()
+
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
   const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
   const adsorptionPointMode = useRecoilValue(adsorptionPointModeState)
@@ -42,28 +46,31 @@ export function useOuterLineWall() {
   const length1Ref = useRef(null)
   const length2Ref = useRef(null)
   const angle1Ref = useRef(null)
+  const angle2Ref = useRef(null)
   const [length1, setLength1] = useRecoilState(outerLineLength1State)
   const [length2, setLength2] = useRecoilState(outerLineLength2State)
   const [arrow1, setArrow1] = useRecoilState(outerLineArrow1State)
   const [arrow2, setArrow2] = useRecoilState(outerLineArrow2State)
   const [points, setPoints] = useRecoilState(outerLinePointsState)
   const [type, setType] = useRecoilState(outerLineTypeState)
+  const [angle1, setAngle1] = useRecoilState(outerLineAngle1State)
+  const [angle2, setAngle2] = useRecoilState(outerLineAngle2State)
+  const [outerLineDiagonalLength, setOuterLineDiagonalLength] = useRecoilState(outerLineDiagonalState)
   const arrow1Ref = useRef(arrow1)
   const arrow2Ref = useRef(arrow2)
 
+  const outerLineDiagonalLengthRef = useRef(null)
+
   const isFix = useRef(false)
 
-  const [angle1, setAngle1] = useRecoilState(outerLineAngle1State)
+  const closeModalFn = useRef(null)
+
   useEffect(() => {
     if (adsorptionPointAddMode || tempGridMode) {
       return
     }
-    removeMouseEvent('mouse:down', mouseDown)
     addCanvasMouseEventListener('mouse:down', mouseDown)
     clear()
-    return () => {
-      removeAllMouseEventListeners()
-    }
   }, [verticalHorizontalMode, points, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, interval, tempGridMode])
 
   useEffect(() => {
@@ -75,9 +82,8 @@ export function useOuterLineWall() {
   }, [arrow2])
 
   useEffect(() => {
-    removeAllDocumentEventListeners()
-    addDocumentEventListener('keydown', document, keydown[type])
     clear()
+    addDocumentEventListener('keydown', document, keydown[type])
   }, [type])
 
   const clear = () => {
@@ -88,6 +94,9 @@ export function useOuterLineWall() {
     setArrow2('')
 
     setAngle1(0)
+    setAngle2(0)
+
+    setOuterLineDiagonalLength(0)
   }
 
   const mouseDown = (e) => {
@@ -143,14 +152,13 @@ export function useOuterLineWall() {
 
     canvas?.remove(canvas?.getObjects().find((obj) => obj.name === 'startPoint'))
 
-    // point가 변경 될때마다 이벤트 리스너를 제거하고 다시 등록
-    removeAllDocumentEventListeners()
-    addDocumentEventListener('keydown', document, keydown[type])
-
     if (points.length === 0) {
+      removeAllDocumentEventListeners()
       return
     }
 
+    addDocumentEventListener('keydown', document, keydown[type])
+
     if (points.length === 1) {
       const point = new fabric.Circle({
         radius: 5,
@@ -174,6 +182,13 @@ export function useOuterLineWall() {
       const lastPoint = points[points.length - 1]
       const firstPoint = points[0]
 
+      if (isFix.current) {
+        canvas?.renderAll()
+        closeModalFn.current(false)
+        removeAllMouseEventListeners()
+        removeAllDocumentEventListeners()
+      }
+
       if (points.length < 3) {
         return
       }
@@ -241,7 +256,7 @@ export function useOuterLineWall() {
       stroke: 'black',
       strokeWidth: 3,
       idx: idx,
-      selectable: false,
+      selectable: true,
       name: 'outerLine',
     })
   }
@@ -261,7 +276,26 @@ export function useOuterLineWall() {
   }
 
   // 직각 완료될 경우 확인
-  const checkRightAngle = () => {
+  const checkRightAngle = (direction) => {
+    const activeElem = document.activeElement
+
+    const canDirection =
+      direction === '↓' || direction === '↑'
+        ? arrow1Ref.current === '←' || arrow1Ref.current === '→'
+        : arrow1Ref.current === '↓' || arrow1Ref.current === '↑'
+
+    if (activeElem === length1Ref.current || activeElem === angle1Ref.current) {
+      setArrow1(direction)
+      arrow1Ref.current = direction
+      length2Ref.current.focus()
+    } else if (activeElem === length2Ref.current || activeElem === angle2Ref.current) {
+      if (!canDirection) {
+        return
+      }
+      setArrow2(direction)
+      arrow2Ref.current = direction
+    }
+
     const length1Num = Number(length1Ref.current.value) / 10
     const length2Num = Number(length2Ref.current.value) / 10
 
@@ -332,6 +366,191 @@ export function useOuterLineWall() {
     }
   }
 
+  //이구배 완료될 경우 확인 ↓, ↑, ←, →
+  const checkDoublePitch = (direction) => {
+    const activeElem = document.activeElement
+
+    const canDirection =
+      direction === '↓' || direction === '↑'
+        ? arrow1Ref.current === '←' || arrow1Ref.current === '→'
+        : arrow1Ref.current === '↓' || arrow1Ref.current === '↑'
+
+    if (activeElem === length1Ref.current || activeElem === angle1Ref.current) {
+      setArrow1(direction)
+      arrow1Ref.current = direction
+      angle2Ref.current.focus()
+    } else if (activeElem === length2Ref.current || activeElem === angle2Ref.current) {
+      if (!canDirection) {
+        return
+      }
+      setArrow2(direction)
+      arrow2Ref.current = direction
+    }
+
+    const angle1Value = angle1Ref.current.value
+    const angle2Value = angle2Ref.current.value
+    const length1Value = length1Ref.current.value
+    const length2Value = length2Ref.current.value
+
+    const arrow1Value = arrow1Ref.current
+    const arrow2Value = arrow2Ref.current
+
+    if (angle1Value !== 0 && length1Value !== 0 && angle2Value !== 0 && arrow1Value !== '' && arrow2Value !== '') {
+      if (arrow1Value === '↓' && arrow2Value === '→') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+        })
+      } else if (arrow1Value === '↓' && arrow2Value === '←') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+        })
+      } else if (arrow1Value === '↑' && arrow2Value === '→') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
+        })
+      } else if (arrow1Value === '↑' && arrow2Value === '←') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
+        })
+      } else if (arrow1Value === '→' && arrow2Value === '↓') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+        })
+      } else if (arrow1Value === '→' && arrow2Value === '↑') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+        })
+      } else if (arrow1Value === '←' && arrow2Value === '↓') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+        })
+      } else if (arrow1Value === '←' && arrow2Value === '↑') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+        })
+      }
+
+      angle1Ref.current.focus()
+    }
+  }
+
+  //대각선 완료될 경우 확인
+  const checkDiagonal = (direction) => {
+    const activeElem = document.activeElement
+
+    const canDirection =
+      direction === '↓' || direction === '↑'
+        ? arrow1Ref.current === '←' || arrow1Ref.current === '→'
+        : arrow1Ref.current === '↓' || arrow1Ref.current === '↑'
+
+    if (activeElem === length1Ref.current) {
+      setArrow1(direction)
+      arrow1Ref.current = direction
+    } else if (activeElem === length2Ref.current || activeElem === angle2Ref.current) {
+      if (!canDirection) {
+        return
+      }
+      setArrow2(direction)
+      arrow2Ref.current = direction
+    }
+
+    const diagonalLength = outerLineDiagonalLengthRef.current.value // 대각선 길이
+
+    const length1Value = length1Ref.current.value
+
+    const arrow1Value = arrow1Ref.current
+    const arrow2Value = arrow2Ref.current
+
+    const getLength2 = () => {
+      return Math.floor(Math.sqrt(diagonalLength ** 2 - length1Value ** 2))
+    }
+
+    const length2Value = getLength2()
+
+    console.log(length2Value)
+
+    if (diagonalLength !== 0 && length1Value !== 0 && arrow1Value !== '') {
+      setLength2(getLength2())
+      length2Ref.current.focus()
+    }
+
+    if (length1Value !== 0 && length2Value !== 0 && arrow1Value !== '' && arrow2Value !== '') {
+      if (arrow1Value === '↓' && arrow2Value === '→') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+        })
+      } else if (arrow1Value === '↓' && arrow2Value === '←') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+        })
+      } else if (arrow1Value === '↑' && arrow2Value === '→') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+        })
+      } else if (arrow1Value === '↑' && arrow2Value === '←') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+        })
+      } else if (arrow1Value === '→' && arrow2Value === '↓') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+        })
+      } else if (arrow1Value === '→' && arrow2Value === '↑') {
+        setPoints((prev) => {
+          if (prev.length === 0) {
+            return []
+          }
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x + length1Value / 10,
+              y: prev[prev.length - 1].y - length2Value / 10,
+            },
+          ]
+        })
+      }
+    }
+  }
+
   const keydown = {
     outerLine: (e) => {
       if (points.length === 0) {
@@ -411,75 +630,52 @@ export function useOuterLineWall() {
       switch (key) {
         case 'Down': // IE/Edge에서 사용되는 값
         case 'ArrowDown': {
-          if (activeElem === length1Ref.current) {
+          checkRightAngle('↓')
-            setArrow1('↓')
-            arrow1Ref.current = '↓'
-            length2Ref.current.focus()
-          } else if (activeElem === length2Ref.current) {
-            if (arrow1Ref.current === '↓' || arrow1Ref.current === '↑') {
-              break
-            }
-            setArrow2('↓')
-            arrow2Ref.current = '↓'
-            checkRightAngle()
-          }
-
           break
         }
         case 'Up': // IE/Edge에서 사용되는 값
         case 'ArrowUp':
-          if (activeElem === length1Ref.current) {
+          checkRightAngle('↑')
-            setArrow1('↑')
-            arrow1Ref.current = '↑'
-            length2Ref.current.focus()
-          } else if (activeElem === length2Ref.current) {
-            if (arrow1Ref.current === '↓' || arrow1Ref.current === '↑') {
-              break
-            }
-            setArrow2('↑')
-            arrow2Ref.current = '↑'
-            checkRightAngle()
-          }
-
           break
         case 'Left': // IE/Edge에서 사용되는 값
         case 'ArrowLeft':
-          if (activeElem === length1Ref.current) {
+          checkRightAngle('←')
-            setArrow1('←')
-            arrow1Ref.current = '←'
-            length2Ref.current.focus()
-          } else if (activeElem === length2Ref.current) {
-            if (arrow1Ref.current === '←' || arrow1Ref.current === '→') {
-              break
-            }
-            setArrow2('←')
-            arrow2Ref.current = '←'
-            checkRightAngle()
-          }
-
           break
         case 'Right': // IE/Edge에서 사용되는 값
         case 'ArrowRight':
-          if (activeElem === length1Ref.current) {
+          checkRightAngle('→')
-            setArrow1('→')
-            arrow1Ref.current = '→'
-            length2Ref.current.focus()
-          } else if (activeElem === length2Ref.current) {
-            if (arrow1Ref.current === '←' || arrow1Ref.current === '→') {
-              break
-            }
-            setArrow2('→')
-            arrow2Ref.current = '→'
-            checkRightAngle()
-          }
-
           break
       }
     },
-    leeGubae: (e) => {
+    doublePitch: (e) => {
-      console.log('leegubae')
+      if (points.length === 0) {
+        return
+      }
+      const key = e.key
+      switch (key) {
+        case 'Down': // IE/Edge에서 사용되는 값
+        case 'ArrowDown': {
+          checkDoublePitch('↓')
+          break
+        }
+        case 'Up': // IE/Edge에서 사용되는 값
+        case 'ArrowUp':
+          checkDoublePitch('↑')
+          break
+        case 'Left': // IE/Edge에서 사용되는 값
+        case 'ArrowLeft':
+          checkDoublePitch('←')
+          break
+        case 'Right': // IE/Edge에서 사용되는 값
+        case 'ArrowRight':
+          checkDoublePitch('→')
+          break
+      }
     },
     angle: (e) => {
+      if (points.length === 0) {
+        return
+      }
       const key = e.key
       switch (key) {
         case 'Enter': {
@@ -501,7 +697,30 @@ export function useOuterLineWall() {
       }
     },
     diagonalLine: (e) => {
-      console.log('diagonalLine')
+      if (points.length === 0) {
+        return
+      }
+
+      const key = e.key
+      switch (key) {
+        case 'Down': // IE/Edge에서 사용되는 값
+        case 'ArrowDown': {
+          checkDiagonal('↓')
+          break
+        }
+        case 'Up': // IE/Edge에서 사용되는 값
+        case 'ArrowUp':
+          checkDiagonal('↑')
+          break
+        case 'Left': // IE/Edge에서 사용되는 값
+        case 'ArrowLeft':
+          checkDiagonal('←')
+          break
+        case 'Right': // IE/Edge에서 사용되는 값
+        case 'ArrowRight':
+          checkDiagonal('→')
+          break
+      }
     },
   }
 
@@ -513,7 +732,7 @@ export function useOuterLineWall() {
     setPoints((prev) => prev.slice(0, prev.length - 1))
   }
 
-  const handleFix = () => {
+  const handleFix = (fn) => {
     if (points.length < 3) {
       return
     }
@@ -541,6 +760,9 @@ export function useOuterLineWall() {
     setPoints((prev) => {
       return [...prev, { x: prev[0].x, y: prev[0].y }]
     })
+
+    isFix.current = true
+    closeModalFn.current = fn
   }
 
   return {
@@ -558,6 +780,15 @@ export function useOuterLineWall() {
     setArrow2,
     arrow1Ref,
     arrow2Ref,
+    angle1,
+    setAngle1,
+    angle1Ref,
+    angle2,
+    setAngle2,
+    angle2Ref,
+    outerLineDiagonalLength,
+    setOuterLineDiagonalLength,
+    outerLineDiagonalLengthRef,
     type,
     setType,
     handleFix,

src/hooks/roofcover/usePropertiesSetting.js

@@ -0,0 +1,129 @@
+import { useEffect, useRef } from 'react'
+import { LINE_TYPE } from '@/common/common'
+import { useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+
+export function usePropertiesSetting() {
+  const currentLine = useRef(null)
+  const currentIdx = useRef(-1)
+  const canvas = useRecoilValue(canvasState)
+
+  useEffect(() => {
+    selectNextLine()
+  }, [])
+
+  const handleSetEaves = () => {
+    currentLine.current.set({
+      stroke: '#45CD7D',
+      strokeWidth: 4,
+      attributes: {
+        offset: 500,
+        type: LINE_TYPE.WALLLINE.EAVES,
+        pitch: 4,
+      },
+    })
+    canvas.renderAll()
+    selectNextLine()
+  }
+
+  const handleSetGable = () => {
+    currentLine.current.set({
+      stroke: '#3FBAE6',
+      strokeWidth: 4,
+      attributes: {
+        offset: 300,
+        type: LINE_TYPE.WALLLINE.GABLE,
+      },
+    })
+    canvas.renderAll()
+    selectNextLine()
+  }
+
+  const selectNextLine = () => {
+    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    currentIdx.current++
+
+    if (currentIdx.current >= lines.length) {
+      currentIdx.current = lines.length
+      currentLine.current = lines[currentIdx.current - 1]
+      return
+    }
+
+    currentLine.current = lines[currentIdx.current]
+
+    currentLine.current.set({
+      stroke: '#EA10AC',
+      strokeWidth: 4,
+    })
+
+    canvas.renderAll()
+  }
+
+  const selectPrevLine = () => {
+    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+
+    currentIdx.current--
+
+    if (currentIdx.current <= -1) {
+      currentIdx.current = -1
+      selectNextLine()
+      return
+    } else {
+      lines.forEach((line, index) => {
+        if (index >= currentIdx.current) {
+          delete line.attributes
+          line.set({
+            stroke: '#000000',
+            strokeWidth: 4,
+          })
+        }
+        currentIdx.current--
+        canvas.renderAll()
+        selectNextLine()
+      })
+    }
+  }
+
+  const handleRollback = () => {
+    selectPrevLine()
+  }
+
+  const handleFix = () => {
+    if (!confirm('외벽선 속성 설정을 완료하시겠습니까?')) {
+      return
+    }
+    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+
+    lines.forEach((line) => {
+      line.set({
+        attributes: line.attributes ? line.attributes : { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
+        stroke: '#000000',
+        strokeWidth: 4,
+      })
+    })
+
+    canvas.renderAll()
+  }
+
+  const closeModal = (fn) => {
+    if (!confirm('외벽선 속성 설정을 종료 하시겠습니까?')) {
+      return
+    }
+
+    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+
+    lines.forEach((line) => {
+      line.set({
+        attributes: { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
+        stroke: '#000000',
+        strokeWidth: 4,
+      })
+    })
+
+    canvas.renderAll()
+
+    fn(false)
+  }
+
+  return { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal }
+}

src/hooks/useAdsorptionPoint.js

@@ -26,7 +26,7 @@ export function useAdsorptionPoint() {
       top: pointer.y - 3,
       x: pointer.x,
       y: pointer.y,
-      selectable: false,
+      selectable: true,
       name: 'adsorptionPoint',
     })
 

src/hooks/useAxios.js

@@ -79,5 +79,9 @@ export function useAxios(lang = '') {
       .catch(console.error)
   }
 
-  return { get, promiseGet, post, promisePost, put, promisePut, patch, del }
+  const promiseDel = async ({ url }) => {
+    return await getInstances(url).delete(url)
+  }
+
+  return { get, promiseGet, post, promisePost, put, promisePut, patch, del, promiseDel }
 }

src/hooks/useCanvas.js

@@ -36,6 +36,7 @@ export function useCanvas(id) {
 
     setCanvas(c)
     setCanvasForEvent(c)
+    attachDefaultEventOnCanvas()
 
     return () => {
       // c.dispose()
@@ -45,7 +46,6 @@ export function useCanvas(id) {
 
   useEffect(() => {
     // canvas 사이즈가 변경되면 다시
-    attachDefaultEventOnCanvas()
   }, [canvasSize])
 
   useEffect(() => {
@@ -91,6 +91,13 @@ export function useCanvas(id) {
     // settings for all canvas in the app
     fabric.Object.prototype.transparentCorners = false
     fabric.Object.prototype.id = uuidv4()
+    fabric.Object.prototype.selectable = true
+    fabric.Object.prototype.lockMovementX = true
+    fabric.Object.prototype.lockMovementY = true
+    fabric.Object.prototype.lockRotation = true
+    fabric.Object.prototype.lockScalingX = true
+    fabric.Object.prototype.lockScalingY = true
+
     fabric.Object.prototype.cornerColor = '#2BEBC8'
     fabric.Object.prototype.cornerStyle = 'rect'
     fabric.Object.prototype.cornerStrokeColor = '#2BEBC8'

src/hooks/useDotLineGrid.js

@@ -6,6 +6,7 @@ import { gridColorState } from '@/store/gridAtom'
 
 export function useDotLineGrid() {
   const canvas = useRecoilValue(canvasState)
+
   const gridColor = useRecoilValue(gridColorState)
   const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
   const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격

src/hooks/useEvent.js

@@ -1,24 +1,16 @@
 import { useEffect, useRef } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import {
+import { canvasState, canvasZoomState, currentMenuState } from '@/store/canvasAtom'
-  adsorptionPointAddModeState,
-  adsorptionPointModeState,
-  adsorptionRangeState,
-  canvasState,
-  canvasZoomState,
-  currentMenuState,
-} from '@/store/canvasAtom'
 import { fabric } from 'fabric'
-import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
+import { calculateDistance, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
-import { useMouse } from '@/hooks/useMouse'
 import { useDotLineGrid } from '@/hooks/useDotLineGrid'
 import { useTempGrid } from '@/hooks/useTempGrid'
 
 export function useEvent() {
   const canvas = useRecoilValue(canvasState)
   const currentMenu = useRecoilValue(currentMenuState)
-  const keyboardEventListeners = useRef([])
+  const documentEventListeners = useRef([])
   const mouseEventListeners = useRef([])
   const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
 
@@ -30,9 +22,8 @@ export function useEvent() {
     if (!canvas) {
       return
     }
-    removeAllMouseEventListeners()
     removeAllDocumentEventListeners()
-
+    removeAllMouseEventListeners()
     /**
      * wheelEvent
      */
@@ -193,13 +184,14 @@ export function useEvent() {
   }
 
   const addCanvasMouseEventListener = (eventType, handler) => {
+    canvas.off(eventType)
     canvas.on(eventType, handler)
     mouseEventListeners.current.push({ eventType, handler })
   }
 
   const removeAllMouseEventListeners = () => {
     mouseEventListeners.current.forEach(({ eventType, handler }) => {
-      canvas.off(eventType, handler)
+      canvas.off(eventType)
     })
     mouseEventListeners.current.length = 0 // 배열 초기화
   }
@@ -211,24 +203,36 @@ export function useEvent() {
    * @param handler
    */
   const addDocumentEventListener = (eventType, element, handler) => {
+    removeDocumentEvent(eventType)
     element.addEventListener(eventType, handler)
-    keyboardEventListeners.current.push({ eventType, element, handler })
+    documentEventListeners.current.push({ eventType, element, handler })
   }
 
   /**
    * document에 등록되는 event 제거
    */
   const removeAllDocumentEventListeners = () => {
-    keyboardEventListeners.current.forEach(({ eventType, element, handler }) => {
+    documentEventListeners.current.forEach(({ eventType, element, handler }) => {
       element.removeEventListener(eventType, handler)
     })
-    keyboardEventListeners.current.length = 0 // 배열 초기화
+    documentEventListeners.current.length = 0 // 배열 초기화
   }
 
-  const removeMouseEvent = (type, handler) => {
+  const removeMouseEvent = (type) => {
     mouseEventListeners.current = mouseEventListeners.current.filter((event) => {
-      if (event.type === type && event.handler === handler) {
+      if (event.eventType === type) {
-        canvas.off(type, handler)
+        canvas.off(type, event.handler)
+        return false
+      }
+      return true
+    })
+  }
+
+  const removeDocumentEvent = (type) => {
+    documentEventListeners.current = documentEventListeners.current.filter((event) => {
+      if (event.eventType === type) {
+        console.log(type)
+        event.element.removeEventListener(type, event.handler)
         return false
       }
       return true

src/hooks/useLine.js

@@ -38,6 +38,7 @@ export const useLine = () => {
   const removeLine = (line) => {
     removeLineText(line)
     canvas?.remove(line)
+    canvas?.renderAll()
   }
 
   const removeLineText = (line) => {

src/hooks/useMode.js

@@ -39,6 +39,7 @@ import * as turf from '@turf/turf'
 import { INPUT_TYPE, Mode } from '@/common/common'
 import { m } from 'framer-motion'
 import { set } from 'react-hook-form'
+import { FaWineGlassEmpty } from 'react-icons/fa6'
 
 export function useMode() {
   const [mode, setMode] = useRecoilState(modeState)
@@ -4851,6 +4852,12 @@ export function useMode() {
     )
   }
 
+  const coordToTurfPolygon = (points) => {
+    const coordinates = points.map((point) => [point.x, point.y])
+    coordinates.push(coordinates[0])
+    return turf.polygon([coordinates])
+  }
+
   /**
    * trestle에서 영역을 가져와 mouse:move 이벤트로 해당 영역에 진입했을때 booleanPointInPolygon 로 진입여부를 확인
    * 확인 후 셀을 이동시킴
@@ -4859,58 +4866,125 @@ export function useMode() {
     const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle') //가대를 가져옴
 
     if (trestlePolygons.length !== 0) {
-      let lastPointPosition = { x: 0, y: 0 }
       let fabricPolygon = null
       let inside = false
       let turfPolygon
-      let manualDrawCells = drewRoofCells //
+      let manualDrawCells = drewRoofCells // 앞에서 자동으로 했을때 추가됨
-
+      let direction
       canvas.on('mouse:move', (e) => {
         //마우스 이벤트 삭제 후 재추가
         const mousePoint = canvas.getPointer(e.e)
-        const turfPoint = turf.point([mousePoint.x, mousePoint.y])
-
         for (let i = 0; i < trestlePolygons.length; i++) {
           turfPolygon = polygonToTurfPolygon(trestlePolygons[i])
-          if (turf.booleanPointInPolygon(turfPoint, turfPolygon)) {
+          direction = trestlePolygons[i].direction //도형의 방향
+          let width = direction === 'south' || direction === 'north' ? 172 : 113
+          let height = direction === 'south' || direction === 'north' ? 113 : 172
+
+          const points = [
+            { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
+            { x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
+            { x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
+            { x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
+          ]
+
+          const turfPoints = coordToTurfPolygon(points)
+
+          if (turf.booleanWithin(turfPoints, turfPolygon)) {
             //turf에 보면 폴리곤안에 포인트가 있는지 함수가 있다
-            const direction = trestlePolygons[i].direction //도형의 방향
-            let width = direction === 'south' || direction === 'north' ? 172.2 : 113.4
-            let height = direction === 'south' || direction === 'north' ? 113.4 : 172.2
-            if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) {
-              let isDrawing = false
 
-              if (isDrawing) return
+            // if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) {
-              canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
+            let isDrawing = false
 
-              const points = [
+            if (isDrawing) return
-                { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
+            canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
-                { x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
-                { x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
-                { x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
-              ]
 
-              fabricPolygon = new QPolygon(points, {
+            fabricPolygon = new QPolygon(points, {
-                fill: '#BFFD9F',
+              fill: '#BFFD9F',
-                stroke: 'black',
+              // stroke: 'black',
-                selectable: false, // 선택 가능하게 설정
+              // strokeWidth: 1,
-                lockMovementX: true, // X 축 이동 잠금
+              selectable: false, // 선택 가능하게 설정
-                lockMovementY: true, // Y 축 이동 잠금
+              lockMovementX: true, // X 축 이동 잠금
-                lockRotation: true, // 회전 잠금
+              lockMovementY: true, // Y 축 이동 잠금
-                lockScalingX: true, // X 축 크기 조정 잠금
+              lockRotation: true, // 회전 잠금
-                lockScalingY: true, // Y 축 크기 조정 잠금
+              lockScalingX: true, // X 축 크기 조정 잠금
-                opacity: 0.8,
+              lockScalingY: true, // Y 축 크기 조정 잠금
-                parentId: trestlePolygons[i].parentId,
+              opacity: 0.8,
-                name: 'tmpCell',
+              parentId: trestlePolygons[i].parentId,
-              })
+              name: 'tmpCell',
+            })
 
-              canvas?.add(fabricPolygon) //움직여가면서 추가됨
+            canvas?.add(fabricPolygon) //움직여가면서 추가됨
-              lastPointPosition = { x: mousePoint.x, y: mousePoint.y }
+
+            /**
+             * 스냅기능
+             */
+            let snapDistance = 20
+
+            const bigLeft = trestlePolygons[i].left
+            const bigTop = trestlePolygons[i].top
+            const bigRight = bigLeft + trestlePolygons[i].width * trestlePolygons[i].scaleX
+            const bigBottom = bigTop + trestlePolygons[i].height * trestlePolygons[i].scaleY
+            const bigCenter = (bigTop + bigTop + trestlePolygons[i].height) / 2
+
+            // 작은 폴리곤의 경계 좌표 계산
+            const smallLeft = fabricPolygon.left
+            const smallTop = fabricPolygon.top
+            const smallRight = smallLeft + fabricPolygon.width * fabricPolygon.scaleX
+            const smallBottom = smallTop + fabricPolygon.height * fabricPolygon.scaleY
+            const smallCenter = smallLeft + (fabricPolygon.width * fabricPolygon.scaleX) / 2
+
+            // 위쪽 변에 스냅
+            if (Math.abs(smallTop - bigTop) < snapDistance) {
+              fabricPolygon.top = bigTop
             }
 
+            // 아래쪽 변에 스냅
+            if (Math.abs(smallTop + fabricPolygon.height * fabricPolygon.scaleY - (bigTop + trestlePolygons[i].height)) < snapDistance) {
+              fabricPolygon.top = bigTop + trestlePolygons[i].height - fabricPolygon.height * fabricPolygon.scaleY
+            }
+
+            // 왼쪽변에 스냅
+            if (Math.abs(smallLeft - bigLeft) < snapDistance) {
+              fabricPolygon.left = bigLeft
+            }
+            //오른쪽 변에 스냅
+            if (Math.abs(smallRight - bigRight) < snapDistance) {
+              fabricPolygon.left = bigRight - fabricPolygon.width * fabricPolygon.scaleX
+            }
+
+            if (direction === 'south' || direction === 'north') {
+              // 모듈왼쪽이 세로중앙선에 붙게 스냅
+              if (Math.abs(smallLeft - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
+                fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2
+              }
+
+              // 모듈이 가운데가 세로중앙선에 붙게 스냅
+              if (Math.abs(smallCenter - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
+                fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2 - (fabricPolygon.width * fabricPolygon.scaleX) / 2
+              }
+
+              // 모듈오른쪽이 세로중앙선에 붙게 스냅
+              if (Math.abs(smallRight - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
+                fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2 - fabricPolygon.width * fabricPolygon.scaleX
+              }
+            } else {
+              // 모듈이 가로중앙선에 스냅
+              if (Math.abs(smallTop + fabricPolygon.height / 2 - bigCenter) < snapDistance) {
+                fabricPolygon.top = bigCenter - fabricPolygon.height / 2
+              }
+
+              if (Math.abs(smallTop - (bigTop + trestlePolygons[i].height / 2)) < snapDistance) {
+                fabricPolygon.top = bigTop + trestlePolygons[i].height / 2
+              }
+              // 모듈 밑면이 가로중앙선에 스냅
+              if (Math.abs(smallBottom - (bigTop + trestlePolygons[i].height / 2)) < snapDistance) {
+                fabricPolygon.top = bigTop + trestlePolygons[i].height / 2 - fabricPolygon.height * fabricPolygon.scaleY
+              }
+            }
+
+            fabricPolygon.setCoords()
             canvas?.renderAll()
             inside = true
-            break
           } else {
             inside = false
           }
@@ -4926,20 +5000,26 @@ export function useMode() {
         if (!inside) return
         if (fabricPolygon) {
           const turfCellPolygon = polygonToTurfPolygon(fabricPolygon)
-
+          fabricPolygon.setCoords() //좌표 재정렬
           if (turf.booleanWithin(turfCellPolygon, turfPolygon)) {
             //마우스 클릭시 set으로 해당 위치에 셀을 넣음
+
+            manualDrawCells.forEach((cell) => {
+              console.log('cells', cell.points)
+            })
+            console.log('turfCellPolygon', turfCellPolygon.geometry.coordinates)
+
             const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(turfCellPolygon, polygonToTurfPolygon(cell)))
             if (!isOverlap) {
               //안겹치면 넣는다
-              fabricPolygon.set({ name: 'cell' })
               fabricPolygon.setCoords()
+              fabricPolygon.set({ name: 'cell' })
               manualDrawCells.push(fabricPolygon)
             } else {
               alert('셀끼리 겹치면 안되죠?')
             }
-          } else {
+            // } else {
-            alert('나갔으요!!')
+            //   alert('나갔으요!!')
           }
           setDrewRoofCells(manualDrawCells)
         }
@@ -5016,27 +5096,6 @@ export function useMode() {
 
       // console.log('bbox', bbox)
 
-      const boxes = []
-      const installedCellsArray = []
-
-      for (let x = bbox[0]; x < bbox[2]; x += width) {
-        for (let y = bbox[1]; y < bbox[3]; y += height) {
-          const box = turf.polygon([
-            [
-              [x, y],
-              [x + width, y],
-              [x + width, y + height],
-              [x, y + height],
-              [x, y],
-            ],
-          ])
-
-          if (turf.booleanWithin(box, turfTrestlePolygon)) {
-            boxes.push(box)
-          }
-        }
-      }
-
       for (let col = 0; col <= cols; col++) {
         for (let row = 0; row <= rows; row++) {
           let x = 0,
@@ -5086,20 +5145,6 @@ export function useMode() {
 
           const squarePolygon = turf.polygon([square])
 
-          // console.log('turfTrestlePolygon', turfTrestlePolygon)
-          // console.log('squarePolygon', squarePolygon)
-
-          const areaSize = turf.area(turfTrestlePolygon)
-
-          // console.log('areaSize', areaSize)
-          const objSize = turf.area(squarePolygon)
-
-          // console.log('objSize', objSize)
-
-          const maxObject = Math.floor(areaSize / objSize)
-
-          // console.log('maxObjectSize', maxObject)
-
           const disjointFromTrestle = turf.booleanContains(turfTrestlePolygon, squarePolygon) || turf.booleanWithin(squarePolygon, turfTrestlePolygon)
 
           if (disjointFromTrestle) {
@@ -5140,6 +5185,8 @@ export function useMode() {
                 lockScalingY: true, // Y 축 크기 조정 잠금
                 opacity: 0.8,
                 parentId: trestle.parentId,
+                lineCol: col,
+                lineRow: row,
               })
               canvas?.add(fabricPolygon)
               drawCellsArray.push(fabricPolygon)

src/hooks/usePlan.js

@@ -2,18 +2,15 @@ import { useRecoilState } from 'recoil'
 import { canvasState, currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
-import { toastUp } from '@/hooks/useToast'
+import { useSwal } from '@/hooks/useSwal'
-import { sessionStore } from '@/store/commonAtom'
-import { useState } from 'react'
 
 export function usePlan() {
   const [canvas, setCanvas] = useRecoilState(canvasState)
   const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
+  const { swalFire } = useSwal()
   const { getMessage } = useMessage()
-  const { get, promisePost, promisePut } = useAxios()
+  const { get, promisePost, promisePut, promiseDel } = useAxios()
-  const [sessionState, setSessionState] = useRecoilState(sessionStore)
-  const [userId, setUserId] = useState(sessionState.userId)
 
   /**
    * 마우스 포인터의 가이드라인을 제거합니다.
@@ -103,14 +100,14 @@ export function usePlan() {
 
       await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
         .then((res) => {
-          toastUp({ message: getMessage('common.message.save'), type: 'success' }) // 성공 시 메세지 없음
+          swalFire({ text: getMessage('common.message.save') })
           console.log('[PUT] canvas-statuses res :::::::: %o', res)
           setInitCanvasPlans((initCanvasPlans) =>
             initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
           )
         })
         .catch((error) => {
-          toastUp({ message: error.message, type: 'error' })
+          swalFire({ text: error.message, icon: 'error' })
           console.error('[PUT] canvas-statuses error :::::::: %o', error)
         })
     } else {
@@ -124,11 +121,11 @@ export function usePlan() {
 
       await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
         .then((res) => {
-          toastUp({ message: getMessage('common.message.save'), type: 'success' }) // 성공 시 메세지 없음
+          swalFire({ text: getMessage('common.message.save') })
           console.log('[POST] canvas-statuses response :::::::: %o', res)
         })
         .catch((error) => {
-          toastUp({ message: error.message, type: 'error' })
+          swalFire({ text: error.message, icon: 'error' })
           console.error('[POST] canvas-statuses res error :::::::: %o', error)
         })
     }
@@ -137,7 +134,7 @@ export function usePlan() {
   /**
    * objectNo에 해당하는 canvas 목록을 조회하는 함수
    */
-  const getCanvasByObjectNo = async (objectNo) => {
+  const getCanvasByObjectNo = async (userId, objectNo) => {
     return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
       res.map((item) => ({
         id: item.id,
@@ -149,11 +146,26 @@ export function usePlan() {
     )
   }
 
+  /**
+   * id에 해당하는 canvas 데이터를 삭제하는 함수
+   */
+  const delCanvasById = (id) => {
+    return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
+  }
+
+  /**
+   * objectNo에 해당하는 canvas 데이터들을 삭제하는 함수
+   */
+  const delCanvasByObjectNo = (objectNo) => {
+    return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
+  }
+
   return {
     canvas,
     removeMouseLines,
     saveCanvas,
     addCanvas,
     getCanvasByObjectNo,
+    delCanvasById,
   }
 }

src/locales/ja.json

@@ -32,6 +32,7 @@
   "modal.cover.outline.arrow": "方向 (矢印)",
   "modal.cover.outline.fix": "外壁線確定",
   "modal.cover.outline.rollback": "一変戦に戻る",
+  "modal.cover.outline.finish": "設定完了",
   "modal.cover.outline.remove": "外壁の削除",
   "modal.cover.outline.select.move": "外壁の選択、移動",
   "plan.menu.roof.cover.roof.setting": "屋根形状設定",
@@ -115,6 +116,11 @@
   "modal.canvas.setting.first.option.border": "ボーダーのみ",
   "modal.canvas.setting.first.option.line": "ラインハッチ",
   "modal.canvas.setting.first.option.all": "All painted",
+  "modal.canvas.setting.wallline.properties.setting": "外壁のプロパティの設定",
+  "modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定 ボタンをクリックして設定値を適用します。",
+  "modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定",
+  "modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定",
+  "setting": "設定",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
   "common.message.noData": "表示するデータがありません",

src/locales/ko.json

@@ -36,6 +36,7 @@
   "modal.cover.outline.arrow": "방향(화살표)",
   "modal.cover.outline.fix": "외벽선 확정",
   "modal.cover.outline.rollback": "일변전으로 돌아가기",
+  "modal.cover.outline.finish": "설정완료",
   "modal.cover.outline.remove": "외벽 제거",
   "modal.cover.outline.select.move": "외벽 선택, 이동",
   "plan.menu.placement.surface": "배치면",
@@ -116,6 +117,11 @@
   "modal.canvas.setting.first.option.border": "테두리만",
   "modal.canvas.setting.first.option.line": "라인해치",
   "modal.canvas.setting.first.option.all": "All painted",
+  "modal.canvas.setting.wallline.properties.setting": "외벽선 속성 설정",
+  "modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고, 처마로 설정 또는 케라바로 설정\n    버튼을 클릭하여 설정값을 적용하십시오.\n",
+  "modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정",
+  "modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정",
+  "setting": "설정",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",
   "common.message.noData": "No data to display",