배치목록 카드형으로 변경

frontend/app/(main)/admin/batchmng/page.tsx

@@ -4,7 +4,6 @@ import React, { useState, useEffect } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
 import { 
   Table, 
   TableBody, 
@@ -16,15 +15,8 @@ import {
 import { 
   Plus, 
   Search, 
-  Play, 
-  Pause, 
-  Edit, 
-  Trash2, 
   RefreshCw,
-  Clock,
-  Database,
-  ArrowRight,
-  Globe
+  Database
 } from "lucide-react";
 import { toast } from "sonner";
 import { useRouter } from "next/navigation";
@@ -33,6 +25,7 @@ import {
   BatchConfig,
   BatchMapping,
 } from "@/lib/api/batch";
+import BatchCard from "@/components/admin/BatchCard";
 
 export default function BatchManagementPage() {
   const router = useRouter();
@@ -185,7 +178,7 @@ export default function BatchManagementPage() {
   };
 
   return (
-    <div className="container mx-auto p-6 space-y-6">
+    <div className="container mx-auto p-4 space-y-2">
       {/* 헤더 */}
       <div className="flex items-center justify-between">
         <div>
@@ -203,7 +196,7 @@ export default function BatchManagementPage() {
 
       {/* 검색 및 필터 */}
       <Card>
-        <CardContent className="pt-6">
+        <CardContent className="py-2">
           <div className="flex items-center space-x-4">
             <div className="flex-1 relative">
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
@@ -254,100 +247,21 @@ export default function BatchManagementPage() {
               )}
             </div>
           ) : (
-            <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3">
               {batchConfigs.map((batch) => (
-                <div key={batch.id} className="border rounded-lg p-6 space-y-4">
-                  {/* 배치 기본 정보 */}
-                  <div className="flex items-start justify-between">
-                    <div className="space-y-2">
-                      <div className="flex items-center space-x-3">
-                        <h3 className="text-lg font-semibold">{batch.batch_name}</h3>
-                        <Badge variant={batch.is_active === 'Y' ? 'default' : 'secondary'}>
-                          {batch.is_active === 'Y' ? '활성' : '비활성'}
-                        </Badge>
-                      </div>
-                      {batch.description && (
-                        <p className="text-muted-foreground">{batch.description}</p>
-                      )}
-                      <div className="flex items-center space-x-4 text-sm text-muted-foreground">
-                        <div className="flex items-center space-x-1">
-                          <Clock className="h-4 w-4" />
-                          <span>{batch.cron_schedule}</span>
-                        </div>
-                        <div>
-                          생성일: {new Date(batch.created_date).toLocaleDateString()}
-                        </div>
-                      </div>
-                    </div>
-                    
-                    {/* 액션 버튼들 */}
-                    <div className="flex items-center space-x-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => executeBatch(batch.id)}
-                        disabled={executingBatch === batch.id}
-                        className="flex items-center space-x-1"
-                      >
-                        {executingBatch === batch.id ? (
-                          <RefreshCw className="h-4 w-4 animate-spin" />
-                        ) : (
-                          <Play className="h-4 w-4" />
-                        )}
-                        <span>실행</span>
-                      </Button>
-                      
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => {
-                          console.log("🖱️ 비활성화/활성화 버튼 클릭:", { batchId: batch.id, currentStatus: batch.is_active });
-                          toggleBatchStatus(batch.id, batch.is_active);
-                        }}
-                        className="flex items-center space-x-1"
-                      >
-                        {batch.is_active === 'Y' ? (
-                          <Pause className="h-4 w-4" />
-                        ) : (
-                          <Play className="h-4 w-4" />
-                        )}
-                        <span>{batch.is_active === 'Y' ? '비활성화' : '활성화'}</span>
-                      </Button>
-                      
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => router.push(`/admin/batchmng/edit/${batch.id}`)}
-                        className="flex items-center space-x-1"
-                      >
-                        <Edit className="h-4 w-4" />
-                        <span>수정</span>
-                      </Button>
-                      
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => deleteBatch(batch.id, batch.batch_name)}
-                        className="flex items-center space-x-1 text-red-600 hover:text-red-700"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                        <span>삭제</span>
-                      </Button>
-                    </div>
-                  </div>
-
-                  {/* 매핑 정보 */}
-                  {batch.batch_mappings && batch.batch_mappings.length > 0 && (
-                    <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-muted-foreground">
-                        매핑 정보 ({batch.batch_mappings.length}개)
-                      </h4>
-                      <div className="text-sm">
-                        {getMappingSummary(batch.batch_mappings)}
-                      </div>
-                    </div>
-                  )}
-                </div>
+                <BatchCard
+                  key={batch.id}
+                  batch={batch}
+                  executingBatch={executingBatch}
+                  onExecute={executeBatch}
+                  onToggleStatus={(batchId, currentStatus) => {
+                    console.log("🖱️ 비활성화/활성화 버튼 클릭:", { batchId, currentStatus });
+                    toggleBatchStatus(batchId, currentStatus);
+                  }}
+                  onEdit={(batchId) => router.push(`/admin/batchmng/edit/${batchId}`)}
+                  onDelete={deleteBatch}
+                  getMappingSummary={getMappingSummary}
+                />
               ))}
             </div>
           )}

