From c1204923783e0c20831e6b7f4676374e1b81fa63 Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Mon, 9 Mar 2026 22:07:11 +0900
Subject: [PATCH] [agent-pipeline] pipe-20260309122600-xzeg round-1

---
 .../(main)/admin/approvalTemplate/page.tsx    | 261 ++++------
 .../(main)/admin/batch-management/page.tsx    | 402 ++++++---------
 frontend/app/(main)/admin/standards/page.tsx  | 462 +++++++-----------
 .../app/(main)/admin/system-notices/page.tsx  | 292 +++++------
 frontend/components/admin/CompanyTable.tsx    | 281 +++--------
 frontend/components/admin/UserAuthTable.tsx   | 230 ++++-----
 frontend/components/admin/UserTable.tsx       | 427 +++++++---------
 frontend/components/dataflow/DataFlowList.tsx | 313 ++++--------
 8 files changed, 1002 insertions(+), 1666 deletions(-)

diff --git a/frontend/app/(main)/admin/approvalTemplate/page.tsx b/frontend/app/(main)/admin/approvalTemplate/page.tsx
index bf13602b..a69d198e 100644
--- a/frontend/app/(main)/admin/approvalTemplate/page.tsx
+++ b/frontend/app/(main)/admin/approvalTemplate/page.tsx
@@ -6,14 +6,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import {
   Dialog,
   DialogContent,
@@ -62,6 +54,7 @@ import {
   deleteApprovalTemplate,
 } from "@/lib/api/approval";
 import { getUserList } from "@/lib/api/user";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 
 // ============================================================
 // 타입 정의
@@ -295,7 +288,6 @@ function StepEditor({
 
   return (
     <div className="rounded-md border bg-muted/30 p-3 space-y-2">
-      {/* 단계 헤더 */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <GripVertical className="h-4 w-4 text-muted-foreground" />
@@ -314,7 +306,6 @@ function StepEditor({
         </Button>
       </div>
 
-      {/* step_type 선택 */}
       <div>
         <Label className="text-[10px]">결재 유형</Label>
         <Select value={step.step_type} onValueChange={(v) => updateStepType(v as StepType)}>
@@ -331,14 +322,12 @@ function StepEditor({
         </Select>
       </div>
 
-      {/* 통보 타입 안내 */}
       {step.step_type === "notification" && (
         <p className="text-[10px] text-muted-foreground italic">
           (자동 처리됩니다 - 통보 대상자에게 알림만 발송)
         </p>
       )}
 
-      {/* 결재자 목록 */}
       <div className="space-y-2">
         {step.approvers.map((approver, aIdx) => (
           <div key={aIdx} className="rounded border bg-background p-2 space-y-1.5">
@@ -433,7 +422,6 @@ function StepEditor({
         ))}
       </div>
 
-      {/* 합의 타입일 때만 결재자 추가 버튼 */}
       {step.step_type === "consensus" && (
         <Button
           variant="outline"
@@ -466,7 +454,6 @@ export default function ApprovalTemplatePage() {
 
   const [deleteTarget, setDeleteTarget] = useState<ApprovalLineTemplate | null>(null);
 
-  // ---- 데이터 로딩 ----
   const fetchData = useCallback(async () => {
     setLoading(true);
     const [tplRes, defRes] = await Promise.all([
@@ -482,7 +469,6 @@ export default function ApprovalTemplatePage() {
     fetchData();
   }, [fetchData]);
 
-  // ---- 템플릿 등록/수정에서 steps를 StepFormData로 변환 ----
   const stepsToFormData = (steps: ApprovalLineTemplateStep[]): StepFormData[] => {
     const stepMap = new Map<number, StepFormData>();
 
@@ -512,7 +498,6 @@ export default function ApprovalTemplatePage() {
     return Array.from(stepMap.values()).sort((a, b) => a.step_order - b.step_order);
   };
 
-  // ---- StepFormData를 API payload로 변환 ----
   const formDataToSteps = (
     steps: StepFormData[],
   ): Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">[] => {
@@ -533,7 +518,6 @@ export default function ApprovalTemplatePage() {
     return result;
   };
 
-  // ---- 모달 열기 ----
   const openCreate = () => {
     setEditingTpl(null);
     setFormData({
@@ -577,7 +561,6 @@ export default function ApprovalTemplatePage() {
     setEditOpen(true);
   };
 
-  // ---- 단계 관리 ----
   const addStep = () => {
     setFormData((p) => ({
       ...p,
@@ -614,7 +597,6 @@ export default function ApprovalTemplatePage() {
     }));
   };
 
-  // ---- 저장 ----
   const handleSave = async () => {
     if (!formData.template_name.trim()) {
       toast.warning("템플릿명을 입력해주세요.");
@@ -664,7 +646,6 @@ export default function ApprovalTemplatePage() {
     }
   };
 
-  // ---- 삭제 ----
   const handleDelete = async () => {
     if (!deleteTarget) return;
     const res = await deleteApprovalTemplate(deleteTarget.template_id);
@@ -677,14 +658,12 @@ export default function ApprovalTemplatePage() {
     }
   };
 
-  // ---- 필터 ----
   const filtered = templates.filter(
     (t) =>
       t.template_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
       (t.description || "").toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
-  // ---- 단계 요약 뱃지 생성 ----
   const renderStepSummary = (tpl: ApprovalLineTemplate) => {
     if (!tpl.steps || tpl.steps.length === 0) return <span className="text-muted-foreground">-</span>;
 
@@ -715,13 +694,65 @@ export default function ApprovalTemplatePage() {
     );
   };
 
-  // ---- 날짜 포맷 ----
   const formatDate = (dateStr: string) => {
     if (!dateStr) return "-";
     const d = new Date(dateStr);
     return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
   };
 
+  const columns: RDVColumn<ApprovalLineTemplate>[] = [
+    {
+      key: "template_name",
+      label: "템플릿명",
+      render: (_val, tpl) => (
+        <span className="font-medium">{tpl.template_name}</span>
+      ),
+    },
+    {
+      key: "description",
+      label: "설명",
+      hideOnMobile: true,
+      render: (_val, tpl) => (
+        <span className="text-muted-foreground">{tpl.description || "-"}</span>
+      ),
+    },
+    {
+      key: "steps",
+      label: "단계 구성",
+      render: (_val, tpl) => renderStepSummary(tpl),
+    },
+    {
+      key: "definition_name",
+      label: "연결된 유형",
+      width: "120px",
+      hideOnMobile: true,
+      render: (_val, tpl) => (
+        <span>{tpl.definition_name || "-"}</span>
+      ),
+    },
+    {
+      key: "created_at",
+      label: "생성일",
+      width: "100px",
+      hideOnMobile: true,
+      className: "text-center",
+      render: (_val, tpl) => (
+        <span className="text-center">{formatDate(tpl.created_at)}</span>
+      ),
+    },
+  ];
+
+  const cardFields: RDVCardField<ApprovalLineTemplate>[] = [
+    {
+      label: "단계 구성",
+      render: (tpl) => renderStepSummary(tpl),
+    },
+    {
+      label: "생성일",
+      render: (tpl) => formatDate(tpl.created_at),
+    },
+  ];
+
   return (
     <div className="bg-background flex min-h-screen flex-col">
       <div className="space-y-6 p-6">
@@ -755,150 +786,44 @@ export default function ApprovalTemplatePage() {
           </Button>
         </div>
 
-        {/* 템플릿 목록 */}
-        {loading ? (
-          <>
-            {/* 데스크톱 스켈레톤 */}
-            <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
-              <Table>
-                <TableHeader>
-                  <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
-                    <TableHead className="h-12 text-sm font-semibold">템플릿명</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">단계 구성</TableHead>
-                    <TableHead className="h-12 w-[120px] text-sm font-semibold">연결된 유형</TableHead>
-                    <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">생성일</TableHead>
-                    <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">관리</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {Array.from({ length: 5 }).map((_, i) => (
-                    <TableRow key={i} className="border-b">
-                      <TableCell className="h-14"><div className="h-4 w-32 animate-pulse rounded bg-muted" /></TableCell>
-                      <TableCell className="h-14"><div className="h-4 animate-pulse rounded bg-muted" /></TableCell>
-                      <TableCell className="h-14"><div className="h-4 w-40 animate-pulse rounded bg-muted" /></TableCell>
-                      <TableCell className="h-14"><div className="h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
-                      <TableCell className="h-14"><div className="mx-auto h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
-                      <TableCell className="h-14"><div className="mx-auto h-8 w-16 animate-pulse rounded bg-muted" /></TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-            {/* 모바일 스켈레톤 */}
-            <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-              {Array.from({ length: 4 }).map((_, i) => (
-                <div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
-                  <div className="mb-3 flex items-start justify-between">
-                    <div className="h-5 w-36 animate-pulse rounded bg-muted" />
-                    <div className="h-5 w-14 animate-pulse rounded-full bg-muted" />
-                  </div>
-                  <div className="space-y-2 border-t pt-3">
-                    {Array.from({ length: 3 }).map((_, j) => (
-                      <div key={j} className="flex justify-between">
-                        <div className="h-4 w-16 animate-pulse rounded bg-muted" />
-                        <div className="h-4 w-24 animate-pulse rounded bg-muted" />
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </>
-        ) : filtered.length === 0 ? (
-          <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
-            <p className="text-muted-foreground text-sm">등록된 결재 템플릿이 없습니다.</p>
-          </div>
-        ) : (
-          <>
-            {/* 데스크톱 테이블 */}
-            <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
-              <Table>
-                <TableHeader>
-                  <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
-                    <TableHead className="h-12 text-sm font-semibold">템플릿명</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">단계 구성</TableHead>
-                    <TableHead className="h-12 w-[120px] text-sm font-semibold">연결된 유형</TableHead>
-                    <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">생성일</TableHead>
-                    <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">관리</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filtered.map((tpl) => (
-                    <TableRow key={tpl.template_id} className="border-b transition-colors hover:bg-muted/50">
-                      <TableCell className="h-14 text-sm font-medium">{tpl.template_name}</TableCell>
-                      <TableCell className="text-muted-foreground h-14 text-sm">
-                        {tpl.description || "-"}
-                      </TableCell>
-                      <TableCell className="h-14 text-sm">{renderStepSummary(tpl)}</TableCell>
-                      <TableCell className="h-14 text-sm">{tpl.definition_name || "-"}</TableCell>
-                      <TableCell className="h-14 text-center text-sm">
-                        {formatDate(tpl.created_at)}
-                      </TableCell>
-                      <TableCell className="h-14 text-center">
-                        <div className="flex items-center justify-center gap-1">
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-8 w-8"
-                            onClick={() => openEdit(tpl)}
-                          >
-                            <Edit className="h-4 w-4" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-8 w-8 text-destructive"
-                            onClick={() => setDeleteTarget(tpl)}
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-            {/* 모바일 카드 */}
-            <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-              {filtered.map((tpl) => (
-                <div key={tpl.template_id} className="rounded-lg border bg-card p-4 shadow-sm">
-                  <div className="mb-3 flex items-start justify-between">
-                    <h3 className="text-base font-semibold">{tpl.template_name}</h3>
-                    {tpl.definition_name && (
-                      <Badge variant="outline" className="text-xs">{tpl.definition_name}</Badge>
-                    )}
-                  </div>
-                  {tpl.description && (
-                    <p className="text-muted-foreground mb-3 text-sm">{tpl.description}</p>
-                  )}
-                  <div className="space-y-2 border-t pt-3">
-                    <div className="text-sm">
-                      <span className="text-muted-foreground">단계 구성</span>
-                      <div className="mt-1">{renderStepSummary(tpl)}</div>
-                    </div>
-                    <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">생성일</span>
-                      <span>{formatDate(tpl.created_at)}</span>
-                    </div>
-                  </div>
-                  <div className="mt-3 flex gap-2 border-t pt-3">
-                    <Button variant="outline" size="sm" className="h-9 flex-1 gap-1 text-sm" onClick={() => openEdit(tpl)}>
-                      <Edit className="h-4 w-4" />
-                      수정
-                    </Button>
-                    <Button variant="outline" size="sm" className="h-9 flex-1 gap-1 text-sm text-destructive hover:text-destructive" onClick={() => setDeleteTarget(tpl)}>
-                      <Trash2 className="h-4 w-4" />
-                      삭제
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </>
-        )}
+        <ResponsiveDataView<ApprovalLineTemplate>
+          data={filtered}
+          columns={columns}
+          keyExtractor={(tpl) => String(tpl.template_id)}
+          isLoading={loading}
+          emptyMessage="등록된 결재 템플릿이 없습니다."
+          skeletonCount={5}
+          cardTitle={(tpl) => tpl.template_name}
+          cardSubtitle={(tpl) => tpl.description ? (
+            <span className="text-muted-foreground text-sm">{tpl.description}</span>
+          ) : undefined}
+          cardHeaderRight={(tpl) => tpl.definition_name ? (
+            <Badge variant="outline" className="text-xs">{tpl.definition_name}</Badge>
+          ) : undefined}
+          cardFields={cardFields}
+          actionsLabel="관리"
+          actionsWidth="100px"
+          renderActions={(tpl) => (
+            <>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => openEdit(tpl)}
+              >
+                <Edit className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-destructive"
+                onClick={() => setDeleteTarget(tpl)}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+        />
       </div>
 
       {/* 등록/수정 Dialog */}
@@ -913,7 +838,6 @@ export default function ApprovalTemplatePage() {
             </DialogDescription>
           </DialogHeader>
           <div className="max-h-[60vh] space-y-3 overflow-y-auto sm:space-y-4">
-            {/* 템플릿 기본 정보 */}
             <div>
               <Label htmlFor="template_name" className="text-xs sm:text-sm">
                 템플릿 이름 *
@@ -964,7 +888,6 @@ export default function ApprovalTemplatePage() {
               </p>
             </div>
 
-            {/* 결재 단계 편집 영역 */}
             <div className="space-y-3">
               <div className="flex items-center justify-between">
                 <Label className="text-xs font-semibold sm:text-sm">결재 단계</Label>
diff --git a/frontend/app/(main)/admin/batch-management/page.tsx b/frontend/app/(main)/admin/batch-management/page.tsx
index f191acc7..fbf0185b 100644
--- a/frontend/app/(main)/admin/batch-management/page.tsx
+++ b/frontend/app/(main)/admin/batch-management/page.tsx
@@ -13,14 +13,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -44,6 +36,7 @@ import { toast } from "sonner";
 import { BatchAPI, BatchJob } from "@/lib/api/batch";
 import BatchJobModal from "@/components/admin/BatchJobModal";
 import { showErrorToast } from "@/lib/utils/toastUtils";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 
 export default function BatchManagementPage() {
   const router = useRouter();
@@ -55,7 +48,6 @@ export default function BatchManagementPage() {
   const [typeFilter, setTypeFilter] = useState("all");
   const [jobTypes, setJobTypes] = useState<Array<{ value: string; label: string }>>([]);
   
-  // 모달 상태
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedJob, setSelectedJob] = useState<BatchJob | null>(null);
   const [isBatchTypeModalOpen, setIsBatchTypeModalOpen] = useState(false);
@@ -94,7 +86,6 @@ export default function BatchManagementPage() {
   const filterJobs = () => {
     let filtered = jobs;
 
-    // 검색어 필터
     if (searchTerm) {
       filtered = filtered.filter(job =>
         job.job_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -102,12 +93,10 @@ export default function BatchManagementPage() {
       );
     }
 
-    // 상태 필터
     if (statusFilter !== "all") {
       filtered = filtered.filter(job => job.is_active === statusFilter);
     }
 
-    // 타입 필터
     if (typeFilter !== "all") {
       filtered = filtered.filter(job => job.job_type === typeFilter);
     }
@@ -124,12 +113,10 @@ export default function BatchManagementPage() {
     setIsBatchTypeModalOpen(false);
     
     if (type === 'db-to-db') {
-      // 기존 배치 생성 모달 열기
       console.log("DB → DB 배치 모달 열기");
       setSelectedJob(null);
       setIsModalOpen(true);
     } else if (type === 'restapi-to-db') {
-      // 새로운 REST API 배치 페이지로 이동
       console.log("REST API → DB 페이지로 이동:", '/admin/batch-management-new');
       router.push('/admin/batch-management-new');
     }
@@ -189,6 +176,149 @@ export default function BatchManagementPage() {
     return Math.round((job.success_count / job.execution_count) * 100);
   };
 
+  const getSuccessRateColor = (rate: number) => {
+    if (rate >= 90) return 'text-success';
+    if (rate >= 70) return 'text-warning';
+    return 'text-destructive';
+  };
+
+  const columns: RDVColumn<BatchJob>[] = [
+    {
+      key: "job_name",
+      label: "작업명",
+      render: (_val, job) => (
+        <div>
+          <div className="font-medium">{job.job_name}</div>
+          {job.description && (
+            <div className="text-xs text-muted-foreground">{job.description}</div>
+          )}
+        </div>
+      ),
+    },
+    {
+      key: "job_type",
+      label: "타입",
+      hideOnMobile: true,
+      render: (_val, job) => getTypeBadge(job.job_type),
+    },
+    {
+      key: "schedule_cron",
+      label: "스케줄",
+      hideOnMobile: true,
+      render: (_val, job) => (
+        <span className="font-mono">{job.schedule_cron || "-"}</span>
+      ),
+    },
+    {
+      key: "is_active",
+      label: "상태",
+      width: "100px",
+      render: (_val, job) => getStatusBadge(job.is_active),
+    },
+    {
+      key: "execution_count",
+      label: "실행",
+      hideOnMobile: true,
+      render: (_val, job) => (
+        <div>
+          <div>총 {job.execution_count}회</div>
+          <div className="text-xs text-muted-foreground">
+            성공 {job.success_count} / 실패 {job.failure_count}
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: "success_rate",
+      label: "성공률",
+      hideOnMobile: true,
+      render: (_val, job) => {
+        const rate = getSuccessRate(job);
+        return (
+          <span className={`font-medium ${getSuccessRateColor(rate)}`}>
+            {rate}%
+          </span>
+        );
+      },
+    },
+    {
+      key: "last_executed_at",
+      label: "마지막 실행",
+      render: (_val, job) => (
+        <span>
+          {job.last_executed_at
+            ? new Date(job.last_executed_at).toLocaleString()
+            : "-"}
+        </span>
+      ),
+    },
+  ];
+
+  const cardFields: RDVCardField<BatchJob>[] = [
+    {
+      label: "타입",
+      render: (job) => getTypeBadge(job.job_type),
+    },
+    {
+      label: "스케줄",
+      render: (job) => (
+        <span className="font-mono text-xs">{job.schedule_cron || "-"}</span>
+      ),
+    },
+    {
+      label: "실행 횟수",
+      render: (job) => <span className="font-medium">{job.execution_count}회</span>,
+    },
+    {
+      label: "성공률",
+      render: (job) => {
+        const rate = getSuccessRate(job);
+        return (
+          <span className={`font-medium ${getSuccessRateColor(rate)}`}>
+            {rate}%
+          </span>
+        );
+      },
+    },
+    {
+      label: "마지막 실행",
+      render: (job) => (
+        <span className="text-xs">
+          {job.last_executed_at
+            ? new Date(job.last_executed_at).toLocaleDateString()
+            : "-"}
+        </span>
+      ),
+    },
+  ];
+
+  const renderDropdownActions = (job: BatchJob) => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => handleEdit(job)}>
+          <Edit className="h-4 w-4 mr-2" />
+          수정
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => handleExecute(job)}
+          disabled={job.is_active !== "Y"}
+        >
+          <Play className="h-4 w-4 mr-2" />
+          실행
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => handleDelete(job)}>
+          <Trash2 className="h-4 w-4 mr-2" />
+          삭제
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
   return (
     <div className="space-y-6">
       {/* 헤더 */}
@@ -312,231 +442,23 @@ export default function BatchManagementPage() {
         총 <span className="font-semibold text-foreground">{filteredJobs.length}</span>개
       </div>
 
-      {isLoading ? (
-        <>
-          {/* 데스크톱 스켈레톤 */}
-          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
-            <Table>
-              <TableHeader>
-                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
-                  <TableHead className="h-12 text-sm font-semibold">작업명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">타입</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">스케줄</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">상태</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">실행 통계</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">성공률</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">마지막 실행</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {Array.from({ length: 5 }).map((_, i) => (
-                  <TableRow key={i} className="border-b">
-                    <TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-32"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-16"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-24"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-12"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-20"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-10"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-28"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-8"></div></TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-          {/* 모바일 스켈레톤 */}
-          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-            {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
-                <div className="mb-4 flex items-start justify-between">
-                  <div className="flex-1 space-y-2">
-                    <div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
-                    <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                  </div>
-                  <div className="h-6 w-12 animate-pulse rounded bg-muted"></div>
-                </div>
-                <div className="space-y-2 border-t pt-4">
-                  {Array.from({ length: 3 }).map((_, j) => (
-                    <div key={j} className="flex justify-between">
-                      <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
-                      <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
-      ) : filteredJobs.length === 0 ? (
-        <div className="flex h-32 items-center justify-center rounded-lg border bg-card text-sm text-muted-foreground">
-          {jobs.length === 0 ? "배치 작업이 없습니다." : "검색 결과가 없습니다."}
-        </div>
-      ) : (
-        <>
-          {/* 데스크톱 테이블 */}
-          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
-            <Table>
-              <TableHeader>
-                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
-                  <TableHead className="h-12 text-sm font-semibold">작업명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">타입</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">스케줄</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">상태</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">실행 통계</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">성공률</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">마지막 실행</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredJobs.map((job) => (
-                  <TableRow key={job.id} className="border-b transition-colors hover:bg-muted/50">
-                    <TableCell className="h-16 text-sm">
-                      <div>
-                        <div className="font-medium">{job.job_name}</div>
-                        {job.description && (
-                          <div className="text-xs text-muted-foreground">{job.description}</div>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">{getTypeBadge(job.job_type)}</TableCell>
-                    <TableCell className="h-16 font-mono text-sm">{job.schedule_cron || "-"}</TableCell>
-                    <TableCell className="h-16 text-sm">{getStatusBadge(job.is_active)}</TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <div>
-                        <div>총 {job.execution_count}회</div>
-                        <div className="text-xs text-muted-foreground">
-                          성공 {job.success_count} / 실패 {job.failure_count}
-                        </div>
-                      </div>
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <span className={`font-medium ${
-                        getSuccessRate(job) >= 90 ? 'text-success' :
-                        getSuccessRate(job) >= 70 ? 'text-warning' : 'text-destructive'
-                      }`}>
-                        {getSuccessRate(job)}%
-                      </span>
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      {job.last_executed_at
-                        ? new Date(job.last_executed_at).toLocaleString()
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" className="h-8 w-8 p-0">
-                            <MoreHorizontal className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleEdit(job)}>
-                            <Edit className="h-4 w-4 mr-2" />
-                            수정
-                          </DropdownMenuItem>
-                          <DropdownMenuItem
-                            onClick={() => handleExecute(job)}
-                            disabled={job.is_active !== "Y"}
-                          >
-                            <Play className="h-4 w-4 mr-2" />
-                            실행
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => handleDelete(job)}>
-                            <Trash2 className="h-4 w-4 mr-2" />
-                            삭제
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-
-          {/* 모바일 카드 */}
-          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-            {filteredJobs.map((job) => (
-              <div
-                key={job.id}
-                className="rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
-              >
-                <div className="mb-3 flex items-start justify-between">
-                  <div className="flex-1 min-w-0">
-                    <h3 className="truncate text-base font-semibold">{job.job_name}</h3>
-                    {job.description && (
-                      <p className="mt-0.5 truncate text-sm text-muted-foreground">{job.description}</p>
-                    )}
-                  </div>
-                  <div className="ml-2 shrink-0">{getStatusBadge(job.is_active)}</div>
-                </div>
-                <div className="space-y-1.5 border-t pt-3">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">타입</span>
-                    <span>{getTypeBadge(job.job_type)}</span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">스케줄</span>
-                    <span className="font-mono text-xs">{job.schedule_cron || "-"}</span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">실행 횟수</span>
-                    <span className="font-medium">{job.execution_count}회</span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">성공률</span>
-                    <span className={`font-medium ${
-                      getSuccessRate(job) >= 90 ? 'text-success' :
-                      getSuccessRate(job) >= 70 ? 'text-warning' : 'text-destructive'
-                    }`}>
-                      {getSuccessRate(job)}%
-                    </span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">마지막 실행</span>
-                    <span className="text-xs">
-                      {job.last_executed_at
-                        ? new Date(job.last_executed_at).toLocaleDateString()
-                        : "-"}
-                    </span>
-                  </div>
-                </div>
-                <div className="mt-3 flex gap-2 border-t pt-3">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-9 flex-1 gap-2 text-sm"
-                    onClick={() => handleEdit(job)}
-                  >
-                    <Edit className="h-4 w-4" />
-                    수정
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-9 flex-1 gap-2 text-sm"
-                    onClick={() => handleExecute(job)}
-                    disabled={job.is_active !== "Y"}
-                  >
-                    <Play className="h-4 w-4" />
-                    실행
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-9 w-9 p-0 text-destructive hover:text-destructive"
-                    onClick={() => handleDelete(job)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
-      )}
+      <ResponsiveDataView<BatchJob>
+        data={filteredJobs}
+        columns={columns}
+        keyExtractor={(job) => String(job.id)}
+        isLoading={isLoading}
+        emptyMessage={jobs.length === 0 ? "배치 작업이 없습니다." : "검색 결과가 없습니다."}
+        skeletonCount={5}
+        cardTitle={(job) => job.job_name}
+        cardSubtitle={(job) => job.description ? (
+          <span className="truncate text-sm text-muted-foreground">{job.description}</span>
+        ) : undefined}
+        cardHeaderRight={(job) => getStatusBadge(job.is_active)}
+        cardFields={cardFields}
+        actionsLabel="작업"
+        actionsWidth="80px"
+        renderActions={renderDropdownActions}
+      />
 
       {/* 배치 타입 선택 모달 */}
       {isBatchTypeModalOpen && (
@@ -547,7 +469,6 @@ export default function BatchManagementPage() {
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                {/* DB → DB */}
                 <div
                   className="cursor-pointer rounded-lg border p-6 transition-all hover:border-primary hover:bg-muted/50"
                   onClick={() => handleBatchTypeSelect('db-to-db')}
@@ -563,7 +484,6 @@ export default function BatchManagementPage() {
                   </div>
                 </div>
 
-                {/* REST API → DB */}
                 <div
                   className="cursor-pointer rounded-lg border p-6 transition-all hover:border-primary hover:bg-muted/50"
                   onClick={() => handleBatchTypeSelect('restapi-to-db')}
diff --git a/frontend/app/(main)/admin/standards/page.tsx b/frontend/app/(main)/admin/standards/page.tsx
index 67a43bab..8a91f3f3 100644
--- a/frontend/app/(main)/admin/standards/page.tsx
+++ b/frontend/app/(main)/admin/standards/page.tsx
@@ -4,7 +4,6 @@ import React, { useState, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import {
   AlertDialog,
@@ -22,6 +21,8 @@ import { showErrorToast } from "@/lib/utils/toastUtils";
 import { Plus, Search, Edit, Trash2, Eye, RotateCcw, SortAsc, SortDesc } from "lucide-react";
 import { useWebTypes } from "@/hooks/admin/useWebTypes";
 import Link from "next/link";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
+import type { WebTypeStandard } from "@/hooks/admin/useWebTypes";
 
 export default function WebTypesManagePage() {
   const [searchTerm, setSearchTerm] = useState("");
@@ -30,35 +31,29 @@ export default function WebTypesManagePage() {
   const [sortField, setSortField] = useState<string>("sort_order");
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
 
-  // 웹타입 데이터 조회
   const { webTypes, isLoading, error, deleteWebType, isDeleting, deleteError, refetch } = useWebTypes({
     active: activeFilter === "all" ? undefined : activeFilter,
     search: searchTerm || undefined,
     category: categoryFilter === "all" ? undefined : categoryFilter,
   });
 
-  // 카테고리 목록 생성
   const categories = useMemo(() => {
     const uniqueCategories = Array.from(new Set(webTypes.map((wt) => wt.category).filter(Boolean)));
     return uniqueCategories.sort();
   }, [webTypes]);
 
-  // 필터링 및 정렬된 데이터
   const filteredAndSortedWebTypes = useMemo(() => {
     let filtered = [...webTypes];
 
-    // 정렬
     filtered.sort((a, b) => {
       let aValue: any = a[sortField as keyof typeof a];
       let bValue: any = b[sortField as keyof typeof b];
 
-      // 숫자 필드 처리
       if (sortField === "sort_order") {
         aValue = aValue || 0;
         bValue = bValue || 0;
       }
 
-      // 문자열 필드 처리
       if (typeof aValue === "string") {
         aValue = aValue.toLowerCase();
       }
@@ -74,17 +69,6 @@ export default function WebTypesManagePage() {
     return filtered;
   }, [webTypes, sortField, sortDirection]);
 
-  // 정렬 변경 핸들러
-  const handleSort = (field: string) => {
-    if (sortField === field) {
-      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
-    } else {
-      setSortField(field);
-      setSortDirection("asc");
-    }
-  };
-
-  // 삭제 핸들러
   const handleDelete = async (webType: string, typeName: string) => {
     try {
       await deleteWebType(webType);
@@ -94,7 +78,6 @@ export default function WebTypesManagePage() {
     }
   };
 
-  // 필터 초기화
   const resetFilters = () => {
     setSearchTerm("");
     setCategoryFilter("all");
@@ -103,6 +86,116 @@ export default function WebTypesManagePage() {
     setSortDirection("asc");
   };
 
+  // 삭제 AlertDialog 렌더 헬퍼
+  const renderDeleteDialog = (wt: WebTypeStandard) => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <Trash2 className="h-4 w-4 text-destructive" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
+          <AlertDialogDescription>
+            &apos;{wt.type_name}&apos; 웹타입을 삭제하시겠습니까?
+            <br />이 작업은 되돌릴 수 없습니다.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>취소</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={() => handleDelete(wt.web_type, wt.type_name)}
+            disabled={isDeleting}
+            className="bg-destructive hover:bg-destructive/90"
+          >
+            {isDeleting ? "삭제 중..." : "삭제"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+
+  const columns: RDVColumn<WebTypeStandard>[] = [
+    {
+      key: "sort_order",
+      label: "순서",
+      width: "80px",
+      render: (_val, wt) => <span className="font-mono">{wt.sort_order || 0}</span>,
+    },
+    {
+      key: "web_type",
+      label: "웹타입 코드",
+      hideOnMobile: true,
+      render: (_val, wt) => <span className="font-mono">{wt.web_type}</span>,
+    },
+    {
+      key: "type_name",
+      label: "웹타입명",
+      render: (_val, wt) => (
+        <div>
+          <div className="font-medium">{wt.type_name}</div>
+          {wt.type_name_eng && (
+            <div className="text-xs text-muted-foreground">{wt.type_name_eng}</div>
+          )}
+        </div>
+      ),
+    },
+    {
+      key: "category",
+      label: "카테고리",
+      render: (_val, wt) => <Badge variant="secondary">{wt.category}</Badge>,
+    },
+    {
+      key: "description",
+      label: "설명",
+      hideOnMobile: true,
+      render: (_val, wt) => (
+        <span className="max-w-xs truncate">{wt.description || "-"}</span>
+      ),
+    },
+    {
+      key: "is_active",
+      label: "상태",
+      render: (_val, wt) => (
+        <Badge variant={wt.is_active === "Y" ? "default" : "secondary"}>
+          {wt.is_active === "Y" ? "활성화" : "비활성화"}
+        </Badge>
+      ),
+    },
+    {
+      key: "updated_date",
+      label: "최종 수정일",
+      hideOnMobile: true,
+      render: (_val, wt) => (
+        <span className="text-muted-foreground">
+          {wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-"}
+        </span>
+      ),
+    },
+  ];
+
+  const cardFields: RDVCardField<WebTypeStandard>[] = [
+    {
+      label: "카테고리",
+      render: (wt) => <Badge variant="secondary">{wt.category}</Badge>,
+    },
+    {
+      label: "순서",
+      render: (wt) => String(wt.sort_order || 0),
+    },
+    {
+      label: "설명",
+      render: (wt) => wt.description || "-",
+      hideEmpty: true,
+    },
+    {
+      label: "수정일",
+      render: (wt) =>
+        wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-",
+    },
+  ];
+
   return (
     <div className="space-y-6">
       {/* 페이지 헤더 */}
@@ -165,6 +258,32 @@ export default function WebTypesManagePage() {
               <SelectItem value="N">비활성화</SelectItem>
             </SelectContent>
           </Select>
+
+          {/* 정렬 선택 */}
+          <div className="flex items-center gap-2">
+            <Select value={sortField} onValueChange={(v) => { setSortField(v); }}>
+              <SelectTrigger className="h-10 w-full sm:w-[140px]">
+                <SelectValue placeholder="정렬 기준" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="sort_order">순서</SelectItem>
+                <SelectItem value="web_type">웹타입 코드</SelectItem>
+                <SelectItem value="type_name">웹타입명</SelectItem>
+                <SelectItem value="category">카테고리</SelectItem>
+                <SelectItem value="is_active">상태</SelectItem>
+                <SelectItem value="updated_date">수정일</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setSortDirection(sortDirection === "asc" ? "desc" : "asc")}
+              className="h-10 w-10 shrink-0"
+              title={sortDirection === "asc" ? "오름차순" : "내림차순"}
+            >
+              {sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />}
+            </Button>
+          </div>
         </div>
 
         <Button variant="outline" onClick={resetFilters} className="h-10 w-full sm:w-auto">
@@ -187,271 +306,46 @@ export default function WebTypesManagePage() {
         </div>
       )}
 
-      {isLoading ? (
-        <>
-          {/* 데스크톱 스켈레톤 */}
-          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
-            <Table>
-              <TableHeader>
-                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
-                  <TableHead className="h-12 text-sm font-semibold">순서</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">웹타입 코드</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">웹타입명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">카테고리</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">상태</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">최종 수정일</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold text-center">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {Array.from({ length: 6 }).map((_, i) => (
-                  <TableRow key={i} className="border-b">
-                    <TableCell className="h-16"><div className="h-4 w-8 animate-pulse rounded bg-muted"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 w-20 animate-pulse rounded bg-muted"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 w-24 animate-pulse rounded bg-muted"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 w-16 animate-pulse rounded bg-muted"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 w-32 animate-pulse rounded bg-muted"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 w-12 animate-pulse rounded bg-muted"></div></TableCell>
-                    <TableCell className="h-16"><div className="h-4 w-20 animate-pulse rounded bg-muted"></div></TableCell>
-                    <TableCell className="h-16"><div className="mx-auto h-4 w-16 animate-pulse rounded bg-muted"></div></TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-          {/* 모바일 스켈레톤 */}
-          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-            {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
-                <div className="mb-4 space-y-2">
-                  <div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
-                  <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                </div>
-                <div className="space-y-2 border-t pt-4">
-                  {Array.from({ length: 4 }).map((_, j) => (
-                    <div key={j} className="flex justify-between">
-                      <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
-                      <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
-      ) : filteredAndSortedWebTypes.length === 0 ? (
-        <div className="flex h-32 items-center justify-center rounded-lg border bg-card text-sm text-muted-foreground">
-          조건에 맞는 웹타입이 없습니다.
-        </div>
-      ) : (
-        <>
-          {/* 데스크톱 테이블 */}
-          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
-            <Table>
-              <TableHeader>
-                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
-                  <TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("sort_order")}>
-                    <div className="flex items-center gap-2">
-                      순서
-                      {sortField === "sort_order" &&
-                        (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                    </div>
-                  </TableHead>
-                  <TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("web_type")}>
-                    <div className="flex items-center gap-2">
-                      웹타입 코드
-                      {sortField === "web_type" &&
-                        (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                    </div>
-                  </TableHead>
-                  <TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("type_name")}>
-                    <div className="flex items-center gap-2">
-                      웹타입명
-                      {sortField === "type_name" &&
-                        (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                    </div>
-                  </TableHead>
-                  <TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("category")}>
-                    <div className="flex items-center gap-2">
-                      카테고리
-                      {sortField === "category" &&
-                        (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                    </div>
-                  </TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
-                  <TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("is_active")}>
-                    <div className="flex items-center gap-2">
-                      상태
-                      {sortField === "is_active" &&
-                        (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                    </div>
-                  </TableHead>
-                  <TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("updated_date")}>
-                    <div className="flex items-center gap-2">
-                      최종 수정일
-                      {sortField === "updated_date" &&
-                        (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                    </div>
-                  </TableHead>
-                  <TableHead className="h-12 text-center text-sm font-semibold">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredAndSortedWebTypes.map((webType) => (
-                  <TableRow key={webType.web_type} className="border-b transition-colors hover:bg-muted/50">
-                    <TableCell className="h-16 font-mono text-sm">{webType.sort_order || 0}</TableCell>
-                    <TableCell className="h-16 font-mono text-sm">{webType.web_type}</TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <div className="font-medium">{webType.type_name}</div>
-                      {webType.type_name_eng && (
-                        <div className="text-xs text-muted-foreground">{webType.type_name_eng}</div>
-                      )}
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <Badge variant="secondary">{webType.category}</Badge>
-                    </TableCell>
-                    <TableCell className="h-16 max-w-xs truncate text-sm">{webType.description || "-"}</TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <Badge variant={webType.is_active === "Y" ? "default" : "secondary"}>
-                        {webType.is_active === "Y" ? "활성화" : "비활성화"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="h-16 text-sm text-muted-foreground">
-                      {webType.updated_date ? new Date(webType.updated_date).toLocaleDateString("ko-KR") : "-"}
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <div className="flex items-center justify-center gap-1">
-                        <Link href={`/admin/standards/${webType.web_type}`}>
-                          <Button variant="ghost" size="sm">
-                            <Eye className="h-4 w-4" />
-                          </Button>
-                        </Link>
-                        <Link href={`/admin/standards/${webType.web_type}/edit`}>
-                          <Button variant="ghost" size="sm">
-                            <Edit className="h-4 w-4" />
-                          </Button>
-                        </Link>
-                        <AlertDialog>
-                          <AlertDialogTrigger asChild>
-                            <Button variant="ghost" size="sm">
-                              <Trash2 className="h-4 w-4 text-destructive" />
-                            </Button>
-                          </AlertDialogTrigger>
-                          <AlertDialogContent>
-                            <AlertDialogHeader>
-                              <AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
-                              <AlertDialogDescription>
-                                '{webType.type_name}' 웹타입을 삭제하시겠습니까?
-                                <br />이 작업은 되돌릴 수 없습니다.
-                              </AlertDialogDescription>
-                            </AlertDialogHeader>
-                            <AlertDialogFooter>
-                              <AlertDialogCancel>취소</AlertDialogCancel>
-                              <AlertDialogAction
-                                onClick={() => handleDelete(webType.web_type, webType.type_name)}
-                                disabled={isDeleting}
-                                className="bg-destructive hover:bg-destructive/90"
-                              >
-                                {isDeleting ? "삭제 중..." : "삭제"}
-                              </AlertDialogAction>
-                            </AlertDialogFooter>
-                          </AlertDialogContent>
-                        </AlertDialog>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-
-          {/* 모바일 카드 */}
-          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-            {filteredAndSortedWebTypes.map((webType) => (
-              <div
-                key={webType.web_type}
-                className="rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
-              >
-                <div className="mb-3 flex items-start justify-between">
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-base font-semibold">{webType.type_name}</h3>
-                    {webType.type_name_eng && (
-                      <p className="text-xs text-muted-foreground">{webType.type_name_eng}</p>
-                    )}
-                    <p className="mt-0.5 font-mono text-xs text-muted-foreground">{webType.web_type}</p>
-                  </div>
-                  <Badge variant={webType.is_active === "Y" ? "default" : "secondary"} className="ml-2 shrink-0">
-                    {webType.is_active === "Y" ? "활성화" : "비활성화"}
-                  </Badge>
-                </div>
-                <div className="space-y-1.5 border-t pt-3">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">카테고리</span>
-                    <Badge variant="secondary">{webType.category}</Badge>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">순서</span>
-                    <span className="font-medium">{webType.sort_order || 0}</span>
-                  </div>
-                  {webType.description && (
-                    <div className="flex justify-between gap-2 text-sm">
-                      <span className="shrink-0 text-muted-foreground">설명</span>
-                      <span className="truncate text-right">{webType.description}</span>
-                    </div>
-                  )}
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">수정일</span>
-                    <span className="text-xs">
-                      {webType.updated_date ? new Date(webType.updated_date).toLocaleDateString("ko-KR") : "-"}
-                    </span>
-                  </div>
-                </div>
-                <div className="mt-3 flex gap-2 border-t pt-3">
-                  <Link href={`/admin/standards/${webType.web_type}`} className="flex-1">
-                    <Button variant="outline" size="sm" className="h-9 w-full gap-2 text-sm">
-                      <Eye className="h-4 w-4" />
-                      보기
-                    </Button>
-                  </Link>
-                  <Link href={`/admin/standards/${webType.web_type}/edit`} className="flex-1">
-                    <Button variant="outline" size="sm" className="h-9 w-full gap-2 text-sm">
-                      <Edit className="h-4 w-4" />
-                      수정
-                    </Button>
-                  </Link>
-                  <AlertDialog>
-                    <AlertDialogTrigger asChild>
-                      <Button variant="outline" size="sm" className="h-9 w-9 p-0 text-destructive hover:text-destructive">
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    </AlertDialogTrigger>
-                    <AlertDialogContent>
-                      <AlertDialogHeader>
-                        <AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
-                        <AlertDialogDescription>
-                          '{webType.type_name}' 웹타입을 삭제하시겠습니까?
-                          <br />이 작업은 되돌릴 수 없습니다.
-                        </AlertDialogDescription>
-                      </AlertDialogHeader>
-                      <AlertDialogFooter>
-                        <AlertDialogCancel>취소</AlertDialogCancel>
-                        <AlertDialogAction
-                          onClick={() => handleDelete(webType.web_type, webType.type_name)}
-                          disabled={isDeleting}
-                          className="bg-destructive hover:bg-destructive/90"
-                        >
-                          {isDeleting ? "삭제 중..." : "삭제"}
-                        </AlertDialogAction>
-                      </AlertDialogFooter>
-                    </AlertDialogContent>
-                  </AlertDialog>
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
-      )}
+      <ResponsiveDataView<WebTypeStandard>
+        data={filteredAndSortedWebTypes}
+        columns={columns}
+        keyExtractor={(wt) => wt.web_type}
+        isLoading={isLoading}
+        emptyMessage="조건에 맞는 웹타입이 없습니다."
+        skeletonCount={6}
+        cardTitle={(wt) => wt.type_name}
+        cardSubtitle={(wt) => (
+          <>
+            {wt.type_name_eng && (
+              <span className="text-xs text-muted-foreground">{wt.type_name_eng} / </span>
+            )}
+            <span className="font-mono text-xs text-muted-foreground">{wt.web_type}</span>
+          </>
+        )}
+        cardHeaderRight={(wt) => (
+          <Badge variant={wt.is_active === "Y" ? "default" : "secondary"} className="shrink-0">
+            {wt.is_active === "Y" ? "활성화" : "비활성화"}
+          </Badge>
+        )}
+        cardFields={cardFields}
+        actionsLabel="작업"
+        actionsWidth="140px"
+        renderActions={(wt) => (
+          <>
+            <Link href={`/admin/standards/${wt.web_type}`}>
+              <Button variant="ghost" size="sm">
+                <Eye className="h-4 w-4" />
+              </Button>
+            </Link>
+            <Link href={`/admin/standards/${wt.web_type}/edit`}>
+              <Button variant="ghost" size="sm">
+                <Edit className="h-4 w-4" />
+              </Button>
+            </Link>
+            {renderDeleteDialog(wt)}
+          </>
+        )}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/system-notices/page.tsx b/frontend/app/(main)/admin/system-notices/page.tsx
index c3815de7..56fd99aa 100644
--- a/frontend/app/(main)/admin/system-notices/page.tsx
+++ b/frontend/app/(main)/admin/system-notices/page.tsx
@@ -22,14 +22,6 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { Plus, Pencil, Trash2, Search, RefreshCw } from "lucide-react";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 import {
@@ -40,15 +32,14 @@ import {
   updateSystemNotice,
   deleteSystemNotice,
 } from "@/lib/api/systemNotice";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 
-// 우선순위 레이블 반환
 function getPriorityLabel(priority: number): { label: string; variant: "default" | "secondary" | "destructive" | "outline" } {
   if (priority >= 3) return { label: "높음", variant: "destructive" };
   if (priority === 2) return { label: "보통", variant: "default" };
   return { label: "낮음", variant: "secondary" };
 }
 
-// 날짜 포맷
 function formatDate(dateStr: string): string {
   if (!dateStr) return "-";
   return new Date(dateStr).toLocaleDateString("ko-KR", {
@@ -58,7 +49,6 @@ function formatDate(dateStr: string): string {
   });
 }
 
-// 폼 초기값
 const EMPTY_FORM: CreateSystemNoticePayload = {
   title: "",
   content: "",
@@ -72,21 +62,17 @@ export default function SystemNoticesPage() {
   const [isLoading, setIsLoading] = useState(true);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
 
-  // 검색 필터
   const [searchText, setSearchText] = useState("");
   const [statusFilter, setStatusFilter] = useState<string>("all");
 
-  // 등록/수정 모달
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [editTarget, setEditTarget] = useState<SystemNotice | null>(null);
   const [formData, setFormData] = useState<CreateSystemNoticePayload>(EMPTY_FORM);
   const [isSaving, setIsSaving] = useState(false);
 
-  // 삭제 확인 모달
   const [deleteTarget, setDeleteTarget] = useState<SystemNotice | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
 
-  // 공지사항 목록 로드
   const loadNotices = useCallback(async () => {
     setIsLoading(true);
     setErrorMsg(null);
@@ -103,7 +89,6 @@ export default function SystemNoticesPage() {
     loadNotices();
   }, [loadNotices]);
 
-  // 검색/필터 적용
   useEffect(() => {
     let result = [...notices];
 
@@ -124,14 +109,12 @@ export default function SystemNoticesPage() {
     setFilteredNotices(result);
   }, [notices, searchText, statusFilter]);
 
-  // 등록 모달 열기
   const handleOpenCreate = () => {
     setEditTarget(null);
     setFormData(EMPTY_FORM);
     setIsFormOpen(true);
   };
 
-  // 수정 모달 열기
   const handleOpenEdit = (notice: SystemNotice) => {
     setEditTarget(notice);
     setFormData({
@@ -143,7 +126,6 @@ export default function SystemNoticesPage() {
     setIsFormOpen(true);
   };
 
-  // 저장 처리
   const handleSave = async () => {
     if (!formData.title.trim()) {
       alert("제목을 입력해주세요.");
@@ -172,7 +154,6 @@ export default function SystemNoticesPage() {
     setIsSaving(false);
   };
 
-  // 삭제 처리
   const handleDelete = async () => {
     if (!deleteTarget) return;
     setIsDeleting(true);
@@ -186,6 +167,64 @@ export default function SystemNoticesPage() {
     setIsDeleting(false);
   };
 
+  const columns: RDVColumn<SystemNotice>[] = [
+    {
+      key: "title",
+      label: "제목",
+      render: (_val, notice) => (
+        <span className="font-medium">{notice.title}</span>
+      ),
+    },
+    {
+      key: "is_active",
+      label: "상태",
+      width: "100px",
+      render: (_val, notice) => (
+        <Badge variant={notice.is_active ? "default" : "secondary"}>
+          {notice.is_active ? "활성" : "비활성"}
+        </Badge>
+      ),
+    },
+    {
+      key: "priority",
+      label: "우선순위",
+      width: "100px",
+      render: (_val, notice) => {
+        const p = getPriorityLabel(notice.priority);
+        return <Badge variant={p.variant}>{p.label}</Badge>;
+      },
+    },
+    {
+      key: "created_by",
+      label: "작성자",
+      width: "120px",
+      hideOnMobile: true,
+      render: (_val, notice) => (
+        <span className="text-muted-foreground">{notice.created_by || "-"}</span>
+      ),
+    },
+    {
+      key: "created_at",
+      label: "작성일",
+      width: "120px",
+      hideOnMobile: true,
+      render: (_val, notice) => (
+        <span className="text-muted-foreground">{formatDate(notice.created_at)}</span>
+      ),
+    },
+  ];
+
+  const cardFields: RDVCardField<SystemNotice>[] = [
+    {
+      label: "작성자",
+      render: (notice) => notice.created_by || "-",
+    },
+    {
+      label: "작성일",
+      render: (notice) => formatDate(notice.created_at),
+    },
+  ];
+
   return (
     <div className="flex min-h-screen flex-col bg-background">
       <div className="space-y-6 p-6">
@@ -217,7 +256,6 @@ export default function SystemNoticesPage() {
         {/* 검색 툴바 */}
         <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
           <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-            {/* 상태 필터 */}
             <div className="w-full sm:w-[160px]">
               <Select value={statusFilter} onValueChange={setStatusFilter}>
                 <SelectTrigger className="h-10">
@@ -231,7 +269,6 @@ export default function SystemNoticesPage() {
               </Select>
             </div>
 
-            {/* 제목 검색 */}
             <div className="relative w-full sm:w-[300px]">
               <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
               <Input
@@ -263,150 +300,73 @@ export default function SystemNoticesPage() {
           </div>
         </div>
 
-        {/* 데스크톱 테이블 */}
-        <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
-          <Table>
-            <TableHeader>
-              <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
-                <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
-                <TableHead className="h-12 w-[100px] text-sm font-semibold">상태</TableHead>
-                <TableHead className="h-12 w-[100px] text-sm font-semibold">우선순위</TableHead>
-                <TableHead className="h-12 w-[120px] text-sm font-semibold">작성자</TableHead>
-                <TableHead className="h-12 w-[120px] text-sm font-semibold">작성일</TableHead>
-                <TableHead className="h-12 w-[120px] text-sm font-semibold">관리</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {isLoading ? (
-                Array.from({ length: 5 }).map((_, i) => (
-                  <TableRow key={i} className="border-b">
-                    {Array.from({ length: 6 }).map((_, j) => (
-                      <TableCell key={j} className="h-16">
-                        <div className="h-4 animate-pulse rounded bg-muted" />
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : filteredNotices.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={6} className="h-32 text-center text-sm text-muted-foreground">
-                    공지사항이 없습니다.
-                  </TableCell>
-                </TableRow>
-              ) : (
-                filteredNotices.map((notice) => {
-                  const priority = getPriorityLabel(notice.priority);
-                  return (
-                    <TableRow key={notice.id} className="border-b transition-colors hover:bg-muted/50">
-                      <TableCell className="h-16 text-sm font-medium">{notice.title}</TableCell>
-                      <TableCell className="h-16">
-                        <Badge variant={notice.is_active ? "default" : "secondary"}>
-                          {notice.is_active ? "활성" : "비활성"}
-                        </Badge>
-                      </TableCell>
-                      <TableCell className="h-16">
-                        <Badge variant={priority.variant}>{priority.label}</Badge>
-                      </TableCell>
-                      <TableCell className="h-16 text-sm text-muted-foreground">
-                        {notice.created_by || "-"}
-                      </TableCell>
-                      <TableCell className="h-16 text-sm text-muted-foreground">
-                        {formatDate(notice.created_at)}
-                      </TableCell>
-                      <TableCell className="h-16">
-                        <div className="flex items-center gap-2">
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-8 w-8"
-                            onClick={() => handleOpenEdit(notice)}
-                            aria-label="수정"
-                          >
-                            <Pencil className="h-4 w-4" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-8 w-8 text-destructive hover:text-destructive"
-                            onClick={() => setDeleteTarget(notice)}
-                            aria-label="삭제"
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })
-              )}
-            </TableBody>
-          </Table>
-        </div>
-
-        {/* 모바일 카드 뷰 */}
-        <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-          {isLoading ? (
-            Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
-                <div className="space-y-2">
-                  <div className="h-5 w-3/4 animate-pulse rounded bg-muted" />
-                  <div className="h-4 w-1/2 animate-pulse rounded bg-muted" />
-                </div>
-              </div>
-            ))
-          ) : filteredNotices.length === 0 ? (
-            <div className="col-span-2 flex h-32 items-center justify-center rounded-lg border bg-card text-sm text-muted-foreground">
-              공지사항이 없습니다.
+        <ResponsiveDataView<SystemNotice>
+          data={filteredNotices}
+          columns={columns}
+          keyExtractor={(n) => String(n.id)}
+          isLoading={isLoading}
+          emptyMessage="공지사항이 없습니다."
+          skeletonCount={5}
+          cardTitle={(n) => n.title}
+          cardHeaderRight={(n) => (
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => handleOpenEdit(n)}
+                aria-label="수정"
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-destructive hover:text-destructive"
+                onClick={() => setDeleteTarget(n)}
+                aria-label="삭제"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
             </div>
-          ) : (
-            filteredNotices.map((notice) => {
-              const priority = getPriorityLabel(notice.priority);
-              return (
-                <div key={notice.id} className="rounded-lg border bg-card p-4 shadow-sm">
-                  <div className="mb-3 flex items-start justify-between">
-                    <h3 className="flex-1 text-base font-semibold">{notice.title}</h3>
-                    <div className="flex items-center gap-1">
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-8 w-8"
-                        onClick={() => handleOpenEdit(notice)}
-                        aria-label="수정"
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-8 w-8 text-destructive hover:text-destructive"
-                        onClick={() => setDeleteTarget(notice)}
-                        aria-label="삭제"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  </div>
-                  <div className="flex flex-wrap gap-2 border-t pt-3">
-                    <Badge variant={notice.is_active ? "default" : "secondary"}>
-                      {notice.is_active ? "활성" : "비활성"}
-                    </Badge>
-                    <Badge variant={priority.variant}>{priority.label}</Badge>
-                  </div>
-                  <div className="mt-2 space-y-1">
-                    <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">작성자</span>
-                      <span className="font-medium">{notice.created_by || "-"}</span>
-                    </div>
-                    <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">작성일</span>
-                      <span className="font-medium">{formatDate(notice.created_at)}</span>
-                    </div>
-                  </div>
-                </div>
-              );
-            })
           )}
-        </div>
+          cardSubtitle={(n) => {
+            const p = getPriorityLabel(n.priority);
+            return (
+              <span className="flex flex-wrap gap-2 pt-1">
+                <Badge variant={n.is_active ? "default" : "secondary"}>
+                  {n.is_active ? "활성" : "비활성"}
+                </Badge>
+                <Badge variant={p.variant}>{p.label}</Badge>
+              </span>
+            );
+          }}
+          cardFields={cardFields}
+          actionsLabel="관리"
+          actionsWidth="120px"
+          renderActions={(notice) => (
+            <>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => handleOpenEdit(notice)}
+                aria-label="수정"
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-destructive hover:text-destructive"
+                onClick={() => setDeleteTarget(notice)}
+                aria-label="삭제"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+        />
       </div>
 
       {/* 등록/수정 모달 */}
@@ -422,7 +382,6 @@ export default function SystemNoticesPage() {
           </DialogHeader>
 
           <div className="space-y-4">
-            {/* 제목 */}
             <div>
               <Label htmlFor="notice-title" className="text-xs sm:text-sm">
                 제목 <span className="text-destructive">*</span>
@@ -436,7 +395,6 @@ export default function SystemNoticesPage() {
               />
             </div>
 
-            {/* 내용 */}
             <div>
               <Label htmlFor="notice-content" className="text-xs sm:text-sm">
                 내용 <span className="text-destructive">*</span>
@@ -450,7 +408,6 @@ export default function SystemNoticesPage() {
               />
             </div>
 
-            {/* 우선순위 */}
             <div>
               <Label htmlFor="notice-priority" className="text-xs sm:text-sm">
                 우선순위
@@ -472,7 +429,6 @@ export default function SystemNoticesPage() {
               </Select>
             </div>
 
-            {/* 활성 여부 */}
             <div className="flex items-center gap-2">
               <Checkbox
                 id="notice-active"
diff --git a/frontend/components/admin/CompanyTable.tsx b/frontend/components/admin/CompanyTable.tsx
index 9c253765..e20fb806 100644
--- a/frontend/components/admin/CompanyTable.tsx
+++ b/frontend/components/admin/CompanyTable.tsx
@@ -1,8 +1,7 @@
 import { Edit, Trash2, HardDrive, FileText, Users } from "lucide-react";
 import { Company } from "@/types/company";
-import { COMPANY_TABLE_COLUMNS } from "@/constants/company";
 import { Button } from "@/components/ui/button";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 import { useRouter } from "next/navigation";
 
 interface CompanyTableProps {
@@ -14,8 +13,6 @@ interface CompanyTableProps {
 
 /**
  * 회사 목록 테이블 컴포넌트
- * 데스크톱: 테이블 뷰
- * 모바일/태블릿: 카드 뷰
  */
 export function CompanyTable({ companies, isLoading, onEdit, onDelete }: CompanyTableProps) {
   const router = useRouter();
@@ -52,206 +49,88 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
     );
   };
 
-  // 로딩 상태 렌더링
-  if (isLoading) {
-    return (
-      <>
-        {/* 데스크톱 테이블 스켈레톤 */}
-        <div className="bg-card hidden shadow-sm lg:block">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                {COMPANY_TABLE_COLUMNS.map((column) => (
-                  <TableHead key={column.key} className="h-12 px-6 py-3 text-sm font-semibold">
-                    {column.label}
-                  </TableHead>
-                ))}
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold">디스크 사용량</TableHead>
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {Array.from({ length: 10 }).map((_, index) => (
-                <TableRow key={index}>
-                  <TableCell className="h-16">
-                    <div className="bg-muted h-4 animate-pulse rounded"></div>
-                  </TableCell>
-                  <TableCell className="h-16">
-                    <div className="bg-muted h-4 animate-pulse rounded"></div>
-                  </TableCell>
-                  <TableCell className="h-16">
-                    <div className="bg-muted h-4 animate-pulse rounded"></div>
-                  </TableCell>
-                  <TableCell className="h-16">
-                    <div className="bg-muted h-4 animate-pulse rounded"></div>
-                  </TableCell>
-                  <TableCell className="h-16">
-                    <div className="flex gap-2">
-                      <div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
-                      <div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
+  // 데스크톱 테이블 컬럼 정의
+  const columns: RDVColumn<Company>[] = [
+    {
+      key: "company_code",
+      label: "회사코드",
+      width: "150px",
+      render: (value) => <span className="font-mono">{value}</span>,
+    },
+    {
+      key: "company_name",
+      label: "회사명",
+      render: (value) => <span className="font-medium">{value}</span>,
+    },
+    {
+      key: "writer",
+      label: "등록자",
+      width: "200px",
+    },
+    {
+      key: "diskUsage",
+      label: "디스크 사용량",
+      hideOnMobile: true,
+      render: (_value, row) => formatDiskUsage(row),
+    },
+  ];
 
-        {/* 모바일/태블릿 카드 스켈레톤 */}
-        <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-          {Array.from({ length: 6 }).map((_, index) => (
-            <div key={index} className="bg-card rounded-lg border p-4 shadow-sm">
-              <div className="mb-4 flex items-start justify-between">
-                <div className="flex-1 space-y-2">
-                  <div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
-                  <div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
-                </div>
-              </div>
-              <div className="space-y-2 border-t pt-4">
-                {Array.from({ length: 3 }).map((_, i) => (
-                  <div key={i} className="flex justify-between">
-                    <div className="bg-muted h-4 w-16 animate-pulse rounded"></div>
-                    <div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </>
-    );
-  }
+  // 모바일 카드 필드 정의
+  const cardFields: RDVCardField<Company>[] = [
+    {
+      label: "작성자",
+      render: (company) => <span className="font-medium">{company.writer}</span>,
+    },
+    {
+      label: "디스크 사용량",
+      render: (company) => formatDiskUsage(company),
+    },
+  ];
 
-  // 데이터가 없을 때
-  if (companies.length === 0) {
-    return (
-      <div className="bg-card flex h-64 flex-col items-center justify-center shadow-sm">
-        <div className="flex flex-col items-center gap-2 text-center">
-          <p className="text-muted-foreground text-sm">등록된 회사가 없습니다.</p>
-        </div>
-      </div>
-    );
-  }
-
-  // 실제 데이터 렌더링
   return (
-    <>
-      {/* 데스크톱 테이블 뷰 (lg 이상) */}
-      <div className="bg-card hidden lg:block">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              {COMPANY_TABLE_COLUMNS.map((column) => (
-                <TableHead key={column.key} className="h-12 px-6 py-3 text-sm font-semibold">
-                  {column.label}
-                </TableHead>
-              ))}
-              <TableHead className="h-12 px-6 py-3 text-sm font-semibold">디스크 사용량</TableHead>
-              <TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {companies.map((company) => (
-              <TableRow
-                key={company.regdate + company.company_code}
-                className="bg-background hover:bg-muted/50 transition-colors"
-              >
-                <TableCell className="h-16 px-6 py-3 font-mono text-sm">{company.company_code}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm font-medium">{company.company_name}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm">{company.writer}</TableCell>
-                <TableCell className="h-16 px-6 py-3">{formatDiskUsage(company)}</TableCell>
-                <TableCell className="h-16 px-6 py-3">
-                  <div className="flex gap-2">
-                    {/* <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => handleManageDepartments(company)}
-                      className="h-8 w-8"
-                      aria-label="부서관리"
-                    >
-                      <Users className="h-4 w-4" />
-                    </Button> */}
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onEdit(company)}
-                      className="h-8 w-8"
-                      aria-label="수정"
-                    >
-                      <Edit className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onDelete(company)}
-                      className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
-                      aria-label="삭제"
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-        {companies.map((company) => (
-          <div
-            key={company.regdate + company.company_code}
-            className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
+    <ResponsiveDataView<Company>
+      data={companies}
+      columns={columns}
+      keyExtractor={(c) => c.regdate + c.company_code}
+      isLoading={isLoading}
+      emptyMessage="등록된 회사가 없습니다."
+      skeletonCount={10}
+      cardTitle={(c) => c.company_name}
+      cardSubtitle={(c) => <span className="font-mono">{c.company_code}</span>}
+      cardFields={cardFields}
+      actionsLabel="작업"
+      actionsWidth="180px"
+      renderActions={(company) => (
+        <>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => handleManageDepartments(company)}
+            className="h-8 w-8"
+            aria-label="부서관리"
           >
-            {/* 헤더 */}
-            <div className="mb-4 flex items-start justify-between">
-              <div className="flex-1">
-                <h3 className="text-base font-semibold">{company.company_name}</h3>
-                <p className="text-muted-foreground mt-1 font-mono text-sm">{company.company_code}</p>
-              </div>
-            </div>
-
-            {/* 정보 */}
-            <div className="space-y-2 border-t pt-4">
-              <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">작성자</span>
-                <span className="font-medium">{company.writer}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">디스크 사용량</span>
-                <div>{formatDiskUsage(company)}</div>
-              </div>
-            </div>
-
-            {/* 액션 */}
-            <div className="mt-4 flex gap-2 border-t pt-4">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => handleManageDepartments(company)}
-                className="h-9 flex-1 gap-2 text-sm"
-              >
-                <Users className="h-4 w-4" />
-                부서
-              </Button>
-              <Button variant="outline" size="sm" onClick={() => onEdit(company)} className="h-9 flex-1 gap-2 text-sm">
-                <Edit className="h-4 w-4" />
-                수정
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => onDelete(company)}
-                className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 flex-1 gap-2 text-sm"
-              >
-                <Trash2 className="h-4 w-4" />
-                삭제
-              </Button>
-            </div>
-          </div>
-        ))}
-      </div>
-    </>
+            <Users className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onEdit(company)}
+            className="h-8 w-8"
+            aria-label="수정"
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(company)}
+            className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
+            aria-label="삭제"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </>
+      )}
+    />
   );
 }
diff --git a/frontend/components/admin/UserAuthTable.tsx b/frontend/components/admin/UserAuthTable.tsx
index c4d0b7c4..50e7d889 100644
--- a/frontend/components/admin/UserAuthTable.tsx
+++ b/frontend/components/admin/UserAuthTable.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import React from "react";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Shield, ShieldCheck, User as UserIcon, Users, Building2 } from "lucide-react";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 
 interface UserAuthTableProps {
   users: any[];
@@ -72,158 +72,94 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
     return (paginationInfo.currentPage - 1) * paginationInfo.pageSize + index + 1;
   };
 
-  // 로딩 스켈레톤
-  if (isLoading) {
-    return (
-      <div className="bg-card hidden lg:block">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">사용자 ID</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">회사</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">부서</TableHead>
-              <TableHead className="h-12 text-center text-sm font-semibold">현재 권한</TableHead>
-              <TableHead className="h-12 w-[120px] text-center text-sm font-semibold">액션</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-              {Array.from({ length: 10 }).map((_, index) => (
-                <TableRow key={index}>
-                <TableCell className="h-16">
-                  <div className="bg-muted h-4 animate-pulse rounded"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted h-4 animate-pulse rounded"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted h-4 animate-pulse rounded"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted h-4 animate-pulse rounded"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted h-4 animate-pulse rounded"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted mx-auto h-6 w-24 animate-pulse rounded-full"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted mx-auto h-8 w-20 animate-pulse rounded"></div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-    );
-  }
+  // 데스크톱 테이블 컬럼 정의
+  const columns: RDVColumn<any>[] = [
+    {
+      key: "no",
+      label: "No",
+      width: "80px",
+      className: "text-center",
+      render: (_value, _row, index) => <span>{getRowNumber(index)}</span>,
+    },
+    {
+      key: "userId",
+      label: "사용자 ID",
+      render: (value) => <span className="font-mono">{value}</span>,
+    },
+    {
+      key: "userName",
+      label: "사용자명",
+    },
+    {
+      key: "companyName",
+      label: "회사",
+      hideOnMobile: true,
+      render: (_value, row) => <span>{row.companyName || row.companyCode}</span>,
+    },
+    {
+      key: "deptName",
+      label: "부서",
+      hideOnMobile: true,
+      render: (value) => <span>{value || "-"}</span>,
+    },
+    {
+      key: "userType",
+      label: "현재 권한",
+      className: "text-center",
+      render: (_value, row) => {
+        const typeInfo = getUserTypeInfo(row.userType);
+        return (
+          <Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
+            {typeInfo.icon}
+            {typeInfo.label}
+          </Badge>
+        );
+      },
+    },
+  ];
 
-  // 빈 상태
-  if (users.length === 0) {
-    return (
-      <div className="bg-card flex h-64 flex-col items-center justify-center">
-        <p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p>
-      </div>
-    );
-  }
+  // 모바일 카드 필드 정의
+  const cardFields: RDVCardField<any>[] = [
+    {
+      label: "회사",
+      render: (user) => <span>{user.companyName || user.companyCode}</span>,
+    },
+    {
+      label: "부서",
+      render: (user) => <span>{user.deptName || "-"}</span>,
+    },
+  ];
 
-  // 실제 데이터 렌더링
   return (
     <div className="space-y-4">
-      {/* 데스크톱 테이블 */}
-      <div className="bg-card hidden lg:block">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">사용자 ID</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">회사</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">부서</TableHead>
-              <TableHead className="h-12 text-center text-sm font-semibold">현재 권한</TableHead>
-              <TableHead className="h-12 w-[120px] text-center text-sm font-semibold">액션</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {users.map((user, index) => {
-              const typeInfo = getUserTypeInfo(user.userType);
-              return (
-                <TableRow key={user.userId} className="hover:bg-muted/50 transition-colors">
-                  <TableCell className="h-16 text-center text-sm">{getRowNumber(index)}</TableCell>
-                  <TableCell className="h-16 font-mono text-sm">{user.userId}</TableCell>
-                  <TableCell className="h-16 text-sm">{user.userName}</TableCell>
-                  <TableCell className="h-16 text-sm">{user.companyName || user.companyCode}</TableCell>
-                  <TableCell className="h-16 text-sm">{user.deptName || "-"}</TableCell>
-                  <TableCell className="h-16 text-center">
-                    <Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
-                      {typeInfo.icon}
-                      {typeInfo.label}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="h-16 text-center">
-                    <Button variant="outline" size="sm" onClick={() => onEditAuth(user)} className="h-8 gap-1 text-sm">
-                      <Shield className="h-3 w-3" />
-                      권한 변경
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* 모바일 카드 뷰 */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-        {users.map((user, index) => {
-          const typeInfo = getUserTypeInfo(user.userType);
+      <ResponsiveDataView<any>
+        data={users}
+        columns={columns}
+        keyExtractor={(u) => u.userId}
+        isLoading={isLoading}
+        emptyMessage="등록된 사용자가 없습니다."
+        skeletonCount={10}
+        cardTitle={(u) => u.userName}
+        cardSubtitle={(u) => <span className="font-mono">{u.userId}</span>}
+        cardHeaderRight={(u) => {
+          const typeInfo = getUserTypeInfo(u.userType);
           return (
-            <div
-              key={user.userId}
-              className="bg-card hover:bg-muted/50 rounded-lg border p-4 transition-colors"
-            >
-              {/* 헤더 */}
-              <div className="mb-4 flex items-start justify-between">
-                <div className="flex-1">
-                  <h3 className="text-base font-semibold">{user.userName}</h3>
-                  <p className="text-muted-foreground mt-1 font-mono text-sm">{user.userId}</p>
-                </div>
-                <Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
-                  {typeInfo.icon}
-                  {typeInfo.label}
-                </Badge>
-              </div>
-
-              {/* 정보 */}
-              <div className="space-y-2 border-t pt-4">
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">회사</span>
-                  <span className="font-medium">{user.companyName || user.companyCode}</span>
-                </div>
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">부서</span>
-                  <span className="font-medium">{user.deptName || "-"}</span>
-                </div>
-              </div>
-
-              {/* 액션 */}
-              <div className="mt-4 border-t pt-4">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => onEditAuth(user)}
-                  className="h-9 w-full gap-2 text-sm"
-                >
-                  <Shield className="h-4 w-4" />
-                  권한 변경
-                </Button>
-              </div>
-            </div>
+            <Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
+              {typeInfo.icon}
+              {typeInfo.label}
+            </Badge>
           );
-        })}
-      </div>
+        }}
+        cardFields={cardFields}
+        actionsLabel="액션"
+        actionsWidth="120px"
+        renderActions={(user) => (
+          <Button variant="outline" size="sm" onClick={() => onEditAuth(user)} className="h-8 gap-1 text-sm">
+            <Shield className="h-3 w-3" />
+            권한 변경
+          </Button>
+        )}
+      />
 
       {/* 페이지네이션 */}
       {paginationInfo.totalPages > 1 && (
diff --git a/frontend/components/admin/UserTable.tsx b/frontend/components/admin/UserTable.tsx
index 1d6d6d46..a0073f4f 100644
--- a/frontend/components/admin/UserTable.tsx
+++ b/frontend/components/admin/UserTable.tsx
@@ -1,11 +1,10 @@
 import { Key, History, Edit } from "lucide-react";
 import { useState } from "react";
 import { User } from "@/types/user";
-import { USER_TABLE_COLUMNS } from "@/constants/user";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { PaginationInfo } from "@/components/common/Pagination";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 import { UserStatusConfirmDialog } from "./UserStatusConfirmDialog";
 import { UserHistoryModal } from "./UserHistoryModal";
 
@@ -59,7 +58,7 @@ export function UserTable({
   // 날짜 포맷팅 함수
   const formatDate = (dateString: string) => {
     if (!dateString) return "-";
-    return dateString.split(" ")[0]; // "2024-01-15 14:30:00" -> "2024-01-15"
+    return dateString.split(" ")[0];
   };
 
   // 상태 토글 핸들러 (확인 모달 표시)
@@ -103,254 +102,190 @@ export function UserTable({
     });
   };
 
-  // 로딩 상태 렌더링
-  if (isLoading) {
-    return (
-      <>
-        {/* 데스크톱 테이블 스켈레톤 */}
-        <div className="bg-card hidden shadow-sm lg:block">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                {USER_TABLE_COLUMNS.map((column) => (
-                  <TableHead key={column.key} style={{ width: column.width }} className="h-12 px-6 py-3 text-sm font-semibold">
-                    {column.label}
-                  </TableHead>
-                ))}
-                <TableHead className="h-12 px-6 py-3 w-[200px] text-sm font-semibold">작업</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {Array.from({ length: 10 }).map((_, index) => (
-                <TableRow key={index}>
-                  {USER_TABLE_COLUMNS.map((column) => (
-                    <TableCell key={column.key} className="h-16">
-                      <div className="bg-muted h-4 animate-pulse rounded"></div>
-                    </TableCell>
-                  ))}
-                  <TableCell className="h-16">
-                    <div className="flex gap-2">
-                      {Array.from({ length: 2 }).map((_, i) => (
-                        <div key={i} className="bg-muted h-8 w-8 animate-pulse rounded"></div>
-                      ))}
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+  // 데스크톱 테이블 컬럼 정의
+  const columns: RDVColumn<User>[] = [
+    {
+      key: "no",
+      label: "No",
+      width: "60px",
+      render: (_value, _row, index) => (
+        <span className="font-mono font-medium">{getRowNumber(index)}</span>
+      ),
+    },
+    {
+      key: "sabun",
+      label: "사번",
+      width: "80px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-mono">{value || "-"}</span>,
+    },
+    {
+      key: "companyCode",
+      label: "회사",
+      width: "120px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-medium">{value || "-"}</span>,
+    },
+    {
+      key: "deptName",
+      label: "부서명",
+      width: "120px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-medium">{value || "-"}</span>,
+    },
+    {
+      key: "positionName",
+      label: "직책",
+      width: "100px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-medium">{value || "-"}</span>,
+    },
+    {
+      key: "userId",
+      label: "사용자 ID",
+      width: "120px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-mono">{value}</span>,
+    },
+    {
+      key: "userName",
+      label: "사용자명",
+      width: "100px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-medium">{value}</span>,
+    },
+    {
+      key: "tel",
+      label: "전화번호",
+      width: "120px",
+      hideOnMobile: true,
+      render: (_value, row) => <span>{row.tel || row.cellPhone || "-"}</span>,
+    },
+    {
+      key: "email",
+      label: "이메일",
+      width: "200px",
+      hideOnMobile: true,
+      className: "max-w-[200px] truncate",
+      render: (value, row) => (
+        <span title={row.email}>{value || "-"}</span>
+      ),
+    },
+    {
+      key: "regDate",
+      label: "등록일",
+      width: "100px",
+      hideOnMobile: true,
+      render: (value) => <span>{formatDate(value || "")}</span>,
+    },
+    {
+      key: "status",
+      label: "상태",
+      width: "120px",
+      hideOnMobile: true,
+      render: (_value, row) => (
+        <div className="flex items-center">
+          <Switch
+            checked={row.status === "active"}
+            onCheckedChange={(checked) => handleStatusToggle(row, checked)}
+            aria-label={`${row.userName} 상태 토글`}
+          />
         </div>
+      ),
+    },
+  ];
 
-        {/* 모바일/태블릿 카드 스켈레톤 */}
-        <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-          {Array.from({ length: 6 }).map((_, index) => (
-            <div key={index} className="bg-card rounded-lg border p-4 shadow-sm">
-              <div className="mb-4 flex items-start justify-between">
-                <div className="flex-1 space-y-2">
-                  <div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
-                  <div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
-                </div>
-                <div className="bg-muted h-6 w-11 animate-pulse rounded-full"></div>
-              </div>
-              <div className="space-y-2 border-t pt-4">
-                {Array.from({ length: 5 }).map((_, i) => (
-                  <div key={i} className="flex justify-between">
-                    <div className="bg-muted h-4 w-16 animate-pulse rounded"></div>
-                    <div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
-                  </div>
-                ))}
-              </div>
-              <div className="mt-4 flex gap-2 border-t pt-4">
-                <div className="bg-muted h-9 flex-1 animate-pulse rounded"></div>
-                <div className="bg-muted h-9 flex-1 animate-pulse rounded"></div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </>
-    );
-  }
+  // 모바일 카드 필드 정의
+  const cardFields: RDVCardField<User>[] = [
+    {
+      label: "사번",
+      render: (user) => <span className="font-mono font-medium">{user.sabun || "-"}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "회사",
+      render: (user) => <span className="font-medium">{user.companyCode || ""}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "부서",
+      render: (user) => <span className="font-medium">{user.deptName || ""}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "직책",
+      render: (user) => <span className="font-medium">{user.positionName || ""}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "연락처",
+      render: (user) => <span>{user.tel || user.cellPhone || ""}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "이메일",
+      render: (user) => <span className="break-all">{user.email || ""}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "등록일",
+      render: (user) => <span>{formatDate(user.regDate || "")}</span>,
+    },
+  ];
 
-  // 데이터가 없을 때
-  if (users.length === 0) {
-    return (
-      <div className="bg-card flex h-64 flex-col items-center justify-center shadow-sm">
-        <div className="flex flex-col items-center gap-2 text-center">
-          <p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p>
-        </div>
-      </div>
-    );
-  }
-
-  // 실제 데이터 렌더링
   return (
     <>
-      {/* 데스크톱 테이블 뷰 (lg 이상) */}
-      <div className="bg-card hidden lg:block">
-        <Table>
-            <TableHeader>
-              <TableRow>
-                {USER_TABLE_COLUMNS.map((column) => (
-                  <TableHead key={column.key} style={{ width: column.width }} className="h-12 px-6 py-3 text-sm font-semibold">
-                    {column.label}
-                  </TableHead>
-                ))}
-                <TableHead className="h-12 px-6 py-3 w-[200px] text-sm font-semibold">작업</TableHead>
-              </TableRow>
-            </TableHeader>
-          <TableBody>
-            {users.map((user, index) => (
-              <TableRow key={`${user.userId}-${index}`} className="bg-background transition-colors hover:bg-muted/50">
-                <TableCell className="h-16 px-6 py-3 font-mono text-sm font-medium">{getRowNumber(index)}</TableCell>
-                <TableCell className="h-16 px-6 py-3 font-mono text-sm">{user.sabun || "-"}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.companyCode || "-"}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.deptName || "-"}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.positionName || "-"}</TableCell>
-                <TableCell className="h-16 px-6 py-3 font-mono text-sm">{user.userId}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.userName}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm">{user.tel || user.cellPhone || "-"}</TableCell>
-                <TableCell className="h-16 px-6 py-3 max-w-[200px] truncate text-sm" title={user.email}>
-                  {user.email || "-"}
-                </TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm">{formatDate(user.regDate || "")}</TableCell>
-                <TableCell className="h-16 px-6 py-3">
-                  <div className="flex items-center">
-                    <Switch
-                      checked={user.status === "active"}
-                      onCheckedChange={(checked) => handleStatusToggle(user, checked)}
-                      aria-label={`${user.userName} 상태 토글`}
-                    />
-                  </div>
-                </TableCell>
-                <TableCell className="h-16 px-6 py-3">
-                  <div className="flex gap-2">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onEdit(user)}
-                      className="h-8 w-8"
-                      title="사용자 정보 수정"
-                    >
-                      <Edit className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
-                      className="h-8 w-8"
-                      title="비밀번호 초기화"
-                    >
-                      <Key className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => handleOpenHistoryModal(user)}
-                      className="h-8 w-8"
-                      title="변경이력 조회"
-                    >
-                      <History className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-        {users.map((user, index) => (
-          <div
-            key={`${user.userId}-${index}`}
-            className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
-          >
-            {/* 헤더: 이름과 상태 */}
-            <div className="mb-4 flex items-start justify-between">
-              <div className="flex-1">
-                <h3 className="text-base font-semibold">{user.userName}</h3>
-                <p className="text-muted-foreground mt-1 font-mono text-sm">{user.userId}</p>
-              </div>
-              <Switch
-                checked={user.status === "active"}
-                onCheckedChange={(checked) => handleStatusToggle(user, checked)}
-                aria-label={`${user.userName} 상태 토글`}
-              />
-            </div>
-
-            {/* 정보 그리드 */}
-            <div className="space-y-2 border-t pt-4">
-              {user.sabun && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">사번</span>
-                  <span className="font-mono font-medium">{user.sabun}</span>
-                </div>
-              )}
-              {user.companyCode && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">회사</span>
-                  <span className="font-medium">{user.companyCode}</span>
-                </div>
-              )}
-              {user.deptName && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">부서</span>
-                  <span className="font-medium">{user.deptName}</span>
-                </div>
-              )}
-              {user.positionName && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">직책</span>
-                  <span className="font-medium">{user.positionName}</span>
-                </div>
-              )}
-              {(user.tel || user.cellPhone) && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">연락처</span>
-                  <span>{user.tel || user.cellPhone}</span>
-                </div>
-              )}
-              {user.email && (
-                <div className="flex flex-col gap-1 text-sm">
-                  <span className="text-muted-foreground">이메일</span>
-                  <span className="break-all">{user.email}</span>
-                </div>
-              )}
-              <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">등록일</span>
-                <span>{formatDate(user.regDate || "")}</span>
-              </div>
-            </div>
-
-            {/* 액션 버튼 */}
-            <div className="mt-4 flex gap-2 border-t pt-4">
-              <Button variant="outline" size="sm" onClick={() => onEdit(user)} className="h-9 flex-1 gap-2 text-sm">
-                <Edit className="h-4 w-4" />
-                수정
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
-                className="h-9 w-9 p-0"
-                title="비밀번호 초기화"
-              >
-                <Key className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => handleOpenHistoryModal(user)}
-                className="h-9 w-9 p-0"
-                title="변경이력"
-              >
-                <History className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
-        ))}
-      </div>
+      <ResponsiveDataView<User>
+        data={users}
+        columns={columns}
+        keyExtractor={(u) => u.userId}
+        isLoading={isLoading}
+        emptyMessage="등록된 사용자가 없습니다."
+        skeletonCount={10}
+        cardTitle={(u) => u.userName || ""}
+        cardSubtitle={(u) => <span className="font-mono">{u.userId}</span>}
+        cardHeaderRight={(u) => (
+          <Switch
+            checked={u.status === "active"}
+            onCheckedChange={(checked) => handleStatusToggle(u, checked)}
+            aria-label={`${u.userName} 상태 토글`}
+          />
+        )}
+        cardFields={cardFields}
+        actionsLabel="작업"
+        actionsWidth="200px"
+        renderActions={(user) => (
+          <>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => onEdit(user)}
+              className="h-8 w-8"
+              title="사용자 정보 수정"
+            >
+              <Edit className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
+              className="h-8 w-8"
+              title="비밀번호 초기화"
+            >
+              <Key className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => handleOpenHistoryModal(user)}
+              className="h-8 w-8"
+              title="변경이력 조회"
+            >
+              <History className="h-4 w-4" />
+            </Button>
+          </>
+        )}
+      />
 
       {/* 상태 변경 확인 모달 */}
       <UserStatusConfirmDialog
diff --git a/frontend/components/dataflow/DataFlowList.tsx b/frontend/components/dataflow/DataFlowList.tsx
index af06af65..42c1c8e0 100644
--- a/frontend/components/dataflow/DataFlowList.tsx
+++ b/frontend/components/dataflow/DataFlowList.tsx
@@ -3,8 +3,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -19,13 +17,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { MoreHorizontal, Trash2, Copy, Plus, Search, Network, Database, Calendar, User } from "lucide-react";
+import { MoreHorizontal, Trash2, Copy, Plus, Search, Network, Calendar } from "lucide-react";
 import { toast } from "sonner";
 import { showErrorToast } from "@/lib/utils/toastUtils";
 import { useAuth } from "@/hooks/useAuth";
 import { apiClient } from "@/lib/api/client";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 
-// 노드 플로우 타입 정의
 interface NodeFlow {
   flowId: number;
   flowName: string;
@@ -44,12 +42,9 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
   const [loading, setLoading] = useState(true);
   const [searchTerm, setSearchTerm] = useState("");
 
-  // 모달 상태
-  const [showCopyModal, setShowCopyModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedFlow, setSelectedFlow] = useState<NodeFlow | null>(null);
 
-  // 노드 플로우 목록 로드
   const loadFlows = useCallback(async () => {
     try {
       setLoading(true);
@@ -68,23 +63,19 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
     }
   }, []);
 
-  // 플로우 목록 로드
   useEffect(() => {
     loadFlows();
   }, [loadFlows]);
 
-  // 플로우 삭제
   const handleDelete = (flow: NodeFlow) => {
     setSelectedFlow(flow);
     setShowDeleteModal(true);
   };
 
-  // 플로우 복사
   const handleCopy = async (flow: NodeFlow) => {
     try {
       setLoading(true);
 
-      // 원본 플로우 데이터 가져오기
       const response = await apiClient.get(`/dataflow/node-flows/${flow.flowId}`);
 
       if (!response.data.success) {
@@ -93,7 +84,6 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
 
       const originalFlow = response.data.data;
 
-      // 복사본 저장
       const copyResponse = await apiClient.post("/dataflow/node-flows", {
         flowName: `${flow.flowName} (복사본)`,
         flowDescription: flow.flowDescription,
@@ -114,7 +104,6 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
     }
   };
 
-  // 삭제 확인
   const handleConfirmDelete = async () => {
     if (!selectedFlow) return;
 
@@ -138,18 +127,95 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
     }
   };
 
-  // 검색 필터링
   const filteredFlows = flows.filter(
     (flow) =>
       flow.flowName.toLowerCase().includes(searchTerm.toLowerCase()) ||
       flow.flowDescription.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
+  // DropdownMenu 렌더러 (테이블 + 카드 공통)
+  const renderDropdownMenu = (flow: NodeFlow) => (
+    <div onClick={(e) => e.stopPropagation()}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
+            <Network className="mr-2 h-4 w-4" />
+            불러오기
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => handleCopy(flow)}>
+            <Copy className="mr-2 h-4 w-4" />
+            복사
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
+            <Trash2 className="mr-2 h-4 w-4" />
+            삭제
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+
+  const columns: RDVColumn<NodeFlow>[] = [
+    {
+      key: "flowName",
+      label: "플로우명",
+      render: (_val, flow) => (
+        <div className="flex items-center font-medium">
+          <Network className="mr-2 h-4 w-4 text-primary" />
+          {flow.flowName}
+        </div>
+      ),
+    },
+    {
+      key: "flowDescription",
+      label: "설명",
+      render: (_val, flow) => (
+        <span className="text-muted-foreground">{flow.flowDescription || "설명 없음"}</span>
+      ),
+    },
+    {
+      key: "createdAt",
+      label: "생성일",
+      render: (_val, flow) => (
+        <span className="flex items-center text-muted-foreground">
+          <Calendar className="mr-1 h-3 w-3" />
+          {new Date(flow.createdAt).toLocaleDateString()}
+        </span>
+      ),
+    },
+    {
+      key: "updatedAt",
+      label: "최근 수정",
+      hideOnMobile: true,
+      render: (_val, flow) => (
+        <span className="flex items-center text-muted-foreground">
+          <Calendar className="mr-1 h-3 w-3" />
+          {new Date(flow.updatedAt).toLocaleDateString()}
+        </span>
+      ),
+    },
+  ];
+
+  const cardFields: RDVCardField<NodeFlow>[] = [
+    {
+      label: "생성일",
+      render: (flow) => new Date(flow.createdAt).toLocaleDateString(),
+    },
+    {
+      label: "최근 수정",
+      render: (flow) => new Date(flow.updatedAt).toLocaleDateString(),
+    },
+  ];
+
   return (
     <div className="space-y-4">
       {/* 검색 및 액션 영역 */}
       <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        {/* 검색 영역 */}
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
           <div className="w-full sm:w-[400px]">
             <div className="relative">
@@ -164,7 +230,6 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
           </div>
         </div>
 
-        {/* 액션 버튼 영역 */}
         <div className="flex items-center gap-4">
           <div className="text-sm text-muted-foreground">
             총 <span className="font-semibold text-foreground">{filteredFlows.length}</span> 건
@@ -176,71 +241,8 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
         </div>
       </div>
 
-      {loading ? (
-        <>
-          {/* 데스크톱 테이블 스켈레톤 */}
-          <div className="hidden bg-card shadow-sm lg:block">
-            <Table>
-              <TableHeader>
-                <TableRow className="bg-background">
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">플로우명</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">최근 수정</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {Array.from({ length: 5 }).map((_, index) => (
-                  <TableRow key={index} className="bg-background">
-                    <TableCell className="h-16 px-6 py-3">
-                      <div className="h-4 w-32 animate-pulse rounded bg-muted"></div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3">
-                      <div className="h-4 w-48 animate-pulse rounded bg-muted"></div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3">
-                      <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3">
-                      <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3">
-                      <div className="flex justify-end">
-                        <div className="h-8 w-8 animate-pulse rounded bg-muted"></div>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-
-          {/* 모바일/태블릿 카드 스켈레톤 */}
-          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-            {Array.from({ length: 4 }).map((_, index) => (
-              <div key={index} className="rounded-lg border bg-card p-4 shadow-sm">
-                <div className="mb-4 flex items-start justify-between">
-                  <div className="flex-1 space-y-2">
-                    <div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
-                    <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                  </div>
-                </div>
-                <div className="space-y-2 border-t pt-4">
-                  <div className="flex justify-between">
-                    <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
-                    <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                  </div>
-                  <div className="flex justify-between">
-                    <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
-                    <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
-      ) : filteredFlows.length === 0 ? (
+      {/* 빈 상태: 커스텀 Empty UI */}
+      {!loading && filteredFlows.length === 0 ? (
         <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
           <div className="flex flex-col items-center gap-2 text-center">
             <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
@@ -257,135 +259,26 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
           </div>
         </div>
       ) : (
-        <>
-          {/* 데스크톱 테이블 뷰 (lg 이상) */}
-          <div className="hidden bg-card shadow-sm lg:block">
-            <Table>
-              <TableHeader>
-                <TableRow className="bg-background">
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">플로우명</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">최근 수정</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredFlows.map((flow) => (
-                  <TableRow
-                    key={flow.flowId}
-                    className="bg-background transition-colors hover:bg-muted/50 cursor-pointer"
-                    onClick={() => onLoadFlow(flow.flowId)}
-                  >
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <div className="flex items-center font-medium">
-                        <Network className="mr-2 h-4 w-4 text-primary" />
-                        {flow.flowName}
-                      </div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <div className="text-muted-foreground">{flow.flowDescription || "설명 없음"}</div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <div className="flex items-center text-muted-foreground">
-                        <Calendar className="mr-1 h-3 w-3" />
-                        {new Date(flow.createdAt).toLocaleDateString()}
-                      </div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <div className="flex items-center text-muted-foreground">
-                        <Calendar className="mr-1 h-3 w-3" />
-                        {new Date(flow.updatedAt).toLocaleDateString()}
-                      </div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3" onClick={(e) => e.stopPropagation()}>
-                      <div className="flex justify-end">
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" className="h-8 w-8 p-0">
-                              <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
-                              <Network className="mr-2 h-4 w-4" />
-                              불러오기
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => handleCopy(flow)}>
-                              <Copy className="mr-2 h-4 w-4" />
-                              복사
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
-                              <Trash2 className="mr-2 h-4 w-4" />
-                              삭제
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-
-          {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
-          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-            {filteredFlows.map((flow) => (
-              <div
-                key={flow.flowId}
-                className="cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
-                onClick={() => onLoadFlow(flow.flowId)}
-              >
-                {/* 헤더 */}
-                <div className="mb-4 flex items-start justify-between">
-                  <div className="flex-1">
-                    <div className="flex items-center">
-                      <Network className="mr-2 h-4 w-4 text-primary" />
-                      <h3 className="text-base font-semibold">{flow.flowName}</h3>
-                    </div>
-                    <p className="mt-1 text-sm text-muted-foreground">{flow.flowDescription || "설명 없음"}</p>
-                  </div>
-                  <div onClick={(e) => e.stopPropagation()}>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon" className="h-8 w-8">
-                          <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
-                          <Network className="mr-2 h-4 w-4" />
-                          불러오기
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => handleCopy(flow)}>
-                          <Copy className="mr-2 h-4 w-4" />
-                          복사
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
-                          <Trash2 className="mr-2 h-4 w-4" />
-                          삭제
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
-                </div>
-
-                {/* 정보 */}
-                <div className="space-y-2 border-t pt-4">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">생성일</span>
-                    <span className="font-medium">{new Date(flow.createdAt).toLocaleDateString()}</span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">최근 수정</span>
-                    <span className="font-medium">{new Date(flow.updatedAt).toLocaleDateString()}</span>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
+        <ResponsiveDataView<NodeFlow>
+          data={filteredFlows}
+          columns={columns}
+          keyExtractor={(flow) => String(flow.flowId)}
+          isLoading={loading}
+          skeletonCount={5}
+          cardTitle={(flow) => (
+            <span className="flex items-center">
+              <Network className="mr-2 h-4 w-4 text-primary" />
+              {flow.flowName}
+            </span>
+          )}
+          cardSubtitle={(flow) => flow.flowDescription || "설명 없음"}
+          cardHeaderRight={renderDropdownMenu}
+          cardFields={cardFields}
+          actionsLabel="작업"
+          actionsWidth="80px"
+          renderActions={renderDropdownMenu}
+          onRowClick={(flow) => onLoadFlow(flow.flowId)}
+        />
       )}
 
       {/* 삭제 확인 모달 */}