From a4f470effba265c57ca35014a66e2bbdc774461d Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Mon, 27 Apr 2026 08:38:10 +0900
Subject: [PATCH] =?UTF-8?q?fix(study):=20canvas=20stroke=20=EC=83=89?=
 =?UTF-8?q?=EC=9D=84=20--text=20=ED=86=A0=ED=81=B0=EC=9C=BC=EB=A1=9C=20+?=
 =?UTF-8?q?=20simulatePressure=20true?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

문제: dark mode 에서 stroke #111 이 --bg #0f1117 와 거의 같아 안 보임 +
      Apple Pencil pressure 0 케이스 방어 부재.

수정:
- strokeColor 를 마운트 시 --text 토큰 실측 (e4e4e7 등) 으로 갱신
- simulatePressure true 로 변경 — 압력 0 으로 들어와도 속도 기반으로 굵기 보장
- thinning 0.55 → 0.5
---
 .../src/lib/components/HandwriteCanvas.svelte    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

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[]>([]); // 삭제된 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();