목록 로딩 로직 개선

frontend/src/components/verificationBoard/VerificationIssueAttachmentsSection.tsx

@@ -342,7 +342,7 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
                     title={`${p.fileName} — 더블클릭하여 열기`}
                     onDoubleClick={() => openImage(p.src)}
                   >
-                    <img src={p.src} alt={p.fileName} draggable={false} />
+                    <img src={p.src} alt={p.fileName} loading="lazy" draggable={false} />
                   </button>
                   <figcaption className="vbd-attach-caption" title={p.fileName}>
                     {p.fileName}

frontend/src/components/verificationBoard/VerificationIssueListPanel.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../utils/verificationBoardStages';
 import VerificationStageIcon from './VerificationStageIcon';
 import { formatIsoDateTime } from '../../utils/timezone';
+import { VirtualScroll } from '../common/VirtualScroll';
 
 interface Props {
   issues: VerificationIssueDto[];
@@ -72,36 +73,42 @@ const VerificationIssueListPanel: React.FC<Props> = ({
         )}
       </div>
 
-      <ul className="vbd-list">
-        {filtered.length === 0 ? (
-          <li className="vbd-list-empty">표시할 검증 이슈가 없습니다.</li>
-        ) : filtered.map(issue => {
+      <VirtualScroll
+        className="vbd-list vl-scroll"
+        items={filtered}
+        estimateSize={72}
+        measureDynamic
+        getItemKey={(issue, index) => issue.id ?? `issue-${index}`}
+        empty={<div className="vbd-list-empty">표시할 검증 이슈가 없습니다.</div>}
+        role="list"
+        aria-label="검증 이슈 목록"
+      >
+        {issue => {
           const active = issue.id === selectedId;
           return (
-            <li key={issue.id}>
-              <button
-                type="button"
-                className={`vbd-list-item${active ? ' vbd-list-item--active' : ''}`}
-                onClick={() => onSelect(issue)}
-              >
-                <VerificationStageIcon stage={issue.stage} size={34} />
-                <span className="vbd-list-item-body">
-                  <span className="vbd-list-item-top">
-                    <span
-                      className="vbd-stage-badge"
-                      style={{ backgroundColor: `${stageColor(issue.stage)}22`, color: stageColor(issue.stage) }}
-                    >
-                      {stageLabel(issue.stage)}
-                    </span>
-                    <span className="vbd-list-meta">{formatIsoDateTime(issue.updatedAt ?? issue.createdAt, undefined, 'short')}</span>
+            <button
+              type="button"
+              className={`vbd-list-item${active ? ' vbd-list-item--active' : ''}`}
+              role="listitem"
+              onClick={() => onSelect(issue)}
+            >
+              <VerificationStageIcon stage={issue.stage} size={34} />
+              <span className="vbd-list-item-body">
+                <span className="vbd-list-item-top">
+                  <span
+                    className="vbd-stage-badge"
+                    style={{ backgroundColor: `${stageColor(issue.stage)}22`, color: stageColor(issue.stage) }}
+                  >
+                    {stageLabel(issue.stage)}
                   </span>
-                  <span className="vbd-list-title">{issue.title}</span>
+                  <span className="vbd-list-meta">{formatIsoDateTime(issue.updatedAt ?? issue.createdAt, undefined, 'short')}</span>
                 </span>
-              </button>
-            </li>
+                <span className="vbd-list-title">{issue.title}</span>
+              </span>
+            </button>
           );
-        })}
-      </ul>
+        }}
+      </VirtualScroll>
     </div>
   );
 };