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

1
.gitignore vendored
View File

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

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

@@ -109,7 +109,7 @@ function ClientConsentsPage() {
to={`/clients/${clientId}`} to={`/clients/${clientId}`}
className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground" className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
> >
Overview Connection
</Link> </Link>
<span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary"> <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
Consent &amp; Users 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 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 { Link, useParams } from "react-router-dom";
import { Badge } from "../../components/ui/badge"; import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button"; 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 { Separator } from "../../components/ui/separator";
import { import {
Table, Table,
@@ -12,17 +12,47 @@ import {
TableCell, TableCell,
TableRow, TableRow,
} from "../../components/ui/table"; } 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() { function ClientDetailsPage() {
const params = useParams(); const params = useParams();
const queryClient = useQueryClient();
const clientId = params.id ?? ""; const clientId = params.id ?? "";
const { data, isLoading, error } = useQuery({ const { data, isLoading, error } = useQuery({
queryKey: ["client", clientId], queryKey: ["client", clientId],
queryFn: () => fetchClient(clientId), queryFn: () => fetchClient(clientId),
enabled: clientId.length > 0, 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) { if (!clientId) {
return <div className="p-8 text-center">Client ID가 필요합니다.</div>; return <div className="p-8 text-center">Client ID가 필요합니다.</div>;
} }
@@ -81,7 +111,7 @@ function ClientDetailsPage() {
to={`/clients/${clientId}`} to={`/clients/${clientId}`}
className="border-b-2 border-primary pb-3 text-sm font-bold text-primary" className="border-b-2 border-primary pb-3 text-sm font-bold text-primary"
> >
Overview Connection
</Link> </Link>
<Link <Link
to={`/clients/${clientId}/consents`} to={`/clients/${clientId}/consents`}
@@ -104,118 +134,141 @@ function ClientDetailsPage() {
</div> </div>
</div> </div>
<div className="space-y-4"> <div className="grid gap-8 lg:grid-cols-2">
<h2 className="text-xl font-bold">클라이언트 자격 증명</h2> <div className="space-y-6">
<Card className="glass-panel"> <div className="space-y-4">
<CardContent className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"> <h2 className="text-xl font-bold">클라이언트 자격 증명</h2>
<div> <Card className="glass-panel">
<p className="text-xs font-bold uppercase tracking-widest text-muted-foreground"> <CardContent className="flex flex-col gap-4 p-6">
Client ID <div>
</p> <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
<p className="font-mono text-lg">{data.client.id}</p> Client ID
</div> </p>
<Button variant="secondary" className="gap-2"> <div className="flex items-center justify-between gap-2">
<Copy className="h-4 w-4" /> <p className="font-mono text-lg truncate">{data.client.id}</p>
ID 복사 <Button variant="secondary" size="icon" className="shrink-0" onClick={() => navigator.clipboard.writeText(data.client.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} 복사`}
>
<Copy className="h-4 w-4" /> <Copy className="h-4 w-4" />
</Button> </Button>
</TableCell> </div>
</TableRow> </div>
))}
</TableBody>
</Table>
</Card>
</div>
<div className="glass-panel p-6 opacity-80"> <Separator />
<div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div>
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/15 text-primary"> <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
<Shield className="h-6 w-6" /> Client Secret
</div> </p>
<div> <div className="flex items-center justify-between gap-2">
<p className="text-lg font-semibold">보안 메모</p> <p className="font-mono text-lg tracking-widest">••••••••••••••••</p>
<p className="text-sm text-muted-foreground"> <div className="flex gap-2 shrink-0">
엔드포인트는 읽기 전용으로 유지하고, 비밀키 재발행/복사는 감사 <Button variant="secondary" size="icon">
로그와 연계하세요. <Eye className="h-4 w-4" />
</p> </Button>
</div> <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>
<div className="hidden items-center gap-2 md:flex">
<Badge variant="outline" className="gap-1"> <div className="space-y-4">
<Workflow className="h-4 w-4" /> <div className="flex items-center gap-2">
감사 이벤트 필요 <h2 className="text-xl font-bold">OIDC 엔드포인트</h2>
</Badge> <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>
</div> </div>
<Separator className="my-4" />
<p className="text-sm text-muted-foreground">
비밀키 재발행 작업에는 관리자 세션 TTL 확인과 레이트리밋, 알림 연동을
권장합니다.
</p>
</div> </div>
</div> </div>
); );

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

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

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

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