From 920783a9b03dee576cc514aad21b4e11ba74abe6 Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Thu, 1 Oct 2026 13:05:41 +0900
Subject: [PATCH] =?UTF-8?q?fix(M01):=20=EC=8B=9C=ED=8A=B8=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EB=8B=A4=EC=9D=B4=EC=96=B4=EA=B7=B8=EB=9E=A8=20?=
 =?UTF-8?q?=E2=80=94=20=EC=84=A0=EC=9D=84=20=EB=B0=94=EB=A1=9C=20=EA=B7=B8?=
 =?UTF-8?q?=EB=A6=BC(=ED=81=AC=EA=B8=B0=20=EB=B0=94=EB=80=8C=EB=A9=B4=20?=
 =?UTF-8?q?=EB=8B=A4=EC=8B=9C)=20=C2=B7=20=EB=81=88=20=EB=92=A4=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=82=BC=ED=82=B4=EC=9D=B4=20=EB=82=A8?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EA=B2=8C=20=C2=B7=20=EA=B3=A0=EB=A5=B4?=
 =?UTF-8?q?=EB=A9=B4=20=EA=B9=8C=EB=8B=AD=20=EC=A4=84=20=EC=A7=80=EC=9B=80?=
 =?UTF-8?q?(PLAN=2035-5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SheetLogic 전부 검사 초록
- ORCA 견본(상자 7 · 선 8): 단계마다 x 16 · 299 · 582 · 866 · 1149 · 선 끝 알약에서 0.05px 안 · 띠 321 / 화면 1076
  · 끌어 잇기 → on.connect · 상자 몸통에 놓으면 같은 이름 자리 · 막히면 한 줄 까닭 · 선 고름 → Delete → on.disconnect
  · 상자 고르면 이어진 선 넷만 진하게 · 잇기 단추 길 · + 상자 → on.add · Delete → 물음 → on.remove · 밝음 · 어두움

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ly2oHAaTDYRjcniAmHR81z
---
 M01_MasterData/SheetLogic/M01_SL_Diagram.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/M01_MasterData/SheetLogic/M01_SL_Diagram.ts b/M01_MasterData/SheetLogic/M01_SL_Diagram.ts
index c32d15315..f9bbf1801 100644
--- a/M01_MasterData/SheetLogic/M01_SL_Diagram.ts
+++ b/M01_MasterData/SheetLogic/M01_SL_Diagram.ts
@@ -129,6 +129,8 @@ interface HostState {
   pill: { node: string; pill: string; dir: "in" | "out" } | null;
   note: string;
   scroll: number;
+  /** 선 다시 그리기 — 띠 크기 바뀜 */
+  watch?: ResizeObserver;
 }
 
 const states = new WeakMap<HTMLElement, HostState>();
@@ -159,6 +161,7 @@ export function renderDiagram(
   const select = (id: string | null): void => {
     st.selected = id;
     st.pill = null;
+    st.note = "";
     on.select(id);
     redraw();
   };
@@ -455,7 +458,11 @@ export function renderDiagram(
       svg.append(g);
     }
   };
-  requestAnimationFrame(drawLines);
+  // 붙어 있으면 바로 · 나중에 붙거나 크기가 바뀌면 다시(띠 밀기 · 창 크기)
+  st.watch?.disconnect();
+  st.watch = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(drawLines);
+  st.watch?.observe(inner);
+  if (inner.isConnected) drawLines();
 
   /* 끌어 잇기 */
   function startDrag(ev: PointerEvent, from: SlEnd): void {
@@ -494,8 +501,10 @@ export function renderDiagram(
         : boxHit
           ? { node: boxHit.dataset.node ?? "", pill: null, dir: null }
           : null;
-      // 끈 뒤 따라오는 click 을 한 번 삼킴
-      window.addEventListener("click", (c) => c.stopPropagation(), { capture: true, once: true });
+      // 끈 뒤 바로 따라오는 click 만 삼킴 — 안 오면 곧 풀어 다음 누름은 그대로
+      const swallow = (c: MouseEvent): void => c.stopPropagation();
+      window.addEventListener("click", swallow, { capture: true, once: true });
+      setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0);
       tryConnect(from, target);
     };
     window.addEventListener("pointermove", move);