From 20d4457a75d00dabf4b47e1fa92ff3e2239bfb06 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Mon, 27 Apr 2026 10:23:01 +0900
Subject: [PATCH] =?UTF-8?q?fix(study):=20user-select=20/=20long-press=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EC=B0=A8=EB=8B=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

증상 (사용자 사진 8856): 펜으로 쓰는데 "복사하기 / Google 으로 검색" 같은
iOS 텍스트 선택 메뉴가 뜸. Safari 가 펜 입력을 텍스트 선택으로 해석.

Fix:
- 캔버스 + 컨테이너 + 페이지 root 에 user-select / -webkit-user-select /
  -webkit-touch-callout / -webkit-tap-highlight-color 적용
- canvas 에 oncontextmenu preventDefault — long-press 후 메뉴 차단
---
 frontend/src/lib/components/HandwriteCanvas.svelte | 12 ++++++++----
 frontend/src/routes/study/write/[id]/+page.svelte  |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/HandwriteCanvas.svelte b/frontend/src/lib/components/HandwriteCanvas.svelte
index 096e0a9..4326fd1 100644
--- a/frontend/src/lib/components/HandwriteCanvas.svelte
+++ b/frontend/src/lib/components/HandwriteCanvas.svelte
@@ -500,8 +500,12 @@
     </button>
   </div>
 
-  <!-- 캔버스 컨테이너 — 명확한 border 로 영역 구분 -->
-  <div bind:this={containerEl} class="flex-1 min-h-0 bg-bg relative overflow-hidden border-2 border-default/30">
+  <!-- 캔버스 컨테이너 — 텍스트 선택 / iOS long-press 메뉴 차단 -->
+  <div
+    bind:this={containerEl}
+    class="flex-1 min-h-0 bg-bg relative overflow-hidden border-2 border-default/30"
+    style="user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;"
+  >
     <canvas
       bind:this={canvas}
       onpointerdown={onPointerDown}
@@ -509,9 +513,9 @@
       onpointerup={endStroke}
       onpointercancel={endStroke}
       onpointerleave={(e) => { if (inflight && e.pointerId === activePointerId) endStroke(e); }}
+      oncontextmenu={(e) => e.preventDefault()}
       class="block"
-      style="touch-action: none; cursor: {tool === 'eraser' ? 'cell' : 'crosshair'};"
+      style="touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: {tool === 'eraser' ? 'cell' : 'crosshair'};"
     ></canvas>
-
   </div>
 </div>
diff --git a/frontend/src/routes/study/write/[id]/+page.svelte b/frontend/src/routes/study/write/[id]/+page.svelte
index 184f4a2..7ba8c4e 100644
--- a/frontend/src/routes/study/write/[id]/+page.svelte
+++ b/frontend/src/routes/study/write/[id]/+page.svelte
@@ -129,7 +129,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover" />
 </svelte:head>
 
-<div class="h-full flex flex-col relative" style="touch-action: manipulation;">
+<div class="h-full flex flex-col relative" style="touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;">
   <!-- 상단 헤더 -->
   <div class="flex items-center justify-between gap-2 px-3 py-2 border-b border-default bg-surface shrink-0 z-10">
     <Button href="/study/write" size="sm" variant="ghost" icon={ArrowLeft}>목록</Button>