1 files changed, 62 insertions, 0 deletions
diff --git a/lib/compliance/responses/compliance-responses-page-client.tsx b/lib/compliance/responses/compliance-responses-page-client.tsx
new file mode 100644
index 00000000..758d9ed7
--- /dev/null
+++ b/lib/compliance/responses/compliance-responses-page-client.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import * as React from "react";
+import { getComplianceResponsesWithPagination } from "@/lib/compliance/services";
+import { ComplianceResponsesTable } from "./compliance-responses-table";
+import { ComplianceResponseStats } from "./compliance-response-stats";
+
+interface ComplianceResponsesPageClientProps {
+  templateId: number;
+  promises?: Promise<[{ data: any[]; pageCount: number }, any]>;
+  isInfiniteMode: boolean;
+}
+
+export function ComplianceResponsesPageClient({ 
+  templateId, 
+  promises,
+  isInfiniteMode
+}: ComplianceResponsesPageClientProps) {
+  // 페이지네이션 모드 데이터
+  const paginationData = promises ? React.use(promises) : null;
+  const responses = paginationData ? paginationData[0] : { data: [], pageCount: 0 };
+  const stats = paginationData ? paginationData[1] : {
+    inProgress: 0,
+    completed: 0,
+    reviewed: 0,
+    total: 0,
+  };
+
+  const [statusFilter, setStatusFilter] = React.useState<'all' | 'IN_PROGRESS' | 'COMPLETED' | 'REVIEWED'>('all');
+
+  // 필터링된 데이터
+  const filteredData = React.useMemo(() => {
+    if (statusFilter === 'all') {
+      return responses.data;
+    }
+    return responses.data.filter(item => item.status === statusFilter);
+  }, [responses.data, statusFilter]);
+
+  // 통계 카드 클릭 핸들러
+  const handleFilterChange = (filter: 'all' | 'IN_PROGRESS' | 'COMPLETED' | 'REVIEWED') => {
+    setStatusFilter(filter);
+  };
+
+  return (
+    <>
+      {/* 응답 통계 카드 */}
+      <div className="mb-6">
+        <ComplianceResponseStats 
+          stats={stats} 
+          onFilterChange={handleFilterChange}
+          currentFilter={statusFilter}
+        />
+      </div>
+      
+      {/* 응답 테이블 */}
+      <ComplianceResponsesTable 
+        templateId={templateId}
+        promises={Promise.resolve([{ data: filteredData, pageCount: Math.ceil(filteredData.length / 10) }])}
+      />
+    </>
+  );
+}