From b45091c8cbb116751ab2d21f27a42547e9edd7ad Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Mon, 27 Apr 2026 13:14:01 +0900
Subject: [PATCH] =?UTF-8?q?fix(study):=20=ED=8E=9C/=EC=A7=80=EC=9A=B0?=
 =?UTF-8?q?=EA=B0=9C=20=EB=B2=84=ED=8A=BC=20focus=20zoom=20=E2=80=94=20mou?=
 =?UTF-8?q?sedown/pointerdown=20=EB=8B=A8=EA=B3=84=20=EC=B0=A8=EB=8B=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

사용자 보고: "펜이나 지우개를 누르면 자동으로 해당 부분 확대". iOS Safari 의 button
focus 가 mousedown/pointerdown 단계에 발동 → 그 영역으로 자동 zoom in. click 시점의
clickThenBlur 는 이미 늦음 (focus 잡힌 후 blur 시켜도 zoom 유지).

Fix: 모든 toolbar / header button 에 onmousedown={preventDefault} +
onpointerdown={preventDefault} 추가. focus 자체가 안 잡혀서 zoom trigger 없음.
click 이벤트는 별도라 onclick 정상 작동. clickThenBlur 는 잔존 케이스 2차 안전망으로 유지.

대상 buttons:
- HandwriteCanvas toolbar: 펜 / 지우개 / 가늘게/보통/굵게 / Undo/Redo/Trash / PNG 저장
- [id]/+page 헤더: 패널 토글 / 다음 시도

IconButton.svelte Props 에 onmousedown/onpointerdown prop 명시 추가 (기존
{...rest} spread 가 button element 로 전달은 됐지만 TypeScript caller 측 type
narrow).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/HandwriteCanvas.svelte | 23 +++++++++++++++----
 .../src/lib/components/ui/IconButton.svelte   |  2 ++
 .../src/routes/study/write/[id]/+page.svelte  | 10 +++++++-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/HandwriteCanvas.svelte b/frontend/src/lib/components/HandwriteCanvas.svelte
index 04ddbe3..ac96127 100644
--- a/frontend/src/lib/components/HandwriteCanvas.svelte
+++ b/frontend/src/lib/components/HandwriteCanvas.svelte
@@ -642,7 +642,14 @@
     'touch-action: manipulation; user-select: none; -webkit-user-select: none; ' +
     '-webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;';
 
