diff --git a/src/util/common-utils.js b/src/util/common-utils.js
index 2b3fe37d..57ed1d71 100644
--- a/src/util/common-utils.js
+++ b/src/util/common-utils.js
@@ -94,14 +94,14 @@ export const inputNumberCheck = (e) => {
   }
 }
 
-// 영문, 숫자, 특수문자(ASCII)만 입력 체크
+// 영문, 숫자, 특수문자(_ . # ! & + - @)만 입력 체크
 export const inputUserIdCheck = (e) => {
   const input = e.target
-  const allowedRegex = /^[A-Za-z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?`~]*$/g
+  const allowedRegex = /^[A-Za-z0-9_.#!&+\-@]*$/g
   if (allowedRegex.test(input.value)) {
     input.value = input.value
   } else {
-    input.value = input.value.replace(/[^A-Za-z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?`~]/g, '')
+    input.value = input.value.replace(/[^A-Za-z0-9_.#!&+\-@]/g, '')
   }
 }
 
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 931362f4..4937a0ed 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -608,39 +608,53 @@ export const drawGableRoof = (roofId, canvas, textMode) => {
       }
     }
 
-    const findEdge = { vertex1: { x: midX, y: midY }, vertex2: { x: midX + roofVector.x * offset, y: midY + roofVector.y * offset } }
-    const edgeDx =
-      Big(findEdge.vertex2.x).minus(Big(findEdge.vertex1.x)).abs().toNumber() < 0.1
-        ? 0
-        : Big(findEdge.vertex2.x).minus(Big(findEdge.vertex1.x)).toNumber()
-    const edgeDy =
-      Big(findEdge.vertex2.y).minus(Big(findEdge.vertex1.y)).abs().toNumber() < 0.1
-        ? 0
-        : Big(findEdge.vertex2.y).minus(Big(findEdge.vertex1.y)).toNumber()
-    const edgeLength = Math.sqrt(edgeDx * edgeDx + edgeDy * edgeDy)
-    const edgeVector = { x: edgeDx / edgeLength, y: edgeDy / edgeLength }
-
-    const intersectRoofLines = []
-    checkRoofLines.forEach((roofLine) => {
-      const lineEdge = { vertex1: { x: roofLine.x1, y: roofLine.y1 }, vertex2: { x: roofLine.x2, y: roofLine.y2 } }
-      const intersect = edgesIntersection(lineEdge, findEdge)
-      if (intersect) {
-        const intersectDx =
-          Big(intersect.x).minus(Big(findEdge.vertex1.x)).abs().toNumber() < 0.1 ? 0 : Big(intersect.x).minus(Big(findEdge.vertex1.x)).toNumber()
-        const intersectDy =
-          Big(intersect.y).minus(Big(findEdge.vertex1.y)).abs().toNumber() < 0.1 ? 0 : Big(intersect.y).minus(Big(findEdge.vertex1.y)).toNumber()
-        const intersectLength = Math.sqrt(intersectDx * intersectDx + intersectDy * intersectDy)
-        const intersectVector = { x: intersectDx / intersectLength, y: intersectDy / intersectLength }
-        if (edgeVector.x === intersectVector.x && edgeVector.y === intersectVector.y) {
-          intersectRoofLines.push({ roofLine, intersect, length: intersectLength })
+    let currentRoof
+    if (line.attributes.offset === 0) {
+      checkRoofLines.forEach((roofLine) => {
+        const isVerticalSame = line.y1 === roofLine.y1 && line.y2 === roofLine.y2
+        const isHorizontalSame = line.x1 === roofLine.x1 && line.x2 === roofLine.x2
+        if (
+          (isVerticalSame || isHorizontalSame) &&
+          (isPointOnLineNew(roofLine, { x: line.x1, y: line.y1 }) || isPointOnLineNew(roofLine, { x: line.x2, y: line.y2 }))
+        ) {
+          currentRoof = { roofLine }
         }
-      }
-    })
+      })
+    } else {
+      const findEdge = { vertex1: { x: midX, y: midY }, vertex2: { x: midX + roofVector.x * offset, y: midY + roofVector.y * offset } }
+      const edgeDx =
+        Big(findEdge.vertex2.x).minus(Big(findEdge.vertex1.x)).abs().toNumber() < 0.1
+          ? 0
+          : Big(findEdge.vertex2.x).minus(Big(findEdge.vertex1.x)).toNumber()
+      const edgeDy =
+        Big(findEdge.vertex2.y).minus(Big(findEdge.vertex1.y)).abs().toNumber() < 0.1
+          ? 0
+          : Big(findEdge.vertex2.y).minus(Big(findEdge.vertex1.y)).toNumber()
+      const edgeLength = Math.sqrt(edgeDx * edgeDx + edgeDy * edgeDy)
+      const edgeVector = { x: edgeDx / edgeLength, y: edgeDy / edgeLength }
 
-    intersectRoofLines.sort((a, b) => a.length - b.length)
-    let currentRoof = intersectRoofLines.find((roof) => isPointOnLineNew(roof.roofLine, roof.intersect) && roof.length - offset < 0.1)
-    if (!currentRoof) {
-      currentRoof = intersectRoofLines[0]
+      const intersectRoofLines = []
+      checkRoofLines.forEach((roofLine) => {
+        const lineEdge = { vertex1: { x: roofLine.x1, y: roofLine.y1 }, vertex2: { x: roofLine.x2, y: roofLine.y2 } }
+        const intersect = edgesIntersection(lineEdge, findEdge)
+        if (intersect) {
+          const intersectDx =
+            Big(intersect.x).minus(Big(findEdge.vertex1.x)).abs().toNumber() < 0.1 ? 0 : Big(intersect.x).minus(Big(findEdge.vertex1.x)).toNumber()
+          const intersectDy =
+            Big(intersect.y).minus(Big(findEdge.vertex1.y)).abs().toNumber() < 0.1 ? 0 : Big(intersect.y).minus(Big(findEdge.vertex1.y)).toNumber()
+          const intersectLength = Math.sqrt(intersectDx * intersectDx + intersectDy * intersectDy)
+          const intersectVector = { x: intersectDx / intersectLength, y: intersectDy / intersectLength }
+          if (edgeVector.x === intersectVector.x && edgeVector.y === intersectVector.y) {
+            intersectRoofLines.push({ roofLine, intersect, length: intersectLength })
+          }
+        }
+      })
+
+      intersectRoofLines.sort((a, b) => a.length - b.length)
+      currentRoof = intersectRoofLines.find((roof) => isPointOnLineNew(roof.roofLine, roof.intersect) && roof.length - offset < 0.1)
+      if (!currentRoof) {
+        currentRoof = intersectRoofLines[0]
+      }
     }
 
     let startPoint, endPoint
@@ -924,11 +938,16 @@ export const drawGableRoof = (roofId, canvas, textMode) => {
     const y2 = analyze.endPoint.y
 
     const lineVector = { x: 0, y: 0 }
-    if (analyze.isHorizontal) {
-      lineVector.x = Math.sign(analyze.roofLine.y1 - currentLine.attributes.originPoint.y1)
-    }
-    if (analyze.isVertical) {
-      lineVector.y = Math.sign(analyze.roofLine.x1 - currentLine.attributes.originPoint.x1)
+    if (currentLine.attributes.offset === 0) {
+      lineVector.x = analyze.roofVector.y
+      lineVector.y = analyze.roofVector.x
+    } else {
+      if (analyze.isHorizontal) {
+        lineVector.x = Math.sign(analyze.roofLine.y1 - currentLine.attributes.originPoint.y1)
+      }
+      if (analyze.isVertical) {
+        lineVector.y = Math.sign(analyze.roofLine.x1 - currentLine.attributes.originPoint.x1)
+      }
     }
 
     const overlapLines = []
@@ -1904,40 +1923,53 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
         roofVector = { x: 1, y: 0 }
       }
     }
-
-    const findEdge = { vertex1: { x: midX, y: midY }, vertex2: { x: midX + roofVector.x * offset, y: midY + roofVector.y * offset } }
-    const edgeDx =
-      Big(findEdge.vertex2.x).minus(Big(findEdge.vertex1.x)).abs().toNumber() < 0.1
-        ? 0
-        : Big(findEdge.vertex2.x).minus(Big(findEdge.vertex1.x)).toNumber()
-    const edgeDy =
-      Big(findEdge.vertex2.y).minus(Big(findEdge.vertex1.y)).abs().toNumber() < 0.1
-        ? 0
-        : Big(findEdge.vertex2.y).minus(Big(findEdge.vertex1.y)).toNumber()
-    const edgeLength = Math.sqrt(edgeDx * edgeDx + edgeDy * edgeDy)
-    const edgeVector = { x: edgeDx / edgeLength, y: edgeDy / edgeLength }
-
-    const intersectRoofLines = []
-    checkRoofLines.forEach((roofLine) => {
-      const lineEdge = { vertex1: { x: roofLine.x1, y: roofLine.y1 }, vertex2: { x: roofLine.x2, y: roofLine.y2 } }
-      const intersect = edgesIntersection(lineEdge, findEdge)
-      if (intersect) {
-        const intersectDx =
-          Big(intersect.x).minus(Big(findEdge.vertex1.x)).abs().toNumber() < 0.1 ? 0 : Big(intersect.x).minus(Big(findEdge.vertex1.x)).toNumber()
-        const intersectDy =
-          Big(intersect.y).minus(Big(findEdge.vertex1.y)).abs().toNumber() < 0.1 ? 0 : Big(intersect.y).minus(Big(findEdge.vertex1.y)).toNumber()
-        const intersectLength = Math.sqrt(intersectDx * intersectDx + intersectDy * intersectDy)
-        const intersectVector = { x: intersectDx / intersectLength, y: intersectDy / intersectLength }
-        if (edgeVector.x === intersectVector.x && edgeVector.y === intersectVector.y) {
-          intersectRoofLines.push({ roofLine, intersect, length: intersectLength })
+    let currentRoof
+    if (line.attributes.offset === 0) {
+      checkRoofLines.forEach((roofLine) => {
+        const isVerticalSame = line.y1 === roofLine.y1 && line.y2 === roofLine.y2
+        const isHorizontalSame = line.x1 === roofLine.x1 && line.x2 === roofLine.x2
+        if (
+          (isVerticalSame || isHorizontalSame) &&
+          (isPointOnLineNew(roofLine, { x: line.x1, y: line.y1 }) || isPointOnLineNew(roofLine, { x: line.x2, y: line.y2 }))
+        ) {
+          currentRoof = { roofLine }
         }
-      }
-    })
+      })
+    } else {
+      const findEdge = { vertex1: { x: midX, y: midY }, vertex2: { x: midX + roofVector.x * offset, y: midY + roofVector.y * offset } }
+      const edgeDx =
+        Big(findEdge.vertex2.x).minus(Big(findEdge.vertex1.x)).abs().toNumber() < 0.1
+          ? 0
+          : Big(findEdge.vertex2.x).minus(Big(findEdge.vertex1.x)).toNumber()
+      const edgeDy =
+        Big(findEdge.vertex2.y).minus(Big(findEdge.vertex1.y)).abs().toNumber() < 0.1
+          ? 0
+          : Big(findEdge.vertex2.y).minus(Big(findEdge.vertex1.y)).toNumber()
+      const edgeLength = Math.sqrt(edgeDx * edgeDx + edgeDy * edgeDy)
+      const edgeVector = { x: edgeDx / edgeLength, y: edgeDy / edgeLength }
 
-    intersectRoofLines.sort((a, b) => a.length - b.length)
-    let currentRoof = intersectRoofLines.find((roof) => isPointOnLineNew(roof.roofLine, roof.intersect) && roof.length - offset < 0.1)
-    if (!currentRoof) {
-      currentRoof = intersectRoofLines[0]
+      const intersectRoofLines = []
+      checkRoofLines.forEach((roofLine) => {
+        const lineEdge = { vertex1: { x: roofLine.x1, y: roofLine.y1 }, vertex2: { x: roofLine.x2, y: roofLine.y2 } }
+        const intersect = edgesIntersection(lineEdge, findEdge)
+        if (intersect) {
+          const intersectDx =
+            Big(intersect.x).minus(Big(findEdge.vertex1.x)).abs().toNumber() < 0.1 ? 0 : Big(intersect.x).minus(Big(findEdge.vertex1.x)).toNumber()
+          const intersectDy =
+            Big(intersect.y).minus(Big(findEdge.vertex1.y)).abs().toNumber() < 0.1 ? 0 : Big(intersect.y).minus(Big(findEdge.vertex1.y)).toNumber()
+          const intersectLength = Math.sqrt(intersectDx * intersectDx + intersectDy * intersectDy)
+          const intersectVector = { x: intersectDx / intersectLength, y: intersectDy / intersectLength }
+          if (edgeVector.x === intersectVector.x && edgeVector.y === intersectVector.y) {
+            intersectRoofLines.push({ roofLine, intersect, length: intersectLength })
+          }
+        }
+      })
+
+      intersectRoofLines.sort((a, b) => a.length - b.length)
+      currentRoof = intersectRoofLines.find((roof) => isPointOnLineNew(roof.roofLine, roof.intersect) && roof.length - offset < 0.1)
+      if (!currentRoof) {
+        currentRoof = intersectRoofLines[0]
+      }
     }
 
     let startPoint, endPoint
@@ -3289,6 +3321,8 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
         prevLine = baseLines[(index - 1 + baseLines.length) % baseLines.length]
       }
     })
+    const prevIndex = baseLines.findIndex((line) => line === prevLine)
+    const nextIndex = baseLines.findIndex((line) => line === nextLine)
 
     //양옆이 처마가 아닐때 패스
     if (prevLine.attributes.type !== LINE_TYPE.WALLLINE.EAVES || nextLine.attributes.type !== LINE_TYPE.WALLLINE.EAVES) {
@@ -3377,14 +3411,24 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
         ridgePoint[2] += ridgeVector.x * offset
         ridgePoint[3] += ridgeVector.y * offset
 
-        linesAnalysis.push({
-          start: { x: ridgePoint[0], y: ridgePoint[1] },
-          end: { x: ridgePoint[2], y: ridgePoint[3] },
-          left: baseLines.findIndex((line) => line === prevLine),
-          right: baseLines.findIndex((line) => line === nextLine),
-          type: TYPES.RIDGE,
-          degree: 0,
-        })
+        const alreadyRidge = linesAnalysis.find(
+          (line) =>
+            line.type === TYPES.RIDGE &&
+            line.start.x === ridgePoint[0] &&
+            line.start.y === ridgePoint[1] &&
+            line.end.x === ridgePoint[2] &&
+            line.end.y === ridgePoint[3],
+        )
+        if (!alreadyRidge) {
+          linesAnalysis.push({
+            start: { x: ridgePoint[0], y: ridgePoint[1] },
+            end: { x: ridgePoint[2], y: ridgePoint[3] },
+            left: prevIndex,
+            right: nextIndex,
+            type: TYPES.RIDGE,
+            degree: 0,
+          })
+        }
       } else {
         if (beforePrevLine.attributes.type === LINE_TYPE.WALLLINE.GABLE) {
           const beforeVector = {
@@ -3983,14 +4027,24 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
                   endPoint = { x: point[0], y: point[1] }
                 }
               }
-              linesAnalysis.push({
-                start: startPoint,
-                end: endPoint,
-                left: baseLines.findIndex((line) => line === r.left),
-                right: baseLines.findIndex((line) => line === r.right),
-                type: TYPES.RIDGE,
-                degree: 0,
-              })
+              const alreadyRidge = linesAnalysis.find(
+                (line) =>
+                  line.type === TYPES.RIDGE &&
+                  line.start.x === startPoint.x &&
+                  line.start.y === startPoint.y &&
+                  line.end.x === endPoint.x &&
+                  line.end.y === endPoint.y,
+              )
+              if (!alreadyRidge) {
+                linesAnalysis.push({
+                  start: startPoint,
+                  end: endPoint,
+                  left: prevIndex,
+                  right: nextIndex,
+                  type: TYPES.RIDGE,
+                  degree: 0,
+                })
+              }
             }
           })
         }
