[RAPID-fix] 캡처 이미지 크기 수정: CSS 픽셀 기준 scale factor로 정확한 영역 크롭

frontend/components/messenger/ScreenCapture.tsx

@@ -61,26 +61,29 @@ export function ScreenCapture({ onCapture, onCancel }: ScreenCaptureProps) {
     // Capture via modern-screenshot
     try {
       const { domToPng } = await import("modern-screenshot");
-      const dpr = window.devicePixelRatio || 1;
       const dataUrl = await domToPng(document.body, {
         width: window.innerWidth,
         height: window.innerHeight,
-        style: {
-          transform: "none",
-          transformOrigin: "top left",
-        },
       });
 
-      // Crop the captured region
+      // Crop the captured region — image is at CSS pixel scale
       const img = new Image();
       img.src = dataUrl;
       await new Promise((res) => { img.onload = res; });
 
+      // Scale factor between actual image size and CSS pixels
+      const scaleX = img.naturalWidth / window.innerWidth;
+      const scaleY = img.naturalHeight / window.innerHeight;
+
       const canvas = canvasRef.current!;
-      canvas.width = r.w * dpr;
-      canvas.height = r.h * dpr;
+      canvas.width = r.w * scaleX;
+      canvas.height = r.h * scaleY;
       const ctx = canvas.getContext("2d")!;
-      ctx.drawImage(img, r.x * dpr, r.y * dpr, r.w * dpr, r.h * dpr, 0, 0, r.w * dpr, r.h * dpr);
+      ctx.drawImage(
+        img,
+        r.x * scaleX, r.y * scaleY, r.w * scaleX, r.h * scaleY,
+        0, 0, r.w * scaleX, r.h * scaleY,
+      );
 
       canvas.toBlob((blob) => {
         if (!blob) { onCancel(); return; }