refactor: Clean up and enhance component structure in V2Media and ComponentsPanel
- Removed redundant comments and improved clarity in the `ComponentsPanel` for better maintainability. - Refactored the `V2Media` component to streamline the file handling logic and ensure consistent state management. - Merged default configurations in `UniversalFormModalConfigPanel` to enhance safety and prevent potential issues with incomplete configurations. - Updated file upload handling in `FileManagerModal` to improve user experience and maintain consistent styling across components.
This commit is contained in:
parent
5eab4669f0
commit
bfdf061ead
|
|
@ -114,8 +114,7 @@ export function ComponentsPanel({
|
|||
"image-display", // → v2-media (image)
|
||||
// 공통코드관리로 통합 예정
|
||||
"category-manager", // → 공통코드관리 기능으로 통합 예정
|
||||
// 분할 패널 정리 (split-panel-layout v1 유지)
|
||||
"split-panel-layout2", // → split-panel-layout로 통합
|
||||
// 분할 패널 정리
|
||||
"screen-split-panel", // 화면 임베딩 방식은 사용하지 않음
|
||||
// 미완성/미사용 컴포넌트 (기존 화면 호환성 유지, 새 추가만 막음)
|
||||
"accordion-basic", // 아코디언 컴포넌트
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -21,7 +21,7 @@ import {
|
|||
MODAL_SIZE_OPTIONS,
|
||||
SECTION_TYPE_OPTIONS,
|
||||
} from "./types";
|
||||
import { defaultSectionConfig, defaultTableSectionConfig, generateSectionId } from "./config";
|
||||
import { defaultConfig, defaultSectionConfig, defaultTableSectionConfig, generateSectionId } from "./config";
|
||||
|
||||
// 모달 import
|
||||
import { FieldDetailSettingsModal } from "./modals/FieldDetailSettingsModal";
|
||||
|
|
@ -43,10 +43,20 @@ interface AvailableParentField {
|
|||
}
|
||||
|
||||
export function UniversalFormModalConfigPanel({
|
||||
config,
|
||||
config: rawConfig,
|
||||
onChange,
|
||||
allComponents = [],
|
||||
}: UniversalFormModalConfigPanelProps) {
|
||||
// config가 불완전할 수 있으므로 defaultConfig와 병합하여 안전하게 사용
|
||||
const config: UniversalFormModalConfig = {
|
||||
...defaultConfig,
|
||||
...rawConfig,
|
||||
modal: { ...defaultConfig.modal, ...rawConfig?.modal },
|
||||
sections: rawConfig?.sections ?? defaultConfig.sections,
|
||||
saveConfig: { ...defaultConfig.saveConfig, ...rawConfig?.saveConfig },
|
||||
editMode: { ...defaultConfig.editMode, ...rawConfig?.editMode },
|
||||
};
|
||||
|
||||
// 테이블 목록
|
||||
const [tables, setTables] = useState<{ name: string; label: string }[]>([]);
|
||||
const [tableColumns, setTableColumns] = useState<{
|
||||
|
|
@ -255,10 +265,10 @@ export function UniversalFormModalConfigPanel({
|
|||
|
||||
// 저장 테이블 변경 시 컬럼 로드
|
||||
useEffect(() => {
|
||||
if (config.saveConfig.tableName) {
|
||||
if (config.saveConfig?.tableName) {
|
||||
loadTableColumns(config.saveConfig.tableName);
|
||||
}
|
||||
}, [config.saveConfig.tableName]);
|
||||
}, [config.saveConfig?.tableName]);
|
||||
|
||||
const loadTables = async () => {
|
||||
try {
|
||||
|
|
@ -564,9 +574,9 @@ export function UniversalFormModalConfigPanel({
|
|||
<div className="w-full min-w-0 space-y-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<Label className="mb-1.5 block text-xs font-medium">저장 테이블</Label>
|
||||
<p className="text-muted-foreground text-sm">{config.saveConfig.tableName || "(미설정)"}</p>
|
||||
{config.saveConfig.customApiSave?.enabled &&
|
||||
config.saveConfig.customApiSave?.multiTable?.enabled && (
|
||||
<p className="text-muted-foreground text-sm">{config.saveConfig?.tableName || "(미설정)"}</p>
|
||||
{config.saveConfig?.customApiSave?.enabled &&
|
||||
config.saveConfig?.customApiSave?.multiTable?.enabled && (
|
||||
<Badge variant="secondary" className="mt-2 px-2 py-0.5 text-xs">
|
||||
다중 테이블 모드
|
||||
</Badge>
|
||||
|
|
@ -816,9 +826,9 @@ export function UniversalFormModalConfigPanel({
|
|||
setSelectedField(field);
|
||||
setFieldDetailModalOpen(true);
|
||||
}}
|
||||
tableName={config.saveConfig.tableName}
|
||||
tableName={config.saveConfig?.tableName}
|
||||
tableColumns={
|
||||
tableColumns[config.saveConfig.tableName || ""]?.map((col) => ({
|
||||
tableColumns[config.saveConfig?.tableName || ""]?.map((col) => ({
|
||||
name: col.name,
|
||||
type: col.type,
|
||||
label: col.label || col.name,
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/u
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { FileInfo, FileUploadConfig } from "./types";
|
||||
import {
|
||||
Upload,
|
||||
Download,
|
||||
Trash2,
|
||||
Eye,
|
||||
File,
|
||||
FileText,
|
||||
import {
|
||||
Upload,
|
||||
Download,
|
||||
Trash2,
|
||||
Eye,
|
||||
File,
|
||||
FileText,
|
||||
Image as ImageIcon,
|
||||
Video,
|
||||
Music,
|
||||
|
|
@ -67,40 +67,40 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
|
|||
// 파일 아이콘 가져오기
|
||||
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" />;
|
||||
|
||||
if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) {
|
||||
return <ImageIcon className="h-5 w-5 text-blue-500" />;
|
||||
} else if (["pdf", "doc", "docx", "txt", "rtf"].includes(ext)) {
|
||||
return <FileText className="h-5 w-5 text-red-500" />;
|
||||
} else if (["xls", "xlsx", "csv"].includes(ext)) {
|
||||
return <FileText className="h-5 w-5 text-green-500" />;
|
||||
} else if (["ppt", "pptx"].includes(ext)) {
|
||||
return <Presentation className="h-5 w-5 text-orange-500" />;
|
||||
} else if (["mp4", "avi", "mov", "webm"].includes(ext)) {
|
||||
return <Video className="h-5 w-5 text-purple-500" />;
|
||||
} else if (["mp3", "wav", "ogg"].includes(ext)) {
|
||||
return <Music className="h-5 w-5 text-pink-500" />;
|
||||
} else if (["zip", "rar", "7z"].includes(ext)) {
|
||||
return <Archive className="h-5 w-5 text-yellow-500" />;
|
||||
} else {
|
||||
return <File className="w-5 h-5 text-gray-500" />;
|
||||
return <File className="h-5 w-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: 파일 업로드 완료');
|
||||
console.log("✅ FileManagerModal: 파일 업로드 완료");
|
||||
} catch (error) {
|
||||
console.error('❌ FileManagerModal: 파일 업로드 오류:', error);
|
||||
console.error("❌ FileManagerModal: 파일 업로드 오류:", error);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
console.log('🔄 FileManagerModal: 업로드 상태 초기화');
|
||||
console.log("🔄 FileManagerModal: 업로드 상태 초기화");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -118,9 +118,9 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
|
|||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setDragOver(false);
|
||||
|
||||
|
||||
if (config.disabled || isDesignMode) return;
|
||||
|
||||
|
||||
const files = e.dataTransfer.files;
|
||||
handleFileUpload(files);
|
||||
};
|
||||
|
|
@ -137,7 +137,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
|
|||
handleFileUpload(files);
|
||||
}
|
||||
// 입력값 초기화
|
||||
e.target.value = '';
|
||||
e.target.value = "";
|
||||
};
|
||||
|
||||
// 파일 뷰어 핸들러
|
||||
|
|
@ -156,24 +156,24 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
|
|||
setSelectedFile(file);
|
||||
setZoomLevel(1); // 🔍 파일 선택 시 확대/축소 레벨 초기화
|
||||
setImagePosition({ x: 0, y: 0 }); // 🖱️ 이미지 위치 초기화
|
||||
|
||||
|
||||
// 이미지 파일인 경우 미리보기 로드
|
||||
// 🔑 점(.)을 제거하고 확장자만 비교
|
||||
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'];
|
||||
const ext = file.fileExt.toLowerCase().replace('.', '');
|
||||
const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg"];
|
||||
const ext = file.fileExt.toLowerCase().replace(".", "");
|
||||
if (imageExtensions.includes(ext) || file.isImage) {
|
||||
try {
|
||||
// 이전 Blob URL 해제
|
||||
if (previewImageUrl) {
|
||||
URL.revokeObjectURL(previewImageUrl);
|
||||
}
|
||||
|
||||
|
||||
// 🔑 항상 apiClient를 통해 Blob 다운로드 (Docker 환경에서 상대 경로 문제 방지)
|
||||
const { apiClient } = await import("@/lib/api/client");
|
||||
const response = await apiClient.get(`/files/preview/${file.objid}`, {
|
||||
responseType: 'blob'
|
||||
responseType: "blob",
|
||||
});
|
||||
|
||||
|
||||
const blob = new Blob([response.data]);
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
setPreviewImageUrl(blobUrl);
|
||||
|
|
@ -238,32 +238,19 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
|
|||
return (
|
||||
<>
|
||||
<Dialog open={isOpen} onOpenChange={() => {}}>
|
||||
<DialogContent className="max-w-[95vw] w-[1400px] max-h-[90vh] overflow-hidden [&>button]:hidden">
|
||||
<DialogContent className="max-h-[90vh] w-[1400px] max-w-[95vw] 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" />
|
||||
<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="h-4 w-4" />
|
||||
</Button>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col space-y-3 h-[75vh]">
|
||||
|
||||
<div className="flex h-[75vh] flex-col space-y-3">
|
||||
{/* 파일 업로드 영역 - 높이 축소 */}
|
||||
{!isDesignMode && (
|
||||
<div
|
||||
className={`
|
||||
border-2 border-dashed rounded-lg p-4 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' : ''}
|
||||
`}
|
||||
className={`cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors ${dragOver ? "border-blue-400 bg-blue-50" : "border-gray-300"} ${config.disabled ? "cursor-not-allowed opacity-50" : "hover:border-gray-400"} ${uploading ? "opacity-75" : ""} `}
|
||||
onClick={() => {
|
||||
if (!config.disabled && !isDesignMode) {
|
||||
fileInputRef.current?.click();
|
||||
|
|
@ -282,47 +269,43 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
|
|||
className="hidden"
|
||||
disabled={config.disabled}
|
||||
/>
|
||||
|
||||
|
||||
{uploading ? (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
|
||||
<span className="text-sm text-blue-600 font-medium">업로드 중...</span>
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-blue-600"></div>
|
||||
<span className="text-sm font-medium text-blue-600">업로드 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<Upload className="h-6 w-6 text-gray-400" />
|
||||
<p className="text-sm font-medium text-gray-700">
|
||||
파일을 드래그하거나 클릭하여 업로드하세요
|
||||
</p>
|
||||
<p className="text-sm font-medium text-gray-700">파일을 드래그하거나 클릭하여 업로드하세요</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 좌우 분할 레이아웃 - 좌측 넓게, 우측 고정 너비 */}
|
||||
<div className="flex-1 flex gap-4 min-h-0">
|
||||
<div className="flex min-h-0 flex-1 gap-4">
|
||||
{/* 좌측: 이미지 미리보기 (확대/축소 가능) */}
|
||||
<div className="flex-1 border border-gray-200 rounded-lg bg-gray-900 flex flex-col overflow-hidden relative">
|
||||
<div className="relative flex flex-1 flex-col overflow-hidden rounded-lg border border-gray-200 bg-gray-900">
|
||||
{/* 확대/축소 컨트롤 */}
|
||||
{selectedFile && previewImageUrl && (
|
||||
<div className="absolute top-3 left-3 z-10 flex items-center gap-1 bg-black/60 rounded-lg p-1">
|
||||
<div className="absolute top-3 left-3 z-10 flex items-center gap-1 rounded-lg bg-black/60 p-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-white hover:bg-white/20"
|
||||
onClick={() => setZoomLevel(prev => Math.max(0.25, prev - 0.25))}
|
||||
onClick={() => setZoomLevel((prev) => Math.max(0.25, prev - 0.25))}
|
||||
disabled={zoomLevel <= 0.25}
|
||||
>
|
||||
<ZoomOut className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-white text-xs min-w-[50px] text-center">
|
||||
{Math.round(zoomLevel * 100)}%
|
||||
</span>
|
||||
<span className="min-w-[50px] text-center text-xs text-white">{Math.round(zoomLevel * 100)}%</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-white hover:bg-white/20"
|
||||
onClick={() => setZoomLevel(prev => Math.min(4, prev + 0.25))}
|
||||
onClick={() => setZoomLevel((prev) => Math.min(4, prev + 0.25))}
|
||||
disabled={zoomLevel >= 4}
|
||||
>
|
||||
<ZoomIn className="h-4 w-4" />
|
||||
|
|
@ -337,18 +320,18 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
|
|||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* 이미지 미리보기 영역 - 마우스 휠로 확대/축소, 드래그로 이동 */}
|
||||
<div
|
||||
<div
|
||||
ref={imageContainerRef}
|
||||
className={`flex-1 flex items-center justify-center overflow-hidden p-4 ${
|
||||
zoomLevel > 1 ? (isDragging ? 'cursor-grabbing' : 'cursor-grab') : 'cursor-zoom-in'
|
||||
className={`flex flex-1 items-center justify-center overflow-hidden p-4 ${
|
||||
zoomLevel > 1 ? (isDragging ? "cursor-grabbing" : "cursor-grab") : "cursor-zoom-in"
|
||||
}`}
|
||||
onWheel={(e) => {
|
||||
if (selectedFile && previewImageUrl) {
|
||||
e.preventDefault();
|
||||
const delta = e.deltaY > 0 ? -0.1 : 0.1;
|
||||
setZoomLevel(prev => Math.min(4, Math.max(0.25, prev + delta)));
|
||||
setZoomLevel((prev) => Math.min(4, Math.max(0.25, prev + delta)));
|
||||
}
|
||||
}}
|
||||
onMouseDown={handleMouseDown}
|
||||
|
|
@ -357,13 +340,13 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
|
|||
onMouseLeave={handleMouseUp}
|
||||
>
|
||||
{selectedFile && previewImageUrl ? (
|
||||
<img
|
||||
src={previewImageUrl}
|
||||
<img
|
||||
src={previewImageUrl}
|
||||
alt={selectedFile.realFileName}
|
||||
className="transition-transform duration-100 select-none"
|
||||
style={{
|
||||
style={{
|
||||
transform: `translate(${imagePosition.x}px, ${imagePosition.y}px) scale(${zoomLevel})`,
|
||||
transformOrigin: 'center center',
|
||||
transformOrigin: "center center",
|
||||
}}
|
||||
draggable={false}
|
||||
/>
|
||||
|
|
@ -374,27 +357,25 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
|
|||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center text-gray-400">
|
||||
<ImageIcon className="w-16 h-16 mb-2" />
|
||||
<ImageIcon className="mb-2 h-16 w-16" />
|
||||
<p className="text-sm">파일을 선택하면 미리보기가 표시됩니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{/* 파일 정보 바 */}
|
||||
{selectedFile && (
|
||||
<div className="bg-black/60 text-white text-xs px-3 py-2 text-center truncate">
|
||||
<div className="truncate bg-black/60 px-3 py-2 text-center text-xs text-white">
|
||||
{selectedFile.realFileName}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 우측: 파일 목록 (고정 너비) */}
|
||||
<div className="w-[400px] shrink-0 border border-gray-200 rounded-lg overflow-hidden flex flex-col">
|
||||
<div className="p-3 border-b border-gray-200 bg-gray-50">
|
||||
<div className="flex w-[400px] shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200">
|
||||
<div className="border-b border-gray-200 bg-gray-50 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-gray-700">
|
||||
업로드된 파일
|
||||
</h3>
|
||||
<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))}
|
||||
|
|
@ -409,100 +390,95 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
|
|||
{uploadedFiles.map((file) => (
|
||||
<div
|
||||
key={file.objid}
|
||||
className={`
|
||||
flex items-center space-x-3 p-2 rounded-lg transition-colors cursor-pointer
|
||||
${selectedFile?.objid === file.objid ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'}
|
||||
`}
|
||||
className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-colors ${selectedFile?.objid === file.objid ? "border border-blue-200 bg-blue-50" : "bg-gray-50 hover:bg-gray-100"} `}
|
||||
onClick={() => handleFileClick(file)}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
{getFileIcon(file.fileExt)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-900 truncate">
|
||||
{file.realFileName}
|
||||
</span>
|
||||
{file.isRepresentative && (
|
||||
<Badge variant="default" className="h-5 px-1.5 text-xs">
|
||||
대표
|
||||
</Badge>
|
||||
)}
|
||||
<div className="flex-shrink-0">{getFileIcon(file.fileExt)}</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="truncate text-sm font-medium text-gray-900">{file.realFileName}</span>
|
||||
{file.isRepresentative && (
|
||||
<Badge variant="default" className="h-5 px-1.5 text-xs">
|
||||
대표
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">
|
||||
{formatFileSize(file.fileSize)} • {file.fileExt.toUpperCase()}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">
|
||||
{formatFileSize(file.fileSize)} • {file.fileExt.toUpperCase()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
{onSetRepresentative && (
|
||||
<div className="flex items-center space-x-1">
|
||||
{onSetRepresentative && (
|
||||
<Button
|
||||
variant={file.isRepresentative ? "default" : "ghost"}
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSetRepresentative(file);
|
||||
}}
|
||||
title={file.isRepresentative ? "현재 대표 파일" : "대표 파일로 설정"}
|
||||
>
|
||||
<Star className={`h-3 w-3 ${file.isRepresentative ? "fill-white" : ""}`} />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant={file.isRepresentative ? "default" : "ghost"}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSetRepresentative(file);
|
||||
handleFileViewInternal(file);
|
||||
}}
|
||||
title={file.isRepresentative ? "현재 대표 파일" : "대표 파일로 설정"}
|
||||
title="미리보기"
|
||||
>
|
||||
<Star className={`w-3 h-3 ${file.isRepresentative ? "fill-white" : ""}`} />
|
||||
<Eye className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleFileViewInternal(file);
|
||||
}}
|
||||
title="미리보기"
|
||||
>
|
||||
<Eye className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onFileDownload(file);
|
||||
}}
|
||||
title="다운로드"
|
||||
>
|
||||
<Download className="w-3 h-3" />
|
||||
</Button>
|
||||
{!isDesignMode && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onFileDelete(file);
|
||||
onFileDownload(file);
|
||||
}}
|
||||
title="삭제"
|
||||
title="다운로드"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
<Download className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
{!isDesignMode && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onFileDelete(file);
|
||||
}}
|
||||
title="삭제"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-gray-500">
|
||||
<File className="w-12 h-12 mb-3 text-gray-300" />
|
||||
<p className="text-sm font-medium text-gray-600">업로드된 파일이 없습니다</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{isDesignMode ? '디자인 모드에서는 파일을 업로드할 수 없습니다' : '위의 영역에 파일을 업로드하세요'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-gray-500">
|
||||
<File className="mb-3 h-12 w-12 text-gray-300" />
|
||||
<p className="text-sm font-medium text-gray-600">업로드된 파일이 없습니다</p>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
{isDesignMode
|
||||
? "디자인 모드에서는 파일을 업로드할 수 없습니다"
|
||||
: "위의 영역에 파일을 업로드하세요"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue