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 ( return (
<> <>
<div className="flex justify-center my-8"> {canvas && (
<button <div className="flex justify-center my-8">
className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'} text-white`} <button
onClick={() => changeMode(canvas, Mode.DRAW_LINE)} 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 </button>
className={`w-30 mx-2 p-2 rounded ${mode === Mode.EDIT ? 'bg-blue-500' : 'bg-gray-500'} text-white`} <button
onClick={() => changeMode(canvas, Mode.EDIT)} 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 </button>
className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'} text-white`} <button
onClick={() => changeMode(canvas, Mode.TEMPLATE)} 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 </button>
className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'} text-white`} <button
onClick={() => changeMode(canvas, Mode.TEXTBOX)} 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 </button>
className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500'} text-white`} <button
onClick={() => changeMode(canvas, Mode.DRAW_RECT)} 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 </button>
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" <button
onClick={handleUndo} className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
> onClick={handleUndo}
Undo >
</button> Undo
<button </button>
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" <button
onClick={handleRedo} className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
> onClick={handleRedo}
Redo >
</button> Redo
<button </button>
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" <button
onClick={handleClear} className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
> onClick={handleClear}
clear >
</button> clear
</div> </button>
</div>
)}
<div <div
className="flex justify-center" className="flex justify-center"

6
src/hooks/useMode.js
View File

@ -9,13 +9,13 @@ export const Mode = {
} }
export function useMode() { export function useMode() {
const [mode, setMode] = useState(Mode.EDIT) const [mode, setMode] = useState()
const points = useRef([]) const points = useRef([])
const historyPoints = useRef([]) const historyPoints = useRef([])
const historyLines = useRef([]) const historyLines = useRef([])
const [canvas, setCanvas] = useState(null) const [canvas, setCanvas] = useState(null)
const addEvent = (mode = Mode.EDIT) => { const addEvent = (mode) => {
switch (mode) { switch (mode) {
case 'drawLine': case 'drawLine':
drawLineMode() drawLineMode()
@ -35,7 +35,7 @@ export function useMode() {
} }
} }
const changeMode = (canvas, mode = Mode.EDIT) => { const changeMode = (canvas, mode) => {
setMode(mode) setMode(mode)
// mode변경 시 이전 이벤트 제거 // mode변경 시 이전 이벤트 제거
setCanvas(canvas) setCanvas(canvas)