[agent-pipeline] pipe-20260309112447-f5iu round-3

frontend/app/(main)/admin/automaticMng/exCallConfList/page.tsx

@@ -3,10 +3,8 @@
 import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Plus, Search, Edit, Trash2, TestTube, Filter } from "lucide-react";
+import { Plus, Search, Edit, Trash2, TestTube } from "lucide-react";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { toast } from "sonner";
 import { showErrorToast } from "@/lib/utils/toastUtils";
 import {
@@ -29,9 +27,16 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
+import { ScrollToTop } from "@/components/common/ScrollToTop";
+
+// API 응답에 실제로 포함되는 필드를 위한 확장 타입
+type ExternalCallConfigWithDate = ExternalCallConfig & {
+  created_date?: string;
+};
 
 export default function ExternalCallConfigsPage() {
-  const [configs, setConfigs] = useState<ExternalCallConfig[]>([]);
+  const [configs, setConfigs] = useState<ExternalCallConfigWithDate[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
   const [filter, setFilter] = useState<ExternalCallConfigFilter>({
@@ -50,15 +55,17 @@ export default function ExternalCallConfigsPage() {
   const fetchConfigs = async () => {
     try {
       setLoading(true);
-      const response = await ExternalCallConfigAPI.getConfigs({
+      const filterWithSearch: Record<string, string | undefined> = { ...filter };
-        ...filter,
+      const trimmed = searchQuery.trim();
-        search: searchQuery.trim() || undefined,
+      if (trimmed) {
-      });
+        filterWithSearch.search = trimmed;
+      }
+      const response = await ExternalCallConfigAPI.getConfigs(filterWithSearch as ExternalCallConfigFilter);
 
       if (response.success) {
-        setConfigs(response.data || []);
+        setConfigs((response.data || []) as ExternalCallConfigWithDate[]);
       } else {
-        showErrorToast("외부 호출 설정 조회에 실패했습니다", response.message, {
+        showErrorToast("외부 호출 설정 조회에 실패했습니다", response.error, {
           guidance: "네트워크 연결을 확인하고 다시 시도해 주세요.",
         });
       }
@@ -72,9 +79,10 @@ export default function ExternalCallConfigsPage() {
     }
   };
 
-  // 초기 로드 및 필터/검색 변경 시 재조회
+  // 초기 로드 및 필터 변경 시 재조회
   useEffect(() => {
     fetchConfigs();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filter]);
 
   // 검색 실행
@@ -118,7 +126,7 @@ export default function ExternalCallConfigsPage() {
         toast.success("외부 호출 설정이 삭제되었습니다.");
         fetchConfigs();
       } else {
-        showErrorToast("외부 호출 설정 삭제에 실패했습니다", response.message, {
+        showErrorToast("외부 호출 설정 삭제에 실패했습니다", response.error, {
           guidance: "잠시 후 다시 시도해 주세요.",
         });
       }
@@ -140,10 +148,10 @@ export default function ExternalCallConfigsPage() {
     try {
       const response = await ExternalCallConfigAPI.testConfig(config.id);
 
-      if (response.success && response.data?.success) {
+      if (response.success) {
-        toast.success(`테스트 성공: ${response.data.message}`);
+        toast.success(`테스트 성공: ${response.message || "정상"}`);
       } else {
-        toast.error(`테스트 실패: ${response.data?.message || response.message}`);
+        toast.error(`테스트 실패: ${response.message || response.error || "알 수 없는 오류"}`);
       }
     } catch (error) {
       console.error("외부 호출 설정 테스트 오류:", error);
@@ -171,22 +179,102 @@ export default function ExternalCallConfigsPage() {
     return API_TYPE_OPTIONS.find((option) => option.value === apiType)?.label || apiType;
   };
 
+  // ResponsiveDataView 컬럼 정의
+  const columns: RDVColumn<ExternalCallConfigWithDate>[] = [
+    {
+      key: "config_name",
+      label: "설정명",
+      render: (_v, row) => <span className="font-medium">{row.config_name}</span>,
+    },
+    {
+      key: "call_type",
+      label: "호출 타입",
+      width: "120px",
+      render: (_v, row) => <Badge variant="outline">{getCallTypeLabel(row.call_type)}</Badge>,
+    },
+    {
+      key: "api_type",
+      label: "API 타입",
+      width: "120px",
+      render: (_v, row) =>
+        row.api_type ? (
+          <Badge variant="secondary">{getApiTypeLabel(row.api_type)}</Badge>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        ),
+    },
+    {
+      key: "description",
+      label: "설명",
+      render: (_v, row) =>
+        row.description ? (
+          <span className="block max-w-xs truncate text-muted-foreground" title={row.description}>
+            {row.description}
+          </span>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        ),
+    },
+    {
+      key: "is_active",
+      label: "상태",
+      width: "80px",
+      render: (_v, row) => (
+        <Badge variant={row.is_active === "Y" ? "default" : "destructive"}>
+          {row.is_active === "Y" ? "활성" : "비활성"}
+        </Badge>
+      ),
+    },
+    {
+      key: "created_date",
+      label: "생성일",
+      width: "120px",
+      render: (_v, row) =>
+        row.created_date ? new Date(row.created_date).toLocaleDateString() : "-",
+    },
+  ];
+
+  // 모바일 카드 필드 정의
+  const cardFields: RDVCardField<ExternalCallConfigWithDate>[] = [
+    {
+      label: "호출 타입",
+      render: (c) => <Badge variant="outline">{getCallTypeLabel(c.call_type)}</Badge>,
+    },
+    {
+      label: "API 타입",
+      render: (c) =>
+        c.api_type ? (
+          <Badge variant="secondary">{getApiTypeLabel(c.api_type)}</Badge>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        ),
+    },
+    {
+      label: "설명",
+      render: (c) => (
+        <span className="max-w-[200px] truncate">{c.description || "-"}</span>
+      ),
+    },
+    {
+      label: "생성일",
+      render: (c) =>
+        c.created_date ? new Date(c.created_date).toLocaleDateString() : "-",
+    },
+  ];
+
   return (
     <div className="flex min-h-screen flex-col bg-background">
-      <div className="space-y-6 p-6">
+      <div className="space-y-6 p-4 sm:p-6">
         {/* 페이지 헤더 */}
         <div className="space-y-2 border-b pb-4">
           <h1 className="text-3xl font-bold tracking-tight">외부 호출 관리</h1>
           <p className="text-sm text-muted-foreground">Discord, Slack, 카카오톡 등 외부 호출 설정을 관리합니다.</p>
         </div>
 
-        {/* 검색 및 필터 영역 */}
+        {/* 검색 및 필터 영역 (반응형) */}
-        <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 sm:justify-between">
           <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-              <div className="w-full sm:w-[320px]">
+            <div className="relative w-full sm:w-[300px]">
-                <div className="relative">
               <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
               <Input
                 placeholder="설정 이름 또는 설명으로 검색..."
@@ -196,7 +284,6 @@ export default function ExternalCallConfigsPage() {
                 className="h-10 pl-10 text-sm"
               />
             </div>
-              </div>
             <Button onClick={handleSearch} variant="outline" className="h-10 gap-2 text-sm font-medium">
               <Search className="h-4 w-4" />
               검색
@@ -208,7 +295,7 @@ export default function ExternalCallConfigsPage() {
           </Button>
         </div>
 
-          {/* 두 번째 줄: 필터 */}
+        {/* 필터 영역 */}
         <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
           <Select
             value={filter.call_type || "all"}
@@ -275,107 +362,64 @@ export default function ExternalCallConfigsPage() {
             </SelectContent>
           </Select>
         </div>
-        </div>
 
-        {/* 설정 목록 */}
+        {/* 설정 목록 (ResponsiveDataView) */}
-        <div className="rounded-lg border bg-card shadow-sm">
+        <ResponsiveDataView<ExternalCallConfigWithDate>
-          {loading ? (
+          data={configs}
-            // 로딩 상태
+          columns={columns}
-            <div className="flex h-64 items-center justify-center">
+          keyExtractor={(c) => String(c.id || c.config_name)}
-              <div className="text-sm text-muted-foreground">로딩 중...</div>
+          isLoading={loading}
-            </div>
+          emptyMessage="등록된 외부 호출 설정이 없습니다."
-          ) : configs.length === 0 ? (
+          skeletonCount={5}
-            // 빈 상태
+          cardTitle={(c) => c.config_name}
-            <div className="flex h-64 flex-col items-center justify-center">
+          cardSubtitle={(c) => c.description || "설명 없음"}
-              <div className="flex flex-col items-center gap-2 text-center">
+          cardHeaderRight={(c) => (
-                <p className="text-sm text-muted-foreground">등록된 외부 호출 설정이 없습니다.</p>
+            <Badge variant={c.is_active === "Y" ? "default" : "destructive"}>
-                <p className="text-xs text-muted-foreground">새 외부 호출을 추가해보세요.</p>
+              {c.is_active === "Y" ? "활성" : "비활성"}
-              </div>
-            </div>
-          ) : (
-            // 설정 테이블 목록
-            <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">API 타입</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>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {configs.map((config) => (
-                  <TableRow key={config.id} className="border-b transition-colors hover:bg-muted/50">
-                    <TableCell className="h-16 text-sm font-medium">{config.config_name}</TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <Badge variant="outline">{getCallTypeLabel(config.call_type)}</Badge>
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      {config.api_type ? (
-                        <Badge variant="secondary">{getApiTypeLabel(config.api_type)}</Badge>
-                      ) : (
-                        <span className="text-muted-foreground">-</span>
-                      )}
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <div className="max-w-xs">
-                        {config.description ? (
-                          <span className="block truncate text-muted-foreground" title={config.description}>
-                            {config.description}
-                          </span>
-                        ) : (
-                          <span className="text-muted-foreground">-</span>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <Badge variant={config.is_active === "Y" ? "default" : "destructive"}>
-                        {config.is_active === "Y" ? "활성" : "비활성"}
             </Badge>
-                    </TableCell>
+          )}
-                    <TableCell className="h-16 text-sm text-muted-foreground">
+          cardFields={cardFields}
-                      {config.created_date ? new Date(config.created_date).toLocaleDateString() : "-"}
+          renderActions={(c) => (
-                    </TableCell>
+            <>
-                    <TableCell className="h-16 text-sm">
-                      <div className="flex justify-center gap-1">
               <Button
-                          variant="ghost" 
+                variant="outline"
-                          size="icon" 
+                size="sm"
-                          className="h-8 w-8" 
+                className="h-9 flex-1 gap-2 text-sm"
-                          onClick={() => handleTestConfig(config)} 
+                onClick={(e) => {
-                          title="테스트"
+                  e.stopPropagation();
+                  handleTestConfig(c);
+                }}
               >
                 <TestTube className="h-4 w-4" />
+                테스트
               </Button>
               <Button
-                          variant="ghost" 
+                variant="outline"
-                          size="icon" 
+                size="sm"
-                          className="h-8 w-8" 
+                className="h-9 flex-1 gap-2 text-sm"
-                          onClick={() => handleEditConfig(config)} 
+                onClick={(e) => {
-                          title="편집"
+                  e.stopPropagation();
+                  handleEditConfig(c);
+                }}
               >
                 <Edit className="h-4 w-4" />
+                편집
               </Button>
               <Button
-                          variant="ghost"
+                variant="outline"
-                          size="icon"
+                size="sm"
-                          className="h-8 w-8 text-destructive hover:text-destructive"
+                className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 gap-2 text-sm"
-                          onClick={() => handleDeleteConfig(config)}
+                onClick={(e) => {
-                          title="삭제"
+                  e.stopPropagation();
+                  handleDeleteConfig(c);
+                }}
               >
                 <Trash2 className="h-4 w-4" />
               </Button>
-                      </div>
+            </>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
           )}
-        </div>
+          actionsWidth="200px"
+        />
 
         {/* 외부 호출 설정 모달 */}
         <ExternalCallConfigModal
@@ -391,7 +435,7 @@ export default function ExternalCallConfigsPage() {
             <AlertDialogHeader>
               <AlertDialogTitle className="text-base sm:text-lg">외부 호출 설정 삭제</AlertDialogTitle>
               <AlertDialogDescription className="text-xs sm:text-sm">
-              "{configToDelete?.config_name}" 설정을 삭제하시겠습니까?
+                &quot;{configToDelete?.config_name}&quot; 설정을 삭제하시겠습니까?
                 <br />이 작업은 되돌릴 수 없습니다.
               </AlertDialogDescription>
             </AlertDialogHeader>
@@ -409,6 +453,9 @@ export default function ExternalCallConfigsPage() {
           </AlertDialogContent>
         </AlertDialog>
       </div>
+
+      {/* Scroll to Top 버튼 */}
+      <ScrollToTop />
     </div>
   );
 }

frontend/app/(main)/admin/automaticMng/flowMgmtList/page.tsx

@@ -33,7 +33,7 @@ import { cn } from "@/lib/utils";
 import { formatErrorMessage } from "@/lib/utils/errorUtils";
 import { tableManagementApi } from "@/lib/api/tableManagement";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
-import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
+import { ExternalDbConnectionAPI, ExternalDbConnection } from "@/lib/api/externalDbConnection";
 import { ExternalRestApiConnectionAPI, ExternalRestApiConnection } from "@/lib/api/externalRestApiConnection";
 import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 
@@ -56,9 +56,7 @@ export default function FlowManagementPage() {
   const [openTableCombobox, setOpenTableCombobox] = useState(false);
   // 데이터 소스 타입: "internal" (내부 DB), "external_db_숫자" (외부 DB), "restapi_숫자" (REST API)
   const [selectedDbSource, setSelectedDbSource] = useState<string>("internal");
-  const [externalConnections, setExternalConnections] = useState<
+  const [externalConnections, setExternalConnections] = useState<ExternalDbConnection[]>([]);
-    Array<{ id: number; connection_name: string; db_type: string }>
-  >([]);
   const [externalTableList, setExternalTableList] = useState<string[]>([]);
   const [loadingExternalTables, setLoadingExternalTables] = useState(false);
 
@@ -255,7 +253,7 @@ export default function FlowManagementPage() {
           .map((t: string | { tableName?: string; table_name?: string; tablename?: string; name?: string }) =>
             typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name,
           )
-          .filter(Boolean);
+          .filter((v): v is string => Boolean(v));
         setMultiDbTableLists(prev => ({ ...prev, [connectionId]: tableNames }));
       }
     } catch (error) {
@@ -447,7 +445,7 @@ export default function FlowManagementPage() {
       }
 
       console.log("✅ Calling createFlowDefinition with:", requestData);
-      const response = await createFlowDefinition(requestData as Parameters<typeof createFlowDefinition>[0]);
+      const response = await createFlowDefinition(requestData as unknown as Parameters<typeof createFlowDefinition>[0]);
       if (response.success && response.data) {
         toast({
           title: "생성 완료",