default값 제거

src/components/Roof2.jsx

@@ -16,6 +16,7 @@ export default function Roof2() {
 
   return (
     <>
+      {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`}
@@ -33,7 +34,7 @@ export default function Roof2() {
             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`}
@@ -66,6 +67,7 @@ export default function Roof2() {
             clear
           </button>
         </div>
+      )}
 
       <div
         className="flex justify-center"

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)