feat: Refactor Roof2 component to remove unused imports and optimize code

src/app/roof2/page.jsx

@@ -1,6 +1,5 @@
 'use client'
 
-import Hero from '@/components/Hero'
 import Roof2 from '@/components/Roof2'
 import { textState } from '@/store/canvasAtom'
 import { useEffect } from 'react'

src/components/Roof2.jsx

@@ -7,21 +7,11 @@ import QPolygon from '@/components/fabric/QPolygon'
 
 import RangeSlider from './ui/RangeSlider'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import {
+import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
-  canvasSizeState,
-  fontSizeState,
-  sortedPolygonArray,
-} from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 
 export default function Roof2() {
-  const {
+  const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage } = useCanvas('canvas')
-    canvas,
-    handleRedo,
-    handleUndo,
-    setCanvasBackgroundWithDots,
-    saveImage,
-  } = useCanvas('canvas')
 
   //canvas 기본 사이즈
   const [canvasSize, setCanvasSize] = useRecoilState(canvasSizeState)
@@ -39,18 +29,8 @@ export default function Roof2() {
 
   const [showControl, setShowControl] = useState(false)
 
-  const {
+  const { mode, changeMode, handleClear, fillCellInPolygon, zoomIn, zoomOut, zoom, togglePolygonLine, handleOuterlinesTest2, applyTemplateB } =
-    mode,
+    useMode()
-    changeMode,
-    handleClear,
-    fillCellInPolygon,
-    zoomIn,
-    zoomOut,
-    zoom,
-    togglePolygonLine,
-    handleOuterlinesTest2,
-    applyTemplateB,
-  } = useMode()
 
   useEffect(() => {
     if (!canvas) {
@@ -251,11 +231,7 @@ export default function Roof2() {
       {canvas && (
         <>
           <div className=" my-8 w-full text:pretty">
-            <Button
+            <Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`} onClick={fillCellInPolygon}>
-              className="m-1 p-2"
-              color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`}
-              onClick={fillCellInPolygon}
-            >
               모드 DEFAULT
             </Button>
             <Button
@@ -265,39 +241,19 @@ export default function Roof2() {
             >
               기준선 긋기 모드
             </Button>
-            <Button
+            <Button className="m-1 p-2" color={`${mode === Mode.EDIT ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.EDIT)}>
-              className="m-1 p-2"
-              color={`${mode === Mode.EDIT ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.EDIT)}
-            >
               에디팅모드
             </Button>
-            <Button
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEMPLATE)}>
-              className="m-1 p-2"
-              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.TEMPLATE)}
-            >
               템플릿(기둥)
             </Button>
-            <Button
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNA)}>
-              className="m-1 p-2"
-              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.PATTERNA)}
-            >
               템플릿(A 패턴)
             </Button>
-            <Button
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNB)}>
-              className="m-1 p-2"
-              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.PATTERNB)}
-            >
               템플릿(B 패턴)
             </Button>
-            <Button
+            <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
-              className="m-1 p-2"
-              color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.TEXTBOX)}
-            >
               텍스트박스 모드
             </Button>
             <Button
