From c872985f96f6d98d5ba6706af39319201586f0e8 Mon Sep 17 00:00:00 2001
From: SEAN <seonkyu.kim@ta9.co.kr>
Date: Wed, 18 Mar 2026 12:58:14 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=84=9C=EB=B9=84=EC=8A=A4=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(#49)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- service.api.ts: deleteService API 함수 추가 (POST /v1/in/service/delete)
- ServiceHeaderCard: 수정하기 버튼 옆 삭제하기 버튼 추가
- ServiceDetailPage: 삭제 확인 모달 및 핸들러 추가 (삭제 후 목록으로 이동)

Closes #49
---
 react/src/api/service.api.ts                  |  7 ++
 .../service/components/ServiceHeaderCard.tsx  | 25 +++++--
 .../service/pages/ServiceDetailPage.tsx       | 75 ++++++++++++++++++-
 3 files changed, 98 insertions(+), 9 deletions(-)

diff --git a/react/src/api/service.api.ts b/react/src/api/service.api.ts
index 2c397ef..8943de6 100644
--- a/react/src/api/service.api.ts
+++ b/react/src/api/service.api.ts
@@ -79,3 +79,10 @@ export function deleteApns(serviceCode: string) {
     `/v1/in/service/${serviceCode}/apns/delete`,
   );
 }
