RangeSlider props 추가

RangeSlider props 추가

src/components/Roof2.jsx

@@ -11,9 +11,9 @@ export default function Roof2() {
     useCanvas('canvas')
 
   //canvas 가로 사이즈
-  const [verticalSize, setVerticalSize] = useState(0)
+  const [verticalSize, setVerticalSize] = useState(1000)
   //canvas 세로 사이즈
-  const [horizontalSize, setHorizontalSize] = useState(0)
+  const [horizontalSize, setHorizontalSize] = useState(1000)
   // 글자크기
   const [fontSize, setFontSize] = useState(0)
 
@@ -81,6 +81,18 @@ export default function Roof2() {
     }
   }
 
+  const canvasSizeMode = () => {
+    if(canvas) {
+      canvas.setWidth(parseInt(verticalSize));
+      canvas.setHeight(parseInt(horizontalSize));
+      canvas.renderAll();
+    }
+  }
+
+  useEffect(() => {
+    canvasSizeMode()
+  }, [verticalSize, horizontalSize])
+
   return (
     <>
       {canvas && (
@@ -205,6 +217,8 @@ export default function Roof2() {
               <RangeSlider
                 title="canvas 가로 사이즈"
                 initValue={verticalSize}
+                step="100"
+                max="2000"
                 onchange={setVerticalSize}
               />
             </div>
@@ -212,6 +226,8 @@ export default function Roof2() {
               <RangeSlider
                 title="canvas 세로 사이즈"
                 initValue={horizontalSize}
+                step="100"
+                max="2000"
                 onchange={setHorizontalSize}
               />
             </div>
@@ -225,17 +241,8 @@ export default function Roof2() {
           </div>
         </>
       )}
-
+      <div className="flex justify-center my-8">
-      <div
+        <canvas id="canvas" style={{border:'1px solid black'}}/>
-        className="flex justify-center"
-        style={{
-          border: '1px solid',
-          width: 1000,
-          height: 1000,
-          margin: 'auto',
-        }}
-      >
-        <canvas id="canvas" />
       </div>
     </>
   )

src/components/ui/RangeSlider.jsx

@@ -1,7 +1,7 @@
 export default function RangeSlider(
-  props = { title: 'default title', initValue: 0, onchange: () => {} },
+  props = { title: 'default title', initValue: 0, onchange: () => {}, step: 1, min:0, max:100},
 ) {
-  const { title, initValue, onchange } = props
+  const { title, initValue, onchange, step, min, max } = props
 
   const handleChange = (e) => {
     console.log(e.target.value)
@@ -17,6 +17,9 @@ export default function RangeSlider(
         id="default-range"
         type="range"
         value={initValue}
+        min={min}
+        max={max}
+        step={step}
         className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
         onChange={handleChange}
       />