frontend/components/admin/BatchCard.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { 
+  Play, 
+  Pause, 
+  Edit, 
+  Trash2, 
+  RefreshCw,
+  Clock,
+  Database,
+  ArrowRight,
+  Globe,
+  Calendar,
+  Activity,
+  Settings
+} from "lucide-react";
+import { BatchConfig } from "@/lib/api/batch";
+
+interface BatchCardProps {
+  batch: BatchConfig;
+  executingBatch: number | null;
+  onExecute: (batchId: number) => void;
+  onToggleStatus: (batchId: number, currentStatus: string) => void;
+  onEdit: (batchId: number) => void;
+  onDelete: (batchId: number, batchName: string) => void;
+  getMappingSummary: (mappings: any[]) => string;
+}
+
+export default function BatchCard({
+  batch,
+  executingBatch,
+  onExecute,
+  onToggleStatus,
+  onEdit,
+  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>
+    );
+  };
+
+  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>
+            </div>
+            {getStatusBadge()}
+          </div>
+          
+          <p className="text-xs text-gray-500 line-clamp-1 leading-tight h-3 flex items-start">
+            {batch.description || '\u00A0'}
+          </p>
+        </div>
+
+        {/* 정보 섹션 */}
+        <div className="space-y-1 mb-2">
+          {/* 스케줄 정보 */}
+          <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>
+
+          {/* 생성일 정보 */}
+          <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">
+              {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})
+              </span>
+            </div>
+            <div className="text-xs text-gray-600 line-clamp-1">
+              {getMappingSummary(batch.batch_mappings)}
+            </div>
+          </div>
+        )}
+
+        {/* 액션 버튼 섹션 */}
+        <div className="grid grid-cols-2 gap-1 pt-2 border-t border-gray-100">
+          {/* 실행 버튼 */}
+          <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"
+          >
+            {executingBatch === batch.id ? (
+              <RefreshCw className="h-2.5 w-2.5 animate-spin" />
+            ) : (
+              <Play className="h-2.5 w-2.5" />
+            )}
+            <span>실행</span>
+          </Button>
+          
+          {/* 활성화/비활성화 버튼 */}
+          <Button
+            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'
+            }`}
+          >
+            {batch.is_active === 'Y' ? (
+              <Pause className="h-2.5 w-2.5" />
+            ) : (
+              <Play className="h-2.5 w-2.5" />
+            )}
+            <span>{batch.is_active === 'Y' ? '비활성' : '활성'}</span>
+          </Button>
+          
+          {/* 수정 버튼 */}
+          <Button
+            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"
+          >
+            <Edit className="h-2.5 w-2.5" />
+            <span>수정</span>
+          </Button>
+          
+          {/* 삭제 버튼 */}
+          <Button
+            variant="outline"
+            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"
+          >
+            <Trash2 className="h-2.5 w-2.5" />
+            <span>삭제</span>
+          </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>
+  );
+}