298 lines
11 KiB
TypeScript
298 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useRef } from "react";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { FileInfo, FileUploadConfig } from "./types";
|
|
import {
|
|
Upload,
|
|
Download,
|
|
Trash2,
|
|
Eye,
|
|
File,
|
|
FileText,
|
|
Image as ImageIcon,
|
|
Video,
|
|
Music,
|
|
Archive,
|
|
Presentation,
|
|
X
|
|
} from "lucide-react";
|
|
import { formatFileSize } from "@/lib/utils";
|
|
import { FileViewerModal } from "./FileViewerModal";
|
|
|
|
interface FileManagerModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
uploadedFiles: FileInfo[];
|
|
onFileUpload: (files: File[]) => Promise<void>;
|
|
onFileDownload: (file: FileInfo) => void;
|
|
onFileDelete: (file: FileInfo) => void;
|
|
onFileView: (file: FileInfo) => void;
|
|
config: FileUploadConfig;
|
|
isDesignMode?: boolean;
|
|
}
|
|
|
|
export const FileManagerModal: React.FC<FileManagerModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
uploadedFiles,
|
|
onFileUpload,
|
|
onFileDownload,
|
|
onFileDelete,
|
|
onFileView,
|
|
config,
|
|
isDesignMode = false,
|
|
}) => {
|
|
const [dragOver, setDragOver] = useState(false);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [viewerFile, setViewerFile] = useState<FileInfo | null>(null);
|
|
const [isViewerOpen, setIsViewerOpen] = useState(false);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// 파일 아이콘 가져오기
|
|
const getFileIcon = (fileExt: string) => {
|
|
const ext = fileExt.toLowerCase();
|
|
|
|
if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
|
|
return <ImageIcon className="w-5 h-5 text-blue-500" />;
|
|
} else if (['pdf', 'doc', 'docx', 'txt', 'rtf'].includes(ext)) {
|
|
return <FileText className="w-5 h-5 text-red-500" />;
|
|
} else if (['xls', 'xlsx', 'csv'].includes(ext)) {
|
|
return <FileText className="w-5 h-5 text-green-500" />;
|
|
} else if (['ppt', 'pptx'].includes(ext)) {
|
|
return <Presentation className="w-5 h-5 text-orange-500" />;
|
|
} else if (['mp4', 'avi', 'mov', 'webm'].includes(ext)) {
|
|
return <Video className="w-5 h-5 text-purple-500" />;
|
|
} else if (['mp3', 'wav', 'ogg'].includes(ext)) {
|
|
return <Music className="w-5 h-5 text-pink-500" />;
|
|
} else if (['zip', 'rar', '7z'].includes(ext)) {
|
|
return <Archive className="w-5 h-5 text-yellow-500" />;
|
|
} else {
|
|
return <File className="w-5 h-5 text-gray-500" />;
|
|
}
|
|
};
|
|
|
|
// 파일 업로드 핸들러
|
|
const handleFileUpload = async (files: FileList | File[]) => {
|
|
if (!files || files.length === 0) return;
|
|
|
|
setUploading(true);
|
|
try {
|
|
const fileArray = Array.from(files);
|
|
await onFileUpload(fileArray);
|
|
console.log('✅ FileManagerModal: 파일 업로드 완료');
|
|
} catch (error) {
|
|
console.error('❌ FileManagerModal: 파일 업로드 오류:', error);
|
|
} finally {
|
|
setUploading(false);
|
|
console.log('🔄 FileManagerModal: 업로드 상태 초기화');
|
|
}
|
|
};
|
|
|
|
// 드래그 앤 드롭 핸들러
|
|
const handleDragOver = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
setDragOver(true);
|
|
};
|
|
|
|
const handleDragLeave = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
setDragOver(false);
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
setDragOver(false);
|
|
|
|
if (config.disabled || isDesignMode) return;
|
|
|
|
const files = e.dataTransfer.files;
|
|
handleFileUpload(files);
|
|
};
|
|
|
|
// 파일 선택 핸들러
|
|
const handleFileSelect = () => {
|
|
if (config.disabled || isDesignMode) return;
|
|
fileInputRef.current?.click();
|
|
};
|
|
|
|
const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = e.target.files;
|
|
if (files) {
|
|
handleFileUpload(files);
|
|
}
|
|
// 입력값 초기화
|
|
e.target.value = '';
|
|
};
|
|
|
|
// 파일 뷰어 핸들러
|
|
const handleFileViewInternal = (file: FileInfo) => {
|
|
setViewerFile(file);
|
|
setIsViewerOpen(true);
|
|
};
|
|
|
|
const handleViewerClose = () => {
|
|
setIsViewerOpen(false);
|
|
setViewerFile(null);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Dialog open={isOpen} onOpenChange={() => {}}>
|
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden [&>button]:hidden">
|
|
<DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<DialogTitle className="text-lg font-semibold">
|
|
파일 관리 ({uploadedFiles.length}개)
|
|
</DialogTitle>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 w-8 p-0 hover:bg-gray-100"
|
|
onClick={onClose}
|
|
title="닫기"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col space-y-4 h-[70vh]">
|
|
{/* 파일 업로드 영역 */}
|
|
{!isDesignMode && (
|
|
<div
|
|
className={`
|
|
border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors
|
|
${dragOver ? 'border-blue-400 bg-blue-50' : 'border-gray-300'}
|
|
${config.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
|
|
${uploading ? 'opacity-75' : ''}
|
|
`}
|
|
onClick={handleFileSelect}
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={handleDrop}
|
|
>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
multiple={config.multiple}
|
|
accept={config.accept}
|
|
onChange={handleFileInputChange}
|
|
className="hidden"
|
|
disabled={config.disabled}
|
|
/>
|
|
|
|
{uploading ? (
|
|
<div className="flex flex-col items-center">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mb-3"></div>
|
|
<span className="text-blue-600 font-medium">업로드 중...</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center">
|
|
<Upload className="mx-auto h-12 w-12 text-gray-400 mb-4" />
|
|
<p className="text-lg font-medium text-gray-900 mb-2">
|
|
파일을 드래그하거나 클릭하여 업로드하세요
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
{config.accept && `지원 형식: ${config.accept}`}
|
|
{config.maxSize && ` • 최대 ${formatFileSize(config.maxSize)}`}
|
|
{config.multiple && ' • 여러 파일 선택 가능'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 파일 목록 */}
|
|
<div className="flex-1 overflow-y-auto border border-gray-200 rounded-lg">
|
|
<div className="p-4">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-sm font-medium text-gray-700">
|
|
업로드된 파일
|
|
</h3>
|
|
{uploadedFiles.length > 0 && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
{uploadedFiles.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{uploadedFiles.map((file) => (
|
|
<div
|
|
key={file.objid}
|
|
className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
|
|
>
|
|
<div className="flex-shrink-0">
|
|
{getFileIcon(file.fileExt)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-gray-900 truncate">
|
|
{file.realFileName}
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
{formatFileSize(file.fileSize)} • {file.fileExt.toUpperCase()}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 w-8 p-0"
|
|
onClick={() => handleFileViewInternal(file)}
|
|
title="미리보기"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 w-8 p-0"
|
|
onClick={() => onFileDownload(file)}
|
|
title="다운로드"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
</Button>
|
|
{!isDesignMode && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 w-8 p-0 text-red-500 hover:text-red-700"
|
|
onClick={() => onFileDelete(file)}
|
|
title="삭제"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center py-12 text-gray-500">
|
|
<File className="w-16 h-16 mb-4 text-gray-300" />
|
|
<p className="text-lg font-medium text-gray-600">업로드된 파일이 없습니다</p>
|
|
<p className="text-sm text-gray-500 mt-2">
|
|
{isDesignMode ? '디자인 모드에서는 파일을 업로드할 수 없습니다' : '위의 영역에 파일을 드래그하거나 클릭하여 업로드하세요'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 파일 뷰어 모달 */}
|
|
<FileViewerModal
|
|
file={viewerFile}
|
|
isOpen={isViewerOpen}
|
|
onClose={handleViewerClose}
|
|
onDownload={onFileDownload}
|
|
onDelete={!isDesignMode ? onFileDelete : undefined}
|
|
/>
|
|
</>
|
|
);
|
|
};
|