(김준회) dolce: 다운로드 시각적 피드백 표시 (UX)

1 files changed, 12 insertions, 2 deletions

diff --git a/lib/dolce/table/file-list-columns.tsx b/lib/dolce/table/file-list-columns.tsx
index 38b1f1c9..3018e240 100644
--- a/lib/dolce/table/file-list-columns.tsx
+++ b/lib/dolce/table/file-list-columns.tsx
@@ -3,19 +3,21 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { FileInfoItem } from "../actions";
 import { Button } from "@/components/ui/button";
-import { Download, Trash2 } from "lucide-react";
+import { Download, Trash2, Loader2 } from "lucide-react";
 import { formatDolceDateTime } from "../utils/date-formatter";
 
 interface FileListColumnsProps {
   onDownload: (file: FileInfoItem) => void;
   onDelete?: (file: FileInfoItem) => void;
   lng?: string;
+  downloadingFileId?: string | null;
 }
 
 export const createFileListColumns = ({
   onDownload,
   onDelete,
   lng = "ko",
+  downloadingFileId,
 }: FileListColumnsProps): ColumnDef<FileInfoItem>[] => [
   {
     accessorKey: "FileSeq",
@@ -64,23 +66,31 @@ export const createFileListColumns = ({
     minSize: 160,
     cell: ({ row }) => {
       const isLocal = row.original.FileServerId === "LOCAL";
+      const isDownloading = downloadingFileId === row.original.FileId;
+
       return (
         <div className="flex gap-2 items-center justify-center">
             <Button
             variant="outline"
             size="sm"
+            disabled={isDownloading}
             onClick={(e) => {
                 e.stopPropagation();
                 onDownload(row.original);
             }}
             >
-            <Download className="h-4 w-4 mr-2" />
+            {isDownloading ? (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            ) : (
+                <Download className="h-4 w-4 mr-2" />
+            )}
             {lng === "ko" ? "다운로드" : "Download"}
             </Button>
             {isLocal && onDelete && (
                 <Button
                     variant="destructive"
                     size="sm"
+                    disabled={isDownloading}
                     onClick={(e) => {
                         e.stopPropagation();
                         onDelete(row.original);