프론트엔드 UI/UX 개선사항 복구 및 테이블 스타일링 통일

- 테이블 헤더 스타일링 개선 (더 진한 배경색, 오렌지 호버 효과)
- 파일첨부 컴포넌트 개선 (뚝뚝 잘리는 문제 해결, 패딩/아이콘 크기 조정)
- 카드 디스플레이 스타일링 개선 (명확한 테두리, 오렌지 호버 효과)
- 라벨 표시 기능 수정 (드롭다운 라벨링 문제, 체크박스 풀리는 문제 해결)
- 패널 및 레이아웃 개선 (카드 간격 통일, 주황색 영역 추가)
- CSS 통일성 작업 (Select 컴포넌트 너비 w-48로 조정)
- 정렬 화살표 표시 조건 수정 (정렬된 컬럼에서만 화살표 표시)
- 테이블 스타일링 통일 (SingleTableWithSticky, TableListComponent, InteractiveDataTable)

backend-node/src/controllers/dataflowExecutionController.ts

@@ -91,7 +91,7 @@ async function executeMainDatabaseAction(
 }
 
 /**
- * 외부 데이터베이스에서 데이터 액션 실행
+ * 외부 데이터베이스에서 데이터 액션 실행 (보안상 비활성화)
  */
 async function executeExternalDatabaseAction(
   tableName: string,
@@ -99,29 +99,8 @@ async function executeExternalDatabaseAction(
   actionType: string,
   connection: any
 ): Promise<any> {
-  try {
+  // 보안상 외부 DB에 대한 모든 데이터 변경 작업은 비활성화
-    logger.info(`외부 DB 액션 실행: ${connection.name} (${connection.host}:${connection.port})`);
+  throw new Error(`보안상 외부 데이터베이스에 대한 ${actionType.toUpperCase()} 작업은 허용되지 않습니다. SELECT 쿼리만 사용해주세요.`);
-    logger.info(`테이블: ${tableName}, 액션: ${actionType}`, data);
-
-    // 🔥 실제 외부 DB 연결 및 실행 로직 구현
-    const { MultiConnectionQueryService } = await import('../services/multiConnectionQueryService');
-    const queryService = new MultiConnectionQueryService();
-
-    let result;
-    switch (actionType.toLowerCase()) {
-      case 'insert':
-        result = await queryService.insertDataToConnection(connection.id, tableName, data);
-        logger.info(`외부 DB INSERT 성공:`, result);
-        break;
-      case 'update':
-        // TODO: UPDATE 로직 구현 (조건 필요)
-        throw new Error('UPDATE 액션은 아직 지원되지 않습니다. 조건 설정이 필요합니다.');
-      case 'delete':
-        // TODO: DELETE 로직 구현 (조건 필요)
-        throw new Error('DELETE 액션은 아직 지원되지 않습니다. 조건 설정이 필요합니다.');
-      default:
-        throw new Error(`지원하지 않는 액션 타입: ${actionType}`);
-    }
 
     return {
       success: true,

backend-node/src/services/batchExternalDbService.ts

@@ -551,13 +551,18 @@ export class BatchExternalDbService {
   }
 
   /**
-   * 외부 DB 테이블에 데이터 삽입
+   * 외부 DB 테이블에 데이터 삽입 (보안상 비활성화)
    */
   static async insertDataToTable(
     connectionId: number,
     tableName: string,
     data: any[]
   ): Promise<ApiResponse<{ successCount: number; failedCount: number }>> {
+    // 보안상 외부 DB에 대한 INSERT 작업은 비활성화
+    return {
+      success: false,
+      message: "보안상 외부 데이터베이스에 대한 INSERT 작업은 허용되지 않습니다. SELECT 쿼리만 사용해주세요.",
+    };
     try {
       console.log(`[BatchExternalDbService] 외부 DB 데이터 삽입: connectionId=${connectionId}, tableName=${tableName}, ${data.length}개 레코드`);
 

backend-node/src/services/dataflowControlService.ts

@@ -937,23 +937,14 @@ export class DataflowControlService {
   }
 
   /**
-   * DELETE 액션 실행 - 조건 기반으로만 삭제
+   * DELETE 액션 실행 - 보안상 외부 DB 비활성화
    */
   private async executeDeleteAction(
     action: ControlAction,
     sourceData: Record<string, any>
   ): Promise<any> {
-    console.log(`🗑️ DELETE 액션 실행 시작:`, {
+    // 보안상 외부 DB에 대한 DELETE 작업은 비활성화
-      actionName: action.name,
+    throw new Error("보안상 외부 데이터베이스에 대한 DELETE 작업은 허용되지 않습니다. SELECT 쿼리만 사용해주세요.");
-      conditions: action.conditions,
-    });
-
-    // DELETE는 조건이 필수
-    if (!action.conditions || action.conditions.length === 0) {
-      throw new Error(
-        "DELETE 액션에는 반드시 조건이 필요합니다. 전체 테이블 삭제는 위험합니다."
-      );
-    }
 
     const results = [];
 

backend-node/src/services/externalDbConnectionService.ts

@@ -699,6 +699,30 @@ export class ExternalDbConnectionService {
     params: any[] = []
   ): Promise<ApiResponse<any[]>> {
     try {
+      // 보안 검증: SELECT 쿼리만 허용
+      const trimmedQuery = query.trim().toUpperCase();
+      if (!trimmedQuery.startsWith('SELECT')) {
+        console.log("보안 오류: SELECT가 아닌 쿼리 시도:", { id, query: query.substring(0, 100) });
+        return {
+          success: false,
+          message: "외부 데이터베이스에서는 SELECT 쿼리만 실행할 수 있습니다.",
+        };
+      }
+
+      // 위험한 키워드 검사
+      const dangerousKeywords = ['INSERT', 'UPDATE', 'DELETE', 'DROP', 'CREATE', 'ALTER', 'TRUNCATE', 'EXEC', 'EXECUTE', 'CALL', 'MERGE'];
+      const hasDangerousKeyword = dangerousKeywords.some(keyword => 
+        trimmedQuery.includes(keyword)
+      );
+      
+      if (hasDangerousKeyword) {
+        console.log("보안 오류: 위험한 키워드 포함 쿼리 시도:", { id, query: query.substring(0, 100) });
+        return {
+          success: false,
+          message: "데이터를 변경하거나 삭제하는 쿼리는 허용되지 않습니다. SELECT 쿼리만 사용해주세요.",
+        };
+      }
+
       // 연결 정보 조회
       console.log("연결 정보 조회 시작:", { id });
       const connection = await prisma.external_db_connections.findUnique({

backend-node/src/services/multiConnectionQueryService.ts

@@ -119,22 +119,25 @@ export class MultiConnectionQueryService {
   }
 
   /**
-   * 대상 커넥션에 데이터 삽입
+   * 대상 커넥션에 데이터 삽입 (보안상 외부 DB 비활성화)
    */
   async insertDataToConnection(
     connectionId: number,
     tableName: string,
     data: Record<string, any>
   ): Promise<any> {
+    // 보안상 외부 DB에 대한 INSERT 작업은 비활성화
+    if (connectionId !== 0) {
+      throw new Error("보안상 외부 데이터베이스에 대한 INSERT 작업은 허용되지 않습니다. SELECT 쿼리만 사용해주세요.");
+    }
+
     try {
       logger.info(
         `데이터 삽입 시작: connectionId=${connectionId}, table=${tableName}`
       );
 
-      // connectionId가 0이면 메인 DB 사용
+      // connectionId가 0이면 메인 DB 사용 (내부 DB만 허용)
-      if (connectionId === 0) {
+      return await this.executeOnMainDatabase("insert", tableName, data);
-        return await this.executeOnMainDatabase("insert", tableName, data);
-      }
 
       // 외부 DB 연결 정보 가져오기
       const connectionResult =
@@ -288,7 +291,7 @@ export class MultiConnectionQueryService {
   }
 
   /**
-   * 🆕 대상 커넥션에 데이터 업데이트
+   * 🆕 대상 커넥션에 데이터 업데이트 (보안상 외부 DB 비활성화)
    */
   async updateDataToConnection(
     connectionId: number,
@@ -296,6 +299,11 @@ export class MultiConnectionQueryService {
     data: Record<string, any>,
     conditions: Record<string, any>
   ): Promise<any> {
+    // 보안상 외부 DB에 대한 UPDATE 작업은 비활성화
+    if (connectionId !== 0) {
+      throw new Error("보안상 외부 데이터베이스에 대한 UPDATE 작업은 허용되지 않습니다. SELECT 쿼리만 사용해주세요.");
+    }
+
     try {
       logger.info(
         `데이터 업데이트 시작: connectionId=${connectionId}, table=${tableName}`
@@ -378,7 +386,7 @@ export class MultiConnectionQueryService {
   }
 
   /**
-   * 🆕 대상 커넥션에서 데이터 삭제
+   * 🆕 대상 커넥션에서 데이터 삭제 (보안상 외부 DB 비활성화)
    */
   async deleteDataFromConnection(
     connectionId: number,
@@ -386,6 +394,11 @@ export class MultiConnectionQueryService {
     conditions: Record<string, any>,
     maxDeleteCount: number = 100
   ): Promise<any> {
+    // 보안상 외부 DB에 대한 DELETE 작업은 비활성화
+    if (connectionId !== 0) {
+      throw new Error("보안상 외부 데이터베이스에 대한 DELETE 작업은 허용되지 않습니다. SELECT 쿼리만 사용해주세요.");
+    }
+
     try {
       logger.info(
         `데이터 삭제 시작: connectionId=${connectionId}, table=${tableName}`

frontend/app/globals.css

@@ -76,6 +76,15 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  
+  /* Z-Index 계층 구조 */
+  --z-background: 1;
+  --z-layout: 10;
+  --z-content: 50;
+  --z-floating: 100;
+  --z-modal: 1000;
+  --z-tooltip: 2000;
+  --z-critical: 3000;
 }
 
 .dark {

frontend/app/layout.tsx

@@ -48,6 +48,8 @@ export default function RootLayout({
             <Toaster position="top-right" richColors />
             <ScreenModal />
           </QueryProvider>
+          {/* Portal 컨테이너 */}
+          <div id="portal-root" data-radix-portal="true" />
         </div>
       </body>
     </html>

frontend/components/admin/SqlQueryModal.tsx

@@ -117,6 +117,32 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
       return;
     }
 
+    // SELECT 쿼리만 허용하는 검증
+    const trimmedQuery = query.trim().toUpperCase();
+    if (!trimmedQuery.startsWith('SELECT')) {
+      toast({
+        title: "보안 오류",
+        description: "외부 데이터베이스에서는 SELECT 쿼리만 실행할 수 있습니다. INSERT, UPDATE, DELETE는 허용되지 않습니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // 위험한 키워드 검사
+    const dangerousKeywords = ['INSERT', 'UPDATE', 'DELETE', 'DROP', 'CREATE', 'ALTER', 'TRUNCATE', 'EXEC', 'EXECUTE'];
+    const hasDangerousKeyword = dangerousKeywords.some(keyword => 
+      trimmedQuery.includes(keyword)
+    );
+    
+    if (hasDangerousKeyword) {
+      toast({
+        title: "보안 오류",
+        description: "데이터를 변경하거나 삭제하는 쿼리는 허용되지 않습니다. SELECT 쿼리만 사용해주세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
     console.log("쿼리 실행 시작:", { connectionId, query });
     setLoading(true);
     try {

frontend/components/admin/UserToolbar.tsx

@@ -116,14 +116,14 @@ export function UserToolbar({
 
             {/* 고급 검색 필드들 */}
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-              <div>
+              {/* <div>
                 <label className="text-muted-foreground mb-1 block text-xs font-medium">사번</label>
                 <Input
                   placeholder="사번 검색"
                   value={searchFilter.search_sabun || ""}
                   onChange={(e) => handleAdvancedSearchChange("search_sabun", e.target.value)}
                 />
-              </div>
+              </div> */}
 
               <div>
                 <label className="text-muted-foreground mb-1 block text-xs font-medium">회사명</label>

frontend/components/screen/EditModal.tsx

@@ -243,7 +243,7 @@ export const EditModal: React.FC<EditModalProps> = ({
           minHeight: dynamicSize.height,
           maxWidth: "95vw",
           maxHeight: "95vh",
-          zIndex: 9999, // 모든 컴포넌트보다 위에 표시
+          zIndex: 1000, // 모든 컴포넌트보다 위에 표시
         }}
         data-radix-portal="true"
       >
@@ -251,7 +251,7 @@ export const EditModal: React.FC<EditModalProps> = ({
           <DialogTitle>수정</DialogTitle>
         </DialogHeader>
 
-        <div className="flex-1 overflow-hidden">
+        <div className="flex-1 overflow-y-auto">
           {loading ? (
             <div className="flex h-full items-center justify-center">
               <div className="text-center">
@@ -282,7 +282,7 @@ export const EditModal: React.FC<EditModalProps> = ({
                       left: component.position?.x || 0,
                       width: component.size?.width || 200,
                       height: component.size?.height || 40,
-                      zIndex: component.position?.z || (1000 + index), // 모달 내부에서 충분히 높은 z-index
+                      zIndex: component.position?.z || (10 + index), // 모달 내부에서 적절한 z-index
                     }}
                   >
                     {/* 위젯 컴포넌트는 InteractiveScreenViewer 사용 (라벨 표시를 위해) */}

frontend/components/screen/FloatingPanel.tsx

@@ -227,7 +227,7 @@ export const FloatingPanel: React.FC<FloatingPanelProps> = ({
     <div
       ref={panelRef}
       className={cn(
-        "fixed z-[9998] rounded-xl border border-gray-200/60 bg-white/95 backdrop-blur-sm shadow-xl shadow-gray-900/10",
+        "fixed z-[100] rounded-xl border border-gray-200/60 bg-white/95 backdrop-blur-sm shadow-xl shadow-gray-900/10",
         isDragging ? "cursor-move shadow-2xl" : "transition-all duration-200 ease-in-out",
         isResizing && "cursor-se-resize",
         className,
@@ -239,7 +239,7 @@ export const FloatingPanel: React.FC<FloatingPanelProps> = ({
         height: `${panelSize.height}px`,
         transform: isDragging ? "scale(1.01)" : "scale(1)",
         transition: isDragging ? "none" : "transform 0.1s ease-out, box-shadow 0.1s ease-out",
-        zIndex: isDragging ? 9999 : 9998, // 항상 컴포넌트보다 위에 표시
+        zIndex: isDragging ? 101 : 100, // 항상 컴포넌트보다 위에 표시
       }}
     >
       {/* 헤더 */}

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -532,12 +532,9 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   return (
     <>
       <div className="absolute" style={componentStyle}>
-        <div className="h-full w-full">
+        {/* 라벨 숨김 - 모달에서는 라벨을 표시하지 않음 */}
-          {/* 라벨 숨김 - 모달에서는 라벨을 표시하지 않음 */}
+        {/* 위젯 렌더링 */}
-
+        {renderInteractiveWidget(component)}
-          {/* 위젯 렌더링 */}
-          <div className="h-full w-full">{renderInteractiveWidget(component)}</div>
-        </div>
       </div>
 
       {/* 팝업 화면 렌더링 */}

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -85,7 +85,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     ? {
         outline: "2px solid #3b82f6",
         outlineOffset: "2px",
-        zIndex: 30, // 패널(z-50)과 모달(z-50)보다 낮게 설정
+        zIndex: 20, // 패널과 모달보다 낮게 설정
       }
     : {};
 
@@ -125,7 +125,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   return (
     <div
       id={`component-${id}`}
-      className="absolute cursor-pointer"
+      className="absolute cursor-pointer transition-all duration-200 ease-out"
       style={{ ...baseStyle, ...selectionStyle }}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
@@ -135,7 +135,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     >
       {/* 동적 컴포넌트 렌더링 */}
       <div className={`h-full w-full ${
-        component.componentConfig?.type === "table-list" ? "overflow-visible" : ""
+        component.componentConfig?.type === "table-list" ? "overflow-hidden" : ""
       }`}>
         <DynamicComponentRenderer
           component={component}
@@ -155,16 +155,16 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
 
       {/* 선택된 컴포넌트 정보 표시 */}
       {isSelected && (
-        <div className="absolute -top-6 left-0 rounded bg-blue-600 px-2 py-1 text-xs text-white">
+        <div className="absolute -top-8 left-0 rounded-lg bg-gray-800/90 px-3 py-2 text-xs text-white backdrop-blur-sm shadow-lg">
           {type === "widget" && (
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-2">
               {getWidgetIcon((component as WidgetComponent).widgetType)}
-              {(component as WidgetComponent).widgetType || "widget"}
+              <span className="font-medium">{(component as WidgetComponent).widgetType || "widget"}</span>
             </div>
           )}
           {type !== "widget" && (
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-2">
-              <span>{component.componentConfig?.type || type}</span>
+              <span className="font-medium">{component.componentConfig?.type || type}</span>
             </div>
           )}
         </div>

frontend/components/screen/ScreenDesigner.tsx

@@ -3437,7 +3437,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         >
           <div
             ref={canvasRef}
-            className="relative h-full w-full overflow-visible bg-white" // overflow-visible로 변경
+            className="relative h-full w-full overflow-auto bg-gradient-to-br from-slate-50/30 to-gray-100/20" // 미묘한 그라데이션 배경
             onClick={(e) => {
               if (e.target === e.currentTarget && !selectionDrag.wasSelecting) {
                 setSelectedComponent(null);
@@ -3502,7 +3502,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                         opacity: 0.8,
                         transform: "scale(1.02)",
                         transition: "none",
-                        zIndex: 9999,
+                        zIndex: 50,
                       },
                     };
                   } else {
@@ -3525,7 +3525,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                           ...component.style,
                           opacity: 0.8,
                           transition: "none",
-                          zIndex: 8888, // 주 컴포넌트보다 약간 낮게
+                          zIndex: 40, // 주 컴포넌트보다 약간 낮게
                         },
                       };
                     }
@@ -3610,7 +3610,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                                   opacity: 0.8,
                                   transform: "scale(1.02)",
                                   transition: "none",
-                                  zIndex: 9999,
+                                  zIndex: 50,
                                 },
                               };
                             } else {

frontend/components/screen/filters/AdvancedSearchFilters.tsx

@@ -65,7 +65,14 @@ export const AdvancedSearchFilters: React.FC<AdvancedSearchFiltersProps> = ({
     return tableColumns
       .filter((col) => {
         const webType = col.webType || col.web_type;
-        return filterableWebTypes.includes(webType) && col.isVisible !== false;
+        const columnName = col.columnName || col.column_name;
+        // 체크박스 컬럼과 __checkbox__ 컬럼, 사번 컬럼 제외
+        return filterableWebTypes.includes(webType) && 
+               col.isVisible !== false && 
+               columnName !== "__checkbox__" &&
+               !columnName.toLowerCase().includes('checkbox') &&
+               !columnName.toLowerCase().includes('sabun') &&
+               !columnName.toLowerCase().includes('사번');
       })
       .slice(0, 6) // 최대 6개까지만 자동 생성
       .map((col) => ({
@@ -333,8 +340,7 @@ export const AdvancedSearchFilters: React.FC<AdvancedSearchFiltersProps> = ({
             };
 
             return (
-              <div key={filter.columnName} className={`space-y-0.5 ${getFilterWidth()}`}>
+              <div key={filter.columnName} className={`${getFilterWidth()}`}>
-                <label className="text-muted-foreground text-xs font-medium">{filter.label}</label>
                 {renderFilter(filter)}
               </div>
             );

frontend/components/screen/widgets/FileUpload.tsx

@@ -703,20 +703,53 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
     <div className="w-full space-y-4">
       {/* 드래그 앤 드롭 영역 */}
       <div
-        className={`rounded-xl border-2 border-dashed p-8 text-center transition-all duration-300 ${
+        className={`group relative rounded-2xl border-2 border-dashed p-10 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"
+          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-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}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
       >
-        <Upload className="mx-auto mb-4 h-12 w-12 text-gray-400" />
+        <div className="relative">
-        <p className="mb-2 text-lg font-medium text-gray-900">
+          <Upload className={`mx-auto mb-4 h-16 w-16 transition-all duration-300 ${
+            isDragOver 
+              ? "text-blue-500 scale-110" 
+              : "text-gray-400 group-hover:text-blue-500 group-hover:scale-105"
+          }`} />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <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"
+            }`}></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"
+        }`}>
           {fileConfig.dragDropText || "파일을 드래그하여 업로드하세요"}
         </p>
-        <p className="mb-4 text-sm text-gray-500">또는 클릭하여 파일을 선택하세요</p>
+        <p className={`mb-4 text-sm transition-colors duration-300 ${
+          isDragOver 
+            ? "text-blue-500" 
+            : "text-gray-500 group-hover:text-blue-500"
+        }`}>
+          또는 클릭하여 파일을 선택하세요
+        </p>
 
-        <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">
+        <Button 
+          variant="outline" 
+          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"
+          }`}
+        >
           <Upload className="mr-2 h-4 w-4" />
           {fileConfig.uploadButtonText || "파일 선택"}
         </Button>
@@ -740,27 +773,53 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
 
       {/* 업로드된 파일 목록 */}
       {uploadedFiles.length > 0 && (
-        <div className="space-y-2">
+        <div className="space-y-4">
-          <h4 className="font-medium text-gray-900">
+          <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">
-            첨부된 파일 ({uploadedFiles.length}/{fileConfig.maxFiles})
+            <div className="flex items-center space-x-3">
-          </h4>
+              <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>
+              <div>
+                <h4 className="text-lg font-semibold text-gray-800">
+                  업로드된 파일 ({uploadedFiles.length}/{fileConfig.maxFiles})
+                </h4>
+                <p className="text-sm text-gray-600">
+                  총 {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>
+          </div>
 
-          <div className="space-y-2">
+          <div className="space-y-3">
             {uploadedFiles.map((fileInfo) => (
-              <div key={fileInfo.objid} className="flex items-center justify-between rounded-lg border bg-gray-50 p-3">
+              <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 className="flex flex-1 items-center space-x-3">
+                <div className="flex flex-1 items-center space-x-4">
-                  {getFileIcon(fileInfo.fileExt)}
+                  <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-sm font-medium text-gray-900">{fileInfo.realFileName}</p>
+                    <p className="truncate text-base font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-200">
-                    <div className="flex items-center space-x-2 text-xs text-gray-500">
+                      {fileInfo.realFileName}
-                      <span>{formatFileSize(fileInfo.fileSize)}</span>
+                    </p>
-                      <span>•</span>
+                    <div className="flex items-center space-x-3 text-sm text-gray-500 mt-1">
-                      <span>{fileInfo.fileExt.toUpperCase()}</span>
+                      <span className="flex items-center space-x-1">
+                        <div className="h-1.5 w-1.5 rounded-full bg-blue-400"></div>
+                        <span className="font-medium">{formatFileSize(fileInfo.fileSize)}</span>
+                      </span>
+                      <span className="flex items-center space-x-1">
+                        <div className="h-1.5 w-1.5 rounded-full bg-gray-400"></div>
+                        <span className="px-2 py-1 rounded-md bg-gray-100 text-xs font-medium">
+                          {fileInfo.fileExt.toUpperCase()}
+                        </span>
+                      </span>
                       {fileInfo.writer && (
-                        <>
+                        <span className="flex items-center space-x-1">
-                          <span>•</span>
+                          <div className="h-1.5 w-1.5 rounded-full bg-green-400"></div>
-                          <span>{fileInfo.writer}</span>
+                          <span className="text-xs">{fileInfo.writer}</span>
-                        </>
+                        </span>
                       )}
                     </div>
 
@@ -784,35 +843,60 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                   </div>
                 </div>
 
-                <div className="flex items-center space-x-1">
+                <div className="flex items-center space-x-2">
                   {/* 상태 표시 */}
-                  {fileInfo.isUploading && <Loader2 className="h-4 w-4 animate-spin text-blue-500" />}
+                  {fileInfo.isUploading && (
-                  {fileInfo.status === "ACTIVE" && <CheckCircle className="h-4 w-4 text-green-500" />}
+                    <div className="flex items-center space-x-2 rounded-lg bg-blue-50 px-3 py-2">
-                  {fileInfo.hasError && <AlertCircle className="h-4 w-4 text-red-500" />}
+                      <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
+                      <span className="text-xs font-medium text-blue-600">업로드 중...</span>
+                    </div>
+                  )}
+                  {fileInfo.status === "ACTIVE" && (
+                    <div className="flex items-center space-x-2 rounded-lg bg-green-50 px-3 py-2">
+                      <CheckCircle className="h-4 w-4 text-green-500" />
+                      <span className="text-xs font-medium text-green-600">완료</span>
+                    </div>
+                  )}
+                  {fileInfo.hasError && (
+                    <div className="flex items-center space-x-2 rounded-lg bg-red-50 px-3 py-2">
+                      <AlertCircle className="h-4 w-4 text-red-500" />
+                      <span className="text-xs font-medium text-red-600">오류</span>
+                    </div>
+                  )}
 
                   {/* 액션 버튼 */}
                   {!fileInfo.isUploading && !fileInfo.hasError && (
-                    <>
+                    <div className="flex items-center space-x-1">
                       {fileConfig.showPreview && (
-                        <Button variant="ghost" size="sm" onClick={() => previewFile(fileInfo)} className="h-8 w-8 p-0">
+                        <Button 
+                          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"
+                        >
                           <Eye className="h-4 w-4" />
                         </Button>
                       )}
 
-                      <Button variant="ghost" size="sm" onClick={() => previewFile(fileInfo)} className="h-8 w-8 p-0">
+                      <Button 
+                        variant="ghost" 
+                        size="sm" 
+                        onClick={() => previewFile(fileInfo)} 
+                        className="h-9 w-9 rounded-lg hover:bg-green-50 hover:text-green-600 transition-all duration-200"
+                      >
                         <Download className="h-4 w-4" />
                       </Button>
-                    </>
-                  )}
 
-                  <Button
+                      <Button
-                    variant="ghost"
+                        variant="ghost"
-                    size="sm"
+                        size="sm"
-                    onClick={() => deleteFile(fileInfo)}
+                        onClick={() => deleteFile(fileInfo)}
-                    className="h-8 w-8 p-0 text-red-500 hover:text-red-700"
+                        className="h-9 w-9 rounded-lg text-red-500 hover:bg-red-50 hover:text-red-700 transition-all duration-200"
-                  >
+                      >
-                    <X className="h-4 w-4" />
+                        <X className="h-4 w-4" />
-                  </Button>
+                      </Button>
+                    </div>
+                  )}
                 </div>
               </div>
             ))}
@@ -821,8 +905,18 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       )}
 
       {/* 문서 타입 정보 */}
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center justify-center space-x-2 rounded-xl bg-gradient-to-r from-amber-50/80 to-orange-50/60 border border-amber-200/40 px-4 py-3">
-        <Badge variant="outline">{fileConfig.docTypeName}</Badge>
+        <div className="flex items-center space-x-2">
+          <div className="flex h-6 w-6 items-center justify-center rounded-full bg-amber-100">
+            <File className="h-3 w-3 text-amber-600" />
+          </div>
+          <span className="text-sm font-medium text-amber-700">
+            파일명 클릭으로 미리보기 또는 "전체 자세히보기"로 파일 관리
+          </span>
+        </div>
+        <Badge variant="outline" className="bg-white/80 border-amber-200/60 text-amber-700">
+          {fileConfig.docTypeName}
+        </Badge>
       </div>
     </div>
   );

frontend/components/screen/widgets/types/FileWidget.tsx

@@ -134,17 +134,22 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
     <div className="h-full w-full space-y-2">
       {/* 파일 업로드 영역 */}
       <div
-        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"
+        className="group relative cursor-pointer rounded-2xl border-2 border-dashed border-gray-300/60 bg-gradient-to-br from-gray-50/80 to-blue-50/40 p-8 text-center transition-all duration-300 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"
         onClick={handleFileSelect}
         onDragOver={handleDragOver}
         onDrop={handleDrop}
         style={style}
       >
-        <Upload className="text-muted-foreground mx-auto mb-2 h-8 w-8" />
+        <div className="relative">
-        <p className="text-muted-foreground text-sm">
+          <Upload className="mx-auto mb-3 h-12 w-12 text-blue-400 transition-all duration-300 group-hover:scale-110 group-hover:text-blue-500" />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="h-16 w-16 rounded-full bg-blue-100/50 opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:scale-110"></div>
+          </div>
+        </div>
+        <p className="mb-2 text-lg font-semibold text-gray-700 transition-colors duration-300 group-hover:text-blue-600">
           {readonly ? "파일 업로드 불가" : "파일을 선택하거나 드래그하여 업로드"}
         </p>
-        <p className="text-muted-foreground mt-1 text-xs">
+        <p className="text-sm text-gray-500 transition-colors duration-300 group-hover:text-blue-500">
           {config?.accept && `허용 형식: ${config.accept}`}
           {config?.maxSize && ` (최대 ${config.maxSize}MB)`}
         </p>
@@ -162,42 +167,83 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
 
       {/* 업로드된 파일 목록 */}
       {files.length > 0 && (
-        <div className="max-h-32 space-y-2 overflow-y-auto">
+        <div className="space-y-3">
-          {files.map((file, index) => (
+          <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 key={index} className="bg-muted flex items-center justify-between rounded-md p-2">
+            <div className="flex items-center space-x-3">
-              <div className="flex min-w-0 flex-1 items-center space-x-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
-                <File className="text-muted-foreground h-4 w-4 flex-shrink-0" />
+                <File className="h-4 w-4 text-blue-600" />
-                <div className="min-w-0 flex-1">
+              </div>
-                  <p className="truncate text-sm font-medium">{file.name}</p>
+              <div>
-                  {file.size > 0 && <p className="text-muted-foreground text-xs">{formatFileSize(file.size)}</p>}
+                <h4 className="text-lg font-semibold text-gray-800">
-                </div>
+                  업로드된 파일 ({files.length}/{config?.maxFiles || "∞"})
+                </h4>
+                <p className="text-sm text-gray-600">
+                  총 {formatFileSize(files.reduce((sum, file) => sum + file.size, 0))}
+                </p>
               </div>
-
-              {!readonly && (
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    removeFile(index);
-                  }}
-                  className="h-6 w-6 p-0"
-                >
-                  <X className="h-3 w-3" />
-                </Button>
-              )}
             </div>
-          ))}
+          </div>
+
+          <div className="max-h-40 space-y-2 overflow-y-auto">
+            {files.map((file, index) => (
+              <div key={index} className="group flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-3 shadow-sm transition-all duration-200 hover:shadow-md hover:border-blue-300/60 hover:bg-blue-50/30">
+                <div className="flex flex-1 items-center space-x-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-gray-50 to-gray-100/80 shadow-sm">
+                    <File className="h-5 w-5 text-gray-500" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-200">
+                      {file.name}
+                    </p>
+                    {file.size > 0 && (
+                      <div className="flex items-center space-x-2 mt-1">
+                        <div className="h-1.5 w-1.5 rounded-full bg-blue-400"></div>
+                        <span className="text-xs font-medium text-gray-500">{formatFileSize(file.size)}</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {!readonly && (
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removeFile(index);
+                    }}
+                    className="h-8 w-8 rounded-lg text-red-500 hover:bg-red-50 hover:text-red-700 transition-all duration-200"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
+            ))}
+          </div>
         </div>
       )}
 
       {/* 파일 개수 표시 */}
       {files.length > 0 && (
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-center space-x-2 rounded-xl bg-gradient-to-r from-amber-50/80 to-orange-50/60 border border-amber-200/40 px-4 py-3">
-          <Badge variant="secondary" className="text-xs">
+          <div className="flex items-center space-x-2">
-            {files.length}개 파일
+            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-amber-100">
-          </Badge>
+              <File className="h-3 w-3 text-amber-600" />
-          {config?.maxFiles && <span className="text-muted-foreground text-xs">최대 {config.maxFiles}개</span>}
+            </div>
+            <span className="text-sm font-medium text-amber-700">
+              파일명 클릭으로 미리보기 또는 "전체 자세히보기"로 파일 관리
+            </span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Badge variant="outline" className="bg-white/80 border-amber-200/60 text-amber-700">
+              {files.length}개 파일
+            </Badge>
+            {config?.maxFiles && (
+              <Badge variant="outline" className="bg-white/80 border-gray-200/60 text-gray-600">
+                최대 {config.maxFiles}개
+              </Badge>
+            )}
+          </div>
         </div>
       )}
 

frontend/components/ui/alert-dialog.tsx

@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[9999] bg-black/80",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[999] bg-black/80",
       className,
     )}
     {...props}
@@ -36,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-[9999] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-[1000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
         className,
       )}
       {...props}

frontend/components/ui/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
+      "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[999] backdrop-blur-sm",
       className,
     )}
     {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-[9999] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-[1000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
         className,
       )}
       {...props}

frontend/components/ui/popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[99999] w-72 rounded-md border p-4 shadow-md outline-none",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[2000] w-72 rounded-md border p-4 shadow-md outline-none",
         className,
       )}
       {...props}

frontend/components/ui/select.tsx

@@ -55,7 +55,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[10000] max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[2000] max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,

frontend/lib/registry/components/card-display/CardDisplayComponent.tsx

@@ -253,7 +253,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
     padding: "32px", // 패딩 대폭 증가
     width: "100%",
     height: "100%",
-    background: "linear-gradient(to br, #f8fafc, #f1f5f9)", // 부드러운 그라데이션 배경
+    background: "#f8fafc", // 연한 하늘색 배경 (채도 낮춤)
     overflow: "auto",
     borderRadius: "12px", // 컨테이너 자체도 라운드 처리
   };
@@ -337,7 +337,22 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
     <>
       <style jsx>{`
         .card-hover {
-          transition: all 0.2s ease-in-out;
+          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          position: relative;
+          overflow: hidden;
+        }
+        .card-hover::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+          transition: left 0.6s ease;
+        }
+        .card-hover:hover::before {
+          left: 100%;
         }
         .card-hover:hover {
           transform: translateY(-2px);
@@ -346,6 +361,20 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
             0 4px 6px -2px rgba(0, 0, 0, 0.05);
           border-color: #3b82f6;
         }
+        .card-container {
+          position: relative;
+        }
+        .card-container::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: transparent;
+          border-radius: 12px;
+          pointer-events: none;
+        }
       `}</style>
       <div
         className={className}
@@ -358,7 +387,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
         onDragEnd={onDragEnd}
         {...safeDomProps}
       >
-        <div style={containerStyle}>
+        <div style={containerStyle} className="card-container">
           {displayData.length === 0 ? (
             <div
               style={{
@@ -393,7 +422,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                 <div
                   key={data.id || index}
                   style={cardStyle}
-                  className="group cursor-pointer hover:transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300 ease-out"
+                  className="card-hover group cursor-pointer"
                   onClick={() => handleCardClick(data)}
                 >
                   {/* 카드 이미지 - 통일된 디자인 */}

frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx

@@ -46,10 +46,11 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
 
   return (
     <div
-      className="relative h-full overflow-auto rounded-xl border border-gray-200/60 bg-gradient-to-br from-white to-gray-50/30 shadow-sm"
+      className="relative h-full overflow-x-auto overflow-y-auto rounded-2xl border border-gray-200/40 bg-white shadow-sm backdrop-blur-sm"
       style={{
         width: "100%",
         maxWidth: "100%",
+        maxHeight: "100%", // 최대 높이 제한으로 스크롤 활성화
         boxSizing: "border-box",
       }}
     >
@@ -57,12 +58,12 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
         className="w-full"
         style={{
           width: "100%",
-          maxWidth: "100%",
+          minWidth: "100%",
-          tableLayout: "fixed",
+          tableLayout: "auto", // 테이블 크기 자동 조정
           boxSizing: "border-box",
         }}
       >
-        <TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-gradient-to-r from-slate-50 to-blue-50/30 border-b border-gray-200/60" : "bg-gradient-to-r from-slate-50 to-blue-50/30 border-b border-gray-200/60"}>
+        <TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm border-b border-gray-200/40" : "bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm border-b border-gray-200/40"}>
           <TableRow className="border-b border-gray-200/40">
             {visibleColumns.map((column, colIndex) => {
               // 왼쪽 고정 컬럼들의 누적 너비 계산
@@ -84,23 +85,28 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                   key={column.columnName}
                   className={cn(
                     column.columnName === "__checkbox__"
-                      ? "h-12 border-0 px-4 py-3 text-center align-middle"
+                      ? "h-12 border-0 px-6 py-4 text-center align-middle"
-                      : "h-12 cursor-pointer border-0 px-4 py-3 text-left align-middle font-semibold whitespace-nowrap text-slate-700 select-none transition-all duration-200",
+                      : "h-12 cursor-pointer border-0 px-6 py-4 text-left align-middle font-semibold whitespace-nowrap text-gray-700 select-none transition-all duration-200 hover:text-gray-900",
                     `text-${column.align}`,
+<<<<<<< HEAD
                     column.sortable && "hover:bg-orange-50 hover:text-orange-700",
+=======
+                    column.sortable && "hover:bg-orange-200/70",
+>>>>>>> 8c19d57ced949bde4c9ffcce6544791d3e4b051f
                     // 고정 컬럼 스타일
-                    column.fixed === "left" && "sticky z-10 border-r border-gray-200/60 bg-gradient-to-r from-slate-50 to-blue-50/30 shadow-sm",
+                    column.fixed === "left" && "sticky z-10 border-r border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
-                    column.fixed === "right" && "sticky z-10 border-l border-gray-200/60 bg-gradient-to-r from-slate-50 to-blue-50/30 shadow-sm",
+                    column.fixed === "right" && "sticky z-10 border-l border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
                     // 숨김 컬럼 스타일 (디자인 모드에서만)
                     isDesignMode && column.hidden && "bg-gray-100/50 opacity-40",
                   )}
                   style={{
                     width: getColumnWidth(column),
-                    minWidth: getColumnWidth(column),
+                    minWidth: "100px", // 최소 너비 보장
-                    maxWidth: getColumnWidth(column),
+                    maxWidth: "300px", // 최대 너비 제한
                     boxSizing: "border-box",
                     overflow: "hidden",
                     textOverflow: "ellipsis",
+                    whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
                     // sticky 위치 설정
                     ...(column.fixed === "left" && { left: leftFixedWidth }),
                     ...(column.fixed === "right" && { right: rightFixedWidth }),
@@ -155,9 +161,9 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
               <TableRow
                 key={`row-${index}`}
                 className={cn(
-                  "h-12 cursor-pointer border-b border-gray-100/60 leading-none transition-all duration-200",
+                  "h-12 cursor-pointer border-b border-gray-100/40 leading-none transition-all duration-200",
-                  tableConfig.tableStyle?.hoverEffect && "hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-indigo-50/20 hover:shadow-sm",
+                  tableConfig.tableStyle?.hoverEffect && "hover:bg-gradient-to-r hover:from-orange-50/80 hover:to-orange-100/60 hover:shadow-sm",
-                  tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gradient-to-r from-slate-50/30 to-gray-50/20",
+                  tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/30",
                 )}
                 style={{ minHeight: "48px", height: "48px", lineHeight: "1" }}
                 onClick={() => handleRowClick(row)}
@@ -181,17 +187,19 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                     <TableCell
                       key={`cell-${column.columnName}`}
                       className={cn(
-                        "h-12 px-4 py-3 align-middle text-sm whitespace-nowrap text-slate-600 transition-all duration-200",
+                        "h-12 px-6 py-4 align-middle text-sm whitespace-nowrap text-gray-600 transition-all duration-200",
                         `text-${column.align}`,
                         // 고정 컬럼 스타일
-                        column.fixed === "left" && "sticky z-10 border-r border-gray-200/60 bg-white/90 backdrop-blur-sm",
+                        column.fixed === "left" && "sticky z-10 border-r border-gray-200/40 bg-white/90 backdrop-blur-sm",
-                        column.fixed === "right" && "sticky z-10 border-l border-gray-200/60 bg-white/90 backdrop-blur-sm",
+                        column.fixed === "right" && "sticky z-10 border-l border-gray-200/40 bg-white/90 backdrop-blur-sm",
                       )}
                       style={{
                         minHeight: "48px",
                         height: "48px",
                         verticalAlign: "middle",
                         width: getColumnWidth(column),
+                        minWidth: "100px", // 최소 너비 보장
+                        maxWidth: "300px", // 최대 너비 제한
                         boxSizing: "border-box",
                         overflow: "hidden",
                         textOverflow: "ellipsis",

frontend/lib/registry/components/table-list/TableListComponent.tsx

@@ -298,7 +298,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     width: "100%", // 컨테이너 전체 너비 사용
     maxWidth: "100%", // 최대 너비 제한
     height: "auto", // 항상 자동 높이로 테이블 크기에 맞춤
-    minHeight: isDesignMode ? `${Math.min(optimalHeight, 400)}px` : `${optimalHeight}px`, // 최소 높이 보장
+    minHeight: isDesignMode ? "200px" : "300px", // 최소 높이만 보장
+    maxHeight: isDesignMode ? "600px" : "800px", // 최대 높이 제한으로 스크롤 활성화
     ...component.style,
     ...style,
     display: "flex",
@@ -1315,8 +1316,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     <div
       style={{ ...componentStyle, zIndex: 10 }} // 🎯 componentStyle + z-index 추가
       className={cn(
-        "rounded-lg border border-gray-200 bg-white shadow-md shadow-blue-100/50",
+        "relative overflow-hidden",
-        "relative overflow-hidden", // 🎯 항상 overflow-hidden 적용 + relative 추가
+        "bg-white border border-gray-200/60",
+        "rounded-2xl shadow-sm",
+        "backdrop-blur-sm",
+        "transition-all duration-300 ease-out",
+        isSelected && "ring-2 ring-blue-500/20 shadow-lg shadow-blue-500/10",
         className,
       )}
       {...domProps}
@@ -1324,7 +1329,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       {/* 헤더 */}
       {tableConfig.showHeader && (
         <div
+<<<<<<< HEAD
           className="flex items-center justify-between border-b border-gray-200 bg-gray-100 px-6 py-4"
+=======
+          className="flex items-center justify-between border-b border-gray-200/40 bg-gradient-to-r from-slate-50/80 to-gray-50/60 px-6 py-5"
+>>>>>>> 8c19d57ced949bde4c9ffcce6544791d3e4b051f
           style={{
             width: "100%",
             maxWidth: "100%",
@@ -1333,14 +1342,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         >
           <div className="flex items-center space-x-4">
             {(tableConfig.title || tableLabel) && (
-              <h3 className="text-lg font-semibold text-gray-900">{tableConfig.title || tableLabel}</h3>
+              <h3 className="text-xl font-semibold text-gray-800 tracking-tight">{tableConfig.title || tableLabel}</h3>
             )}
           </div>
 
           <div className="flex items-center space-x-3">
             {/* 선택된 항목 정보 표시 */}
             {selectedRows.size > 0 && (
-              <div className="flex items-center space-x-2 rounded-md bg-blue-50 px-3 py-1">
+              <div className="flex items-center space-x-2 rounded-full bg-blue-50/80 px-4 py-2 backdrop-blur-sm">
                 <span className="text-sm font-medium text-blue-700">{selectedRows.size}개 선택됨</span>
               </div>
             )}
@@ -1351,15 +1360,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               size="sm"
               onClick={handleRefresh}
               disabled={loading}
-              style={buttonStyle}
+              className="group relative rounded-xl border-gray-200/60 bg-white/80 backdrop-blur-sm shadow-sm hover:shadow-md transition-all duration-200 hover:bg-gray-50/80"
-              className="group relative rounded-lg shadow-sm [&:hover]:opacity-90"
             >
               <div className="flex items-center space-x-2">
                 <div className="relative">
-                  <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} style={{ color: buttonTextColor }} />
+                  <RefreshCw className={cn("h-4 w-4 text-gray-600", loading && "animate-spin")} />
-                  {loading && <div className="absolute -inset-1 animate-pulse rounded-full bg-blue-200/30"></div>}
+                  {loading && <div className="absolute -inset-1 animate-pulse rounded-full bg-blue-100/40"></div>}
                 </div>
-                <span className="text-sm font-medium" style={{ color: buttonTextColor }}>
+                <span className="text-sm font-medium text-gray-700">
                   {loading ? "새로고침 중..." : "새로고침"}
                 </span>
               </div>
@@ -1399,7 +1407,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
       {/* 테이블 컨텐츠 */}
       <div
-        className={`w-full overflow-hidden ${localPageSize >= 50 ? "flex-1" : ""}`}
+        className={`w-full overflow-auto flex-1`}
         style={{
           width: "100%",
           maxWidth: "100%",
@@ -1478,20 +1486,20 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             />
           </div>
         ) : (
-          // 기존 테이블 (가로 스크롤이 필요 없는 경우)
+          // 기존 테이블 (가로 스크롤이 필요한 경우)
-          <div className="w-full overflow-hidden">
+          <div className="w-full overflow-x-auto overflow-y-auto">
             <Table
               className="w-full"
               style={{
                 width: "100%",
-                maxWidth: "100%",
+                minWidth: "100%",
-                tableLayout: "fixed", // 테이블 크기 고정
+                tableLayout: "auto", // 테이블 크기 자동 조정
               }}
             >
               <TableHeader
                 className={cn(
                   tableConfig.stickyHeader ? "sticky top-0 z-20" : "",
-                  "border-b border-gray-200 bg-gray-100/80",
+                  "border-b border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm",
                 )}
               >
                 <TableRow
@@ -1508,7 +1516,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                     <TableHead
                       key={column.columnName}
                       style={{
-                        width: column.width ? `${column.width}px` : undefined,
+                        width: column.width ? `${column.width}px` : "150px", // 기본 너비 설정
+                        minWidth: "100px", // 최소 너비 보장
+                        maxWidth: "300px", // 최대 너비 제한
                         minHeight: "48px !important",
                         height: "48px !important",
                         verticalAlign: "middle",
@@ -1516,14 +1526,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         boxSizing: "border-box",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
+                        whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
                       }}
                       className={cn(
-                        "h-12 px-4 py-3 align-middle text-sm font-semibold text-gray-800",
+                        "h-12 px-6 py-4 align-middle text-sm font-semibold text-gray-700",
+                        "transition-colors duration-200 ease-out",
                         column.columnName === "__checkbox__"
                           ? "text-center"
-                          : "cursor-pointer whitespace-nowrap select-none",
+                          : "cursor-pointer whitespace-nowrap select-none hover:text-gray-900",
                         `text-${column.align}`,
-                        column.sortable && "transition-colors duration-150 hover:bg-orange-100",
+                        column.sortable && "hover:bg-orange-200/70",
                       )}
                       onClick={() => column.sortable && handleSort(column.columnName)}
                     >
@@ -1568,14 +1580,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       onDragStart={(e) => handleRowDragStart(e, row, index)}
                       onDragEnd={handleRowDragEnd}
                       className={cn(
-                        "group relative h-12 cursor-pointer border-b border-gray-100 transition-all duration-200",
+                        "group relative h-12 cursor-pointer border-b border-gray-100/60 transition-all duration-200",
                         // 기본 스타일
                         tableConfig.tableStyle?.hoverEffect &&
-                          "hover:bg-gradient-to-r hover:from-orange-200 hover:to-orange-300/90 hover:shadow-sm",
+                          "hover:bg-gradient-to-r hover:from-orange-50/80 hover:to-orange-100/60 hover:shadow-sm",
-                        tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-100/80",
+                        tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/40",
                         // 드래그 상태 스타일 (미묘하게)
                         draggedRowIndex === index &&
-                          "border-blue-200 bg-gradient-to-r from-blue-50 to-blue-100/40 shadow-sm",
+                          "border-blue-200/60 bg-gradient-to-r from-blue-50/60 to-indigo-50/40 shadow-sm",
                         isDragging && draggedRowIndex !== index && "opacity-70",
                         // 드래그 가능 표시
                         !isDesignMode && "hover:cursor-grab active:cursor-grabbing",
@@ -1593,14 +1605,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         <TableCell
                           key={column.columnName}
                           className={cn(
-                            "h-12 px-4 py-3 align-middle text-sm transition-all duration-200",
+                            "h-12 px-6 py-4 align-middle text-sm transition-all duration-200 text-gray-600",
                             `text-${column.align}`,
                           )}
                           style={{
                             minHeight: "48px",
                             height: "48px",
                             verticalAlign: "middle",
-                            width: column.width ? `${column.width}px` : undefined,
+                            width: column.width ? `${column.width}px` : "150px", // 기본 너비 설정
+                            minWidth: "100px", // 최소 너비 보장
+                            maxWidth: "300px", // 최대 너비 제한
                             boxSizing: "border-box",
                             overflow: "hidden",
                             textOverflow: "ellipsis",
@@ -1718,7 +1732,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
                   // 데이터는 useEffect에서 자동으로 다시 로드됨
                 }}
-                className="rounded-lg border border-slate-200 bg-white/80 px-3 py-2 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:border-slate-300 hover:bg-white"
+                className="rounded-xl border border-gray-200/60 bg-white/80 backdrop-blur-sm px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300/60 hover:bg-white hover:shadow-md"
               >
                 {(tableConfig.pagination?.pageSizeOptions || [10, 20, 50, 100]).map((size) => (
                   <option key={size} value={size}>
@@ -1729,13 +1743,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             )}
 
             {/* 페이지네이션 버튼 */}
-            <div className="flex items-center space-x-2 rounded-lg border border-gray-200 bg-white p-1 shadow-sm">
+            <div className="flex items-center space-x-2 rounded-xl border border-gray-200/60 bg-white/80 backdrop-blur-sm p-1 shadow-sm">
               <Button
                 variant="outline"
                 size="sm"
                 onClick={() => handlePageChange(1)}
                 disabled={currentPage === 1}
-                className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
+                className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
               >
                 <ChevronsLeft className="h-4 w-4" />
               </Button>
@@ -1744,13 +1758,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 size="sm"
                 onClick={() => handlePageChange(currentPage - 1)}
                 disabled={currentPage === 1}
-                className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
+                className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
               >
                 <ChevronLeft className="h-4 w-4" />
               </Button>
 
-              <div className="flex items-center rounded-md border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-1">
+              <div className="flex items-center rounded-lg border border-gray-200/40 bg-gradient-to-r from-gray-50/80 to-slate-50/60 px-4 py-2 backdrop-blur-sm">
-                <span className="text-sm font-semibold text-blue-800">{currentPage}</span>
+                <span className="text-sm font-semibold text-gray-800">{currentPage}</span>
                 <span className="mx-2 font-light text-gray-400">/</span>
                 <span className="text-sm font-medium text-gray-600">{totalPages}</span>
               </div>
@@ -1760,7 +1774,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 size="sm"
                 onClick={() => handlePageChange(currentPage + 1)}
                 disabled={currentPage === totalPages}
-                className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
+                className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
               >
                 <ChevronRight className="h-4 w-4" />
               </Button>
@@ -1769,7 +1783,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 size="sm"
                 onClick={() => handlePageChange(totalPages)}
                 disabled={currentPage === totalPages}
-                className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
+                className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
               >
                 <ChevronsRight className="h-4 w-4" />
               </Button>