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

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>
   );
 }

devfront/src/features/clients/ClientsPage.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import {
   BookOpenText,
@@ -22,10 +22,8 @@ import {
   CardHeader,
   CardTitle,
 } from "../../components/ui/card";
-import { CopyButton } from "../../components/ui/copy-button";
 import { Input } from "../../components/ui/input";
 import { Separator } from "../../components/ui/separator";
-import { Switch } from "../../components/ui/switch";
 import {
   Table,
   TableBody,
@@ -34,56 +32,16 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
-import { toast } from "../../components/ui/use-toast";
-import {
-  deleteClient,
-  fetchClients,
-  updateClientStatus,
-} from "../../lib/devApi";
+import { fetchClients } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
 import { cn } from "../../lib/utils";
 
 function ClientsPage() {
   const navigate = useNavigate();
-  const queryClient = useQueryClient();
   const { data, isLoading, error } = useQuery({
     queryKey: ["clients"],
     queryFn: fetchClients,
   });
-  const updateStatusMutation = useMutation({
-    mutationFn: (payload: { id: string; status: "active" | "inactive" }) =>
-      updateClientStatus(payload.id, payload.status),
-    onSuccess: (_, variables) => {
-      const statusText =
-        variables.status === "active"
-          ? t("ui.common.status.active", "활성화")
-          : t("ui.common.status.inactive", "비활성화");
-      toast(
-        t(
-          "msg.dev.clients.status_updated",
-          "클라이언트가 {{status}}되었습니다.",
-          {
-            status: statusText,
-          },
-        ),
-      );
-      queryClient.invalidateQueries({ queryKey: ["clients"] });
-    },
-    onError: (error: AxiosError<{ error?: string }>) => {
-      const errMsg =
-        error.response?.data?.error ??
-        error.message ??
-        t(
-          "msg.dev.clients.status_update_error",
-          "Failed to update client status",
-        );
-      toast(errMsg, "error");
-    },
-  });
-  const deleteMutation = useMutation({
-    mutationFn: (clientId: string) => deleteClient(clientId),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["clients"] }),
-  });
 
   const clients = data?.items || [];
   const totalClients = clients.length;
@@ -267,7 +225,10 @@ function ClientsPage() {
               {clients.map((client) => (
                 <TableRow key={client.id} className="bg-card/40">
                   <TableCell>
-                    <div className="flex items-center gap-3">
+                    <Link
+                      to={`/clients/${client.id}`}
+                      className="flex items-center gap-3 transition-colors hover:text-primary"
+                    >
                       <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
                         {client.type === "private" ? (
                           <ServerCog className="h-4 w-4" />
@@ -284,30 +245,13 @@ function ClientsPage() {
                           {t("ui.dev.clients.tenant_scoped", "Tenant-scoped")}
                         </p>
                       </div>
-                    </div>
+                    </Link>
                   </TableCell>
                   <TableCell>
                     <div className="flex items-center gap-2">
                       <code className="rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground">
                         {client.id}
                       </code>
-                      <CopyButton
-                        value={client.id}
-                        variant="ghost"
-                        className="h-8 w-8 text-muted-foreground hover:text-primary"
-                        aria-label={t(
-                          "ui.dev.clients.copy_client_id",
-                          "Copy client id",
-                        )}
-                        onCopy={() =>
-                          toast(
-                            t(
-                              "msg.dev.clients.copy_client_id",
-                              "클라이언트 ID가 복사되었습니다.",
-                            ),
-                          )
-                        }
-                      />
                     </div>
                   </TableCell>
                   <TableCell>
@@ -320,33 +264,14 @@ function ClientsPage() {
                     </Badge>
                   </TableCell>
                   <TableCell>
-                    <div className="flex items-center gap-3">
-                      <Switch
-                        disabled={
-                          updateStatusMutation.isPending &&
-                          updateStatusMutation.variables?.id === client.id
-                        }
-                        checked={client.status === "active"}
-                        onCheckedChange={(checked) =>
-                          updateStatusMutation.mutate({
-                            id: client.id,
-                            status: checked ? "active" : "inactive",
-                          })
-                        }
-                      />
-                      <span
-                        className={cn(
-                          "text-sm font-medium",
-                          client.status === "active"
-                            ? "text-emerald-400"
-                            : "text-muted-foreground",
-                        )}
-                      >
-                        {client.status === "active"
-                          ? t("ui.common.status.active", "활성")
-                          : t("ui.common.status.inactive", "비활성")}
-                      </span>
-                    </div>
+                    <Badge
+                      variant={client.status === "active" ? "success" : "muted"}
+                      className="px-3 py-1 text-xs uppercase"
+                    >
+                      {client.status === "active"
+                        ? t("ui.common.status.active", "Active")
+                        : t("ui.common.status.inactive", "Inactive")}
+                    </Badge>
                   </TableCell>
                   <TableCell className="text-muted-foreground">
                     {client.createdAt
@@ -357,17 +282,9 @@ function ClientsPage() {
                     <div className="flex items-center justify-end gap-2">
                       <Button variant="ghost" size="sm" asChild>
                         <Link to={`/clients/${client.id}`}>
-                          {t("ui.common.edit", "Edit")}
+                          {t("ui.common.view", "View")}
                         </Link>
                       </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="text-muted-foreground hover:text-destructive"
-                        onClick={() => deleteMutation.mutate(client.id)}
-                      >
-                        {t("ui.common.delete", "Delete")}
-                      </Button>
                     </div>
                   </TableCell>
                 </TableRow>