refactor(agent-office): rewrite OfficeRenderer with game loop, zoom/pan, Y-sorting

src/pages/agent-office/canvas/OverlayRenderer.js

@@ -0,0 +1,59 @@
+// src/pages/agent-office/canvas/OverlayRenderer.js
+// Phase 3 stub — full implementation in Phase 3
+
+/**
+ * 오버레이 렌더러 (Phase 3에서 구현)
+ * 에이전트 위의 상태 아이콘, 이름 레이블, 알림 배지, 말풍선 등
+ */
+export class OverlayRenderer {
+  /**
+   * 에이전트 오버레이 렌더링
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {object} sprite - AgentSprite 인스턴스
+   * @param {object} theme - 테마 객체
+   * @param {number} scale - 줌 레벨
+   * @param {number} offsetX - 패닝 X
+   * @param {number} offsetY - 패닝 Y
+   * @param {number} tileSize - 타일 크기
+   */
+  draw(ctx, sprite, theme, scale, offsetX, offsetY, tileSize) {
+    // Phase 3에서 구현 예정
+    // 현재는 기본 레이블만 표시
+    if (!sprite || sprite.x == null) return;
+
+    const ts = tileSize * scale;
+    const cx = sprite.x * ts + offsetX + ts / 2;
+    const cy = sprite.y * ts + offsetY;
+
+    // 에이전트 이름 레이블
+    if (sprite.meta && sprite.meta.displayName) {
+      ctx.save();
+      ctx.font = `${Math.max(8, 9 * scale)}px monospace`;
+      ctx.textAlign = 'center';
+      ctx.fillStyle = theme.text.secondary;
+      ctx.fillText(sprite.meta.displayName, cx, cy - 4 * scale);
+      ctx.restore();
+    }
+
+    // 알림 배지
+    if (sprite.notificationCount > 0) {
+      const bx = cx + ts * 0.3;
+      const by = cy - ts * 0.5;
+      const r = Math.max(5, 6 * scale);
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(bx, by, r, 0, Math.PI * 2);
+      ctx.fillStyle = '#ef4444';
+      ctx.fill();
+      ctx.fillStyle = '#ffffff';
+      ctx.font = `bold ${Math.max(7, 7 * scale)}px monospace`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(
+        sprite.notificationCount > 9 ? '9+' : String(sprite.notificationCount),
+        bx, by
+      );
+      ctx.restore();
+    }
+  }
+}