From 637c7a75d5c1a0627e248e116df391ffaf5268c4 Mon Sep 17 00:00:00 2001
From: Jaeyoung Lee <kkang090@gmail.com>
Date: Fri, 25 Oct 2024 10:52:54 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B3=80=EB=B3=84=EB=A1=9C=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EC=9E=91=EC=97=85=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/dictionary.txt               |    1 +
 src/common/common.js              |    1 +
 src/components/Roof2.jsx          |   56 +-
 src/components/fabric/QPolygon.js |   66 +-
 src/hooks/useMode.js              |   53 +-
 src/util/canvas-util.js           |   10 +
 src/util/qpolygon-utils.js        | 1348 +++++++++++++++++------------
 7 files changed, 935 insertions(+), 600 deletions(-)

diff --git a/docs/dictionary.txt b/docs/dictionary.txt
index 7e07124d..f5f461b7 100644
--- a/docs/dictionary.txt
+++ b/docs/dictionary.txt
@@ -18,6 +18,7 @@
 출폭: offset
 폭: width
 경사(구배): pitch
+각도: degree
 이구배: doublePitch
 소매: sleeve
 개구: openSpace
diff --git a/src/common/common.js b/src/common/common.js
index 2319279b..5a14fa38 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -115,5 +115,6 @@ export const INPUT_TYPE = {
 
 export const POLYGON_TYPE = {
   ROOF: 'roof',
+  WALL: 'wall',
   TRESTLE: 'trestle',
 }
diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 2fe86ecc..fad075bd 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -39,7 +39,7 @@ import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMen
 import InitSettingsModal from './InitSettingsModal'
 import GridSettingsModal from './GridSettingsModal'
 import { SurfaceShapeModal } from '@/components/ui/SurfaceShape'
-import { changeHipAndGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
+import { changeCurrentRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
 import ThumbnailList from '@/components/ui/ThumbnailLIst'
 import ObjectPlacement from '@/components/ui/ObjectPlacement'
 import { globalLocaleStore } from '@/store/localeAtom'
@@ -431,7 +431,7 @@ export default function Roof2(props) {
       { x: 450, y: 850 },
     ]
 
-    const polygon = new QPolygon(rectangleType1, {
+    const polygon = new QPolygon(rectangleType2, {
       fill: 'transparent',
       stroke: 'green',
       strokeWidth: 1,
@@ -672,18 +672,52 @@ export default function Roof2(props) {
     canvas?.renderAll()
   }
 
+  const setHipRoof = () => {
+    const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
+    const currentRoof = polygon.lines[2]
+    currentRoof.attributes.type = LINE_TYPE.WALLLINE.EAVES
+    currentRoof.attributes.offset = 50
+    changeCurrentRoof(currentRoof, canvas)
+  }
   const setGableRoof = () => {
-    let offset = Number(prompt('gable roof offset', '50'))
+    const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
+    const currentRoof = polygon.lines[2]
+    currentRoof.attributes.type = LINE_TYPE.WALLLINE.GABLE
+    currentRoof.attributes.offset = 30
+    changeCurrentRoof(currentRoof, canvas)
+  }
+  const setHipAndGableRoof = () => {
+    let offset = Number(prompt('팔작지붕 폭', '50'))
     if (!isNaN(offset) && offset > 0) {
       const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
-      const currentRoof = polygon.lines[3]
+      const currentRoof = polygon.lines[2]
       currentRoof.attributes.type = LINE_TYPE.WALLLINE.HIPANDGABLE
       currentRoof.attributes.width = offset
-      changeHipAndGableRoof(currentRoof, canvas)
+      changeCurrentRoof(currentRoof, canvas)
     } else {
-      alert('offset 은 0 보다 커야 함')
+      alert('폭은 0 보다 커야 함')
     }
   }
+  const setJerkInHeadRoof = () => {
+    let offset = Number(prompt('팔작지붕 폭', '50'))
+    if (!isNaN(offset) && offset > 0) {
+      const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
+      const currentRoof = polygon.lines[2]
+      currentRoof.attributes.type = LINE_TYPE.WALLLINE.JERKINHEAD
+      currentRoof.attributes.width = offset
+      changeCurrentRoof(currentRoof, canvas)
+    } else {
+      alert('폭은 0 보다 커야 함')
+    }
+  }
+  const setWallRoof = () => {
+    let offset = Number(prompt('소매 폭', '0'))
+    const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
+    const currentRoof = polygon.lines[2]
+    currentRoof.attributes.type = LINE_TYPE.WALLLINE.WALL
+    currentRoof.attributes.width = offset
+    changeCurrentRoof(currentRoof, canvas)
+  }
   return (
     <>
       {canvas && (
@@ -810,19 +844,19 @@ export default function Roof2(props) {
             </Button>
             {/*  </>*/}
             {/*)}*/}
-            <Button className={'m-1 p-2'} onClick={null}>
+            <Button className={'m-1 p-2'} onClick={setHipRoof}>
               용마루지붕
             </Button>
-            <Button className={'m-1 p-2'} onClick={setGableRoof}>
+            <Button className={'m-1 p-2'} onClick={setHipAndGableRoof}>
               팔작지붕
             </Button>
-            <Button className={'m-1 p-2'} onClick={null}>
+            <Button className={'m-1 p-2'} onClick={setGableRoof}>
               박공지붕
             </Button>
-            <Button className={'m-1 p-2'} onClick={null}>
+            <Button className={'m-1 p-2'} onClick={setJerkInHeadRoof}>
               반절처지붕
             </Button>
-            <Button className={'m-1 p-2'} onClick={null}>
+            <Button className={'m-1 p-2'} onClick={setWallRoof}>
               벽지붕
             </Button>
             <Button className="m-1 p-2" onClick={() => saveImage(uuidv4(), userId, setThumbnails)}>
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index d554a700..3cbb45e1 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -2,26 +2,36 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { calculateAngle, drawDirectionArrow, drawRidgeRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
+import { calculateAngle, drawRidgeRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
+import { LINE_TYPE } from '@/common/common'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
-  lines: [],
-  texts: [],
+  // lines: [],
+  // texts: [],
   id: null,
   length: 0,
-  hips: [],
-  ridges: [],
-  connectRidges: [],
-  cells: [],
+  // hips: [],
+  // ridges: [],
+  // connectRidges: [],
+  // cells: [],
   parentId: null,
-  innerLines: [],
-  children: [],
+  // innerLines: [],
+  // children: [],
   initOptions: null,
   direction: null,
   arrow: null,
   initialize: function (points, options, canvas) {
+    this.lines = []
+    this.texts = []
+    this.hips = []
+    this.ridges = []
+    this.connectRidges = []
+    this.cells = []
+    this.innerLines = []
+    this.children = []
+
     // 소수점 전부 제거
     points.forEach((point) => {
       point.x = Math.round(point.x)
@@ -180,10 +190,42 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   },
 
   // 보조선 그리기
-  drawHelpLine(pitch = 4) {
+  drawHelpLine() {
     // drawHelpLineInHexagon(this, pitch)
-    console.log('drawHelpLine roofId : ', this.id)
-    drawRidgeRoof(this.id, pitch, this.canvas)
+    const types = []
+    this.lines.forEach((line) => types.push(line.attributes.type))
+
+    const eavesType = [LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.HIPANDGABLE]
+    const gableType = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
+
+    const isEaves = types.every((type) => eavesType.includes(type))
+    const gableOdd = types.filter((type, i) => i % 2 === 0)
+    const gableEven = types.filter((type, i) => i % 2 === 1)
+    const hasShed = types.includes(LINE_TYPE.WALLLINE.SHED)
+
+    // A형, B형 박공 지붕
+    if (
+      (gableOdd.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && gableEven.every((type) => gableType.includes(type))) ||
+      (gableEven.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && gableOdd.every((type) => gableType.includes(type)))
+    ) {
+      console.log('박공 지붕')
+    } else if (hasShed) {
+      //편류지붕
+      let shedIndex = 0
+      types.forEach((type, i) => {
+        if (type === LINE_TYPE.WALLLINE.SHED) {
+          shedIndex = i
+        }
+      })
+      const shedOdd = types.filter((type, i) => i % 2 === shedIndex % 2).filter((type) => type !== LINE_TYPE.WALLLINE.SHED)
+      const shedEven = types.filter((type, i) => i % 2 !== shedIndex % 2)
+      types.forEach((type, i) => console.log(type, i, i % 2, shedIndex % 2, i % 2 === shedIndex % 2))
+      if (shedOdd.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && shedEven.every((type) => type === LINE_TYPE.WALLLINE.GABLE)) {
+        console.log('편류지붕')
+      }
+    } else {
+      drawRidgeRoof(this.id, this.canvas)
+    }
   },
 
   addLengthText() {
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 13b6693a..ed3aa8cd 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -36,7 +36,7 @@ import { QPolygon } from '@/components/fabric/QPolygon'
 import offsetPolygon from '@/util/qpolygon-utils'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import * as turf from '@turf/turf'
-import { INPUT_TYPE, LINE_TYPE, Mode } from '@/common/common'
+import { INPUT_TYPE, Mode, POLYGON_TYPE } from '@/common/common'
 
 export function useMode() {
   const [mode, setMode] = useRecoilState(modeState)
@@ -1506,32 +1506,23 @@ export function useMode() {
    *벽 지붕 외곽선 생성 polygon을 입력받아 만들기
    */
   const handleOuterlinesTest2 = (polygon, offset = 50) => {
-    console.log('polygon : ', polygon)
     // TODO [ljyoung] : offset 입력 처리 후 제거 해야함.
     polygon.lines.forEach((line, index) => {
-      line.attributes = {
+      /*line.attributes = {
         type: LINE_TYPE.WALLLINE.EAVES,
         offset: 40,
         width: 50,
         pitch: 4,
         sleeve: true,
-      }
+      }*/
       /*if (index === 1 || index === 3) {
         line.attributes = {
           type: LINE_TYPE.WALLLINE.WALL,
-          offset: 0, //출폭
+          offset: 50, //출폭
           width: 30, //폭
           pitch: 4, //구배
           sleeve: true, //소매
         }
-      } else if (index === 0) {
-        line.attributes = {
-          type: LINE_TYPE.WALLLINE.EAVES,
-          offset: 0,
-          width: 50,
-          pitch: 4,
-          sleeve: true,
-        }
       } else {
         line.attributes = {
           type: LINE_TYPE.WALLLINE.EAVES,
@@ -1541,6 +1532,31 @@ export function useMode() {
           sleeve: true,
         }
       }*/
+      /* if (index === 1) {
+        line.attributes = {
+          type: LINE_TYPE.WALLLINE.SHED,
+          offset: 20, //출폭
+          width: 30, //폭
+          pitch: 4, //구배
+          sleeve: true, //소매
+        }
+      } else if (index === 3) {
+        line.attributes = {
+          type: LINE_TYPE.WALLLINE.EAVES,
+          offset: 50, //출폭
+          width: 30, //폭
+          pitch: 4, //구배
+          sleeve: true, //소매
+        }
+      } else {
+        line.attributes = {
+          type: LINE_TYPE.WALLLINE.GABLE,
+          offset: 30,
+          width: 50,
+          pitch: 4,
+          sleeve: true,
+        }
+      }*/
     })
 
     const roof = drawRoofPolygon(polygon) //지붕 그리기
@@ -1730,7 +1746,7 @@ export function useMode() {
         return { x1: point.x, y1: point.y }
       }),
     )
-    roof.name = 'roof'
+    roof.name = POLYGON_TYPE.ROOF
     roof.setWall(wall)
 
     roof.lines.forEach((line, index) => {
@@ -1750,13 +1766,12 @@ export function useMode() {
     }
 
     wall.lines.forEach((line, index) => {
-      line.attributes = {
-        roofId: roof.id,
-      }
+      line.attributes.roofId = roof.id
+      line.attributes.currentRoof = roof.lines[index].id
     })
 
-    console.log('roof : ', roof)
-    console.log('wall : ', wall)
+    console.log('drawRoofPolygon roof : ', roof)
+    console.log('drawRoofPolygon wall : ', wall)
 
     setRoof(roof)
     setWall(wall)
diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js
index 17c30f07..92b4dd39 100644
--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@@ -1,5 +1,6 @@
 import { intersect } from 'mathjs'
 import * as turf from '@turf/turf'
+
 /**
  * Collection of function to use on canvas
  */
@@ -261,6 +262,15 @@ export const getDegreeByChon = (chon) => {
   return Number((radians * (180 / Math.PI)).toFixed(2))
 }
 
+/**
+ * 각도를 입력받아 촌을 반환
+ * @param degree
+ * @returns {number}
+ */
+export const getChonByDegree = (degree) => {
+  return Number((Math.tan((degree * Math.PI) / 180) * 10).toFixed(2))
+}
+
 /**
  * 두 점 사이의 방향을 반환합니다.
  * @param a {fabric.Object}
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 35427940..af084926 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -3,7 +3,7 @@ import { QLine } from '@/components/fabric/QLine'
 import { calculateIntersection, distanceBetweenPoints, findClosestPoint, getDirectionByPoint } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import * as turf from '@turf/turf'
-import { LINE_TYPE } from '@/common/common'
+import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 
 const TWO_PI = Math.PI * 2
 
@@ -1195,8 +1195,7 @@ function calculateAngleBetweenLines(line1, line2) {
   return (angleInRadians * 180) / Math.PI
 }
 
-export const drawRidgeRoof = (roofId, pitch, canvas) => {
-  console.log('drawRidgeRoof : ', roofId)
+export const drawRidgeRoof = (roofId, canvas) => {
   const roof = canvas?.getObjects().find((object) => object.id === roofId)
   const hasNonParallelLines = roof.lines.filter((line) => line.x1 !== line.x2 && line.y1 !== line.y2)
   if (hasNonParallelLines.length > 0) {
@@ -1216,20 +1215,17 @@ export const drawRidgeRoof = (roofId, pitch, canvas) => {
  * @param canvas
  */
 const drawRidge = (roof, canvas) => {
-  const walls = canvas?.getObjects().find((object) => object.name === 'wall' && object.attributes.roofId === roof.id).lines // 외벽의 라인
-  const roofs = roof.lines // 지붕의 라인
+  const wallLines = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.WALL && object.attributes.roofId === roof.id).lines // 외벽의 라인
+  const roofLines = roof.lines // 지붕의 라인
   let ridgeRoof = []
-  console.log('drawRidge : ', roof.ridges)
-  console.log('walls : ', walls)
-  console.log('roofs : ', roofs)
 
-  roofs.forEach((currentRoof, index) => {
+  roofLines.forEach((currentRoof, index) => {
     let prevRoof,
       nextRoof,
-      currentWall = walls[index]
+      currentWall = wallLines[index]
 
-    prevRoof = index === 0 ? walls[walls.length - 1] : walls[index - 1]
-    nextRoof = index === walls.length - 1 ? walls[0] : index === walls.length ? walls[1] : walls[index + 1]
+    prevRoof = index === 0 ? wallLines[wallLines.length - 1] : wallLines[index - 1]
+    nextRoof = index === wallLines.length - 1 ? wallLines[0] : index === wallLines.length ? wallLines[1] : wallLines[index + 1]
 
     if (prevRoof.direction !== nextRoof.direction && currentWall.length <= currentRoof.length) {
       ridgeRoof.push({ index: index, roof: currentRoof, length: currentRoof.length })
@@ -1240,8 +1236,7 @@ const drawRidge = (roof, canvas) => {
   ridgeRoof.sort((a, b) => a.length - b.length)
 
   ridgeRoof.forEach((item) => {
-    console.log(getMaxRidge(roofs.length), roof.ridges.length)
-    if (getMaxRidge(roofs.length) > roof.ridges.length) {
+    if (getMaxRidge(roofLines.length) > roof.ridges.length) {
       let index = item.index,
         beforePrevRoof,
         prevRoof,
@@ -1250,13 +1245,13 @@ const drawRidge = (roof, canvas) => {
         afterNextRoof
       let startXPoint, startYPoint, endXPoint, endYPoint
 
-      prevRoof = index === 0 ? roofs[walls.length - 1] : roofs[index - 1]
-      nextRoof = index === roofs.length - 1 ? roofs[0] : index === roofs.length ? roofs[1] : roofs[index + 1]
+      prevRoof = index === 0 ? roofLines[wallLines.length - 1] : roofLines[index - 1]
+      nextRoof = index === roofLines.length - 1 ? roofLines[0] : index === roofLines.length ? roofLines[1] : roofLines[index + 1]
 
-      beforePrevRoof = index <= 1 ? roofs[roofs.length - 2 + index] : roofs[index - 2]
-      afterNextRoof = index >= roofs.length - 2 ? roofs[(index + 2) % roofs.length] : roofs[index + 2]
+      beforePrevRoof = index <= 1 ? roofLines[roofLines.length - 2 + index] : roofLines[index - 2]
+      afterNextRoof = index >= roofLines.length - 2 ? roofLines[(index + 2) % roofLines.length] : roofLines[index + 2]
 
-      const anotherRoof = roofs.filter((roof) => roof !== currentRoof && roof !== prevRoof && roof !== nextRoof)
+      const anotherRoof = roofLines.filter((roof) => roof !== currentRoof && roof !== prevRoof && roof !== nextRoof)
 
       let xEqualInnerLines = anotherRoof.filter((roof) => roof.x1 === roof.x2 && isInnerLine(prevRoof, currentRoof, nextRoof, roof)), //x가 같은 내부선
         yEqualInnerLines = anotherRoof.filter((roof) => roof.y1 === roof.y2 && isInnerLine(prevRoof, currentRoof, nextRoof, roof)) //y가 같은 내부선
@@ -1281,7 +1276,7 @@ const drawRidge = (roof, canvas) => {
         .reduce((prev, current) => {
           let hasBetweenRoof = false
           if (current.x1 === current.x2) {
-            hasBetweenRoof = roofs
+            hasBetweenRoof = roofLines
               .filter((roof) => roof !== current && roof !== currentRoof)
               .some((line) => {
                 let currentY2 = currentRoof.y2
@@ -1298,7 +1293,7 @@ const drawRidge = (roof, canvas) => {
               })
           }
           if (current.y1 === current.y2) {
-            hasBetweenRoof = walls
+            hasBetweenRoof = wallLines
               .filter((roof) => roof !== current && roof !== currentRoof)
               .some((line) => {
                 let currentX2 = currentRoof.x2
@@ -1484,15 +1479,13 @@ const drawRidge = (roof, canvas) => {
             fontSize: roof.fontSize,
             stroke: 'blue',
             strokeWidth: 1,
-            name: 'ridgeLine',
+            name: LINE_TYPE.SUBLINE.RIDGE,
             attributes: { roofId: roof.id },
           },
         )
         canvas.add(ridge)
         roof.ridges.push(ridge)
         roof.innerLines.push(ridge)
-        console.log('currentRoof', currentRoof.x1, currentRoof.y1)
-        console.log('startXPoint', startXPoint, 'startYPoint', startYPoint, 'endXPoint', endXPoint, 'endYPoint', endYPoint)
 
         const distance = (x1, y1, x2, y2) => Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
         const dist1 = distance(startXPoint, startYPoint, currentRoof.x1, currentRoof.y1)
@@ -1518,7 +1511,7 @@ const drawRidge = (roof, canvas) => {
             fontSize: roof.fontSize,
             stroke: 'blue',
             strokeWidth: 1,
-            name: 'ridgeLine',
+            name: LINE_TYPE.SUBLINE.RIDGE,
             attributes: { roofId: roof.id },
           })
           roof.canvas.remove(ridge)
@@ -1533,6 +1526,7 @@ const drawRidge = (roof, canvas) => {
         }
       })
   })
+  canvas?.renderAll()
 }
 
 /**
@@ -1582,10 +1576,8 @@ const segmentsOverlap = (line1, line2) => {
  * @param canvas
  */
 const drawHips = (roof, canvas) => {
-  console.log('drawHips roofs : ', roof)
-
   const roofLines = roof.lines
-  const ridgeLines = canvas?.getObjects().filter((object) => object.name === 'ridgeLine' && object.attributes.roofId === roof.id)
+  const ridgeLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.RIDGE && object.attributes.roofId === roof.id)
 
   //마루에서 시작되는 hip을 먼저 그립니다.
   roofLines
@@ -1596,8 +1588,8 @@ const drawHips = (roof, canvas) => {
         fontSize: roof.fontSize,
         stroke: 'red',
         strokeWidth: 1,
-        name: 'hipLine',
-        attributes: { roofId: roof.id, currentRoofId: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
+        name: LINE_TYPE.SUBLINE.HIP,
+        attributes: { roofId: roof.id, currentRoof: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
       })
       canvas.add(hip1)
       roof.hips.push(hip1)
@@ -1607,15 +1599,15 @@ const drawHips = (roof, canvas) => {
         fontSize: roof.fontSize,
         stroke: 'red',
         strokeWidth: 1,
-        name: 'hipLine',
-        attributes: { roofId: roof.id, currentRoofId: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
+        name: LINE_TYPE.SUBLINE.HIP,
+        attributes: { roofId: roof.id, currentRoof: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
       })
       canvas.add(hip2)
       roof.hips.push(hip2)
       roof.innerLines.push(hip2)
     })
 
-  const hipLines = canvas?.getObjects().filter((object) => object.name === 'hipLine' && object.attributes.roofId === roof.id)
+  const hipLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.HIP && object.attributes.roofId === roof.id)
 
   //마루에서 시작되지 않는 hip을 그립니다.
   roofLines
@@ -1634,7 +1626,6 @@ const drawHips = (roof, canvas) => {
         }
       })
 
-      // if (currentRoof.attributes.type === LINE_TYPE.WALLLINE.EAVES && prevRoof.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
       let ridgePoints = []
       ridgeLines.forEach((ridge) => {
         const deltaX1 = ridge.x1 - currentRoof.x1
@@ -1671,14 +1662,15 @@ const drawHips = (roof, canvas) => {
           fontSize: roof.fontSize,
           stroke: 'red',
           strokeWidth: 1,
-          name: 'hipLine',
-          attributes: { roofId: roof.id, currentRoofId: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
+          name: LINE_TYPE.SUBLINE.HIP,
+          attributes: { roofId: roof.id, currentRoof: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
         })
         canvas.add(hip)
         roof.hips.push(hip)
         roof.innerLines.push(hip)
       }
     })
+  canvas?.renderAll()
 }
 
 /**
@@ -1893,8 +1885,9 @@ const connectLinePoint = (polygon) => {
   //중복라인제거
   missedLine = [...new Set(missedLine.map((line) => JSON.stringify(line)))].map((line) => JSON.parse(line))
 
-  missedLine.forEach((p, index) => {
+  missedLine.forEach((p) => {
     const line = new QLine([p.x1, p.y1, p.x2, p.y2], {
+      attributes: { roofId: polygon.id },
       fontSize: polygon.fontSize,
       stroke: 'purple',
       strokeWidth: 1,
@@ -1906,7 +1899,7 @@ const connectLinePoint = (polygon) => {
   missedPoints = []
   missedLine = []
 
-  polygon.innerLines.forEach((line, index) => {
+  polygon.innerLines.forEach((line) => {
     if (
       polygon.innerLines.filter(
         (innerLine) => (line.x2 === innerLine.x1 && line.y2 === innerLine.y1) || (line.x2 === innerLine.x2 && line.y2 === innerLine.y2),
@@ -1948,8 +1941,9 @@ const connectLinePoint = (polygon) => {
   //중복라인제거
   missedLine = [...new Set(missedLine.map((line) => JSON.stringify(line)))].map((line) => JSON.parse(line))
 
-  missedLine.forEach((p, index) => {
+  missedLine.forEach((p) => {
     const line = new QLine([p.x1, p.y1, p.x2, p.y2], {
+      attributes: { roofId: polygon.id },
       fontSize: polygon.fontSize,
       stroke: 'purple',
       strokeWidth: 1,
@@ -2005,7 +1999,7 @@ const connectLinePoint = (polygon) => {
           fontSize: polygon.fontSize,
           stroke: 'blue',
           strokeWidth: 1,
-          name: 'ridgeLine',
+          name: LINE_TYPE.SUBLINE.RIDGE,
           attributes: { roofId: polygon.id },
         })
         if (polygon.ridges.filter((r) => newRidge.x1 === r.x1 && newRidge.y1 === r.y1 && newRidge.x2 === r.x2 && newRidge.y2 === r.y2).length === 0) {
@@ -2025,13 +2019,12 @@ const connectLinePoint = (polygon) => {
       }
     })
   })
-
-  console.log('polygon : ', polygon)
+  polygon.canvas.renderAll()
 }
 
 const modifyRidge = (roof, canvas) => {
-  const ridgeLines = canvas?.getObjects().filter((object) => object.name === 'ridgeLine' && object.attributes.roofId === roof.id)
-  const hipLines = canvas?.getObjects().filter((object) => object.name === 'hipLine' && object.attributes.roofId === roof.id)
+  const ridgeLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.RIDGE && object.attributes.roofId === roof.id)
+  const hipLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.HIP && object.attributes.roofId === roof.id)
 
   ridgeLines.forEach((ridge) => {
     let ridgeHip1 = hipLines.filter((hip) => hip.x2 === ridge.x1 && hip.y2 === ridge.y1)
@@ -2059,18 +2052,19 @@ const modifyRidge = (roof, canvas) => {
       if (currentRoof !== undefined) {
         switch (currentRoof.attributes.type) {
           case LINE_TYPE.WALLLINE.EAVES:
+            changeEavesRoof(currentRoof, canvas)
             break
           case LINE_TYPE.WALLLINE.GABLE:
-            changeGableRoof(roof.id, currentRoof, canvas)
+            changeGableRoof(currentRoof, canvas)
             break
           case LINE_TYPE.WALLLINE.HIPANDGABLE:
             changeHipAndGableRoof(currentRoof, canvas)
             break
           case LINE_TYPE.WALLLINE.JERKINHEAD:
-            changeJerkInHeadRoof(roof.id, currentRoof, canvas)
+            changeJerkInHeadRoof(currentRoof, canvas)
             break
           case LINE_TYPE.WALLLINE.WALL:
-            changeWallRoof(roof.id, currentRoof, canvas)
+            changeWallRoof(currentRoof, canvas)
             break
         }
       }
@@ -2098,18 +2092,19 @@ const modifyRidge = (roof, canvas) => {
       if (currentRoof !== undefined) {
         switch (currentRoof.attributes.type) {
           case LINE_TYPE.WALLLINE.EAVES:
+            changeEavesRoof(currentRoof, canvas)
             break
           case LINE_TYPE.WALLLINE.GABLE:
-            changeGableRoof(roof.id, currentRoof, canvas)
+            changeGableRoof(currentRoof, canvas)
             break
           case LINE_TYPE.WALLLINE.HIPANDGABLE:
             changeHipAndGableRoof(currentRoof, canvas)
             break
           case LINE_TYPE.WALLLINE.JERKINHEAD:
-            changeJerkInHeadRoof(roof.id, currentRoof, canvas)
+            changeJerkInHeadRoof(currentRoof, canvas)
             break
           case LINE_TYPE.WALLLINE.WALL:
-            changeWallRoof(roof.id, currentRoof, canvas)
+            changeWallRoof(currentRoof, canvas)
             break
         }
       }
@@ -2126,23 +2121,50 @@ const getMaxRidge = (length) => {
 
 /**
  * 처마지붕으로 변경
- * @param roofId
  * @param currentRoof
  * @param canvas
  */
-export const changeEavesRoof = (roofId, currentRoof, canvas) => {}
+const changeEavesRoof = (currentRoof, canvas) => {
+  if (currentRoof.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
+    console.log('changeEavesRoof')
+    const roofId = currentRoof.attributes.roofId
+    const wall = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.WALL && object.attributes.roofId === roofId)
+    const roof = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.ROOF && object.id === roofId)
+    let hipLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.HIP && object.attributes.roofId === roofId)
+    let ridgeLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.RIDGE && object.attributes.roofId === roofId)
+    let wallLine = wall.lines.filter((w) => w.id === currentRoof.attributes.wallLine)
+    if (wallLine.length > 0) {
+      wallLine = wallLine[0]
+    }
 
-/**
- * 박공지붕으로 변경
- * @param roofId
- * @param currentRoof
- * @param canvas
- */
-export const changeGableRoof = (roofId, currentRoof, canvas) => {
-  if (currentRoof.attributes.type === LINE_TYPE.WALLLINE.GABLE) {
-    const roof = canvas?.getObjects().find((object) => object.name === 'roof' && object.id === roofId)
-    let hipLines = canvas?.getObjects().filter((object) => object.name === 'hipLine' && object.attributes.roofId === roofId)
-    let ridgeLines = canvas?.getObjects().filter((object) => object.name === 'ridgeLine' && object.attributes.roofId === roofId)
+    const midX = (currentRoof.x1 + currentRoof.x2) / 2 // 지붕의 X 중심
+    const midY = (currentRoof.y1 + currentRoof.y2) / 2 // 지붕의 Y 중심
+    const midWallX = (wallLine.x1 + wallLine.x2) / 2 // 벽의 X 중심
+    const midWallY = (wallLine.y1 + wallLine.y2) / 2 // 벽의 Y 중심
+    const alpha = midX - midWallX // 벽과 지붕의 X 거리
+    const beta = midY - midWallY // 벽과 지붕의 Y 거리
+    const hypotenuse = Math.sqrt(Math.pow(alpha, 2) + Math.pow(beta, 2)) // 벽과 지붕의 거리
+    const addHipX2 = Math.sign(midX - midWallX) * (alpha / hypotenuse) * (currentRoof.length / 2) // 추녀마루의 X 너비
+    const addHipY2 = Math.sign(midY - midWallY) * (beta / hypotenuse) * (currentRoof.length / 2) // 추녀마루의 Y 너비
+    let hipX2 = 0
+    let hipY2 = 0
+
+    const innerLines = canvas
+      ?.getObjects()
+      .filter(
+        (object) =>
+          object.attributes !== undefined &&
+          object.attributes.roofId === roofId &&
+          object.attributes.currentRoof === currentRoof.id &&
+          object.x1 !== undefined &&
+          object.x2 !== undefined,
+      )
+
+    //reDrawPolygon(roof, canvas)
+
+    innerLines
+      .filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
+      .forEach((line) => canvas?.remove(line))
 
     ridgeLines = ridgeLines.filter(
       (ridge) =>
@@ -2152,64 +2174,229 @@ export const changeGableRoof = (roofId, currentRoof, canvas) => {
     hipLines = hipLines.filter(
       (hip) => (hip.x1 === currentRoof.x1 && hip.y1 === currentRoof.y1) || (hip.x1 === currentRoof.x2 && hip.y1 === currentRoof.y2),
     )
-    let midX = (currentRoof.x1 + currentRoof.x2) / 2
-    let midY = (currentRoof.y1 + currentRoof.y2) / 2
+
+    if (hipLines === undefined || hipLines.length === 0) {
+      hipLines = innerLines.filter(
+        (line) =>
+          (line.x1 === currentRoof.x1 && line.y1 === currentRoof.y1) ||
+          (line.x2 === currentRoof.x1 && line.y2 === currentRoof.y1) ||
+          (line.x1 === currentRoof.x2 && line.y1 === currentRoof.y2) ||
+          (line.x2 === currentRoof.x2 && line.y2 === currentRoof.y2),
+      )
+    }
+
+    if ((ridgeLines === undefined || ridgeLines.length === 0) && hipLines.length >= 2) {
+      let points = []
+      hipLines.forEach((hip) => {
+        points.push({ x: hip.x1, y: hip.y1 })
+        points.push({ x: hip.x2, y: hip.y2 })
+      })
+
+      const pointSet = new Set()
+      const duplicatePoints = []
+
+      points.forEach((point) => {
+        const pointKey = `${point.x},${point.y}`
+        if (pointSet.has(pointKey)) {
+          duplicatePoints.push(point)
+        } else {
+          pointSet.add(pointKey)
+        }
+      })
+
+      ridgeLines = innerLines
+        .filter((r) => r !== hipLines[0] && r !== hipLines[1])
+        .filter(
+          (r) => (r.x1 === duplicatePoints[0].x && r.y1 === duplicatePoints[0].y) || (r.x2 === duplicatePoints[0].x && r.y2 === duplicatePoints[0].y),
+        )
+      if (ridgeLines.length > 0) {
+        currentRoof.attributes.ridgeCoordinate = { x1: duplicatePoints[0].x, y1: duplicatePoints[0].y }
+      }
+    }
+
+    if (ridgeLines.length > 0) {
+      const ridge = ridgeLines[0]
+      if (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) {
+        ridge.set({
+          x1: midX + addHipX2,
+          y1: midY + addHipY2,
+          x2: ridge.x2,
+          y2: ridge.y2,
+        })
+        currentRoof.attributes.ridgeCoordinate = { x1: ridge.x1, y1: ridge.y1 }
+        hipX2 = midX + addHipX2
+        hipY2 = midY + addHipY2
+      }
+      if (ridge.x2 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y2 === currentRoof.attributes.ridgeCoordinate.y1) {
+        ridge.set({
+          x1: ridge.x1,
+          y1: ridge.y1,
+          x2: midX - addHipX2,
+          y2: midY - addHipY2,
+        })
+        currentRoof.attributes.ridgeCoordinate = { x1: ridge.x2, y1: ridge.y2 }
+        hipX2 = midX - addHipX2
+        hipY2 = midY - addHipY2
+      }
+    }
+
+    hipLines.forEach((hip) => canvas.remove(hip))
+
+    const hip1 = new QLine([currentRoof.x1, currentRoof.y1, hipX2, hipY2], {
+      fontSize: roof.fontSize,
+      stroke: 'red',
+      strokeWidth: 1,
+      name: LINE_TYPE.SUBLINE.HIP,
+      attributes: {
+        roofId: roof.id,
+        currentRoofId: currentRoof.id,
+        planeSize: currentRoof.length,
+        actualSize: currentRoof.length,
+      },
+    })
+    canvas?.add(hip1)
+
+    const hip2 = new QLine([currentRoof.x2, currentRoof.y2, hipX2, hipY2], {
+      fontSize: roof.fontSize,
+      stroke: 'red',
+      strokeWidth: 1,
+      name: LINE_TYPE.SUBLINE.HIP,
+      attributes: {
+        roofId: roof.id,
+        currentRoofId: currentRoof.id,
+        planeSize: currentRoof.length,
+        actualSize: currentRoof.length,
+      },
+    })
+    canvas?.add(hip2)
+  }
+}
+
+/**
+ * 박공지붕으로 변경
+ * @param currentRoof
+ * @param canvas
+ */
+const changeGableRoof = (currentRoof, canvas) => {
+  if (currentRoof.attributes.type === LINE_TYPE.WALLLINE.GABLE) {
+    const roofId = currentRoof.attributes.roofId
+    const roof = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.ROOF && object.id === roofId)
+    let hipLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.HIP && object.attributes.roofId === roofId)
+    let ridgeLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.RIDGE && object.attributes.roofId === roofId)
+
+    const midX = (currentRoof.x1 + currentRoof.x2) / 2 // 지붕의 X 중심
+    const midY = (currentRoof.y1 + currentRoof.y2) / 2 // 지붕의 Y 중심
+
+    const innerLines = canvas
+      ?.getObjects()
+      .filter(
+        (object) =>
+          object.attributes !== undefined &&
+          object.attributes.roofId === roofId &&
+          object.attributes.currentRoof === currentRoof.id &&
+          object.x1 !== undefined &&
+          object.x2 !== undefined,
+      )
+    // reDrawPolygon(roof, canvas)
+
+    innerLines
+      .filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
+      .forEach((line) => canvas?.remove(line))
+
+    ridgeLines = ridgeLines.filter(
+      (ridge) =>
+        (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) ||
+        (ridge.x2 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y2 === currentRoof.attributes.ridgeCoordinate.y1),
+    )
+    hipLines = hipLines.filter(
+      (hip) => (hip.x1 === currentRoof.x1 && hip.y1 === currentRoof.y1) || (hip.x1 === currentRoof.x2 && hip.y1 === currentRoof.y2),
+    )
+
+    if (hipLines === undefined || hipLines.length === 0) {
+      hipLines = innerLines.filter(
+        (line) =>
+          (line.x1 === currentRoof.x1 && line.y1 === currentRoof.y1) ||
+          (line.x2 === currentRoof.x1 && line.y2 === currentRoof.y1) ||
+          (line.x1 === currentRoof.x2 && line.y1 === currentRoof.y2) ||
+          (line.x2 === currentRoof.x2 && line.y2 === currentRoof.y2),
+      )
+    }
+
+    hipLines.forEach((hip) => canvas.remove(hip))
+
+    if ((ridgeLines === undefined || ridgeLines.length === 0) && hipLines.length >= 2) {
+      let points = []
+      hipLines.forEach((hip) => {
+        points.push({ x: hip.x1, y: hip.y1 })
+        points.push({ x: hip.x2, y: hip.y2 })
+      })
+
+      const pointSet = new Set()
+      const duplicatePoints = []
+
+      points.forEach((point) => {
+        const pointKey = `${point.x},${point.y}`
+        if (pointSet.has(pointKey)) {
+          duplicatePoints.push(point)
+        } else {
+          pointSet.add(pointKey)
+        }
+      })
+
+      ridgeLines = innerLines
+        .filter((r) => r !== hipLines[0] && r !== hipLines[1])
+        .filter(
+          (r) => (r.x1 === duplicatePoints[0].x && r.y1 === duplicatePoints[0].y) || (r.x2 === duplicatePoints[0].x && r.y2 === duplicatePoints[0].y),
+        )
+      if (ridgeLines.length > 0) {
+        currentRoof.attributes.ridgeCoordinate = { x1: duplicatePoints[0].x, y1: duplicatePoints[0].y }
+      }
+    }
+
     if (ridgeLines !== undefined && ridgeLines.length > 0) {
       const ridge = ridgeLines[0]
       if (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) {
-        midX = ridge.x1 + (ridge.x1 - midX)
-        midY = ridge.y1 - (ridge.y1 - midY)
         ridge.set({
           x1: midX,
           y1: midY,
           x2: ridge.x2,
           y2: ridge.y2,
         })
+        currentRoof.attributes.ridgeCoordinate = { x1: ridge.x1, y1: ridge.y1 }
       }
       if (ridge.x2 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y2 === currentRoof.attributes.ridgeCoordinate.y1) {
-        midX = ridge.x2 + (ridge.x2 - midX)
-        midY = ridge.y2 - (ridge.y2 - midY)
         ridge.set({
           x1: ridge.x1,
           y1: ridge.y1,
           x2: midX,
           y2: midY,
         })
+        currentRoof.attributes.ridgeCoordinate = { x1: ridge.x2, y1: ridge.y2 }
       }
     }
 
-    if (hipLines !== undefined && hipLines.length > 0) {
-      hipLines.forEach((hip) =>
-        hip.set({
-          x1: hip.x1,
-          y1: hip.y1,
-          x2: midX,
-          y2: midY,
-        }),
-      )
-    } else {
-      let hip1 = new QLine([currentRoof.x1, currentRoof.y1, midX, midY], {
-        fontSize: roof.fontSize,
-        stroke: 'red',
-        strokeWidth: 1,
-        name: 'hipLine',
-        attributes: { roofId: roofId, currentRoofId: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
-      })
-      canvas?.add(hip1)
-      roof.hips.push(hip1)
-      roof.innerLines.push(hip1)
+    let hip1 = new QLine([currentRoof.x1, currentRoof.y1, midX, midY], {
+      fontSize: roof.fontSize,
+      stroke: 'red',
+      strokeWidth: 1,
+      name: LINE_TYPE.SUBLINE.HIP,
+      attributes: { roofId: roofId, currentRoofId: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
+    })
+    canvas?.add(hip1)
+    roof.hips.push(hip1)
+    roof.innerLines.push(hip1)
 
-      let hip2 = new QLine([currentRoof.x2, currentRoof.y2, midX, midY], {
-        fontSize: roof.fontSize,
-        stroke: 'red',
-        strokeWidth: 1,
-        name: 'hipLine',
-        attributes: { roofId: roofId, currentRoofId: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
-      })
-      canvas?.add(hip2)
-      roof.hips.push(hip2)
-      roof.innerLines.push(hip2)
-    }
+    let hip2 = new QLine([currentRoof.x2, currentRoof.y2, midX, midY], {
+      fontSize: roof.fontSize,
+      stroke: 'red',
+      strokeWidth: 1,
+      name: LINE_TYPE.SUBLINE.HIP,
+      attributes: { roofId: roofId, currentRoofId: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
+    })
+    canvas?.add(hip2)
+    roof.hips.push(hip2)
+    roof.innerLines.push(hip2)
+    canvas?.renderAll()
   }
 }
 
@@ -2218,221 +2405,415 @@ export const changeGableRoof = (roofId, currentRoof, canvas) => {
  * @param currentRoof
  * @param canvas
  */
-export const changeHipAndGableRoof = (currentRoof, canvas) => {
-  if (currentRoof.attributes.type === LINE_TYPE.WALLLINE.HIPANDGABLE) {
+const changeHipAndGableRoof = (currentRoof, canvas) => {
+  if (
+    currentRoof.attributes.type === LINE_TYPE.WALLLINE.HIPANDGABLE &&
+    currentRoof.attributes.width !== undefined &&
+    currentRoof.attributes.width > 0
+  ) {
     const roofId = currentRoof.attributes.roofId
-    const roof = canvas?.getObjects().find((object) => object.name === 'roof' && object.id === roofId)
-    let hipLines = canvas?.getObjects().filter((object) => object.name === 'hipLine' && object.attributes.roofId === roofId)
-    let ridgeLines = canvas?.getObjects().filter((object) => object.name === 'ridgeLine' && object.attributes.roofId === roofId)
-
-    ridgeLines = ridgeLines.filter(
-      (ridge) =>
-        (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) ||
-        (ridge.x2 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y2 === currentRoof.attributes.ridgeCoordinate.y1),
-    )
-    hipLines = hipLines.filter(
-      (hip) => (hip.x1 === currentRoof.x1 && hip.y1 === currentRoof.y1) || (hip.x1 === currentRoof.x2 && hip.y1 === currentRoof.y2),
-    )
-
-    hipLines.forEach((hip) => canvas?.remove(hip))
-
-    console.log(canvas?.getObjects().find((object) => object.attributes !== undefined && object.attributes.roofId === roofId))
-
-    /*if (ridgeLines.length > 0) {
-      const ridge = ridgeLines[0]
-      let midX = (currentRoof.x1 + currentRoof.x2) / 2
-      let midY = (currentRoof.y1 + currentRoof.y2) / 2
-      let xWidth = currentRoof.attributes.width
-      let yWidth = currentRoof.attributes.width
-      let diffX = 0
-      let diffY = 0
-
-      if (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) {
-        diffX = ridge.x1 - midX
-        diffY = ridge.y1 - midY
-        midX = ridge.x1 - diffX
-        midY = ridge.y1 - diffY
-        xWidth = diffX === 0 ? 0 : Math.sign(diffX) * xWidth
-        yWidth = diffY === 0 ? 0 : Math.sign(diffY) * yWidth
-        ridge.set({
-          x1: midX + xWidth,
-          y1: midY + yWidth,
-          x2: ridge.x2,
-          y2: ridge.y2,
-        })
-
-        currentRoof.attributes.ridgeCoordinate = { x1: ridge.x1, y1: ridge.y1 }
-      }
-      if (ridge.x2 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y2 === currentRoof.attributes.ridgeCoordinate.y1) {
-        diffX = ridge.x2 - midX
-        diffY = ridge.y2 - midY
-        midX = ridge.x2 - diffX
-        midY = ridge.y2 - diffY
-        xWidth = diffX === 0 ? 0 : Math.sign(diffX) * xWidth
-        yWidth = diffY === 0 ? 0 : Math.sign(diffY) * yWidth
-        ridge.set({
-          x1: ridge.x1,
-          y1: ridge.y1,
-          x2: midX + xWidth,
-          y2: midY + yWidth,
-        })
-
-        currentRoof.attributes.ridgeCoordinate = { x1: ridge.x2, y1: ridge.y2 }
-      }
-
-      if (hipLines.length > 0) {
-        hipLines.forEach((hip) => {
-          const singX = Math.sign(hip.x1 - currentRoof.attributes.ridgeCoordinate.x1)
-          const singY = Math.sign(hip.y1 - currentRoof.attributes.ridgeCoordinate.y1)
-          const alpha = diffX === 0 ? 0 : Math.abs(diffX) - currentRoof.attributes.width
-          const beta = diffY === 0 ? 0 : Math.abs(diffY) - currentRoof.attributes.width
-          const hypotenuse = Math.sqrt(Math.pow(alpha, 2) + Math.pow(beta, 2))
-
-          hip.set({
-            x1: hip.x1,
-            y1: hip.y1,
-            x2: hip.x2 + singX * hypotenuse,
-            y2: hip.y2 + singY * hypotenuse,
-          })
-        })
-      }
-
-      if (ridgeLines.length > 0 && hipLines.length > 0) {
-        hipLines.forEach((hip) => {
-          const hipLine = new QLine([hip.x2, hip.y2, currentRoof.attributes.ridgeCoordinate.x1, currentRoof.attributes.ridgeCoordinate.y1], {
-            fontSize: roof.fontSize,
-            stroke: 'red',
-            strokeWidth: 1,
-            name: 'gableLine',
-          })
-          canvas?.add(hipLine)
-          roof.innerLines.push(hipLine)
-        })
-      }
-    }*/
-  }
-}
-
-/**
- * 반절처 지붕으로 변경
- * @param roofId
- * @param currentRoof
- * @param canvas
- */
-export const changeJerkInHeadRoof = (roofId, currentRoof, canvas) => {
-  if (currentRoof.attributes.type === LINE_TYPE.WALLLINE.JERKINHEAD) {
-    console.log('roofId : ', roofId)
-    console.log('currentRoof : ', currentRoof)
-    const roof = canvas?.getObjects().find((object) => object.name === 'roof' && object.id === roofId)
-    let hipLines = canvas?.getObjects().filter((object) => object.name === 'hipLine' && object.attributes.roofId === roofId)
-    let ridgeLines = canvas?.getObjects().filter((object) => object.name === 'ridgeLine' && object.attributes.roofId === roofId)
-
-    ridgeLines = ridgeLines.filter(
-      (ridge) =>
-        (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) ||
-        (ridge.x2 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y2 === currentRoof.attributes.ridgeCoordinate.y1),
-    )
-    hipLines = hipLines.filter(
-      (hip) => (hip.x1 === currentRoof.x1 && hip.y1 === currentRoof.y1) || (hip.x1 === currentRoof.x2 && hip.y1 === currentRoof.y2),
-    )
-
-    console.log('ridgeLines : ', ridgeLines)
-    console.log('hipLines : ', hipLines)
-
-    if (ridgeLines.length > 0) {
-      const ridge = ridgeLines[0]
-      let midX = (currentRoof.x1 + currentRoof.x2) / 2
-      let midY = (currentRoof.y1 + currentRoof.y2) / 2
-      let xWidth = currentRoof.attributes.width
-      let yWidth = currentRoof.attributes.width
-      if (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) {
-        const diffX = ridge.x1 - midX
-        const diffY = ridge.y1 - midY
-        midX = ridge.x1 - diffX
-        midY = ridge.y1 - diffY
-        xWidth = diffX === 0 ? 0 : (Math.sign(diffX) * xWidth) / 2
-        yWidth = diffY === 0 ? 0 : (Math.sign(diffY) * yWidth) / 2
-        ridge.set({
-          x1: midX + xWidth,
-          y1: midY + yWidth,
-          x2: ridge.x2,
-          y2: ridge.y2,
-        })
-
-        currentRoof.attributes.ridgeCoordinate = { x1: ridge.x1, y1: ridge.y1 }
-      }
-      if (ridge.x2 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y2 === currentRoof.attributes.ridgeCoordinate.y1) {
-        const diffX = ridge.x2 - midX
-        const diffY = ridge.y2 - midY
-        midX = ridge.x2 - diffX
-        midY = ridge.y2 - diffY
-        xWidth = diffX === 0 ? 0 : (Math.sign(diffX) * xWidth) / 2
-        yWidth = diffY === 0 ? 0 : (Math.sign(diffY) * yWidth) / 2
-        ridge.set({
-          x1: ridge.x1,
-          y1: ridge.y1,
-          x2: midX + xWidth,
-          y2: midY + yWidth,
-        })
-
-        currentRoof.attributes.ridgeCoordinate = { x1: ridge.x2, y1: ridge.y2 }
-      }
+    const wall = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.WALL && object.attributes.roofId === roofId)
+    const roof = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.ROOF && object.id === roofId)
+    let hipLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.HIP && object.attributes.roofId === roofId)
+    let ridgeLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.RIDGE && object.attributes.roofId === roofId)
+    let wallLine = wall.lines.filter((w) => w.id === currentRoof.attributes.wallLine)
+    if (wallLine.length > 0) {
+      wallLine = wallLine[0]
     }
 
-    if (hipLines.length > 0) {
-      const midX = (currentRoof.x1 + currentRoof.x2) / 2
-      const midY = (currentRoof.y1 + currentRoof.y2) / 2
+    const midX = (currentRoof.x1 + currentRoof.x2) / 2 // 지붕의 X 중심
+    const midY = (currentRoof.y1 + currentRoof.y2) / 2 // 지붕의 Y 중심
+    const midWallX = (wallLine.x1 + wallLine.x2) / 2 // 벽의 X 중심
+    const midWallY = (wallLine.y1 + wallLine.y2) / 2 // 벽의 Y 중심
+    const alpha = midX - midWallX // 벽과 지붕의 X 거리
+    const beta = midY - midWallY // 벽과 지붕의 Y 거리
+    const hypotenuse = Math.sqrt(Math.pow(alpha, 2) + Math.pow(beta, 2)) // 벽과 지붕의 거리
+    const xWidth = Math.sign(midX - midWallX) * (alpha / hypotenuse) * currentRoof.attributes.width // 지붕의 X 너비
+    const yWidth = Math.sign(midY - midWallY) * (beta / hypotenuse) * currentRoof.attributes.width // 지붕의 Y 너비
+    const hipX2 = Math.sign(midX - midWallX) * (alpha / hypotenuse) * (currentRoof.length / 2) // 추녀마루의 X 너비
+    const hipY2 = Math.sign(midY - midWallY) * (beta / hypotenuse) * (currentRoof.length / 2) // 추녀마루의 Y 너비
+
+    if (Math.sqrt(Math.pow(xWidth, 2) + Math.pow(yWidth, 2)) < Math.sqrt(Math.pow(hipX2, 2) + Math.pow(hipY2, 2))) {
+      // reDrawPolygon(roof, canvas)
+
+      const innerLines = canvas
+        ?.getObjects()
+        .filter(
+          (object) =>
+            object.attributes !== undefined &&
+            object.attributes.roofId === roofId &&
+            object.attributes.currentRoof === currentRoof.id &&
+            object.x1 !== undefined &&
+            object.x2 !== undefined,
+        )
+
+      innerLines
+        .filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
+        .forEach((line) => canvas?.remove(line))
+
+      ridgeLines = ridgeLines.filter(
+        (ridge) =>
+          (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) ||
+          (ridge.x2 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y2 === currentRoof.attributes.ridgeCoordinate.y1),
+      )
+      hipLines = hipLines.filter(
+        (hip) => (hip.x1 === currentRoof.x1 && hip.y1 === currentRoof.y1) || (hip.x1 === currentRoof.x2 && hip.y1 === currentRoof.y2),
+      )
+
+      if (hipLines === undefined || hipLines.length === 0) {
+        hipLines = innerLines.filter(
+          (line) =>
+            (line.x1 === currentRoof.x1 && line.y1 === currentRoof.y1) ||
+            (line.x2 === currentRoof.x1 && line.y2 === currentRoof.y1) ||
+            (line.x1 === currentRoof.x2 && line.y1 === currentRoof.y2) ||
+            (line.x2 === currentRoof.x2 && line.y2 === currentRoof.y2),
+        )
+      }
+
+      if ((ridgeLines === undefined || ridgeLines.length === 0) && hipLines.length >= 2) {
+        let points = []
+        hipLines.forEach((hip) => {
+          points.push({ x: hip.x1, y: hip.y1 })
+          points.push({ x: hip.x2, y: hip.y2 })
+        })
+
+        const pointSet = new Set()
+        const duplicatePoints = []
+
+        points.forEach((point) => {
+          const pointKey = `${point.x},${point.y}`
+          if (pointSet.has(pointKey)) {
+            duplicatePoints.push(point)
+          } else {
+            pointSet.add(pointKey)
+          }
+        })
+
+        ridgeLines = innerLines
+          .filter((r) => r !== hipLines[0] && r !== hipLines[1])
+          .filter(
+            (r) =>
+              (r.x1 === duplicatePoints[0].x && r.y1 === duplicatePoints[0].y) || (r.x2 === duplicatePoints[0].x && r.y2 === duplicatePoints[0].y),
+          )
+        if (ridgeLines.length > 0) {
+          currentRoof.attributes.ridgeCoordinate = { x1: duplicatePoints[0].x, y1: duplicatePoints[0].y }
+        }
+      }
+
+      hipLines.forEach((hip) => canvas.remove(hip))
+      hipLines = []
+
+      if (ridgeLines.length > 0) {
+        const ridge = ridgeLines[0]
+        if (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) {
+          ridge.set({
+            x1: midX + xWidth,
+            y1: midY + yWidth,
+            x2: ridge.x2,
+            y2: ridge.y2,
+          })
+          currentRoof.attributes.ridgeCoordinate = { x1: ridge.x1, y1: ridge.y1 }
+        }
+        if (ridge.x2 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y2 === currentRoof.attributes.ridgeCoordinate.y1) {
+          ridge.set({
+            x1: ridge.x1,
+            y1: ridge.y1,
+            x2: midX - xWidth,
+            y2: midY - yWidth,
+          })
+          currentRoof.attributes.ridgeCoordinate = { x1: ridge.x2, y1: ridge.y2 }
+        }
+      }
+
+      const hip1 = new QLine([currentRoof.x1, currentRoof.y1, midX + hipX2, midY + hipY2], {
+        fontSize: roof.fontSize,
+        stroke: 'red',
+        strokeWidth: 1,
+        name: LINE_TYPE.SUBLINE.HIP,
+        attributes: {
+          roofId: roof.id,
+          currentRoof: currentRoof.id,
+          planeSize: currentRoof.length,
+          actualSize: currentRoof.length,
+        },
+      })
+      canvas?.add(hip1)
+
+      const hip2 = new QLine([currentRoof.x2, currentRoof.y2, midX + hipX2, midY + hipY2], {
+        fontSize: roof.fontSize,
+        stroke: 'red',
+        strokeWidth: 1,
+        name: LINE_TYPE.SUBLINE.HIP,
+        attributes: {
+          roofId: roof.id,
+          currentRoof: currentRoof.id,
+          planeSize: currentRoof.length,
+          actualSize: currentRoof.length,
+        },
+      })
+      canvas?.add(hip2)
+
+      console.log('hipLines : ', hipLines)
+
+      hipLines.push(hip1)
+      hipLines.push(hip2)
 
       hipLines.forEach((hip) => {
-        const singX = Math.sign(hip.x1 - midX)
-        const singY = Math.sign(hip.y1 - midY)
-        const xWidth = singX === 0 ? 0 : (singX * currentRoof.attributes.width) / 2
-        const yWidth = singY === 0 ? 0 : (singY * currentRoof.attributes.width) / 2
+        const singHipX = Math.sign(hip.x1 - midWallX)
+        const singHipY = Math.sign(hip.y1 - midWallY)
 
         hip.set({
           x1: hip.x1,
           y1: hip.y1,
-          x2: midX + xWidth,
-          y2: midY + yWidth,
+          x2: hip.x1 - singHipX * currentRoof.attributes.width,
+          y2: hip.y1 - singHipY * currentRoof.attributes.width,
         })
       })
+
+      console.log('hipLines : ', hipLines)
+
+      hipLines.forEach((hip) => {
+        const gableLine = new QLine([hip.x2, hip.y2, currentRoof.attributes.ridgeCoordinate.x1, currentRoof.attributes.ridgeCoordinate.y1], {
+          fontSize: roof.fontSize,
+          stroke: 'red',
+          strokeWidth: 1,
+          name: LINE_TYPE.SUBLINE.GABLE,
+          attributes: {
+            roofId: roof.id,
+            currentRoof: currentRoof.id,
+            planeSize: currentRoof.length,
+            actualSize: currentRoof.length,
+          },
+        })
+        console.log('gableLine : ', gableLine)
+        canvas?.add(gableLine)
+        roof.innerLines.push(gableLine)
+      })
     }
+    console.log('roof.innerLines : ', roof.innerLines)
+  }
+  canvas?.renderAll()
+}
 
-    if (ridgeLines.length > 0 && hipLines.length > 0) {
-      console.log('currentRoof : ', currentRoof.attributes.ridgeCoordinate)
-      hipLines.forEach((hip) => {
-        const jerkinHeadLine = new QLine([hip.x2, hip.y2, currentRoof.attributes.ridgeCoordinate.x1, currentRoof.attributes.ridgeCoordinate.y1], {
-          fontSize: roof.fontSize,
-          stroke: 'red',
-          strokeWidth: 1,
-          name: 'jerkinHeadLine',
-        })
-        canvas?.add(jerkinHeadLine)
-        roof.innerLines.push(jerkinHeadLine)
-      })
+/**
+ * 반절처 지붕으로 변경
+ * @param currentRoof
+ * @param canvas
+ */
+const changeJerkInHeadRoof = (currentRoof, canvas) => {
+  if (
+    currentRoof.attributes.type === LINE_TYPE.WALLLINE.JERKINHEAD &&
+    currentRoof.attributes.width !== undefined &&
+    currentRoof.attributes.width > 0
+  ) {
+    const roofId = currentRoof.attributes.roofId
+    const wall = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.WALL && object.attributes.roofId === roofId)
+    const roof = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.ROOF && object.id === roofId)
+    let hipLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.HIP && object.attributes.roofId === roofId)
+    let ridgeLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.RIDGE && object.attributes.roofId === roofId)
+    let wallLine = wall.lines.filter((w) => w.id === currentRoof.attributes.wallLine)
+    if (wallLine.length > 0) {
+      wallLine = wallLine[0]
+    }
 
-      if (hipLines.length > 1) {
-        const jerkinHeadLine = new QLine([hipLines[0].x2, hipLines[0].y2, hipLines[1].x2, hipLines[1].y2], {
-          fontSize: roof.fontSize,
-          stroke: 'red',
-          strokeWidth: 1,
-          name: 'jerkinHeadLine',
-        })
-        canvas?.add(jerkinHeadLine)
-        roof.innerLines.push(jerkinHeadLine)
+    const midX = (currentRoof.x1 + currentRoof.x2) / 2 // 지붕의 X 중심
+    const midY = (currentRoof.y1 + currentRoof.y2) / 2 // 지붕의 Y 중심
+    const midWallX = (wallLine.x1 + wallLine.x2) / 2 // 벽의 X 중심
+    const midWallY = (wallLine.y1 + wallLine.y2) / 2 // 벽의 Y 중심
+    const alpha = midX - midWallX // 벽과 지붕의 X 거리
+    const beta = midY - midWallY // 벽과 지붕의 Y 거리
+    const hypotenuse = Math.sqrt(Math.pow(alpha, 2) + Math.pow(beta, 2)) // 벽과 지붕의 거리
+    const xWidth = Math.sign(midX - midWallX) * (alpha / hypotenuse) * (currentRoof.attributes.width / 2) // 지붕의 X 너비
+    const yWidth = Math.sign(midY - midWallY) * (beta / hypotenuse) * (currentRoof.attributes.width / 2) // 지붕의 Y 너비
+    const addHipX2 = Math.sign(midX - midWallX) * (alpha / hypotenuse) * (currentRoof.length / 2) // 추녀마루의 X 너비
+    const addHipY2 = Math.sign(midY - midWallY) * (beta / hypotenuse) * (currentRoof.length / 2) // 추녀마루의 Y 너비
+    let hipX2 = 0
+    let hipY2 = 0
+
+    if (Math.sqrt(Math.pow(xWidth, 2) + Math.pow(yWidth, 2)) < Math.sqrt(Math.pow(addHipX2, 2) + Math.pow(addHipY2, 2))) {
+      // reDrawPolygon(roof, canvas)
+
+      const innerLines = canvas
+        ?.getObjects()
+        .filter(
+          (object) =>
+            object.attributes !== undefined &&
+            object.attributes.roofId === roofId &&
+            object.attributes.currentRoof === currentRoof.id &&
+            object.x1 !== undefined &&
+            object.x2 !== undefined,
+        )
+
+      innerLines
+        .filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
+        .forEach((line) => canvas?.remove(line))
+
+      ridgeLines = ridgeLines.filter(
+        (ridge) =>
+          (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) ||
+          (ridge.x2 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y2 === currentRoof.attributes.ridgeCoordinate.y1),
+      )
+      hipLines = hipLines.filter(
+        (hip) => (hip.x1 === currentRoof.x1 && hip.y1 === currentRoof.y1) || (hip.x1 === currentRoof.x2 && hip.y1 === currentRoof.y2),
+      )
+
+      if (hipLines === undefined || hipLines.length === 0) {
+        hipLines = innerLines.filter(
+          (line) =>
+            (line.x1 === currentRoof.x1 && line.y1 === currentRoof.y1) ||
+            (line.x2 === currentRoof.x1 && line.y2 === currentRoof.y1) ||
+            (line.x1 === currentRoof.x2 && line.y1 === currentRoof.y2) ||
+            (line.x2 === currentRoof.x2 && line.y2 === currentRoof.y2),
+        )
       }
+
+      if ((ridgeLines === undefined || ridgeLines.length === 0) && hipLines.length >= 2) {
+        let points = []
+        hipLines.forEach((hip) => {
+          points.push({ x: hip.x1, y: hip.y1 })
+          points.push({ x: hip.x2, y: hip.y2 })
+        })
+
+        const pointSet = new Set()
+        const duplicatePoints = []
+
+        points.forEach((point) => {
+          const pointKey = `${point.x},${point.y}`
+          if (pointSet.has(pointKey)) {
+            duplicatePoints.push(point)
+          } else {
+            pointSet.add(pointKey)
+          }
+        })
+
+        ridgeLines = innerLines
+          .filter((r) => r !== hipLines[0] && r !== hipLines[1])
+          .filter(
+            (r) =>
+              (r.x1 === duplicatePoints[0].x && r.y1 === duplicatePoints[0].y) || (r.x2 === duplicatePoints[0].x && r.y2 === duplicatePoints[0].y),
+          )
+        if (ridgeLines.length > 0) {
+          currentRoof.attributes.ridgeCoordinate = { x1: duplicatePoints[0].x, y1: duplicatePoints[0].y }
+        }
+      }
+
+      hipLines.forEach((hip) => canvas.remove(hip))
+
+      if (ridgeLines.length > 0) {
+        const ridge = ridgeLines[0]
+        if (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) {
+          ridge.set({
+            x1: midX + xWidth,
+            y1: midY + yWidth,
+            x2: ridge.x2,
+            y2: ridge.y2,
+          })
+
+          currentRoof.attributes.ridgeCoordinate = { x1: ridge.x1, y1: ridge.y1 }
+          hipX2 = midX + xWidth
+          hipY2 = midY + yWidth
+        }
+        if (ridge.x2 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y2 === currentRoof.attributes.ridgeCoordinate.y1) {
+          ridge.set({
+            x1: ridge.x1,
+            y1: ridge.y1,
+            x2: midX - xWidth,
+            y2: midY - yWidth,
+          })
+
+          currentRoof.attributes.ridgeCoordinate = { x1: ridge.x2, y1: ridge.y2 }
+          hipX2 = midX - xWidth
+          hipY2 = midY - yWidth
+        }
+      }
+
+      let hipX1 = (Math.sign(currentRoof.x1 - midX) * currentRoof.attributes.width) / 2
+      let hipY1 = (Math.sign(currentRoof.y1 - midY) * currentRoof.attributes.width) / 2
+
+      const gable1 = new QLine([midX + hipX1, midY + hipY1, hipX2, hipY2], {
+        fontSize: roof.fontSize,
+        stroke: 'red',
+        strokeWidth: 1,
+        name: LINE_TYPE.SUBLINE.GABLE,
+        attributes: {
+          roofId: roof.id,
+          currentRoofId: currentRoof.id,
+          planeSize: currentRoof.length,
+          actualSize: currentRoof.length,
+        },
+      })
+      canvas?.add(gable1)
+
+      hipX1 = (Math.sign(currentRoof.x2 - midX) * currentRoof.attributes.width) / 2
+      hipY1 = (Math.sign(currentRoof.y2 - midY) * currentRoof.attributes.width) / 2
+
+      const gable2 = new QLine([midX + hipX1, midY + hipY1, hipX2, hipY2], {
+        fontSize: roof.fontSize,
+        stroke: 'red',
+        strokeWidth: 1,
+        name: LINE_TYPE.SUBLINE.GABLE,
+        attributes: {
+          roofId: roof.id,
+          currentRoofId: currentRoof.id,
+          planeSize: currentRoof.length,
+          actualSize: currentRoof.length,
+        },
+      })
+      canvas?.add(gable2)
+
+      const gable3 = new QLine([gable1.x1, gable1.y1, gable2.x1, gable2.y1], {
+        fontSize: roof.fontSize,
+        stroke: 'red',
+        strokeWidth: 1,
+        name: LINE_TYPE.SUBLINE.GABLE,
+        attributes: {
+          roofId: roof.id,
+          currentRoofId: currentRoof.id,
+          planeSize: currentRoof.length,
+          actualSize: currentRoof.length,
+        },
+      })
+      canvas?.add(gable3)
+
+      const hip1 = new QLine([currentRoof.x1, currentRoof.y1, gable1.x1, gable1.y1], {
+        fontSize: roof.fontSize,
+        stroke: 'red',
+        strokeWidth: 1,
+        name: LINE_TYPE.SUBLINE.GABLE,
+        attributes: {
+          roofId: roof.id,
+          currentRoofId: currentRoof.id,
+          planeSize: currentRoof.length,
+          actualSize: currentRoof.length,
+        },
+      })
+      canvas?.add(hip1)
+
+      const hip2 = new QLine([currentRoof.x2, currentRoof.y2, gable2.x1, gable2.y1], {
+        fontSize: roof.fontSize,
+        stroke: 'red',
+        strokeWidth: 1,
+        name: LINE_TYPE.SUBLINE.HIP,
+        attributes: {
+          roofId: roof.id,
+          currentRoofId: currentRoof.id,
+          planeSize: currentRoof.length,
+          actualSize: currentRoof.length,
+        },
+      })
+      canvas?.add(hip2)
     }
   }
 }
 
 /**
  * 벽지붕으로 변경
- * @param roofId
  * @param currentRoof
  * @param canvas
  */
-const changeWallRoof = (roofId, currentRoof, canvas) => {
-  let roof = canvas?.getObjects().find((object) => object.name === 'roof' && object.id === roofId)
+const changeWallRoof = (currentRoof, canvas) => {
+  const roofId = currentRoof.attributes.roofId
+  const roof = canvas?.getObjects().find((object) => object.name === 'roof' && object.id === roofId)
   const roofLines = roof.lines
   let prevRoof, nextRoof
   roofLines.forEach((r, index) => {
@@ -2445,8 +2826,8 @@ const changeWallRoof = (roofId, currentRoof, canvas) => {
 
   const wall = canvas?.getObjects().find((object) => object.name === 'wall' && object.attributes.roofId === roofId)
   let wallLine = wall.lines.filter((w) => w.id === currentRoof.attributes.wallLine)
-  let hipLines = canvas?.getObjects().filter((object) => object.name === 'hipLine' && object.attributes.roofId === roofId)
-  let ridgeLines = canvas?.getObjects().filter((object) => object.name === 'ridgeLine' && object.attributes.roofId === roofId)
+  let hipLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.HIP && object.attributes.roofId === roofId)
+  let ridgeLines = canvas?.getObjects().filter((object) => object.name === LINE_TYPE.SUBLINE.RIDGE && object.attributes.roofId === roofId)
 
   if (wallLine.length > 0) {
     wallLine = wallLine[0]
@@ -2490,7 +2871,7 @@ const changeWallRoof = (roofId, currentRoof, canvas) => {
     y2: nextRoof.y2,
   })
 
-  if (currentRoof.attributes.sleeve && prevRoof.attributes.offset > 0 && nextRoof.attributes.offset > 0) {
+  if (currentRoof.attributes.sleeve && currentRoof.attributes.width > 0 && prevRoof.attributes.offset > 0 && nextRoof.attributes.offset > 0) {
     const prevSignX = Math.sign(prevRoof.x1 - prevRoof.x2)
     const prevSignY = Math.sign(prevRoof.y1 - prevRoof.y2)
     const nextSignX = Math.sign(nextRoof.x1 - nextRoof.x2)
@@ -2569,9 +2950,7 @@ const changeWallRoof = (roofId, currentRoof, canvas) => {
     roof.lines.splice(nextIndex, 0, addNextWallLine1, addNextWallLine2)
   }
 
-  roof = reDrawPolygon(roof, canvas)
-
-  console.log('roof : ', roof.lines)
+  reDrawPolygon(roof, canvas)
 
   if (ridgeLines.length > 0) {
     const ridge = ridgeLines[0]
@@ -2602,14 +2981,14 @@ const changeWallRoof = (roofId, currentRoof, canvas) => {
       fontSize: roof.fontSize,
       stroke: 'red',
       strokeWidth: 1,
-      name: 'hipLine',
+      name: LINE_TYPE.SUBLINE.HIP,
       attributes: { roofId: roof.id, currentRoofId: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
     })
     let hip2 = new QLine([currentRoof.x2, currentRoof.y2, wallMidX, wallMidY], {
       fontSize: roof.fontSize,
       stroke: 'red',
       strokeWidth: 1,
-      name: 'hipLine',
+      name: LINE_TYPE.SUBLINE.HIP,
       attributes: { roofId: roof.id, currentRoofId: currentRoof.id, planeSize: currentRoof.length, actualSize: currentRoof.length },
     })
     canvas?.add(hip1)
@@ -2623,279 +3002,77 @@ const changeWallRoof = (roofId, currentRoof, canvas) => {
 }
 
 /**
- * 모임지붕 -> 팔작지붕 변경
- * @param roof
- * @param ridge
- * @param hip1
- * @param hip2
- * @param offset
+ * 지붕을 변경한다.
+ * @param currentRoof
  * @param canvas
- * @returns {*}
  */
-const setHipAndGableRoof = (roof, ridge, hip1, hip2, offset, canvas) => {
-  let x1 = hip1.x1,
-    y1 = hip1.y1
-  let gableLine, diffOffset
-  if (ridge.direction === 'top') {
-    if (ridge.y1 > y1 && ridge.y2 > y1) {
-      offset = Math.abs(ridge.y1 - y1) - offset
-      offset = offset < 0 ? 0 : offset
-      ridge.set({
-        x1: ridge.x1,
-        y1: ridge.y1,
-        x2: ridge.x2,
-        y2: ridge.y2 + offset,
-      })
+export const changeCurrentRoof = (currentRoof, canvas) => {
+  const roofId = currentRoof.attributes.roofId
+  const originRoof = canvas?.getObjects().find((object) => object.name === 'roof' && object.id === roofId)
+  const wall = canvas?.getObjects().find((object) => object.name === 'wall' && object.attributes.roofId === roofId)
+  const wallLine = wall.lines.filter((w) => w.id === currentRoof.attributes.wallLine)[0]
+  const innerLines = canvas
+    ?.getObjects()
+    .filter((object) => object.attributes !== undefined && object.attributes.roofId === roofId && object.x1 !== undefined && object.x2 !== undefined)
 
-      gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
-        fontSize: roof.fontSize,
-        stroke: 'blue',
-        strokeWidth: 1,
-        name: 'gableLine',
-      })
-      canvas?.add(gableLine)
+  wallLine.attributes.type = currentRoof.attributes.type
+  wallLine.attributes.offset = currentRoof.attributes.offset
+  wallLine.attributes.width = currentRoof.attributes.width
+  wallLine.attributes.pitch = currentRoof.attributes.pitch
+  wallLine.attributes.sleeve = currentRoof.attributes.sleeve
 
-      hip1.set({
-        x1: hip1.x1,
-        y1: hip1.y1,
-        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
-        y2: hip1.y2 + offset,
-      })
+  canvas?.remove(originRoof)
 
-      hip2.set({
-        x1: hip2.x1,
-        y1: hip2.y1,
-        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
-        y2: hip2.y2 + offset,
-      })
-    }
-    if (ridge.y1 < y1 && ridge.y2 < y1) {
-      offset = Math.abs(ridge.y2 - y1) - offset
-      offset = offset < 0 ? 0 : offset
-      ridge.set({
-        x1: ridge.x1,
-        y1: ridge.y1 - offset,
-        x2: ridge.x2,
-        y2: ridge.y2,
-      })
-      gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
-        fontSize: roof.fontSize,
-        stroke: 'blue',
-        strokeWidth: 1,
-        name: 'gableLine',
-      })
-      canvas?.add(gableLine)
+  innerLines.forEach((line) => canvas?.remove(line))
 
-      hip1.set({
-        x1: hip1.x1,
-        y1: hip1.y1,
-        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
-        y2: hip1.y2 - offset,
-      })
+  const polygon = createPolygon(wall.points)
+  const originPolygon = new QPolygon(wall.points, { fontSize: 0 })
+  originPolygon.setViewLengthText(false)
+  let offsetPolygon
 
-      hip2.set({
-        x1: hip2.x1,
-        y1: hip2.y1,
-        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
-        y2: hip2.y2 - offset,
-      })
-    }
+  let result = createRoofMarginPolygon(polygon, wall.lines).vertices
+  const allPointsOutside = result.every((point) => !originPolygon.inPolygon(point))
+
+  if (allPointsOutside) {
+    offsetPolygon = createRoofMarginPolygon(polygon, wall.lines).vertices
+  } else {
+    offsetPolygon = createRoofPaddingPolygon(polygon, wall.lines).vertices
   }
-  if (ridge.direction === 'bottom') {
-    if (ridge.y1 > y1 && ridge.y2 > y1) {
-      offset = Math.abs(ridge.y1 - y1) - offset
-      offset = offset < 0 ? 0 : offset
-      ridge.set({
-        x1: ridge.x1,
-        y1: ridge.y1 - offset,
-        x2: ridge.x2,
-        y2: ridge.y2,
-      })
-      gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
-        fontSize: roof.fontSize,
-        stroke: 'blue',
-        strokeWidth: 1,
-        name: 'gableLine',
-      })
-      canvas?.add(gableLine)
 
-      hip1.set({
-        x1: hip1.x1,
-        y1: hip1.y1,
-        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
-        y2: hip1.y2 - offset,
-      })
+  const newRoof = new QPolygon(offsetPolygon, {
+    fill: originRoof.fill,
+    stroke: originRoof.stroke,
+    strokeWidth: originRoof.strokeWidth,
+    selectable: originRoof.selectable,
+    fontSize: originRoof.fontSize,
+  })
 
-      hip2.set({
-        x1: hip2.x1,
-        y1: hip2.y1,
-        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
-        y2: hip2.y2 - offset,
-      })
-    }
-    if (ridge.y1 < y1 && ridge.y2 < y1) {
-      offset = Math.abs(ridge.y2 - y1) - offset
-      offset = offset < 0 ? 0 : offset
-      ridge.set({
-        x1: ridge.x1,
-        y1: ridge.y1,
-        x2: ridge.x2,
-        y2: ridge.y2 + offset,
-      })
-
-      gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
-        fontSize: roof.fontSize,
-        stroke: 'blue',
-        strokeWidth: 1,
-        name: 'gableLine',
-      })
-      canvas?.add(gableLine)
-
-      hip1.set({
-        x1: hip1.x1,
-        y1: hip1.y1,
-        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
-        y2: hip1.y2 + offset,
-      })
-
-      hip2.set({
-        x1: hip2.x1,
-        y1: hip2.y1,
-        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
-        y2: hip2.y2 + offset,
-      })
+  newRoof.name = POLYGON_TYPE.ROOF
+  newRoof.setWall(wall)
+
+  newRoof.lines.forEach((line, index) => {
+    line.attributes = {
+      roofId: newRoof.id,
+      wallLine: wall.lines[index].id,
+      type: wall.lines[index].attributes.type,
+      offset: wall.lines[index].attributes.offset,
+      width: wall.lines[index].attributes.width,
+      pitch: wall.lines[index].attributes.pitch,
+      sleeve: wall.lines[index].attributes.sleeve || false,
     }
+  })
+  wall.attributes = {
+    roofId: newRoof.id,
   }
-  if (ridge.direction === 'right') {
-    if (ridge.x1 > x1 && ridge.x2 > x1) {
-      offset = Math.abs(ridge.x1 - x1) - offset
-      offset = offset < 0 ? 0 : offset
-      ridge.set({
-        x1: ridge.x1 - offset,
-        y1: ridge.y1,
-        x2: ridge.x2,
-        y2: ridge.y2,
-      })
-      gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
-        fontSize: roof.fontSize,
-        stroke: 'blue',
-        strokeWidth: 1,
-        name: 'gableLine',
-      })
-      canvas?.add(gableLine)
 
-      hip1.set({
-        x1: hip1.x1,
-        y1: hip1.y1,
-        x2: hip1.x2 - offset,
-        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
-      })
-
-      hip2.set({
-        x1: hip2.x1,
-        y1: hip2.y1,
-        x2: hip2.x2 - offset,
-        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
-      })
-    }
-    if (ridge.x1 < x1 && ridge.x2 < x1) {
-      offset = Math.abs(ridge.x2 - x1) - offset
-      offset = offset < 0 ? 0 : offset
-      ridge.set({
-        x1: ridge.x1,
-        y1: ridge.y1,
-        x2: ridge.x2 + offset,
-        y2: ridge.y2,
-      })
-      gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
-        fontSize: roof.fontSize,
-        stroke: 'blue',
-        strokeWidth: 1,
-        name: 'gableLine',
-      })
-      canvas?.add(gableLine)
-
-      hip1.set({
-        x1: hip1.x1,
-        y1: hip1.y1,
-        x2: hip1.x2 + offset,
-        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
-      })
-
-      hip2.set({
-        x1: hip2.x1,
-        y1: hip2.y1,
-        x2: hip2.x2 + offset,
-        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
-      })
-    }
-  }
-  if (ridge.direction === 'left') {
-    if (ridge.x1 > x1 && ridge.x2 > x1) {
-      offset = Math.abs(ridge.x1 - x1) - offset
-      offset = offset < 0 ? 0 : offset
-      ridge.set({
-        x1: ridge.x1,
-        y1: ridge.y1,
-        x2: ridge.x2 + offset,
-        y2: ridge.y2,
-      })
-      gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
-        fontSize: roof.fontSize,
-        stroke: 'blue',
-        strokeWidth: 1,
-        name: 'gableLine',
-      })
-      canvas?.add(gableLine)
-
-      hip1.set({
-        x1: hip1.x1,
-        y1: hip1.y1,
-        x2: hip1.x2 + offset,
-        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
-      })
-
-      hip2.set({
-        x1: hip2.x1,
-        y1: hip2.y1,
-        x2: hip2.x2 + offset,
-        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
-      })
-    }
-    if (ridge.x1 < x1 && ridge.x2 < x1) {
-      offset = Math.abs(ridge.x2 - x1) - offset
-      offset = offset < 0 ? 0 : offset
-      ridge.set({
-        x1: ridge.x1 - offset,
-        y1: ridge.y1,
-        x2: ridge.x2,
-        y2: ridge.y2,
-      })
-      gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
-        fontSize: roof.fontSize,
-        stroke: 'blue',
-        strokeWidth: 1,
-        name: 'gableLine',
-      })
-      canvas?.add(gableLine)
-
-      hip1.set({
-        x1: hip1.x1,
-        y1: hip1.y1,
-        x2: hip1.x2 - offset,
-        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
-      })
-
-      hip2.set({
-        x1: hip2.x1,
-        y1: hip2.y1,
-        x2: hip2.x2 - offset,
-        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
-      })
-    }
-  }
+  wall.lines.forEach((line, index) => {
+    line.attributes.roofId = newRoof.id
+    line.attributes.currentRoof = newRoof.lines[index].id
+  })
+  canvas?.add(newRoof)
   canvas?.renderAll()
-  return gableLine
+
+  newRoof.drawHelpLine()
 }
 
 /**
@@ -2937,6 +3114,61 @@ const reDrawPolygon = (polygon, canvas) => {
 
   return newPolygon
 }
+function createRoofMarginPolygon(polygon, lines, arcSegments = 0) {
+  const offsetEdges = []
+
+  polygon.edges.forEach((edge, i) => {
+    const offset = lines[i % lines.length].attributes.offset
+    const dx = edge.outwardNormal.x * offset
+    const dy = edge.outwardNormal.y * offset
+    offsetEdges.push(createOffsetEdge(edge, dx, dy))
+  })
+
+  const vertices = []
+
+  offsetEdges.forEach((thisEdge, i) => {
+    const prevEdge = offsetEdges[(i + offsetEdges.length - 1) % offsetEdges.length]
+    const vertex = edgesIntersection(prevEdge, thisEdge)
+    if (vertex && (!vertex.isIntersectionOutside || arcSegments < 1)) {
+      vertices.push({
+        x: vertex.x,
+        y: vertex.y,
+      })
+    }
+  })
+
+  const marginPolygon = createPolygon(vertices)
+  marginPolygon.offsetEdges = offsetEdges
+  return marginPolygon
+}
+
+function createRoofPaddingPolygon(polygon, lines, arcSegments = 0) {
+  const offsetEdges = []
+
+  polygon.edges.forEach((edge, i) => {
+    const offset = lines[i % lines.length].attributes.offset
+    const dx = edge.inwardNormal.x * offset
+    const dy = edge.inwardNormal.y * offset
+    offsetEdges.push(createOffsetEdge(edge, dx, dy))
+  })
+
+  const vertices = []
+
+  offsetEdges.forEach((thisEdge, i) => {
+    const prevEdge = offsetEdges[(i + offsetEdges.length - 1) % offsetEdges.length]
+    const vertex = edgesIntersection(prevEdge, thisEdge)
+    if (vertex && (!vertex.isIntersectionOutside || arcSegments < 1)) {
+      vertices.push({
+        x: vertex.x,
+        y: vertex.y,
+      })
+    }
+  })
+
+  const paddingPolygon = createPolygon(vertices)
+  paddingPolygon.offsetEdges = offsetEdges
+  return paddingPolygon
+}
 
 function arePointsEqual(point1, point2) {
   return point1.x === point2.x && point1.y === point2.y