jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui 수정 및 시현할 기능 업데이트

Browse Source
This commit is contained in:
leeheejin
2025-10-02 14:34:15 +09:00
parent 2c0dca08b4
commit 3fa410cbe4
168 changed files with 1545 additions and 1066 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -705,7 +705,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
<div
className={`group relative rounded-2xl border-2 border-dashed p-10 text-center transition-all duration-300 ${
isDragOver
? "border-blue-500 bg-gradient-to-br from-blue-100/90 to-indigo-100/80 shadow-xl shadow-blue-500/20 scale-105"
? "border-primary bg-gradient-to-br from-blue-100/90 to-indigo-100/80 shadow-xl shadow-blue-500/20 scale-105"
: "border-gray-300/60 bg-gradient-to-br from-gray-50/80 to-blue-50/40 hover:border-blue-400/80 hover:bg-gradient-to-br hover:from-blue-50/90 hover:to-indigo-50/60 hover:shadow-lg hover:shadow-blue-500/10"
}`}
onDragOver={handleDragOver}
@@ -722,14 +722,14 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
<div className={`h-20 w-20 rounded-full transition-all duration-300 ${
isDragOver
? "bg-blue-200/80 scale-110"
: "bg-blue-100/50 opacity-0 group-hover:opacity-100 group-hover:scale-110"
: "bg-primary/20/50 opacity-0 group-hover:opacity-100 group-hover:scale-110"
}`}></div>
</div>
</div>
<p className={`mb-2 text-xl font-semibold transition-colors duration-300 ${
isDragOver
? "text-blue-600"
: "text-gray-700 group-hover:text-blue-600"
? "text-primary"
: "text-gray-700 group-hover:text-primary"
}`}>
{fileConfig.dragDropText || "파일을 드래그하여 업로드하세요"}
</p>
@@ -746,8 +746,8 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
onClick={handleFileInputClick}
className={`mb-4 rounded-xl border-2 transition-all duration-200 ${
isDragOver
? "border-blue-400 bg-blue-50 text-blue-600 shadow-md"
: "border-gray-300/60 hover:border-blue-400/60 hover:bg-blue-50/50 hover:shadow-sm"
? "border-blue-400 bg-accent text-primary shadow-md"
: "border-gray-300/60 hover:border-blue-400/60 hover:bg-accent/50 hover:shadow-sm"
}`}
>
<Upload className="mr-2 h-4 w-4" />
@@ -774,34 +774,34 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
{/* 업로드된 파일 목록 */}
{uploadedFiles.length > 0 && (
<div className="space-y-4">
<div className="flex items-center justify-between rounded-xl bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3 border border-blue-200/40">
<div className="flex items-center justify-between rounded-xl bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3 border border-primary/20/40">
<div className="flex items-center space-x-3">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
<File className="h-4 w-4 text-blue-600" />
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20">
<File className="h-4 w-4 text-primary" />
</div>
<div>
<h4 className="text-lg font-semibold text-gray-800">
업로드된 파일 ({uploadedFiles.length}/{fileConfig.maxFiles})
</h4>
<p className="text-sm text-gray-600">
<p className="text-sm text-muted-foreground">
총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
</p>
</div>
</div>
<Button variant="outline" size="sm" className="rounded-lg border-blue-200/60 bg-white/80 hover:bg-blue-50/80">
<Button variant="outline" size="sm" className="rounded-lg border-primary/20/60 bg-white/80 hover:bg-accent/80">
자세히보기
</Button>
</div>
<div className="space-y-3">
{uploadedFiles.map((fileInfo) => (
<div key={fileInfo.objid} className="group relative flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-4 shadow-sm transition-all duration-200 hover:shadow-md hover:border-blue-300/60 hover:bg-blue-50/30">
<div key={fileInfo.objid} className="group relative flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-4 shadow-sm transition-all duration-200 hover:shadow-md hover:border-blue-300/60 hover:bg-accent/30">
<div className="flex flex-1 items-center space-x-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-gray-50 to-gray-100/80 shadow-sm">
{getFileIcon(fileInfo.fileExt)}
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-base font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-200">
<p className="truncate text-base font-semibold text-gray-800 group-hover:text-primary transition-colors duration-200">
{fileInfo.realFileName}
</p>
<div className="flex items-center space-x-3 text-sm text-gray-500 mt-1">
@@ -835,7 +835,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
{/* 에러 메시지 */}
{fileInfo.hasError && (
<div className="mt-2 flex items-center space-x-2 rounded-md bg-red-50 p-2 text-sm text-red-700">
<div className="mt-2 flex items-center space-x-2 rounded-md bg-destructive/10 p-2 text-sm text-red-700">
<AlertCircle className="h-4 w-4 flex-shrink-0" />
<span>{fileInfo.errorMessage}</span>
</div>
@@ -846,9 +846,9 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
<div className="flex items-center space-x-2">
{/* 상태 표시 */}
{fileInfo.isUploading && (
<div className="flex items-center space-x-2 rounded-lg bg-blue-50 px-3 py-2">
<div className="flex items-center space-x-2 rounded-lg bg-accent px-3 py-2">
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<span className="text-xs font-medium text-blue-600">업로드 중...</span>
<span className="text-xs font-medium text-primary">업로드 중...</span>
</div>
)}
{fileInfo.status === "ACTIVE" && (
@@ -858,9 +858,9 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
</div>
)}
{fileInfo.hasError && (
<div className="flex items-center space-x-2 rounded-lg bg-red-50 px-3 py-2">
<div className="flex items-center space-x-2 rounded-lg bg-destructive/10 px-3 py-2">
<AlertCircle className="h-4 w-4 text-red-500" />
<span className="text-xs font-medium text-red-600">오류</span>
<span className="text-xs font-medium text-destructive">오류</span>
</div>
)}
@@ -872,7 +872,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
variant="ghost"
size="sm"
onClick={() => previewFile(fileInfo)}
className="h-9 w-9 rounded-lg hover:bg-blue-50 hover:text-blue-600 transition-all duration-200"
className="h-9 w-9 rounded-lg hover:bg-accent hover:text-primary transition-all duration-200"
>
<Eye className="h-4 w-4" />
</Button>
@@ -891,7 +891,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
variant="ghost"
size="sm"
onClick={() => deleteFile(fileInfo)}
className="h-9 w-9 rounded-lg text-red-500 hover:bg-red-50 hover:text-red-700 transition-all duration-200"
className="h-9 w-9 rounded-lg text-red-500 hover:bg-destructive/10 hover:text-red-700 transition-all duration-200"
>
<X className="h-4 w-4" />
</Button>