연동 앱 목록 및 편집 페이지 변경

devfront/src/features/clients/ClientGeneralPage.tsx

@@ -16,7 +16,12 @@ import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { Switch } from "../../components/ui/switch";
 import { Textarea } from "../../components/ui/textarea";
-import { createClient, fetchClient, updateClient } from "../../lib/devApi";
+import {
+  createClient,
+  deleteClient,
+  fetchClient,
+  updateClient,
+} from "../../lib/devApi";
 import type {
   ClientStatus,
   ClientType,
@@ -174,6 +179,39 @@ function ClientGeneralPage() {
     },
   });
 
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteClient(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["clients"] });
+      alert(t("msg.dev.clients.deleted", "앱이 삭제되었습니다."));
+      navigate("/clients");
+    },
+    onError: (err) => {
+      const errorMessage =
+        (err as AxiosError<{ error?: string }>).response?.data?.error ??
+        (err as Error)?.message;
+      alert(
+        t("msg.dev.clients.delete_error", "삭제 실패: {{error}}", {
+          error: errorMessage,
+        }),
+      );
+    },
+  });
+
+  const handleDelete = () => {
+    if (
+      clientId &&
+      window.confirm(
+        t(
+          "msg.dev.clients.delete_confirm",
+          "정말로 이 앱을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
+        ),
+      )
+    ) {
+      deleteMutation.mutate(clientId);
+    }
+  };
+
   if (!isCreate && isLoading) {
     return (
       <div className="p-8 text-center">
@@ -220,14 +258,16 @@ function ClientGeneralPage() {
                 : t("ui.dev.clients.general.title_edit", "Client Settings")}
             </h1>
           </div>
-          <Badge
-            variant={status === "active" ? "success" : "muted"}
-            className="px-3 py-1 text-xs uppercase"
-          >
-            {status === "active"
-              ? t("ui.common.status.active", "Active")
-              : t("ui.common.status.inactive", "Inactive")}
-          </Badge>
+          {!isCreate && (
+            <Badge
+              variant={status === "active" ? "success" : "muted"}
+              className="px-3 py-1 text-xs uppercase"
+            >
+              {status === "active"
+                ? t("ui.common.status.active", "Active")
+                : t("ui.common.status.inactive", "Inactive")}
+            </Badge>
+          )}
         </div>
         <div className="flex gap-6 overflow-x-auto border-b border-border pb-3 text-sm font-bold">
           {!isCreate && (
@@ -254,15 +294,49 @@ function ClientGeneralPage() {
 
       {/* 1. Application Identity */}
       <div className="glass-panel p-6">
-        <CardTitle className="text-xl font-bold mb-2">
-          {t("ui.dev.clients.general.identity.title", "Application Identity")}
-        </CardTitle>
-        <CardDescription className="mb-6">
-          {t(
-            "msg.dev.clients.general.identity.subtitle",
-            "앱 이름과 설명, 로고를 설정합니다.",
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <CardTitle className="text-xl font-bold mb-2">
+              {t(
+                "ui.dev.clients.general.identity.title",
+                "Application Identity",
+              )}
+            </CardTitle>
+            <CardDescription>
+              {t(
+                "msg.dev.clients.general.identity.subtitle",
+                "앱 이름과 설명, 로고를 설정합니다.",
+              )}
+            </CardDescription>
+          </div>
+          {!isCreate && (
+            <div className="flex flex-col items-end gap-2">
+              <Label className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+                {t("ui.dev.clients.table.status", "상태")}
+              </Label>
+              <div className="flex items-center gap-3">
+                <Switch
+                  checked={status === "active"}
+                  onCheckedChange={(checked) =>
+                    setStatus(checked ? "active" : "inactive")
+                  }
+                />
+                <span
+                  className={cn(
+                    "text-sm font-medium",
+                    status === "active"
+                      ? "text-emerald-400"
+                      : "text-muted-foreground",
+                  )}
+                >
+                  {status === "active"
+                    ? t("ui.common.status.active", "활성")
+                    : t("ui.common.status.inactive", "비활성")}
+                </span>
+              </div>
+            </div>
           )}
-        </CardDescription>
+        </div>
         <div className="grid gap-8 md:grid-cols-2">
           <div className="space-y-5">
             <div className="space-y-2">
@@ -568,43 +642,41 @@ function ClientGeneralPage() {
         </CardContent>
       </Card>
 
-      <div className="flex items-center justify-end gap-3 border-t border-border pt-4">
-        <Button variant="outline" onClick={() => navigate("/clients")}>
-          {t("ui.common.cancel", "취소")}
-        </Button>
-        <Button
-          onClick={() => mutation.mutate()}
-          disabled={mutation.isPending}
-          className="px-8 shadow-lg shadow-primary/20"
-        >
-          {mutation.isPending
-            ? t("msg.common.saving", "저장 중...")
-            : isCreate
-              ? t("ui.dev.clients.general.create", "클라이언트 생성")
-              : t("ui.dev.clients.general.save", "설정 저장")}
-        </Button>
+      <div className="flex items-center justify-between border-t border-border pt-4">
+        <div>
+          {!isCreate && (
+            <Button
+              variant="destructive"
+              className="gap-2"
+              onClick={handleDelete}
+              disabled={deleteMutation.isPending}
+            >
+              <Trash2 className="h-4 w-4" />
+              {deleteMutation.isPending
+                ? t("msg.common.requesting", "요청 중...")
+                : t("ui.common.delete", "삭제")}
+            </Button>
+          )}
+        </div>
+        <div className="flex items-center gap-3">
+          <Button variant="outline" onClick={() => navigate("/clients")}>
+            {t("ui.common.cancel", "취소")}
+          </Button>
+          <Button
+            onClick={() => mutation.mutate()}
+            disabled={mutation.isPending}
+            className="px-8 shadow-lg shadow-primary/20"
+          >
+            {mutation.isPending
+              ? t("msg.common.saving", "저장 중...")
+              : isCreate
+                ? t("ui.dev.clients.general.create", "클라이언트 생성")
+                : t("ui.dev.clients.general.save", "설정 저장")}
+          </Button>
+        </div>
       </div>
 
-      {!isCreate && (
-        <div className="glass-panel flex flex-wrap gap-x-12 gap-y-4 p-4 opacity-70">
-          <div className="space-y-1">
-            <span className="text-xs font-semibold uppercase text-muted-foreground">
-              {t("ui.dev.clients.general.footer.client_id", "Client ID")}
-            </span>
-            <span className="font-mono text-sm block">{data?.client?.id}</span>
-          </div>
-          <div className="space-y-1">
-            <span className="text-xs font-semibold uppercase text-muted-foreground">
-              {t("ui.dev.clients.general.footer.created_on", "Created On")}
-            </span>
-            <span className="text-sm text-muted-foreground block">
-              {data?.client?.createdAt
-                ? new Date(data.client.createdAt).toLocaleString()
-                : "-"}
-            </span>
-          </div>
-        </div>
-      )}
+
     </div>
   );
 }