+
+/** 서비스 삭제 */
+export function deleteService(serviceCode: string) {
+  return apiClient.post<ApiResponse<null>>("/v1/in/service/delete", {
+    service_code: serviceCode,
+  });
+}
diff --git a/react/src/features/service/components/ServiceHeaderCard.tsx b/react/src/features/service/components/ServiceHeaderCard.tsx
index 87f9351..d1b0fac 100644
--- a/react/src/features/service/components/ServiceHeaderCard.tsx
+++ b/react/src/features/service/components/ServiceHeaderCard.tsx
@@ -9,11 +9,13 @@ import { SERVICE_STATUS } from "../types";
 interface ServiceHeaderCardProps {
   service: ServiceDetail;
   onShowApiKey: () => void;
+  onDelete: () => void;
 }
 
 export default function ServiceHeaderCard({
   service,
   onShowApiKey,
+  onDelete,
 }: ServiceHeaderCardProps) {
   return (
     <div className="bg-white border border-gray-200 rounded-lg shadow-sm p-6 mb-6">
@@ -62,13 +64,22 @@ export default function ServiceHeaderCard({
             </div>
           </div>
         </div>
-        <Link
-          to={`/services/${service.serviceCode}/edit`}
-          className="bg-[#2563EB] hover:bg-[#1d4ed8] text-white px-5 py-2.5 rounded text-sm font-medium transition shadow-sm flex items-center gap-2"
-        >
-          <span className="material-symbols-outlined text-base">edit</span>
-          <span>수정하기</span>
-        </Link>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onDelete}
+            className="border border-red-200 text-red-500 hover:bg-red-50 px-5 py-2.5 rounded text-sm font-medium transition flex items-center gap-2"
+          >
+            <span className="material-symbols-outlined text-base">delete</span>
+            <span>삭제하기</span>
+          </button>
+          <Link
+            to={`/services/${service.serviceCode}/edit`}
+            className="bg-[#2563EB] hover:bg-[#1d4ed8] text-white px-5 py-2.5 rounded text-sm font-medium transition shadow-sm flex items-center gap-2"
+          >
+            <span className="material-symbols-outlined text-base">edit</span>
+            <span>수정하기</span>
+          </Link>
+        </div>
       </div>
 
       {/* 메타 정보 */}
diff --git a/react/src/features/service/pages/ServiceDetailPage.tsx b/react/src/features/service/pages/ServiceDetailPage.tsx
index f817d1b..4341f89 100644
--- a/react/src/features/service/pages/ServiceDetailPage.tsx
+++ b/react/src/features/service/pages/ServiceDetailPage.tsx
@@ -1,17 +1,19 @@
 import { useState, useEffect, useCallback } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
+import { toast } from "sonner";
 import PageHeader from "@/components/common/PageHeader";
 import CopyButton from "@/components/common/CopyButton";
 import ServiceHeaderCard from "../components/ServiceHeaderCard";
 import ServiceStatsCards from "../components/ServiceStatsCards";
 import PlatformManagement from "../components/PlatformManagement";
-import { fetchServiceDetail, fetchApiKey } from "@/api/service.api";
+import { fetchServiceDetail, fetchApiKey, deleteService } from "@/api/service.api";
 import { fetchDashboard } from "@/api/dashboard.api";
 import type { ServiceDetail } from "../types";
 import type { DashboardKpi } from "@/features/dashboard/types";
 
 export default function ServiceDetailPage() {
   const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
 
   // 데이터 상태
   const [service, setService] = useState<ServiceDetail | null>(null);
@@ -26,6 +28,10 @@ export default function ServiceDetailPage() {
   const [fullApiKey, setFullApiKey] = useState<string | null>(null);
   const [apiKeyLoading, setApiKeyLoading] = useState(false);
 
+  // 삭제 모달 상태
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
   // 서비스 상세 + 통계 로드
   const loadData = useCallback(async (serviceCode: string) => {
     setLoading(true);
@@ -105,6 +111,21 @@ export default function ServiceDetailPage() {
     setFullApiKey(null);
   };
 
+  // 서비스 삭제
+  const handleDelete = async () => {
+    if (!id) return;
+    setDeleting(true);
+    try {
+      await deleteService(id);
+      toast.success("서비스가 삭제되었습니다.");
+      navigate("/services");
+    } catch {
+      toast.error("서비스 삭제에 실패했습니다.");
+    } finally {
+      setDeleting(false);
+    }
+  };
+
   // 로딩 스켈레톤
   if (loading) {
     return (
@@ -168,6 +189,7 @@ export default function ServiceDetailPage() {
       <ServiceHeaderCard
         service={service}
         onShowApiKey={handleShowApiKey}
+        onDelete={() => setShowDeleteConfirm(true)}
       />
 
       <ServiceStatsCards
@@ -183,6 +205,55 @@ export default function ServiceDetailPage() {
 
       <PlatformManagement service={service} onRefresh={handleRefresh} />
 
+      {/* 삭제 확인 모달 */}
+      {showDeleteConfirm && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center">
+          <div
+            className="absolute inset-0 bg-black/40"
+            onClick={() => setShowDeleteConfirm(false)}
+          />
+          <div className="relative bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 p-6 border border-gray-200">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="size-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
+                <span className="material-symbols-outlined text-red-600 text-xl">
+                  warning
+                </span>
+              </div>
+              <h3 className="text-lg font-bold text-[#0f172a]">서비스 삭제</h3>
+            </div>
+            <p className="text-sm text-[#0f172a] mb-2">
+              <span className="font-semibold">{service.serviceName}</span> 서비스를 삭제하시겠습니까?
+            </p>
+            <div className="bg-red-50 border border-red-200 rounded-lg px-4 py-3 mb-5 flex flex-col gap-1.5">
+              <div className="flex items-center gap-1.5 text-red-700 text-xs font-medium">
+                <span className="material-symbols-outlined flex-shrink-0" style={{ fontSize: "14px" }}>info</span>
+                <span>삭제된 서비스는 복구할 수 없습니다.</span>
+              </div>
+              <div className="flex items-center gap-1.5 text-red-700 text-xs font-medium">
+                <span className="material-symbols-outlined flex-shrink-0" style={{ fontSize: "14px" }}>info</span>
+                <span>해당 서비스의 모든 기기 및 발송 이력이 비활성화됩니다.</span>
+              </div>
+            </div>
+            <div className="flex justify-end gap-3">
+              <button
+                onClick={() => setShowDeleteConfirm(false)}
+                disabled={deleting}
+                className="bg-white border border-gray-300 hover:bg-gray-50 text-[#0f172a] px-5 py-2.5 rounded text-sm font-medium transition disabled:opacity-50"
+              >
+                취소
+              </button>
+              <button
+                onClick={handleDelete}
+                disabled={deleting}
+                className="bg-red-500 hover:bg-red-600 text-white px-5 py-2.5 rounded text-sm font-medium transition shadow-sm disabled:opacity-50"
+              >
+                {deleting ? "삭제 중..." : "삭제"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* API 키 확인 모달 */}
       {showApiKey && (
         <div className="fixed inset-0 z-50 flex items-center justify-center">
-- 
2.45.1