@@ -4036,8 +4090,8 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
         linesAnalysis.push({
           start: startPoint,
           end: { x: correctPoint.x, y: correctPoint.y },
-          left: baseLines.findIndex((line) => line === prevLine),
-          right: baseLines.findIndex((line) => line === nextLine),
+          left: prevIndex,
+          right: nextIndex,
           type: TYPES.GABLE_LINE,
           degree: getDegreeByChon(prevLine.attributes.pitch),
           gableId: baseLines.findIndex((line) => line === currentLine),
@@ -4464,14 +4518,13 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
           if (isOpposite) {
             const points = [currentLine.start.x, currentLine.start.y, partnerLine.start.x, partnerLine.start.y]
             const length = Math.sqrt((points[0] - points[2]) ** 2 + (points[1] - points[3]) ** 2)
-
-            if (length > 0) {
+            const isDiagonal = Math.abs(points[0] - points[2]) >= 1 && Math.abs(points[1] - points[3]) >= 1
+            if (length > EPSILON) {
               if (currentLine.type === TYPES.HIP) {
                 innerLines.push(drawHipLine(points, canvas, roof, textMode, currentDegree, currentDegree))
-              } else if (currentLine.type === TYPES.RIDGE) {
+              } else if (currentLine.type === TYPES.RIDGE && !isDiagonal) {
                 innerLines.push(drawRidgeLine(points, canvas, roof, textMode))
               } else if (currentLine.type === TYPES.NEW) {
-                const isDiagonal = Math.abs(points[0] - points[2]) >= 1 && Math.abs(points[1] - points[3]) >= 1
                 if (isDiagonal && almostEqual(Math.abs(points[0] - points[2]), Math.abs(points[1] - points[3]))) {
                   innerLines.push(drawHipLine(points, canvas, roof, textMode, currentDegree, currentDegree))
                 }
@@ -4496,11 +4549,12 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
               const length = Math.sqrt((points[0].x - points[1].x) ** 2 + (points[0].y - points[1].y) ** 2)
               if (length < EPSILON) return
               const isDiagonal = Math.abs(points[0].x - points[1].x) >= 1 && Math.abs(points[0].y - points[1].y) >= 1
-              if (isDiagonal) {
+              if (isDiagonal && almostEqual(Math.abs(points[0] - points[2]), Math.abs(points[1] - points[3]))) {
                 innerLines.push(
                   drawHipLine([points[0].x, points[0].y, points[1].x, points[1].y], canvas, roof, textMode, currentDegree, currentDegree),
                 )
-              } else {
+              }
+              if (!isDiagonal) {
                 innerLines.push(drawRidgeLine([points[0].x, points[0].y, points[1].x, points[1].y], canvas, roof, textMode))
               }
               proceedAnalysis.push(currentLine, partnerLine)
@@ -4545,7 +4599,6 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
         }
       })
   }
-
   //케라바에서 파생된 하단 지붕 라인처리
   const downRoofGable = []
   //처마에서 파생된 하단 지붕 라인 처리