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

린트 적용

Browse Source
This commit is contained in:
조찬영
2026-02-23 16:18:01 +09:00
parent 04938d7cd9
commit 68becb43bc
36 changed files with 1240 additions and 1057 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
adminfront/src/features/tenants/routes/TenantAdminsTab.tsx
View File

@@ -1,6 +1,13 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { Plus, Search, ShieldCheck, Trash2, UserPlus, Users } from "lucide-react";
import {
Plus,
Search,
ShieldCheck,
Trash2,
UserPlus,
Users,
} from "lucide-react";
import { useState } from "react";
import { useParams } from "react-router-dom";
import { toast } from "sonner";
@@ -64,11 +71,16 @@ export function TenantAdminsTab() {
mutationFn: (userId: string) => addTenantAdmin(tenantId, userId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["tenant-admins", tenantId] });
toast.success(t("msg.admin.tenants.admins.add_success", "관리자가 추가되었습니다."));
toast.success(
t("msg.admin.tenants.admins.add_success", "관리자가 추가되었습니다."),
);
setSearchTerm("");
},
onError: (err: AxiosError<{ error?: string }>) => {
toast.error(err.response?.data?.error || t("msg.common.error", "오류가 발생했습니다."));
toast.error(
err.response?.data?.error ||
t("msg.common.error", "오류가 발생했습니다."),
);
},
});
@@ -76,10 +88,15 @@ export function TenantAdminsTab() {
mutationFn: (userId: string) => removeTenantAdmin(tenantId, userId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["tenant-admins", tenantId] });
toast.success(t("msg.admin.tenants.admins.remove_success", "권한이 회수되었습니다."));
toast.success(
t("msg.admin.tenants.admins.remove_success", "권한이 회수되었습니다."),
);
},
onError: (err: AxiosError<{ error?: string }>) => {
toast.error(err.response?.data?.error || t("msg.common.error", "오류가 발생했습니다."));
toast.error(
err.response?.data?.error ||
t("msg.common.error", "오류가 발생했습니다."),
);
},
});
@@ -88,7 +105,15 @@ export function TenantAdminsTab() {
};
const handleRemoveAdmin = (userId: string, userName: string) => {
if (window.confirm(t("msg.admin.tenants.admins.remove_confirm", "관리자를 삭제하시겠습니까?", { name: userName }))) {
if (
window.confirm(
t(
"msg.admin.tenants.admins.remove_confirm",
"관리자를 삭제하시겠습니까?",
{ name: userName },
),
)
) {
removeMutation.mutate(userId);
}
};
@@ -106,14 +131,20 @@ export function TenantAdminsTab() {
{t("ui.admin.tenants.admins.title", "테넌트 관리자")}
</CardTitle>
<CardDescription className="text-muted-foreground">
{t("msg.admin.tenants.admins.subtitle", "이 테넌트의 자원을 관리할 수 있는 사용자 목록입니다.")}
{t(
"msg.admin.tenants.admins.subtitle",
"이 테넌트의 자원을 관리할 수 있는 사용자 목록입니다.",
)}
</CardDescription>
</div>
<Dialog open={isDialogOpen} onOpenChange={(open) => {
setIsAddDialogOpen(open);
if (!open) setSearchTerm("");
}}>
<Dialog
open={isDialogOpen}
onOpenChange={(open) => {
setIsAddDialogOpen(open);
if (!open) setSearchTerm("");
}}
>
<DialogTrigger asChild>
<Button className="bg-primary text-primary-foreground hover:bg-primary/90">
<UserPlus className="mr-2 h-4 w-4" />
@@ -126,7 +157,10 @@ export function TenantAdminsTab() {
{t("ui.admin.tenants.admins.dialog_title", "새 관리자 추가")}
</DialogTitle>
<DialogDescription>
{t("ui.admin.tenants.admins.dialog_description", "이름 또는 이메일로 사용자를 검색하세요.")}
{t(
"ui.admin.tenants.admins.dialog_description",
"이름 또는 이메일로 사용자를 검색하세요.",
)}
</DialogDescription>
</DialogHeader>
@@ -134,7 +168,10 @@ export function TenantAdminsTab() {
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
placeholder={t("ui.admin.tenants.admins.dialog_search_placeholder", "사용자 검색 (최소 2자)...")}
placeholder={t(
"ui.admin.tenants.admins.dialog_search_placeholder",
"사용자 검색 (최소 2자)...",
)}
className="pl-10 h-11"
autoFocus
value={searchTerm}
@@ -146,7 +183,12 @@ export function TenantAdminsTab() {
{searchTerm.length < 2 ? (
<div className="p-10 text-center text-muted-foreground flex flex-col items-center gap-2">
<Search className="h-8 w-8 opacity-20" />
<p className="text-sm">{t("ui.admin.tenants.admins.dialog_search_hint", "검색어를 입력해 주세요.")}</p>
<p className="text-sm">
{t(
"ui.admin.tenants.admins.dialog_search_hint",
"검색어를 입력해 주세요.",
)}
</p>
</div>
) : usersQuery.isLoading ? (
<div className="p-10 text-center">
@@ -154,21 +196,33 @@ export function TenantAdminsTab() {
</div>
) : searchResults.length === 0 ? (
<div className="p-10 text-center text-muted-foreground">
{t("ui.admin.tenants.admins.dialog_no_results", "검색 결과가 없습니다.")}
{t(
"ui.admin.tenants.admins.dialog_no_results",
"검색 결과가 없습니다.",
)}
</div>
) : (
<div className="divide-y divide-border">
{searchResults.map((user) => {
const isAlreadyAdmin = currentAdmins.some((a) => a.id === user.id);
const isAlreadyAdmin = currentAdmins.some(
(a) => a.id === user.id,
);
return (
<div key={user.id} className="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors">
<div
key={user.id}
className="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
>
<div className="flex items-center gap-3">
<div className="h-9 w-9 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
{user.name.charAt(0)}
</div>
<div className="flex flex-col">
<span className="text-sm font-medium">{user.name}</span>
<span className="text-xs text-muted-foreground">{user.email}</span>
<span className="text-sm font-medium">
{user.name}
</span>
<span className="text-xs text-muted-foreground">
{user.email}
</span>
</div>
</div>
<Button
@@ -178,9 +232,20 @@ export function TenantAdminsTab() {
onClick={() => handleAddAdmin(user.id)}
>
{isAlreadyAdmin ? (
<Badge variant="secondary" className="font-normal">{t("ui.admin.tenants.admins.already_admin", "이미 관리자")}</Badge>
<Badge
variant="secondary"
className="font-normal"
>
{t(
"ui.admin.tenants.admins.already_admin",
"이미 관리자",
)}
</Badge>
) : (
<><Plus className="h-3 w-3 mr-1" /> {t("ui.common.add", "추가")}</>
<>
<Plus className="h-3 w-3 mr-1" />{" "}
{t("ui.common.add", "추가")}
</>
)}
</Button>
</div>
@@ -219,16 +284,27 @@ export function TenantAdminsTab() {
</TableRow>
) : currentAdmins.length === 0 ? (
<TableRow>
<TableCell colSpan={3} className="h-32 text-center text-muted-foreground">
<TableCell
colSpan={3}
className="h-32 text-center text-muted-foreground"
>
<div className="flex flex-col items-center gap-2">
<Users className="h-8 w-8 opacity-20" />
<p>{t("msg.admin.tenants.admins.empty", "등록된 관리자가 없습니다.")}</p>
<p>
{t(
"msg.admin.tenants.admins.empty",
"등록된 관리자가 없습니다.",
)}
</p>
</div>
</TableCell>
</TableRow>
) : (
currentAdmins.map((admin) => (
<TableRow key={admin.id} className="hover:bg-muted/30 transition-colors group">
<TableRow
key={admin.id}
className="hover:bg-muted/30 transition-colors group"
>
<TableCell className="font-medium">
<div className="flex items-center gap-3">
<div className="h-8 w-8 rounded-lg bg-secondary flex items-center justify-center text-secondary-foreground font-bold text-xs">
@@ -245,9 +321,14 @@ export function TenantAdminsTab() {
variant="ghost"
size="icon"
className="opacity-0 group-hover:opacity-100 text-destructive hover:text-destructive hover:bg-destructive/10 transition-all"
onClick={() => handleRemoveAdmin(admin.id, admin.name)}
onClick={() =>
handleRemoveAdmin(admin.id, admin.name)
}
disabled={removeMutation.isPending}
title={t("ui.admin.tenants.admins.remove_title", "관리자 권한 회수")}
title={t(
"ui.admin.tenants.admins.remove_title",
"관리자 권한 회수",
)}
>
<Trash2 className="h-4 w-4" />
</Button>

25
adminfront/src/features/tenants/routes/TenantCreatePage.tsx
View File

@@ -117,10 +117,27 @@ function TenantCreatePage() {
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>
<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">

21
adminfront/src/features/tenants/routes/TenantDetailPage.tsx
View File

@@ -25,21 +25,32 @@ function TenantDetailPage() {
<header className="flex flex-wrap items-start justify-between gap-4">
<div className="space-y-2">
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
<Link to="/tenants" className="inline-flex items-center gap-2 hover:text-foreground transition-colors">
<Link
to="/tenants"
className="inline-flex items-center gap-2 hover:text-foreground transition-colors"
>
<ArrowLeft size={14} />
{t("ui.admin.tenants.detail.breadcrumb_list", "테넌트 목록")}
</Link>
<span>/</span>
<span className="text-foreground">{t("ui.admin.tenants.detail.title", "상세")}</span>
<span className="text-foreground">
{t("ui.admin.tenants.detail.title", "상세")}
</span>
</div>
<h2 className="text-3xl font-semibold">
{tenantQuery.data?.name ?? t("ui.admin.tenants.detail.loading", "불러오는 중...")}
{tenantQuery.data?.name ??
t("ui.admin.tenants.detail.loading", "불러오는 중...")}
</h2>
<p className="text-sm text-[var(--color-muted)]">
{t("ui.admin.tenants.detail.header_subtitle", "테넌트 정보를 수정하거나 연동 설정을 관리합니다.")}
{t(
"ui.admin.tenants.detail.header_subtitle",
"테넌트 정보를 수정하거나 연동 설정을 관리합니다.",
)}
</p>
</div>
<Badge variant="muted">{t("ui.common.admin_only", "관리자 전용")}</Badge>
<Badge variant="muted">
{t("ui.common.admin_only", "관리자 전용")}
</Badge>
</header>
{/* Tabs */}

120
adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
View File

@@ -43,9 +43,15 @@ import {
import { t } from "../../../lib/i18n";
import { toast } from "sonner";
type UserGroupNode = GroupSummary & { children: UserGroupNode[]; isExpanded?: boolean };
type UserGroupNode = GroupSummary & {
children: UserGroupNode[];
isExpanded?: boolean;
};
function buildGroupTree(groups: GroupSummary[], parentId: string | null = null): UserGroupNode[] {
function buildGroupTree(
groups: GroupSummary[],
parentId: string | null = null,
): UserGroupNode[] {
const nodes: UserGroupNode[] = [];
const childrenOf = new Map<string, UserGroupNode[]>();
@@ -56,7 +62,10 @@ function buildGroupTree(groups: GroupSummary[], parentId: string | null = null):
// Second pass: Populate children
groups.forEach((group) => {
const node: UserGroupNode = { ...group, children: childrenOf.get(group.id)! };
const node: UserGroupNode = {
...group,
children: childrenOf.get(group.id)!,
};
if (group.parentId === parentId) {
nodes.push(node);
} else {
@@ -73,7 +82,7 @@ function buildGroupTree(groups: GroupSummary[], parentId: string | null = null):
// Sort children for consistent rendering (optional, but good for UI)
nodes.sort((a, b) => a.name.localeCompare(b.name));
nodes.forEach(node => {
nodes.forEach((node) => {
node.children.sort((a, b) => a.name.localeCompare(b.name));
});
@@ -130,11 +139,16 @@ const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
<ChevronRight size={16} />
)}
</Button>
) : (level > 0 && (
) : (
level > 0 && (
<span className="inline-block w-6 text-center">
<ChevronRight size={16} className="text-muted-foreground inline-block align-middle" />
<ChevronRight
size={16}
className="text-muted-foreground inline-block align-middle"
/>
</span>
))}
)
)}
<Users size={14} className="text-muted-foreground" />
<span className="font-semibold">{node.name}</span>
<Badge variant="secondary" className="text-[10px] font-mono">
@@ -221,7 +235,12 @@ function TenantGroupsPage() {
parentId: newGroupParentId || undefined,
}),
onSuccess: () => {
toast.success(t("msg.admin.groups.list.create_success", "그룹이 성공적으로 생성되었습니다."));
toast.success(
t(
"msg.admin.groups.list.create_success",
"그룹이 성공적으로 생성되었습니다.",
),
);
groupsQuery.refetch();
setNewGroupName("");
setNewGroupNameDesc("");
@@ -229,21 +248,27 @@ function TenantGroupsPage() {
setNewGroupParentId(null);
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.admin.groups.list.create_error", "그룹 생성 실패"), { description: error.response?.data?.error || error.message });
}
toast.error(t("msg.admin.groups.list.create_error", "그룹 생성 실패"), {
description: error.response?.data?.error || error.message,
});
},
});
// 그룹 삭제
const deleteMutation = useMutation({
mutationFn: (id: string) => deleteGroup(tenantId, id),
onSuccess: () => {
toast.success(t("msg.admin.groups.list.delete_success", "그룹이 삭제되었습니다."));
toast.success(
t("msg.admin.groups.list.delete_success", "그룹이 삭제되었습니다."),
);
groupsQuery.refetch();
setSelectedGroupId(null);
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.admin.groups.list.delete_error", "그룹 삭제 실패"), { description: error.response?.data?.error || error.message });
}
toast.error(t("msg.admin.groups.list.delete_error", "그룹 삭제 실패"), {
description: error.response?.data?.error || error.message,
});
},
});
// 멤버 추가
@@ -251,12 +276,16 @@ function TenantGroupsPage() {
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
addGroupMember(tenantId, groupId, userId),
onSuccess: () => {
toast.success(t("msg.admin.groups.members.add_success", "멤버가 추가되었습니다."));
toast.success(
t("msg.admin.groups.members.add_success", "멤버가 추가되었습니다."),
);
groupsQuery.refetch();
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.common.error", "오류 발생"), { description: error.response?.data?.error || error.message });
}
toast.error(t("msg.common.error", "오류 발생"), {
description: error.response?.data?.error || error.message,
});
},
});
// 멤버 제거
@@ -264,15 +293,21 @@ function TenantGroupsPage() {
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
removeGroupMember(tenantId, groupId, userId),
onSuccess: () => {
toast.success(t("msg.admin.groups.members.remove_success", "멤버가 제거되었습니다."));
toast.success(
t("msg.admin.groups.members.remove_success", "멤버가 제거되었습니다."),
);
groupsQuery.refetch();
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.common.error", "오류 발생"), { description: error.response?.data?.error || error.message });
}
toast.error(t("msg.common.error", "오류 발생"), {
description: error.response?.data?.error || error.message,
});
},
});
const groupTree = groupsQuery.data ? buildGroupTree(groupsQuery.data, tenantId) : [];
const groupTree = groupsQuery.data
? buildGroupTree(groupsQuery.data, tenantId)
: [];
const handleAddSubGroup = (parentId: string) => {
setNewGroupParentId(parentId);
@@ -304,7 +339,10 @@ function TenantGroupsPage() {
{t("ui.admin.groups.create.title", "새 그룹 생성")}
</CardTitle>
<CardDescription>
{t("ui.admin.groups.create.description", "새로운 사용자 그룹을 생성하고 계층 구조를 설정합니다.")}
{t(
"ui.admin.groups.create.description",
"새로운 사용자 그룹을 생성하고 계층 구조를 설정합니다.",
)}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
@@ -425,8 +463,14 @@ function TenantGroupsPage() {
)}
{!groupsQuery.isLoading && groupTree.length === 0 && (
<TableRow>
<TableCell colSpan={3} className="text-center py-8 text-muted-foreground">
{t("msg.admin.groups.list.empty", "아직 등록된 그룹이 없습니다.")}
<TableCell
colSpan={3}
className="text-center py-8 text-muted-foreground"
>
{t(
"msg.admin.groups.list.empty",
"아직 등록된 그룹이 없습니다.",
)}
</TableCell>
</TableRow>
)}
@@ -438,9 +482,16 @@ function TenantGroupsPage() {
onSelect={setSelectedGroupId}
selectedGroupId={selectedGroupId}
onDelete={(id) => {
if (window.confirm(t("msg.admin.groups.list.delete_confirm", "그룹을 삭제하시겠습니까?"))) {
deleteMutation.mutate(id);
}
if (
window.confirm(
t(
"msg.admin.groups.list.delete_confirm",
"그룹을 삭제하시겠습니까?",
),
)
) {
deleteMutation.mutate(id);
}
}}
onAddSubGroup={handleAddSubGroup}
addMemberMutation={addMemberMutation}
@@ -464,15 +515,22 @@ function TenantGroupsPage() {
})}
</CardTitle>
<CardDescription>
{t("ui.admin.groups.detail.members_subtitle", "그룹에 속한 멤버들을 확인하고 관리합니다.")}
{t(
"ui.admin.groups.detail.members_subtitle",
"그룹에 속한 멤버들을 확인하고 관리합니다.",
)}
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex justify-end mb-4">
<Button size="sm" onClick={() => handleAddMember(currentGroup.id)} disabled={addMemberMutation.isPending}>
<UserPlus size={14} className="mr-1" />
{t("ui.common.add", "멤버 추가")}
</Button>
<Button
size="sm"
onClick={() => handleAddMember(currentGroup.id)}
disabled={addMemberMutation.isPending}
>
<UserPlus size={14} className="mr-1" />
{t("ui.common.add", "멤버 추가")}
</Button>
</div>
<Table>
<TableHeader>

22
adminfront/src/features/tenants/routes/TenantListPage.tsx
View File

@@ -1,12 +1,6 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import {
CornerDownRight,
Pencil,
Plus,
RefreshCw,
Trash2,
} from "lucide-react";
import { CornerDownRight, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
import React from "react";
import { Link, useNavigate } from "react-router-dom";
import { Badge } from "../../../components/ui/badge";
@@ -72,7 +66,9 @@ const TenantRow: React.FC<{
<TableRow key={tenant.id}>
<TableCell style={{ paddingLeft: `${1 + level * 1.5}rem` }}>
<div className="flex items-center gap-2">
{level > 0 && <CornerDownRight size={14} className="text-muted-foreground" />}
{level > 0 && (
<CornerDownRight size={14} className="text-muted-foreground" />
)}
<span className="font-semibold">{tenant.name}</span>
</div>
</TableCell>
@@ -88,8 +84,8 @@ const TenantRow: React.FC<{
tenant.status === "active"
? "default"
: tenant.status === "pending"
? "secondary"
: "muted"
? "secondary"
: "muted"
}
>
{t(`ui.common.status.${tenant.status}`, tenant.status)}
@@ -267,7 +263,10 @@ function TenantListPage() {
)}
{!query.isLoading && tenantTree.length === 0 && (
<TableRow>
<TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
<TableCell
colSpan={6}
className="text-center py-8 text-muted-foreground"
>
{t(
"msg.admin.tenants.empty",
"아직 등록된 테넌트가 없습니다.",
@@ -293,4 +292,3 @@ function TenantListPage() {
}
export default TenantListPage;

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

@@ -29,7 +29,9 @@ export function TenantProfilePage() {
const queryClient = useQueryClient();
if (!tenantId) {
return <div>{t("msg.admin.tenants.missing_id", "테넌트 ID가 없습니다.")}</div>;
return (
<div>{t("msg.admin.tenants.missing_id", "테넌트 ID가 없습니다.")}</div>
);
}
const tenantQuery = useQuery({
@@ -74,8 +76,11 @@ export function TenantProfilePage() {
toast.success(t("msg.info.saved_success", "저장되었습니다."));
},
onError: (err: AxiosError<{ error?: string }>) => {
toast.error(err.response?.data?.error || t("err.common.unknown", "오류가 발생했습니다."));
}
toast.error(
err.response?.data?.error ||
t("err.common.unknown", "오류가 발생했습니다."),
);
},
});
const approveMutation = useMutation({
@@ -83,18 +88,25 @@ export function TenantProfilePage() {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["tenants"] });
queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
toast.success(t("msg.admin.tenants.approve_success", "테넌트가 승인되었습니다."));
toast.success(
t("msg.admin.tenants.approve_success", "테넌트가 승인되었습니다."),
);
},
onError: (err: AxiosError<{ error?: string }>) => {
toast.error(err.response?.data?.error || t("err.common.unknown", "오류가 발생했습니다."));
}
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", "테넌트가 삭제되었습니다."));
toast.success(
t("msg.admin.tenants.delete_success", "테넌트가 삭제되었습니다."),
);
},
});
@@ -104,13 +116,23 @@ export function TenantProfilePage() {
?.response?.data?.error;
const handleDelete = () => {
if (window.confirm(t("msg.admin.tenants.delete_confirm", "삭제하시겠습니까?", { name: tenantQuery.data?.name ?? "" }))) {
if (
window.confirm(
t("msg.admin.tenants.delete_confirm", "삭제하시겠습니까?", {
name: tenantQuery.data?.name ?? "",
}),
)
) {
deleteMutation.mutate();
}
};
const handleApprove = () => {
if (window.confirm(t("msg.admin.tenants.approve_confirm", "이 테넌트를 승인하시겠습니까?"))) {
if (
window.confirm(
t("msg.admin.tenants.approve_confirm", "이 테넌트를 승인하시겠습니까?"),
)
) {
approveMutation.mutate();
}
};
@@ -119,9 +141,14 @@ export function TenantProfilePage() {
<>
<Card className="bg-[var(--color-panel)] mt-6">
<CardHeader>
<CardTitle>{t("ui.admin.tenants.profile.title", "테넌트 프로필")}</CardTitle>
<CardTitle>
{t("ui.admin.tenants.profile.title", "테넌트 프로필")}
</CardTitle>
<CardDescription>
{t("ui.admin.tenants.profile.subtitle", "슬러그 및 상태 변경은 즉시 적용됩니다.")}
{t(
"ui.admin.tenants.profile.subtitle",
"슬러그 및 상태 변경은 즉시 적용됩니다.",
)}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
@@ -132,30 +159,54 @@ export function TenantProfilePage() {
)}
<div className="space-y-2">
<Label className="text-sm font-semibold">
{t("ui.admin.tenants.profile.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">{t("ui.admin.tenants.profile.type", "테넌트 유형")}</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>
<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>
<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">{t("ui.admin.tenants.profile.description", "설명")}</Label>
<Label className="text-sm font-semibold">
{t("ui.admin.tenants.profile.description", "설명")}
</Label>
<Textarea
rows={3}
value={description}
@@ -164,7 +215,10 @@ export function TenantProfilePage() {
</div>
<div className="space-y-2">
<Label className="text-sm font-semibold">
{t("ui.admin.tenants.profile.allowed_domains", "허용된 도메인 (콤마로 구분)")}
{t(
"ui.admin.tenants.profile.allowed_domains",
"허용된 도메인 (콤마로 구분)",
)}
</Label>
<Input
value={domains}
@@ -172,11 +226,16 @@ export function TenantProfilePage() {
placeholder="example.com, example.kr"
/>
<p className="text-xs text-muted-foreground">
{t("ui.admin.tenants.profile.allowed_domains_help", "이 도메인을 가진 이메일로 가입한 사용자는 자동으로 이 테넌트에 배정됩니다.")}
{t(
"ui.admin.tenants.profile.allowed_domains_help",
"이 도메인을 가진 이메일로 가입한 사용자는 자동으로 이 테넌트에 배정됩니다.",
)}
</p>
</div>
<div className="space-y-2">
<Label className="text-sm font-semibold">{t("ui.admin.tenants.profile.status", "상태")}</Label>
<Label className="text-sm font-semibold">
{t("ui.admin.tenants.profile.status", "상태")}
</Label>
<div className="flex gap-3">
<Button
type="button"

27
adminfront/src/features/tenants/routes/TenantSchemaPage.tsx
View File

@@ -81,10 +81,18 @@ export function TenantSchemaPage() {
}),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
toast.success(t("msg.admin.tenants.schema.update_success", "스키마가 저장되었습니다."));
toast.success(
t(
"msg.admin.tenants.schema.update_success",
"스키마가 저장되었습니다.",
),
);
},
onError: (err: AxiosError<{ error?: string }>) => {
toast.error(err.response?.data?.error || t("msg.admin.tenants.schema.update_error", "저장에 실패했습니다."));
toast.error(
err.response?.data?.error ||
t("msg.admin.tenants.schema.update_error", "저장에 실패했습니다."),
);
},
});
@@ -196,13 +204,22 @@ export function TenantSchemaPage() {
}}
>
<option value="text">
{t("ui.admin.tenants.schema.field.type_text", "텍스트 (Text)")}
{t(
"ui.admin.tenants.schema.field.type_text",
"텍스트 (Text)",
)}
</option>
<option value="number">
{t("ui.admin.tenants.schema.field.type_number", "숫자 (Number)")}
{t(
"ui.admin.tenants.schema.field.type_number",
"숫자 (Number)",
)}
</option>
<option value="boolean">
{t("ui.admin.tenants.schema.field.type_boolean", "불리언 (Boolean)")}
{t(
"ui.admin.tenants.schema.field.type_boolean",
"불리언 (Boolean)",
)}
</option>
</select>
</div>

605
adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx
View File

@@ -46,31 +46,31 @@ import { t } from "../../../lib/i18n";
type UserGroupNode = GroupSummary & { children: UserGroupNode[] };
function buildGroupTree(groups: GroupSummary[]): UserGroupNode[] {
const nodeMap = new Map<string, UserGroupNode>();
const rootNodes: UserGroupNode[] = [];
groups.forEach((group) => {
nodeMap.set(group.id, { ...group, children: [] });
});
groups.forEach((group) => {
const node = nodeMap.get(group.id)!;
if (group.parentId && nodeMap.has(group.parentId)) {
const parent = nodeMap.get(group.parentId)!;
parent.children.push(node);
} else {
rootNodes.push(node);
}
});
const nodeMap = new Map<string, UserGroupNode>();
const rootNodes: UserGroupNode[] = [];
const sortNodes = (nodes: UserGroupNode[]) => {
nodes.sort((a, b) => a.name.localeCompare(b.name));
nodes.forEach(node => sortNodes(node.children));
};
sortNodes(rootNodes);
groups.forEach((group) => {
nodeMap.set(group.id, { ...group, children: [] });
});
return rootNodes;
}
groups.forEach((group) => {
const node = nodeMap.get(group.id)!;
if (group.parentId && nodeMap.has(group.parentId)) {
const parent = nodeMap.get(group.parentId)!;
parent.children.push(node);
} else {
rootNodes.push(node);
}
});
const sortNodes = (nodes: UserGroupNode[]) => {
nodes.sort((a, b) => a.name.localeCompare(b.name));
nodes.forEach((node) => sortNodes(node.children));
};
sortNodes(rootNodes);
return rootNodes;
}
interface UserGroupTreeNodeProps {
node: UserGroupNode;
@@ -113,7 +113,11 @@ const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
setIsExpanded(!isExpanded);
}}
>
{isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
{isExpanded ? (
<ChevronDown size={16} />
) : (
<ChevronRight size={16} />
)}
</Button>
)}
{!hasChildren && <div className="w-6" />}
@@ -125,7 +129,7 @@ const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
</div>
</TableCell>
<TableCell className="text-center">
<Badge variant="secondary">{node.members?.length || 0}</Badge>
<Badge variant="secondary">{node.members?.length || 0}</Badge>
</TableCell>
<TableCell className="text-right">
<Button
@@ -151,237 +155,376 @@ const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
</Button>
</TableCell>
</TableRow>
{isExpanded && hasChildren && node.children.map((child) => (
<UserGroupTreeNode
key={child.id}
node={child}
level={level + 1}
onSelect={onSelect}
selectedGroupId={selectedGroupId}
onDelete={onDelete}
onAddSubGroup={onAddSubGroup}
/>
))}
{isExpanded &&
hasChildren &&
node.children.map((child) => (
<UserGroupTreeNode
key={child.id}
node={child}
level={level + 1}
onSelect={onSelect}
selectedGroupId={selectedGroupId}
onDelete={onDelete}
onAddSubGroup={onAddSubGroup}
/>
))}
</>
);
};
export function TenantUserGroupsTab() {
const params = useParams<{ tenantId: string }>();
const tenantId = params.tenantId ?? "";
const [newGroupName, setNewGroupName] = useState("");
const [newGroupDesc, setNewGroupNameDesc] = useState("");
const [newGroupUnitType, setNewGroupUnitType] = useState("Team");
const [newGroupParentId, setNewGroupParentId] = useState<string | null>(null);
const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
const groupsQuery = useQuery({
queryKey: ["groups", tenantId],
queryFn: () => fetchGroups(tenantId),
enabled: !!tenantId,
});
const createMutation = useMutation({
mutationFn: () =>
createGroup(tenantId, {
name: newGroupName,
description: newGroupDesc,
unitType: newGroupUnitType,
parentId: newGroupParentId || undefined,
}),
onSuccess: () => {
toast.success(t("msg.admin.groups.list.create_success", "그룹이 성공적으로 생성되었습니다."));
groupsQuery.refetch();
setNewGroupName("");
setNewGroupNameDesc("");
setNewGroupUnitType("Team");
setNewGroupParentId(null);
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.admin.groups.list.create_error", "그룹 생성 실패"), { description: error.response?.data?.error || error.message });
}
});
const deleteMutation = useMutation({
mutationFn: (id: string) => deleteGroup(tenantId, id),
onSuccess: () => {
toast.success(t("msg.admin.groups.list.delete_success", "그룹이 삭제되었습니다."));
groupsQuery.refetch();
if (selectedGroupId && selectedGroupId === (deleteMutation.variables as any)) {
setSelectedGroupId(null);
}
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.common.error", "그룹 삭제 실패"), { description: error.response?.data?.error || error.message });
}
const params = useParams<{ tenantId: string }>();
const tenantId = params.tenantId ?? "";
const [newGroupName, setNewGroupName] = useState("");
const [newGroupDesc, setNewGroupNameDesc] = useState("");
const [newGroupUnitType, setNewGroupUnitType] = useState("Team");
const [newGroupParentId, setNewGroupParentId] = useState<string | null>(null);
const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
const groupsQuery = useQuery({
queryKey: ["groups", tenantId],
queryFn: () => fetchGroups(tenantId),
enabled: !!tenantId,
});
const createMutation = useMutation({
mutationFn: () =>
createGroup(tenantId, {
name: newGroupName,
description: newGroupDesc,
unitType: newGroupUnitType,
parentId: newGroupParentId || undefined,
}),
onSuccess: () => {
toast.success(
t(
"msg.admin.groups.list.create_success",
"그룹이 성공적으로 생성되었습니다.",
),
);
groupsQuery.refetch();
setNewGroupName("");
setNewGroupNameDesc("");
setNewGroupUnitType("Team");
setNewGroupParentId(null);
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.admin.groups.list.create_error", "그룹 생성 실패"), {
description: error.response?.data?.error || error.message,
});
const addMemberMutation = useMutation({
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
addGroupMember(tenantId, groupId, userId),
onSuccess: () => {
toast.success(t("msg.admin.groups.members.add_success", "멤버가 추가되었습니다."));
groupsQuery.refetch();
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.common.error", "오류 발생"), { description: error.response?.data?.error || error.message });
},
});
const deleteMutation = useMutation({
mutationFn: (id: string) => deleteGroup(tenantId, id),
onSuccess: () => {
toast.success(
t("msg.admin.groups.list.delete_success", "그룹이 삭제되었습니다."),
);
groupsQuery.refetch();
if (
selectedGroupId &&
selectedGroupId === (deleteMutation.variables as any)
) {
setSelectedGroupId(null);
}
});
const removeMemberMutation = useMutation({
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
removeGroupMember(tenantId, groupId, userId),
onSuccess: () => {
toast.success(t("msg.admin.groups.members.remove_success", "멤버가 제거되었습니다."));
groupsQuery.refetch();
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.common.error", "오류 발생"), { description: error.response?.data?.error || error.message });
}
});
const groupTree = groupsQuery.data ? buildGroupTree(groupsQuery.data) : [];
const handleAddSubGroup = (parentId: string) => {
setNewGroupParentId(parentId);
};
const handleDeleteGroup = (groupId: string, groupName: string) => {
if (window.confirm(t("msg.admin.groups.list.delete_confirm", `그룹 "{{name}}"을(를) 삭제하시겠습니까?`, { name: groupName }))) {
deleteMutation.mutate(groupId);
}
};
const handleAddMember = (groupId: string) => {
const userId = window.prompt(t("msg.admin.groups.prompt.user_id", "추가할 사용자의 UUID를 입력하세요:"));
if (userId) {
addMemberMutation.mutate({ groupId, userId });
}
};
const currentGroup = groupsQuery.data?.find((g) => g.id === selectedGroupId);
return (
<div className="space-y-6 mt-6">
<div className="grid gap-6 md:grid-cols-3">
<Card className="bg-[var(--color-panel)] md:col-span-1 border-primary/20">
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2">
<Plus size={18} /> {t("ui.admin.groups.create.title", "새 그룹 생성")}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.common.error", "그룹 삭제 실패"), {
description: error.response?.data?.error || error.message,
});
},
});
const addMemberMutation = useMutation({
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
addGroupMember(tenantId, groupId, userId),
onSuccess: () => {
toast.success(
t("msg.admin.groups.members.add_success", "멤버가 추가되었습니다."),
);
groupsQuery.refetch();
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.common.error", "오류 발생"), {
description: error.response?.data?.error || error.message,
});
},
});
const removeMemberMutation = useMutation({
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
removeGroupMember(tenantId, groupId, userId),
onSuccess: () => {
toast.success(
t("msg.admin.groups.members.remove_success", "멤버가 제거되었습니다."),
);
groupsQuery.refetch();
},
onError: (error: AxiosError<{ error?: string }>) => {
toast.error(t("msg.common.error", "오류 발생"), {
description: error.response?.data?.error || error.message,
});
},
});
const groupTree = groupsQuery.data ? buildGroupTree(groupsQuery.data) : [];
const handleAddSubGroup = (parentId: string) => {
setNewGroupParentId(parentId);
};
const handleDeleteGroup = (groupId: string, groupName: string) => {
if (
window.confirm(
t(
"msg.admin.groups.list.delete_confirm",
`그룹 "{{name}}"을(를) 삭제하시겠습니까?`,
{ name: groupName },
),
)
) {
deleteMutation.mutate(groupId);
}
};
const handleAddMember = (groupId: string) => {
const userId = window.prompt(
t(
"msg.admin.groups.prompt.user_id",
"추가할 사용자의 UUID를 입력하세요:",
),
);
if (userId) {
addMemberMutation.mutate({ groupId, userId });
}
};
const currentGroup = groupsQuery.data?.find((g) => g.id === selectedGroupId);
return (
<div className="space-y-6 mt-6">
<div className="grid gap-6 md:grid-cols-3">
<Card className="bg-[var(--color-panel)] md:col-span-1 border-primary/20">
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2">
<Plus size={18} />{" "}
{t("ui.admin.groups.create.title", "새 그룹 생성")}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-1">
<Label htmlFor="name">{t("ui.admin.groups.form.name_label", "그룹 이름")}</Label>
<Input id="name" value={newGroupName} onChange={(e) => setNewGroupName(e.target.value)} />
<Label htmlFor="name">
{t("ui.admin.groups.form.name_label", "그룹 이름")}
</Label>
<Input
id="name"
value={newGroupName}
onChange={(e) => setNewGroupName(e.target.value)}
/>
</div>
<div className="space-y-1">
<Label htmlFor="unitType">{t("ui.admin.groups.form.unit_level_label", "조직 단위 레벨")}</Label>
<Input id="unitType" value={newGroupUnitType} onChange={(e) => setNewGroupUnitType(e.target.value)} />
<Label htmlFor="unitType">
{t("ui.admin.groups.form.unit_level_label", "조직 단위 레벨")}
</Label>
<Input
id="unitType"
value={newGroupUnitType}
onChange={(e) => setNewGroupUnitType(e.target.value)}
/>
</div>
<div className="space-y-1">
<Label htmlFor="parentId">{t("ui.admin.groups.form.parent_label", "상위 그룹 (선택)")}</Label>
<Label htmlFor="parentId">
{t("ui.admin.groups.form.parent_label", "상위 그룹 (선택)")}
</Label>
<select
id="parentId"
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
value={newGroupParentId || ""}
onChange={(e) => setNewGroupParentId(e.target.value || null)}
>
<option value="">{t("ui.admin.groups.form.parent_none", "없음 (최상위)")}</option>
{groupsQuery.data?.map(group => <option key={group.id} value={group.id}>{group.name}</option>)}
<option value="">
{t("ui.admin.groups.form.parent_none", "없음 (최상위)")}
</option>
{groupsQuery.data?.map((group) => (
<option key={group.id} value={group.id}>
{group.name}
</option>
))}
</select>
</div>
<div className="space-y-1">
<Label htmlFor="desc">{t("ui.admin.groups.form.desc_label", "설명")}</Label>
<Input id="desc" value={newGroupDesc} onChange={(e) => setNewGroupNameDesc(e.target.value)} />
<Label htmlFor="desc">
{t("ui.admin.groups.form.desc_label", "설명")}
</Label>
<Input
id="desc"
value={newGroupDesc}
onChange={(e) => setNewGroupNameDesc(e.target.value)}
/>
</div>
<Button className="w-full" onClick={() => createMutation.mutate()} disabled={!newGroupName || createMutation.isPending}>
<Button
className="w-full"
onClick={() => createMutation.mutate()}
disabled={!newGroupName || createMutation.isPending}
>
{t("ui.admin.groups.form.submit", "생성하기")}
</Button>
</CardContent>
</Card>
<Card className="bg-[var(--color-panel)] md:col-span-2">
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle>{t("ui.admin.groups.list.title", "User Groups")}</CardTitle>
<CardDescription>{t("msg.admin.groups.list.subtitle", "이 테넌트에 정의된 사용자 그룹 목록입니다.")}</CardDescription>
</div>
<Button variant="ghost" size="sm" onClick={() => groupsQuery.refetch()}><RefreshCw size={14} /></Button>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>{t("ui.admin.groups.table.name", "NAME")}</TableHead>
<TableHead className="text-center">{t("ui.admin.groups.table.members", "MEMBERS")}</TableHead>
<TableHead className="text-right">{t("ui.admin.groups.table.actions", "ACTIONS")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{groupsQuery.isLoading && <TableRow><TableCell colSpan={3}>{t("msg.admin.groups.list.loading", "로딩 중...")}</TableCell></TableRow>}
{!groupsQuery.isLoading && groupTree.length === 0 && <TableRow><TableCell colSpan={3} className="text-center py-8 text-muted-foreground">{t("msg.admin.groups.list.empty", "아직 등록된 그룹이 없습니다.")}</TableCell></TableRow>}
{groupTree.map(node => (
<UserGroupTreeNode
key={node.id}
node={node}
level={0}
onSelect={setSelectedGroupId}
selectedGroupId={selectedGroupId}
onDelete={handleDeleteGroup}
onAddSubGroup={handleAddSubGroup}
/>
))}
</TableBody>
</Table>
</CardContent>
</Card>
</div>
{currentGroup && (
<Card className="bg-[var(--color-panel)] border-t-4 border-t-primary">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Shield size={18} className="text-primary" /> {t("msg.admin.groups.members.title", "[{{name}}] 멤버 관리", { name: currentGroup.name })}
</CardContent>
</Card>
<Card className="bg-[var(--color-panel)] md:col-span-2">
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle>
{t("ui.admin.groups.list.title", "User Groups")}
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex justify-end mb-4">
<Button size="sm" onClick={() => handleAddMember(currentGroup.id)} disabled={addMemberMutation.isPending}>
<UserPlus size={14} className="mr-1" /> {t("ui.common.add", "멤버 추가")}
</Button>
</div>
<Table>
<TableHeader>
<CardDescription>
{t(
"msg.admin.groups.list.subtitle",
"이 테넌트에 정의된 사용자 그룹 목록입니다.",
)}
</CardDescription>
</div>
<Button
variant="ghost"
size="sm"
onClick={() => groupsQuery.refetch()}
>
<RefreshCw size={14} />
</Button>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>
{t("ui.admin.groups.table.name", "NAME")}
</TableHead>
<TableHead className="text-center">
{t("ui.admin.groups.table.members", "MEMBERS")}
</TableHead>
<TableHead className="text-right">
{t("ui.admin.groups.table.actions", "ACTIONS")}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{groupsQuery.isLoading && (
<TableRow>
<TableHead>{t("ui.admin.groups.members.table.name", "이름")}</TableHead>
<TableHead>{t("ui.admin.groups.members.table.email", "이메일")}</TableHead>
<TableHead className="text-right">{t("ui.admin.groups.members.table.remove", "제거")}</TableHead>
<TableCell colSpan={3}>
{t("msg.admin.groups.list.loading", "로딩 중...")}
</TableCell>
</TableRow>
</TableHeader>
<TableBody>
{currentGroup.members?.length === 0 && <TableRow><TableCell colSpan={3} className="text-center py-4 text-muted-foreground">{t("msg.admin.groups.members.empty", "멤버가 없습니다.")}</TableCell></TableRow>}
{currentGroup.members?.map(user => (
<TableRow key={user.id}>
<TableCell className="font-medium">{user.name}</TableCell>
<TableCell className="text-muted-foreground">{user.email}</TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="sm" onClick={() => removeMemberMutation.mutate({ groupId: currentGroup.id, userId: user.id })} disabled={removeMemberMutation.isPending}>
<UserMinus size={14} className="text-destructive" />
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
)}
)}
{!groupsQuery.isLoading && groupTree.length === 0 && (
<TableRow>
<TableCell
colSpan={3}
className="text-center py-8 text-muted-foreground"
>
{t(
"msg.admin.groups.list.empty",
"아직 등록된 그룹이 없습니다.",
)}
</TableCell>
</TableRow>
)}
{groupTree.map((node) => (
<UserGroupTreeNode
key={node.id}
node={node}
level={0}
onSelect={setSelectedGroupId}
selectedGroupId={selectedGroupId}
onDelete={handleDeleteGroup}
onAddSubGroup={handleAddSubGroup}
/>
))}
</TableBody>
</Table>
</CardContent>
</Card>
</div>
);
}
export default TenantUserGroupsTab;
{currentGroup && (
<Card className="bg-[var(--color-panel)] border-t-4 border-t-primary">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Shield size={18} className="text-primary" />{" "}
{t("msg.admin.groups.members.title", "[{{name}}] 멤버 관리", {
name: currentGroup.name,
})}
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex justify-end mb-4">
<Button
size="sm"
onClick={() => handleAddMember(currentGroup.id)}
disabled={addMemberMutation.isPending}
>
<UserPlus size={14} className="mr-1" />{" "}
{t("ui.common.add", "멤버 추가")}
</Button>
</div>
<Table>
<TableHeader>
<TableRow>
<TableHead>
{t("ui.admin.groups.members.table.name", "이름")}
</TableHead>
<TableHead>
{t("ui.admin.groups.members.table.email", "이메일")}
</TableHead>
<TableHead className="text-right">
{t("ui.admin.groups.members.table.remove", "제거")}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{currentGroup.members?.length === 0 && (
<TableRow>
<TableCell
colSpan={3}
className="text-center py-4 text-muted-foreground"
>
{t("msg.admin.groups.members.empty", "멤버가 없습니다.")}
</TableCell>
</TableRow>
)}
{currentGroup.members?.map((user) => (
<TableRow key={user.id}>
<TableCell className="font-medium">{user.name}</TableCell>
<TableCell className="text-muted-foreground">
{user.email}
</TableCell>
<TableCell className="text-right">
<Button
variant="ghost"
size="sm"
onClick={() =>
removeMemberMutation.mutate({
groupId: currentGroup.id,
userId: user.id,
})
}
disabled={removeMemberMutation.isPending}
>
<UserMinus size={14} className="text-destructive" />
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
)}
</div>
);
}
export default TenantUserGroupsTab;

183
adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx
View File

@@ -101,10 +101,14 @@ export function UserGroupDetailPage() {
queryClient.invalidateQueries({ queryKey: ["user-group-detail", id] });
setIsAddMemberOpen(false);
setSelectedUserId("");
toast.success(t("msg.admin.groups.members.add_success", "구성원이 추가되었습니다."));
toast.success(
t("msg.admin.groups.members.add_success", "구성원이 추가되었습니다."),
);
},
onError: (error: any) => {
toast.error(error.message || t("err.common.unknown", "오류가 발생했습니다."));
toast.error(
error.message || t("err.common.unknown", "오류가 발생했습니다."),
);
},
});
@@ -112,7 +116,12 @@ export function UserGroupDetailPage() {
mutationFn: (userId: string) => removeGroupMember(tenantId!, id!, userId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user-group-detail", id] });
toast.success(t("msg.admin.groups.members.remove_success", "구성원이 제외되었습니다."));
toast.success(
t(
"msg.admin.groups.members.remove_success",
"구성원이 제외되었습니다.",
),
);
},
});
@@ -122,10 +131,14 @@ export function UserGroupDetailPage() {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user-group-roles", id] });
setIsAddRoleOpen(false);
toast.success(t("msg.admin.groups.roles.assign_success", "역할이 할당되었습니다."));
toast.success(
t("msg.admin.groups.roles.assign_success", "역할이 할당되었습니다."),
);
},
onError: (error: any) => {
toast.error(error.message || t("err.common.unknown", "오류가 발생했습니다."));
toast.error(
error.message || t("err.common.unknown", "오류가 발생했습니다."),
);
},
});
@@ -134,7 +147,9 @@ export function UserGroupDetailPage() {
removeGroupRole(tenantId!, id!, role.targetTenantId, role.relation),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user-group-roles", id] });
toast.success(t("msg.admin.groups.roles.remove_success", "역할이 회수되었습니다."));
toast.success(
t("msg.admin.groups.roles.remove_success", "역할이 회수되었습니다."),
);
},
});
@@ -170,7 +185,10 @@ export function UserGroupDetailPage() {
to={`/tenants/${tenantId}/organization`}
className="text-primary hover:underline text-sm"
>
{t("ui.admin.groups.detail.breadcrumb_org", "조직 관리 목록으로 돌아가기")}
{t(
"ui.admin.groups.detail.breadcrumb_org",
"조직 관리 목록으로 돌아가기",
)}
</Link>
</div>
</div>
@@ -196,7 +214,9 @@ export function UserGroupDetailPage() {
{t("ui.admin.groups.detail.breadcrumb_org", "조직 관리")}
</Link>
<span>/</span>
<span className="text-foreground">{t("ui.admin.groups.detail.breadcrumb_unit", "조직 단위")}</span>
<span className="text-foreground">
{t("ui.admin.groups.detail.breadcrumb_unit", "조직 단위")}
</span>
</div>
<div className="flex items-center gap-3">
<div className="p-2 bg-primary/10 rounded-lg">
@@ -210,12 +230,17 @@ export function UserGroupDetailPage() {
)}
</div>
<p className="text-sm text-muted-foreground">
{currentGroup.description || t("msg.common.no_description", "설명이 없습니다.")}
{currentGroup.description ||
t("msg.common.no_description", "설명이 없습니다.")}
</p>
</div>
<div className="flex gap-2">
<Badge variant="outline" className="font-normal">{t("ui.admin.groups.detail.breadcrumb_unit", "조직 단위")}</Badge>
<Badge variant="muted" className="font-normal">ID: {id?.split("-")[0]}...</Badge>
<Badge variant="outline" className="font-normal">
{t("ui.admin.groups.detail.breadcrumb_unit", "조직 단위")}
</Badge>
<Badge variant="muted" className="font-normal">
ID: {id?.split("-")[0]}...
</Badge>
</div>
</header>
@@ -224,8 +249,15 @@ export function UserGroupDetailPage() {
<Card className="border-none shadow-sm bg-[var(--color-panel)]">
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle>{t("ui.admin.groups.detail.members_title", "구성원 관리")}</CardTitle>
<CardDescription>{t("ui.admin.groups.detail.members_subtitle", "이 조직에 소속된 사용자를 관리합니다.")}</CardDescription>
<CardTitle>
{t("ui.admin.groups.detail.members_title", "구성원 관리")}
</CardTitle>
<CardDescription>
{t(
"ui.admin.groups.detail.members_subtitle",
"이 조직에 소속된 사용자를 관리합니다.",
)}
</CardDescription>
</div>
<Dialog open={isAddMemberOpen} onOpenChange={setIsAddMemberOpen}>
<DialogTrigger asChild>
@@ -236,16 +268,24 @@ export function UserGroupDetailPage() {
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{t("ui.admin.groups.detail.members_title", "구성원 추가")}</DialogTitle>
<DialogTitle>
{t("ui.admin.groups.detail.members_title", "구성원 추가")}
</DialogTitle>
<DialogDescription>
{t("ui.admin.groups.detail.members_subtitle", "사용자를 검색하여 조직 구성원으로 추가합니다.")}
{t(
"ui.admin.groups.detail.members_subtitle",
"사용자를 검색하여 조직 구성원으로 추가합니다.",
)}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label>{t("ui.common.search", "사용자 검색")}</Label>
<Input
placeholder={t("ui.admin.users.list.search_placeholder", "이메일 또는 이름으로 검색...")}
placeholder={t(
"ui.admin.users.list.search_placeholder",
"이메일 또는 이름으로 검색...",
)}
value={searchUser}
onChange={(e) => setSearchUser(e.target.value)}
/>
@@ -257,7 +297,12 @@ export function UserGroupDetailPage() {
onValueChange={setSelectedUserId}
>
<SelectTrigger>
<SelectValue placeholder={t("ui.common.select_placeholder", "사용자를 선택하세요")} />
<SelectValue
placeholder={t(
"ui.common.select_placeholder",
"사용자를 선택하세요",
)}
/>
</SelectTrigger>
<SelectContent>
{userList?.items.map((user) => (
@@ -291,30 +336,43 @@ export function UserGroupDetailPage() {
<Table>
<TableHeader className="bg-muted/30">
<TableRow>
<TableHead className="font-bold">{t("ui.admin.users.list.table.name_email", "사용자")}</TableHead>
<TableHead className="text-right font-bold">{t("ui.admin.groups.table.actions", "액션")}</TableHead>
<TableHead className="font-bold">
{t("ui.admin.users.list.table.name_email", "사용자")}
</TableHead>
<TableHead className="text-right font-bold">
{t("ui.admin.groups.table.actions", "액션")}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{!currentGroup.members || currentGroup.members.length === 0 ? (
{!currentGroup.members ||
currentGroup.members.length === 0 ? (
<TableRow>
<TableCell
colSpan={2}
className="text-center py-8 text-muted-foreground"
>
{t("msg.admin.groups.members.empty", "구성원이 없습니다.")}
{t(
"msg.admin.groups.members.empty",
"구성원이 없습니다.",
)}
</TableCell>
</TableRow>
) : (
currentGroup.members.map((member) => (
<TableRow key={member.id} className="hover:bg-muted/30 transition-colors">
<TableRow
key={member.id}
className="hover:bg-muted/30 transition-colors"
>
<TableCell>
<div className="flex items-center gap-3">
<div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
{member.name.charAt(0)}
</div>
<div>
<p className="font-medium text-sm">{member.name}</p>
<p className="font-medium text-sm">
{member.name}
</p>
<p className="text-xs text-muted-foreground">
{member.email}
</p>
@@ -327,7 +385,15 @@ export function UserGroupDetailPage() {
size="icon"
className="text-destructive hover:bg-destructive/10"
onClick={() => {
if (confirm(t("msg.admin.groups.members.remove_confirm", "제거하시겠습니까?", { name: member.name }))) {
if (
confirm(
t(
"msg.admin.groups.members.remove_confirm",
"제거하시겠습니까?",
{ name: member.name },
),
)
) {
removeMemberMutation.mutate(member.id);
}
}}
@@ -348,9 +414,14 @@ export function UserGroupDetailPage() {
<Card className="border-none shadow-sm bg-[var(--color-panel)]">
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle>{t("ui.admin.groups.detail.permissions_title", "권한 관리")}</CardTitle>
<CardTitle>
{t("ui.admin.groups.detail.permissions_title", "권한 관리")}
</CardTitle>
<CardDescription>
{t("ui.admin.groups.detail.permissions_subtitle", "이 조직이 다른 테넌트에 가지는 역할을 정의합니다.")}
{t(
"ui.admin.groups.detail.permissions_subtitle",
"이 조직이 다른 테넌트에 가지는 역할을 정의합니다.",
)}
</CardDescription>
</div>
<Dialog open={isAddRoleOpen} onOpenChange={setIsAddRoleOpen}>
@@ -362,20 +433,35 @@ export function UserGroupDetailPage() {
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{t("ui.admin.groups.detail.permissions_title", "테넌트 역할 할당")}</DialogTitle>
<DialogTitle>
{t(
"ui.admin.groups.detail.permissions_title",
"테넌트 역할 할당",
)}
</DialogTitle>
<DialogDescription>
{t("msg.admin.groups.roles.description", "이 조직의 구성원들이 대상 테넌트에서 상속받을 역할을 선택하세요.")}
{t(
"msg.admin.groups.roles.description",
"이 조직의 구성원들이 대상 테넌트에서 상속받을 역할을 선택하세요.",
)}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label>{t("ui.admin.users.detail.form.tenant", "대상 테넌트")}</Label>
<Label>
{t("ui.admin.users.detail.form.tenant", "대상 테넌트")}
</Label>
<Select
value={selectedTargetTenantId}
onValueChange={setSelectedTargetTenantId}
>
<SelectTrigger>
<SelectValue placeholder={t("ui.admin.tenants.list.select_placeholder", "테넌트를 선택하세요")} />
<SelectValue
placeholder={t(
"ui.admin.tenants.list.select_placeholder",
"테넌트를 선택하세요",
)}
/>
</SelectTrigger>
<SelectContent>
{tenantList?.items.map((t) => (
@@ -387,7 +473,9 @@ export function UserGroupDetailPage() {
</Select>
</div>
<div className="space-y-2">
<Label>{t("ui.admin.users.detail.form.role", "역할 (Relation)")}</Label>
<Label>
{t("ui.admin.users.detail.form.role", "역할 (Relation)")}
</Label>
<Select
value={selectedRelation}
onValueChange={setSelectedRelation}
@@ -431,9 +519,15 @@ export function UserGroupDetailPage() {
<Table>
<TableHeader className="bg-muted/30">
<TableRow>
<TableHead className="font-bold">{t("ui.admin.users.detail.form.tenant", "대상 테넌트")}</TableHead>
<TableHead className="font-bold">{t("ui.admin.users.detail.form.role", "역할")}</TableHead>
<TableHead className="text-right font-bold">{t("ui.admin.groups.table.actions", "액션")}</TableHead>
<TableHead className="font-bold">
{t("ui.admin.users.detail.form.tenant", "대상 테넌트")}
</TableHead>
<TableHead className="font-bold">
{t("ui.admin.users.detail.form.role", "역할")}
</TableHead>
<TableHead className="text-right font-bold">
{t("ui.admin.groups.table.actions", "액션")}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -449,19 +543,28 @@ export function UserGroupDetailPage() {
colSpan={3}
className="text-center py-8 text-muted-foreground"
>
{t("msg.admin.groups.roles.empty", "할당된 역할이 없습니다.")}
{t(
"msg.admin.groups.roles.empty",
"할당된 역할이 없습니다.",
)}
</TableCell>
</TableRow>
) : (
groupRoles.map((role, idx) => (
<TableRow key={`${role.tenantId}-${role.relation}-${idx}`} className="hover:bg-muted/30 transition-colors">
<TableRow
key={`${role.tenantId}-${role.relation}-${idx}`}
className="hover:bg-muted/30 transition-colors"
>
<TableCell>
<div className="font-medium text-sm">
{role.tenantName || role.tenantId}
</div>
</TableCell>
<TableCell>
<Badge variant="outline" className="capitalize font-normal">
<Badge
variant="outline"
className="capitalize font-normal"
>
{role.relation}
</Badge>
</TableCell>
@@ -471,7 +574,11 @@ export function UserGroupDetailPage() {
size="icon"
className="text-destructive hover:bg-destructive/10"
onClick={() => {
if (confirm(t("msg.admin.groups.roles.remove_confirm"))) {
if (
confirm(
t("msg.admin.groups.roles.remove_confirm"),
)
) {
removeRoleMutation.mutate({
targetTenantId: role.tenantId,
relation: role.relation,

9
adminfront/src/features/users/UserListPage.tsx
View File

@@ -200,7 +200,10 @@ function UserListPage() {
)}
</TableHead>
<TableHead>
{t("ui.admin.users.list.table.position_job", "POSITION / JOB")}
{t(
"ui.admin.users.list.table.position_job",
"POSITION / JOB",
)}
</TableHead>
<TableHead>
{t("ui.admin.users.list.table.created", "CREATED")}
@@ -277,7 +280,9 @@ function UserListPage() {
</TableCell>
<TableCell>
<div className="flex flex-col text-sm">
<span className="font-medium">{user.position || "-"}</span>
<span className="font-medium">
{user.position || "-"}
</span>
<span className="text-xs text-muted-foreground">
{user.jobTitle || "-"}
</span>