diff --git a/src/app/[locale]/layout.js b/src/app/[locale]/layout.js
index c7966ab6..71410d17 100644
--- a/src/app/[locale]/layout.js
+++ b/src/app/[locale]/layout.js
@@ -2,15 +2,19 @@
 
 import { useCurrentLocale } from '@/locales/client'
 import { LocaleProvider } from './LocaleProvider'
+import ServerError from './error'
+import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
 
 export default function LocaleLayout({ children }) {
   const locale = useCurrentLocale()
 
   return (
     <>
-      <LocaleProvider locale={locale} fallback={''}>
-        {children}
-      </LocaleProvider>
+      <ErrorBoundary fallback={<ServerError />}>
+        <LocaleProvider locale={locale} fallback={<ServerError />}>
+          {children}
+        </LocaleProvider>
+      </ErrorBoundary>
     </>
   )
 }
diff --git a/src/common/common.js b/src/common/common.js
new file mode 100644
index 00000000..ae00ec78
--- /dev/null
+++ b/src/common/common.js
@@ -0,0 +1,20 @@
+export const Mode = {
+  DRAW_LINE: 'drawLine', // 기준선 긋기모드`
+  EDIT: 'edit',
+  TEMPLATE: 'template',
+  PATTERNA: 'patterna',
+  PATTERNB: 'patternb',
+  TEXTBOX: 'textbox',
+  DRAW_RECT: 'drawRect',
+  ROOF_PATTERN: 'roofPattern', //지붕패턴 모드
+  ROOF_TRESTLE: 'roofTrestle', //지붕가대 모드
+  FILL_CELLS: 'fillCells', //태양광셀 모드
+  CELL_POWERCON: 'cellPowercon', //파워콘
+  DRAW_HELP_LINE: 'drawHelpLine', // 보조선 그리기 모드 지붕 존재해야함
+  DEFAULT: 'default',
+}
+
+export const LineType = {
+  EAVES: 'eaves', // 처마
+  RIDGE: 'ridge', // 용마루....
+}
diff --git a/src/components/auth/Login.jsx b/src/components/auth/Login.jsx
index ce2055c3..72363367 100644
--- a/src/components/auth/Login.jsx
+++ b/src/components/auth/Login.jsx
@@ -12,7 +12,7 @@ export default function Login() {
         </div>
 
         <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-          <form action={login} method="POST" className="space-y-6">
+          <form action={login} method="POST" encType="application/json" className="space-y-6">
             <div>
               <label htmlFor="userId" className="block text-sm font-medium leading-6 text-gray-900">
                 User ID
diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js
index 0d05a959..9604ec7c 100644
--- a/src/components/fabric/QLine.js
+++ b/src/components/fabric/QLine.js
@@ -1,6 +1,6 @@
 import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
-import { getDirection } from '@/util/canvas-util'
+import { getDirection, getDirectionByPoint } from '@/util/canvas-util'
 
 export const QLine = fabric.util.createClass(fabric.Line, {
   type: 'QLine',
@@ -28,7 +28,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
 
     this.setLength()
 
-    this.direction = options.direction ?? getDirection({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
+    this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
     this.startPoint = { x: this.x1, y: this.y1 }
     this.endPoint = { x: this.x2, y: this.y2 }
 
@@ -91,13 +91,37 @@ export const QLine = fabric.util.createClass(fabric.Line, {
       this.text = thisText
       return
     }
+    let left, top
+    if (this.direction === 'left' || this.direction === 'right') {
+      left = (x1 + x2) / 2
+      top = (y1 + y2) / 2 + 10
+    } else if (this.direction === 'top' || this.direction === 'bottom') {
+      left = (x1 + x2) / 2 + 10
+      top = (y1 + y2) / 2
+    }
+
+    const minX = this.left
+    const maxX = this.left + this.width
+    const minY = this.top
+    const maxY = this.top + this.length
+    const degree = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI
 
     const text = new fabric.Textbox(this.length.toFixed(0).toString(), {
-      left: (x1 + x2) / 2,
-      top: (y1 + y2) / 2,
+      left: left,
+      top: top,
       fontSize: this.fontSize,
-      selectable: false,
+      minX,
+      maxX,
+      minY,
+      maxY,
+      parentDirection: this.direction,
+      parentDegree: degree,
       parentId: this.id,
+      editable: false,
+      selectable: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
       name: 'lengthText',
     })
 
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 1cd24f15..28a7d84a 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -129,6 +129,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       })
       this.texts = null
     })
+
+    // polygon.fillCell({ width: 50, height: 30, padding: 10 })
   },
 
   initLines() {
@@ -156,34 +158,41 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   },
 
   addLengthText() {
+    if (this.texts.length > 0) {
+      this.texts.forEach((text) => {
+        this.canvas.remove(text)
+      })
+    }
     let points = this.getCurrentPoints()
 
     points.forEach((start, i) => {
-      const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id && obj.idx === 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)
 
-      if (thisText) {
-        thisText.set({
-          left: (start.x + points[(i + 1) % points.length].x) / 2,
-          top: (start.y + points[(i + 1) % points.length].y) / 2,
-          text: length.toFixed(0),
-        })
-        return
-      }
-
       const midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
 
+      const degree = (Math.atan2(dy, dx) * 180) / Math.PI
+
       // 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,
         parentId: this.id,
+        minX: Math.min(start.x, end.x),
+        maxX: Math.max(start.x, end.x),
+        minY: Math.min(start.y, end.y),
+        maxY: Math.max(start.y, end.y),
+        parentDirection: getDirectionByPoint(start, end),
+        parentDegree: degree,
+        dirty: true,
+        editable: false,
+        selectable: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
         idx: i,
         name: 'lengthText',
       })
diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index 293c185d..cde867b1 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { fabric } from 'fabric'
-import { actionHandler, anchorWrapper, calculateIntersection, distanceBetweenPoints, polygonPositionHandler, test } from '@/util/canvas-util'
+
+import { actionHandler, anchorWrapper, polygonPositionHandler } from '@/util/canvas-util'
 
 import { useRecoilState } from 'recoil'
 import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
@@ -9,6 +10,7 @@ import { QPolygon } from '@/components/fabric/QPolygon'
 import { defineQLine } from '@/util/qline-utils'
 import { defineQPloygon } from '@/util/qpolygon-utils'
 import { writeImage } from '@/lib/canvas'
+import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useState()
@@ -16,7 +18,7 @@ export function useCanvas(id) {
   const [history, setHistory] = useState([])
   const [canvasSize] = useRecoilState(canvasSizeState)
   const [fontSize] = useRecoilState(fontSizeState)
-  const points = useRef([])
+  const { setCanvasForEvent, attachDefaultEventOnCanvas } = useCanvasEvent()
 
   /**
    * 처음 셋팅
@@ -30,6 +32,8 @@ export function useCanvas(id) {
     })
 
     setCanvas(c)
+    setCanvasForEvent(c)
+
     return () => {
       c.dispose()
     }
@@ -37,8 +41,7 @@ export function useCanvas(id) {
 
   useEffect(() => {
     // canvas 사이즈가 변경되면 다시
-    removeEventOnCanvas()
-    addEventOnCanvas()
+    attachDefaultEventOnCanvas()
   }, [canvasSize])
 
   useEffect(() => {
@@ -64,68 +67,10 @@ export function useCanvas(id) {
   useEffect(() => {
     if (canvas) {
       initialize()
-      removeEventOnCanvas()
-      addEventOnCanvas()
+      attachDefaultEventOnCanvas()
     }
   }, [canvas])
 
-  const addEventOnCanvas = () => {
-    canvas?.on('object:added', onChange)
-    canvas?.on('object:modified', onChange)
-    canvas?.on('object:removed', onChange)
-    canvas?.on('object:added', () => {
-      document.addEventListener('keydown', handleKeyDown)
-    })
-
-    canvas?.on('mouse:move', drawMouseLines)
-    canvas?.on('mouse:down', handleMouseDown)
-    canvas?.on('mouse:out', removeMouseLines)
-  }
-
-  const removeEventOnCanvas = () => {
-    canvas?.off('object:added')
-    canvas?.off('object:modified')
-    canvas?.off('object:removed')
-    canvas?.off('object:added')
-    canvas?.off('mouse:move')
-    canvas?.off('mouse:down')
-  }
-
-  const addEventOnObject = (e) => {
-    const target = e.target
-    if (target.name === 'cell') {
-      target.on('mousedown', () => {
-        if (target.get('selected')) {
-          target.set({ selected: false })
-          target.set({ fill: '#BFFD9F' })
-        } else {
-          target.set({ selected: true })
-          target.set({ fill: 'red' })
-        }
-        canvas?.renderAll()
-      })
-    }
-
-    if (target.name === 'trestle') {
-      target.on('mousedown', () => {
-        if (target.defense === 'north') {
-          alert('북쪽은 선택 불가합니다.')
-          return
-        }
-        if (target.get('selected')) {
-          target.set({ strokeWidth: 1 })
-          target.set({ strokeDashArray: [5, 5] })
-          target.set({ selected: false })
-        } else {
-          target.set({ strokeWidth: 5 })
-          target.set({ strokeDashArray: [0, 0] })
-          target.set({ selected: true })
-        }
-        canvas?.renderAll()
-      })
-    }
-  }
-
   /**
    * 마우스 포인터의 가이드라인을 제거합니다.
    */
@@ -174,71 +119,6 @@ export function useCanvas(id) {
     setIsLocked(false)
   }
 
-  const drawMouseLines = (e) => {
-    // 현재 마우스 포인터의 위치를 가져옵니다.
-    const pointer = canvas?.getPointer(e.e)
-
-    // 기존에 그려진 가이드라인을 제거합니다.
-    removeMouseLines()
-
-    if (canvas?.getActiveObject()) {
-      return
-    }
-
-    // 가로선을 그립니다.
-    const horizontalLine = new fabric.Line([0, pointer.y, canvasSize.horizontal, pointer.y], {
-      stroke: 'black',
-      strokeWidth: 1,
-      selectable: false,
-      name: 'mouseLine',
-    })
-
-    // 세로선을 그립니다.
-    const verticalLine = new fabric.Line([pointer.x, 0, pointer.x, canvasSize.vertical], {
-      stroke: 'black',
-      strokeWidth: 1,
-      selectable: false,
-      name: 'mouseLine',
-    })
-
-    // 선들을 캔버스에 추가합니다.
-    canvas?.add(horizontalLine, verticalLine)
-
-    // 캔버스를 다시 그립니다.
-    canvas?.renderAll()
-  }
-
-  const handleMouseDown = (e) => {
-    // 현재 마우스 포인터의 위치를 가져옵니다.
-    if (canvas?.getActiveObject()) {
-      points.current = []
-      return
-    }
-    const pointer = canvas?.getPointer(e.e)
-
-    // 클릭한 위치를 배열에 추가합니다.
-    points.current.push(pointer)
-
-    // 두 점을 모두 찍었을 때 사각형을 그립니다.
-    if (points.current.length === 2) {
-      const rect = new fabric.Rect({
-        left: points.current[0].x,
-        top: points.current[0].y,
-        width: points.current[1].x - points.current[0].x,
-        height: points.current[1].y - points.current[0].y,
-        fill: 'transparent',
-        stroke: 'black',
-        strokeWidth: 1,
-      })
-
-      // 사각형을 캔버스에 추가합니다.
-      canvas?.add(rect)
-
-      // 배열을 초기화합니다.
-      points.current = []
-    }
-  }
-
   /**
    * 눈금 모양에 맞게 움직이도록 한다.
    */
@@ -413,50 +293,6 @@ export function useCanvas(id) {
     canvas?.renderAll()
   }
 
-  /**
-   * 각종 키보드 이벤트
-   * https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
-   */
-  const handleKeyDown = (e) => {
-    const key = e.key
-
-    switch (key) {
-      case 'Delete':
-      case 'Backspace':
-        handleDelete()
-        break
-      case 'Down': // IE/Edge에서 사용되는 값
-      case 'ArrowDown':
-        // "아래 화살표" 키가 눌렸을 때의 동작입니다.
-        moveDown()
-        break
-      case 'Up': // IE/Edge에서 사용되는 값
-      case 'ArrowUp':
-        // "위 화살표" 키가 눌렸을 때의 동작입니다.
-        moveUp()
-        break
-      case 'Left': // IE/Edge에서 사용되는 값
-      case 'ArrowLeft':
-        // "왼쪽 화살표" 키가 눌렸을 때의 동작입니다.
-        moveLeft()
-        break
-      case 'Right': // IE/Edge에서 사용되는 값
-      case 'ArrowRight':
-        // "오른쪽 화살표" 키가 눌렸을 때의 동작입니다.
-        moveRight()
-        break
-      case 'Enter':
-        // "enter" 또는 "return" 키가 눌렸을 때의 동작입니다.
-        break
-      case 'Esc': // IE/Edge에서 사용되는 값
-      case 'Escape':
-        break
-      default:
-        return // 키 이벤트를 처리하지 않는다면 종료합니다.
-    }
-    e.preventDefault()
-  }
-
   const handleRotate = (degree = 45) => {
     const target = canvas?.getActiveObject()
 
@@ -590,6 +426,10 @@ export function useCanvas(id) {
       'lockScalingY',
       'opacity',
       'cells',
+      'maxX',
+      'maxY',
+      'minX',
+      'minY',
     ])
 
     const str = JSON.stringify(objs)
diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js
new file mode 100644
index 00000000..c0620468
--- /dev/null
+++ b/src/hooks/useCanvasEvent.js
@@ -0,0 +1,277 @@
+import { useEffect, useState } from 'react'
+import { fabric } from 'fabric'
+import { useRecoilValue } from 'recoil'
+import { canvasSizeState, modeState } from '@/store/canvasAtom'
+
+// 캔버스에 필요한 이벤트
+export function useCanvasEvent() {
+  const [canvas, setCanvasForEvent] = useState(null)
+  const canvasSize = useRecoilValue(canvasSizeState)
+
+  // 기본적인 이벤트 필요시 추가
+  const attachDefaultEventOnCanvas = () => {
+    removeEventOnCanvas()
+    canvas?.on('object:added', onChange)
+    canvas?.on('object:added', addEventOnObject)
+    canvas?.on('object:modified', onChange)
+    canvas?.on('object:removed', onChange)
+    canvas?.on('object:added', () => {
+      document.addEventListener('keydown', handleKeyDown)
+    })
+
+    canvas?.on('mouse:move', drawMouseLines)
+    canvas?.on('mouse:out', removeMouseLines)
+  }
+
+  const onChange = (e) => {
+    const target = e.target
+    if (target) {
+      // settleDown(target)
+    }
+  }
+
+  const removeEventOnCanvas = () => {
+    canvas?.off('object:added')
+    canvas?.off('object:modified')
+    canvas?.off('object:removed')
+    canvas?.off('object:added')
+    canvas?.off('mouse:move')
+    canvas?.off('mouse:down')
+  }
+
+  const addEventOnObject = (e) => {
+    const target = e.target
+
+    if (target.type === 'QPolygon' || target.type === 'QLine') {
+      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
+      textObjs.forEach((obj) => {
+        obj.bringToFront()
+      })
+    }
+
+    if (target.name === 'cell') {
+      target.on('mousedown', () => {
+        if (target.get('selected')) {
+          target.set({ selected: false })
+          target.set({ fill: '#BFFD9F' })
+        } else {
+          target.set({ selected: true })
+          target.set({ fill: 'red' })
+        }
+        canvas?.renderAll()
+      })
+    }
+
+    if (target.name === 'trestle') {
+      target.on('mousedown', () => {
+        if (target.defense === 'north') {
+          alert('북쪽은 선택 불가합니다.')
+          return
+        }
+        if (target.get('selected')) {
+          target.set({ strokeWidth: 1 })
+          target.set({ strokeDashArray: [5, 5] })
+          target.set({ selected: false })
+        } else {
+          target.set({ strokeWidth: 5 })
+          target.set({ strokeDashArray: [0, 0] })
+          target.set({ selected: true })
+        }
+        canvas?.renderAll()
+      })
+    }
+
+    if (target.name === 'lengthText') {
+      const x = target.left
+      const y = target.top
+      target.on('selected', (e) => {
+        Object.keys(target.controls).forEach((controlKey) => {
+          target.setControlVisible(controlKey, false)
+        })
+      })
+      target.on('moving', (e) => {
+        if (target.parentDirection === 'left' || target.parentDirection === 'right') {
+          const minX = target.minX
+          const maxX = target.maxX
+
+          if (target.left <= minX) {
+            target.set({ left: minX, top: y })
+          } else if (target.left >= maxX) {
+            target.set({ left: maxX, top: y })
+          } else {
+            target.set({ top: y })
+          }
+        } else if (target.parentDirection === 'top' || target.parentDirection === 'bottom') {
+          const minY = target.minY
+          const maxY = target.maxY
+
+          if (target.top <= minY) {
+            target.set({ left: x, top: minY })
+          } else if (target.top >= maxY) {
+            target.set({ left: x, top: maxY })
+          } else {
+            target.set({ left: x })
+          }
+        }
+        canvas?.renderAll()
+      })
+    }
+  }
+
+  // 마우스 가로, 세로선 그리기
+  const drawMouseLines = (e) => {
+    // 현재 마우스 포인터의 위치를 가져옵니다.
+    const pointer = canvas?.getPointer(e.e)
+
+    // 기존에 그려진 가이드라인을 제거합니다.
+    removeMouseLines()
+
+    if (canvas?.getActiveObject()) {
+      return
+    }
+
+    // 가로선을 그립니다.
+    const horizontalLine = new fabric.Line([0, pointer.y, canvasSize.horizontal, pointer.y], {
+      stroke: 'black',
+      strokeWidth: 1,
+      selectable: false,
+      name: 'mouseLine',
+    })
+
+    // 세로선을 그립니다.
+    const verticalLine = new fabric.Line([pointer.x, 0, pointer.x, canvasSize.vertical], {
+      stroke: 'black',
+      strokeWidth: 1,
+      selectable: false,
+      name: 'mouseLine',
+    })
+
+    // 선들을 캔버스에 추가합니다.
+    canvas?.add(horizontalLine, verticalLine)
+
+    // 캔버스를 다시 그립니다.
+    canvas?.renderAll()
+  }
+
+  //가로, 세로 선 삭제
+  const removeMouseLines = () => {
+    if (canvas?._objects.length > 0) {
+      const mouseLines = canvas?._objects.filter((obj) => obj.name === 'mouseLine')
+      mouseLines.forEach((item) => canvas?.remove(item))
+    }
+    canvas?.renderAll()
+  }
+
+  /**
+   * 각종 키보드 이벤트
+   * https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+   */
+  const handleKeyDown = (e) => {
+    const key = e.key
+
+    switch (key) {
+      case 'Delete':
+      case 'Backspace':
+        handleDelete()
+        break
+      case 'Down': // IE/Edge에서 사용되는 값
+      case 'ArrowDown':
+        // "아래 화살표" 키가 눌렸을 때의 동작입니다.
+        moveDown()
+        break
+      case 'Up': // IE/Edge에서 사용되는 값
+      case 'ArrowUp':
+        // "위 화살표" 키가 눌렸을 때의 동작입니다.
+        moveUp()
+        break
+      case 'Left': // IE/Edge에서 사용되는 값
+      case 'ArrowLeft':
+        // "왼쪽 화살표" 키가 눌렸을 때의 동작입니다.
+        moveLeft()
+        break
+      case 'Right': // IE/Edge에서 사용되는 값
+      case 'ArrowRight':
+        // "오른쪽 화살표" 키가 눌렸을 때의 동작입니다.
+        moveRight()
+        break
+      case 'Enter':
+        // "enter" 또는 "return" 키가 눌렸을 때의 동작입니다.
+        break
+      case 'Esc': // IE/Edge에서 사용되는 값
+      case 'Escape':
+        break
+      default:
+        return // 키 이벤트를 처리하지 않는다면 종료합니다.
+    }
+    e.preventDefault()
+  }
+
+  const moveDown = () => {
+    const targetObj = canvas?.getActiveObject()
+    if (!targetObj) {
+      return
+    }
+
+    let top = targetObj.top + 10
+
+    if (top > canvasSize.vertical) {
+      top = canvasSize.vertical
+    }
+
+    targetObj.set({ top: top })
+    canvas?.renderAll()
+  }
+
+  const moveUp = () => {
+    const targetObj = canvas?.getActiveObject()
+    if (!targetObj) {
+      return
+    }
+
+    let top = targetObj.top - 10
+
+    if (top < 0) {
+      top = 0
+    }
+
+    targetObj.set({ top: top })
+    canvas?.renderAll()
+  }
+
+  const moveLeft = () => {
+    const targetObj = canvas?.getActiveObject()
+    if (!targetObj) {
+      return
+    }
+
+    let left = targetObj.left - 10
+
+    if (left < 0) {
+      left = 0
+    }
+
+    targetObj.set({ left: left })
+    canvas?.renderAll()
+  }
+
+  const moveRight = () => {
+    const targetObj = canvas?.getActiveObject()
+    if (!targetObj) {
+      return
+    }
+
+    let left = targetObj.left + 10
+
+    if (left > canvasSize.horizontal) {
+      left = canvasSize.horizontal
+    }
+
+    targetObj.set({ left: left })
+    canvas?.renderAll()
+  }
+
+  return {
+    setCanvasForEvent,
+    attachDefaultEventOnCanvas,
+  }
+}
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 9ac623a1..07acbb9c 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -23,6 +23,7 @@ import {
   templateTypeState,
   wallState,
   compassState,
+  modeState,
 } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
@@ -30,25 +31,10 @@ import { QPolygon } from '@/components/fabric/QPolygon'
 import offsetPolygon from '@/util/qpolygon-utils'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import * as turf from '@turf/turf'
-
-export const Mode = {
-  DRAW_LINE: 'drawLine', // 기준선 긋기모드`
-  EDIT: 'edit',
-  TEMPLATE: 'template',
-  PATTERNA: 'patterna',
-  PATTERNB: 'patternb',
-  TEXTBOX: 'textbox',
-  DRAW_RECT: 'drawRect',
-  ROOF_PATTERN: 'roofPattern', //지붕패턴 모드
-  ROOF_TRESTLE: 'roofTrestle', //지붕가대 모드
-  FILL_CELLS: 'fillCells', //태양광셀 모드
-  CELL_POWERCON: 'cellPowercon', //파워콘
-  DRAW_HELP_LINE: 'drawHelpLine', // 보조선 그리기 모드 지붕 존재해야함
-  DEFAULT: 'default',
-}
+import { Mode } from '@/common/common'
 
 export function useMode() {
-  const [mode, setMode] = useState()
+  const [mode, setMode] = useRecoilState(modeState)
   const points = useRef([])
   const historyPoints = useRef([])
   const historyLines = useRef([])
@@ -233,55 +219,37 @@ export function useMode() {
     canvas?.renderAll()
   }
 
-  const addEvent = (mode) => {
+  // 모드에 따른 마우스 이벤트 변경
+  const changeMouseEvent = (mode) => {
+    canvas?.off('mouse:down')
     switch (mode) {
       case 'drawLine':
-        drawLineMode()
+        canvas?.on('mouse:down', mouseEvent.drawLineMode)
         break
       case 'edit':
-        editMode()
-        break
-      case 'template':
-        templateMode()
-        break
-      case 'patterna':
-        applyTemplateA()
-        break
-      case 'patternb':
-        applyTemplateB()
+        canvas?.on('mouse:down', mouseEvent.editMode)
         break
       case 'textbox':
-        textboxMode()
+        canvas?.on('mouse:down', mouseEvent.textboxMode)
         break
       case 'drawRect':
-        drawRectMode()
-        break
-      case 'roofPattern':
-        makeRoofPatternPolygon()
-        break
-      case 'roofTrestle':
-        makeRoofTrestle()
-        break
-      case 'fillCells':
-        makeRoofFillCells()
-        break
-      case 'cellPowercon':
-        makeCellPowercon()
+        canvas?.on('mouse:down', mouseEvent.drawRectMode)
         break
       case 'drawHelpLine':
         canvas?.off('selection:created', addSelectCreatedEvent)
         canvas?.off('selection:cleared', addSelectClearedEvent)
         canvas?.on('selection:created', addSelectCreatedEvent)
         canvas?.on('selection:cleared', addSelectClearedEvent)
-        drawHelpLineMode()
         break
-
       case 'default':
         canvas?.off('mouse:down')
         break
     }
   }
 
+  // 모드에 따른 키보드 이벤트 변경
+  const changeKeyboardEvent = (mode) => {}
+
   const keyValid = () => {
     if (points.current.length === 0) {
       alert('시작점을 선택해주세요')
@@ -504,19 +472,63 @@ export function useMode() {
   }
 
   const changeMode = (canvas, mode) => {
-    setEndPoint(null)
-    pointCount.current = 0
-
     setMode(mode)
     // mode변경 시 이전 이벤트 제거
     setCanvas(canvas)
-    canvas?.off('mouse:down')
 
-    addEvent(mode)
+    changeMouseEvent(mode)
+    changeKeyboardEvent(mode)
+
+    switch (mode) {
+      case 'template':
+        templateMode()
+        break
+      case 'patterna':
+        applyTemplateA()
+        break
+      case 'patternb':
+        applyTemplateB()
+        break
+      case 'roofPattern':
+        makeRoofPatternPolygon()
+        break
+      case 'roofTrestle':
+        makeRoofTrestle()
+        break
+      case 'fillCells':
+        makeRoofFillCells()
+        break
+      case 'cellPowercon':
+        makeCellPowercon()
+        break
+      case 'drawHelpLine':
+        drawHelpLineMode()
+        break
+      case 'default':
+        clearEditMode()
+        break
+    }
   }
 
-  const editMode = () => {
-    canvas?.on('mouse:down', function (options) {
+  const mouseEvent = {
+    drawLineMode: (options) => {
+      const pointer = canvas?.getPointer(options.e)
+
+      const line = new QLine(
+        [pointer.x, 0, pointer.x, canvas.height], // y축에 1자 선을 그립니다.
+        {
+          stroke: 'black',
+          strokeWidth: 2,
+          viewLengthText: true,
+          selectable: false,
+          fontSize: fontSize,
+        },
+      )
+
+      canvas?.add(line)
+      canvas?.renderAll()
+    },
+    editMode: (options) => {
       const pointer = canvas?.getPointer(options.e)
       const circle = new fabric.Circle({
         radius: 5,
@@ -585,7 +597,62 @@ export function useMode() {
       }
 
       canvas?.renderAll()
-    })
+    },
+    textboxMode: (options) => {
+      if (canvas?.getActiveObject()?.type === 'textbox') return
+      const pointer = canvas?.getPointer(options.e)
+
+      const textbox = new fabric.Textbox('텍스트를 입력하세요', {
+        left: pointer.x,
+        top: pointer.y,
+        width: 150, // 텍스트박스의 너비를 설정합니다.
+        fontSize: fontSize, // 텍스트의 크기를 설정합니다.
+      })
+
+      canvas?.add(textbox)
+      canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다.
+      canvas?.renderAll()
+      // textbox가 active가 풀린 경우 editing mode로 변경
+      textbox?.on('editing:exited', function () {
+        changeMode(canvas, Mode.EDIT)
+      })
+    },
+    drawRectMode: () => {
+      let rect, isDown, origX, origY
+      canvas.on('mouse:down', function (o) {
+        isDown = true
+        const pointer = canvas.getPointer(o.e)
+        origX = pointer.x
+        origY = pointer.y
+        rect = new fabric.Rect({
+          left: origX,
+          top: origY,
+          originX: 'left',
+          originY: 'top',
+          width: pointer.x - origX,
+          height: pointer.y - origY,
+          angle: 0,
+          fill: 'transparent',
+          stroke: 'black',
+          transparentCorners: false,
+        })
+        canvas.add(rect)
+      })
+
+      canvas.on('mouse:move', function (o) {
+        if (!isDown) return
+        const pointer = canvas.getPointer(o.e)
+        if (origX > pointer.x) {
+          rect.set({ left: Math.abs(pointer.x) })
+        }
+        if (origY > pointer.y) {
+          rect.set({ top: Math.abs(pointer.y) })
+        }
+
+        rect.set({ width: Math.abs(origX - pointer.x) })
+        rect.set({ height: Math.abs(origY - pointer.y) })
+      })
+    },
   }
 
   const pushHistoryLine = (line) => {
@@ -643,86 +710,6 @@ export function useMode() {
       setTemplateType(1)
     }
   }
-
-  const textboxMode = () => {
-    canvas?.on('mouse:down', function (options) {
-      if (canvas?.getActiveObject()?.type === 'textbox') return
-      const pointer = canvas?.getPointer(options.e)
-
-      const textbox = new fabric.Textbox('텍스트를 입력하세요', {
-        left: pointer.x,
-        top: pointer.y,
-        width: 150, // 텍스트박스의 너비를 설정합니다.
-        fontSize: fontSize, // 텍스트의 크기를 설정합니다.
-      })
-
-      canvas?.add(textbox)
-      canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다.
-      canvas?.renderAll()
-      // textbox가 active가 풀린 경우 editing mode로 변경
-      textbox?.on('editing:exited', function () {
-        changeMode(canvas, Mode.EDIT)
-      })
-    })
-  }
-
-  const drawLineMode = () => {
-    canvas?.on('mouse:down', function (options) {
-      const pointer = canvas?.getPointer(options.e)
-
-      const line = new QLine(
-        [pointer.x, 0, pointer.x, canvas.height], // y축에 1자 선을 그립니다.
-        {
-          stroke: 'black',
-          strokeWidth: 2,
-          viewLengthText: true,
-          selectable: false,
-          fontSize: fontSize,
-        },
-      )
-
-      canvas?.add(line)
-      canvas?.renderAll()
-    })
-  }
-
-  const drawRectMode = () => {
-    let rect, isDown, origX, origY
-    canvas.on('mouse:down', function (o) {
-      isDown = true
-      const pointer = canvas.getPointer(o.e)
-      origX = pointer.x
-      origY = pointer.y
-      rect = new fabric.Rect({
-        left: origX,
-        top: origY,
-        originX: 'left',
-        originY: 'top',
-        width: pointer.x - origX,
-        height: pointer.y - origY,
-        angle: 0,
-        fill: 'transparent',
-        stroke: 'black',
-        transparentCorners: false,
-      })
-      canvas.add(rect)
-    })
-
-    canvas.on('mouse:move', function (o) {
-      if (!isDown) return
-      const pointer = canvas.getPointer(o.e)
-      if (origX > pointer.x) {
-        rect.set({ left: Math.abs(pointer.x) })
-      }
-      if (origY > pointer.y) {
-        rect.set({ top: Math.abs(pointer.y) })
-      }
-
-      rect.set({ width: Math.abs(origX - pointer.x) })
-      rect.set({ height: Math.abs(origY - pointer.y) })
-    })
-  }
-
   /**
    * 두 점을 연결하는 선과 길이를 그립니다.
    * a : 시작점, b : 끝점
@@ -818,6 +805,7 @@ export function useMode() {
     canvas?.clear()
     startPoint.current = null
     setEndPoint(null)
+    pointCount.current = 0
     setTemplateType(0)
     points.current = []
     historyPoints.current = []
@@ -826,6 +814,15 @@ export function useMode() {
     setSelectedCellRoofArray([]) //셀 그린거 삭제
   }
 
+  const clearEditMode = () => {
+    startPoint.current = null
+    setEndPoint(null)
+    pointCount.current = 0
+    points.current = []
+    historyPoints.current = []
+    historyLines.current = []
+  }
+
   const zoomIn = () => {
     canvas?.setZoom(canvas.getZoom() + 0.1)
     setZoom(Math.round(zoom + 10))
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index fa4d2770..b8a17a3b 100644
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@@ -5,6 +5,11 @@ export const textState = atom({
   default: 'test text',
 })
 
+export const modeState = atom({
+  key: 'modeState',
+  default: 'default',
+})
+
 export const fontSizeState = atom({
   key: 'fontSizeState',
   default: 16,