-  // button click 직후 즉시 blur — focus 시 발생하는 자동 zoom in 차단.
+  // iOS Safari 의 button focus 는 mousedown/pointerdown 단계에 발동 → 그 영역으로
+  // 자동 zoom (사용자 보고: "펜/지우개 누르면 해당 부분 확대"). click 시점의
+  // clickThenBlur 는 이미 늦음 — focus 가 잡히는 시점이 mousedown 이라 그 단계에서
+  // preventDefault 해야 focus 자체가 안 잡힘. click 이벤트는 별도라 onclick 정상.
+  function blockBtnFocus(e: Event) { e.preventDefault(); }
+
+  // (clickThenBlur 는 잔존 케이스 안전망으로 유지 — focus 가 어떻게든 잡힌
+  // 케이스에서 즉시 blur. mousedown 차단이 1차, blur 가 2차.)
   function clickThenBlur(fn: () => void) {
     return (e: Event) => {
       const t = e?.currentTarget as HTMLElement | null;
@@ -660,6 +667,8 @@
   >
     <button
       type="button"
+      onmousedown={blockBtnFocus}
+      onpointerdown={blockBtnFocus}
       onclick={clickThenBlur(() => (tool = 'pen'))}
       style={BTN_STYLE}
       tabindex={-1}
@@ -671,6 +680,8 @@
     </button>
     <button
       type="button"
+      onmousedown={blockBtnFocus}
+      onpointerdown={blockBtnFocus}
       onclick={clickThenBlur(() => (tool = 'eraser'))}
       style={BTN_STYLE}
       tabindex={-1}
@@ -686,6 +697,8 @@
     {#each [['thin', '가늘게'], ['normal', '보통'], ['thick', '굵게']] as [w, label]}
       <button
         type="button"
+        onmousedown={blockBtnFocus}
+        onpointerdown={blockBtnFocus}
         onclick={clickThenBlur(() => (widthMode = w))}
         style={BTN_STYLE}
         tabindex={-1}
@@ -697,9 +710,9 @@
 
     <span class="w-px h-5 bg-default mx-1" aria-hidden></span>
 
-    <IconButton icon={Undo2} size="sm" aria-label="실행 취소" onclick={clickThenBlur(undo)} disabled={strokes.length === 0} style={BTN_STYLE} tabindex={-1} />
-    <IconButton icon={Redo2} size="sm" aria-label="다시 실행" onclick={clickThenBlur(redo)} disabled={undoStack.length === 0} style={BTN_STYLE} tabindex={-1} />
-    <IconButton icon={Trash2} size="sm" aria-label="모두 지우기" onclick={clickThenBlur(clearAll)} disabled={strokes.length === 0} style={BTN_STYLE} tabindex={-1} />
+    <IconButton icon={Undo2} size="sm" aria-label="실행 취소" onclick={clickThenBlur(undo)} disabled={strokes.length === 0} style={BTN_STYLE} tabindex={-1} onmousedown={blockBtnFocus} onpointerdown={blockBtnFocus} />
+    <IconButton icon={Redo2} size="sm" aria-label="다시 실행" onclick={clickThenBlur(redo)} disabled={undoStack.length === 0} style={BTN_STYLE} tabindex={-1} onmousedown={blockBtnFocus} onpointerdown={blockBtnFocus} />
+    <IconButton icon={Trash2} size="sm" aria-label="모두 지우기" onclick={clickThenBlur(clearAll)} disabled={strokes.length === 0} style={BTN_STYLE} tabindex={-1} onmousedown={blockBtnFocus} onpointerdown={blockBtnFocus} />
 
     <span class="text-xs text-dim ml-2">stroke {strokes.length}</span>
     <div class="flex-1"></div>
@@ -708,6 +721,8 @@
     {/if}
     <button
       type="button"
+      onmousedown={blockBtnFocus}
+      onpointerdown={blockBtnFocus}
       onclick={clickThenBlur(takeSnapshot)}
       disabled={snapshotting || strokes.length === 0}
       style={BTN_STYLE}
diff --git a/frontend/src/lib/components/ui/IconButton.svelte b/frontend/src/lib/components/ui/IconButton.svelte
index 3bcfc1b..317e701 100644
--- a/frontend/src/lib/components/ui/IconButton.svelte
+++ b/frontend/src/lib/components/ui/IconButton.svelte
@@ -21,6 +21,8 @@
     href?: string;
     target?: string;
     onclick?: (e: MouseEvent) => void;
+    onmousedown?: (e: MouseEvent) => void;
+    onpointerdown?: (e: PointerEvent) => void;
     class?: string;
   }
 
diff --git a/frontend/src/routes/study/write/[id]/+page.svelte b/frontend/src/routes/study/write/[id]/+page.svelte
index f2ee1ae..6dcc47b 100644
--- a/frontend/src/routes/study/write/[id]/+page.svelte
+++ b/frontend/src/routes/study/write/[id]/+page.svelte
@@ -56,7 +56,7 @@
     'touch-action: manipulation; user-select: none; -webkit-user-select: none; ' +
     '-webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;';
 
-  // button click 직후 즉시 blur — iPad/Chrome 의 button focus zoom 차단.
+  // button click 직후 즉시 blur — iPad/Chrome 의 button focus zoom 의 2차 안전망.
   function clickThenBlur(fn) {
     return (e) => {
       const target = e?.currentTarget;
@@ -64,6 +64,10 @@
       fn();
     };
   }
+  // iOS Safari 의 button focus 가 mousedown/pointerdown 단계에 발동 → 그 영역으로
+  // 자동 zoom (사용자 보고: "펜/지우개 누르면 해당 부분 확대"). focus 자체를 막아야
+  // zoom trigger 안 됨. click 이벤트는 별도라 onclick 정상 작동.
+  function blockBtnFocus(e) { e.preventDefault(); }
 
   // iPadOS Apple Pencil Scribble / Apple Intelligence 가 펜 stroke 를 텍스트 선택
   // 제스처로 해석해 callout 메뉴 ("복사하기 / 선택 영역 찾기 / 찾아보기 / 번역") 를
@@ -212,6 +216,8 @@
 
     <button
       type="button"
+      onmousedown={blockBtnFocus}
+      onpointerdown={blockBtnFocus}
       onclick={clickThenBlur(() => (panelOpen = !panelOpen))}
       style={BTN_STYLE}
       tabindex={-1}
@@ -238,6 +244,8 @@
 
     <button
       type="button"
+      onmousedown={blockBtnFocus}
+      onpointerdown={blockBtnFocus}
       onclick={clickThenBlur(bumpRep)}
       style={BTN_STYLE}
       tabindex={-1}