From c102c0592ff06458794d7d9a2519acce16d3153a Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Tue, 2 Jul 2024 14:33:54 +0900
Subject: [PATCH] =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=8D=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EC=98=88?=
 =?UTF-8?q?=EC=A0=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx          | 253 ++++++++++++++++++------------
 src/components/ui/RangeSlider.jsx |  25 +++
 2 files changed, 174 insertions(+), 104 deletions(-)
 create mode 100644 src/components/ui/RangeSlider.jsx

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 9c783a77..98e3321a 100644
--- a/src/components/Roof2.jsx
+++ b/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,109 +84,146 @@ 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`}
-            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`}
-            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>
-          <button
-            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-            onClick={zoomIn}
-          >
-            확대
-          </button>
-          <button
-            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-            onClick={zoomOut}
-          >
-            축소
-          </button>
-          현재 줌 : {zoom}%
-          <button
-            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-            onClick={makeRect}
-          >
-            사각형만들기
-          </button>
-          <button
-            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-            onClick={makeLine}
-          >
-            선 추가
-          </button>
-          <button
-            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-            onClick={makePolygon}
-          >
-            다각형 추가
-          </button>
-          <button
-            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-            onClick={() => {
-              setCanvasBackgroundWithDots(canvas, 10)
-            }}
-          >
-            점선 추가
-          </button>
-          <button
-            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-            onClick={() => {
-              setCanvasBackgroundWithDots(canvas, 20)
-            }}
-          >
-            점선 추가
-          </button>
-        </div>
+        <>
+          <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`}
+              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`}
+              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>
+            <button
+              className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+              onClick={zoomIn}
+            >
+              확대
+            </button>
+            <button
+              className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+              onClick={zoomOut}
+            >
+              축소
+            </button>
+            현재 줌 : {zoom}%
+            <button
+              className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+              onClick={makeRect}
+            >
+              사각형만들기
+            </button>
+            <button
+              className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+              onClick={makeLine}
+            >
+              선 추가
+            </button>
+            <button
+              className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+              onClick={makePolygon}
+            >
+              다각형 추가
+            </button>
+            <button
+              className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+              onClick={() => {
+                setCanvasBackgroundWithDots(canvas, 10)
+              }}
+            >
+              점선 추가
+            </button>
+            <button
+              className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+              onClick={() => {
+                setCanvasBackgroundWithDots(canvas, 20)
+              }}
+            >
+              점선 추가
+            </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
diff --git a/src/components/ui/RangeSlider.jsx b/src/components/ui/RangeSlider.jsx
new file mode 100644
index 00000000..94f3bb57
--- /dev/null
+++ b/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}
+      />
+    </>
+  )
+}