모의투자 관리 기능 추가

frontend/src/components/verificationBoard/VerificationIssueAttachmentsSection.tsx

@@ -1,8 +1,9 @@
 /**
- * 검증 이슈 첨부 이미지 — 파일 선택·드래그·클립보드 붙여넣기
+ * 검증 이슈 첨부 이미지 — 화면 캡처·파일 선택·드래그·클립보드 붙여넣기
  * issueId 있음: 서버 즉시 업로드 / 없음: draft 로컬 보관(등록 시 저장 후 업로드)
  */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import ScreenRegionCaptureOverlay from '../ScreenRegionCaptureOverlay';
 import {
   deleteVerificationIssueImage,
   loadVerificationIssueImages,
@@ -68,6 +69,7 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
   const [uploading, setUploading] = useState(false);
   const [dragOver, setDragOver] = useState(false);
   const [ctxMenu, setCtxMenu] = useState<CtxMenuState | null>(null);
+  const [screenCaptureOpen, setScreenCaptureOpen] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const zoneRef = useRef<HTMLDivElement>(null);
 
@@ -170,6 +172,11 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
     }
   }, [uploadFiles]);
 
+  const handleScreenCapture = useCallback((file: File) => {
+    setScreenCaptureOpen(false);
+    void uploadFiles([file]);
+  }, [uploadFiles]);
+
   const handleDeleteServer = async (imageId: number) => {
     if (issueId == null) return;
     if (!window.confirm('이 이미지를 삭제할까요?')) return;
@@ -237,14 +244,25 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
         <h3 className="vbd-attachments-title">
           첨부 이미지 {totalCount > 0 && `(${totalCount})`}
         </h3>
-        <button
-          type="button"
-          className="vbd-btn vbd-btn--sm"
-          onClick={() => fileInputRef.current?.click()}
-          disabled={disabled || uploading}
-        >
-          파일 선택
-        </button>
+        <div className="vbd-attachments-actions">
+          <button
+            type="button"
+            className="vbd-btn vbd-btn--sm"
+            title="화면 공유 후 드래그로 영역 캡처"
+            onClick={() => setScreenCaptureOpen(true)}
+            disabled={disabled || uploading}
+          >
+            화면 캡처
+          </button>
+          <button
+            type="button"
+            className="vbd-btn vbd-btn--sm"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={disabled || uploading}
+          >
+            파일 선택
+          </button>
+        </div>
         <input
           ref={fileInputRef}
           type="file"
@@ -282,8 +300,8 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
         ) : showEmptyHint ? (
           <p className="vbd-attach-hint">
             {isDraft || saveOnSubmit
-              ? '저장 시 함께 반영됩니다. 드래그·우클릭 붙여넣기·파일 선택'
-              : '이미지를 드래그하거나, 우클릭 → 클립보드 붙여넣기, 또는 「파일 선택」'}
+              ? '저장 시 함께 반영됩니다. 화면 캡처·드래그·우클릭 붙여넣기·파일 선택'
+              : '화면 캡처·드래그·우클릭 붙여넣기·파일 선택'}
           </p>
         ) : (
           <div className="vbd-attach-grid">
@@ -385,8 +403,18 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
           <button type="button" onClick={() => void pasteFromClipboard()}>
             클립보드 이미지 붙여넣기
           </button>
+          <button type="button" onClick={() => { setCtxMenu(null); setScreenCaptureOpen(true); }}>
+            화면 영역 캡처…
+          </button>
         </div>
       )}
+
+      {screenCaptureOpen && (
+        <ScreenRegionCaptureOverlay
+          onCapture={handleScreenCapture}
+          onCancel={() => setScreenCaptureOpen(false)}
+        />
+      )}
     </div>
   );
 };