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

ui, 파일업로드 관련 손보기

Browse Source
This commit is contained in:
leeheejin
2025-09-29 17:21:47 +09:00
parent bff7416cd1
commit a5bf6601a0
18 changed files with 858 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/components/screen/widgets/FileUpload.tsx
View File

@@ -504,6 +504,26 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
[component.id]: updatedFiles
}));
// RealtimePreview 동기화를 위한 추가 이벤트 발생
if (typeof window !== 'undefined') {
const eventDetail = {
componentId: component.id,
files: updatedFiles,
fileCount: updatedFiles.length,
action: 'upload',
timestamp: Date.now()
};
console.log("🚀 FileUpload 위젯 이벤트 발생:", eventDetail);
const event = new CustomEvent('globalFileStateChanged', {
detail: eventDetail
});
window.dispatchEvent(event);
console.log("✅ FileUpload globalFileStateChanged 이벤트 발생 완료");
}
// 컴포넌트 업데이트 (옵셔널)
if (onUpdateComponent) {
onUpdateComponent({
@@ -583,6 +603,42 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
[component.id]: filteredFiles
}));
// 🎯 화면설계 모드와 동기화를 위한 전역 이벤트 발생
if (typeof window !== 'undefined') {
const eventDetail = {
componentId: component.id,
files: filteredFiles,
fileCount: filteredFiles.length,
action: 'delete',
timestamp: Date.now(),
source: 'realScreen' // 실제 화면에서 온 이벤트임을 표시
};
console.log("🚀🚀🚀 FileUpload 위젯 삭제 이벤트 발생:", eventDetail);
const event = new CustomEvent('globalFileStateChanged', {
detail: eventDetail
});
window.dispatchEvent(event);
console.log("✅✅✅ FileUpload 위젯 → 화면설계 모드 동기화 이벤트 발생 완료");
// 추가 지연 이벤트들
setTimeout(() => {
console.log("🔄 FileUpload 위젯 추가 삭제 이벤트 발생 (지연 100ms)");
window.dispatchEvent(new CustomEvent('globalFileStateChanged', {
detail: { ...eventDetail, delayed: true }
}));
}, 100);
setTimeout(() => {
console.log("🔄 FileUpload 위젯 추가 삭제 이벤트 발생 (지연 300ms)");
window.dispatchEvent(new CustomEvent('globalFileStateChanged', {
detail: { ...eventDetail, delayed: true, attempt: 2 }
}));
}, 300);
}
onUpdateComponent({
uploadedFiles: filteredFiles,
});
@@ -635,8 +691,8 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
<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"
className={`rounded-xl border-2 border-dashed p-8 text-center transition-all duration-300 ${
isDragOver ? "border-blue-400 bg-gradient-to-br from-blue-50 to-indigo-50 shadow-sm" : "border-gray-300/60 hover:border-blue-400/60 hover:bg-gray-50/50 hover:shadow-sm"
}`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
@@ -648,7 +704,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
</p>
<p className="mb-4 text-sm text-gray-500">또는 클릭하여 파일을 선택하세요</p>
<Button variant="outline" onClick={handleFileInputClick} className="mb-4">
<Button variant="outline" onClick={handleFileInputClick} className="mb-4 rounded-lg border-gray-300/60 hover:border-blue-400/60 hover:bg-blue-50/50 transition-all duration-200">
<Upload className="mr-2 h-4 w-4" />
{fileConfig.uploadButtonText || "파일 선택"}
</Button>

2
frontend/components/screen/widgets/types/FileWidget.tsx
View File

@@ -134,7 +134,7 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
<div className="h-full w-full space-y-2">
{/* 파일 업로드 영역 */}
<div
className="border-muted-foreground/25 hover:border-muted-foreground/50 cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors"
className="border-gray-300/60 hover:border-blue-400/60 hover:bg-gray-50/50 cursor-pointer rounded-xl border-2 border-dashed p-6 text-center transition-all duration-300 hover:shadow-sm"
onClick={handleFileSelect}
onDragOver={handleDragOver}
onDrop={handleDrop}