fix: 백엔드 API 응답 구조에 맞게 타입 및 api 함수 수정

app/lib/api.ts

@@ -5,9 +5,8 @@ import type {
   CurrentMetric,
   MetricPoint,
   Ticket,
-  TicketActionLog,
   TicketDetail,
-  UpdateStatusRequest,
+  TicketActionLog,
 } from "./types";
 
 const BASE_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8080/api";
@@ -40,13 +39,6 @@ export async function getPodEvents(
   return data;
 }
 
-export async function getTopology(namespace?: string): Promise<unknown> {
-  const { data } = await api.get("/topology", {
-    params: namespace ? { namespace } : undefined,
-  });
-  return data;
-}
-
 export async function getCurrentMetric(pod: string): Promise<CurrentMetric> {
   const { data } = await api.get("/metrics/current", { params: { pod } });
   return data;
@@ -88,7 +80,12 @@ export async function getTicket(id: number | string): Promise<TicketDetail> {
 
 export async function updateTicketStatus(
   id: number | string,
-  body: UpdateStatusRequest
+  body: {
+    status: string;
+    action: string;
+    memo: string;
+    performedBy: string;
+  }
 ): Promise<Ticket> {
   const { data } = await api.patch(`/tickets/${id}/status`, body);
   return data;

app/lib/types.ts

@@ -45,6 +45,12 @@ export interface TicketMetricSnapshot {
   capturedAt: string;
 }
 
+export interface TicketDetail {
+  ticket: Ticket;
+  metricSnapshot: TicketMetricSnapshot | null;
+  actionLogs: TicketActionLog[];
+}
+
 export interface PodInfo {
   podName: string;
   namespace: string;
@@ -79,16 +85,3 @@ export interface AlertEvent {
   podName: string;
   anomalyType: AnomalyType;
 }
-
-export interface UpdateStatusRequest {
-  status: TicketStatus;
-  action: string;
-  memo: string;
-  performedBy: string;
-}
-
-export interface TicketDetail {
-  ticket: Ticket;
-  metricSnapshot: TicketMetricSnapshot | null;
-  actionLogs: TicketActionLog[];
-}

app/tickets/[id]/page.tsx

@@ -2,10 +2,9 @@
 
 import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import type { Ticket } from "../../lib/types";
+import type { TicketDetail, TicketStatus } from "../../lib/types";
 import { useParams } from "next/navigation";
-import { getTicket, getTicketLogs, updateTicketStatus } from "../../lib/api";
-import type { TicketStatus } from "../../lib/types";
+import { getTicket, updateTicketStatus } from "../../lib/api";
 import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card";
 import {
   Select,
@@ -55,25 +54,24 @@ export default function TicketDetailPage() {
   const [performedBy, setPerformedBy] = useState("");
   const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
 
-  const { data: ticket, isLoading, isError } = useQuery<Ticket>({
+  const { data, isLoading, isError } = useQuery<TicketDetail>({
     queryKey: ["ticket", id],
     queryFn: () => getTicket(id),
   });
 
-  const status = statusOverride ?? ticket?.status ?? "OPEN";
+  const ticket = data?.ticket;
+  const metricSnapshot = data?.metricSnapshot;
+  const actionLogs = data?.actionLogs ?? [];
 
-  const { data: logs } = useQuery({
-    queryKey: ["ticket-logs", id],
-    queryFn: () => getTicketLogs(id),
-  });
+  const status = statusOverride ?? ticket?.status ?? "OPEN";
 
   const mutation = useMutation({
     mutationFn: () =>
       updateTicketStatus(id, { status, action, memo, performedBy }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["ticket", id] });
-      queryClient.invalidateQueries({ queryKey: ["ticket-logs", id] });
       queryClient.invalidateQueries({ queryKey: ["tickets"] });
+      setStatusOverride(null);
       setAction("");
       setMemo("");
       setPerformedBy("");
@@ -191,7 +189,7 @@ export default function TicketDetailPage() {
             <CardContent>
               <div className="grid grid-cols-2 gap-3">
                 {[
-                  { label: "CPU", value: `${ticket.metricValue ?? "-"}%` },
+                  { label: "CPU", value: metricSnapshot ? `${metricSnapshot.cpu}%` : `${ticket.metricValue ?? "-"}%` },
                   { label: "Threshold", value: `${ticket.threshold ?? "-"}%` },
                   { label: "Severity", value: ticket.severity },
                   { label: "Assignee", value: ticket.assigneeName || "-" },
@@ -277,11 +275,11 @@ export default function TicketDetailPage() {
               <CardTitle className="text-sm text-gray-400">조치 이력</CardTitle>
             </CardHeader>
             <CardContent>
-              {!logs || logs.length === 0 ? (
+              {actionLogs.length === 0 ? (
                 <p className="text-sm text-gray-500">이력이 없습니다</p>
               ) : (
                 <ol className="relative border-l border-gray-700 space-y-4 ml-2">
-                  {logs.map((log) => (
+                  {actionLogs.map((log) => (
                     <li key={log.id} className="ml-4">
                       <span className="absolute -left-1.5 mt-1 h-3 w-3 rounded-full bg-blue-500" />
                       <p className="text-xs text-gray-400">

app/tickets/page.tsx

@@ -98,11 +98,6 @@ export default function TicketsPage() {
       ),
   });
 
-  function handleNewTicketBannerClick() {
-    setHasNewTicket(false);
-    refetch();
-  }
-
   return (
     <div className="space-y-4">
       <h1 className="text-2xl font-bold text-white">티켓</h1>