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-02-20 17:56:53 +09:00
parent 2ec2653bfb
commit 919bcd27e8
18 changed files with 1092 additions and 736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
adminfront/src/features/tenants/routes/TenantProfilePage.tsx
View File

@@ -3,6 +3,7 @@ import type { AxiosError } from "axios";
import { Save, Trash2 } from "lucide-react";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { Button } from "../../../components/ui/button";
import {
Card,
@@ -20,6 +21,7 @@ import {
fetchTenant,
updateTenant,
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";
export function TenantProfilePage() {
const { tenantId } = useParams<{ tenantId: string }>();
@@ -27,7 +29,7 @@ export function TenantProfilePage() {
const queryClient = useQueryClient();
if (!tenantId) {
return <div>Tenant ID is missing</div>;
return <div>{t("msg.admin.tenants.missing_id", "테넌트 ID가 없습니다.")}</div>;
}
const tenantQuery = useQuery({
@@ -36,6 +38,7 @@ export function TenantProfilePage() {
});
const [name, setName] = useState("");
const [type, setType] = useState("COMPANY");
const [slug, setSlug] = useState("");
const [description, setDescription] = useState("");
const [status, setStatus] = useState("active");
@@ -44,6 +47,7 @@ export function TenantProfilePage() {
useEffect(() => {
if (tenantQuery.data) {
setName(tenantQuery.data.name);
setType(tenantQuery.data.type || "COMPANY");
setSlug(tenantQuery.data.slug);
setDescription(tenantQuery.data.description ?? "");
setStatus(tenantQuery.data.status);
@@ -55,6 +59,7 @@ export function TenantProfilePage() {
mutationFn: () =>
updateTenant(tenantId, {
name,
type,
slug,
description: description || undefined,
status,
@@ -66,8 +71,11 @@ export function TenantProfilePage() {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["tenants"] });
queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
alert("Tenant updated successfully");
toast.success(t("msg.info.saved_success", "저장되었습니다."));
},
onError: (err: AxiosError<{ error?: string }>) => {
toast.error(err.response?.data?.error || t("err.common.unknown", "오류가 발생했습니다."));
}
});
const approveMutation = useMutation({
@@ -75,14 +83,18 @@ export function TenantProfilePage() {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["tenants"] });
queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
alert("Tenant approved successfully");
toast.success(t("msg.admin.tenants.approve_success", "테넌트가 승인되었습니다."));
},
onError: (err: AxiosError<{ error?: string }>) => {
toast.error(err.response?.data?.error || t("err.common.unknown", "오류가 발생했습니다."));
}
});
const deleteMutation = useMutation({
mutationFn: () => deleteTenant(tenantId),
onSuccess: () => {
navigate("/tenants");
toast.success(t("msg.admin.tenants.delete_success", "테넌트가 삭제되었습니다."));
},
});
@@ -92,13 +104,13 @@ export function TenantProfilePage() {
?.response?.data?.error;
const handleDelete = () => {
if (window.confirm("Are you sure you want to delete this tenant?")) {
if (window.confirm(t("msg.admin.tenants.delete_confirm", { name: tenantQuery.data?.name }))) {
deleteMutation.mutate();
}
};
const handleApprove = () => {
if (window.confirm("Approve this tenant?")) {
if (window.confirm(t("msg.admin.tenants.approve_confirm", "이 테넌트를 승인하시겠습니까?"))) {
approveMutation.mutate();
}
};
@@ -107,9 +119,9 @@ export function TenantProfilePage() {
<>
<Card className="bg-[var(--color-panel)] mt-6">
<CardHeader>
<CardTitle>Tenant profile</CardTitle>
<CardTitle>{t("ui.admin.tenants.profile.title", "테넌트 프로필")}</CardTitle>
<CardDescription>
Changes to slug and status are applied immediately.
{t("ui.admin.tenants.profile.subtitle", "슬러그 및 상태 변경은 즉시 적용됩니다.")}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
@@ -120,16 +132,30 @@ export function TenantProfilePage() {
)}
<div className="space-y-2">
<Label className="text-sm font-semibold">
Tenant name <span className="text-destructive">*</span>
{t("ui.admin.tenants.profile.name", "테넌트 이름")} <span className="text-destructive">*</span>
</Label>
<Input value={name} onChange={(e) => setName(e.target.value)} />
</div>
<div className="space-y-2">
<Label className="text-sm font-semibold">Slug</Label>
<Label className="text-sm font-semibold">{t("ui.admin.tenants.profile.type", "테넌트 유형")}</Label>
<select
id="type"
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
value={type}
onChange={(e) => setType(e.target.value)}
>
<option value="COMPANY">{t("domain.tenant_type.company", "COMPANY (일반 기업)")}</option>
<option value="COMPANY_GROUP">{t("domain.tenant_type.company_group", "COMPANY_GROUP (그룹사/지주사)")}</option>
<option value="USER_GROUP">{t("domain.tenant_type.user_group", "USER_GROUP (내부 부서/팀)")}</option>
<option value="PERSONAL">{t("domain.tenant_type.personal", "PERSONAL (개인 워크스페이스)")}</option>
</select>
</div>
<div className="space-y-2">
<Label className="text-sm font-semibold">{t("ui.admin.tenants.profile.slug", "슬러그 (Slug)")}</Label>
<Input value={slug} onChange={(e) => setSlug(e.target.value)} />
</div>
<div className="space-y-2">
<Label className="text-sm font-semibold">Description</Label>
<Label className="text-sm font-semibold">{t("ui.admin.tenants.profile.description", "설명")}</Label>
<Textarea
rows={3}
value={description}
@@ -138,7 +164,7 @@ export function TenantProfilePage() {
</div>
<div className="space-y-2">
<Label className="text-sm font-semibold">
Allowed Domains (Comma separated)
{t("ui.admin.tenants.profile.allowed_domains", "허용된 도메인 (콤마로 구분)")}
</Label>
<Input
value={domains}
@@ -146,26 +172,25 @@ export function TenantProfilePage() {
placeholder="example.com, example.kr"
/>
<p className="text-xs text-muted-foreground">
Users with these email domains will be automatically assigned to
this tenant.
{t("ui.admin.tenants.profile.allowed_domains_help", "이 도메인을 가진 이메일로 가입한 사용자는 자동으로 이 테넌트에 배정됩니다.")}
</p>
</div>
<div className="space-y-2">
<Label className="text-sm font-semibold">Status</Label>
<Label className="text-sm font-semibold">{t("ui.admin.tenants.profile.status", "상태")}</Label>
<div className="flex gap-3">
<Button
type="button"
variant={status === "active" ? "default" : "outline"}
onClick={() => setStatus("active")}
>
Active
{t("ui.common.status.active", "활성")}
</Button>
<Button
type="button"
variant={status === "inactive" ? "default" : "outline"}
onClick={() => setStatus("inactive")}
>
Inactive
{t("ui.common.status.inactive", "비활성")}
</Button>
</div>
</div>
@@ -184,7 +209,7 @@ export function TenantProfilePage() {
disabled={deleteMutation.isPending}
>
<Trash2 size={16} />
Delete
{t("ui.common.delete", "삭제")}
</Button>
<div className="flex items-center gap-2">
{status === "pending" && (
@@ -194,11 +219,11 @@ export function TenantProfilePage() {
onClick={handleApprove}
disabled={approveMutation.isPending}
>
Approve Tenant
{t("ui.admin.tenants.profile.approve_button", "테넌트 승인")}
</Button>
)}
<Button variant="outline" onClick={() => navigate("/tenants")}>
Cancel
{t("ui.common.cancel", "취소")}
</Button>
<Button
onClick={() => updateMutation.mutate()}
@@ -209,7 +234,7 @@ export function TenantProfilePage() {
}
>
<Save size={16} />
Save
{t("ui.common.save", "저장")}
</Button>
</div>
</div>