검증게시판, 압축파일, 한글파일 첨부가능

2026-06-13 01:44:49 +09:00
parent beeebed8f4
commit 864d85484d
7 changed files with 297 additions and 73 deletions
@@ -1,6 +1,6 @@
 /**
- * 검증 이슈 첨부 이미지 — 화면 캡처·파일 선택·드래그·클립보드 붙여넣기
- * issueId 있음: 서버 즉시 업로드 / 없음: draft 로컬 보관(등록 시 저장 후 업로드)
+ * 검증 이슈 첨부 — 화면 캡처·파일 선택·드래그·클립보드 붙여넣기
+ * 이미지 + zip·hwp·hwpx
 */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ScreenRegionCaptureOverlay from '../ScreenRegionCaptureOverlay';
@@ -14,21 +14,37 @@ import {
 import {
  filesFromClipboardRead,
  filesFromDataTransfer,
-  pickImageFiles,
-  prepareImagesForUpload,
 } from '../../utils/clipboardImageFiles';
+import {
+  ATTACHMENT_TYPE_HINT,
+  VERIFICATION_ATTACHMENT_ACCEPT,
+  isImageAttachment,
+  pickAttachmentFiles,
+  prepareAttachmentsForUpload,
+} from '../../utils/verificationAttachmentFiles';

 function uploadErrorMessage(e: unknown): string {
  if (e instanceof Error) {
-    if (e.message === 'IMAGE_TOO_LARGE') {
-      return '이미지가 너무 큽니다. 5MB 이하로 줄인 뒤 다시 시도하세요.';
+    if (e.message === 'IMAGE_TOO_LARGE' || e.message === 'FILE_TOO_LARGE') {
+      return '파일이 너무 큽니다. 5MB 이하로 줄인 뒤 다시 시도하세요.';
    }
    if (e.message === 'IMAGE_READ_FAILED') {
      return '이미지를 읽을 수 없습니다.';
    }
    if (e.message) return e.message;
  }
-  return '이미지 업로드에 실패했습니다.';
+  return '첨부 파일 업로드에 실패했습니다.';
+}
+
+function fileKindLabel(fileName?: string | null, contentType?: string | null): string {
+  const lower = (fileName ?? '').toLowerCase();
+  if (lower.endsWith('.zip')) return 'ZIP';
+  if (lower.endsWith('.hwp')) return 'HWP';
+  if (lower.endsWith('.hwpx')) return 'HWPX';
+  const mime = (contentType ?? '').toLowerCase();
+  if (mime.includes('zip')) return 'ZIP';
+  if (mime.includes('hwp')) return 'HWP';
+  return 'FILE';
 }

 interface Props {
@@ -91,17 +107,24 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
  }, [issueId, reload]);

  const draftPreviews = useMemo(
-    () => draftFiles.map((file, index) => ({
-      key: `${file.name}-${file.size}-${file.lastModified}-${index}`,
-      index,
-      fileName: file.name,
-      src: URL.createObjectURL(file),
-    })),
+    () => draftFiles.map((file, index) => {
+      const isImage = isImageAttachment(file.type, file.name);
+      return {
+        key: `${file.name}-${file.size}-${file.lastModified}-${index}`,
+        index,
+        fileName: file.name,
+        isImage,
+        src: isImage ? URL.createObjectURL(file) : undefined,
+        kind: fileKindLabel(file.name, file.type),
+      };
+    }),
    [draftFiles],
  );

  useEffect(() => () => {
-    draftPreviews.forEach(p => URL.revokeObjectURL(p.src));
+    draftPreviews.forEach(p => {
+      if (p.src) URL.revokeObjectURL(p.src);
+    });
  }, [draftPreviews]);

  useEffect(() => {
@@ -115,14 +138,14 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
  }, []);

  const addDraftFiles = useCallback(async (files: File[]) => {
-    const imgs = pickImageFiles(files);
-    if (imgs.length === 0) {
-      window.alert('이미지 파일(jpeg, png, gif, webp, bmp)만 첨부할 수 있습니다.');
+    const picked = pickAttachmentFiles(files);
+    if (picked.length === 0) {
+      window.alert(`첨부 가능: ${ATTACHMENT_TYPE_HINT}`);
      return;
    }
    setUploading(true);
    try {
-      const prepared = await prepareImagesForUpload(imgs);
+      const prepared = await prepareAttachmentsForUpload(picked);
      onDraftFilesChange?.([...draftFiles, ...prepared]);
    } catch (e) {
      window.alert(uploadErrorMessage(e));
@@ -136,18 +159,18 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
      await addDraftFiles(files);
      return;
    }
-    const imgs = pickImageFiles(files);
-    if (imgs.length === 0) {
-      window.alert('이미지 파일(jpeg, png, gif, webp, bmp)만 첨부할 수 있습니다.');
+    const picked = pickAttachmentFiles(files);
+    if (picked.length === 0) {
+      window.alert(`첨부 가능: ${ATTACHMENT_TYPE_HINT}`);
      return;
    }
    setUploading(true);
    try {
-      const prepared = await prepareImagesForUpload(imgs);
+      const prepared = await prepareAttachmentsForUpload(picked);
      await uploadVerificationIssueImages(issueId, prepared);
      await reload();
    } catch (e) {
-      console.warn('[VerificationBoard] image upload', e);
+      console.warn('[VerificationBoard] attachment upload', e);
      window.alert(uploadErrorMessage(e));
    } finally {
      setUploading(false);
@@ -179,7 +202,7 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({

  const handleDeleteServer = async (imageId: number) => {
    if (issueId == null) return;
-    if (!window.confirm('이 이미지를 삭제할까요?')) return;
+    if (!window.confirm('이 첨부 파일을 삭제할까요?')) return;
    if (saveOnSubmit) {
      onPendingDeleteIdsChange?.(
        pendingDeleteIds.includes(imageId)
@@ -201,10 +224,31 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
    onDraftFilesChange?.(draftFiles.filter((_, i) => i !== index));
  };

-  const openImage = (src: string) => {
+  const openAttachment = (src: string) => {
    window.open(src, '_blank', 'noopener,noreferrer');
  };

+  const renderAttachmentThumb = (
+    src: string,
+    fileName: string,
+    isImage: boolean,
+    kind: string,
+    onOpen: () => void,
+  ) => (
+    <button
+      type="button"
+      className={`vbd-attach-thumb${isImage ? '' : ' vbd-attach-thumb--file'}`}
+      title={`${fileName} — 더블클릭하여 ${isImage ? '열기' : '다운로드'}`}
+      onDoubleClick={onOpen}
+    >
+      {isImage ? (
+        <img src={src} alt={fileName} loading="lazy" draggable={false} />
+      ) : (
+        <span className="vbd-attach-file-badge" aria-hidden>{kind}</span>
+      )}
+    </button>
+  );
+
  const handleContextMenu = (e: React.MouseEvent) => {
    if (disabled) return;
    e.preventDefault();
@@ -214,18 +258,20 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({

  const handlePaste = (e: React.ClipboardEvent) => {
    if (disabled) return;
-    const files = filesFromDataTransfer(e.clipboardData);
-    if (files.length === 0) return;
+    const fromItems = filesFromDataTransfer(e.clipboardData);
+    const fromFiles = pickAttachmentFiles(e.clipboardData.files);
+    const merged = fromFiles.length > 0 ? fromFiles : fromItems;
+    if (merged.length === 0) return;
    e.preventDefault();
-    void uploadFiles(files);
+    void uploadFiles(merged);
  };

  const handleDrop = (e: React.DragEvent) => {
    if (disabled) return;
    e.preventDefault();
    setDragOver(false);
-    const fromTransfer = filesFromDataTransfer(e.dataTransfer);
-    if (fromTransfer.length > 0) void uploadFiles(fromTransfer);
+    const picked = pickAttachmentFiles(e.dataTransfer.files);
+    if (picked.length > 0) void uploadFiles(picked);
  };

  const visibleServerImages = useMemo(
@@ -242,7 +288,7 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
    <div className={`vbd-attachments${compact ? ' vbd-attachments--compact' : ''}`}>
      <div className="vbd-attachments-head">
        <h3 className="vbd-attachments-title">
-          첨부 이미지 {totalCount > 0 && `(${totalCount})`}
+          첨부 파일 {totalCount > 0 && `(${totalCount})`}
        </h3>
        <div className="vbd-attachments-actions">
          <button
@@ -266,13 +312,13 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
        <input
          ref={fileInputRef}
          type="file"
-          accept="image/jpeg,image/png,image/gif,image/webp,image/bmp"
+          accept={VERIFICATION_ATTACHMENT_ACCEPT}
          multiple
          hidden
          disabled={disabled}
          onChange={e => {
            const files = e.target.files;
-            if (files?.length) void uploadFiles(pickImageFiles(files));
+            if (files?.length) void uploadFiles(pickAttachmentFiles(files));
            e.target.value = '';
          }}
        />
@@ -283,7 +329,7 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
        className={`vbd-attach-zone${dragOver ? ' vbd-attach-zone--over' : ''}${disabled ? ' vbd-attach-zone--disabled' : ''}`}
        tabIndex={disabled ? -1 : 0}
        role="region"
-        aria-label="이미지 첨부 영역"
+        aria-label="첨부 파일 영역"
        onContextMenu={handleContextMenu}
        onPaste={handlePaste}
        onDragEnter={e => { if (disabled) return; e.preventDefault(); setDragOver(true); }}
@@ -296,7 +342,7 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
        onDrop={handleDrop}
      >
        {loading && issueId != null && !isDraft && images.length === 0 ? (
-          <p className="vbd-attach-hint">이미지 불러오는 중…</p>
+          <p className="vbd-attach-hint">첨부 파일 불러오는 중…</p>
        ) : showEmptyHint ? (
          <p className="vbd-attach-hint">
            {isDraft || saveOnSubmit
@@ -308,16 +354,17 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
            {(isDraft || saveOnSubmit) && visibleServerImages.map(img => {
                if (img.id == null) return null;
                const src = verificationIssueImageUrl(issueId!, img.id);
+                const isImage = isImageAttachment(img.contentType, img.fileName);
+                const kind = fileKindLabel(img.fileName, img.contentType);
                return (
                  <figure key={img.id} className="vbd-attach-item">
-                    <button
-                      type="button"
-                      className="vbd-attach-thumb"
-                      title={`${img.fileName ?? '첨부 이미지'} — 더블클릭하여 열기`}
-                      onDoubleClick={() => openImage(src)}
-                    >
-                      <img src={src} alt={img.fileName ?? '첨부 이미지'} loading="lazy" draggable={false} />
-                    </button>
+                    {renderAttachmentThumb(
+                      src,
+                      img.fileName ?? '첨부 파일',
+                      isImage,
+                      kind,
+                      () => openAttachment(src),
+                    )}
                    <figcaption className="vbd-attach-caption" title={img.fileName}>
                      {img.fileName}
                    </figcaption>
@@ -336,14 +383,19 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
            {(isDraft || saveOnSubmit)
              ? draftPreviews.map(p => (
                <figure key={p.key} className="vbd-attach-item">
-                  <button
-                    type="button"
-                    className="vbd-attach-thumb"
-                    title={`${p.fileName} — 더블클릭하여 열기`}
-                    onDoubleClick={() => openImage(p.src)}
-                  >
-                    <img src={p.src} alt={p.fileName} loading="lazy" draggable={false} />
-                  </button>
+                  {p.isImage && p.src
+                    ? renderAttachmentThumb(
+                      p.src,
+                      p.fileName,
+                      true,
+                      p.kind,
+                      () => openAttachment(p.src!),
+                    )
+                    : (
+                      <div className="vbd-attach-thumb vbd-attach-thumb--file">
+                        <span className="vbd-attach-file-badge" aria-hidden>{p.kind}</span>
+                      </div>
+                    )}
                  <figcaption className="vbd-attach-caption" title={p.fileName}>
                    {p.fileName}
                  </figcaption>
@@ -361,16 +413,17 @@ const VerificationIssueAttachmentsSection: React.FC<Props> = ({
              : !saveOnSubmit && images.map(img => {
                if (img.id == null) return null;
                const src = verificationIssueImageUrl(issueId!, img.id);
+                const isImage = isImageAttachment(img.contentType, img.fileName);
+                const kind = fileKindLabel(img.fileName, img.contentType);
                return (
                  <figure key={img.id} className="vbd-attach-item">
-                    <button
-                      type="button"
-                      className="vbd-attach-thumb"
-                      title={`${img.fileName ?? '첨부 이미지'} — 더블클릭하여 열기`}
-                      onDoubleClick={() => openImage(src)}
-                    >
-                      <img src={src} alt={img.fileName ?? '첨부 이미지'} loading="lazy" draggable={false} />
-                    </button>
+                    {renderAttachmentThumb(
+                      src,
+                      img.fileName ?? '첨부 파일',
+                      isImage,
+                      kind,
+                      () => openAttachment(src),
+                    )}
                    <figcaption className="vbd-attach-caption" title={img.fileName}>
                      {img.fileName}
                    </figcaption>