@@ -363,30 +319,13 @@ export default function Roof2() {
             <Button className="m-1 p-2" onClick={PolygonToLine}>
               PolygonToLine
             </Button>
-            <Button
+            <Button className="m-1 p-2" color={`${showControl ? 'primary' : 'default'}`} onClick={handleShowController}>
-              className="m-1 p-2"
-              color={`${showControl ? 'primary' : 'default'}`}
-              onClick={handleShowController}
-            >
               canvas 컨트롤러 {`${showControl ? '숨기기' : '보이기'}`}
             </Button>
           </div>
-          <div
+          <div className={showControl ? `flex justify-center flex-col items-center` : `hidden`}>
-            className={
-              showControl
-                ? `flex justify-center flex-col items-center`
-                : `hidden`
-            }
-          >
             <div className="m-2 p-2 w-80">
-              <RangeSlider
+              <RangeSlider title={`각도${angle}`} initValue={angle} min="0" step="1" max="360" onchange={setAngle} />
-                title={`각도${angle}`}
-                initValue={angle}
-                min="0"
-                step="1"
-                max="360"
-                onchange={setAngle}
-              />
             </div>
             <div className="m-2 p-2 w-80">
               <RangeSlider
@@ -409,11 +348,7 @@ export default function Roof2() {
               />
             </div>
             <div className="m-2 p-2 w-80">
-              <RangeSlider
+              <RangeSlider title={`글자 크기${fontSize}`} initValue={fontSize} onchange={setFontSize} />
-                title={`글자 크기${fontSize}`}
-                initValue={fontSize}
-                onchange={setFontSize}
-              />
             </div>
           </div>
         </>

src/hooks/useMode.js

@@ -1,20 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 import QRect from '@/components/fabric/QRect'
 import QPolygon from '@/components/fabric/QPolygon'
-import {
+import { getStartIndex, rearrangeArray, findTopTwoIndexesByDistance, getDirection, getCenterPoint } from '@/util/canvas-util'
-  getStartIndex,
-  rearrangeArray,
-  findTopTwoIndexesByDistance,
-  getDirection,
-  getCenterPoint,
-} from '@/util/canvas-util'
 import { useRecoilState, useSetRecoilState } from 'recoil'
-import {
+import { fontSizeState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom'
-  fontSizeState,
-  roofState,
-  sortedPolygonArray,
-  wallState,
-} from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 
 export const Mode = {
@@ -101,8 +90,7 @@ export function useMode() {
         if (isNaN(length) || length === 0) {
           //마지막 추가 된 points 제거합니다.
 
-          const lastPoint =
+          const lastPoint = historyPoints.current[historyPoints.current.length - 1]
-            historyPoints.current[historyPoints.current.length - 1]
 
           canvas?.remove(lastPoint)
 
@@ -134,12 +122,7 @@ export function useMode() {
           }
 
           const line = new QLine(
-            [
+            [points.current[0].left, points.current[0].top, points.current[0].left + scaledVector.x, points.current[0].top + scaledVector.y],
-              points.current[0].left,
-              points.current[0].top,
-              points.current[0].left + scaledVector.x,
-              points.current[0].top + scaledVector.y,
-            ],
             {
               stroke: 'black',
               strokeWidth: 2,
@@ -180,27 +163,20 @@ export function useMode() {
   }
 
   const pushHistoryLine = (line) => {
-    if (
+    if (historyLines.current.length > 0 && historyLines.current[historyLines.current.length - 1].direction === line.direction) {
-      historyLines.current.length > 0 &&
-      historyLines.current[historyLines.current.length - 1].direction ===
-        line.direction
-    ) {
       // 같은 방향의 선이 두 번 연속으로 그려지면 이전 선을 제거하고, 새로운 선과 merge한다.
 
       const lastLine = historyLines.current.pop()
       canvas?.remove(lastLine)
 
-      const mergedLine = new QLine(
+      const mergedLine = new QLine([lastLine.x1, lastLine.y1, line.x2, line.y2], {
-        [lastLine.x1, lastLine.y1, line.x2, line.y2],
-        {
         stroke: 'black',
         strokeWidth: 2,
         selectable: false,
         viewLengthText: true,
         direction: lastLine.direction,
         fontSize: fontSize,
-        },
+      })
-      )
       historyLines.current.push(mergedLine)
       canvas?.add(mergedLine)
     } else {
@@ -460,9 +436,7 @@ export function useMode() {
     const newOuterlines = []
     for (let i = 0; i < historyLines.current.length; i++) {
       const next = historyLines.current[i + 1]
-      const prev =
+      const prev = historyLines.current[i - 1] ?? historyLines.current[historyLines.current.length - 1]
-        historyLines.current[i - 1] ??
-        historyLines.current[historyLines.current.length - 1]
       if (next) {
         if (next.direction === 'right') {
           // 다름 라인이 오른쪽으로 이동
@@ -797,9 +771,7 @@ export function useMode() {
       }
 
       // 평균 법선 벡터를 단위 벡터로 정규화
-      var lengthNormal = Math.sqrt(
+      var lengthNormal = Math.sqrt(averageNormal.x * averageNormal.x + averageNormal.y * averageNormal.y)
-        averageNormal.x * averageNormal.x + averageNormal.y * averageNormal.y,
-      )
       var unitNormal = {
         x: averageNormal.x / lengthNormal,
         y: averageNormal.y / lengthNormal,
@@ -867,9 +839,7 @@ export function useMode() {
       }
 
       // 평균 법선 벡터를 단위 벡터로 정규화
-      const lengthNormal = Math.sqrt(
+      const lengthNormal = Math.sqrt(averageNormal.x * averageNormal.x + averageNormal.y * averageNormal.y)
-        averageNormal.x * averageNormal.x + averageNormal.y * averageNormal.y,
-      )
       const unitNormal = {
         x: averageNormal.x / lengthNormal,
         y: averageNormal.y / lengthNormal,
@@ -933,64 +903,144 @@ export function useMode() {
   const applyTemplateB = () => {
     changeMode(canvas, Mode.EDIT)
     const polygon = drawWallPolygon()
-    handleOuterLineTemplateB(polygon)
+    console.log('polygon', polygon)
+    const params = {
+      eaves: 50,
+      edge: 20,
+      polygon,
+    }
+    handleInnerLineColor(polygon)
+    handleOuterLineTemplateB(params)
   }
 
-  const handleOuterLineTemplateB = (polygon) => {
+  const handleInnerLineColor = (polygon) => {
+    polygon.lines.forEach((line, index) => {
+      if (index % 2 === 0) {
+        line.set('stroke', 'rgb(0, 220, 221)')
+      } else {
+        line.set('stroke', 'rgb(0, 224, 61)')
+      }
+
+      const overLine = new QLine([line.x1, line.y1, line.x2, line.y2], {
+        stroke: line.stroke,
+        strokeWidth: 2,
+        selectable: false,
+        fontSize: fontSize,
+      })
+      canvas.add(overLine)
+    })
+    canvas.renderAll()
+  }
+
+  const handleOuterLineTemplateB = (params) => {
+    const { eaves, edge, polygon } = params
     polygon.points.forEach((point, index) => {
-      let x2 =
+      let x2 = index === polygon.points.length - 1 ? polygon.points[0].x : polygon.points[index + 1].x
-        index === polygon.points.length - 1
+      let y2 = index === polygon.points.length - 1 ? polygon.points[0].y : polygon.points[index + 1].y
-          ? polygon.points[0].x
-          : polygon.points[index + 1].x
-      let y2 =
-        index === polygon.points.length - 1
-          ? polygon.points[0].y
-          : polygon.points[index + 1].y
 
       let x1 = point.x
       let y1 = point.y
       if (index % 2 === 0) {
         if (polygon.lines[index].direction === 'bottom') {
-          y1 = y1 - 50
+          y1 = y1 - eaves
-          y2 = y2 + 50
+          y2 = y2 + eaves
-          x1 = x1 - 20
+          x1 = x1 - edge
-          x2 = x2 - 20
+          x2 = x2 - edge
         } else {
-          y1 = y1 + 50
+          y1 = y1 + eaves
-          y2 = y2 - 50
+          y2 = y2 - eaves
-          x1 = x1 + 20
+          x1 = x1 + edge
-          x2 = x2 + 20
+          x2 = x2 + edge
         }
       } else {
         if (polygon.lines[index].direction === 'right') {
-          x1 = x1 - 20
+          x1 = x1 - edge
-          x2 = x2 + 20
+          x2 = x2 + edge
-          y1 = y1 + 50
+          y1 = y1 + eaves
-          y2 = y2 + 50
+          y2 = y2 + eaves
         } else {
-          x1 = x1 + 20
+          x1 = x1 + edge
-          x2 = x2 - 20
+          x2 = x2 - edge
-          y1 = y1 - 50
+          y1 = y1 - eaves
-          y2 = y2 - 50
+          y2 = y2 - eaves
         }
       }
 
       switch (polygon.shape) {
         case 1:
-          break
-        case 2:
-          const centerPoint =
-            polygon.points[3].y +
-            (polygon.points[2].y - polygon.points[3].y) / 2
           if (index === 0) {
             const subLine = new QLine(
               [
-                point.x - 20,
+                point.x - edge,
-                polygon.points[0].y +
+                polygon.points[0].y + (polygon.points[1].y - polygon.points[0].y) / 2,
-                  (polygon.points[1].y - polygon.points[0].y) / 2,
+                polygon.points[2].x,
-                polygon.points[5].x + 20,
+                polygon.points[0].y + (polygon.points[1].y - polygon.points[0].y) / 2,
-                polygon.points[0].y +
+              ],
-                  (polygon.points[1].y - polygon.points[0].y) / 2,
+              {
+                stroke: 'blue',
+                strokeWidth: 2,
+                selectable: false,
+                fontSize: fontSize,
+              },
+            )
+            canvas.add(subLine)
+          }
+          if (index === 1) {
+            x2 = x2 - edge
+            const subLine = new QLine([x2, y2, x2, polygon.points[0].y + (polygon.points[1].y - polygon.points[0].y) / 2], {
+              stroke: 'blue',
+              strokeWidth: 2,
+              selectable: false,
+              fontSize: fontSize,
+            })
+            canvas.add(subLine)
+          }
+          if (index === 2) {
+            y1 = point.y - (polygon.points[1].y - polygon.points[0].y) / 2
+            const centeredPoint = getCenterPoint(polygon.points[1].x, point.x)
+            const subLine = new QLine(
+              [centeredPoint, point.y + eaves, centeredPoint, polygon.points[0].y + (polygon.points[1].y - polygon.points[0].y) / 2],
+              {
+                stroke: 'black',
+                strokeWidth: 2,
+                strokeDashArray: [5, 5],
+                selectable: false,
+                fontSize: fontSize,
+              },
+            )
+            canvas.add(subLine)
+          }
+          if (index === 3) {
+            const centeredPoint = getCenterPoint(point.x, polygon.points[4].x)
+            const subLine = new QLine([centeredPoint, point.y + eaves, centeredPoint, polygon.points[5].y - eaves], {
+              stroke: 'black',
+              strokeWidth: 2,
+              strokeDashArray: [5, 5],
+              selectable: false,
+              fontSize: fontSize,
+            })
+            canvas.add(subLine)
+          }
+          if (index === 5) {
+            const centeredPoint = getCenterPoint(point.y, polygon.points[4].y)
+            const subLine = new QLine([point.x + edge, centeredPoint, polygon.points[2].x - edge, centeredPoint], {
+              stroke: 'blue',
+              strokeWidth: 2,
+              selectable: false,
+              fontSize: fontSize,
+            })
+            canvas.add(subLine)
+          }
+          break
+        case 2:
+          const centerPoint = polygon.points[3].y + (polygon.points[2].y - polygon.points[3].y) / 2
+          if (index === 0) {
+            const subLine = new QLine(
+              [
+                point.x - egde,
+                polygon.points[0].y + (polygon.points[1].y - polygon.points[0].y) / 2,
+                polygon.points[5].x + egde,
+                polygon.points[0].y + (polygon.points[1].y - polygon.points[0].y) / 2,
               ],
               {
                 stroke: 'blue',
@@ -1002,7 +1052,7 @@ export function useMode() {
             canvas.add(subLine)
           }
           if (index === 3) {
-            x2 = x2 + 20
+            x2 = x2 + egde
 
             const subLine = new QLine([x2, y2, x2, centerPoint], {
               stroke: 'blue',
@@ -1013,26 +1063,20 @@ export function useMode() {
             canvas.add(subLine)
           }
           if (index === 4) {
-            y1 =
+            y1 = point.y + (polygon.points[index - 2].y - polygon.points[index - 1].y) / 2
-              point.y +
-              (polygon.points[index - 2].y - polygon.points[index - 1].y) / 2
 
-            const subLine = new QLine(
+            const subLine = new QLine([point.x, centerPoint, polygon.points[2].x + 20, centerPoint], {
-              [point.x, centerPoint, polygon.points[2].x + 20, centerPoint],
-              {
               stroke: 'blue',
               strokeWidth: 2,
               selectable: false,
               fontSize: fontSize,
-              },
+            })
-            )
-            canvas.add(subLine)
 
             const subVerticalLine = new QLine(
               [
-                getCenterPoint(point.x, polygon.points[2].x + 20),
+                getCenterPoint(point.x, polygon.points[2].x + egde),
-                polygon.points[3].y - 50,
+                polygon.points[3].y - eaves,
-                getCenterPoint(point.x, polygon.points[2].x + 20),
+                getCenterPoint(point.x, polygon.points[2].x + egde),
                 centerPoint,
               ],
               {
@@ -1047,25 +1091,14 @@ export function useMode() {
           }
 
           if (index === 5) {
-            const centeredPoint = getCenterPoint(
+            const centeredPoint = getCenterPoint(polygon.points[0].x, polygon.points[5].x)
-              polygon.points[0].x,
+            const verticalSubLine = new QLine([centeredPoint, polygon.points[0].y - eaves, centeredPoint, polygon.points[1].y + eaves], {
-              polygon.points[5].x,
-            )
-            const verticalSubLine = new QLine(
-              [
-                centeredPoint,
-                polygon.points[0].y - 50,
-                centeredPoint,
-                polygon.points[1].y + 50,
-              ],
-              {
               stroke: 'black',
               strokeWidth: 2,
               strokeDashArray: [5, 5],
               selectable: false,
               fontSize: fontSize,
-              },
+            })
-            )
 
             canvas.add(verticalSubLine)
           }