마에스트로 상세 화면의 처리 로그 표에 페이지네이션 추가

app/(admin)/maestros/[maestroId]/page.tsx

@@ -6,7 +6,6 @@ import { buttonVariants } from "@/components/ui/button";
 import { getMaestroDetail } from "@/lib/maestros";
 import {
   formatDate,
-  formatDateTime,
   getAccountTypeLabel,
   getActivateStatusLabel,
 } from "@/lib/utils";
@@ -14,6 +13,7 @@ import { MaestroEditForm } from "./MaestroEditForm";
 import { StudentsSection } from "./StudentsSection";
 import { ExtensionRequestsSection } from "./ExtensionRequestsSection";
 import { UpgradeRequestsSection } from "./UpgradeRequestsSection";
+import { LogsSection } from "./LogsSection";
 
 type MaestroDetailPageProps = {
   params: Promise<{
@@ -109,22 +109,7 @@ export default async function MaestroDetailPage({
         />
       </div>
 
-      <section className="rounded-lg border bg-background p-5">
-        <h2 className="text-base font-semibold">처리 로그</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          전체 {detail.counts.logs.toLocaleString()}건 중 최근 30건
-        </p>
-        <SimpleTable
-          emptyText="처리 로그가 없습니다."
-          headers={["LogID", "유형", "처리일시", "내용"]}
-          rows={detail.logs.map((log) => [
-            log.maestroLogID,
-            log.type,
-            formatDateTime(log.logDateTime),
-            log.remark,
-          ])}
-        />
-      </section>
+      <LogsSection maestroID={maestroID} />
     </section>
   );
 }
@@ -137,59 +122,3 @@ function SummaryCard({ label, value }: { label: string; value: string }) {
     </article>
   );
 }
-
-function SimpleTable({
-  headers,
-  rows,
-  emptyText,
-}: {
-  headers: string[];
-  rows: Array<Array<string | number>>;
-  emptyText: string;
-}) {
-  return (
-    <div className="mt-4 overflow-hidden rounded-lg border">
-      <div className="overflow-x-auto">
-        <table className="w-full min-w-[560px] border-collapse text-sm">
-          <thead className="bg-muted/60">
-            <tr className="border-b">
-              {headers.map((header) => (
-                <th
-                  className="h-10 px-3 text-left text-xs font-medium text-muted-foreground"
-                  key={header}
-                >
-                  {header}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {rows.length > 0 ? (
-              rows.map((row, index) => (
-                <tr className="border-b last:border-b-0" key={index}>
-                  {row.map((cell, cellIndex) => (
-                    <td
-                      className="h-11 max-w-[360px] break-words px-3 align-middle"
-                      key={cellIndex}
-                    >
-                      {cell}
-                    </td>
-                  ))}
-                </tr>
-              ))
-            ) : (
-              <tr>
-                <td
-                  className="h-24 px-3 text-center text-sm text-muted-foreground"
-                  colSpan={headers.length}
-                >
-                  {emptyText}
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}