클라이언트 관리 페이지 ui/ux 수정

.gitignore

@@ -1,5 +1,6 @@
 # General
 .env
+.temp
 .DS_Store
 .idea/
 .vscode/

devfront/src/features/clients/ClientConsentsPage.tsx

@@ -109,7 +109,7 @@ function ClientConsentsPage() {
             to={`/clients/${clientId}`}
             className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
           >
-            Overview
+            Connection
           </Link>
           <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
             Consent &amp; Users

devfront/src/features/clients/ClientDetailsPage.tsx

@@ -1,10 +1,10 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { AlertCircle, Copy, Eye, Link2, Shield, Workflow } from "lucide-react";
+import { AlertCircle, Copy, Eye, Link2, Shield, Workflow, Save } from "lucide-react";
 import { Link, useParams } from "react-router-dom";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
-import { Card, CardContent } from "../../components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../components/ui/card";
 import { Separator } from "../../components/ui/separator";
 import {
   Table,
@@ -12,17 +12,47 @@ import {
   TableCell,
   TableRow,
 } from "../../components/ui/table";
-import { fetchClient } from "../../lib/devApi";
+import { Textarea } from "../../components/ui/textarea";
+import { Label } from "../../components/ui/label";
+import { fetchClient, updateClient } from "../../lib/devApi";
+import { useState, useEffect } from "react";
 
 function ClientDetailsPage() {
   const params = useParams();
+  const queryClient = useQueryClient();
   const clientId = params.id ?? "";
+  
   const { data, isLoading, error } = useQuery({
     queryKey: ["client", clientId],
     queryFn: () => fetchClient(clientId),
     enabled: clientId.length > 0,
   });
 
+  const [redirectUris, setRedirectUris] = useState("");
+
+  useEffect(() => {
+    if (data?.client?.redirectUris) {
+      setRedirectUris(data.client.redirectUris.join(", "));
+    }
+  }, [data]);
+
+  const mutation = useMutation({
+    mutationFn: () => {
+      const uriList = redirectUris
+        .split(",")
+        .map((u) => u.trim())
+        .filter(Boolean);
+      return updateClient(clientId, { redirectUris: uriList });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["client", clientId] });
+      alert("Redirect URIs가 저장되었습니다.");
+    },
+    onError: (err) => {
+      alert(`저장 실패: ${(err as Error).message}`);
+    },
+  });
+
   if (!clientId) {
     return <div className="p-8 text-center">Client ID가 필요합니다.</div>;
   }
@@ -81,7 +111,7 @@ function ClientDetailsPage() {
             to={`/clients/${clientId}`}
             className="border-b-2 border-primary pb-3 text-sm font-bold text-primary"
           >
-            Overview
+            Connection
           </Link>
           <Link
             to={`/clients/${clientId}/consents`}
@@ -104,118 +134,141 @@ function ClientDetailsPage() {
         </div>
       </div>
 
-      <div className="space-y-4">
-        <h2 className="text-xl font-bold">클라이언트 자격 증명</h2>
-        <Card className="glass-panel">
-          <CardContent className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-            <div>
-              <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
-                Client ID
-              </p>
-              <p className="font-mono text-lg">{data.client.id}</p>
-            </div>
-            <Button variant="secondary" className="gap-2">
-              <Copy className="h-4 w-4" />
-              ID 복사
-            </Button>
-          </CardContent>
-        </Card>
-
-        <Card className="glass-panel">
-          <CardContent className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-            <div>
-              <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
-                Client Secret
-              </p>
-              <p className="font-mono text-lg tracking-widest">
-                ••••••••••••••••
-              </p>
-            </div>
-            <div className="flex flex-wrap gap-2">
-              <Button variant="secondary" className="gap-2">
-                <Eye className="h-4 w-4" />
-                보기
-              </Button>
-              <Button variant="secondary" className="gap-2">
-                <Copy className="h-4 w-4" />
-                복사
-              </Button>
-              <Button
-                variant="outline"
-                className="gap-2 border-amber-500/50 text-amber-500"
-              >
-                <AlertCircle className="h-4 w-4" />
-                비밀키 재발행
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <h2 className="text-xl font-bold">OIDC 엔드포인트</h2>
-          <Badge variant="muted" className="gap-1">
-            <Link2 className="h-3 w-3" />
-            읽기 전용
-          </Badge>
-        </div>
-        <Card className="glass-panel">
-          <Table>
-            <TableBody>
-              {endpoints.map((endpoint) => (
-                <TableRow key={endpoint.label} className="border-border/70">
-                  <TableCell className="w-1/3">
-                    <p className="text-xs font-bold uppercase tracking-[0.12em] text-muted-foreground">
-                      {endpoint.label}
-                    </p>
-                  </TableCell>
-                  <TableCell className="flex items-center justify-between gap-3">
-                    <span className="break-all font-mono text-sm">
-                      {endpoint.value}
-                    </span>
-                    <Button
-                      variant="secondary"
-                      size="icon"
-                      className="h-8 w-8"
-                      aria-label={`${endpoint.label} 복사`}
-                    >
+      <div className="grid gap-8 lg:grid-cols-2">
+        <div className="space-y-6">
+          <div className="space-y-4">
+            <h2 className="text-xl font-bold">클라이언트 자격 증명</h2>
+            <Card className="glass-panel">
+              <CardContent className="flex flex-col gap-4 p-6">
+                <div>
+                  <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
+                    Client ID
+                  </p>
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="font-mono text-lg truncate">{data.client.id}</p>
+                    <Button variant="secondary" size="icon" className="shrink-0" onClick={() => navigator.clipboard.writeText(data.client.id)}>
                       <Copy className="h-4 w-4" />
                     </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </Card>
-      </div>
+                  </div>
+                </div>
 
-      <div className="glass-panel p-6 opacity-80">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/15 text-primary">
-              <Shield className="h-6 w-6" />
-            </div>
-            <div>
-              <p className="text-lg font-semibold">보안 메모</p>
-              <p className="text-sm text-muted-foreground">
-                엔드포인트는 읽기 전용으로 유지하고, 비밀키 재발행/복사는 감사
-                로그와 연계하세요.
-              </p>
-            </div>
+                <Separator />
+
+                <div>
+                  <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
+                    Client Secret
+                  </p>
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="font-mono text-lg tracking-widest">••••••••••••••••</p>
+                    <div className="flex gap-2 shrink-0">
+                      <Button variant="secondary" size="icon">
+                        <Eye className="h-4 w-4" />
+                      </Button>
+                      <Button variant="outline" size="icon" className="border-amber-500/50 text-amber-500">
+                        <AlertCircle className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
           </div>
-          <div className="hidden items-center gap-2 md:flex">
-            <Badge variant="outline" className="gap-1">
-              <Workflow className="h-4 w-4" />
-              감사 이벤트 필요
-            </Badge>
+
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <h2 className="text-xl font-bold">OIDC 엔드포인트</h2>
+              <Badge variant="muted" className="gap-1">
+                <Link2 className="h-3 w-3" />
+                읽기 전용
+              </Badge>
+            </div>
+            <Card className="glass-panel">
+              <Table>
+                <TableBody>
+                  {endpoints.map((endpoint) => (
+                    <TableRow key={endpoint.label} className="border-border/70">
+                      <TableCell className="w-1/3">
+                        <p className="text-xs font-bold uppercase tracking-[0.12em] text-muted-foreground">
+                          {endpoint.label}
+                        </p>
+                      </TableCell>
+                      <TableCell className="flex items-center justify-between gap-3">
+                        <span className="break-all font-mono text-sm">
+                          {endpoint.value}
+                        </span>
+                        <Button
+                          variant="secondary"
+                          size="icon"
+                          className="h-8 w-8 shrink-0"
+                          onClick={() => navigator.clipboard.writeText(endpoint.value)}
+                        >
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </Card>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <div className="space-y-4">
+            <h2 className="text-xl font-bold">리디렉션 URI 설정</h2>
+            <Card className="glass-panel border-primary/20">
+              <CardHeader>
+                <CardTitle className="text-lg">Redirect URIs</CardTitle>
+                <CardDescription>
+                  인증 성공 후 사용자를 리다이렉트할 허용된 URL 목록입니다. 콤마(,)로 구분하여 여러 개 입력할 수 있습니다.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="redirect-uris" className="text-sm font-semibold">인증 콜백 URL</Label>
+                  <Textarea
+                    id="redirect-uris"
+                    placeholder="https://your-app.com/callback, http://localhost:3000/auth/callback"
+                    rows={5}
+                    value={redirectUris}
+                    onChange={(e) => setRedirectUris(e.target.value)}
+                    className="font-mono text-sm"
+                  />
+                </div>
+                <Button 
+                  className="w-full gap-2" 
+                  onClick={() => mutation.mutate()}
+                  disabled={mutation.isPending}
+                >
+                  <Save className="h-4 w-4" />
+                  {mutation.isPending ? "저장 중..." : "Redirect URIs 저장"}
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="glass-panel p-6 opacity-80">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/15 text-primary">
+                  <Shield className="h-6 w-6" />
+                </div>
+                <div>
+                  <p className="text-lg font-semibold">보안 메모</p>
+                  <p className="text-sm text-muted-foreground">
+                    엔드포인트는 읽기 전용으로 유지하고, 비밀키 재발행/복사는 감사
+                    로그와 연계하세요.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <Separator className="my-4" />
+            <p className="text-sm text-muted-foreground">
+              비밀키 재발행 작업에는 관리자 세션 TTL 확인과 레이트리밋, 알림 연동을
+              권장합니다.
+            </p>
           </div>
         </div>
-        <Separator className="my-4" />
-        <p className="text-sm text-muted-foreground">
-          비밀키 재발행 작업에는 관리자 세션 TTL 확인과 레이트리밋, 알림 연동을
-          권장합니다.
-        </p>
       </div>
     </div>
   );

devfront/src/features/clients/ClientGeneralPage.tsx

@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { Info, Search, Shield, Sparkles, Upload } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { Info, Search, Shield, Sparkles, Upload, Plus, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
@@ -16,10 +16,18 @@ import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { Separator } from "../../components/ui/separator";
 import { Textarea } from "../../components/ui/textarea";
+import { Switch } from "../../components/ui/switch";
 import { createClient, fetchClient, updateClient } from "../../lib/devApi";
 import type { ClientStatus, ClientType } from "../../lib/devApi";
 import { cn } from "../../lib/utils";
 
+interface ScopeItem {
+  id: string;
+  name: string;
+  description: string;
+  mandatory: boolean;
+}
+
 function ClientGeneralPage() {
   const params = useParams();
   const navigate = useNavigate();
@@ -38,59 +46,73 @@ function ClientGeneralPage() {
   const [clientType, setClientType] = useState<ClientType>("confidential");
   const [status, setStatus] = useState<ClientStatus>("active");
   const [redirectUris, setRedirectUris] = useState("");
-  const [scopes, setScopes] = useState("openid profile email");
+  const [scopes, setScopes] = useState<ScopeItem[]>([
+    { id: "1", name: "openid", description: "OIDC 인증 필수 스코프", mandatory: true },
+    { id: "2", name: "profile", description: "기본 프로필 정보 접근", mandatory: false },
+    { id: "3", name: "email", description: "이메일 주소 접근", mandatory: false },
+  ]);
 
   useEffect(() => {
-    if (!data) {
-      return;
+    if (!data) return;
+    const { client } = data;
+    setName(client.name || client.id);
+    setClientType(client.type);
+    setStatus(client.status);
+    
+    const metadata = client.metadata ?? {};
+    if (typeof metadata.description === "string") setDescription(metadata.description);
+    if (typeof metadata.logo_url === "string") setLogoUrl(metadata.logo_url);
+
+    // Metadata에 저장된 구조화된 scope 정보가 있으면 사용, 없으면 기본 scopes 문자열에서 생성
+    const savedScopes = metadata.structured_scopes as ScopeItem[] | undefined;
+    if (savedScopes && Array.isArray(savedScopes)) {
+      setScopes(savedScopes);
     }
-    setName(data.client.name || data.client.id);
-    setClientType(data.client.type);
-    setStatus(data.client.status);
-    setRedirectUris(data.client.redirectUris.join(", "));
-    setScopes(data.client.scopes.join(" "));
-    const metadata = data.client.metadata ?? {};
-    if (typeof metadata.description === "string") {
-      setDescription(metadata.description);
-    }
-    if (typeof metadata.logo_url === "string") {
-      setLogoUrl(metadata.logo_url);
+    else {
+      setScopes(client.scopes.map((s, idx) => ({
+        id: String(idx + 1),
+        name: s,
+        description: "",
+        mandatory: s === "openid"
+      })));
     }
   }, [data]);
 
-  const redirectUriList = useMemo(
-    () =>
-      redirectUris
-        .split(",")
-        .map((value) => value.trim())
-        .filter(Boolean),
-    [redirectUris],
-  );
-  const scopeList = useMemo(
-    () =>
-      scopes
-        .split(/[,\s]+/)
-        .map((value) => value.trim())
-        .filter(Boolean),
-    [scopes],
-  );
+  const addScope = () => {
+    const newId = String(Date.now());
+    setScopes([...scopes, { id: newId, name: "", description: "", mandatory: false }]);
+  };
+
+  const updateScope = (id: string, field: keyof ScopeItem, value: any) => {
+    setScopes(scopes.map(s => s.id === id ? { ...s, [field]: value } : s));
+  };
+
+  const removeScope = (id: string) => {
+    setScopes(scopes.filter(s => s.id !== id));
+  };
 
   const mutation = useMutation({
     mutationFn: async () => {
-      const payload = {
+      const scopeNames = scopes.map(s => s.name).filter(Boolean);
+      const payload: any = {
         name,
         type: clientType,
         status,
-        redirectUris: redirectUriList,
-        scopes: scopeList,
+        scopes: scopeNames,
         metadata: {
           description,
           logo_url: logoUrl,
+          structured_scopes: scopes // 향후 보존을 위해 metadata에 저장
         },
       };
+
+      // 생성 시에는 Redirect URIs를 포함해서 전송
       if (isCreate) {
+        payload.redirectUris = redirectUris.split(",").map(u => u.trim()).filter(Boolean);
         return createClient(payload);
       }
+      
+      // 수정 시에는 Redirect URIs는 별도 탭에서 관리하므로 제외 (빈 배열이나 undefined로 보내지 않음)
       return updateClient(clientId as string, payload);
     },
     onSuccess: (result) => {
@@ -98,29 +120,17 @@ function ClientGeneralPage() {
       if (result?.client?.id) {
         navigate(`/clients/${result.client.id}/settings`);
       }
+      alert("설정이 저장되었습니다.");
     },
   });
 
-  if (!isCreate && isLoading) {
-    return <div className="p-8 text-center">Loading client...</div>;
-  }
-
+  if (!isCreate && isLoading) return <div className="p-8 text-center">Loading client...</div>;
   if (!isCreate && (error || !data)) {
-    const errMsg =
-      (error as AxiosError<{ error?: string }>).response?.data?.error ??
-      (error as Error)?.message;
-    return (
-      <div className="p-8 text-center text-red-500">
-        Error loading client: {errMsg || "unknown error"}
-      </div>
-    );
+    const errMsg = (error as AxiosError<{ error?: string }>).response?.data?.error ?? (error as Error)?.message;
+    return <div className="p-8 text-center text-red-500">Error loading client: {errMsg || "unknown error"}</div>;
   }
 
-  const displayName = isCreate
-    ? "새 클라이언트"
-    : data?.client?.name || data?.client?.id;
-  const createdAt = data?.client?.createdAt;
-  const updatedAt = undefined;
+  const displayName = isCreate ? "새 클라이언트" : data?.client?.name || data?.client?.id;
 
   return (
     <div className="space-y-8">
@@ -128,252 +138,171 @@ function ClientGeneralPage() {
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div className="space-y-2">
             <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-              <Link to="/clients" className="text-primary hover:underline">
-                Applications
-              </Link>
+              <Link to="/clients" className="text-primary hover:underline">Applications</Link>
               <span>/</span>
               <span className="text-foreground">{displayName}</span>
             </div>
-            <div>
-              <p className="text-3xl font-black leading-tight">
-                {isCreate ? "Create Client" : "Client Details"}
-              </p>
-              <p className="text-muted-foreground">
-                RP 설정과 메타데이터를 관리합니다.
-              </p>
-            </div>
-          </div>
-          <div className="flex items-center gap-3">
-            <Badge
-              variant={status === "active" ? "success" : "muted"}
-              className="px-3 py-1 text-xs uppercase"
-            >
-              {status === "active" ? "Active" : "Inactive"}
-            </Badge>
+            <h1 className="text-3xl font-black leading-tight">{isCreate ? "Create Client" : "Client Settings"}</h1>
           </div>
+          <Badge variant={status === "active" ? "success" : "muted"} className="px-3 py-1 text-xs uppercase">
+            {status === "active" ? "Active" : "Inactive"}
+          </Badge>
         </div>
         <div className="flex gap-6 overflow-x-auto border-b border-border pb-3 text-sm font-bold">
           {!isCreate && (
             <>
-              <Link
-                to={`/clients/${clientId}`}
-                className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
-              >
-                Overview
-              </Link>
-              <Link
-                to={`/clients/${clientId}/consents`}
-                className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
-              >
-                Consent &amp; Users
-              </Link>
-              <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
-                Settings
-              </span>
-              <Link
-                to={`/clients/${clientId}/federation`}
-                className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
-              >
-                Federation
-              </Link>
+              <Link to={`/clients/${clientId}`} className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground">Connection</Link>
+              <Link to={`/clients/${clientId}/consents`} className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground">Consent &amp; Users</Link>
+              <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">Settings</span>
+              <Link to={`/clients/${clientId}/federation`} className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground">Federation</Link>
             </>
           )}
         </div>
       </header>
 
+      {/* 1. Application Identity */}
       <div className="glass-panel p-6">
-        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4">
-          <div>
-            <CardTitle className="text-xl font-bold">
-              Application Identity
-            </CardTitle>
-            <CardDescription>
-              앱 이름과 설명, 로고를 설정합니다. 필수 필드는 * 로 표시됩니다.
-            </CardDescription>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="flex h-10 items-center rounded-lg border border-input bg-secondary/50 px-3 text-sm text-muted-foreground">
-              <Search className="mr-2 h-4 w-4" />
-              Search
-            </div>
-            <div className="h-10 w-10 overflow-hidden rounded-full border border-border bg-muted/40">
-              <img
-                className="h-full w-full object-cover"
-                alt="앱 로고"
-                src="https://lh3.googleusercontent.com/aida-public/AB6AXuBFGWfyQ8ZzHXZmha91pG-09N58hcUap10-bU30aIf_CpfOqm8fPIv6j2v_BVGaJMF2gABxv_hnEXUCBvmjZeFpr-c76uC1QQkgMwsdkc2Im0gqS5X1c8sCWLZudDydZo5m7XW-QW1nRSZHYE5XzTqrW2ITgruSa7eC2Oe9RtxeVFCrqcHw3RO3h0WLtyJ8yhkkeZrAyBc4UQtpcL5bhBDSdlUNgw0odf12Mk6oNojf7Rcg4HPnywh6C-mUtJd-UfX7Y3Yv_W704T1a"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="grid gap-8 pt-6 md:grid-cols-2">
+        <CardTitle className="text-xl font-bold mb-2">Application Identity</CardTitle>
+        <CardDescription className="mb-6">앱 이름과 설명, 로고를 설정합니다.</CardDescription>
+        <div className="grid gap-8 md:grid-cols-2">
           <div className="space-y-5">
             <div className="space-y-2">
-              <Label className="flex items-center gap-1 text-sm font-semibold">
-                앱 이름 <span className="text-destructive">*</span>
-              </Label>
-              <Input value={name} onChange={(e) => setName(e.target.value)} />
+              <Label className="text-sm font-semibold">앱 이름 <span className="text-destructive">*</span></Label>
+              <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="My Awesome Application" />
             </div>
             <div className="space-y-2">
               <Label className="text-sm font-semibold">Description</Label>
-              <Textarea
-                rows={3}
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-              />
+              <Textarea rows={3} value={description} onChange={(e) => setDescription(e.target.value)} placeholder="앱에 대한 간단한 설명을 입력하세요." />
             </div>
           </div>
-
           <div className="space-y-2">
             <Label className="text-sm font-semibold">App Logo URL</Label>
             <div className="flex gap-4">
               <div className="flex-1 space-y-2">
-                <Input
-                  value={logoUrl}
-                  onChange={(e) => setLogoUrl(e.target.value)}
-                />
-                <p className="text-xs text-muted-foreground">
-                  PNG/SVG URL을 입력하세요.
-                </p>
+                <Input value={logoUrl} onChange={(e) => setLogoUrl(e.target.value)} placeholder="https://example.com/logo.png" />
+                <p className="text-xs text-muted-foreground">인증 화면에 표시될 PNG/SVG URL입니다.</p>
               </div>
-              <div className="flex h-20 w-20 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-border bg-muted/40">
-                <Upload className="h-5 w-5 text-muted-foreground" />
+              <div className="flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/40 shrink-0">
+                {logoUrl ? <img src={logoUrl} alt="Logo Preview" className="h-full w-full object-contain" /> : <Upload className="h-5 w-5 text-muted-foreground" />}
               </div>
             </div>
           </div>
         </div>
       </div>
 
+      {/* 2. Scopes (Moved up and upgraded) */}
       <Card className="glass-panel">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-xl font-bold">보안 설정</CardTitle>
-          <CardDescription>
-            클라이언트 유형을 선택하세요. 비밀키를 안전하게 보관할 수 없는 경우
-            Public을 선택합니다.
-          </CardDescription>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+          <div>
+            <CardTitle className="text-xl font-bold">Scopes</CardTitle>
+            <CardDescription>이 클라이언트가 요청할 수 있는 권한 범위를 정의합니다.</CardDescription>
+          </div>
+          <Button variant="outline" size="sm" onClick={addScope} className="gap-2">
+            <Plus className="h-4 w-4" /> Scope 추가
+          </Button>
         </CardHeader>
-        <CardContent className="space-y-4">
-          <Label className="flex items-center gap-2 text-base font-semibold">
-            Client Type
-            <Info className="h-4 w-4 text-muted-foreground" />
-          </Label>
-          <div className="grid gap-4 md:grid-cols-2">
-            <label
-              className={cn(
-                "relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition",
-                clientType === "confidential"
-                  ? "border-primary bg-primary/5"
-                  : "border-border bg-card hover:border-muted-foreground/40",
-              )}
-            >
-              <input
-                className="sr-only"
-                type="radio"
-                name="client-type"
-                checked={clientType === "confidential"}
-                onChange={() => setClientType("confidential")}
+        <CardContent className="space-y-6">
+          {/* Create 모드일 때만 Redirect URIs 입력 필드 표시 */}
+          {isCreate && (
+            <div className="space-y-2 border-b border-border pb-6 mb-6">
+              <Label className="text-sm font-semibold">Redirect URIs <span className="text-destructive">*</span></Label>
+              <Textarea 
+                value={redirectUris} 
+                onChange={(e) => setRedirectUris(e.target.value)} 
+                placeholder="https://app.example.com/callback, http://localhost:3000/auth/callback (콤마로 구분)" 
+                className="font-mono text-sm"
               />
-              <span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
-                <Shield className="h-4 w-4 text-primary" />
-                Confidential
-              </span>
-              <span className="text-sm text-muted-foreground">
-                서버 사이드 앱(예: Node.js, Java)처럼 비밀키를 안전하게 보관
-                가능.
-              </span>
-              <span className="absolute right-4 top-4 text-primary">✓</span>
-            </label>
+              <p className="text-xs text-muted-foreground">인증 후 리다이렉트될 URI를 입력하세요. 생성 후 Connection 탭에서 수정 가능합니다.</p>
+            </div>
+          )}
 
-            <label
-              className={cn(
-                "relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition",
-                clientType === "public"
-                  ? "border-primary bg-primary/5"
-                  : "border-border bg-card hover:border-muted-foreground/40",
-              )}
-            >
-              <input
-                className="sr-only"
-                type="radio"
-                name="client-type"
-                checked={clientType === "public"}
-                onChange={() => setClientType("public")}
-              />
-              <span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
-                <Sparkles className="h-4 w-4" />
-                Public
-              </span>
-              <span className="text-sm text-muted-foreground">
-                SPA/모바일 앱처럼 비밀키 보관이 어려운 경우. PKCE를 기본
-                적용하세요.
-              </span>
-            </label>
+          <div className="rounded-md border border-border overflow-hidden">
+            <table className="w-full text-sm">
+              <thead className="bg-muted/50 border-b border-border text-xs uppercase tracking-wider text-muted-foreground">
+                <tr>
+                  <th className="px-4 py-3 text-left font-bold">Scope Name</th>
+                  <th className="px-4 py-3 text-left font-bold">Description</th>
+                  <th className="px-4 py-3 text-center font-bold">Mandatory</th>
+                  <th className="px-4 py-3 text-right"></th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border">
+                {scopes.map((s) => (
+                  <tr key={s.id} className="hover:bg-muted/30 transition-colors">
+                    <td className="px-4 py-3">
+                      <Input value={s.name} onChange={(e) => updateScope(s.id, "name", e.target.value)} className="h-8 font-mono text-xs" placeholder="e.g. profile" />
+                    </td>
+                    <td className="px-4 py-3">
+                      <Input value={s.description} onChange={(e) => updateScope(s.id, "description", e.target.value)} className="h-8 text-xs" placeholder="권한에 대한 설명" />
+                    </td>
+                    <td className="px-4 py-3 text-center">
+                      <div className="flex justify-center">
+                        <Switch checked={s.mandatory} onCheckedChange={(checked) => updateScope(s.id, "mandatory", checked)} />
+                      </div>
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      <Button variant="ghost" size="icon" onClick={() => removeScope(s.id)} className="h-8 w-8 text-muted-foreground hover:text-destructive">
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+                {scopes.length === 0 && (
+                  <tr>
+                    <td colSpan={4} className="px-4 py-8 text-center text-muted-foreground">등록된 스코프가 없습니다.</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
           </div>
         </CardContent>
       </Card>
 
+      {/* 3. Security Settings (Moved down) */}
       <Card className="glass-panel">
         <CardHeader className="pb-3">
-          <CardTitle className="text-xl font-bold">
-            Redirect URIs & Scopes
-          </CardTitle>
-          <CardDescription>
-            리다이렉트 URI는 콤마로 구분합니다. 스코프는 공백 또는 콤마로 입력할
-            수 있습니다.
-          </CardDescription>
+          <CardTitle className="text-xl font-bold">보안 설정</CardTitle>
+          <CardDescription>클라이언트 유형을 선택하세요. 보안 수준에 따라 인증 방식이 달라집니다.</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <Label className="text-sm font-semibold">Redirect URIs *</Label>
-            <Input
-              value={redirectUris}
-              onChange={(e) => setRedirectUris(e.target.value)}
-              placeholder="https://app.example.com/callback, https://app.example.com/redirect"
-            />
-          </div>
-          <div className="space-y-2">
-            <Label className="text-sm font-semibold">Scopes</Label>
-            <Input
-              value={scopes}
-              onChange={(e) => setScopes(e.target.value)}
-              placeholder="openid profile email"
-            />
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className={cn("relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition", clientType === "confidential" ? "border-primary bg-primary/5" : "border-border bg-card hover:border-muted-foreground/40")}>
+              <input className="sr-only" type="radio" name="client-type" checked={clientType === "confidential"} onChange={() => setClientType("confidential")} />
+              <span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
+                <Shield className="h-4 w-4 text-primary" /> Confidential
+              </span>
+              <span className="text-xs text-muted-foreground">서버 사이드 앱(예: Node.js, Java)처럼 비밀키를 안전하게 보관 가능한 경우.</span>
+              <span className="absolute right-4 top-4 text-primary">{clientType === "confidential" ? "✓" : ""}</span>
+            </label>
+
+            <label className={cn("relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition", clientType === "public" ? "border-primary bg-primary/5" : "border-border bg-card hover:border-muted-foreground/40")}>
+              <input className="sr-only" type="radio" name="client-type" checked={clientType === "public"} onChange={() => setClientType("public")} />
+              <span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
+                <Sparkles className="h-4 w-4" /> Public
+              </span>
+              <span className="text-xs text-muted-foreground">SPA/모바일 앱처럼 비밀키 보관이 어려운 경우. PKCE를 기본 사용합니다.</span>
+              <span className="absolute right-4 top-4 text-primary">{clientType === "public" ? "✓" : ""}</span>
+            </label>
           </div>
         </CardContent>
       </Card>
 
       <div className="flex items-center justify-end gap-3 border-t border-border pt-4">
-        <Button variant="outline" onClick={() => navigate("/clients")}>
-          취소
-        </Button>
-        <Button onClick={() => mutation.mutate()} disabled={mutation.isLoading}>
-          {isCreate ? "생성" : "저장"}
+        <Button variant="outline" onClick={() => navigate("/clients")}>취소</Button>
+        <Button onClick={() => mutation.mutate()} disabled={mutation.isPending} className="px-8 shadow-lg shadow-primary/20">
+          {mutation.isPending ? "저장 중..." : (isCreate ? "클라이언트 생성" : "설정 저장")}
         </Button>
       </div>
 
       {!isCreate && (
-        <div className="glass-panel flex flex-wrap gap-x-12 gap-y-4 p-4">
+        <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">
-              Client ID
-            </span>
-            <span className="font-mono text-sm">{data?.client?.id}</span>
+            <span className="text-xs font-semibold uppercase text-muted-foreground">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">
-              Created On
-            </span>
-            <span className="text-sm text-muted-foreground">
-              {createdAt ? new Date(createdAt).toLocaleString() : "-"}
-            </span>
-          </div>
-          <div className="space-y-1">
-            <span className="text-xs font-semibold uppercase text-muted-foreground">
-              Last Updated
-            </span>
-            <span className="text-sm text-muted-foreground">
-              {updatedAt ? new Date(updatedAt).toLocaleString() : "-"}
-            </span>
+            <span className="text-xs font-semibold uppercase text-muted-foreground">Created On</span>
+            <span className="text-sm text-muted-foreground block">{data?.client?.created_at ? new Date(data.client.created_at).toLocaleString() : "-"}</span>
           </div>
         </div>
       )}

devfront/src/features/clients/ClientsPage.tsx

@@ -284,16 +284,15 @@ function ClientsPage() {
                   <TableCell className="text-right">
                     <div className="flex items-center justify-end gap-2">
                       <Button variant="ghost" size="sm" asChild>
-                        <Link to={`/clients/${client.id}`}>관리</Link>
+                        <Link to={`/clients/${client.id}`}>Edit</Link>
                       </Button>
                       <Button
                         variant="ghost"
-                        size="icon"
-                        className="h-8 w-8 text-muted-foreground hover:text-destructive"
-                        aria-label="Delete client"
+                        size="sm"
+                        className="text-muted-foreground hover:text-destructive"
                         onClick={() => deleteMutation.mutate(client.id)}
                       >
-                        <Activity className="h-4 w-4" />
+                        Delete
                       </Button>
                     </div>
                   </TableCell>