diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js
index e69de29b..52106e3e 100644
--- a/src/hooks/common/useCommonUtils.js
+++ b/src/hooks/common/useCommonUtils.js
@@ -0,0 +1,367 @@
+import { useEffect } from 'react'
+import { useRecoilValue } from 'recoil'
+import { wordDisplaySelector } from '@/store/settingAtom'
+import { checkLineOrientation, getDistance } from '@/util/canvas-util'
+import { useEvent } from '@/hooks/useEvent'
+
+export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionState }) {
+ const wordDisplay = useRecoilValue(wordDisplaySelector)
+ const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
+
+ useEffect(() => {
+ initEvent()
+ if (commonFunctionState.text) {
+ commonTextMode()
+ } else if (commonFunctionState.dimension) {
+ commonDimensionMode()
+ } else if (commonFunctionState.distance) {
+ commonDistanceMode()
+ }
+ }, [commonFunctionState])
+
+ const commonTextMode = () => {
+ let textbox
+ if (commonFunctionState.text) {
+ addCanvasMouseEventListener('mouse:down', (event) => {
+ const pointer = canvas?.getPointer(event.e)
+ textbox = new fabric.Textbox('', {
+ left: pointer.x,
+ top: pointer.y,
+ width: 200,
+ fontSize: 14,
+ editable: true,
+ name: 'commonText',
+ visible: wordDisplay,
+ })
+
+ canvas?.add(textbox)
+ canvas.setActiveObject(textbox)
+ textbox.enterEditing()
+ textbox.selectAll()
+ })
+
+ addDocumentEventListener('keydown', document, (e) => {
+ if (e.key === 'Enter') {
+ if (commonFunctionState.text) {
+ const activeObject = canvas.getActiveObject()
+ if (activeObject && activeObject.isEditing) {
+ if (activeObject.text === '') {
+ canvas?.remove(activeObject)
+ } else {
+ activeObject.exitEditing()
+ }
+ //정책 협의
+ const texts = canvas.getObjects().filter((obj) => obj.name === 'commonText')
+ texts.forEach((text) => {
+ text.set({ editable: false })
+ })
+
+ canvas.renderAll()
+ }
+ }
+ }
+ })
+ }
+ }
+
+ const commonDimensionMode = () => {
+ if (commonFunctionState.dimension) {
+ let points = []
+ let distanceText = null
+ let minX, minY, maxX, maxY
+
+ // 화살표를 생성하는 함수
+ function createArrow(x, y, angle) {
+ return new fabric.Triangle({
+ left: x,
+ top: y,
+ originX: 'center',
+ originY: 'center',
+ angle: angle,
+ width: 15,
+ height: 15,
+ fill: 'black',
+ selectable: false,
+ })
+ }
+
+ const circleOptions = {
+ radius: 5,
+ strokeWidth: 2,
+ stroke: 'red',
+ fill: 'white',
+ selectable: false,
+ }
+
+ const lineOptions = {
+ stroke: 'black',
+ strokeWidth: 2,
+ selectable: false,
+ }
+
+ // 캔버스에 클릭 이벤트 추가
+ addCanvasMouseEventListener('mouse:down', (e) => {
+ const pointer = canvas.getPointer(e.e)
+ let point
+
+ if (points.length === 0) {
+ // 첫 번째 포인트는 그대로 클릭한 위치에 추가
+ point = new fabric.Circle({
+ left: pointer.x - 5, // 반지름 반영
+ top: pointer.y - 5, // 반지름 반영
+ ...circleOptions,
+ })
+ points.push(point)
+ canvas.add(point)
+ } else if (points.length === 1) {
+ // 두 번째 포인트는 첫 번째 포인트를 기준으로 수평 또는 수직으로만 배치
+ const p1 = points[0]
+ const deltaX = Math.abs(pointer.x - (p1.left + p1.radius))
+ const deltaY = Math.abs(pointer.y - (p1.top + p1.radius))
+
+ if (deltaX > deltaY) {
+ // 수평선 상에만 배치 (y 좌표 고정)
+ point = new fabric.Circle({
+ left: pointer.x - 5, // 반지름 반영
+ top: p1.top, // y 좌표 고정
+ ...circleOptions,
+ })
+ } else {
+ // 수직선 상에만 배치 (x 좌표 고정)
+ point = new fabric.Circle({
+ left: p1.left, // x 좌표 고정
+ top: pointer.y - 5, // 반지름 반영
+ ...circleOptions,
+ })
+ }
+
+ points.push(point)
+ canvas.add(point)
+
+ // 두 포인트의 중심 좌표 계산
+ const p2 = points[1]
+ const p1CenterX = p1.left + p1.radius
+ const p1CenterY = p1.top + p1.radius
+ const p2CenterX = p2.left + p2.radius
+ const p2CenterY = p2.top + p2.radius
+
+ points.forEach((point) => {
+ canvas?.remove(point)
+ })
+
+ // 두 포인트 간에 직선을 그림 (중심을 기준으로)
+ const line = new fabric.Line([p1CenterX, p1CenterY, p2CenterX, p2CenterY], lineOptions)
+ canvas.add(line)
+
+ const distance = getDistance(p1CenterX, p1CenterY, p2CenterX, p2CenterY)
+ const lineDirection = checkLineOrientation(line)
+ let extendLine = []
+
+ if (lineDirection === 'horizontal') {
+ extendLine = [
+ [line.x1, line.y1 - 20, line.x1, line.y1 + 20],
+ [line.x2, line.y2 - 20, line.x2, line.y2 + 20],
+ ]
+ } else {
+ extendLine = [
+ [line.x1 - 20, line.y1, line.x1 + 20, line.y1],
+ [line.x2 - 20, line.y2, line.x2 + 20, line.y2],
+ ]
+ }
+
+ extendLine.forEach((line) => {
+ const extendLine = new fabric.Line(line, lineOptions)
+ canvas.add(extendLine)
+ })
+
+ // 첫 번째 포인트에 화살표 추가
+ const paddingX = lineDirection === 'horizontal' ? p1CenterX + 7.5 : p1CenterX + 1
+ const paddingX2 = lineDirection === 'horizontal' ? p2CenterX - 6.5 : p2CenterX + 1
+ const paddingY = lineDirection === 'horizontal' ? p1CenterY + 1 : p1CenterY + 8
+ const paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 1 : p2CenterY - 8
+
+ const arrow1 = createArrow(paddingX, paddingY, lineDirection === 'horizontal' ? -90 : 0) // 반대 방향 화살표
+ const arrow2 = createArrow(paddingX2, paddingY2, lineDirection === 'horizontal' ? 90 : 180) // 정방향 화살표
+ canvas.add(arrow1)
+ canvas.add(arrow2)
+
+ // 거리 텍스트가 이미 있으면 업데이트하고, 없으면 새로 생성
+ distanceText = new fabric.Text(`${distance}`, {
+ left: (p1CenterX + p2CenterX) / 2 + (lineDirection === 'horizontal' ? 0 : -15),
+ top: (p1CenterY + p2CenterY) / 2 + (lineDirection === 'horizontal' ? +15 : 0),
+ fill: 'black',
+ fontSize: 16,
+ selectable: true,
+ textAlign: 'center',
+ originX: 'center',
+ originY: 'center',
+ angle: lineDirection === 'horizontal' ? 0 : 270,
+ // lockMovementX: false,
+ // lockMovementY: false,
+ })
+ canvas.add(distanceText)
+
+ // minX = p1CenterX
+ // maxX = p2CenterX
+ // minY = p1CenterY
+ // maxY = p2CenterY
+
+ // 거리 계산 후, 다음 측정을 위해 초기화
+ points = []
+ }
+
+ // 캔버스 다시 그리기
+ canvas.renderAll()
+ })
+
+ // addCanvasMouseEventListener('object:moving', function (e) {
+ // const obj = e.target
+
+ // if (obj.left < minX) {
+ // obj.left = minX
+ // }
+ // if (obj.left + obj.width > maxX) {
+ // obj.left = maxX - obj.width
+ // }
+ // if (obj.top < minY) {
+ // obj.top = minY
+ // }
+ // if (obj.top + obj.height > maxY) {
+ // obj.top = maxY - obj.height
+ // }
+ // })
+ }
+ }
+
+ const commonDistanceMode = () => {
+ if (commonFunctionState.distance) {
+ let points = []
+ let distanceText = null
+
+ const circleOptions = {
+ radius: 5,
+ strokeWidth: 2,
+ stroke: 'red',
+ fill: 'white',
+ selectable: false,
+ }
+
+ const lineOptions = {
+ stroke: 'black',
+ strokeWidth: 2,
+ selectable: false,
+ strokeDashArray: [9, 5],
+ }
+
+ const textOptions = {
+ fill: 'black',
+ fontSize: 16,
+ selectable: true,
+ textAlign: 'center',
+ originX: 'center',
+ originY: 'center',
+ }
+
+ // 캔버스에 클릭 이벤트 추가
+ addCanvasMouseEventListener('mouse:down', function (options) {
+ const pointer = canvas.getPointer(options.e)
+ let point
+
+ if (points.length === 0) {
+ // 첫 번째 포인트는 그대로 클릭한 위치에 추가
+ point = new fabric.Circle({
+ left: pointer.x - 5, // 반지름 반영
+ top: pointer.y - 5, // 반지름 반영
+ ...circleOptions,
+ })
+ points.push(point)
+ canvas.add(point)
+ } else if (points.length === 1) {
+ // 두 번째 포인트는 첫 번째 포인트를 기준으로 수평 또는 수직으로만 배치
+ const p1 = points[0]
+
+ point = new fabric.Circle({
+ left: pointer.x - 5, // 반지름 반영
+ top: pointer.y - 5, // 반지름 반영
+ ...circleOptions,
+ })
+
+ points.push(point)
+ canvas.add(point)
+
+ // 두 포인트의 중심 좌표 계산
+ const p2 = points[1]
+
+ const p1CenterX = p1.left + p1.radius
+ const p1CenterY = p1.top + p1.radius
+ const p2CenterX = p2.left + p2.radius
+ const p2CenterY = p2.top + p2.radius
+
+ const p3 = new fabric.Point(p2CenterX, p1CenterY)
+
+ // 두 포인트 간에 직선을 그림 (중심을 기준으로)
+ const line = new fabric.Line([p1CenterX, p1CenterY, p2CenterX, p2CenterY], lineOptions)
+ const line2 = new fabric.Line([p2CenterX, p2CenterY, p3.x, p3.y], lineOptions)
+ const line3 = new fabric.Line([p3.x, p3.y, p1CenterX, p1CenterY], lineOptions)
+ canvas.add(line)
+ canvas.add(line2)
+ canvas.add(line3)
+
+ const distance1 = getDistance(p1CenterX, p1CenterY, p2CenterX, p2CenterY)
+ const distance2 = getDistance(p2CenterX, p2CenterY, p3.x, p3.y)
+ const distance3 = getDistance(p3.x, p3.y, p1CenterX, p1CenterY)
+
+ // 거리 텍스트가 이미 있으면 업데이트하고, 없으면 새로 생성
+ distanceText = new fabric.Text(`${distance1}`, {
+ left: (p1CenterX + p2CenterX) / 2,
+ top: (p1CenterY + p2CenterY) / 2,
+ ...textOptions,
+ })
+ canvas.add(distanceText)
+ distanceText = new fabric.Text(`${distance2}`, {
+ left: (p2CenterX + p3.x) / 2,
+ top: (p2CenterY + p3.y) / 2,
+ ...textOptions,
+ })
+ canvas.add(distanceText)
+ distanceText = new fabric.Text(`${distance3}`, {
+ left: (p3.x + p1CenterX) / 2,
+ top: (p3.y + p1CenterY) / 2,
+ ...textOptions,
+ })
+ canvas.add(distanceText)
+
+ // 거리 계산 후, 다음 측정을 위해 초기화
+ points = []
+ }
+
+ // 캔버스 다시 그리기
+ canvas.renderAll()
+ })
+ }
+ }
+ const commonFunctions = (mode) => {
+ let tempStates = { ...commonFunctionState }
+
+ if (tempStates[mode]) {
+ tempStates[mode] = false
+ } else {
+ Object.keys(tempStates).forEach((key) => {
+ tempStates[key] = false
+ })
+
+ if (mode !== undefined) {
+ tempStates[mode] = true
+ }
+ }
+
+ setCommonFunctionState(tempStates)
+ }
+
+ return {
+ commonTextMode,
+ commonDimensionMode,
+ commonDistanceMode,
+ commonFunctions,
+ }
+}