chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

문서뷰어기능구현

Browse Source
This commit is contained in:
leeheejin
2025-09-29 13:29:03 +09:00
parent 3600621554
commit e0143e9cba
27 changed files with 2812 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
frontend/lib/registry/components/file-upload/FileManagerModal.tsx Normal file
View File

@@ -0,0 +1,297 @@
"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}
/>
</>
);
};

497
frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
View File

@@ -3,9 +3,11 @@ import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import { uploadFiles, downloadFile, deleteFile } from "@/lib/api/file";
import { uploadFiles, downloadFile, deleteFile, getComponentFiles } from "@/lib/api/file";
import { GlobalFileManager } from "@/lib/api/globalFile";
import { formatFileSize } from "@/lib/utils";
import { FileViewerModal } from "./FileViewerModal";
import { FileManagerModal } from "./FileManagerModal";
import { FileUploadConfig, FileInfo, FileUploadStatus, FileUploadResponse } from "./types";
import {
Upload,
@@ -75,13 +77,13 @@ export interface FileUploadComponentProps {
onConfigChange?: (config: any) => void;
}
export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
component,
componentConfig,
componentStyle,
className,
isInteractive,
isDesignMode,
isDesignMode = false, // 기본값 설정
formData,
onFormDataChange,
onClick,
@@ -94,55 +96,230 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
const [dragOver, setDragOver] = useState(false);
const [viewerFile, setViewerFile] = useState<FileInfo | null>(null);
const [isViewerOpen, setIsViewerOpen] = useState(false);
const [isFileManagerOpen, setIsFileManagerOpen] = useState(false);
const [forceUpdate, setForceUpdate] = useState(0);
const fileInputRef = useRef<HTMLInputElement>(null);
// 컴포넌트 마운트 시 즉시 localStorage에서 파일 복원
useEffect(() => {
if (!component?.id) return;
try {
const backupKey = `fileUpload_${component.id}`;
const backupFiles = localStorage.getItem(backupKey);
if (backupFiles) {
const parsedFiles = JSON.parse(backupFiles);
if (parsedFiles.length > 0) {
console.log("🚀 컴포넌트 마운트 시 파일 즉시 복원:", {
componentId: component.id,
restoredFiles: parsedFiles.length,
files: parsedFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName }))
});
setUploadedFiles(parsedFiles);
// 전역 상태에도 복원
if (typeof window !== 'undefined') {
(window as any).globalFileState = {
...(window as any).globalFileState,
[component.id]: parsedFiles
};
}
}
}
} catch (e) {
console.warn("컴포넌트 마운트 시 파일 복원 실패:", e);
}
}, [component.id]); // component.id가 변경될 때만 실행
// 템플릿 파일과 데이터 파일을 조회하는 함수
const loadComponentFiles = useCallback(async () => {
if (!component?.id) return;
try {
const screenId = formData?.screenId || (typeof window !== 'undefined' && window.location.pathname.includes('/screens/')
? parseInt(window.location.pathname.split('/screens/')[1])
: null);
if (!screenId) {
console.log("📂 화면 ID 없음, 기존 파일 로직 사용");
return false; // 기존 로직 사용
}
const params = {
screenId,
componentId: component.id,
tableName: formData?.tableName || component.tableName,
recordId: formData?.id,
columnName: component.columnName,
};
console.log("📂 컴포넌트 파일 조회:", params);
const response = await getComponentFiles(params);
if (response.success) {
console.log("📁 파일 조회 결과:", {
templateFiles: response.templateFiles.length,
dataFiles: response.dataFiles.length,
totalFiles: response.totalFiles.length,
summary: response.summary,
actualFiles: response.totalFiles
});
// 파일 데이터 형식 통일
const formattedFiles = response.totalFiles.map((file: any) => ({
objid: file.objid || file.id,
savedFileName: file.savedFileName || file.saved_file_name,
realFileName: file.realFileName || file.real_file_name,
fileSize: file.fileSize || file.file_size,
fileExt: file.fileExt || file.file_ext,
regdate: file.regdate,
status: file.status || 'ACTIVE',
uploadedAt: file.uploadedAt || new Date().toISOString(),
...file
}));
console.log("📁 형식 변환된 파일 데이터:", formattedFiles);
// 🔄 localStorage의 기존 파일과 서버 파일 병합
let finalFiles = formattedFiles;
try {
const backupKey = `fileUpload_${component.id}`;
const backupFiles = localStorage.getItem(backupKey);
if (backupFiles) {
const parsedBackupFiles = JSON.parse(backupFiles);
// 서버에 없는 localStorage 파일들을 추가 (objid 기준으로 중복 제거)
const serverObjIds = new Set(formattedFiles.map((f: any) => f.objid));
const additionalFiles = parsedBackupFiles.filter((f: any) => !serverObjIds.has(f.objid));
finalFiles = [...formattedFiles, ...additionalFiles];
console.log("🔄 파일 병합 완료:", {
서버파일: formattedFiles.length,
로컬파일: parsedBackupFiles.length,
추가파일: additionalFiles.length,
최종파일: finalFiles.length,
최종파일목록: finalFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName }))
});
}
} catch (e) {
console.warn("파일 병합 중 오류:", e);
}
setUploadedFiles(finalFiles);
// 전역 상태에도 저장
if (typeof window !== 'undefined') {
(window as any).globalFileState = {
...(window as any).globalFileState,
[component.id]: finalFiles
};
// 🌐 전역 파일 저장소에 등록 (페이지 간 공유용)
GlobalFileManager.registerFiles(finalFiles, {
uploadPage: window.location.pathname,
componentId: component.id,
screenId: formData?.screenId,
});
// localStorage 백업도 병합된 파일로 업데이트
try {
const backupKey = `fileUpload_${component.id}`;
localStorage.setItem(backupKey, JSON.stringify(finalFiles));
console.log("💾 localStorage 백업 업데이트 완료:", finalFiles.length);
} catch (e) {
console.warn("localStorage 백업 업데이트 실패:", e);
}
}
return true; // 새로운 로직 사용됨
}
} catch (error) {
console.error("파일 조회 오류:", error);
}
return false; // 기존 로직 사용
}, [component.id, component.tableName, component.columnName, formData?.screenId, formData?.tableName, formData?.id]);
// 컴포넌트 파일 동기화
useEffect(() => {
const componentFiles = (component as any)?.uploadedFiles || [];
const lastUpdate = (component as any)?.lastFileUpdate;
// 전역 상태에서 최신 파일 정보 가져오기
const globalFileState = typeof window !== 'undefined' ? (window as any).globalFileState || {} : {};
const globalFiles = globalFileState[component.id] || [];
// 최신 파일 정보 사용 (전역 상태 > 컴포넌트 속성)
const currentFiles = globalFiles.length > 0 ? globalFiles : componentFiles;
console.log("🔄 FileUploadComponent 파일 동기화:", {
console.log("🔄 FileUploadComponent 파일 동기화 시작:", {
componentId: component.id,
componentFiles: componentFiles.length,
globalFiles: globalFiles.length,
currentFiles: currentFiles.length,
uploadedFiles: uploadedFiles.length,
lastUpdate: lastUpdate
formData: formData,
screenId: formData?.screenId,
currentUploadedFiles: uploadedFiles.length
});
// localStorage에서 백업 파일 복원
try {
const backupKey = `fileUpload_${component.id}`;
const backupFiles = localStorage.getItem(backupKey);
if (backupFiles && currentFiles.length === 0) {
const parsedFiles = JSON.parse(backupFiles);
setUploadedFiles(parsedFiles);
return;
// 먼저 새로운 템플릿 파일 조회 시도
loadComponentFiles().then(useNewLogic => {
if (useNewLogic) {
console.log("✅ 새로운 템플릿 파일 로직 사용");
return; // 새로운 로직이 성공했으면 기존 로직 스킵
}
} catch (e) {
console.warn("localStorage 백업 복원 실패:", e);
}
// 최신 파일과 현재 파일 비교
if (JSON.stringify(currentFiles) !== JSON.stringify(uploadedFiles)) {
console.log("🔄 useEffect에서 파일 목록 변경 감지:", {
// 기존 로직 사용
console.log("📂 기존 파일 로직 사용");
// 전역 상태에서 최신 파일 정보 가져오기
const globalFileState = typeof window !== 'undefined' ? (window as any).globalFileState || {} : {};
const globalFiles = globalFileState[component.id] || [];
// 최신 파일 정보 사용 (전역 상태 > 컴포넌트 속성)
const currentFiles = globalFiles.length > 0 ? globalFiles : componentFiles;
console.log("🔄 FileUploadComponent 파일 동기화:", {
componentId: component.id,
componentFiles: componentFiles.length,
globalFiles: globalFiles.length,
currentFiles: currentFiles.length,
uploadedFiles: uploadedFiles.length,
currentFilesData: currentFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName })),
uploadedFilesData: uploadedFiles.map(f => ({ objid: f.objid, name: f.realFileName }))
lastUpdate: lastUpdate
});
setUploadedFiles(currentFiles);
setForceUpdate(prev => prev + 1);
}
}, [component.id, (component as any)?.uploadedFiles, (component as any)?.lastFileUpdate]);
// localStorage에서 백업 파일 복원 (새로고침 시 중요!)
try {
const backupKey = `fileUpload_${component.id}`;
const backupFiles = localStorage.getItem(backupKey);
if (backupFiles) {
const parsedFiles = JSON.parse(backupFiles);
if (parsedFiles.length > 0 && currentFiles.length === 0) {
console.log("🔄 localStorage에서 파일 복원:", {
componentId: component.id,
restoredFiles: parsedFiles.length,
files: parsedFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName }))
});
setUploadedFiles(parsedFiles);
// 전역 상태에도 복원
if (typeof window !== 'undefined') {
(window as any).globalFileState = {
...(window as any).globalFileState,
[component.id]: parsedFiles
};
}
return;
}
}
} catch (e) {
console.warn("localStorage 백업 복원 실패:", e);
}
// 최신 파일과 현재 파일 비교
if (JSON.stringify(currentFiles) !== JSON.stringify(uploadedFiles)) {
console.log("🔄 useEffect에서 파일 목록 변경 감지:", {
currentFiles: currentFiles.length,
uploadedFiles: uploadedFiles.length,
currentFilesData: currentFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName })),
uploadedFilesData: uploadedFiles.map(f => ({ objid: f.objid, name: f.realFileName }))
});
setUploadedFiles(currentFiles);
setForceUpdate(prev => prev + 1);
}
});
}, [loadComponentFiles, component.id, (component as any)?.uploadedFiles, (component as any)?.lastFileUpdate]);
// 전역 상태 변경 감지 (모든 파일 컴포넌트 동기화 + 화면 복원)
useEffect(() => {
@@ -164,9 +341,9 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
const logMessage = isRestore ? "🔄 화면 복원으로 파일 상태 동기화" : "✅ 파일 상태 동기화 적용";
console.log(logMessage, {
componentId: component.id,
이전파일수: uploadedFiles.length,
새파일수: files.length,
files: files.map((f: any) => ({ objid: f.objid, name: f.realFileName }))
이전파일수: uploadedFiles?.length || 0,
새파일수: files?.length || 0,
files: files?.map((f: any) => ({ objid: f.objid, name: f.realFileName })) || []
});
setUploadedFiles(files);
@@ -203,8 +380,18 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
// 파일 선택 핸들러
const handleFileSelect = useCallback(() => {
console.log("🎯 handleFileSelect 호출됨:", {
hasFileInputRef: !!fileInputRef.current,
fileInputRef: fileInputRef.current,
fileInputType: fileInputRef.current?.type,
fileInputHidden: fileInputRef.current?.className
});
if (fileInputRef.current) {
console.log("✅ fileInputRef.current.click() 호출");
fileInputRef.current.click();
} else {
console.log("❌ fileInputRef.current가 null입니다");
}
}, []);
@@ -265,16 +452,31 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
toast.loading("파일을 업로드하는 중...", { id: 'file-upload' });
try {
// targetObjid 생성 (InteractiveDataTable과 호환)
// targetObjid 생성 - 템플릿 vs 데이터 파일 구분
const tableName = formData?.tableName || component.tableName || 'default_table';
const recordId = formData?.id || 'temp_record';
const recordId = formData?.id;
const screenId = formData?.screenId;
const columnName = component.columnName || component.id;
const targetObjid = `${tableName}:${recordId}:${columnName}`;
let targetObjid;
if (recordId && tableName) {
// 실제 데이터 파일
targetObjid = `${tableName}:${recordId}:${columnName}`;
console.log("📁 실제 데이터 파일 업로드:", targetObjid);
} else if (screenId) {
// 템플릿 파일
targetObjid = `screen_${screenId}:${component.id}`;
console.log("🎨 템플릿 파일 업로드:", targetObjid);
} else {
// 기본값 (화면관리에서 사용)
targetObjid = `temp_${component.id}`;
console.log("📝 기본 파일 업로드:", targetObjid);
}
const uploadData = {
tableName: tableName,
fieldName: columnName,
recordId: recordId,
recordId: recordId || `temp_${component.id}`,
docType: component.fileConfig?.docType || 'DOCUMENT',
docTypeName: component.fileConfig?.docTypeName || '일반 문서',
targetObjid: targetObjid, // InteractiveDataTable 호환을 위한 targetObjid 추가
@@ -358,6 +560,13 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
globalFileState[component.id] = updatedFiles;
(window as any).globalFileState = globalFileState;
// 🌐 전역 파일 저장소에 새 파일 등록 (페이지 간 공유용)
GlobalFileManager.registerFiles(newFiles, {
uploadPage: window.location.pathname,
componentId: component.id,
screenId: formData?.screenId,
});
// 모든 파일 컴포넌트에 동기화 이벤트 발생
const syncEvent = new CustomEvent('globalFileStateChanged', {
detail: {
@@ -429,6 +638,11 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
if (safeComponentConfig.onFileUpload) {
safeComponentConfig.onFileUpload(newFiles);
}
// 성공 시 토스트 처리
setUploadStatus('idle');
toast.dismiss('file-upload');
toast.success(`${newFiles.length}개 파일 업로드 완료`);
} else {
console.error("❌ 파일 업로드 실패:", response);
throw new Error(response.message || (response as any).error || '파일 업로드에 실패했습니다.');
@@ -436,15 +650,31 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
} catch (error) {
console.error('파일 업로드 오류:', error);
setUploadStatus('error');
toast.dismiss();
toast.dismiss('file-upload');
toast.error(`파일 업로드 오류: ${error instanceof Error ? error.message : '알 수 없는 오류'}`);
}
}, [safeComponentConfig, uploadedFiles, onFormDataChange, component.columnName, component.id, formData]);
// 파일 뷰어 열기
const handleFileView = useCallback((file: FileInfo) => {
setViewerFile(file);
setIsViewerOpen(true);
}, []);
// 파일 뷰어 닫기
const handleViewerClose = useCallback(() => {
setIsViewerOpen(false);
setViewerFile(null);
}, []);
// 파일 다운로드
const handleFileDownload = useCallback(async (file: FileInfo) => {
try {
await downloadFile(file.objid, file.realFileName);
await downloadFile({
fileId: file.objid,
serverFilename: file.savedFileName,
originalName: file.realFileName
});
toast.success(`${file.realFileName} 다운로드 완료`);
} catch (error) {
console.error('파일 다운로드 오류:', error);
@@ -458,7 +688,8 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
const fileId = typeof file === 'string' ? file : file.objid;
const fileName = typeof file === 'string' ? '파일' : file.realFileName;
await deleteFile(fileId);
const serverFilename = typeof file === 'string' ? 'temp_file' : file.savedFileName;
await deleteFile(fileId, serverFilename);
const updatedFiles = uploadedFiles.filter(f => f.objid !== fileId);
setUploadedFiles(updatedFiles);
@@ -512,25 +743,23 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
}
}, [uploadedFiles, onUpdate, component.id]);
// 파일 뷰어
const handleFileView = useCallback((file: FileInfo) => {
setViewerFile(file);
setIsViewerOpen(true);
}, []);
const handleViewerClose = useCallback(() => {
setIsViewerOpen(false);
setViewerFile(null);
}, []);
// 드래그 앤 드롭 핸들러
const handleDragOver = useCallback((e: React.DragEvent) => {
console.log("🎯 드래그 오버 이벤트 감지:", {
readonly: safeComponentConfig.readonly,
disabled: safeComponentConfig.disabled,
dragOver: dragOver
});
e.preventDefault();
e.stopPropagation();
if (!safeComponentConfig.readonly && !safeComponentConfig.disabled) {
setDragOver(true);
console.log("✅ 드래그 오버 활성화");
} else {
console.log("❌ 드래그 차단됨: readonly 또는 disabled");
}
}, [safeComponentConfig.readonly, safeComponentConfig.disabled]);
}, [safeComponentConfig.readonly, safeComponentConfig.disabled, dragOver]);
const handleDragLeave = useCallback((e: React.DragEvent) => {
e.preventDefault();
@@ -553,27 +782,53 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
// 클릭 핸들러
const handleClick = useCallback((e: React.MouseEvent) => {
console.log("🖱️ 파일 업로드 영역 클릭:", {
readonly: safeComponentConfig.readonly,
disabled: safeComponentConfig.disabled,
hasHandleFileSelect: !!handleFileSelect
});
e.preventDefault();
e.stopPropagation();
if (!safeComponentConfig.readonly && !safeComponentConfig.disabled) {
console.log("✅ 파일 선택 함수 호출");
handleFileSelect();
} else {
console.log("❌ 클릭 차단됨: readonly 또는 disabled");
}
onClick?.();
}, [safeComponentConfig.readonly, safeComponentConfig.disabled, handleFileSelect, onClick]);
return (
<div style={componentStyle} className={className}>
{/* 라벨 렌더링 */}
{component.label && component.style?.labelDisplay !== false && (
<div
style={{
...componentStyle,
border: 'none !important',
boxShadow: 'none !important',
outline: 'none !important',
backgroundColor: 'transparent !important',
padding: '0px !important',
borderRadius: '0px !important',
marginBottom: '8px !important'
}}
className={`${className} file-upload-container`}
>
{/* 라벨 렌더링 - 주석처리 */}
{/* {component.label && component.style?.labelDisplay !== false && (
<label
style={{
position: "absolute",
top: "-25px",
top: "-20px",
left: "0px",
fontSize: component.style?.labelFontSize || "14px",
color: component.style?.labelColor || "#3b83f6",
fontWeight: "500",
...(isInteractive && component.style ? component.style : {}),
fontSize: "12px",
color: "rgb(107, 114, 128)",
fontWeight: "400",
background: "transparent !important",
border: "none !important",
boxShadow: "none !important",
outline: "none !important",
padding: "0px !important",
margin: "0px !important"
}}
>
{component.label}
@@ -581,18 +836,22 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
<span style={{ color: "#ef4444" }}>*</span>
)}
</label>
)}
)} */}
<div className="w-full h-full flex flex-col space-y-2">
{/* 디자인 모드가 아닐 때만 파일 업로드 영역 표시 */}
{!isDesignMode && (
<div
className="w-full h-full flex flex-col space-y-2"
style={{ minHeight: '120px' }}
>
{/* 파일 업로드 영역 - 주석처리 */}
{/* {!isDesignMode && (
<div
className={`
border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors
border border-dashed rounded p-2 text-center cursor-pointer transition-colors
${dragOver ? 'border-blue-400 bg-blue-50' : 'border-gray-300'}
${safeComponentConfig.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
${uploadStatus === 'uploading' ? 'opacity-75' : ''}
`}
style={{ minHeight: '50px' }}
onClick={handleClick}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
@@ -603,13 +862,13 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
<input
ref={fileInputRef}
type="file"
multiple={safeComponentConfig.multiple}
accept={safeComponentConfig.accept}
onChange={handleInputChange}
multiple={safeComponentConfig.multiple}
accept={safeComponentConfig.accept}
onChange={handleInputChange}
className="hidden"
disabled={safeComponentConfig.disabled}
/>
{uploadStatus === 'uploading' ? (
<div className="flex flex-col items-center space-y-2">
<div className="flex items-center space-x-2">
@@ -620,60 +879,82 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
) : (
<>
<div>
<Upload className="mx-auto h-12 w-12 text-gray-400 mb-4" />
<p className="text-lg font-medium text-gray-900 mb-2">
{safeComponentConfig.dragDropText || "파일을 드래그하거나 클릭하여 업로드하세요"}
</p>
<p className="text-xs text-gray-500 mt-1">
{safeComponentConfig.accept && `지원 형식: ${safeComponentConfig.accept}`}
{safeComponentConfig.maxSize && ` • 최대 ${formatFileSize(safeComponentConfig.maxSize)}`}
{safeComponentConfig.multiple && ' • 여러 파일 선택 가능'}
<Upload className="mx-auto h-6 w-6 text-gray-400 mb-2" />
<p className="text-xs font-medium text-gray-600">
파일 업로드
</p>
</div>
</>
)}
</div>
)}
)} */}
{/* 업로드된 파일 목록 - 디자인 모드에서는 항상 표시 */}
{(uploadedFiles.length > 0 || isDesignMode) && (
{/* 업로드된 파일 목록 - 항상 표시 */}
{(() => {
const shouldShow = true; // 항상 표시하도록 강제
console.log("🎯🎯🎯 파일 목록 렌더링 조건 체크:", {
uploadedFilesLength: uploadedFiles.length,
isDesignMode: isDesignMode,
shouldShow: shouldShow,
uploadedFiles: uploadedFiles.map(f => ({ objid: f.objid, name: f.realFileName })),
"🚨 렌더링 여부": shouldShow ? "✅ 렌더링됨" : "❌ 렌더링 안됨"
});
return shouldShow;
})() && (
<div className="flex-1 overflow-y-auto">
<div className="space-y-2">
<div className="flex items-center justify-between">
<h4 className="text-sm font-medium text-gray-700">
<h4 className="text-sm font-medium text-gray-700" style={{ textShadow: 'none', boxShadow: 'none' }}>
업로드된 파일 ({uploadedFiles.length})
</h4>
{uploadedFiles.length > 0 && (
<Badge variant="secondary" className="text-xs">
총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
</Badge>
)}
<div className="flex items-center space-x-2">
{uploadedFiles.length > 0 && (
<Badge variant="secondary" className="text-xs">
총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
</Badge>
)}
<Button
variant="outline"
size="sm"
className="h-7 px-2 text-xs"
onClick={() => setIsFileManagerOpen(true)}
style={{
boxShadow: 'none !important',
textShadow: 'none !important',
filter: 'none !important',
WebkitBoxShadow: 'none !important',
MozBoxShadow: 'none !important'
}}
>
자세히보기
</Button>
</div>
</div>
{uploadedFiles.length > 0 ? (
<div className="space-y-1">
{uploadedFiles.map((file) => (
<div key={file.objid} className="flex items-center space-x-2 p-2 bg-gray-50 rounded text-sm">
<div key={file.objid} className="flex items-center space-x-3 p-2 bg-gray-50 rounded text-sm hover:bg-gray-100 transition-colors" style={{ boxShadow: 'none', textShadow: 'none' }}>
<div className="flex-shrink-0">
{getFileIcon(file.fileExt)}
</div>
<span className="flex-1 truncate text-gray-900">
<span className="flex-1 truncate text-gray-900 cursor-pointer" onClick={() => handleFileView(file)} style={{ textShadow: 'none' }}>
{file.realFileName}
</span>
<span className="text-xs text-gray-500">
<span className="text-xs text-gray-500" style={{ textShadow: 'none' }}>
{formatFileSize(file.fileSize)}
</span>
</div>
))}
<div className="text-xs text-gray-500 mt-2 text-center">
💡 파일 관리는 상세설정에서 가능합니다
<div className="text-xs text-gray-500 mt-2 text-center" style={{ textShadow: 'none' }}>
💡 파일명 클릭으로 미리보기 또는 "전체 자세히보기"로 파일 관리
</div>
</div>
) : (
<div className="flex flex-col items-center justify-center py-8 text-gray-500">
<div className="flex flex-col items-center justify-center py-8 text-gray-500" style={{ textShadow: 'none' }}>
<File className="w-12 h-12 mb-3 text-gray-300" />
<p className="text-sm font-medium">업로드된 파일이 없습니다</p>
<p className="text-xs text-gray-400 mt-1">상세설정에서 파일을 업로드하세요</p>
<p className="text-sm font-medium" style={{ textShadow: 'none' }}>업로드된 파일이 없습니다</p>
<p className="text-xs text-gray-400 mt-1" style={{ textShadow: 'none' }}>상세설정에서 파일을 업로드하세요</p>
</div>
)}
</div>
@@ -694,6 +975,20 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
isOpen={isViewerOpen}
onClose={handleViewerClose}
onDownload={handleFileDownload}
onDelete={!isDesignMode ? handleFileDelete : undefined}
/>
{/* 파일 관리 모달 */}
<FileManagerModal
isOpen={isFileManagerOpen}
onClose={() => setIsFileManagerOpen(false)}
uploadedFiles={uploadedFiles}
onFileUpload={handleFileUpload}
onFileDownload={handleFileDownload}
onFileDelete={handleFileDelete}
onFileView={handleFileView}
config={safeComponentConfig}
isDesignMode={isDesignMode}
/>
</div>
);

486
frontend/lib/registry/components/file-upload/FileViewerModal.tsx
View File

@@ -1,39 +1,176 @@
"use client";
import React, { useState, useEffect } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { FileInfo } from "./types";
import { Download, X, AlertTriangle, FileText, Image as ImageIcon } from "lucide-react";
import { Download, X, AlertTriangle, FileText, Trash2, ExternalLink } from "lucide-react";
import { formatFileSize } from "@/lib/utils";
import { API_BASE_URL } from "@/lib/api/client";
// Office 문서 렌더링을 위한 CDN 라이브러리 로드
const loadOfficeLibrariesFromCDN = async () => {
if (typeof window === 'undefined') return { XLSX: null, mammoth: null };
try {
// XLSX 라이브러리가 이미 로드되어 있는지 확인
if (!(window as any).XLSX) {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js';
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
// mammoth 라이브러리가 이미 로드되어 있는지 확인
if (!(window as any).mammoth) {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js';
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
return {
XLSX: (window as any).XLSX,
mammoth: (window as any).mammoth
};
} catch (error) {
console.error('Office 라이브러리 CDN 로드 실패:', error);
return { XLSX: null, mammoth: null };
}
};
interface FileViewerModalProps {
file: FileInfo | null;
isOpen: boolean;
onClose: () => void;
onDownload?: (file: FileInfo) => void;
onDelete?: (file: FileInfo) => void;
}
/**
* 파일 뷰어 모달 컴포넌트
* 다양한 파일 타입에 대한 미리보기 기능 제공
*/
export const FileViewerModal: React.FC<FileViewerModalProps> = ({
file,
isOpen,
onClose,
onDownload,
onDelete,
}) => {
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
const [previewError, setPreviewError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [renderedContent, setRenderedContent] = useState<string | null>(null);
// Office 문서를 CDN 라이브러리로 렌더링하는 함수
const renderOfficeDocument = async (blob: Blob, fileExt: string, fileName: string) => {
try {
setIsLoading(true);
// CDN에서 라이브러리 로드
const { XLSX, mammoth } = await loadOfficeLibrariesFromCDN();
if (fileExt === "docx" && mammoth) {
// Word 문서 렌더링
const arrayBuffer = await blob.arrayBuffer();
const result = await mammoth.convertToHtml({ arrayBuffer });
const htmlContent = `
<div>
<h4 style="margin: 0 0 15px 0; color: #333; font-size: 16px;">📄 ${fileName}</h4>
<div class="word-content" style="max-height: 500px; overflow-y: auto; padding: 20px; background: white; border: 1px solid #ddd; border-radius: 5px; line-height: 1.6; font-family: 'Times New Roman', serif;">
${result.value || '내용을 읽을 수 없습니다.'}
</div>
</div>
`;
setRenderedContent(htmlContent);
return true;
} else if (["xlsx", "xls"].includes(fileExt) && XLSX) {
// Excel 문서 렌더링
const arrayBuffer = await blob.arrayBuffer();
const workbook = XLSX.read(arrayBuffer, { type: 'array' });
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const html = XLSX.utils.sheet_to_html(worksheet, {
table: { className: 'excel-table' }
});
const htmlContent = `
<div>
<h4 style="margin: 0 0 10px 0; color: #333; font-size: 16px;">📊 ${fileName}</h4>
<p style="margin: 0 0 15px 0; color: #666; font-size: 14px;">시트: ${sheetName}</p>
<div style="max-height: 400px; overflow: auto; border: 1px solid #ddd; border-radius: 5px;">
<style>
.excel-table { border-collapse: collapse; width: 100%; }
.excel-table td, .excel-table th { border: 1px solid #ddd; padding: 8px; text-align: left; font-size: 12px; }
.excel-table th { background-color: #f5f5f5; font-weight: bold; }
</style>
${html}
</div>
</div>
`;
setRenderedContent(htmlContent);
return true;
} else if (fileExt === "doc") {
// .doc 파일은 .docx로 변환 안내
const htmlContent = `
<div style="text-align: center; padding: 40px;">
<h3 style="color: #333; margin-bottom: 15px;">📄 ${fileName}</h3>
<p style="color: #666; margin-bottom: 10px;">.doc 파일은 .docx로 변환 후 업로드해주세요.</p>
<p style="color: #666; font-size: 14px;">(.docx 파일만 미리보기 지원)</p>
</div>
`;
setRenderedContent(htmlContent);
return true;
} else if (["ppt", "pptx"].includes(fileExt)) {
// PowerPoint는 미리보기 불가 안내
const htmlContent = `
<div style="text-align: center; padding: 40px;">
<h3 style="color: #333; margin-bottom: 15px;">📑 ${fileName}</h3>
<p style="color: #666; margin-bottom: 10px;">PowerPoint 파일은 브라우저에서 미리보기할 수 없습니다.</p>
<p style="color: #666; font-size: 14px;">파일을 다운로드하여 확인해주세요.</p>
</div>
`;
setRenderedContent(htmlContent);
return true;
}
return false; // 지원하지 않는 형식
} catch (error) {
console.error("Office 문서 렌더링 오류:", error);
const htmlContent = `
<div style="color: red; text-align: center; padding: 20px;">
Office 문서를 읽을 수 없습니다.<br>
파일이 손상되었거나 지원하지 않는 형식일 수 있습니다.
</div>
`;
setRenderedContent(htmlContent);
return true; // 오류 메시지라도 표시
} finally {
setIsLoading(false);
}
};
// 파일이 변경될 때마다 미리보기 URL 생성
useEffect(() => {
if (!file || !isOpen) {
setPreviewUrl(null);
setPreviewError(null);
setRenderedContent(null);
return;
}
@@ -49,16 +186,18 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
return () => URL.revokeObjectURL(url);
}
let cleanup: (() => void) | undefined;
// 서버 파일인 경우 - 미리보기 API 호출
const generatePreviewUrl = async () => {
try {
const fileExt = file.fileExt.toLowerCase();
// 미리보기 지원 파일 타입 정의
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'];
const documentExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'rtf', 'odt', 'ods', 'odp', 'hwp', 'hwpx', 'hwpml', 'hcdt', 'hpt', 'pages', 'numbers', 'keynote'];
const textExtensions = ['txt', 'md', 'json', 'xml', 'csv'];
const mediaExtensions = ['mp4', 'webm', 'ogg', 'mp3', 'wav'];
const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg"];
const documentExtensions = ["pdf","doc", "docx", "xls", "xlsx", "ppt", "pptx", "rtf", "odt", "ods", "odp", "hwp", "hwpx", "hwpml", "hcdt", "hpt", "pages", "numbers", "keynote"];
const textExtensions = ["txt", "md", "json", "xml", "csv"];
const mediaExtensions = ["mp4", "webm", "ogg", "mp3", "wav"];
const supportedExtensions = [
...imageExtensions,
@@ -68,22 +207,97 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
];
if (supportedExtensions.includes(fileExt)) {
// 실제 환경에서는 파일 서빙 API 엔드포인트 사용
const url = `/api/files/preview/${file.objid}`;
setPreviewUrl(url);
// 이미지나 PDF는 인증된 요청으로 Blob 생성
if (imageExtensions.includes(fileExt) || fileExt === "pdf") {
try {
// 인증된 요청으로 파일 데이터 가져오기
const response = await fetch(`${API_BASE_URL}/files/preview/${file.objid}`, {
headers: {
"Authorization": `Bearer ${localStorage.getItem("authToken")}`,
},
});
if (response.ok) {
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);
setPreviewUrl(blobUrl);
// 컴포넌트 언마운트 시 URL 정리를 위해 cleanup 함수 저장
cleanup = () => URL.revokeObjectURL(blobUrl);
} else {
throw new Error(`HTTP ${response.status}`);
}
} catch (error) {
console.error("파일 미리보기 로드 실패:", error);
setPreviewError("파일을 불러올 수 없습니다. 권한을 확인해주세요.");
}
} else if (documentExtensions.includes(fileExt)) {
// Office 문서는 OnlyOffice 또는 안정적인 뷰어 사용
try {
const response = await fetch(`${API_BASE_URL}/files/preview/${file.objid}`, {
headers: {
'Authorization': `Bearer ${localStorage.getItem('authToken')}`,
},
});
if (response.ok) {
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);
// Office 문서를 위한 특별한 처리 - CDN 라이브러리 사용
if (["doc", "docx", "xls", "xlsx", "ppt", "pptx"].includes(fileExt)) {
// CDN 라이브러리로 클라이언트 사이드 렌더링 시도
try {
const renderSuccess = await renderOfficeDocument(blob, fileExt, file.realFileName);
if (!renderSuccess) {
// 렌더링 실패 시 Blob URL 사용
setPreviewUrl(blobUrl);
}
} catch (error) {
console.error("Office 문서 렌더링 중 오류:", error);
// 오류 발생 시 Blob URL 사용
setPreviewUrl(blobUrl);
}
} else {
// 기타 문서는 직접 Blob URL 사용
setPreviewUrl(blobUrl);
}
return () => URL.revokeObjectURL(blobUrl); // Cleanup function
} else {
throw new Error(`HTTP ${response.status}`);
}
} catch (error) {
console.error("Office 문서 로드 실패:", error);
// 오류 발생 시 다운로드 옵션 제공
setPreviewError(`${fileExt.toUpperCase()} 문서를 미리보기할 수 없습니다. 다운로드하여 확인해주세요.`);
}
} else {
// 기타 파일은 다운로드 URL 사용
const url = `${API_BASE_URL.replace("/api", "")}/api/files/download/${file.objid}`;
setPreviewUrl(url);
}
} else {
// 지원하지 않는 파일 타입
setPreviewError(`${file.fileExt.toUpperCase()} 파일은 미리보기를 지원하지 않습니다.`);
}
} catch (error) {
console.error('미리보기 URL 생성 오류:', error);
setPreviewError('미리보기를 불러오는데 실패했습니다.');
console.error("미리보기 URL 생성 오류:", error);
setPreviewError("미리보기를 불러오는데 실패했습니다.");
} finally {
setIsLoading(false);
}
};
generatePreviewUrl();
// cleanup 함수 반환
return () => {
if (cleanup) {
cleanup();
}
};
}, [file, isOpen]);
if (!file) return null;
@@ -100,8 +314,8 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
if (previewError) {
return (
<div className="flex flex-col items-center justify-center h-96 text-gray-500">
<AlertTriangle className="w-16 h-16 mb-4" />
<div className="flex flex-col items-center justify-center h-96">
<AlertTriangle className="w-16 h-16 mb-4 text-yellow-500" />
<p className="text-lg font-medium mb-2">미리보기 불가</p>
<p className="text-sm text-center">{previewError}</p>
<Button
@@ -119,121 +333,163 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
const fileExt = file.fileExt.toLowerCase();
// 이미지 파일
if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(fileExt)) {
if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(fileExt)) {
return (
<div className="flex items-center justify-center max-h-96 overflow-hidden">
<img
src={previewUrl || ''}
src={previewUrl || ""}
alt={file.realFileName}
className="max-w-full max-h-full object-contain rounded-lg"
onError={() => setPreviewError('이미지를 불러올 수 없습니다.')}
className="max-w-full max-h-full object-contain rounded-lg shadow-lg"
onError={(e) => {
console.error("이미지 로드 오류:", previewUrl, e);
setPreviewError("이미지를 불러올 수 없습니다. 파일이 손상되었거나 서버에서 접근할 수 없습니다.");
}}
onLoad={() => {
console.log("이미지 로드 성공:", previewUrl);
}}
/>
</div>
);
}
// 텍스트 파일
if (['txt', 'md', 'json', 'xml', 'csv'].includes(fileExt)) {
if (["txt", "md", "json", "xml", "csv"].includes(fileExt)) {
return (
<div className="h-96 overflow-auto">
<iframe
src={previewUrl || ''}
src={previewUrl || ""}
className="w-full h-full border rounded-lg"
title={`${file.realFileName} 미리보기`}
onError={() => setPreviewError('텍스트 파일을 불러올 수 없습니다.')}
onError={() => setPreviewError("텍스트 파일을 불러올 수 없습니다.")}
/>
</div>
);
}
// PDF 파일
if (fileExt === 'pdf') {
if (fileExt === "pdf") {
return (
<div className="h-96">
<div className="h-96 overflow-auto">
<iframe
src={previewUrl || ''}
src={previewUrl || ""}
className="w-full h-full border rounded-lg"
title={`${file.realFileName} 미리보기`}
onError={() => setPreviewError('PDF 파일을 불러올 수 없습니다.')}
onError={() => setPreviewError("PDF 파일을 불러올 수 없습니다.")}
/>
</div>
);
}
// Microsoft Office, 한컴오피스, Apple iWork 문서 파일
if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'hwp', 'hwpx', 'hwpml', 'hcdt', 'hpt', 'pages', 'numbers', 'keynote'].includes(fileExt)) {
// Office 파일은 Google Docs Viewer 또는 Microsoft Office Online을 통해 미리보기
const officeViewerUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(previewUrl || '')}`;
return (
<div className="h-96">
<iframe
src={officeViewerUrl}
className="w-full h-full border rounded-lg"
title={`${file.realFileName} 미리보기`}
onError={() => setPreviewError('Office 문서를 불러올 수 없습니다. 파일을 다운로드하여 확인해주세요.')}
/>
</div>
);
}
// 기타 문서 파일 (RTF, ODT 등)
if (['rtf', 'odt', 'ods', 'odp'].includes(fileExt)) {
return (
<div className="flex flex-col items-center justify-center h-96 text-gray-500">
<FileText className="w-16 h-16 mb-4 text-blue-500" />
<p className="text-lg font-medium mb-2">{file.fileExt.toUpperCase()} 문서</p>
<p className="text-sm text-center mb-4">
{file.realFileName}
</p>
<div className="flex flex-col items-center space-y-2 text-xs text-gray-400">
<p>파일 크기: {formatFileSize(file.fileSize)}</p>
<p>문서 타입: {file.docTypeName || '일반 문서'}</p>
// Office 문서 (CDN 라이브러리 렌더링 또는 iframe)
if (
["doc", "docx", "xls", "xlsx", "ppt", "pptx", "hwp", "hwpx", "hwpml", "hcdt", "hpt", "pages", "numbers", "keynote"].includes(fileExt)
) {
// CDN 라이브러리로 렌더링된 콘텐츠가 있는 경우
if (renderedContent) {
return (
<div className="relative h-96 overflow-auto">
<div
className="w-full h-full p-4 border rounded-lg bg-white"
dangerouslySetInnerHTML={{ __html: renderedContent }}
/>
</div>
<Button
variant="outline"
onClick={() => onDownload?.(file)}
className="mt-4"
>
<Download className="w-4 h-4 mr-2" />
파일 다운로드
</Button>
);
}
// iframe 방식 (fallback)
return (
<div className="relative h-96 overflow-auto">
<iframe
src={previewUrl || ""}
className="w-full h-full border rounded-lg"
onError={() => {
console.log("iframe 오류 발생, fallback 옵션 제공");
setPreviewError("이 Office 문서는 브라우저에서 직접 미리보기할 수 없습니다. 다운로드하여 확인해주세요.");
}}
title={`${file.realFileName} 미리보기`}
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
onLoad={() => setIsLoading(false)}
/>
{/* 로딩 상태 */}
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-90">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
<p className="text-sm text-gray-600">Office 문서를 처리하는 중...</p>
<p className="text-xs text-gray-400 mt-1">잠시만 기다려주세요</p>
</div>
</div>
)}
{/* 오류 발생 시 fallback 옵션 */}
{previewError && (
<div className="absolute inset-0 flex flex-col items-center justify-center bg-white">
<FileText className="w-16 h-16 mb-4 text-orange-500" />
<p className="text-lg font-medium mb-2">미리보기 제한</p>
<p className="text-sm text-center mb-4 text-gray-600">
{previewError}
</p>
<div className="flex gap-2">
<Button
variant="outline"
onClick={() => onDownload?.(file)}
>
<Download className="w-4 h-4 mr-2" />
다운로드
</Button>
<Button
variant="ghost"
onClick={() => {
// 새 탭에서 파일 열기 시도
const link = document.createElement('a');
link.href = previewUrl || '';
link.target = '_blank';
link.click();
}}
>
<ExternalLink className="w-4 h-4 mr-2" />
새 탭에서 열기
</Button>
</div>
</div>
)}
</div>
);
}
// 비디오 파일
if (['mp4', 'webm', 'ogg'].includes(fileExt)) {
if (["mp4", "webm", "ogg"].includes(fileExt)) {
return (
<div className="flex items-center justify-center">
<video
controls
className="max-w-full max-h-96 rounded-lg"
onError={() => setPreviewError('비디오를 재생할 수 없습니다.')}
className="w-full max-h-96"
onError={() => setPreviewError("비디오를 재생할 수 없습니다.")}
>
<source src={previewUrl || ''} type={`video/${fileExt}`} />
브라우저가 비디오 재생을 지원하지 않습니다.
<source src={previewUrl || ""} type={`video/${fileExt}`} />
</video>
</div>
);
}
// 오디오 파일
if (['mp3', 'wav', 'ogg'].includes(fileExt)) {
if (["mp3", "wav", "ogg"].includes(fileExt)) {
return (
<div className="flex flex-col items-center justify-center h-96">
<div className="w-32 h-32 bg-gray-100 rounded-full flex items-center justify-center mb-6">
<svg className="w-16 h-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM15.657 6.343a1 1 0 011.414 0A9.972 9.972 0 0119 12a9.972 9.972 0 01-1.929 5.657 1 1 0 11-1.414-1.414A7.971 7.971 0 0017 12c0-1.594-.471-3.078-1.343-4.343a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 12a5.984 5.984 0 01-.757 2.829 1 1 0 01-1.415-1.414A3.987 3.987 0 0013 12a3.988 3.988 0 00-.172-1.171 1 1 0 010-1.414z" clipRule="evenodd" />
<path
fillRule="evenodd"
d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM15.657 6.343a1 1 0 011.414 0A9.972 9.972 0 0119 12a9.972 9.972 0 01-1.929 5.657 1 1 0 11-1.414-1.414A7.971 7.971 0 0017 12c0-1.594-.471-3.078-1.343-4.343a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 12a5.984 5.984 0 01-.757 2.829 1 1 0 01-1.415-1.414A3.987 3.987 0 0013 12a3.988 3.988 0 00-.172-1.171 1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</div>
<audio
controls
className="w-full max-w-md"
onError={() => setPreviewError('오디오를 재생할 수 없습니다.')}
onError={() => setPreviewError("오디오를 재생할 수 없습니다.")}
>
<source src={previewUrl || ''} type={`audio/${fileExt}`} />
브라우저가 오디오 재생을 지원하지 않습니다.
<source src={previewUrl || ""} type={`audio/${fileExt}`} />
</audio>
</div>
);
@@ -241,8 +497,8 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
// 기타 파일 타입
return (
<div className="flex flex-col items-center justify-center h-96 text-gray-500">
<FileText className="w-16 h-16 mb-4" />
<div className="flex flex-col items-center justify-center h-96">
<FileText className="w-16 h-16 mb-4 text-gray-400" />
<p className="text-lg font-medium mb-2">미리보기 불가</p>
<p className="text-sm text-center mb-4">
{file.fileExt.toUpperCase()} 파일은 미리보기를 지원하지 않습니다.
@@ -259,8 +515,8 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
};
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden">
<Dialog open={isOpen} onOpenChange={() => {}}>
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
@@ -271,40 +527,54 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
{file.fileExt.toUpperCase()}
</Badge>
</div>
<div className="flex items-center space-x-2">
<Button
variant="outline"
size="sm"
onClick={() => onDownload?.(file)}
>
<Download className="w-4 h-4 mr-2" />
다운로드
</Button>
<Button
variant="ghost"
size="sm"
onClick={onClose}
>
<X className="w-4 h-4" />
</Button>
</div>
</div>
{/* 파일 정보 */}
<div className="flex items-center space-x-4 text-sm text-gray-500 mt-2">
<span>크기: {formatFileSize(file.fileSize)}</span>
{file.uploadedAt && (
<span>업로드: {new Date(file.uploadedAt).toLocaleString()}</span>
)}
{file.writer && <span>작성자: {file.writer}</span>}
</div>
<DialogDescription>
파일 크기: {formatFileSize(file.size)} | 파일 형식: {file.fileExt.toUpperCase()}
</DialogDescription>
</DialogHeader>
{/* 파일 미리보기 영역 */}
<div className="flex-1 overflow-auto py-4">
<div className="flex-1 overflow-y-auto">
{renderPreview()}
</div>
{/* 파일 정보 및 액션 버튼 */}
<div className="flex items-center space-x-4 text-sm text-gray-500 mt-2">
<span>크기: {formatFileSize(file.size)}</span>
{file.uploadedAt && (
<span>업로드: {new Date(file.uploadedAt).toLocaleString()}</span>
)}
</div>
<div className="flex justify-end space-x-2 pt-4 border-t">
<Button
variant="outline"
size="sm"
onClick={() => onDownload?.(file)}
>
<Download className="w-4 h-4 mr-2" />
다운로드
</Button>
{onDelete && (
<Button
variant="outline"
size="sm"
className="text-red-600 hover:text-red-700 hover:bg-red-50"
onClick={() => onDelete(file)}
>
<Trash2 className="w-4 h-4 mr-2" />
삭제
</Button>
)}
<Button
variant="outline"
size="sm"
onClick={onClose}
>
<X className="w-4 h-4 mr-2" />
닫기
</Button>
</div>
</DialogContent>
</Dialog>
);
};
};

13
frontend/lib/registry/components/file-upload/types.ts
View File

@@ -13,14 +13,14 @@ export interface FileInfo {
fileSize: number;
fileExt: string;
filePath: string;
docType: string;
docTypeName: string;
docType?: string;
docTypeName?: string;
targetObjid: string;
parentTargetObjid?: string;
companyCode: string;
writer: string;
regdate: string;
status: string;
companyCode?: string;
writer?: string;
regdate?: string;
status?: string;
// 추가 호환성 속성들
path?: string; // filePath와 동일
@@ -97,6 +97,7 @@ export type FileUploadStatus = 'idle' | 'uploading' | 'success' | 'error';
export interface FileUploadResponse {
success: boolean;
data?: FileInfo[];
files?: FileInfo[];
message?: string;
error?: string;
}