From 098fa9dc1f5f9f3b753915dbfc1dd897788d40ec Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Mon, 24 Jun 2024 20:11:40 +0900
Subject: [PATCH] =?UTF-8?q?default=EA=B0=92=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx | 102 ++++++++++++++++++++-------------------
 src/hooks/useMode.js     |   6 +--
 2 files changed, 55 insertions(+), 53 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index f291409a..eac12568 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -16,56 +16,58 @@ export default function Roof2() {
 
   return (
     <>
-      <div className="flex justify-center my-8">
-        <button
-          className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
-          onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
-        >
-          기준선 긋기 모드
-        </button>
-        <button
-          className={`w-30 mx-2 p-2 rounded ${mode === Mode.EDIT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
-          onClick={() => changeMode(canvas, Mode.EDIT)}
-        >
-          에디팅모드
-        </button>
-        <button
-          className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
-          onClick={() => changeMode(canvas, Mode.TEMPLATE)}
-        >
-          템플릿모드
-        </button>
-        <button
-          className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
-          onClick={() => changeMode(canvas, Mode.TEXTBOX)}
-        >
-          텍스트박스 모드
-        </button>
-        <button
-          className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
-          onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
-        >
-          사각형 생성 모드
-        </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-          onClick={handleUndo}
-        >
-          Undo
-        </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-          onClick={handleRedo}
-        >
-          Redo
-        </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-          onClick={handleClear}
-        >
-          clear
-        </button>
-      </div>
+      {canvas && (
+        <div className="flex justify-center my-8">
+          <button
+            className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+            onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
+          >
+            기준선 긋기 모드
+          </button>
+          <button
+            className={`w-30 mx-2 p-2 rounded ${mode === Mode.EDIT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+            onClick={() => changeMode(canvas, Mode.EDIT)}
+          >
+            에디팅모드
+          </button>
+          <button
+            className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+            onClick={() => changeMode(canvas, Mode.TEMPLATE)}
+          >
+            템플릿
+          </button>
+          <button
+            className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+            onClick={() => changeMode(canvas, Mode.TEXTBOX)}
+          >
+            텍스트박스 모드
+          </button>
+          <button
+            className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+            onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
+          >
+            사각형 생성 모드
+          </button>
+          <button
+            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+            onClick={handleUndo}
+          >
+            Undo
+          </button>
+          <button
+            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+            onClick={handleRedo}
+          >
+            Redo
+          </button>
+          <button
+            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+            onClick={handleClear}
+          >
+            clear
+          </button>
+        </div>
+      )}
 
       <div
         className="flex justify-center"
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 8681b8f7..e7cf1a01 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -9,13 +9,13 @@ export const Mode = {
 }
 
 export function useMode() {
-  const [mode, setMode] = useState(Mode.EDIT)
+  const [mode, setMode] = useState()
   const points = useRef([])
   const historyPoints = useRef([])
   const historyLines = useRef([])
   const [canvas, setCanvas] = useState(null)
 
-  const addEvent = (mode = Mode.EDIT) => {
+  const addEvent = (mode) => {
     switch (mode) {
       case 'drawLine':
         drawLineMode()
@@ -35,7 +35,7 @@ export function useMode() {
     }
   }
 
-  const changeMode = (canvas, mode = Mode.EDIT) => {
+  const changeMode = (canvas, mode) => {
     setMode(mode)
     // mode변경 시 이전 이벤트 제거
     setCanvas(canvas)