qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

default값 제거

Browse Source
This commit is contained in:
hyojun.choi 2024-06-24 20:11:40 +09:00
parent 0acf115396
commit 098fa9dc1f
2 changed files with 55 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/Roof2.jsx
View File

@ -16,56 +16,58 @@ export default function Roof2() {
return (
<>
<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`}
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>
</div>
{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`}
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>
</div>
)}
<div
className="flex justify-center"

6
src/hooks/useMode.js
View File

@ -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)