검증게시판 첨부파일 첨부 및 삭제기능

frontend/src/components/verificationBoard/VerificationIssueAttachmentsSection.tsx

@@ -219,8 +219,18 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
     onDraftFilesChange?.(draftFiles.filter((_, i) => i !== index));
   };
 
-  const openAttachment = (src: string) => {
-    window.open(src, '_blank', 'noopener,noreferrer');
+  const openAttachment = (src: string, fileName: string, isImage: boolean) => {
+    if (isImage) {
+      window.open(src, '_blank', 'noopener,noreferrer');
+      return;
+    }
+    const a = document.createElement('a');
+    a.href = src;
+    a.download = fileName;
+    a.rel = 'noopener noreferrer';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
   };
 
   const renderAttachmentThumb = (
@@ -358,7 +368,7 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
                       img.fileName ?? '첨부 파일',
                       isImage,
                       kind,
-                      () => openAttachment(src),
+                      () => openAttachment(src, img.fileName ?? '첨부 파일', isImage),
                     )}
                     <figcaption className="vbd-attach-caption" title={img.fileName}>
                       {img.fileName}
@@ -384,7 +394,7 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
                       p.fileName,
                       true,
                       p.kind,
-                      () => openAttachment(p.src!),
+                      () => openAttachment(p.src!, p.fileName, true),
                     )
                     : (
                       <div className="vbd-attach-thumb vbd-attach-thumb--file">
@@ -417,7 +427,7 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
                       img.fileName ?? '첨부 파일',
                       isImage,
                       kind,
-                      () => openAttachment(src),
+                      () => openAttachment(src, img.fileName ?? '첨부 파일', isImage),
                     )}
                     <figcaption className="vbd-attach-caption" title={img.fileName}>
                       {img.fileName}

frontend/src/utils/verificationBoardApi.ts

@@ -165,7 +165,7 @@ export async function uploadVerificationIssueImages(
   files: File[],
 ): Promise<VerificationIssueImageDto[]> {
   const form = new FormData();
-  files.forEach(f => form.append('files', f));
+  files.forEach(f => form.append('files', f, f.name));
   const res = await fetch(`${API_BASE}/verification-issues/${issueId}/images`, {
     method: 'POST',
     headers: authHeadersMultipart(),