kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
김용연
2026-01-29 17:05:16 +09:00
parent 3e2ceff692
commit 765bf67cab
5 changed files with 341 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
devfront/src/features/clients/ClientConsentsPage.tsx
View File

@@ -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

275
devfront/src/features/clients/ClientDetailsPage.tsx
View File

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

413
devfront/src/features/clients/ClientGeneralPage.tsx
View File

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

9
devfront/src/features/clients/ClientsPage.tsx
View File

@@ -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>