diff --git a/frontend/src/lib/components/HandwriteCanvas.svelte b/frontend/src/lib/components/HandwriteCanvas.svelte index 8314ca6..2081119 100644 --- a/frontend/src/lib/components/HandwriteCanvas.svelte +++ b/frontend/src/lib/components/HandwriteCanvas.svelte @@ -61,6 +61,7 @@ let undoStack = $state([]); // 삭제된 stroke 들 (redo 용) let inflight: Stroke | null = $state(null); // 진행 중 stroke (포인터 떼기 전) let activePointerId: number | null = null; + let strokeColor = $state('#e4e4e7'); // 기본은 dark mode 의 --text. 마운트 시 실측으로 갱신 let isDirty = $state(false); let saveTimer: number | null = null; @@ -111,10 +112,12 @@ function strokeToPath(stroke: Stroke): Path2D { const outlinePoints = getStroke(stroke.points, { size: baseSize, - thinning: 0.55, + thinning: 0.5, smoothing: 0.5, streamline: 0.4, - simulatePressure: false, // 실제 압력 사용 + // 압력이 0 으로 들어오는 케이스(빠른 펜 입력 / 일부 Safari 빌드) 방어 — 속도 기반 시뮬레이션. + // 실제 Pencil 압력은 무시되지만 사용 일관성이 더 중요. + simulatePressure: true, last: stroke !== inflight, // 진행 중 stroke 면 false → 끝점 둥글게 마감 안 함 }); const path = new Path2D(); @@ -146,7 +149,7 @@ if (!ctx) return; ctx.clearRect(0, 0, cssWidth, cssHeight); drawTraceBackground(ctx); - ctx.fillStyle = '#111111'; + ctx.fillStyle = strokeColor; for (const stroke of strokes) { ctx.fill(strokeToPath(stroke)); } @@ -293,6 +296,13 @@ // ── 마운트 ── let resizeObserver: ResizeObserver | null = null; onMount(() => { + // --text 토큰을 실측해서 stroke 색에 반영. dark/light 모두 자동 대응. + try { + const txt = getComputedStyle(document.documentElement).getPropertyValue('--text').trim(); + if (txt) strokeColor = txt; + } catch { + // SSR / 비표준 환경 — fallback 유지 + } resizeCanvas(); restoreFromLocalStorageIfNewer(); redraw();