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

refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환

Browse Source 
447+ 파일, 4500+ 줄 변경:
- gray-* → border/bg-muted/text-foreground/text-muted-foreground
- blue-* → primary/ring
- red-* → destructive
- green-* → emerald (일관성)
- indigo-* → primary
- yellow/orange → amber (통일)
- dark mode 변형도 시맨틱 토큰으로 변환

Made-with: Cursor
This commit is contained in:
DDD1542
2026-03-09 14:31:59 +09:00
parent d967cf0a0d
commit 4f10b5e42d
447 changed files with 4520 additions and 4520 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/screen/InteractiveDataTable.tsx
+59 -59
View File
@@ -1346,12 +1346,12 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return (
<div className="mt-2 space-y-2">
{currentFiles.map((file, index) => (
<div key={index} className="flex items-center justify-between rounded border bg-gray-50 p-2">
<div key={index} className="flex items-center justify-between rounded border bg-muted p-2">
<div className="flex items-center space-x-2">
<div className="text-muted-foreground text-xs">📄</div>
<div>
<p className="text-sm font-medium">{file.name}</p>
<p className="text-xs text-gray-500">{(file.size / 1024).toFixed(1)} KB</p>
<p className="text-xs text-muted-foreground">{(file.size / 1024).toFixed(1)} KB</p>
</div>
</div>
<Button
@@ -1554,10 +1554,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
<Input
value={value}
readOnly
className="bg-gray-50 text-gray-700"
className="bg-muted text-foreground"
placeholder={`${column.label} (자동 생성됨)`}
/>
<p className="mt-1 text-xs text-gray-500">자동 생성된 필드는 수정할 수 없습니다.</p>
<p className="mt-1 text-xs text-muted-foreground">자동 생성된 필드는 수정할 수 없습니다.</p>
</div>
);
}
@@ -1569,10 +1569,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
<Input
value={value}
readOnly
className="bg-gray-50 text-gray-700"
className="bg-muted text-foreground"
placeholder={advancedConfig?.placeholder || `${column.label} (읽기 전용)`}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
}
@@ -1598,7 +1598,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
{...commonProps}
maxLength={detailSettings?.maxLength}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -1613,7 +1613,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
max={detailSettings?.max}
{...commonProps}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -1621,7 +1621,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return (
<div>
<Input type="date" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -1629,7 +1629,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return (
<div>
<Input type="datetime-local" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -1649,7 +1649,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
placeholder={commonProps.placeholder}
className={commonProps.className}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
}
@@ -1671,7 +1671,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
))}
</SelectContent>
</Select>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
} else {
@@ -1702,7 +1702,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
</div>
))}
</div>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
} else {
@@ -1725,7 +1725,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
rows={detailSettings?.rows || 3}
maxLength={detailSettings?.maxLength}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -1738,7 +1738,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
onCheckedChange={(checked) => handleEditFormChange(column.columnName, checked)}
/>
<Label>{column.label}</Label>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -1770,11 +1770,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
)}
파일 선택
</Button>
{detailSettings?.accept && <span className="text-xs text-gray-500">({detailSettings.accept})</span>}
{detailSettings?.accept && <span className="text-xs text-muted-foreground">({detailSettings.accept})</span>}
</div>
{renderFileList(column.columnName, true)}
</div>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -1794,7 +1794,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
required={isRequired}
className={commonProps.className}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
}
@@ -1803,7 +1803,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return (
<div>
<Input {...commonProps} />
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
}
@@ -1826,10 +1826,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
<Input
value={value}
readOnly
className="bg-gray-50 text-gray-700"
className="bg-muted text-foreground"
placeholder={advancedConfig?.placeholder || `${column.label} (자동 생성)`}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
}
@@ -1855,7 +1855,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
{...commonProps}
maxLength={detailSettings?.maxLength}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -1870,7 +1870,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
max={detailSettings?.max}
{...commonProps}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -1878,7 +1878,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return (
<div>
<Input type="date" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -1886,7 +1886,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return (
<div>
<Input type="datetime-local" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -1906,7 +1906,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
placeholder={commonProps.placeholder}
className={commonProps.className}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
}
@@ -1928,7 +1928,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
))}
</SelectContent>
</Select>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
} else {
@@ -1967,7 +1967,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
</div>
))}
</div>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
} else {
@@ -1983,7 +1983,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
onCheckedChange={(checked) => handleAddFormChange(column.columnName, checked)}
/>
<Label>{column.label}</Label>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -2003,7 +2003,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
rows={detailSettings?.rows || 3}
maxLength={detailSettings?.maxLength}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -2032,14 +2032,14 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
))}
</SelectContent>
</Select>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
} else {
return (
<div>
<Input {...commonProps} placeholder={`${column.label} (코드 카테고리 설정 필요)`} readOnly />
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
}
@@ -2072,11 +2072,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
)}
파일 선택
</Button>
{detailSettings?.accept && <span className="text-xs text-gray-500">({detailSettings.accept})</span>}
{detailSettings?.accept && <span className="text-xs text-muted-foreground">({detailSettings.accept})</span>}
</div>
{renderFileList(column.columnName, false)}
</div>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
@@ -2096,7 +2096,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
required={isRequired}
className={commonProps.className}
/>
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
}
@@ -2105,7 +2105,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return (
<div>
<Input {...commonProps} />
{advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
{advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
</div>
);
}
@@ -2281,13 +2281,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
<div className="relative">
<FolderOpen className="text-primary h-4 w-4" />
{fileCount > 0 && (
<div className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-blue-600 text-[10px] text-white">
<div className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-primary text-[10px] text-white">
{fileCount > 9 ? "9+" : fileCount}
</div>
)}
</div>
) : (
<Folder className="h-4 w-4 text-gray-400" />
<Folder className="h-4 w-4 text-muted-foreground/70" />
)}
</Button>
</div>
@@ -2400,7 +2400,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return (
<div
className={cn(
"flex h-full flex-col rounded-xl border border-gray-200/60 bg-gradient-to-br from-white to-gray-50/30 shadow-sm",
"flex h-full flex-col rounded-xl border border-border/60 bg-gradient-to-br from-white to-muted/30 shadow-sm",
className,
)}
style={{ ...style, minHeight: "680px" }}
@@ -2526,7 +2526,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
<div className="flex h-full flex-col">
{visibleColumns.length > 0 ? (
<>
<div className="overflow-hidden rounded-lg border border-gray-200/60 bg-white shadow-sm">
<div className="overflow-hidden rounded-lg border border-border/60 bg-white shadow-sm">
<Table style={{ tableLayout: "fixed" }}>
<TableHeader className="from-muted/50 to-muted border-primary/20 border-b-2 bg-gradient-to-b">
<TableRow>
@@ -2556,7 +2556,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
{/* 리사이즈 핸들 */}
{columnIndex < visibleColumns.length - 1 && (
<div
className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-blue-500"
className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-primary"
style={{ marginRight: "-4px", paddingLeft: "4px", paddingRight: "4px" }}
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => {
@@ -2633,7 +2633,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
</TableRow>
) : data.length > 0 ? (
data.map((row, rowIndex) => (
<TableRow key={rowIndex} className="transition-all duration-200 hover:bg-orange-100">
<TableRow key={rowIndex} className="transition-all duration-200 hover:bg-amber-100">
{/* 체크박스 셀 (삭제 기능이 활성화된 경우) */}
{component.enableDelete && (
<TableCell className="px-4" style={{ width: "48px", minWidth: "48px", maxWidth: "48px" }}>
@@ -2648,7 +2648,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return (
<TableCell
key={column.id}
className="overflow-hidden px-4 text-sm font-medium text-ellipsis whitespace-nowrap text-gray-900"
className="overflow-hidden px-4 text-sm font-medium text-ellipsis whitespace-nowrap text-foreground"
style={{ textAlign: isNumeric ? "right" : "left" }}
>
{formatCellValue(row[column.columnName], column, row)}
@@ -2678,7 +2678,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
{/* 페이지네이션 */}
{component.pagination?.enabled && totalPages > 1 && (
<div className="mt-auto border-t border-gray-200/60 bg-gradient-to-r from-gray-50 to-slate-50">
<div className="mt-auto border-t border-border/60 bg-gradient-to-r from-muted to-slate-50">
<div className="flex items-center justify-between px-6 py-3">
{component.pagination.showPageInfo && (
<div className="text-muted-foreground text-sm">
@@ -2788,7 +2788,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
<div key={column.id} className="space-y-2">
<Label htmlFor={column.columnName} className="text-sm font-medium">
{column.label}
{isRequiredField(column.columnName) && <span className="ml-1 text-orange-500">*</span>}
{isRequiredField(column.columnName) && <span className="ml-1 text-amber-500">*</span>}
</Label>
<div>{renderAddFormInput(column)}</div>
</div>
@@ -2831,7 +2831,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
<div key={column.id} className="space-y-2">
<Label htmlFor={`edit-${column.columnName}`} className="text-sm font-medium">
{column.label}
{isRequiredField(column.columnName) && <span className="ml-1 text-orange-500">*</span>}
{isRequiredField(column.columnName) && <span className="ml-1 text-amber-500">*</span>}
</Label>
<div>{renderEditFormInput(column)}</div>
</div>
@@ -2891,24 +2891,24 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
const isImage = fileInfo.type?.startsWith("image/");
return (
<div key={index} className="rounded-lg border bg-gray-50 p-4 transition-colors hover:bg-gray-100">
<div key={index} className="rounded-lg border bg-muted p-4 transition-colors hover:bg-muted">
<div className="flex items-start gap-4">
{/* 파일 아이콘/미리보기 */}
<div className="flex-shrink-0">
{isImage ? (
<div className="flex h-16 w-16 items-center justify-center rounded border bg-white">
<div className="text-xs font-medium text-green-600">IMG</div>
<div className="text-xs font-medium text-emerald-600">IMG</div>
</div>
) : (
<div className="flex h-16 w-16 items-center justify-center rounded border bg-white">
<File className="h-8 w-8 text-gray-500" />
<File className="h-8 w-8 text-muted-foreground" />
</div>
)}
</div>
{/* 파일 정보 */}
<div className="min-w-0 flex-1">
<h4 className="truncate font-medium text-gray-900" title={fileInfo.name}>
<h4 className="truncate font-medium text-foreground" title={fileInfo.name}>
{fileInfo.name}
</h4>
<div className="text-muted-foreground mt-1 space-y-1 text-sm">
@@ -2958,8 +2958,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
{/* 요약 정보 */}
{currentFileData && (
<div className="border-primary/20 bg-accent mt-4 rounded-lg border p-3">
<h5 className="mb-2 font-medium text-blue-900">파일 요약</h5>
<div className="grid grid-cols-2 gap-4 text-sm text-blue-800">
<h5 className="mb-2 font-medium text-primary">파일 요약</h5>
<div className="grid grid-cols-2 gap-4 text-sm text-primary">
<div>
<span className="font-medium">총 파일 수:</span>
{" "}
@@ -3027,7 +3027,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
<Button size="sm" variant="outline" onClick={() => handleZoom("out")} disabled={zoom <= 0.25}>
<ZoomOut className="h-4 w-4" />
</Button>
<span className="min-w-[60px] text-center text-sm text-gray-500">{Math.round(zoom * 100)}%</span>
<span className="min-w-[60px] text-center text-sm text-muted-foreground">{Math.round(zoom * 100)}%</span>
<Button size="sm" variant="outline" onClick={() => handleZoom("in")} disabled={zoom >= 3}>
<ZoomIn className="h-4 w-4" />
</Button>
@@ -3049,7 +3049,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
</DialogTitle>
</DialogHeader>
<div className="flex flex-1 items-center justify-center overflow-auto rounded-lg bg-gray-50 p-4">
<div className="flex flex-1 items-center justify-center overflow-auto rounded-lg bg-muted p-4">
{previewImage && (
<img
src={alternativeImageUrl || getFilePreviewUrl(previewImage.id)}
@@ -3064,7 +3064,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
</div>
{previewImage && (
<div className="flex items-center justify-between border-t pt-3 text-sm text-gray-500">
<div className="flex items-center justify-between border-t pt-3 text-sm text-muted-foreground">
<div>크기: {formatFileSize(previewImage.size)}</div>
<div>타입: {previewImage.type}</div>
<div>업로드: {new Date(previewImage.uploadedAt).toLocaleDateString("ko-KR")}</div>
@@ -3097,14 +3097,14 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
{/* 기존 파일 목록 */}
{linkedFiles.length > 0 && (
<div className="space-y-3">
<h4 className="text-sm font-medium text-gray-900">연결된 파일</h4>
<h4 className="text-sm font-medium text-foreground">연결된 파일</h4>
{linkedFiles.map((file: any, index: number) => (
<div key={index} className="flex items-center justify-between rounded-lg border p-3">
<div className="flex items-center space-x-3">
<File className="text-primary h-5 w-5" />
<div>
<div className="font-medium">{file.realFileName}</div>
<div className="text-sm text-gray-500">
<div className="text-sm text-muted-foreground">
{(Number(file.fileSize) / 1024 / 1024).toFixed(2)} MB • {file.docTypeName}
{file.regdate && <span> • {new Date(file.regdate).toLocaleString("ko-KR")}</span>}
{file.writer && <span> • {file.writer}</span>}
@@ -3160,7 +3160,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
size="sm"
variant="outline"
onClick={() => handleDeleteLinkedFile(file.objid, file.realFileName)}
className="hover:bg-destructive/10 text-red-500 hover:text-red-700"
className="hover:bg-destructive/10 text-destructive hover:text-destructive"
>
<Trash2 className="h-4 w-4" />
</Button>
@@ -3173,7 +3173,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
{/* 파일 업로드 섹션 */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<h4 className="text-sm font-medium text-gray-900">{selectedColumnForFiles?.label || "파일"} 업로드</h4>
<h4 className="text-sm font-medium text-foreground">{selectedColumnForFiles?.label || "파일"} 업로드</h4>
{selectedColumnForFiles?.isVirtualFileColumn && (
<Badge variant="secondary" className="text-xs">
{selectedColumnForFiles.fileColumnConfig?.docTypeName || "문서"}