전체적인 스타일 수정

frontend/components/admin/BatchCard.tsx

@@ -12,8 +12,6 @@ import {
   RefreshCw,
   Clock,
   Database,
-  ArrowRight,
-  Globe,
   Calendar,
   Activity,
   Settings
@@ -39,90 +37,97 @@ export default function BatchCard({
   onDelete,
   getMappingSummary
 }: BatchCardProps) {
-  // 상태에 따른 색상 및 스타일 결정
-  const getStatusColor = () => {
-    if (executingBatch === batch.id) return "bg-blue-50 border-blue-200";
-    if (batch.is_active === 'Y') return "bg-green-50 border-green-200";
-    return "bg-gray-50 border-gray-200";
-  };
-
-  const getStatusBadge = () => {
-    if (executingBatch === batch.id) {
-      return <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs px-1.5 py-0.5 h-5">실행 중</Badge>;
-    }
-    return (
-      <Badge variant={batch.is_active === 'Y' ? 'default' : 'secondary'} className="text-xs px-1.5 py-0.5 h-5">
-        {batch.is_active === 'Y' ? '활성' : '비활성'}
-      </Badge>
-    );
-  };
+  // 상태에 따른 스타일 결정
+  const isExecuting = executingBatch === batch.id;
+  const isActive = batch.is_active === 'Y';
 
   return (
-    <Card className={`transition-all duration-200 hover:shadow-md ${getStatusColor()} h-fit`}>
-      <CardContent className="p-3">
-        {/* 헤더 섹션 */}
-        <div className="mb-1.5">
-          <div className="flex items-center justify-between mb-1">
-            <div className="flex items-center space-x-1 min-w-0 flex-1">
-              <Settings className="h-2.5 w-2.5 text-gray-600 flex-shrink-0" />
-              <h3 className="text-xs font-medium text-gray-900 truncate">{batch.batch_name}</h3>
+    <Card className="rounded-lg border bg-card shadow-sm transition-colors hover:bg-muted/50">
+      <CardContent className="p-4">
+        {/* 헤더 */}
+        <div className="mb-4 flex items-start justify-between">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1">
+              <Settings className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+              <h3 className="text-base font-semibold truncate">{batch.batch_name}</h3>
             </div>
-            {getStatusBadge()}
+            <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
+              {batch.description || '설명 없음'}
+            </p>
           </div>
-          
-          <p className="text-xs text-gray-500 line-clamp-1 leading-tight h-3 flex items-start">
-            {batch.description || '\u00A0'}
-          </p>
+          <Badge variant={isActive ? 'default' : 'secondary'} className="ml-2 flex-shrink-0">
+            {isExecuting ? '실행 중' : isActive ? '활성' : '비활성'}
+          </Badge>
         </div>
 
-        {/* 정보 섹션 */}
-        <div className="space-y-1 mb-2">
+        {/* 정보 */}
+        <div className="space-y-2 border-t pt-4">
           {/* 스케줄 정보 */}
-          <div className="flex items-center space-x-1 text-xs">
-            <Clock className="h-2.5 w-2.5 text-blue-600" />
-            <span className="text-gray-600 truncate text-xs">{batch.cron_schedule}</span>
+          <div className="flex justify-between text-sm">
+            <span className="flex items-center gap-2 text-muted-foreground">
+              <Clock className="h-4 w-4" />
+              스케줄
+            </span>
+            <span className="font-medium truncate ml-2">{batch.cron_schedule}</span>
           </div>
 
           {/* 생성일 정보 */}
-          <div className="flex items-center space-x-1 text-xs">
-            <Calendar className="h-2.5 w-2.5 text-green-600" />
-            <span className="text-gray-600 text-xs">
+          <div className="flex justify-between text-sm">
+            <span className="flex items-center gap-2 text-muted-foreground">
+              <Calendar className="h-4 w-4" />
+              생성일
+            </span>
+            <span className="font-medium">
               {new Date(batch.created_date).toLocaleDateString('ko-KR')}
             </span>
           </div>
-        </div>
 
-        {/* 매핑 정보 섹션 */}
-        {batch.batch_mappings && batch.batch_mappings.length > 0 && (
-          <div className="mb-2 p-1.5 bg-white rounded border border-gray-100">
-            <div className="flex items-center space-x-1 mb-1">
-              <Database className="h-2.5 w-2.5 text-purple-600" />
-              <span className="text-xs font-medium text-gray-700">
-                매핑 ({batch.batch_mappings.length})
+          {/* 매핑 정보 */}
+          {batch.batch_mappings && batch.batch_mappings.length > 0 && (
+            <div className="flex justify-between text-sm">
+              <span className="flex items-center gap-2 text-muted-foreground">
+                <Database className="h-4 w-4" />
+                매핑
+              </span>
+              <span className="font-medium">
+                {batch.batch_mappings.length}개
               </span>
             </div>
-            <div className="text-xs text-gray-600 line-clamp-1">
-              {getMappingSummary(batch.batch_mappings)}
+          )}
+        </div>
+
+        {/* 실행 중 프로그레스 */}
+        {isExecuting && (
+          <div className="mt-4 space-y-2 border-t pt-4">
+            <div className="flex items-center gap-2 text-sm text-primary">
+              <Activity className="h-4 w-4 animate-pulse" />
+              <span>실행 중...</span>
+            </div>
+            <div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
+              <div 
+                className="h-full animate-pulse rounded-full bg-primary" 
+                style={{ width: '45%' }}
+              />
             </div>
           </div>
         )}
 
-        {/* 액션 버튼 섹션 */}
-        <div className="grid grid-cols-2 gap-1 pt-2 border-t border-gray-100">
+        {/* 액션 버튼 */}
+        <div className="mt-4 grid grid-cols-2 gap-2 border-t pt-4">
           {/* 실행 버튼 */}
           <Button
             variant="outline"
             size="sm"
             onClick={() => onExecute(batch.id)}
-            disabled={executingBatch === batch.id}
-            className="flex items-center justify-center space-x-1 bg-blue-50 hover:bg-blue-100 text-blue-700 border-blue-200 text-xs h-6"
+            disabled={isExecuting}
+            className="h-9 flex-1 gap-2 text-sm"
           >
-            {executingBatch === batch.id ? (
-              <RefreshCw className="h-2.5 w-2.5 animate-spin" />
+            {isExecuting ? (
+              <RefreshCw className="h-4 w-4 animate-spin" />
             ) : (
-              <Play className="h-2.5 w-2.5" />
+              <Play className="h-4 w-4" />
             )}
-            <span>실행</span>
+            실행
           </Button>
           
           {/* 활성화/비활성화 버튼 */}
@@ -130,18 +135,14 @@ export default function BatchCard({
             variant="outline"
             size="sm"
             onClick={() => onToggleStatus(batch.id, batch.is_active)}
-            className={`flex items-center justify-center space-x-1 text-xs h-6 ${
-              batch.is_active === 'Y' 
-                ? 'bg-orange-50 hover:bg-orange-100 text-orange-700 border-orange-200'
-                : 'bg-green-50 hover:bg-green-100 text-green-700 border-green-200'
-            }`}
+            className="h-9 flex-1 gap-2 text-sm"
           >
-            {batch.is_active === 'Y' ? (
-              <Pause className="h-2.5 w-2.5" />
+            {isActive ? (
+              <Pause className="h-4 w-4" />
             ) : (
-              <Play className="h-2.5 w-2.5" />
+              <Play className="h-4 w-4" />
             )}
-            <span>{batch.is_active === 'Y' ? '비활성' : '활성'}</span>
+            {isActive ? '비활성' : '활성'}
           </Button>
           
           {/* 수정 버튼 */}
@@ -149,36 +150,23 @@ export default function BatchCard({
             variant="outline"
             size="sm"
             onClick={() => onEdit(batch.id)}
-            className="flex items-center justify-center space-x-1 bg-gray-50 hover:bg-gray-100 text-gray-700 border-gray-200 text-xs h-6"
+            className="h-9 flex-1 gap-2 text-sm"
           >
-            <Edit className="h-2.5 w-2.5" />
-            <span>수정</span>
+            <Edit className="h-4 w-4" />
+            수정
           </Button>
           
           {/* 삭제 버튼 */}
           <Button
-            variant="outline"
+            variant="destructive"
             size="sm"
             onClick={() => onDelete(batch.id, batch.batch_name)}
-            className="flex items-center justify-center space-x-1 bg-red-50 hover:bg-red-100 text-red-700 border-red-200 text-xs h-6"
+            className="h-9 flex-1 gap-2 text-sm"
           >
-            <Trash2 className="h-2.5 w-2.5" />
-            <span>삭제</span>
+            <Trash2 className="h-4 w-4" />
+            삭제
           </Button>
         </div>
-
-        {/* 실행 중일 때 프로그레스 표시 */}
-        {executingBatch === batch.id && (
-          <div className="mt-2 pt-2 border-t border-blue-100">
-            <div className="flex items-center space-x-1 text-xs text-blue-600">
-              <Activity className="h-3 w-3 animate-pulse" />
-              <span>실행 중...</span>
-            </div>
-            <div className="mt-1 w-full bg-blue-100 rounded-full h-1">
-              <div className="bg-blue-600 h-1 rounded-full animate-pulse" style={{ width: '45%' }}></div>
-            </div>
-          </div>
-        )}
       </CardContent>
     </Card>
   );