슬라이더 컴포넌트 추가 및 페이지에 예제 추가
This commit is contained in:
yoosangwook
parent
364d32e349
commit
c102c0592f
@ -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
|
||||
|
||||
25
src/components/ui/RangeSlider.jsx
Normal file
25
src/components/ui/RangeSlider.jsx
Normal file
@ -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}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user