609 lines
22 KiB
TypeScript
609 lines
22 KiB
TypeScript
|
import React, { useState, useCallback, useRef, useEffect } from "react";
|
||
|
|
import { Upload, X, File, Image, Eye, Download, AlertCircle, CheckCircle, Loader2 } from "lucide-react";
|
||
|
|
import { FileComponent, AttachedFileInfo } from "@/types/screen";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import { apiClient } from "@/lib/api/client";
|
||
|
|
import { useAuth } from "@/hooks/useAuth";
|
||
|
|
|
||
|
|
interface FileUploadProps {
|
||
|
|
component: FileComponent;
|
||
|
|
onUpdateComponent: (updates: Partial<FileComponent>) => void;
|
||
|
|
userInfo?: any; // 사용자 정보 (선택적)
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 독립적인 File 컴포넌트
|
||
|
|
* attach_file_info 테이블 기반 파일 관리
|
||
|
|
*/
|
||
|
|
export function FileUpload({ component, onUpdateComponent, userInfo }: FileUploadProps) {
|
||
|
|
const [isDragOver, setIsDragOver] = useState(false);
|
||
|
|
const [uploadQueue, setUploadQueue] = useState<File[]>([]);
|
||
|
|
const [localUploadedFiles, setLocalUploadedFiles] = useState<AttachedFileInfo[]>(component.uploadedFiles || []);
|
||
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
|
|
|
||
|
|
const { fileConfig } = component;
|
||
|
|
const { user: authUser, isLoading, isLoggedIn } = useAuth(); // 인증 상태도 함께 가져오기
|
||
|
|
|
||
|
|
// props로 받은 userInfo를 우선 사용, 없으면 useAuth에서 가져온 user 사용
|
||
|
|
const user = userInfo || authUser;
|
||
|
|
|
||
|
|
// 초기화 시점의 사용자 정보를 저장 (타이밍 문제 해결)
|
||
|
|
const [initialUser, setInitialUser] = useState(user);
|
||
|
|
|
||
|
|
// 🎯 최신 사용자 정보를 추적하는 ref (useCallback 내부에서 접근 가능)
|
||
|
|
const userRef = useRef(user);
|
||
|
|
|
||
|
|
// 사용자 정보 디버깅
|
||
|
|
useEffect(() => {
|
||
|
|
console.log("👤 File 컴포넌트 인증 상태 및 사용자 정보:", {
|
||
|
|
isLoading,
|
||
|
|
isLoggedIn,
|
||
|
|
hasUser: !!user,
|
||
|
|
user: user,
|
||
|
|
userId: user?.userId,
|
||
|
|
company_code: user?.company_code,
|
||
|
|
companyCode: user?.companyCode,
|
||
|
|
userType: typeof user,
|
||
|
|
userKeys: user ? Object.keys(user) : "no user",
|
||
|
|
userValues: user ? Object.entries(user) : "no user",
|
||
|
|
});
|
||
|
|
|
||
|
|
// 사용자 정보가 유효하면 initialUser와 userRef 업데이트
|
||
|
|
if (user && user.userId) {
|
||
|
|
setInitialUser(user);
|
||
|
|
userRef.current = user; // 🎯 ref에도 최신 정보 저장
|
||
|
|
console.log("✅ 초기 사용자 정보 업데이트:", { userId: user.userId, companyCode: user.companyCode });
|
||
|
|
}
|
||
|
|
|
||
|
|
// 회사 관련 필드들 확인
|
||
|
|
if (user) {
|
||
|
|
console.log("🔍 회사 관련 필드 검색:", {
|
||
|
|
company_code: user.company_code,
|
||
|
|
companyCode: user.companyCode,
|
||
|
|
company: user.company,
|
||
|
|
deptCode: user.deptCode,
|
||
|
|
partnerCd: user.partnerCd,
|
||
|
|
// 모든 필드에서 company 관련된 것들 찾기
|
||
|
|
allFields: Object.keys(user).filter(
|
||
|
|
(key) =>
|
||
|
|
key.toLowerCase().includes("company") ||
|
||
|
|
key.toLowerCase().includes("corp") ||
|
||
|
|
key.toLowerCase().includes("code"),
|
||
|
|
),
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
console.warn("⚠️ 사용자 정보가 없습니다. 인증 상태 확인 필요");
|
||
|
|
}
|
||
|
|
}, [user, isLoading, isLoggedIn]);
|
||
|
|
|
||
|
|
// 컴포넌트 props가 변경될 때 로컬 상태 동기화
|
||
|
|
useEffect(() => {
|
||
|
|
console.log("🔄 File 컴포넌트 props 변경:", {
|
||
|
|
propsUploadedFiles: component.uploadedFiles?.length || 0,
|
||
|
|
localUploadedFiles: localUploadedFiles.length,
|
||
|
|
});
|
||
|
|
setLocalUploadedFiles(component.uploadedFiles || []);
|
||
|
|
}, [component.uploadedFiles]);
|
||
|
|
|
||
|
|
// 실제 사용할 uploadedFiles는 로컬 상태
|
||
|
|
const uploadedFiles = localUploadedFiles;
|
||
|
|
|
||
|
|
// 파일 크기 포맷팅
|
||
|
|
const formatFileSize = (bytes: number): string => {
|
||
|
|
if (bytes === 0) return "0 Bytes";
|
||
|
|
const k = 1024;
|
||
|
|
const sizes = ["Bytes", "KB", "MB", "GB"];
|
||
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||
|
|
};
|
||
|
|
|
||
|
|
// 파일 타입 아이콘 결정
|
||
|
|
const getFileIcon = (fileExt: string) => {
|
||
|
|
const ext = fileExt.toLowerCase();
|
||
|
|
if (["jpg", "jpeg", "png", "gif", "webp"].includes(ext)) {
|
||
|
|
return <Image className="h-5 w-5 text-blue-500" />;
|
||
|
|
}
|
||
|
|
return <File className="h-5 w-5 text-gray-500" />;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 파일 확장자 검증
|
||
|
|
const isFileTypeAllowed = (file: File): boolean => {
|
||
|
|
const fileName = file.name.toLowerCase();
|
||
|
|
return fileConfig.accept.some((accept) => {
|
||
|
|
if (accept.startsWith(".")) {
|
||
|
|
return fileName.endsWith(accept);
|
||
|
|
}
|
||
|
|
if (accept.includes("/*")) {
|
||
|
|
const type = accept.split("/")[0];
|
||
|
|
return file.type.startsWith(type);
|
||
|
|
}
|
||
|
|
return file.type === accept;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 파일 선택 핸들러
|
||
|
|
const handleFileSelect = useCallback(
|
||
|
|
(files: FileList | null) => {
|
||
|
|
console.log("📁 파일 선택됨:", files ? Array.from(files).map((f) => f.name) : "없음");
|
||
|
|
if (!files) return;
|
||
|
|
|
||
|
|
const fileArray = Array.from(files);
|
||
|
|
const validFiles: File[] = [];
|
||
|
|
const errors: string[] = [];
|
||
|
|
|
||
|
|
console.log("🔍 파일 검증 시작:", {
|
||
|
|
totalFiles: fileArray.length,
|
||
|
|
currentUploadedCount: uploadedFiles.length,
|
||
|
|
maxFiles: fileConfig.maxFiles,
|
||
|
|
maxSize: fileConfig.maxSize,
|
||
|
|
allowedTypes: fileConfig.accept,
|
||
|
|
});
|
||
|
|
|
||
|
|
// 파일 검증
|
||
|
|
fileArray.forEach((file) => {
|
||
|
|
console.log(`📄 파일 검증: ${file.name} (${file.size} bytes, ${file.type})`);
|
||
|
|
|
||
|
|
// 파일 타입 검증
|
||
|
|
if (!isFileTypeAllowed(file)) {
|
||
|
|
errors.push(`${file.name}: 허용되지 않는 파일 타입입니다.`);
|
||
|
|
console.log(`❌ 파일 타입 거부: ${file.name}`);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 파일 크기 검증
|
||
|
|
if (file.size > fileConfig.maxSize * 1024 * 1024) {
|
||
|
|
errors.push(`${file.name}: 파일 크기가 ${fileConfig.maxSize}MB를 초과합니다.`);
|
||
|
|
console.log(`❌ 파일 크기 초과: ${file.name} (${file.size} > ${fileConfig.maxSize * 1024 * 1024})`);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 최대 파일 수 검증
|
||
|
|
if (uploadedFiles.length + validFiles.length >= fileConfig.maxFiles) {
|
||
|
|
errors.push(`최대 ${fileConfig.maxFiles}개까지만 업로드할 수 있습니다.`);
|
||
|
|
console.log(`❌ 최대 파일 수 초과`);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
validFiles.push(file);
|
||
|
|
console.log(`✅ 파일 검증 통과: ${file.name}`);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 에러가 있으면 알림
|
||
|
|
if (errors.length > 0) {
|
||
|
|
console.error("💥 파일 업로드 오류:", errors);
|
||
|
|
// TODO: Toast 알림 표시
|
||
|
|
}
|
||
|
|
|
||
|
|
// 유효한 파일들을 업로드 큐에 추가
|
||
|
|
if (validFiles.length > 0) {
|
||
|
|
console.log(
|
||
|
|
"✅ 유효한 파일들 업로드 큐에 추가:",
|
||
|
|
validFiles.map((f) => f.name),
|
||
|
|
);
|
||
|
|
setUploadQueue((prev) => [...prev, ...validFiles]);
|
||
|
|
|
||
|
|
if (fileConfig.autoUpload) {
|
||
|
|
console.log("🚀 자동 업로드 시작");
|
||
|
|
// 자동 업로드 실행
|
||
|
|
validFiles.forEach(uploadFile);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
console.log("❌ 업로드할 유효한 파일이 없음");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[fileConfig, uploadedFiles.length],
|
||
|
|
);
|
||
|
|
|
||
|
|
// 파일 업로드 함수 (실시간 상태 조회로 타이밍 문제 해결)
|
||
|
|
const uploadFile = useCallback(
|
||
|
|
async (file: File) => {
|
||
|
|
console.log("📤 파일 업로드 시작:", file.name);
|
||
|
|
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append("files", file);
|
||
|
|
formData.append("docType", fileConfig.docType);
|
||
|
|
formData.append("docTypeName", fileConfig.docTypeName);
|
||
|
|
|
||
|
|
// 🎯 최신 사용자 정보 참조 (ref를 통해 실시간 값 접근)
|
||
|
|
const currentUser = userRef.current;
|
||
|
|
|
||
|
|
// 실시간 사용자 정보 디버깅
|
||
|
|
console.log("🔍 FileUpload - uploadFile ref를 통한 실시간 상태:", {
|
||
|
|
hasCurrentUser: !!currentUser,
|
||
|
|
currentUser: currentUser
|
||
|
|
? {
|
||
|
|
userId: currentUser.userId,
|
||
|
|
companyCode: currentUser.companyCode,
|
||
|
|
company_code: currentUser.company_code,
|
||
|
|
}
|
||
|
|
: null,
|
||
|
|
// 기존 상태와 비교
|
||
|
|
originalUser: user,
|
||
|
|
originalInitialUser: initialUser,
|
||
|
|
refExists: !!userRef.current,
|
||
|
|
});
|
||
|
|
|
||
|
|
// 사용자 정보가 로드되지 않은 경우 잠시 대기
|
||
|
|
if (isLoading) {
|
||
|
|
console.log("⏳ 사용자 정보 로딩 중... 업로드 대기");
|
||
|
|
setTimeout(() => uploadFile(file), 500); // 500ms 후 재시도
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 사용자 정보가 없는 경우 - 무한루프 방지로 재시도 제한
|
||
|
|
if (!user && isLoggedIn) {
|
||
|
|
console.warn("⚠️ 로그인은 되어 있지만 사용자 정보가 없음. DEFAULT로 진행");
|
||
|
|
// 무한루프 방지: 재시도하지 않고 DEFAULT로 진행
|
||
|
|
// setTimeout(() => uploadFile(file), 1000); // 1초 후 재시도
|
||
|
|
// return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 사용자 정보 추가 (실시간 currentUser 사용으로 타이밍 문제 해결)
|
||
|
|
const effectiveUser = currentUser || user || initialUser;
|
||
|
|
const companyCode = effectiveUser?.companyCode || effectiveUser?.company_code || effectiveUser?.deptCode;
|
||
|
|
|
||
|
|
if (companyCode) {
|
||
|
|
// "*"는 실제 회사코드이므로 그대로 사용
|
||
|
|
formData.append("companyCode", companyCode);
|
||
|
|
console.log("✅ 회사코드 추가:", companyCode);
|
||
|
|
} else {
|
||
|
|
console.warn("⚠️ 회사코드가 없음, DEFAULT 사용. 사용자 정보:", {
|
||
|
|
user: user,
|
||
|
|
initialUser: initialUser,
|
||
|
|
effectiveUser: effectiveUser,
|
||
|
|
companyCode: effectiveUser?.companyCode,
|
||
|
|
company_code: effectiveUser?.company_code,
|
||
|
|
deptCode: effectiveUser?.deptCode,
|
||
|
|
isLoading,
|
||
|
|
isLoggedIn,
|
||
|
|
allUserKeys: effectiveUser ? Object.keys(effectiveUser) : "no user",
|
||
|
|
});
|
||
|
|
formData.append("companyCode", "DEFAULT");
|
||
|
|
}
|
||
|
|
|
||
|
|
if (effectiveUser?.userId) {
|
||
|
|
formData.append("writer", effectiveUser.userId);
|
||
|
|
console.log("✅ 작성자 추가:", effectiveUser.userId);
|
||
|
|
} else {
|
||
|
|
console.warn("⚠️ 사용자ID가 없음, system 사용");
|
||
|
|
formData.append("writer", "system");
|
||
|
|
}
|
||
|
|
|
||
|
|
// FormData 내용 디버깅
|
||
|
|
console.log("📋 FormData 내용 확인:");
|
||
|
|
for (const [key, value] of formData.entries()) {
|
||
|
|
console.log(` ${key}:`, value);
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
// 업로드 중 상태 표시를 위한 임시 파일 정보 생성
|
||
|
|
const tempFileInfo: AttachedFileInfo = {
|
||
|
|
objid: `temp_${Date.now()}`,
|
||
|
|
savedFileName: "",
|
||
|
|
realFileName: file.name,
|
||
|
|
fileSize: file.size,
|
||
|
|
fileExt: file.name.split(".").pop() || "",
|
||
|
|
filePath: "",
|
||
|
|
docType: fileConfig.docType,
|
||
|
|
docTypeName: fileConfig.docTypeName,
|
||
|
|
targetObjid: "",
|
||
|
|
companyCode: "",
|
||
|
|
writer: "",
|
||
|
|
regdate: new Date().toISOString(),
|
||
|
|
status: "UPLOADING",
|
||
|
|
uploadProgress: 0,
|
||
|
|
isUploading: true,
|
||
|
|
};
|
||
|
|
|
||
|
|
console.log("📋 임시 파일 정보 생성:", tempFileInfo);
|
||
|
|
|
||
|
|
const newUploadedFiles = [...uploadedFiles, tempFileInfo];
|
||
|
|
console.log("📊 업데이트 전 파일 목록:", uploadedFiles.length, "개");
|
||
|
|
console.log("📊 업데이트 후 파일 목록:", newUploadedFiles.length, "개");
|
||
|
|
|
||
|
|
// 로컬 상태 즉시 업데이트
|
||
|
|
setLocalUploadedFiles(newUploadedFiles);
|
||
|
|
|
||
|
|
// 임시 파일 정보를 업로드된 파일 목록에 추가
|
||
|
|
console.log("🔄 onUpdateComponent 호출 중...");
|
||
|
|
onUpdateComponent({
|
||
|
|
uploadedFiles: newUploadedFiles,
|
||
|
|
});
|
||
|
|
console.log("✅ onUpdateComponent 호출 완료");
|
||
|
|
|
||
|
|
console.log("🚀 API 호출 시작 - /files/upload");
|
||
|
|
|
||
|
|
// 실제 API 호출 (apiClient 사용으로 자동 JWT 토큰 추가)
|
||
|
|
// FormData 사용 시 Content-Type을 삭제하여 boundary가 자동 설정되도록 함
|
||
|
|
const response = await apiClient.post("/files/upload", formData, {
|
||
|
|
headers: {
|
||
|
|
"Content-Type": undefined, // axios가 자동으로 multipart/form-data를 설정하도록
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = response.data;
|
||
|
|
console.log("📡 API 응답 성공:", result);
|
||
|
|
|
||
|
|
if (!result.success || !result.files || result.files.length === 0) {
|
||
|
|
throw new Error(result.message || "파일 업로드 실패");
|
||
|
|
}
|
||
|
|
|
||
|
|
// API 응답에서 실제 파일 정보 받아오기
|
||
|
|
const uploadedFileInfo = result.files[0]; // 현재는 하나씩 업로드
|
||
|
|
const successFileInfo: AttachedFileInfo = {
|
||
|
|
objid: uploadedFileInfo.objid,
|
||
|
|
savedFileName: uploadedFileInfo.savedFileName,
|
||
|
|
realFileName: uploadedFileInfo.realFileName,
|
||
|
|
fileSize: uploadedFileInfo.fileSize,
|
||
|
|
fileExt: uploadedFileInfo.fileExt,
|
||
|
|
filePath: uploadedFileInfo.filePath,
|
||
|
|
docType: uploadedFileInfo.docType,
|
||
|
|
docTypeName: uploadedFileInfo.docTypeName,
|
||
|
|
targetObjid: uploadedFileInfo.targetObjid,
|
||
|
|
parentTargetObjid: uploadedFileInfo.parentTargetObjid,
|
||
|
|
companyCode: uploadedFileInfo.companyCode,
|
||
|
|
writer: uploadedFileInfo.writer,
|
||
|
|
regdate: uploadedFileInfo.regdate,
|
||
|
|
status: uploadedFileInfo.status,
|
||
|
|
uploadProgress: 100,
|
||
|
|
isUploading: false,
|
||
|
|
};
|
||
|
|
|
||
|
|
console.log("✅ 실제 파일 업로드 완료 (attach_file_info 저장됨):", successFileInfo);
|
||
|
|
|
||
|
|
const updatedFiles = uploadedFiles.map((f) => (f.objid === tempFileInfo.objid ? successFileInfo : f));
|
||
|
|
|
||
|
|
// 로컬 상태 업데이트
|
||
|
|
setLocalUploadedFiles(updatedFiles);
|
||
|
|
|
||
|
|
onUpdateComponent({
|
||
|
|
uploadedFiles: updatedFiles,
|
||
|
|
});
|
||
|
|
|
||
|
|
// 업로드 큐에서 제거
|
||
|
|
setUploadQueue((prev) => prev.filter((f) => f !== file));
|
||
|
|
} catch (error) {
|
||
|
|
console.error("❌ 파일 업로드 실패:", {
|
||
|
|
error,
|
||
|
|
errorMessage: error instanceof Error ? error.message : "알 수 없는 오류",
|
||
|
|
errorStack: error instanceof Error ? error.stack : undefined,
|
||
|
|
user: user ? { userId: user.userId, companyCode: user.companyCode, hasUser: true } : "no user",
|
||
|
|
authState: { isLoading, isLoggedIn },
|
||
|
|
});
|
||
|
|
|
||
|
|
// API 응답 에러인 경우 상세 정보 출력
|
||
|
|
if ((error as any)?.response) {
|
||
|
|
console.error("📡 API 응답 에러:", {
|
||
|
|
status: (error as any).response.status,
|
||
|
|
statusText: (error as any).response.statusText,
|
||
|
|
data: (error as any).response.data,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 에러 상태로 업데이트
|
||
|
|
const errorFiles = uploadedFiles.map((f) =>
|
||
|
|
f.objid === `temp_${file.name}`
|
||
|
|
? { ...f, hasError: true, errorMessage: "업로드 실패", isUploading: false }
|
||
|
|
: f,
|
||
|
|
);
|
||
|
|
|
||
|
|
// 로컬 상태 업데이트
|
||
|
|
setLocalUploadedFiles(errorFiles);
|
||
|
|
|
||
|
|
onUpdateComponent({
|
||
|
|
uploadedFiles: errorFiles,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[fileConfig, uploadedFiles, onUpdateComponent], // ref는 의존성에 포함하지 않음
|
||
|
|
);
|
||
|
|
|
||
|
|
// 파일 삭제
|
||
|
|
const deleteFile = async (fileInfo: AttachedFileInfo) => {
|
||
|
|
console.log("🗑️ 파일 삭제:", fileInfo.realFileName);
|
||
|
|
try {
|
||
|
|
// 실제 API 호출 (논리적 삭제)
|
||
|
|
const response = await fetch(`/api/files/${fileInfo.objid}`, {
|
||
|
|
method: "DELETE",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
writer: fileInfo.writer || "current_user",
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error(`파일 삭제 실패: ${response.status}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
console.log("📡 파일 삭제 API 응답:", result);
|
||
|
|
|
||
|
|
if (!result.success) {
|
||
|
|
throw new Error(result.message || "파일 삭제 실패");
|
||
|
|
}
|
||
|
|
|
||
|
|
const filteredFiles = uploadedFiles.filter((f) => f.objid !== fileInfo.objid);
|
||
|
|
|
||
|
|
// 로컬 상태 업데이트
|
||
|
|
setLocalUploadedFiles(filteredFiles);
|
||
|
|
|
||
|
|
onUpdateComponent({
|
||
|
|
uploadedFiles: filteredFiles,
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log("✅ 파일 삭제 완료 (attach_file_info.status = DELETED)");
|
||
|
|
} catch (error) {
|
||
|
|
console.error("파일 삭제 실패:", error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 드래그 앤 드롭 핸들러
|
||
|
|
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setIsDragOver(true);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setIsDragOver(false);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleDrop = useCallback(
|
||
|
|
(e: React.DragEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setIsDragOver(false);
|
||
|
|
handleFileSelect(e.dataTransfer.files);
|
||
|
|
},
|
||
|
|
[handleFileSelect],
|
||
|
|
);
|
||
|
|
|
||
|
|
// 파일 입력 클릭
|
||
|
|
const handleFileInputClick = () => {
|
||
|
|
fileInputRef.current?.click();
|
||
|
|
};
|
||
|
|
|
||
|
|
// 파일 미리보기
|
||
|
|
const previewFile = (fileInfo: AttachedFileInfo) => {
|
||
|
|
const isImage = ["jpg", "jpeg", "png", "gif", "webp"].includes(fileInfo.fileExt.toLowerCase());
|
||
|
|
|
||
|
|
if (isImage) {
|
||
|
|
// TODO: 이미지 미리보기 모달 열기
|
||
|
|
console.log("이미지 미리보기:", fileInfo);
|
||
|
|
} else {
|
||
|
|
// TODO: 파일 다운로드
|
||
|
|
console.log("파일 다운로드:", fileInfo);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full space-y-4">
|
||
|
|
{/* 드래그 앤 드롭 영역 */}
|
||
|
|
<div
|
||
|
|
className={`rounded-lg border-2 border-dashed p-6 text-center transition-colors ${
|
||
|
|
isDragOver ? "border-blue-500 bg-blue-50" : "border-gray-300 hover:border-gray-400"
|
||
|
|
}`}
|
||
|
|
onDragOver={handleDragOver}
|
||
|
|
onDragLeave={handleDragLeave}
|
||
|
|
onDrop={handleDrop}
|
||
|
|
>
|
||
|
|
<Upload className="mx-auto mb-4 h-12 w-12 text-gray-400" />
|
||
|
|
<p className="mb-2 text-lg font-medium text-gray-900">
|
||
|
|
{fileConfig.dragDropText || "파일을 드래그하여 업로드하세요"}
|
||
|
|
</p>
|
||
|
|
<p className="mb-4 text-sm text-gray-500">또는 클릭하여 파일을 선택하세요</p>
|
||
|
|
|
||
|
|
<Button variant="outline" onClick={handleFileInputClick} className="mb-4">
|
||
|
|
<Upload className="mr-2 h-4 w-4" />
|
||
|
|
{fileConfig.uploadButtonText || "파일 선택"}
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<div className="text-xs text-gray-500">
|
||
|
|
<p>허용 파일: {fileConfig.accept.join(", ")}</p>
|
||
|
|
<p>
|
||
|
|
최대 크기: {fileConfig.maxSize}MB | 최대 개수: {fileConfig.maxFiles}개
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input
|
||
|
|
ref={fileInputRef}
|
||
|
|
type="file"
|
||
|
|
multiple={fileConfig.multiple}
|
||
|
|
accept={fileConfig.accept.join(",")}
|
||
|
|
onChange={(e) => handleFileSelect(e.target.files)}
|
||
|
|
className="hidden"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 업로드된 파일 목록 */}
|
||
|
|
{uploadedFiles.length > 0 && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<h4 className="font-medium text-gray-900">
|
||
|
|
첨부된 파일 ({uploadedFiles.length}/{fileConfig.maxFiles})
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
{uploadedFiles.map((fileInfo) => (
|
||
|
|
<div key={fileInfo.objid} className="flex items-center justify-between rounded-lg border bg-gray-50 p-3">
|
||
|
|
<div className="flex flex-1 items-center space-x-3">
|
||
|
|
{getFileIcon(fileInfo.fileExt)}
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
<p className="truncate text-sm font-medium text-gray-900">{fileInfo.realFileName}</p>
|
||
|
|
<div className="flex items-center space-x-2 text-xs text-gray-500">
|
||
|
|
<span>{formatFileSize(fileInfo.fileSize)}</span>
|
||
|
|
<span>•</span>
|
||
|
|
<span>{fileInfo.fileExt.toUpperCase()}</span>
|
||
|
|
{fileInfo.writer && (
|
||
|
|
<>
|
||
|
|
<span>•</span>
|
||
|
|
<span>{fileInfo.writer}</span>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 업로드 진행률 */}
|
||
|
|
{fileInfo.isUploading && fileConfig.showProgress && (
|
||
|
|
<div className="mt-2 h-1 w-full rounded-full bg-gray-200">
|
||
|
|
<div
|
||
|
|
className="h-1 rounded-full bg-blue-600 transition-all duration-300"
|
||
|
|
style={{ width: `${fileInfo.uploadProgress || 0}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 에러 메시지 */}
|
||
|
|
{fileInfo.hasError && (
|
||
|
|
<div className="mt-2 flex items-center space-x-2 rounded-md bg-red-50 p-2 text-sm text-red-700">
|
||
|
|
<AlertCircle className="h-4 w-4 flex-shrink-0" />
|
||
|
|
<span>{fileInfo.errorMessage}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center space-x-1">
|
||
|
|
{/* 상태 표시 */}
|
||
|
|
{fileInfo.isUploading && <Loader2 className="h-4 w-4 animate-spin text-blue-500" />}
|
||
|
|
{fileInfo.status === "ACTIVE" && <CheckCircle className="h-4 w-4 text-green-500" />}
|
||
|
|
{fileInfo.hasError && <AlertCircle className="h-4 w-4 text-red-500" />}
|
||
|
|
|
||
|
|
{/* 액션 버튼 */}
|
||
|
|
{!fileInfo.isUploading && !fileInfo.hasError && (
|
||
|
|
<>
|
||
|
|
{fileConfig.showPreview && (
|
||
|
|
<Button variant="ghost" size="sm" onClick={() => previewFile(fileInfo)} className="h-8 w-8 p-0">
|
||
|
|
<Eye className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Button variant="ghost" size="sm" onClick={() => previewFile(fileInfo)} className="h-8 w-8 p-0">
|
||
|
|
<Download className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="sm"
|
||
|
|
onClick={() => deleteFile(fileInfo)}
|
||
|
|
className="h-8 w-8 p-0 text-red-500 hover:text-red-700"
|
||
|
|
>
|
||
|
|
<X className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 문서 타입 정보 */}
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<Badge variant="outline">{fileConfig.docTypeName}</Badge>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|