From 819ba5c8ca0ba0695fde11e8ffd430fe8fd0a145 Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Tue, 30 Jul 2024 16:35:00 +0900
Subject: [PATCH 01/14] test

---
 src/components/Roof2.jsx |  8 ++++--
 src/hooks/useMode.js     | 54 +++++++++++++++++++++++++++++++++-------
 src/store/canvasAtom.js  |  6 +++++
 3 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 5582d214..473ca435 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -385,8 +385,12 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(2)}>
               지붕패턴2
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.MODULE)}>
-              모듈
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
+              onClick={() => changeMode(canvas, Mode.ROOT_TRESTLE)}
+            >
+              지붕가대생성
             </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
               텍스트박스 모드
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index e0f6097c..4f1aba88 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -3,7 +3,16 @@ import QRect from '@/components/fabric/QRect'
 import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
 
-import { canvasSizeState, fontSizeState, roofPolygonPatternArrayState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom'
+import {
+  canvasSizeState,
+  fontSizeState,
+  roofPolygonPatternArrayState,
+  roofState,
+  sortedPolygonArray,
+  wallState,
+  templateTypeState,
+  roofPolygonArrayState,
+} from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
 import { QPolygon } from '@/components/fabric/QPolygon'
@@ -17,6 +26,8 @@ export const Mode = {
   TEXTBOX: 'textbox',
   DRAW_RECT: 'drawRect',
   ROOF_PATTERN: 'roofPattern',
+  MODULE: 'module',
+  ROOT_TRESTLE: 'rootTrestle',
   DEFAULT: 'default',
 }
 
@@ -39,6 +50,8 @@ export function useMode() {
   const pointCount = useRef(0)
 
   const [roofPolygonPattern, setRoofPolygonPattern] = useRecoilState(roofPolygonPatternArrayState)
+  const [roofPolygonArray, setRoofPolygonArray] = useRecoilState(roofPolygonArrayState)
+  const [templateType, setTemplateType] = useRecoilState(templateTypeState)
 
   const [canvasSize] = useRecoilState(canvasSizeState)
 
@@ -225,6 +238,9 @@ export function useMode() {
       case 'roofPattern':
         makeRoofPatternPolygon()
         break
+      case 'rootTrestle':
+        makeRoofTrestle()
+        break
     }
   }
 
@@ -1013,9 +1029,7 @@ export function useMode() {
   /**
    *벽 지붕 외곽선 생성
    */
-  const handleOuterlinesTest = (offsetInputX, offsetInputY = 0) => {
-    const polygon = drawWallPolygon()
-
+  const handleOuterlinesTest = (polygon, offsetInputX, offsetInputY = 0) => {
     let offsetPoints = []
     const originalMax = 71
     const transformedMax = 100
@@ -1083,7 +1097,7 @@ export function useMode() {
       offsetPoints.push(offsetPoint)
     }
 
-    makePolygon(offsetPoints)
+    return makePolygon(offsetPoints)
   }
 
   /**
@@ -1206,6 +1220,7 @@ export function useMode() {
     } else if (polygon.lines.length === 8) {
       handleOuterLineTemplateA8Points(polygon)
     }
+    setTemplateType(2)
   }
 
   const handleOuterLineTemplateA4Points = (polygon) => {
@@ -1327,15 +1342,15 @@ export function useMode() {
 
     const dashedCenterLineOpt = {
       stroke: 'black',
-      strokeWidth: 4,
+      strokeWidth: 1,
       property: 'centerLine',
-      strokeDashArray: [5, 5],
+      strokeDashArray: [10, 5],
       fontSize: 14,
     }
 
     const centerLineOpt = {
       stroke: 'blue',
-      strokeWidth: 5,
+      strokeWidth: 1,
       property: 'bigHoriCenter',
       fontSize: 14,
     }
@@ -1347,7 +1362,7 @@ export function useMode() {
 
       const line = new QLine([start.x, start.y, end.x, end.y], {
         stroke: '#A0D468',
-        strokeWidth: 5,
+        strokeWidth: 2,
         property: 'normal',
         fontSize: 14,
       })
@@ -2637,6 +2652,8 @@ export function useMode() {
       console.log('6각형')
       handleTemplateB(params)
     }
+
+    setTemplateType(3)
   }
 
   /**
@@ -3190,13 +3207,32 @@ export function useMode() {
       fontSize: 15, // fontSize는 필요에 따라 조정
     }
 
+    let polygonArray = []
+
     roofPolygonPattern.roofPatternPolygonArray.forEach((patternPolygon, index) => {
       const drawPolygon = new QPolygon(patternPolygon, commonOption)
       drawPolygon.setViewLengthText(false)
       drawPolygon.sendToBack()
       canvas.add(drawPolygon)
+      polygonArray.push(drawPolygon)
     })
     canvas.renderAll()
+
+    setRoofPolygonArray(polygonArray)
+  }
+
+  const makeRoofTrestle = () => {
+    if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
+      alert('객체가 비어있습니다.')
+      return
+    }
+
+    const polygons = roofPolygonArray
+
+    polygons.forEach((polygon) => {
+      const trestlePolygon = handleOuterlinesTest(polygon, -12)
+      trestlePolygon.set('stroke', 'red').set('strokeDashArray', [9, 5]).set('strokeWidth', 0.3).setViewLengthText(false)
+    })
   }
 
   return {
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index a5195f83..c51a7061 100644
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@@ -42,6 +42,12 @@ export const roofPolygonPatternArrayState = atom({
   dangerouslyAllowMutability: true,
 })
 
+export const roofPolygonArrayState = atom({
+  key: 'roofPolygonArray',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
 export const templateTypeState = atom({
   key: 'templateType',
   default: 1, //1:모임지붕, 2:A타입, 3:B타입

From d5a124c33543cb1320e5215d8ff6401fd55e6acd Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 31 Jul 2024 10:01:07 +0900
Subject: [PATCH 02/14] =?UTF-8?q?8=EA=B0=9C=20=EC=9D=B4=ED=95=98=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=EB=8A=94=20=EA=B8=B0=EC=A1=B4=20sort=20=EB=A3=B0=20?=
 =?UTF-8?q?=EC=9D=B4=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/canvas-util.js | 62 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js
index 75bf9439..5977eeb4 100644
--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@@ -422,6 +422,68 @@ export const sortedPoints = (points) => {
   })
 }
 
+export const sortedPointLessEightPoint = (points) => {
+  const copyPoints = [...points]
+  //points를 x,y좌표를 기준으로 정렬합니다.
+  copyPoints.sort((a, b) => {
+    if (a.x === b.x) {
+      return a.y - b.y
+    }
+    return a.x - b.x
+  })
+
+  const resultPoints = [copyPoints[0]]
+  let index = 1
+  let currentPoint = { ...copyPoints[0] }
+  copyPoints.splice(0, 1)
+  while (index < points.length) {
+    if (index === points.length - 1) {
+      resultPoints.push(copyPoints[0])
+      index++
+      break
+    } else if (index % 2 === 0) {
+      // 짝수번째는 y값이 같은 점을 찾는다.
+      for (let i = 0; i < copyPoints.length; i++) {
+        // y값이 같은 point가 많은 경우 그 중 x값이 가장 큰걸 찾는다.
+        let temp = copyPoints.filter((point) => point.y === currentPoint.y)
+        if (temp.length === 0) {
+          // temp가 비어있을 경우 copyPoints에서 가장 가까운 점을 찾는다.
+          temp = Array.of(findClosestPointByY(currentPoint, copyPoints))
+        }
+        // temp중 x값이 가장 가까운 값
+
+        const min = temp.reduce((prev, current) => (Math.abs(current.x - currentPoint.x) <= Math.abs(prev.x - currentPoint.x) ? current : prev))
+
+        resultPoints.push(min)
+        currentPoint = min
+        copyPoints.splice(copyPoints.indexOf(min), 1)
+        index++
+        break
+      }
+    } else {
+      // 홀수번째는 x값이 같은 점을 찾는다.
+      for (let i = 0; i < copyPoints.length; i++) {
+        // x값이 같은 point가 많은 경우 그 중 y값이 가장 큰걸 찾는다.
+        let temp = copyPoints.filter((point) => point.x === currentPoint.x)
+        if (temp.length === 0) {
+          // temp가 비어있을 경우 copyPoints에서 가장 가까운 점을 찾는다.
+
+          temp = Array.of(findClosestPointByX(currentPoint, copyPoints))
+        }
+        // temp중 y값이 가장 가까운 값
+        const min = temp.reduce((prev, current) => (Math.abs(current.y - currentPoint.y) <= Math.abs(prev.y - currentPoint.y) ? current : prev))
+
+        resultPoints.push(min)
+        currentPoint = min
+        copyPoints.splice(copyPoints.indexOf(min), 1)
+        index++
+        break
+      }
+    }
+  }
+  return resultPoints
+}
+
 /**
  * point가 선 위에 있는지 확인
  * @param line

From f04dc4a6f8fae8894d3f92d4cdb79273b0fe787a Mon Sep 17 00:00:00 2001
From: Jaeyoung Lee <kkang090@gmail.com>
Date: Wed, 31 Jul 2024 10:04:22 +0900
Subject: [PATCH 03/14] =?UTF-8?q?prettier=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 1 +
 yarn.lock    | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/package.json b/package.json
index 9c745fdf..a5c429a7 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "postcss": "^8",
+    "prettier": "^3.3.3",
     "prisma": "^5.17.0",
     "tailwindcss": "^3.4.1"
   }
diff --git a/yarn.lock b/yarn.lock
index 94bdd351..f34efa44 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3221,6 +3221,11 @@ postcss@^8, postcss@^8.4.23:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
 prisma@^5.17.0:
   version "5.17.0"
   resolved "https://registry.yarnpkg.com/prisma/-/prisma-5.17.0.tgz#267b43921ab94805b010537cffa5ccaf530fa066"

From ba590c4f9f618fb6f721fd76168603ded5a72a03 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 31 Jul 2024 10:13:11 +0900
Subject: [PATCH 04/14] =?UTF-8?q?Qpolygon=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fabric/QPolygon.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index b5978bfb..da256f70 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -1,8 +1,8 @@
 import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
-import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPoints } from '@/util/canvas-util'
-import { drawHelpLineInHexagon } from '@/util/qpolygon-utils'
+import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
+import { drawHelpLineInHexagon, drawHelpLineInHexagon2, drawHelpLineInHexagon3 } from '@/util/qpolygon-utils'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
@@ -16,7 +16,12 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       point.x = Math.round(point.x)
       point.y = Math.round(point.y)
     })
-    points = sortedPoints(points)
+    if (points.length <= 8) {
+      points = sortedPointLessEightPoint(points)
+    } else {
+      points = sortedPoints(points)
+    }
+
     this.callSuper('initialize', points, options)
     if (options.id) {
       this.id = options.id
@@ -117,11 +122,11 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
   // 보조선 그리기
   drawHelpLine(chon = 4) {
-    drawHelpLineInHexagon(this, chon)
+    drawHelpLineInHexagon2(this, chon)
   },
 
   addLengthText() {
-    const points = this.getCurrentPoints()
+    let points = this.points
 
     points.forEach((start, i) => {
       const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id && obj.idx === i)

From 14a4bfa0d91c5bdc7915a592b7663a5659a47bdf Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Wed, 31 Jul 2024 10:22:40 +0900
Subject: [PATCH 05/14] =?UTF-8?q?=EA=B0=80=EB=8C=80=20=EC=84=A4=EC=B9=98?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fabric/QPolygon.js |  6 +++---
 src/hooks/useMode.js              | 29 ++++++++++++++++++++++-------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index da256f70..73732dea 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -2,7 +2,7 @@ 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 { drawHelpLineInHexagon, drawHelpLineInHexagon2, drawHelpLineInHexagon3 } from '@/util/qpolygon-utils'
+import { drawHelpLineInHexagon2 } from '@/util/qpolygon-utils'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
@@ -212,9 +212,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
             top: rectTop,
             width: rectWidth,
             height: rectHeight,
-            stroke: 'black', // or any other color
-            fill: 'transparent',
+            fill: '#BFFD9F',
             selectable: false,
+            opacity: 0.6,
           })
 
           this.canvas.add(rect)
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 4f1aba88..932ec2cd 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -6,12 +6,12 @@ import { useRecoilState } from 'recoil'
 import {
   canvasSizeState,
   fontSizeState,
+  roofPolygonArrayState,
   roofPolygonPatternArrayState,
   roofState,
   sortedPolygonArray,
-  wallState,
   templateTypeState,
-  roofPolygonArrayState,
+  wallState,
 } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
@@ -2267,7 +2267,13 @@ export function useMode() {
           canvas.add(centerLine2)
           canvas.remove(outLines[idx]) //기존 라인 삭제
 
-          halfHoriCenterLinePoint.push({ index: idx, x1: centerLine1.x1, y1: centerLine1.y1, x2: centerLine1.x2, y2: centerLine1.y2 }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
+          halfHoriCenterLinePoint.push({
+            index: idx,
+            x1: centerLine1.x1,
+            y1: centerLine1.y1,
+            x2: centerLine1.x2,
+            y2: centerLine1.y2,
+          }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
         }
       })
 
@@ -2468,7 +2474,13 @@ export function useMode() {
             canvas.add(centerLine2)
             canvas.remove(outline) //기존 라인 삭제
 
-            halfHoriCenterLinePoint.push({ index: index, x1: centerLine1.x1, y1: centerLine1.y1, x2: centerLine1.x2, y2: centerLine1.y2 }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
+            halfHoriCenterLinePoint.push({
+              index: index,
+              x1: centerLine1.x1,
+              y1: centerLine1.y1,
+              x2: centerLine1.x2,
+              y2: centerLine1.y2,
+            }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
           }
         }
       })
@@ -3211,9 +3223,8 @@ export function useMode() {
 
     roofPolygonPattern.roofPatternPolygonArray.forEach((patternPolygon, index) => {
       const drawPolygon = new QPolygon(patternPolygon, commonOption)
-      drawPolygon.setViewLengthText(false)
-      drawPolygon.sendToBack()
       canvas.add(drawPolygon)
+      drawPolygon.setViewLengthText(false)
       polygonArray.push(drawPolygon)
     })
     canvas.renderAll()
@@ -3227,11 +3238,14 @@ export function useMode() {
       return
     }
 
+    // 오목한 부분 인덱스 찾기
     const polygons = roofPolygonArray
+    let concavePolygonObj = []
 
-    polygons.forEach((polygon) => {
+    polygons.forEach((polygon, index) => {
       const trestlePolygon = handleOuterlinesTest(polygon, -12)
       trestlePolygon.set('stroke', 'red').set('strokeDashArray', [9, 5]).set('strokeWidth', 0.3).setViewLengthText(false)
+      trestlePolygon.fillCell({ width: 100, height: 30, padding: 10 })
     })
   }
 
@@ -3247,5 +3261,6 @@ export function useMode() {
     handleOuterlinesTest,
     handleOuterlinesTest2,
     makeRoofPatternPolygon,
+    makeRoofTrestle,
   }
 }

From 71494d03693134e57e54ca0aad96e446dd14c436 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 31 Jul 2024 10:55:04 +0900
Subject: [PATCH 06/14] =?UTF-8?q?=EC=95=88=EC=93=B0=EB=8A=94=EA=B1=B0=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fabric/QLine2.js    | 184 ------
 src/components/fabric/QPolygon3.js | 941 -----------------------------
 2 files changed, 1125 deletions(-)
 delete mode 100644 src/components/fabric/QLine2.js
 delete mode 100644 src/components/fabric/QPolygon3.js

diff --git a/src/components/fabric/QLine2.js b/src/components/fabric/QLine2.js
deleted file mode 100644
index d75cff2c..00000000
--- a/src/components/fabric/QLine2.js
+++ /dev/null
@@ -1,184 +0,0 @@
-/**
- * 문제 없는경우 제거
- */
-import { fabric } from 'fabric'
-import { getDirection, getDirectionByPoint } from '@/util/canvas-util'
-
-export class QLine2 extends fabric.Group {
-  line
-  text
-  fontSize
-  length = 0
-  x1
-  y1
-  x2
-  y2
-  direction
-  idx
-  type = 'QLine2'
-  parent
-  isAlreadyInterSection = false
-
-  interSectionPoints = []
-  lengthTxt = 0
-
-  initPoints
-  initOption
-  initLengthTxt
-
-  constructor(points, option = { isActiveLengthText: true }, lengthTxt) {
-    // 소수점 전부 제거
-    points.forEach((point) => {
-      point = Math.round(point)
-    })
-
-    const [x1, y1, x2, y2] = points
-
-    if (!option.fontSize) {
-      throw new Error('Font size is required.')
-    }
-
-    const line = new fabric.Line(points, { ...option, strokeWidth: 1 })
-
-    // 길이가 1이하인 선은 생성하지 않음
-    if (Math.abs(x1 - x2) <= 1 && Math.abs(y1 - y2) <= 1) {
-      super([], {})
-      this.initPoints = points
-      this.initOption = option
-      this.initLengthTxt = lengthTxt
-    } else {
-      super([line], {})
-      this.initPoints = points
-      this.initOption = option
-      this.initLengthTxt = lengthTxt
-
-      this.x1 = x1
-      this.y1 = y1
-      this.x2 = x2
-      this.y2 = y2
-      this.line = line
-      this.fontSize = option.fontSize
-      this.direction = option.direction ?? getDirectionByPoint({ x: x1, y: y1 }, { x: x2, y: y2 })
-      this.parent = option.parent
-      this.idx = option.idx
-
-      if (lengthTxt > 0) {
-        this.lengthTxt = Number(lengthTxt)
-      }
-
-      option.isActiveLengthText ?? this.init()
-      this.addControl()
-    }
-  }
-
-  init() {
-    this.addLengthText(true)
-  }
-
-  addControl() {
-    this.on('moving', () => {
-      this.addLengthText(false)
-    })
-
-    this.on('modified', (e) => {
-      this.addLengthText(false)
-    })
-
-    this.on('selected', () => {
-      console.log(this)
-      Object.keys(this.controls).forEach((controlKey) => {
-        if (controlKey !== 'ml' && controlKey !== 'mr') {
-          this.setControlVisible(controlKey, false)
-        }
-      })
-    })
-  }
-
-  static fromObject(object, callback) {
-    const { points, initOption, initLengthTxt } = object
-    const instance = new QLine(points, initOption, initLengthTxt)
-    callback && callback(instance)
-    return instance
-  }
-
-  addLengthText(isFirst) {
-    if (this.text) {
-      this.removeWithUpdate(this.text)
-      this.text = null
-    }
-
-    if (isFirst && this.lengthTxt > 0) {
-      const text = new fabric.Textbox(this.lengthTxt.toFixed(0).toString(), {
-        left: (this.x1 + this.x2) / 2,
-        top: (this.y1 + this.y2) / 2,
-        fontSize: this.fontSize,
-      })
-      this.length = this.lengthTxt
-      this.text = text
-      this.addWithUpdate(text)
-      return
-    }
-
-    const scaleX = this.scaleX
-    const scaleY = this.scaleY
-    const x1 = this.left
-    const y1 = this.top
-    const x2 = this.left + this.width * scaleX
-    const y2 = this.top + this.height * scaleY
-    const dx = x2 - x1
-    const dy = y2 - y1
-    this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0))
-
-    const text = new fabric.Textbox(this.length.toFixed(0).toString(), {
-      left: (x1 + x2) / 2,
-      top: (y1 + y2) / 2,
-      fontSize: this.fontSize,
-    })
-    this.text = text
-    this.addWithUpdate(text)
-  }
-
-  setFontSize(fontSize) {
-    this.fontSize = fontSize
-    this.text.set({ fontSize })
-    this.addWithUpdate()
-  }
-
-  fromObject(object, callback) {
-    console.log('fromObject', object, callback)
-  }
-
-  async = true
-
-  toObject(propertiesToInclude) {
-    return fabric.util.object.extend(this.callSuper('toObject'), {
-      length: this.length,
-      line: this.line,
-      text: this.text,
-      fontSize: this.fontSize,
-      x1: this.x1,
-      y1: this.y1,
-      x2: this.x2,
-      y2: this.y2,
-      direction: this.direction,
-      idx: this.idx,
-      type: this.type,
-      parent: this.parent,
-      isAlreadyInterSection: this.isAlreadyInterSection,
-      interSectionPoints: this.interSectionPoints,
-      lengthTxt: this.lengthTxt,
-      setFontSize: this.setFontSize,
-      addLengthText: this.addLengthText,
-      init: this.init,
-      addControl: this.addControl,
-      initPoints: this.initPoints,
-      initOption: this.initOption,
-      initLengthTxt: this.initLengthTxt,
-      points: this.points,
-    })
-  }
-
-  _set(key, value) {
-    this.callSuper('_set', key, value)
-  }
-}
diff --git a/src/components/fabric/QPolygon3.js b/src/components/fabric/QPolygon3.js
deleted file mode 100644
index b3770831..00000000
--- a/src/components/fabric/QPolygon3.js
+++ /dev/null
@@ -1,941 +0,0 @@
-/**
- * 문제 없는경우 제거
- */
-
-import { fabric } from 'fabric'
-import {
-  calculateIntersection,
-  calculateIntersection2,
-  distanceBetweenPoints,
-  findClosestLineToPoint,
-  findTopTwoIndexesByDistance,
-  getDegreeByChon,
-  getDirectionByPoint,
-  getRoofHeight,
-  getRoofHypotenuse,
-  sortedPoints,
-} from '@/util/canvas-util'
-import { QLine } from '@/components/fabric/QLine'
-import { drawHelpLineInHexagon } from '@/util/qpolygon-utils'
-
-export default class QPolygon3 extends fabric.Group {
-  type = 'QPolygon3'
-  polygon
-  points
-  texts = []
-  lines = []
-  canvas
-  fontSize
-  qCells = []
-  name
-  shape = 0 // 점 6개일때의 shape 모양
-  helpPoints = []
-  helpLines = []
-
-  wall
-
-  initPoints
-  initOption
-
-  constructor(points, options, canvas) {
-    /*if (points.length !== 4 && points.length !== 6) {
-      throw new Error('Points must be 4 or 6.')
-    }*/
-    if (!options.fontSize) {
-      throw new Error('Font size is required.')
-    }
-
-    // 소수점 전부 제거
-    points.forEach((point) => {
-      point.x = Math.round(point.x)
-      point.y = Math.round(point.y)
-    })
-
-    const sortPoints = sortedPoints(points)
-    const polygon = new fabric.Polygon(sortPoints, options)
-
-    super([polygon], {})
-
-    this.fontSize = options.fontSize
-    this.points = sortPoints
-    this.polygon = polygon
-    this.name = options.name
-
-    this.initPoints = points
-    this.initOption = options
-
-    this.init()
-    this.addEvent()
-    this.initLines()
-    this.setShape()
-  }
-
-  initLines() {
-    this.points.forEach((point, i) => {
-      const nextPoint = this.points[(i + 1) % this.points.length]
-      const line = new QLine([point.x, point.y, nextPoint.x, nextPoint.y], {
-        stroke: this.stroke,
-        strokeWidth: this.strokeWidth,
-        fontSize: this.fontSize,
-        idx: i,
-        direction: getDirectionByPoint(point, nextPoint),
-      })
-
-      this.lines.push(line)
-    })
-  }
-
-  init() {
-    this.addLengthText()
-  }
-
-  addEvent() {
-    this.on('scaling', (e) => {
-      this.updateLengthText()
-    })
-
-    this.on('selected', function () {
-      // 모든 컨트롤 떼기
-
-      Object.keys(this.controls).forEach((controlKey) => {
-        if (controlKey !== 'mtr') {
-          this.setControlVisible(controlKey, false)
-        }
-      })
-    })
-  }
-
-  setWall(wall) {
-    this.wall = wall
-  }
-
-  setFontSize(fontSize) {
-    this.fontSize = fontSize
-    this.texts.forEach((text) => {
-      text.set({ fontSize })
-    })
-
-    this.getObjects().forEach((obj) => {
-      if (obj.type[0] === 'Q') {
-        obj.setFontSize(fontSize)
-      }
-    })
-
-    this.canvas.add()
-  }
-
-  addLengthText() {
-    if (this.texts.length > 0) {
-      this.texts.forEach((text) => {
-        this.canvas.remove(text)
-      })
-      this.texts = []
-    }
-    const points = this.points
-
-    points.forEach((start, i) => {
-      const end = points[(i + 1) % points.length]
-      const dx = end.x - start.x
-      const dy = end.y - start.y
-      const length = Math.sqrt(dx * dx + dy * dy)
-
-      const midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
-
-      // Create new text object if it doesn't exist
-      const text = new fabric.Text(length.toFixed(0), {
-        left: midPoint.x,
-        top: midPoint.y,
-        fontSize: this.fontSize,
-        selectable: false,
-      })
-
-      this.texts.push(text)
-      this.canvas.add(text)
-    })
-
-    this.canvas.renderAll()
-  }
-
-  updateLengthText() {
-    const points = this.getCurrentPoints()
-
-    points.forEach((start, i) => {
-      const end = points[(i + 1) % points.length]
-      const dx = end.x - start.x
-      const dy = end.y - start.y
-      const length = Math.sqrt(dx * dx + dy * dy)
-
-      // Update the text object with the new length
-      this.texts[i].set({ text: length.toFixed(0) })
-    })
-
-    this.canvas.renderAll()
-  }
-
-  fillCell(cell = { width: 50, height: 100, padding: 10 }) {
-    const points = this.getCurrentPoints()
-    let bounds
-
-    try {
-      bounds = fabric.util.makeBoundingBoxFromPoints(points)
-    } catch (error) {
-      alert('다각형의 꼭지점이 4개 이상이어야 합니다.')
-      return
-    }
-
-    for (let x = bounds.left; x < bounds.left + bounds.width; x += cell.width + cell.padding) {
-      for (let y = bounds.top; y < bounds.top + bounds.height; y += cell.height + cell.padding) {
-        const rect = new fabric.Rect({
-          left: x,
-          top: y,
-          width: cell.width,
-          height: cell.height,
-          fill: 'transparent',
-          stroke: 'black',
-          selectable: false,
-        })
-
-        const rectPoints = [
-          new fabric.Point(rect.left, rect.top),
-          new fabric.Point(rect.left + rect.width, rect.top),
-          new fabric.Point(rect.left, rect.top + rect.height),
-          new fabric.Point(rect.left + rect.width, rect.top + rect.height),
-        ]
-
-        const isInside = rectPoints.every((rectPoint) => this.inPolygon(rectPoint) && this.distanceFromEdge(rectPoint) >= cell.padding)
-
-        if (isInside) {
-          this.canvas.add(rect)
-        }
-      }
-    }
-
-    this.canvas.renderAll()
-  }
-
-  /**
-   * this.lines의 direction이 top 인 line의 모든 합이 bottom 인 line의 모든 합과 같은지 확인
-   * this.lines의 direction이 left 인 line의 모든 합이 right 인 line의 모든 합과 같은지 확인
-   * return {boolean}
-   */
-  isValid() {
-    const leftLinesLengthSum = this.lines.filter((line) => line.direction === 'left').reduce((sum, line) => sum + line.length, 0)
-    const rightLinesLengthSum = this.lines.filter((line) => line.direction === 'right').reduce((sum, line) => sum + line.length, 0)
-
-    const topLinesLengthSum = this.lines.filter((line) => line.direction === 'top').reduce((sum, line) => sum + line.length, 0)
-    const bottomLinesLengthSum = this.lines.filter((line) => line.direction === 'bottom').reduce((sum, line) => sum + line.length, 0)
-
-    return leftLinesLengthSum === rightLinesLengthSum && topLinesLengthSum === bottomLinesLengthSum
-  }
-
-  inPolygon(point) {
-    const vertices = this.getCurrentPoints()
-    let intersects = 0
-
-    for (let i = 0; i < vertices.length; i++) {
-      let vertex1 = vertices[i]
-      let vertex2 = vertices[(i + 1) % vertices.length]
-
-      if (vertex1.y > vertex2.y) {
-        let tmp = vertex1
-        vertex1 = vertex2
-        vertex2 = tmp
-      }
-
-      if (point.y === vertex1.y || point.y === vertex2.y) {
-        point.y += 0.01
-      }
-
-      if (point.y <= vertex1.y || point.y > vertex2.y) {
-        continue
-      }
-
-      let xInt = ((point.y - vertex1.y) * (vertex2.x - vertex1.x)) / (vertex2.y - vertex1.y) + vertex1.x
-      if (xInt < point.x) {
-        intersects++
-      }
-    }
-
-    return intersects % 2 === 1
-  }
-
-  distanceFromEdge(point) {
-    const vertices = this.getCurrentPoints()
-    let minDistance = Infinity
-
-    for (let i = 0; i < vertices.length; i++) {
-      let vertex1 = vertices[i]
-      let vertex2 = vertices[(i + 1) % vertices.length]
-
-      const dx = vertex2.x - vertex1.x
-      const dy = vertex2.y - vertex1.y
-
-      const t = ((point.x - vertex1.x) * dx + (point.y - vertex1.y) * dy) / (dx * dx + dy * dy)
-
-      let closestPoint
-      if (t < 0) {
-        closestPoint = vertex1
-      } else if (t > 1) {
-        closestPoint = vertex2
-      } else {
-        closestPoint = new fabric.Point(vertex1.x + t * dx, vertex1.y + t * dy)
-      }
-
-      const distance = distanceBetweenPoints(point, closestPoint)
-      if (distance < minDistance) {
-        minDistance = distance
-      }
-    }
-
-    return minDistance
-  }
-
-  setViewLengthText(boolean) {
-    this.texts.forEach((text) => {
-      text.visible = boolean
-    })
-
-    this.canvas.renderAll()
-  }
-
-  getCurrentPoints() {
-    const scaleX = this.scaleX
-    const scaleY = this.scaleY
-
-    const left = this.left
-    const top = this.top
-
-    // 시작점
-    const point = this.points[0]
-
-    const movingX = left - point.x * scaleX
-    const movingY = top - point.y * scaleY
-
-    return this.points.map((point) => {
-      return {
-        x: point.x * scaleX + movingX,
-        y: point.y * scaleY + movingY,
-      }
-    })
-  }
-
-  fillBackground(pattern) {
-    this.polygon.set({ fill: pattern })
-    this.canvas.requestRenderAll()
-  }
-
-  // 보조선 그리기
-  drawHelpLine(chon = 4) {
-    drawHelpLineInHexagon(this, chon)
-    /*if (!this.isValid()) {
-      return
-    }*/
-
-    /*if (this.lines.length === 4) {
-      this.drawHelpLineInRect(chon)
-    } else if (this.lines.length === 6 || this.lines.length === 8) {
-      // TODO : 6각형
-      drawHelpLineInHexagon2(this, chon)
-    } /!* else if (this.lines.length === 8) {
-      // TODO : 8각형
-      this.drawHelpLineInOctagon(chon)
-    }*!/*/
-  }
-
-  /**
-   * 현재 점 6개만 가능
-   */
-  setShape() {
-    let shape = 0
-    if (this.lines.length !== 6) {
-      return
-    }
-    //외각선 기준
-    const topIndex = findTopTwoIndexesByDistance(this.lines).sort((a, b) => a - b) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨
-
-    //일단 배열 6개 짜리 기준의 선 번호
-    if (topIndex[0] === 4) {
-      if (topIndex[1] === 5) {
-        //1번
-        shape = 1
-      }
-    } else if (topIndex[0] === 1) {
-      //4번
-      if (topIndex[1] === 2) {
-        shape = 4
-      }
-    } else if (topIndex[0] === 0) {
-      if (topIndex[1] === 1) {
-        //2번
-        shape = 2
-      } else if (topIndex[1] === 5) {
-        //3번
-        shape = 3
-      }
-    }
-
-    this.shape = shape
-  }
-
-  /**
-   * 현재 점 6개만 가능
-   * @returns {number}
-   */
-  getShape() {
-    return this.shape
-  }
-
-  drawHelpLineInRect(chon) {
-    let type = 1
-    let smallestLength = Infinity
-    let maxLength = 0
-
-    this.lines.forEach((line) => {
-      if (line.length < smallestLength) {
-        smallestLength = line.length
-      }
-      if (line.length > maxLength) {
-        maxLength = line.length
-      }
-    })
-
-    // QPolygon 객체의 모든 선들을 가져옵니다.
-    const lines = [...this.lines]
-
-    // 이 선들을 길이에 따라 정렬합니다.
-    lines.sort((a, b) => a.length - b.length)
-
-    // 정렬된 배열에서 가장 작은 두 선을 선택합니다.
-    let smallestLines
-
-    if (smallestLength === maxLength) {
-      // 정사각형인 경우 0, 2번째 라인이 가장 짧은 라인
-
-      smallestLines = [lines[0], lines[2]]
-    } else {
-      smallestLines = lines.slice(0, 2)
-    }
-
-    let needPlusLine
-    let needMinusLine
-
-    const direction = smallestLines[0].direction
-
-    if (direction === 'top' || direction === 'bottom') {
-      needPlusLine = smallestLines[0].x1 < smallestLines[1].x1 ? smallestLines[0] : smallestLines[1]
-      needMinusLine = needPlusLine === smallestLines[0] ? smallestLines[1] : smallestLines[0]
-
-      type = 1 // 가로가 긴 사각형
-    }
-
-    if (direction === 'left' || direction === 'right') {
-      needPlusLine = smallestLines[0].y1 < smallestLines[1].y1 ? smallestLines[0] : smallestLines[1]
-      needMinusLine = needPlusLine === smallestLines[0] ? smallestLines[1] : smallestLines[0]
-
-      type = 2 // 세로가 긴 사각형
-    }
-
-    let point1
-    let point2
-
-    if (type === 1) {
-      point1 = {
-        x: needPlusLine.x1 + smallestLength / 2,
-        y: needPlusLine.y1 > needPlusLine.y2 ? needPlusLine.y1 - smallestLength / 2 : needPlusLine.y2 - smallestLength / 2,
-      }
-
-      point2 = {
-        x: needMinusLine.x1 - smallestLength / 2,
-        y: needMinusLine.y1 > needMinusLine.y2 ? needMinusLine.y1 - smallestLength / 2 : needMinusLine.y2 - smallestLength / 2,
-      }
-    } else if (type === 2) {
-      point1 = {
-        x: needPlusLine.x1 > needPlusLine.x2 ? needPlusLine.x1 - smallestLength / 2 : needPlusLine.x2 - smallestLength / 2,
-        y: needPlusLine.y1 + smallestLength / 2,
-      }
-
-      point2 = {
-        x: needMinusLine.x1 > needMinusLine.x2 ? needMinusLine.x1 - smallestLength / 2 : needMinusLine.x2 - smallestLength / 2,
-        y: needMinusLine.y1 - smallestLength / 2,
-      }
-    }
-
-    // 빗변1
-    const realLine1 = new QLine(
-      [needPlusLine.x1, needPlusLine.y1, point1.x, point1.y],
-      { fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
-      getRoofHypotenuse(smallestLength / 2),
-    )
-
-    // 빗변2
-    const realLine2 = new QLine(
-      [needPlusLine.x2, needPlusLine.y2, point1.x, point1.y],
-      { fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
-      getRoofHypotenuse(smallestLength / 2),
-    )
-
-    // 빗변3
-    const realLine3 = new QLine(
-      [needMinusLine.x1, needMinusLine.y1, point2.x, point2.y],
-      { fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
-      getRoofHypotenuse(smallestLength / 2),
-    )
-
-    // 빗변4
-    const realLine4 = new QLine(
-      [needMinusLine.x2, needMinusLine.y2, point2.x, point2.y],
-      { fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
-      getRoofHypotenuse(smallestLength / 2),
-    )
-
-    let centerPoint1
-    let centerPoint2
-
-    if (type === 1) {
-      centerPoint1 = { x: point1.x - smallestLength / 2, y: point1.y }
-      centerPoint2 = { x: point2.x + smallestLength / 2, y: point2.y }
-    } else if (type === 2) {
-      centerPoint1 = { x: point1.x, y: point1.y - smallestLength / 2 }
-      centerPoint2 = { x: point2.x, y: point2.y + smallestLength / 2 }
-    }
-
-    // 옆으로 누워있는 지붕의 높이
-    const realLine5 = new QLine(
-      [point1.x, point1.y, centerPoint1.x, centerPoint1.y],
-      {
-        fontSize: this.fontSize,
-        stroke: 'black',
-        strokeWidth: 1,
-        strokeDashArray: [5, 5],
-      },
-      getRoofHeight(smallestLength / 2, getDegreeByChon(chon)),
-    )
-
-    // 옆으로 누워있는 지붕의 높이
-    const realLine6 = new QLine(
-      [point2.x, point2.y, centerPoint2.x, centerPoint2.y],
-      {
-        fontSize: this.fontSize,
-        stroke: 'black',
-        strokeWidth: 1,
-        strokeDashArray: [5, 5],
-      },
-      getRoofHeight(smallestLength / 2, getDegreeByChon(chon)),
-    )
-
-    // 용마루
-    const ridge = new QLine([point1.x, point1.y, point2.x, point2.y], {
-      fontSize: this.fontSize,
-      stroke: 'black',
-      strokeWidth: 1,
-    })
-
-    this.canvas.add(realLine1)
-    this.canvas.add(realLine2)
-    this.canvas.add(realLine3)
-    this.canvas.add(realLine4)
-    this.canvas.add(realLine5)
-    this.canvas.add(realLine6)
-    if (smallestLength !== maxLength) {
-      // 정사각형이 아닌경우에만 용마루를 추가한다.
-      this.canvas.add(ridge)
-    }
-  }
-  drawHelpLineInHexagon2(chon) {
-    const oneSideLines = [...this.lines].map((line) => {
-      let newX1, newY1, newX2, newY2
-      if (line.direction === 'top') {
-        newX1 = line.x2
-        newY1 = line.y2
-        newX2 = line.x1
-        newY2 = line.y1
-
-        line.x1 = newX1
-        line.y1 = newY1
-        line.x2 = newX2
-        line.y2 = newY2
-        line.direction = 'bottom'
-      } else if (line.direction === 'left') {
-        newX1 = line.x2
-        newY1 = line.y2
-        newX2 = line.x1
-        newY2 = line.y1
-
-        line.x1 = newX1
-        line.y1 = newY1
-        line.x2 = newX2
-        line.y2 = newY2
-        line.direction = 'right'
-      }
-      return line
-    })
-
-    const centerLines = []
-    const helpLines = []
-    const ridgeStartPoints = []
-
-    const horizontalLines = oneSideLines.filter((line) => line.direction === 'right')
-    const verticalLines = oneSideLines.filter((line) => line.direction === 'bottom')
-
-    const horizontalMaxLength = horizontalLines.reduce((max, obj) => Math.max(max, obj.length), 0)
-    const verticalMaxLength = verticalLines.reduce((max, obj) => Math.max(max, obj.length), 0)
-    // 모든 가로선의 중심선을 긋는다.
-    horizontalLines.forEach((line, index) => {
-      const nextLine = horizontalLines[(index + 1) % horizontalLines.length]
-
-      const startCenterX = Math.max(line.x1, nextLine.x1)
-      const startCenterY = (line.y1 + nextLine.y1) / 2
-
-      let endCenterX = line.length >= nextLine.length ? startCenterX + line.length : startCenterX + nextLine.length
-      const endCenterY = startCenterY
-
-      if (endCenterX > Math.max(line.x2, nextLine.x2)) {
-        endCenterX = Math.max(line.x2, nextLine.x2)
-      }
-
-      const centerLine = new QLine([startCenterX, startCenterY, endCenterX, endCenterY], {
-        fontSize: this.fontSize,
-        stroke: 'red',
-        strokeWidth: 1,
-        direction: 'horizontal',
-      })
-
-      // this.addWithUpdate(centerLine)
-
-      centerLines.push(centerLine)
-    })
-
-    // 모든 세로선의 중심선을 긋는다.
-    verticalLines.forEach((line, index) => {
-      const nextLine = verticalLines[(index + 1) % verticalLines.length]
-
-      const startCenterX = (line.x1 + nextLine.x1) / 2
-      const startCenterY = Math.min(line.y1, nextLine.y1)
-
-      const endCenterX = startCenterX
-      let endCenterY = line.length >= nextLine.length ? startCenterY + line.length : startCenterY + nextLine.length
-
-      if (endCenterY > Math.max(line.y2, nextLine.y2)) {
-        endCenterY = Math.max(line.y2, nextLine.y2)
-      }
-
-      const centerLine = new QLine([startCenterX, startCenterY, endCenterX, endCenterY], {
-        fontSize: this.fontSize,
-        stroke: 'blue',
-        strokeWidth: 1,
-        direction: 'vertical',
-      })
-      // this.addWithUpdate(centerLine)
-
-      centerLines.push(centerLine)
-    })
-
-    const maxLength = horizontalMaxLength < verticalMaxLength ? horizontalMaxLength : verticalMaxLength
-
-    this.points.forEach((point, index) => {
-      const wallPoint = this.wall.points[index]
-      // 두 점의 좌표
-      const x1 = point.x
-      const y1 = point.y
-      const x2 = wallPoint.x
-      const y2 = wallPoint.y
-
-      let newX2, newY2
-
-      // x1, y1을 기준으로 x2, y2와의 거리를 유지한 새로운 직선 생성
-      const angle = Math.atan2(y2 - y1, x2 - x1)
-
-      newX2 = Math.floor(x1 + (maxLength / 2 + 50) * Math.cos(angle))
-      newY2 = Math.floor(y1 + (maxLength / 2 + 50) * Math.sin(angle))
-
-      const line = new QLine([x1, y1, newX2, newY2], {
-        fontSize: this.fontSize,
-        stroke: 'green',
-        idx: index,
-      })
-      this.addWithUpdate(line)
-      helpLines.push(line)
-      this.canvas.renderAll()
-    })
-
-    helpLines.forEach((line, index) => {
-      if (line.isAlreadyInterSection) {
-        return
-      }
-      const nextLine = helpLines[(index + 1 + helpLines.length) % helpLines.length]
-      this.canvas.renderAll()
-
-      let intersectionPoint = calculateIntersection(line, nextLine)
-      if (!intersectionPoint) {
-        return
-      }
-
-      line.set({ isAlreadyInterSection: true })
-      nextLine.set({ isAlreadyInterSection: true })
-
-      const helpLine1 = new QLine([nextLine.x1, nextLine.y1, intersectionPoint.x, intersectionPoint.y], {
-        fontSize: this.fontSize,
-        stroke: 'skyblue',
-      })
-
-      const helpLine2 = new QLine([line.x1, line.y1, intersectionPoint.x, intersectionPoint.y], {
-        fontSize: this.fontSize,
-        stroke: 'skyblue',
-      })
-
-      ridgeStartPoints.push(intersectionPoint)
-      this.addWithUpdate(helpLine1)
-      this.addWithUpdate(helpLine2)
-      this.removeWithUpdate(nextLine)
-      this.removeWithUpdate(line)
-      this.canvas.renderAll()
-    })
-
-    // 안만나는 선들
-    const notInterSectionLines = helpLines.filter((line) => !line.isAlreadyInterSection)
-    const ridgeEndPoints = []
-    const interSectionPoints = []
-
-    notInterSectionLines.forEach((line, index) => {
-      line.line.set({ strokeWidth: (index + 1) * 5 })
-
-      centerLines.forEach((centerLine) => {
-        const interSectionPoint = calculateIntersection2(line, centerLine)
-
-        if (!this.inPolygon(interSectionPoint) || !interSectionPoint) {
-          return
-        }
-        line.interSectionPoints.push(interSectionPoint)
-        interSectionPoints.push(interSectionPoint)
-      })
-    })
-
-    ridgeStartPoints.forEach((point, index) => {
-      let arrivalPoint
-      let distance = Infinity
-      let startPoint
-      interSectionPoints.forEach((interSectionPoint) => {
-        if (Math.abs(point.x - interSectionPoint.x) < 3 || Math.abs(point.y - interSectionPoint.y) < 3) {
-          if (distanceBetweenPoints(point, interSectionPoint) < distance) {
-            startPoint = point
-            distance = distanceBetweenPoints(point, interSectionPoint)
-            arrivalPoint = interSectionPoint
-          }
-        }
-      })
-
-      if (arrivalPoint) {
-        const line = notInterSectionLines.filter((line) => line.interSectionPoints.includes(arrivalPoint))[0]
-
-        const ridge = new QLine([startPoint.x, startPoint.y, arrivalPoint.x, arrivalPoint.y], {
-          stroke: 'black',
-          fontSize: this.fontSize,
-        })
-
-        const helpLine = new QLine([line.x1, line.y1, arrivalPoint.x, arrivalPoint.y], {
-          stroke: 'red',
-          fontSize: this.fontSize,
-        })
-
-        ridgeEndPoints.push(arrivalPoint)
-        this.addWithUpdate(ridge)
-        this.addWithUpdate(helpLine)
-        this.removeWithUpdate(line)
-        this.canvas.renderAll()
-      }
-    })
-
-    ridgeEndPoints.forEach((point, index) => {
-      const currentRidgeEndPoint = ridgeEndPoints[index]
-      const nextRidgeEndPoint = ridgeEndPoints[(index + 1) % ridgeEndPoints.length]
-      const ridgeConnectLine = new QLine([currentRidgeEndPoint.x, currentRidgeEndPoint.y, nextRidgeEndPoint.x, nextRidgeEndPoint.y], {
-        fontSize: this.fontSize,
-        stroke: 'green',
-      })
-
-      this.addWithUpdate(ridgeConnectLine)
-      this.canvas.renderAll()
-    })
-  }
-  drawHelpLineInHexagon(chon) {
-    const historyLines = []
-    const helpPoints = []
-    const notInterSectionLines = []
-    const ridge = []
-    const maxLength = this.lines.reduce((max, obj) => Math.max(max, obj.length), 0)
-    this.points.forEach((point, index) => {
-      const wallPoint = this.wall.points[index]
-      // 두 점의 좌표
-      const x1 = point.x
-      const y1 = point.y
-      const x2 = wallPoint.x
-      const y2 = wallPoint.y
-      const historyLines = []
-      const helpPoints = []
-      const notInterSectionLines = []
-      const ridge = []
-      const maxLength = this.lines.reduce((max, obj) => Math.max(max, obj.length), 0)
-      this.points.forEach((point, index) => {
-        const wallPoint = this.wall.points[index]
-        // 두 점의 좌표
-        const x1 = point.x
-        const y1 = point.y
-        const x2 = wallPoint.x
-        const y2 = wallPoint.y
-
-        let newX2, newY2
-
-        // x1, y1을 기준으로 x2, y2와의 거리를 유지한 새로운 직선 생성
-        const angle = Math.atan2(y2 - y1, x2 - x1)
-
-        newX2 = x1 + (maxLength / 2) * Math.cos(angle)
-        newY2 = y1 + (maxLength / 2) * Math.sin(angle)
-
-        const line = new QLine([x1, y1, newX2, newY2], {
-          fontSize: this.fontSize,
-          stroke: 'blue',
-          idx: index,
-        })
-        historyLines.push(line)
-        this.canvas.add(line)
-
-        this.canvas.renderAll()
-      })
-
-      /**
-       * 삼각 지붕
-       */
-      historyLines.forEach((line, index) => {
-        const prevLine = historyLines[(index - 1 + historyLines.length) % historyLines.length]
-
-        let intersectionPoint = calculateIntersection(line, prevLine)
-
-        if (!intersectionPoint) {
-          notInterSectionLines.push(line)
-          return
-        }
-
-        const helpLine1 = new QLine([prevLine.x1, prevLine.y1, intersectionPoint.x, intersectionPoint.y], {
-          fontSize: this.fontSize,
-          stroke: 'red',
-        })
-
-        const helpLine2 = new QLine([line.x1, line.y1, intersectionPoint.x, intersectionPoint.y], {
-          fontSize: this.fontSize,
-          stroke: 'red',
-        })
-        notInterSectionLines.pop()
-        helpPoints.push(intersectionPoint)
-
-        this.canvas.add(helpLine1)
-        this.canvas.add(helpLine2)
-        this.canvas.remove(prevLine)
-        this.canvas.remove(line)
-        this.canvas.renderAll()
-      })
-      // 용마루
-
-      const ridgePoint = []
-
-      helpPoints.forEach((helpPoint, index) => {
-        const closestLine = findClosestLineToPoint(helpPoint, notInterSectionLines)
-
-        // 가까운 선의 중심점
-        const centerClosestLinePoint = {
-          x: (closestLine.x1 + closestLine.x2) / 2,
-          y: (closestLine.y1 + closestLine.y2) / 2,
-        }
-
-        const direction = getDirectionByPoint(helpPoint, centerClosestLinePoint)
-
-        let newX, newY
-
-        switch (direction) {
-          case 'left': {
-            newX = ((closestLine.x2 - closestLine.x1) * (helpPoint.y - closestLine.y1)) / (closestLine.y2 - closestLine.y1) + closestLine.x1
-            newY = helpPoint.y
-            break
-          }
-          case 'right': {
-            newX = ((closestLine.x2 - closestLine.x1) * (helpPoint.y - closestLine.y1)) / (closestLine.y2 - closestLine.y1) + closestLine.x1
-            newY = helpPoint.y
-            break
-          }
-          case 'top': {
-            newX = helpPoint.x
-            newY = ((closestLine.y2 - closestLine.y1) * (helpPoint.x - closestLine.x1)) / (closestLine.x2 - closestLine.x1) + closestLine.y1
-            break
-          }
-          case 'bottom': {
-            newX = helpPoint.x
-            newY = ((closestLine.y2 - closestLine.y1) * (helpPoint.x - closestLine.x1)) / (closestLine.x2 - closestLine.x1) + closestLine.y1
-            break
-          }
-        }
-
-        const ridgeHelpLine = new QLine([closestLine.x1, closestLine.y1, newX, newY], {
-          fontSize: this.fontSize,
-          stroke: 'purple',
-          strokeWidth: 5,
-        })
-
-        ridgePoint.push({ x: newX, y: newY })
-
-        const ridge = new QLine([helpPoint.x, helpPoint.y, newX, newY], {
-          fontSize: this.fontSize,
-          stroke: 'skyblue',
-          strokeWidth: 5,
-        })
-
-        this.canvas.add(ridge)
-        this.canvas.renderAll()
-
-        this.canvas.add(ridgeHelpLine)
-        this.canvas.remove(closestLine)
-        this.canvas.renderAll()
-      })
-
-      // 용마루 끼리 연결
-      for (let i = 0; i < ridgePoint.length; i = i + 2) {
-        const currentRidgeEndPoint = ridgePoint[i]
-        const nextRidgeEndPoint = ridgePoint[(i + 1) % ridgePoint.length]
-        const ridgeConnectLine = new QLine([currentRidgeEndPoint.x, currentRidgeEndPoint.y, nextRidgeEndPoint.x, nextRidgeEndPoint.y], {
-          fontSize: this.fontSize,
-          stroke: 'green',
-          strokeWidth: 5,
-        })
-        this.canvas.add(ridgeConnectLine)
-        this.canvas.renderAll()
-      }
-
-      this.canvas.renderAll()
-    })
-  }
-
-  drawHelpLineInOctagon(chon) {}
-
-  getObject() {
-    return this
-  }
-  sou
-
-  toObject(propertiesToInclude) {
-    return fabric.util.object.extend(this.callSuper('toObject'), {
-      points: this.points,
-      fontSize: this.fontSize,
-      name: this.name,
-      shape: this.shape,
-      texts: this.texts,
-      lines: this.lines,
-      wall: this.wall,
-      initPoints: this.initPoints,
-      initOption: this.initOption,
-      objects: this.getObjects().map((obj) => obj.toObject(propertiesToInclude)),
-      pattern: this.pattern,
-    })
-  }
-
-  _set(key, value) {
-    this.callSuper('_set', key, value)
-  }
-}

From 76d9a046a43aa4a450a1b244eda85a3258831cf8 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 31 Jul 2024 10:55:36 +0900
Subject: [PATCH 07/14] =?UTF-8?q?QPolygon=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fabric/QPolygon.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 73732dea..c178714a 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -2,7 +2,7 @@ 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 { drawHelpLineInHexagon2 } from '@/util/qpolygon-utils'
+import { drawHelpLineInHexagon } from '@/util/qpolygon-utils'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
@@ -10,6 +10,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   texts: [],
   id: null,
   length: 0,
+  hips: [],
+  ridges: [],
+  connectRidges: [],
   initialize: function (points, options, canvas) {
     // 소수점 전부 제거
     points.forEach((point) => {
@@ -122,7 +125,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
   // 보조선 그리기
   drawHelpLine(chon = 4) {
-    drawHelpLineInHexagon2(this, chon)
+    drawHelpLineInHexagon(this, chon)
   },
 
   addLengthText() {
@@ -313,4 +316,5 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       text.set({ visible: isView })
     })
   },
+  divideLine() {},
 })

From bf82b7fcaec0d11f58a5dcfcbc09d9bf2809a0d1 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 31 Jul 2024 10:56:43 +0900
Subject: [PATCH 08/14] =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/qpolygon-utils.js | 415 ++++++++++++++++++-------------------
 1 file changed, 203 insertions(+), 212 deletions(-)

diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index ba5be5e7..af5d676e 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -1,292 +1,248 @@
 import { fabric } from 'fabric'
-import QPolygon from '@/components/fabric/QPolygon3'
 import { QLine } from '@/components/fabric/QLine'
-import { calculateIntersection2, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
+import { calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
 
 export const defineQPloygon = () => {
-  fabric.QPolygon = fabric.util.createClass(fabric.Group, {})
-  // fromObject 메서드를 QLine 클래스에 직접 추가
   fabric.QPolygon.fromObject = function (object, callback) {
-    const { initOption, initPoints, initLengthTxt } = object
-
-    fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
-      return callback(new QPolygon(initPoints, object, initLengthTxt))
-    })
+    fabric.Object._fromObject('QPolygon', object, callback, 'points')
   }
 }
 
 export const drawHelpLineInHexagon = (polygon, chon) => {
   const centerLines = drawCenterLines(polygon)
+
   let helpLines = []
 
+  const interSectionPoints = []
+  const tempInterSectionPoints = []
+
   const ridgeStartPoints = []
   const ridgeEndPoints = []
 
   const centerInterSectionPoints = []
 
-  let maxLength = 0
-
-  polygon.lines = polygon.lines.sort((a, b) => a.length - b.length)
+  // polygon.lines = polygon.lines.sort((a, b) => a.length - b.length)
   polygon.wall.lines = getOneSideLines(polygon.wall)
 
-  // 짧은 라인 순서대로 삼각 지붕을 그린다.
-  polygon.lines.forEach((line, index) => {
-    if (line.length > maxLength) {
-      maxLength = line.length
-    }
-    const wallLine = polygon.wall.lines.filter((wallLine) => wallLine.idx === line.idx)[0]
+  const maxLength = Math.max(...polygon.lines.map((line) => line.length))
 
-    const checkPoint1 = polygon.points.filter((point) => point.x === line.x1 && point.y === line.y1)[0]
-    const checkPoint2 = polygon.points.filter((point) => point.x === line.x2 && point.y === line.y2)[0]
-
-    if (checkPoint1.alreadyIntersected || checkPoint2.alreadyIntersected) {
-      return
-    }
-
-    const angle1 = Math.atan2(wallLine.y1 - line.y1, wallLine.x1 - line.x1)
-    const angle2 = Math.atan2(wallLine.y2 - line.y2, wallLine.x2 - line.x2)
-
-    // line을 이등변 삼각형의 밑변으로 보고 높이를 구한다.
-
-    const helpLineLength = Math.sqrt(2 * Math.pow(line.length / 2, 2))
-
-    const firstX2 = Math.floor(line.x1 + helpLineLength * Math.cos(angle1))
-    const firstY2 = Math.floor(line.y1 + helpLineLength * Math.sin(angle1))
-
-    const secondX2 = Math.floor(line.x2 + helpLineLength * Math.cos(angle2))
-    const secondY2 = Math.floor(line.y2 + helpLineLength * Math.sin(angle2))
-
-    const firstHelpLine = new QLine([line.x1, line.y1, firstX2, firstY2], {
-      fontSize: polygon.fontSize,
-      stroke: 'skyblue',
-    })
-
-    const secondHelpLine = new QLine([line.x2, line.y2, secondX2, secondY2], {
-      fontSize: polygon.fontSize,
-      stroke: 'skyblue',
-    })
-
-    const interSectionPoint = calculateIntersection2(firstHelpLine, secondHelpLine)
-
-    if (interSectionPoint) {
-      if (polygon.inPolygon(interSectionPoint) && polygon.wall.inPolygon(interSectionPoint)) {
-        checkPoint1.alreadyIntersected = true
-        checkPoint2.alreadyIntersected = true
-
-        const helpLine1 = new QLine([line.x1, line.y1, interSectionPoint.x, interSectionPoint.y], {
-          fontSize: polygon.fontSize,
-          stroke: 'skyblue',
-        })
-
-        const helpLine2 = new QLine([line.x2, line.y2, interSectionPoint.x, interSectionPoint.y], {
-          fontSize: polygon.fontSize,
-          stroke: 'skyblue',
-        })
-
-        helpLines.push(helpLine1)
-        helpLines.push(helpLine2)
-
-        polygon.canvas.add(helpLine1)
-        polygon.canvas.add(helpLine2)
-
-        ridgeStartPoints.push(interSectionPoint)
-      }
-    }
-
-    polygon.canvas.renderAll()
-  })
-  // points를 순회하면서 이미 그려진 점이 아닌 경우 centerLine과 만나는 점을 찾는다.
   polygon.points.forEach((point, index) => {
-    if (point.alreadyIntersected) {
-      return
-    }
-
     const wallPoint = polygon.wall.points[index]
 
     const angle = Math.atan2(wallPoint.y - point.y, wallPoint.x - point.x)
 
-    const newX2 = Math.floor(point.x + (maxLength / 2 + 50) * Math.cos(angle))
-    const newY2 = Math.floor(point.y + (maxLength / 2 + 50) * Math.sin(angle))
+    const degree = fabric.util.radiansToDegrees(angle)
+
+    const newX2 = Math.floor(point.x + maxLength * Math.cos(angle))
+    const newY2 = Math.floor(point.y + maxLength * Math.sin(angle))
 
     const helpLine = new QLine([point.x, point.y, newX2, newY2], {
       fontSize: polygon.fontSize,
       stroke: 'green',
+      startPoint: point,
+      degree: degree,
+      idx: index,
     })
 
-    const relatedPoints = []
+    // polygon.canvas?.add(helpLine)
 
-    centerLines.forEach((centerLine) => {
-      const interSectionPoint = calculateIntersection2(helpLine, centerLine)
-
-      if (interSectionPoint) {
-        if (polygon.inPolygon(interSectionPoint) && polygon.wall.inPolygon(interSectionPoint)) {
-          relatedPoints.push(interSectionPoint)
-
-          centerInterSectionPoints.push(interSectionPoint)
-        }
-      }
-    })
-
-    helpLine.set({ relatedPoints: relatedPoints })
     helpLines.push(helpLine)
   })
 
-  helpLines = helpLines.filter((line) => line.relatedPoints?.length > 0)
+  helpLines.forEach((line, index) => {
+    for (let i = index + 1; i < helpLines.length; i++) {
+      const nextLine = helpLines[i]
+      if (!line.connectedPoint) {
+        line.connectedPoint = null
+        line.connectedPoints = []
+      }
+      if (!nextLine.connectedPoint) {
+        nextLine.connectedPoint = null
+        nextLine.connectedPoints = []
+      }
 
-  ridgeStartPoints.forEach((point) => {
-    point.alreadyIntersected = false
-    // x 혹은 y가 같으면서 가장 가까운 점을 찾는다.
-    let arrivalPoint
-    let hipLine
-    let distance = Infinity
-    let startPoint
-    helpLines.forEach((line) => {
-      line.relatedPoints.forEach((relatedPoint) => {
-        if (Math.abs(point.x - relatedPoint.x) <= 2 || Math.abs(point.y - relatedPoint.y) <= 2) {
-          if (distanceBetweenPoints(point, relatedPoint) < distance) {
-            startPoint = point
-            distance = distanceBetweenPoints(point, relatedPoint)
-            hipLine = line
-            arrivalPoint = relatedPoint
-          }
+      const interSectionPoint = calculateIntersection(line, nextLine)
+
+      if (
+        interSectionPoint &&
+        polygon.inPolygon(interSectionPoint) &&
+        polygon.wall.inPolygon(interSectionPoint) &&
+        Math.abs(distanceBetweenPoints(line.startPoint, interSectionPoint) - distanceBetweenPoints(nextLine.startPoint, interSectionPoint)) < 2
+      ) {
+        const area = calculateTriangleArea(line.startPoint, nextLine.startPoint, interSectionPoint)
+        const currentLineConnectedPoint = line.connectedPoint
+        const nextLineConnectedPoint = nextLine.connectedPoint
+
+        if (area <= 1) {
+          return
         }
-      })
-    })
 
-    if (arrivalPoint) {
-      hipLine.relatedPoints.forEach((relatedPoint) => {
-        if (relatedPoint.x !== arrivalPoint.x && relatedPoint.y !== arrivalPoint.y) {
-          centerInterSectionPoints.splice(centerInterSectionPoints.indexOf(relatedPoint), 1)
+        if (currentLineConnectedPoint && currentLineConnectedPoint.area < area) {
+          return
         }
-      })
 
-      helpLines.splice(helpLines.indexOf(hipLine), 1)
+        //startPoint는 line의 startPoint와 nextLine의 startPoint를 비교하여 x가 같은경우 y가 더 작은 값, y가 같은경우 x가 더 작은 값을 선택한다.
+        const startPoint =
+          line.startPoint.x === nextLine.startPoint.x
+            ? line.startPoint.y < nextLine.startPoint.y
+              ? line.startPoint
+              : nextLine.startPoint
+            : line.startPoint.x < nextLine.startPoint.x
+              ? line.startPoint
+              : nextLine.startPoint
 
-      const helpLine = new QLine([hipLine.x1, hipLine.y1, arrivalPoint.x, arrivalPoint.y], {
-        fontSize: polygon.fontSize,
-        stroke: 'red',
-      })
-      const ridge = new QLine([startPoint.x, startPoint.y, arrivalPoint.x, arrivalPoint.y], {
-        stroke: 'green',
-        fontSize: polygon.fontSize,
-      })
+        const endPoint =
+          line.startPoint.x === nextLine.startPoint.x
+            ? line.startPoint.y > nextLine.startPoint.y
+              ? line.startPoint
+              : nextLine.startPoint
+            : line.startPoint.x > nextLine.startPoint.x
+              ? line.startPoint
+              : nextLine.startPoint
 
-      polygon.canvas.add(helpLine)
-      polygon.canvas.add(ridge)
-
-      polygon.canvas.renderAll()
-      ridgeEndPoints.push(arrivalPoint)
-
-      point.alreadyIntersected = true
+        line.connectedPoint = { interSectionPoint, area, startPoint, endPoint }
+        line.connectedPoints.push(interSectionPoint)
+        nextLine.connectedPoint = { interSectionPoint, area, startPoint, endPoint }
+        nextLine.connectedPoints.push(interSectionPoint)
+      }
     }
   })
 
-  /**
-   * 안쓰는 점 제거
-   */
-
-  const ridgeEndRemainingPoints = [...ridgeEndPoints]
-
-  const uniqueInterSectionPoints = Array.from(new Set(centerInterSectionPoints.map((point) => `${point.x},${point.y}`))).map((key) => {
-    const [x, y] = key.split(',').map(Number)
-    return { x, y }
+  helpLines.forEach((line) => {
+    if (line.connectedPoint) {
+      tempInterSectionPoints.push(line.connectedPoint)
+    }
   })
 
-  while (ridgeEndRemainingPoints.length > 0) {
-    const point = ridgeEndRemainingPoints.shift()
-    let isExist = false
-    uniqueInterSectionPoints.forEach((uniquePoint) => {
-      const degree = calculateAngle(point, uniquePoint)
+  // interSectionPoints에서 interSectionPoint가 중복인 값이 있는 경우만 선택한다.
+  tempInterSectionPoints.forEach((point) => {
+    // intersectionPoint가 중복인 경우
+    const isDuplicated =
+      tempInterSectionPoints.filter((p) => p.interSectionPoint.x === point.interSectionPoint.x && p.interSectionPoint.y === point.interSectionPoint.y)
+        .length > 1
+    if (isDuplicated) {
+      interSectionPoints.push(point)
+    }
+  })
 
-      if (Math.abs(45 - Math.abs(degree)) <= 5 || Math.abs(135 - Math.abs(degree)) <= 5) {
-        const line = new QLine([point.x, point.y, uniquePoint.x, uniquePoint.y], {
-          stroke: 'purple',
-          fontSize: polygon.fontSize,
-        })
+  // interSectionPoints에서 interSectionPoint 기준으로 중복을 제거한다.
+  const uniqueInterSectionPoints = Array.from(
+    new Set(interSectionPoints.map((point) => `${point.interSectionPoint.x},${point.interSectionPoint.y}`)),
+  ).map((key) => {
+    const { interSectionPoint, area, startPoint, endPoint } = interSectionPoints.find(
+      (point) => `${point.interSectionPoint.x},${point.interSectionPoint.y}` === key,
+    )
+    return { interSectionPoint, area, startPoint, endPoint }
+  })
 
-        ridgeEndPoints.push(uniquePoint)
+  uniqueInterSectionPoints.forEach((point) => {
+    ridgeStartPoints.push(point.interSectionPoint)
 
-        ridgeEndPoints.splice(ridgeEndPoints.indexOf(point), 1)
-
-        isExist = true
-
-        polygon.canvas.add(line)
-        polygon.canvas.renderAll()
-      }
-
-      if (isExist) {
-        return
-      }
-    })
-  }
-
-  const ridgeEndRemainingPoints2 = [...ridgeEndPoints]
-
-  while (ridgeEndRemainingPoints2.length > 0) {
-    // 남아있는 점끼리 연결한다.
-    const point = ridgeEndRemainingPoints2.shift()
-    const closestPoint = findClosestPoint(point, ridgeEndRemainingPoints2)
-    if (!closestPoint) continue
-    const line = new QLine([point.x, point.y, closestPoint.x, closestPoint.y], {
+    const line = new QLine([point.startPoint.x, point.startPoint.y, point.interSectionPoint.x, point.interSectionPoint.y], {
       stroke: 'purple',
       fontSize: polygon.fontSize,
+      name: 'hip',
     })
 
+    const line2 = new QLine([point.endPoint.x, point.endPoint.y, point.interSectionPoint.x, point.interSectionPoint.y], {
+      stroke: 'purple',
+      fontSize: polygon.fontSize,
+      name: 'hip',
+    })
+
+    polygon.hips.push(line)
+    polygon.hips.push(line2)
+
     polygon.canvas.add(line)
-    polygon.canvas.renderAll()
-  }
+    polygon.canvas.add(line2)
+  })
+
+  const removedIdx = []
 
-  // ridgeEndPoints와 가까운 centerInterSectionPoints를 찾아서 연결한다.
-  const remainingPoints = centerInterSectionPoints
-  /*
   helpLines.forEach((line) => {
-    remainingPoints.forEach((point) => {
-      if (line.relatedPoints.includes(point)) {
-        const hip = new QLine([line.x1, line.y1, point.x, point.y], {
-          stroke: 'red',
-          fontSize: polygon.fontSize,
-        })
+    const connectedPoints = line.connectedPoints
+    connectedPoints.forEach((connectedPoint) => {
+      uniqueInterSectionPoints.forEach((point) => {
+        const interSectionPoint = point.interSectionPoint
 
-        polygon.canvas.add(hip)
-        polygon.canvas.renderAll()
+        if (connectedPoint.x === interSectionPoint.x && connectedPoint.y === interSectionPoint.y) {
+          removedIdx.push(line.idx)
+        }
+      })
+    })
+  })
+
+  const notIntersectedLines = helpLines.filter((line) => !removedIdx.includes(line.idx))
+
+  notIntersectedLines.forEach((line) => {
+    centerLines.forEach((centerLine) => {
+      const interSectionPoint = calculateIntersection(line, centerLine)
+
+      if (interSectionPoint && polygon.inPolygon(interSectionPoint) && polygon.wall.inPolygon(interSectionPoint)) {
+        centerInterSectionPoints.push(interSectionPoint)
       }
     })
   })
 
+  // centerInterSectionPoints에서 ridgeStartPoints와 x가 같거나 y가 같은것중 가장 가까운 점들을 찾는다.
+  ridgeStartPoints.forEach((point) => {
+    const xPoints = centerInterSectionPoints.filter((centerPoint) => Math.abs(centerPoint.x - point.x) < 2)
+    const yPoints = centerInterSectionPoints.filter((centerPoint) => Math.abs(centerPoint.y - point.y) < 2)
+    let closestPoint
+    if (xPoints.length === 0) {
+      closestPoint = findClosestPoint(point, yPoints)
+    } else {
+      closestPoint = findClosestPoint(point, xPoints)
+    }
 
+    if (closestPoint) {
+      const line = new QLine([point.x, point.y, closestPoint.x, closestPoint.y], {
+        stroke: 'purple',
+        fontSize: polygon.fontSize,
+        name: 'ridge',
+      })
+      polygon.ridges.push(line)
+      polygon.canvas.add(line)
+      ridgeEndPoints.push(closestPoint)
+    }
+  })
+
+  // ridgeEndPoints끼리 이어준다.
+  const remainingPoints = ridgeEndPoints
+
+  remainingPoints.forEach((ridgePoint) => {
+    polygon.points.forEach((point) => {
+      const degree = calculateAngle(ridgePoint, point)
+
+      if (Math.abs(degree) % 45 < 1) {
+        const line = new QLine([ridgePoint.x, ridgePoint.y, point.x, point.y], {
+          stroke: 'purple',
+          fontSize: polygon.fontSize,
+          name: 'hip',
+        })
+
+        polygon.hips.push(line)
+        polygon.canvas.add(line)
+      }
+    })
+  })
 
-  // centerInterSectionPoints에 남아있는 점들을 가까운 점끼리 연결한다.
   while (remainingPoints.length > 0) {
     const point = remainingPoints.shift()
     const closestPoint = findClosestPoint(point, remainingPoints)
     if (!closestPoint) continue
+    // 마루끼리 연결
     const line = new QLine([point.x, point.y, closestPoint.x, closestPoint.y], {
       stroke: 'purple',
       fontSize: polygon.fontSize,
+      name: 'connectRidge',
     })
+    polygon.connectRidges.push(line)
 
     polygon.canvas.add(line)
-    polygon.canvas.renderAll()
   }
-
-  const notIntersectedRidgeStartPoints = ridgeStartPoints.filter((point) => !point.alreadyIntersected)
-  // 만나지 않은 마루 시작점
-  while (notIntersectedRidgeStartPoints.length > 0) {
-    const point = notIntersectedRidgeStartPoints.shift()
-    const closestPoint = findClosestPoint(point, notIntersectedRidgeStartPoints)
-    if (!closestPoint) continue
-    const line = new QLine([point.x, point.y, closestPoint.x, closestPoint.y], {
-      stroke: 'purple',
-      fontSize: polygon.fontSize,
-    })
-
-    polygon.canvas.add(line)
-    polygon.canvas.renderAll()
-  }*/
 }
 
-export const drawHelpLineInHexagon2 = (polygon, chon) => {}
-
 export const drawCenterLines = (polygon) => {
   const centerLines = []
 
@@ -384,3 +340,38 @@ const calculateAngle = (point1, point2) => {
   const angleInRadians = Math.atan2(deltaY, deltaX)
   return angleInRadians * (180 / Math.PI)
 }
+
+/**
+ * 3개의 점을 이용해 직각 이등변 삼각형인지 확인
+ * @param point1
+ * @param point2
+ * @param point3
+ * @returns {boolean}
+ */
+const isRightIsoscelesTriangle = (point1, point2, point3) => {
+  const distance = (p1, p2) => Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2))
+
+  const d1 = distance(point1, point2)
+  const d2 = distance(point2, point3)
+  const d3 = distance(point3, point1)
+
+  const distances = [d1, d2, d3].sort((a, b) => a - b)
+
+  // Check if the two smaller distances are equal and the largest distance is the hypotenuse
+  return distances[0] === distances[1] && Math.abs(Math.pow(distances[0], 2) * 2 - Math.pow(distances[2], 2)) < 1
+}
+
+/**
+ * 세개의 점으로 삼각형의 넓이를 구한다.
+ * @param point1
+ * @param point2
+ * @param point3
+ * @returns {number}
+ */
+const calculateTriangleArea = (point1, point2, point3) => {
+  const { x: x1, y: y1 } = point1
+  const { x: x2, y: y2 } = point2
+  const { x: x3, y: y3 } = point3
+
+  return Math.abs(x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2
+}

From 4dbebf4cf97eed0bf7a5cf3559ca46bdf3419718 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 31 Jul 2024 10:58:06 +0900
Subject: [PATCH 09/14] =?UTF-8?q?import=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx | 69 +++++++++++++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 473ca435..e384901e 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -5,12 +5,11 @@ import { Button } from '@nextui-org/react'
 import QRect from '@/components/fabric/QRect'
 
 import RangeSlider from './ui/RangeSlider'
-import { useRecoilState } from 'recoil'
-import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { canvasSizeState, fontSizeState, roofState, sortedPolygonArray } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
-import { calculateIntersection2 } from '@/util/canvas-util'
-import { CustomLine } from '@/components/fabric/QLine'
+import { calculateIntersection } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 
 export default function Roof2() {
@@ -32,6 +31,8 @@ export default function Roof2() {
 
   const [showControl, setShowControl] = useState(false)
 
+  const roof = useRecoilValue(roofState)
+
   const {
     mode,
     changeMode,
@@ -228,23 +229,53 @@ export default function Roof2() {
       { x: 1078, y: 92 },
     ]
 
-    if (canvas) {
-      const polygon = new QPolygon(eightPoint, {
-        fill: 'transparent',
-        stroke: 'black',
-        strokeWidth: 1,
-        selectable: true,
-        fontSize: fontSize,
-        name: 'QPolygon1',
-      })
+    const twelvePoint = [
+      { x: 195, y: 166 },
+      { x: 195, y: 466 },
+      { x: 395, y: 466 },
+      { x: 395, y: 766 },
+      { x: 545, y: 766 },
+      { x: 545, y: 466 },
+      { x: 695, y: 466 },
+      { x: 695, y: 666 },
+      { x: 845, y: 666 },
+      { x: 845, y: 466 },
+      { x: 995, y: 466 },
+      { x: 995, y: 166 },
+    ]
 
-      canvas?.add(polygon)
+    const complicatedType = [
+      { x: 100, y: 100 },
+      { x: 100, y: 1100 },
+      { x: 400, y: 1100 },
+      { x: 400, y: 800 },
+      { x: 700, y: 800 },
+      { x: 700, y: 1100 },
+      { x: 1000, y: 1100 },
+      { x: 1000, y: 600 },
+      { x: 700, y: 600 },
+      { x: 700, y: 300 },
+      { x: 1000, y: 300 },
+      { x: 1000, y: 100 },
+    ]
 
-      handleOuterlinesTest2(polygon)
+    const types = [type1, type2, type3, type4, type1A, type1B, eightPoint, eightPoint2, eightPoint3, eightPoint4, twelvePoint]
 
-      // const lines = togglePolygonLine(polygon)
-      // togglePolygonLine(lines[0])
-    }
+    const polygon = new QPolygon(type1B, {
+      fill: 'transparent',
+      stroke: 'black',
+      strokeWidth: 1,
+      selectable: true,
+      fontSize: fontSize,
+      name: 'QPolygon1',
+    })
+
+    canvas?.add(polygon)
+
+    handleOuterlinesTest2(polygon)
+
+    // const lines = togglePolygonLine(polygon)
+    // togglePolygonLine(lines[0])
   }
 
   const rotateShape = () => {
@@ -277,7 +308,7 @@ export default function Roof2() {
       canvas?.add(line)
       canvas?.add(line2)
 
-      const interSectionPoint = calculateIntersection2(line, line2)
+      const interSectionPoint = calculateIntersection(line, line2)
 
       if (interSectionPoint) {
         const circle = new fabric.Circle({

From a4c1b28c8da74688ce787e253ff800ccbd654358 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Wed, 31 Jul 2024 10:59:56 +0900
Subject: [PATCH 10/14] chore: Enable reactStrictMode in next.config.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

strictMode 기능 활성화했고 false로 세팅함
---
 next.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/next.config.mjs b/next.config.mjs
index 107c5460..8cc4c040 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // reactStrictMode: false,
+  reactStrictMode: false,
   webpack: (config) => {
     config.externals.push({
       "utf-8-validate": "commonjs utf-8-validate",

From e3544879f4080420a4ad1cf950227b8b679fc171 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Wed, 31 Jul 2024 14:40:14 +0900
Subject: [PATCH 11/14] chore: Add error page

---
 src/app/404.js | 23 +++++++++++++++++++++++
 src/app/500.js | 13 +++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/app/404.js
 create mode 100644 src/app/500.js

diff --git a/src/app/404.js b/src/app/404.js
new file mode 100644
index 00000000..8aa5e9bc
--- /dev/null
+++ b/src/app/404.js
@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <section className="bg-white dark:bg-gray-900">
+      <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div className="mx-auto max-w-screen-sm text-center">
+          <h1 className="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500">404</h1>
+          <p className="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Something's missing.</p>
+          <p className="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
+            Sorry, we can't find that page. You'll find lots to explore on the home page.{' '}
+          </p>
+          <Link
+            href="/"
+            className="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4"
+          >
+            Back to Homepage
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/app/500.js b/src/app/500.js
new file mode 100644
index 00000000..654b605a
--- /dev/null
+++ b/src/app/500.js
@@ -0,0 +1,13 @@
+export default function ServerError() {
+  return (
+    <section className="bg-white dark:bg-gray-900">
+      <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div className="mx-auto max-w-screen-sm text-center">
+          <h1 className="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500">500</h1>
+          <p className="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Internal Server Error.</p>
+          <p className="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">We are already working to solve the problem. </p>
+        </div>
+      </div>
+    </section>
+  )
+}

From e26c751e73fd893bf1b33b02cf76dd6348a5d5da Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Thu, 1 Aug 2024 11:27:15 +0900
Subject: [PATCH 12/14] chore: make client component for custom error page

---
 src/app/{500.js => error.jsx}     | 2 ++
 src/app/{404.js => not-found.jsx} | 2 ++
 2 files changed, 4 insertions(+)
 rename src/app/{500.js => error.jsx} (97%)
 rename src/app/{404.js => not-found.jsx} (98%)

diff --git a/src/app/500.js b/src/app/error.jsx
similarity index 97%
rename from src/app/500.js
rename to src/app/error.jsx
index 654b605a..07d75e7e 100644
--- a/src/app/500.js
+++ b/src/app/error.jsx
@@ -1,3 +1,5 @@
+'use client'
+
 export default function ServerError() {
   return (
     <section className="bg-white dark:bg-gray-900">
diff --git a/src/app/404.js b/src/app/not-found.jsx
similarity index 98%
rename from src/app/404.js
rename to src/app/not-found.jsx
index 8aa5e9bc..8127943b 100644
--- a/src/app/404.js
+++ b/src/app/not-found.jsx
@@ -1,3 +1,5 @@
+'use client'
+
 import Link from 'next/link'
 
 export default function NotFound() {

From 495b95e9911fa2171e79cc7b74c4448a7a66b48a Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Thu, 1 Aug 2024 11:28:27 +0900
Subject: [PATCH 13/14] =?UTF-8?q?fix:=20canvas=20=EC=B2=B4=ED=81=AC=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useCanvas.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index dee2983b..5d63c758 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -42,18 +42,18 @@ export function useCanvas(id) {
   useEffect(() => {
     canvas
       ?.getObjects()
-      .filter((obj) => obj.type === 'textbox' || obj.type === 'text' || obj.type === 'i-text')
+      ?.filter((obj) => obj.type === 'textbox' || obj.type === 'text' || obj.type === 'i-text')
       .forEach((obj) => {
         obj.set({ fontSize: fontSize })
       })
 
     canvas
       ?.getObjects()
-      .filter((obj) => obj.type === 'QLine' || obj.type === 'QPolygon' || obj.type === 'QRect')
+      ?.filter((obj) => obj.type === 'QLine' || obj.type === 'QPolygon' || obj.type === 'QRect')
       .forEach((obj) => {
         obj.setFontSize(fontSize)
       })
-    canvas?.renderAll()
+    canvas?.getObjects().length > 0 && canvas?.renderAll()
   }, [fontSize])
 
   /**
@@ -103,7 +103,7 @@ export function useCanvas(id) {
   }
 
   const initialize = () => {
-    canvas?.clear()
+    canvas.getObjects().length > 0 && canvas?.clear()
     // settings for all canvas in the app
     fabric.Object.prototype.transparentCorners = false
     fabric.Object.prototype.cornerColor = '#2BEBC8'

From 1f89d3f9d848da53a56a474edb9a9435b21591af Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Thu, 1 Aug 2024 13:23:51 +0900
Subject: [PATCH 14/14] =?UTF-8?q?fix:=20canvas=20size=20=EC=A1=B0=EC=A0=88?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx | 30 +++++++++++++-----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index e384901e..e2b40634 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -108,28 +108,24 @@ export default function Roof2() {
     }
   }
 
-  /**
-   * canvas 사이즈 변경 함수
-   */
-  const canvasSizeMode = () => {
-    if (canvas) {
-      canvas.setWidth(horizontalSize)
-      canvas.setHeight(verticalSize)
-      canvas.renderAll()
-
-      setCanvasSize(() => ({
-        vertical: verticalSize,
-        horizontal: horizontalSize,
-      }))
-    }
-  }
+  useEffect(() => {
+    setCanvasSize({ ...canvasSize, vertical: verticalSize, horizontal: horizontalSize })
+  }, [verticalSize, horizontalSize])
 
   /**
    * 값 변경시
    */
+  // useEffect(() => {
+  //   canvasSizeMode()
+  // }, [verticalSize, horizontalSize])
   useEffect(() => {
-    canvasSizeMode()
-  }, [verticalSize, horizontalSize])
+    const { vertical, horizontal } = canvasSize
+    if (vertical !== verticalSize || horizontal !== horizontalSize) {
+      canvas.setWidth(horizontalSize)
+      canvas.setHeight(verticalSize)
+      canvas.renderAll()
+    }
+  }, [canvasSize, canvas])
 
   const makeQPolygon = () => {
     const type1 = [