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

frontend/components/screen/InteractiveDataTable.tsx

@@ -37,6 +37,7 @@ import {
   RotateCw,
   Folder,
   FolderOpen,
+  Grid,
 } from "lucide-react";
 import { tableTypeApi } from "@/lib/api/screen";
 import { commonCodeApi } from "@/lib/api/commonCode";
@@ -1721,7 +1722,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   };
 
   return (
-    <div className={cn("flex h-full flex-col", className)} style={{ ...style, minHeight: "680px" }}>
+    <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", className)} style={{ ...style, minHeight: "680px" }}>
       {/* 헤더 */}
       <div className="p-6 pb-3">
         <div className="flex items-center justify-between">
@@ -1811,7 +1812,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         <div className="flex h-full flex-col">
           {visibleColumns.length > 0 ? (
             <>
-              <Table>
+              <div className="rounded-lg border border-gray-200/60 bg-white shadow-sm overflow-hidden">
+                <Table>
                 <TableHeader>
                   <TableRow>
                     {/* 체크박스 컬럼 (삭제 기능이 활성화된 경우) */}
@@ -1826,7 +1828,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                     {visibleColumns.map((column: DataTableColumn) => (
                       <TableHead
                         key={column.id}
-                        className="px-4 font-semibold"
+                        className="px-4 font-semibold text-gray-700 bg-gradient-to-r from-gray-50 to-slate-50"
                         style={{ width: `${((column.gridColumns || 2) / totalGridColumns) * 100}%` }}
                       >
                         {column.label}
@@ -1850,7 +1852,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                     </TableRow>
                   ) : data.length > 0 ? (
                     data.map((row, rowIndex) => (
-                      <TableRow key={rowIndex} className="hover:bg-muted/50">
+                        <TableRow key={rowIndex} className="hover:bg-gradient-to-r hover:from-blue-50/50 hover:to-indigo-50/30 transition-all duration-200">
                         {/* 체크박스 셀 (삭제 기능이 활성화된 경우) */}
                         {component.enableDelete && (
                           <TableCell className="w-12 px-4">
@@ -1861,7 +1863,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                           </TableCell>
                         )}
                         {visibleColumns.map((column: DataTableColumn) => (
-                          <TableCell key={column.id} className="px-4 font-mono text-sm">
+                          <TableCell key={column.id} className="px-4 text-sm font-medium text-gray-900">
                             {formatCellValue(row[column.columnName], column, row)}
                           </TableCell>
                         ))}
@@ -1884,10 +1886,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   )}
                 </TableBody>
               </Table>
+              </div>
 
               {/* 페이지네이션 */}
               {component.pagination?.enabled && totalPages > 1 && (
-                <div className="bg-muted/20 mt-auto border-t">
+                <div className="bg-gradient-to-r from-gray-50 to-slate-50 mt-auto border-t border-gray-200/60">
                   <div className="flex items-center justify-between px-6 py-3">
                     {component.pagination.showPageInfo && (
                       <div className="text-muted-foreground text-sm">