forked from baron/baron-sso
ory용 MCP 제작, devfront/adminfront 백엔드 연결
This commit is contained in:
Lectom C Han
206
devfront/src/features/clients/ClientGeneralPage.tsx
Normal file
206
devfront/src/features/clients/ClientGeneralPage.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
import { Info, Search, Shield, Sparkles, Upload } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Badge } from "../../components/ui/badge";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../components/ui/card";
|
||||
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 { cn } from "../../lib/utils";
|
||||
|
||||
const meta = {
|
||||
clientId: "client_82910_ax99",
|
||||
created: "2023-10-12 10:45",
|
||||
updated: "2 hours ago",
|
||||
};
|
||||
|
||||
function ClientGeneralPage() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<header className="space-y-4">
|
||||
<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>
|
||||
<span>/</span>
|
||||
<span className="text-foreground">Customer Support Portal</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-3xl font-black leading-tight">
|
||||
Client Details
|
||||
</p>
|
||||
<p className="text-muted-foreground">
|
||||
RP 설정과 메타데이터를 관리합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="success" className="px-3 py-1 text-xs uppercase">
|
||||
Active
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-6 overflow-x-auto border-b border-border pb-3 text-sm font-bold">
|
||||
<Link
|
||||
to="/clients/cli_481...8k2"
|
||||
className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Overview
|
||||
</Link>
|
||||
<Link
|
||||
to="/clients/cli_481...8k2/consents"
|
||||
className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Consent & Users
|
||||
</Link>
|
||||
<span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
|
||||
Settings
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<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">
|
||||
<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 defaultValue="Customer Support Portal" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-semibold">Description</Label>
|
||||
<Textarea
|
||||
rows={3}
|
||||
defaultValue="Internal tool for managing customer support tickets and user data."
|
||||
/>
|
||||
</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 defaultValue="https://brand.example.com/assets/logo-support.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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="glass-panel">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-xl font-bold">보안 설정</CardTitle>
|
||||
<CardDescription>
|
||||
클라이언트 유형을 선택하세요. 비밀키를 안전하게 보관할 수 없는 경우
|
||||
Public을 선택합니다.
|
||||
</CardDescription>
|
||||
</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="relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 border-primary bg-primary/5 p-4 transition">
|
||||
<input
|
||||
className="sr-only"
|
||||
type="radio"
|
||||
name="client-type"
|
||||
defaultChecked
|
||||
/>
|
||||
<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>
|
||||
|
||||
<label className="relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 border-border bg-card p-4 transition hover:border-muted-foreground/40">
|
||||
<input className="sr-only" type="radio" name="client-type" />
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex items-center justify-end gap-3 border-t border-border pt-4">
|
||||
<Button variant="outline">취소</Button>
|
||||
<Button>저장</Button>
|
||||
</div>
|
||||
|
||||
<div className="glass-panel flex flex-wrap gap-x-12 gap-y-4 p-4">
|
||||
<div className="space-y-1">
|
||||
<span className="text-xs font-semibold uppercase text-muted-foreground">
|
||||
Client ID
|
||||
</span>
|
||||
<span className="font-mono text-sm">{meta.clientId}</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">{meta.created}</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">{meta.updated}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ClientGeneralPage;
|
||||
Reference in New Issue
Block a user