src/components/fabric/QPolygon.js

@@ -244,21 +244,10 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     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)))
-    ) {
-      drawGabledRoof(this.id, this.canvas, textMode)
-    } else*/
     if (hasShed) {
       const sheds = this.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.SHED)
       const areLinesParallel = function (line1, line2) {

src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx

@@ -18,7 +18,7 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
                 <input type="radio" name="radio01" id="ra01" value="1" checked={type === '1'} onChange={(e) => onChange(e)} />
-                <label htmlFor="ra01">{getMessage('has.sleeve')}</label>
+                <label htmlFor="ra01">{getMessage('has.not.sleeve')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">
@@ -31,7 +31,7 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
                 <input type="radio" name="radio01" id="ra02" value="2" checked={type === '2'} onChange={(e) => onChange(e)} />
-                <label htmlFor="ra02">{getMessage('has.not.sleeve')}</label>
+                <label htmlFor="ra02">{getMessage('has.sleeve')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">

src/hooks/roofcover/useEavesGableEdit.js

@@ -61,8 +61,7 @@ export function useEavesGableEdit(id) {
     const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     wallLines.forEach((wallLine) => {
-      const id = wallLine.id
+      wallLine.lines = outerLines.filter((line) => line.attributes?.wallId === wallLine.id).sort((a, b) => a.idx - b.idx)
-      wallLine.lines = outerLines.filter((line) => line.attributes?.wallId === id)
     })
     wallLines.forEach((wallLine) => {
       convertPolygonToLines(wallLine)
@@ -77,6 +76,38 @@ export function useEavesGableEdit(id) {
         convertLinesToPolygon(wallLine)
       })
       initEvent()
+
+      const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+
+      outerLines.forEach((line) => {
+        let stroke, strokeWidth
+        if (line.attributes) {
+          if (line.attributes.type === LINE_TYPE.WALLLINE.EAVES || line.attributes.type === LINE_TYPE.WALLLINE.HIPANDGABLE) {
+            stroke = '#45CD7D'
+            strokeWidth = 4
+          } else if (line.attributes.type === LINE_TYPE.WALLLINE.GABLE || line.attributes.type === LINE_TYPE.WALLLINE.JERKINHEAD) {
+            stroke = '#3FBAE6'
+            strokeWidth = 4
+          } else {
+            stroke = '#000000'
+            strokeWidth = 4
+          }
+
+          line.set({
+            visible: true,
+            stroke,
+            strokeWidth,
+            selectable: false,
+          })
+
+          line.bringToFront()
+        }
+      })
+      const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+      roofs.forEach((roof) => {
+        roof.innerLines.forEach((line) => line.set({ selectable: true }))
+      })
+      canvas.renderAll()
     }
   }, [])
 
@@ -106,6 +137,7 @@ export function useEavesGableEdit(id) {
   }
 
   const mouseDownEvent = (e) => {
+    canvas.discardActiveObject()
     if (!e.target || (e.target && e.target.name !== 'outerLine')) {
       return
     }

src/hooks/useCanvas.js

@@ -3,18 +3,16 @@ import { fabric } from 'fabric'
 
 import { actionHandler, anchorWrapper, polygonPositionHandler } from '@/util/canvas-util'
 
-import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { canvasSizeState, canvasState, canvasZoomState, fontSizeState } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { defineQLine } from '@/util/qline-utils'
-import { defineQPloygon } from '@/util/qpolygon-utils'
+import { defineQPolygon } from '@/util/qpolygon-utils'
 import { writeImage } from '@/lib/canvas'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
-import { useAxios } from '@/hooks/useAxios'
 import { useFont } from '@/hooks/common/useFont'
-import { OBJECT_PROTOTYPE, POLYGON_TYPE, RELOAD_TYPE_PROTOTYPE, SAVE_KEY } from '@/common/common'
+import { OBJECT_PROTOTYPE, SAVE_KEY } from '@/common/common'
-import { usePlan } from './usePlan'
 import { imageDisplaySelector } from '@/store/settingAtom'
 
 export function useCanvas(id) {
@@ -140,7 +138,7 @@ export function useCanvas(id) {
     QPolygon.prototype.canvas = canvas
     QLine.prototype.canvas = canvas
     defineQLine()
-    defineQPloygon()
+    defineQPolygon()
   }
 
   /**
@@ -376,6 +374,8 @@ export function useCanvas(id) {
   /**
    * 이미지로 저장하는 함수
    * @param {string} title - 저장할 이미지 이름
+   * @param userId
+   * @param setThumbnails
    */
   const saveImage = async (title = 'canvas', userId, setThumbnails) => {
     removeMouseLines()