슬라이더 컴포넌트 추가 및 페이지에 예제 추가

src/components/Roof2.jsx

@@ -1,14 +1,22 @@
 import { useCanvas } from '@/hooks/useCanvas'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Mode, useMode } from '@/hooks/useMode'
 import QRect from '@/components/fabric/QRect'
 import QLine from '@/components/fabric/QLine'
 import QPolygon from '@/components/fabric/QPolygon'
+import RangeSlider from './ui/RangeSlider'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots } =
     useCanvas('canvas')
 
+  //canvas 가로 사이즈
+  const [verticalSize, setVerticalSize] = useState(0)
+  //canvas 세로 사이즈
+  const [horizontalSize, setHorizontalSize] = useState(0)
+  // 글자크기
+  const [fontSize, setFontSize] = useState(0)
+
   const {
     mode,
     changeMode,
@@ -76,39 +84,52 @@ export default function Roof2() {
   return (
     <>
       {canvas && (
+        <>
           <div className="flex justify-center my-8">
             <button
-            className={`w-30 mx-2 p-2 rounded ${mode === Mode.DEFAULT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+              className={`w-30 mx-2 p-2 rounded ${
+                mode === Mode.DEFAULT ? 'bg-blue-500' : 'bg-gray-500'
+              } text-white`}
               onClick={() => changeMode(canvas, Mode.DEFAULT)}
             >
               모드 DEFAULT
             </button>
             <button
-            className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+              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`}
+              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`}
+              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`}
+              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`}
+              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)}
             >
               사각형 생성 모드
@@ -179,6 +200,30 @@ export default function Roof2() {
               점선 추가
             </button>
           </div>
+          <div className="flex justify-center flex-col items-center">
+            <div className="m-2 p-2 w-80">
+              <RangeSlider
+                title="canvas 가로 사이즈"
+                initValue={verticalSize}
+                onchange={setVerticalSize}
+              />
+            </div>
+            <div className="m-2 p-2 w-80">
+              <RangeSlider
+                title="canvas 세로 사이즈"
+                initValue={horizontalSize}
+                onchange={setHorizontalSize}
+              />
+            </div>
+            <div className="m-2 p-2 w-80">
+              <RangeSlider
+                title="글자 크기"
+                initValue={fontSize}
+                onchange={setFontSize}
+              />
+            </div>
+          </div>
+        </>
       )}
 
       <div

src/components/ui/RangeSlider.jsx

@@ -0,0 +1,25 @@
+export default function RangeSlider(
+  props = { title: 'default title', initValue: 0, onchange: () => {} },
+) {
+  const { title, initValue, onchange } = props
+
+  const handleChange = (e) => {
+    console.log(e.target.value)
+    onchange(e.target.value)
+  }
+
+  return (
+    <>
+      <label htmlFor="default-range" className="block mb-2 text-gray-900">
+        {title}
+      </label>
+      <input
+        id="default-range"
+        type="range"
+        value={initValue}
+        className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+        onChange={handleChange}
+      />
+    </>
+  )
+}