diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index d582e018..9587a7d2 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -282,14 +282,14 @@ export default function Roof2() {
             <Button
               className="m-1 p-2"
               color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
-              onClick={() => {}}
+              onClick={() => changeMode(canvas, Mode.PATTERNA)}
             >
               템플릿(A 패턴)
             </Button>
             <Button
               className="m-1 p-2"
               color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
-              onClick={applyTemplateB}
+              onClick={() => changeMode(canvas, Mode.PATTERNB)}
             >
               템플릿(B 패턴)
             </Button>
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index bc6cc381..91380be4 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -6,8 +6,6 @@ import {
   rearrangeArray,
   findTopTwoIndexesByDistance,
   getDirection,
-  getOddEvenPoints,
-  findLongestDistancePair,
   getCenterPoint,
 } from '@/util/canvas-util'
 import { useRecoilState, useSetRecoilState } from 'recoil'
@@ -23,6 +21,8 @@ export const Mode = {
   DRAW_LINE: 'drawLine', // 기준선 긋기모드
   EDIT: 'edit',
   TEMPLATE: 'template',
+  PATTERNA: 'patterna',
+  PATTERNB: 'patternb',
   TEXTBOX: 'textbox',
   DRAW_RECT: 'drawRect',
   DEFAULT: 'default',
@@ -55,6 +55,11 @@ export function useMode() {
       case 'template':
         templateMode()
         break
+      case 'patterna':
+        break
+      case 'patternb':
+        applyTemplateB()
+        break
       case 'textbox':
         textboxMode()
         break
@@ -1095,6 +1100,5 @@ export function useMode() {
     zoom,
     togglePolygonLine,
     handleOuterlinesTest2,
-    applyTemplateB,
   }
 }