diff --git a/src/app/500.js b/src/app/error.jsx
similarity index 97%
rename from src/app/500.js
rename to src/app/error.jsx
index 654b605a..07d75e7e 100644
--- a/src/app/500.js
+++ b/src/app/error.jsx
@@ -1,3 +1,5 @@
+'use client'
+
 export default function ServerError() {
   return (
     <section className="bg-white dark:bg-gray-900">
diff --git a/src/app/404.js b/src/app/not-found.jsx
similarity index 98%
rename from src/app/404.js
rename to src/app/not-found.jsx
index 8aa5e9bc..8127943b 100644
--- a/src/app/404.js
+++ b/src/app/not-found.jsx
@@ -1,3 +1,5 @@
+'use client'
+
 import Link from 'next/link'
 
 export default function NotFound() {
diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index e384901e..e3009432 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -35,6 +35,7 @@ export default function Roof2() {
 
   const {
     mode,
+    setMode,
     changeMode,
     handleClear,
     fillCellInPolygon,
@@ -108,28 +109,24 @@ export default function Roof2() {
     }
   }
 
-  /**
-   * canvas 사이즈 변경 함수
-   */
-  const canvasSizeMode = () => {
-    if (canvas) {
-      canvas.setWidth(horizontalSize)
-      canvas.setHeight(verticalSize)
-      canvas.renderAll()
-
-      setCanvasSize(() => ({
-        vertical: verticalSize,
-        horizontal: horizontalSize,
-      }))
-    }
-  }
+  useEffect(() => {
+    setCanvasSize({ ...canvasSize, vertical: parseInt(verticalSize), horizontal: parseInt(horizontalSize) })
+  }, [verticalSize, horizontalSize])
 
   /**
    * 값 변경시
    */
+  // useEffect(() => {
+  //   canvasSizeMode()
+  // }, [verticalSize, horizontalSize])
   useEffect(() => {
-    canvasSizeMode()
-  }, [verticalSize, horizontalSize])
+    const { vertical, horizontal } = canvasSize
+    if (vertical !== verticalSize || horizontal !== horizontalSize) {
+      canvas?.setWidth(horizontalSize)
+      canvas?.setHeight(verticalSize)
+      canvas?.renderAll()
+    }
+  }, [canvasSize, canvas])
 
   const makeQPolygon = () => {
     const type1 = [
@@ -391,23 +388,19 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`} onClick={fillCellInPolygon}>
               모드 DEFAULT
             </Button>
-            <Button
-              className="m-1 p-2"
-              color={`${mode === Mode.DRAW_LINE ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
-            >
+            <Button className="m-1 p-2" color={`${mode === Mode.DRAW_LINE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DRAW_LINE)}>
               기준선 긋기 모드
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.EDIT ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.EDIT)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.EDIT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.EDIT)}>
               에디팅모드
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEMPLATE)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEMPLATE)}>
               템플릿(기둥)
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNA)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.PATTERNA)}>
               템플릿(A 패턴)
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNB)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.PATTERNB)}>
               템플릿(B 패턴)
             </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(1)}>
@@ -416,21 +409,16 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(2)}>
               지붕패턴2
             </Button>
-            <Button
-              className="m-1 p-2"
-              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.ROOT_TRESTLE)}
-            >
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.ROOF_TRESTLE)}>
               지붕가대생성
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.FILL_CELLS)}>
+              태양광셀생성
+            </Button>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEXTBOX)}>
               텍스트박스 모드
             </Button>
-            <Button
-              className="m-1 p-2"
-              color={`${mode === Mode.DRAW_RECT ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
-            >
+            <Button className="m-1 p-2" color={`${mode === Mode.DRAW_RECT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DRAW_RECT)}>
               사각형 생성 모드
             </Button>
             <Button className="m-1 p-2" onClick={handleUndo}>
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index c178714a..1817862a 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -181,6 +181,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   },
   fillCell(cell = { width: 50, height: 100, padding: 10 }) {
     const points = this.points
+
     const minX = Math.min(...points.map((p) => p.x))
     const maxX = Math.max(...points.map((p) => p.x))
     const minY = Math.min(...points.map((p) => p.y))
@@ -195,10 +196,15 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     const cols = Math.floor((boundingBoxWidth + cell.padding) / (rectWidth + cell.padding))
     const rows = Math.floor((boundingBoxHeight + cell.padding) / (rectHeight + cell.padding))
 
+    //전체 높이에서 패딩을 포함하고 rows를 곱해서 여백길이를 계산 후에 2로 나누면 반높이를 넣어서 중간으로 정렬
+    const tmpHeight = (boundingBoxHeight - (rectHeight + cell.padding) * rows) / 2
+    //센터 정렬시에 쓴다 체크박스가 존재함 TODO: if문 추가해서 정렬해야함
+    let tmpWidth = (boundingBoxWidth - (rectWidth + cell.padding) * cols) / 2
+
     for (let i = 0; i < cols; i++) {
       for (let j = 0; j < rows; j++) {
-        const rectLeft = minX + i * (rectWidth + cell.padding)
-        const rectTop = minY + j * (rectHeight + cell.padding)
+        const rectLeft = minX + i * (rectWidth + cell.padding) + tmpWidth
+        const rectTop = minY + j * (rectHeight + cell.padding) + tmpHeight
 
         const rectPoints = [
           { x: rectLeft, y: rectTop },
@@ -216,7 +222,12 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
             width: rectWidth,
             height: rectHeight,
             fill: '#BFFD9F',
-            selectable: false,
+            selectable: true, // 선택 가능하게 설정
+            lockMovementX: true, // X 축 이동 잠금
+            lockMovementY: true, // Y 축 이동 잠금
+            lockRotation: true, // 회전 잠금
+            lockScalingX: true, // X 축 크기 조정 잠금
+            lockScalingY: true, // Y 축 크기 조정 잠금
             opacity: 0.6,
           })
 
@@ -224,8 +235,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         }
       }
     }
-
-    this.canvas.renderAll()
+    this.canvas?.renderAll()
   },
   inPolygon(point) {
     const vertices = this.getCurrentPoints()
diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index dee2983b..c1ba723a 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -42,18 +42,18 @@ export function useCanvas(id) {
   useEffect(() => {
     canvas
       ?.getObjects()
-      .filter((obj) => obj.type === 'textbox' || obj.type === 'text' || obj.type === 'i-text')
+      ?.filter((obj) => obj.type === 'textbox' || obj.type === 'text' || obj.type === 'i-text')
       .forEach((obj) => {
         obj.set({ fontSize: fontSize })
       })
 
     canvas
       ?.getObjects()
-      .filter((obj) => obj.type === 'QLine' || obj.type === 'QPolygon' || obj.type === 'QRect')
+      ?.filter((obj) => obj.type === 'QLine' || obj.type === 'QPolygon' || obj.type === 'QRect')
       .forEach((obj) => {
         obj.setFontSize(fontSize)
       })
-    canvas?.renderAll()
+    canvas?.getObjects().length > 0 && canvas?.renderAll()
   }, [fontSize])
 
   /**
@@ -103,7 +103,7 @@ export function useCanvas(id) {
   }
 
   const initialize = () => {
-    canvas?.clear()
+    canvas.getObjects().length > 0 && canvas?.clear()
     // settings for all canvas in the app
     fabric.Object.prototype.transparentCorners = false
     fabric.Object.prototype.cornerColor = '#2BEBC8'
@@ -121,6 +121,7 @@ export function useCanvas(id) {
         delete instance.points
         callback && callback(instance)
       }
+
       const options = fabric.util.object.clone(object, true)
       options.points = [object.x1, object.y1, object.x2, object.y2]
 
@@ -526,7 +527,7 @@ export function useCanvas(id) {
       }
     }
 
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   const setCanvasBackgroundWithDots = (canvas, gap) => {
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 932ec2cd..4533d7a2 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -27,7 +27,8 @@ export const Mode = {
   DRAW_RECT: 'drawRect',
   ROOF_PATTERN: 'roofPattern',
   MODULE: 'module',
-  ROOT_TRESTLE: 'rootTrestle',
+  ROOF_TRESTLE: 'roofTrestle',
+  FILL_CELLS: 'fillCells',
   DEFAULT: 'default',
 }
 
@@ -55,6 +56,8 @@ export function useMode() {
 
   const [canvasSize] = useRecoilState(canvasSizeState)
 
+  const [selectedCellRoofArray, setSelectedCellRoofArray] = useState([])
+
   useEffect(() => {
     // 이벤트 리스너 추가
     if (!canvas) {
@@ -211,9 +214,6 @@ export function useMode() {
 
   const addEvent = (mode) => {
     switch (mode) {
-      case 'default':
-        canvas?.off('mouse:down')
-        break
       case 'drawLine':
         drawLineMode()
         break
@@ -238,9 +238,15 @@ export function useMode() {
       case 'roofPattern':
         makeRoofPatternPolygon()
         break
-      case 'rootTrestle':
+      case 'roofTrestle':
         makeRoofTrestle()
         break
+      case 'fillCells':
+        makeRoofFillCells()
+        break
+      case 'default':
+        canvas?.off('mouse:down')
+        break
     }
   }
 
@@ -321,7 +327,7 @@ export function useMode() {
 
     points.current = [endPointCircle]
 
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   const handleKeyDown = (e) => {
@@ -706,7 +712,7 @@ export function useMode() {
     // 캔버스를 다시 그립니다.
     if (!otherLines) {
       // polygon.fillCell()
-      canvas.renderAll()
+      canvas?.renderAll()
       // polygon.setViewLengthText(false)
       setMode(Mode.DEFAULT)
     }
@@ -1188,7 +1194,7 @@ export function useMode() {
         rtnLines.push(line)
       })
 
-      canvas.renderAll()
+      canvas?.renderAll()
     }
     if (obj.type === 'QLine') {
       const parent = obj.parent
@@ -1201,7 +1207,7 @@ export function useMode() {
         })
 
       parent.visible = true
-      canvas.renderAll()
+      canvas?.renderAll()
     }
     return rtnLines
   }
@@ -2037,7 +2043,7 @@ export function useMode() {
     roofPatternPolygonArray.push(smallRoofPolygon) //작은지붕폴리곤
     setRoofPolygonPattern({ roofPatternPolygonArray, lines }) //모든 행을 저장
 
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   const handleOuterLineTemplateA8Points = (polygon, offsetInputX = 20, offsetInputY = 50) => {
@@ -2640,7 +2646,7 @@ export function useMode() {
       }
       setRoofPolygonPattern({ roofPatternPolygonArray, lines })
     }
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   /**
@@ -2751,7 +2757,7 @@ export function useMode() {
       setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines })
     }
 
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   /**
@@ -3088,7 +3094,7 @@ export function useMode() {
     setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines })
     // }
 
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   /**
@@ -3166,7 +3172,7 @@ export function useMode() {
       })
       canvas.add(overLine)
     })
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   const makeRoofPatternPolygon = (roofStyle) => {
@@ -3184,27 +3190,41 @@ export function useMode() {
 
     var ratio = window.devicePixelRatio || 1
 
+    let inputPatternSize = { width: 30, height: 20 } //임시 사이즈
+    let patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
+
+    if (templateType === 2) {
+      //세로형이면 width height를 바꿈
+      ;[patternSize.width, patternSize.height] = [inputPatternSize.height, patternSize.width]
+    }
+
     // 패턴 소스를 위한 임시 캔버스 생성
     const patternSourceCanvas = document.createElement('canvas')
-    patternSourceCanvas.width = 30 * ratio
-    patternSourceCanvas.height = 30 * ratio
+    patternSourceCanvas.width = roofStyle === 2 ? patternSize.width * 2 * ratio : patternSize.width * ratio
+    patternSourceCanvas.height = roofStyle === 2 ? patternSize.height * 2 * ratio : patternSize.height * ratio
     const ctx = patternSourceCanvas.getContext('2d')
 
     // 벽돌 패턴 그리기
     ctx.scale(ratio, ratio)
     ctx.strokeStyle = 'green'
-    ctx.lineWidth = 0.2
+    ctx.lineWidth = 0.4
 
     // 첫 번째 행 벽돌
     if (roofStyle === 2) {
+      patternSize.width = patternSize.width * 2
+      patternSize.height = patternSize.height * 2
+
       //지그재그
       // // 두 번째 행 벽돌
-      ctx.strokeRect(0, 0, 30, 15)
-      ctx.strokeRect(30, 15, 30, 15)
-      ctx.strokeRect(-15, 15, 30, 15)
-      ctx.strokeRect(0, 30, 30, 15)
+      if (templateType === 2) {
+        ctx.strokeRect(0, 0, patternSize.width / 2, patternSize.height)
+        ctx.strokeRect(patternSize.width / 2, patternSize.height / 2, patternSize.width / 2, patternSize.height)
+      } else if (templateType === 3) {
+        ctx.strokeRect(0, 0, patternSize.width, patternSize.height / 2)
+        ctx.strokeRect(patternSize.width / 2, patternSize.height / 2, patternSize.width, patternSize.height / 2)
+      }
     } else {
-      ctx.strokeRect(0, 0, 30, 30) // 원패턴일때랑 지그재그일때랑은 다르게 들어가야함
+      ctx.strokeRect(0, 0, patternSize.width, patternSize.height) // 원패턴일때랑 지그재그일때랑은 다르게 들어가야함
     }
 
     // 패턴 생성
@@ -3215,8 +3235,13 @@ export function useMode() {
 
     const commonOption = {
       fill: pattern,
-      selectable: true,
+      selectable: false,
       fontSize: 15, // fontSize는 필요에 따라 조정
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingY: true,
+      lockScalingX: true,
     }
 
     let polygonArray = []
@@ -3225,9 +3250,10 @@ export function useMode() {
       const drawPolygon = new QPolygon(patternPolygon, commonOption)
       canvas.add(drawPolygon)
       drawPolygon.setViewLengthText(false)
+      drawPolygon.set('customIndex', index)
       polygonArray.push(drawPolygon)
     })
-    canvas.renderAll()
+    canvas?.renderAll()
 
     setRoofPolygonArray(polygonArray)
   }
@@ -3238,19 +3264,92 @@ export function useMode() {
       return
     }
 
-    // 오목한 부분 인덱스 찾기
-    const polygons = roofPolygonArray
-    let concavePolygonObj = []
+    const polygons = roofPolygonArray //리코일에 있는 패턴그린 폴리곤가져옴
+    let selectedAreaArray = []
+
+    const defualtStrokeStyle = {
+      stroke: 'red',
+      strokeDashArray: [9, 5],
+      strokeWidth: 0.3,
+    }
+
+    const selectedStrokeStyle = {
+      stroke: 'red',
+      strokeWidth: 3,
+    }
+
+    function toggleSelection(polygon) {
+      if (polygon.strokeWidth === defualtStrokeStyle.strokeWidth) {
+        polygon.set({
+          stroke: selectedStrokeStyle.stroke,
+          strokeWidth: selectedStrokeStyle.strokeWidth,
+          strokeDashArray: [0],
+        })
+        canvas.discardActiveObject() // 객체의 활성 상태 해제
+        selectedAreaArray.push(polygon)
+      } else {
+        polygon.set({
+          stroke: defualtStrokeStyle.stroke,
+          strokeWidth: defualtStrokeStyle.strokeWidth,
+          strokeDashArray: defualtStrokeStyle.strokeDashArray,
+        })
+        canvas.discardActiveObject() // 객체의 활성 상태 해제
+
+        const removeIndex = polygon.customIndex
+        const removeArrayIndex = selectedAreaArray.findIndex((x) => x.customIndex === removeIndex)
+        selectedAreaArray.splice(removeArrayIndex, 1)
+      }
+      canvas?.renderAll()
+    }
 
     polygons.forEach((polygon, index) => {
       const trestlePolygon = handleOuterlinesTest(polygon, -12)
-      trestlePolygon.set('stroke', 'red').set('strokeDashArray', [9, 5]).set('strokeWidth', 0.3).setViewLengthText(false)
-      trestlePolygon.fillCell({ width: 100, height: 30, padding: 10 })
+      trestlePolygon.setViewLengthText(false) //얘는 set으로 안먹는다...
+      trestlePolygon.set({
+        stroke: 'red',
+        strokeDashArray: [9, 5],
+        strokeWidth: 0.3,
+        lockMovementX: true,
+        lockMovementY: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+        bringToFront: true,
+        customIndex: polygon.customIndex,
+      })
+
+      trestlePolygon.on('mousedown', function () {
+        const customIndex = polygon.get('customIndex')
+        toggleSelection(trestlePolygon)
+      })
     })
+    setSelectedCellRoofArray(selectedAreaArray)
+  }
+
+  const makeRoofFillCells = () => {
+    // const selectedCellRoofs = selectedCellRoofArray
+    if (selectedCellRoofArray.length === 0) {
+      alert('선택된 영역이 없습니다.')
+      setMode(Mode.DEFAULT) //default 모드로 변경
+      return
+    }
+
+    const inputCellSize = { width: 172, height: 113 }
+    const cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고
+
+    if (templateType === 2) {
+      ;[cellSize.width, cellSize.height] = [cellSize.height, cellSize.width]
+    }
+
+    selectedCellRoofArray.forEach((polygon, index) => {
+      polygon.fillCell({ width: cellSize.width, height: cellSize.height, padding: 10 })
+    })
+    setMode(Mode.DEFAULT) //default 모드로 변경
   }
 
   return {
     mode,
+    setMode,
     changeMode,
     setCanvas,
     handleClear,