diff --git a/frontend/src/lib/components/HandwriteCanvas.svelte b/frontend/src/lib/components/HandwriteCanvas.svelte index ea0af62..0698719 100644 --- a/frontend/src/lib/components/HandwriteCanvas.svelte +++ b/frontend/src/lib/components/HandwriteCanvas.svelte @@ -117,20 +117,18 @@ redraw(); } - // ── render — 디버그 모드: stroke 빨강 + 굵게 + 좌상단 빨간 사각형 강제. - // 사용자 보고에 따라 격리: 빨간 사각형 보임 + 빨간 stroke 안 보임 → drawStroke 문제. - // 빨간 사각형도 안 보임 → redraw 미호출 / canvas 가려짐. + // ── render — 단순 ctx.stroke(). function drawStroke(ctx: CanvasRenderingContext2D, s: Stroke) { if (s.points.length === 0) return; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; - ctx.lineWidth = 12; // 디버그: 충분히 굵게 - ctx.strokeStyle = '#ff3333'; // 디버그: 빨강 강제 - ctx.fillStyle = '#ff3333'; + ctx.lineWidth = baseSize; + ctx.strokeStyle = strokeColor; + ctx.fillStyle = strokeColor; if (s.points.length === 1) { const [x, y] = s.points[0]; ctx.beginPath(); - ctx.arc(x, y, 6, 0, Math.PI * 2); + ctx.arc(x, y, baseSize / 2, 0, Math.PI * 2); ctx.fill(); return; } @@ -160,11 +158,6 @@ if (!ctx) return; ctx.clearRect(0, 0, cssWidth, cssHeight); drawTraceBackground(ctx); - - // 디버그: 좌상단 빨간 사각형 (50x50). 보이면 redraw + canvas 정상 동작. - ctx.fillStyle = '#ff0000'; - ctx.fillRect(10, 10, 50, 50); - for (const s of strokes) { drawStroke(ctx, s); } @@ -404,17 +397,19 @@ } }); + // initialStrokes 동기화는 onMount 한 번만 (위에서 이미 처리). $effect 사용 시 + // strokes 도 의존성으로 추적되어 사용자가 stroke 추가하는 순간 옛 initialStrokes 로 + // 되돌아가는 버그 발생 → 펜 떼면 새 stroke 사라짐. + // 부모가 prop 으로 새 initialStrokes 를 보내도 무시 (사용자 진행 stroke 우선). + + // traceText 변경 시만 redraw 트리거 (의존성 명시 access). + let _prevTraceText = $state(traceText); $effect(() => { - if (initialStrokes && initialStrokes.strokes !== strokes) { - strokes = initialStrokes.strokes; - undoStack = []; + if (traceText !== _prevTraceText) { + _prevTraceText = traceText; redraw(); } }); - $effect(() => { - void traceText; - redraw(); - });