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

린트 적용

Browse Source
This commit is contained in:
조찬영
2026-03-05 17:50:34 +09:00
parent c2b55081a6
commit 45ae1bb1c0
21 changed files with 1114 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
adminfront/src/components/auth/RoleGuard.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { useQuery } from "@tanstack/react-query";
import type * as React from "react";
import { fetchMe } from "../../lib/adminApi";
interface RoleGuardProps {
@@ -10,13 +10,17 @@ interface RoleGuardProps {
/**
* RoleGuard conditionally renders children based on the current user's role.
*
*
* Usage:
* <RoleGuard roles={['super_admin']}>
* <button>System Only Action</button>
* </RoleGuard>
*/
export function RoleGuard({ children, roles, fallback = null }: RoleGuardProps) {
export function RoleGuard({
children,
roles,
fallback = null,
}: RoleGuardProps) {
const { data: profile, isLoading } = useQuery({
queryKey: ["me"],
queryFn: fetchMe,

2
adminfront/src/components/layout/AppLayout.tsx
View File

@@ -55,7 +55,7 @@ function AppLayout() {
const manageableCount = profile?.manageableTenants?.length ?? 0;
// Filter out restricted items for non-super admins
const filteredItems = items.filter(item => {
const filteredItems = items.filter((item) => {
if (item.to === "/api-keys") return isSuperAdmin;
return true;
});

40
adminfront/src/features/overview/GlobalOverviewPage.tsx
View File

@@ -7,6 +7,7 @@ import {
Users,
} from "lucide-react";
import { Link } from "react-router-dom";
import { RoleGuard } from "../../components/auth/RoleGuard";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import {
@@ -17,7 +18,6 @@ import {
CardTitle,
} from "../../components/ui/card";
import { t } from "../../lib/i18n";
import { RoleGuard } from "../../components/auth/RoleGuard";
import PermissionChecker from "./components/PermissionChecker";
function GlobalOverviewPage() {
@@ -54,7 +54,9 @@ function GlobalOverviewPage() {
<RoleGuard roles={["super_admin"]}>
<Card className="bg-[var(--color-panel)]">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardDescription>{t("ui.admin.overview.summary.total_tenants", "Total Tenants")}</CardDescription>
<CardDescription>
{t("ui.admin.overview.summary.total_tenants", "Total Tenants")}
</CardDescription>
<div className="rounded-full border border-[var(--color-border)] p-2 text-[var(--color-muted)]">
<Users size={16} />
</div>
@@ -62,13 +64,18 @@ function GlobalOverviewPage() {
<CardContent>
<div className="text-2xl font-semibold">-</div>
<p className="mt-1 text-xs text-[var(--color-muted)]">
{t("msg.admin.overview.summary.total_tenants", "Tenant-aware core")}
{t(
"msg.admin.overview.summary.total_tenants",
"Tenant-aware core",
)}
</p>
</CardContent>
</Card>
<Card className="bg-[var(--color-panel)]">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardDescription>{t("ui.admin.overview.summary.oidc_clients", "OIDC Clients")}</CardDescription>
<CardDescription>
{t("ui.admin.overview.summary.oidc_clients", "OIDC Clients")}
</CardDescription>
<div className="rounded-full border border-[var(--color-border)] p-2 text-[var(--color-muted)]">
<ShieldCheck size={16} />
</div>
@@ -81,10 +88,15 @@ function GlobalOverviewPage() {
</CardContent>
</Card>
</RoleGuard>
<Card className="bg-[var(--color-panel)]">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardDescription>{t("ui.admin.overview.summary.audit_events_24h", "Audit Events (24h)")}</CardDescription>
<CardDescription>
{t(
"ui.admin.overview.summary.audit_events_24h",
"Audit Events (24h)",
)}
</CardDescription>
<div className="rounded-full border border-[var(--color-border)] p-2 text-[var(--color-muted)]">
<Activity size={16} />
</div>
@@ -92,14 +104,19 @@ function GlobalOverviewPage() {
<CardContent>
<div className="text-2xl font-semibold">-</div>
<p className="mt-1 text-xs text-[var(--color-muted)]">
{t("msg.admin.overview.summary.audit_events_24h", "ClickHouse stream")}
{t(
"msg.admin.overview.summary.audit_events_24h",
"ClickHouse stream",
)}
</p>
</CardContent>
</Card>
<Card className="bg-[var(--color-panel)]">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardDescription>{t("ui.admin.overview.summary.policy_gate", "Policy Gate")}</CardDescription>
<CardDescription>
{t("ui.admin.overview.summary.policy_gate", "Policy Gate")}
</CardDescription>
<div className="rounded-full border border-[var(--color-border)] p-2 text-[var(--color-muted)]">
<Database size={16} />
</div>
@@ -107,7 +124,10 @@ function GlobalOverviewPage() {
<CardContent>
<div className="text-2xl font-semibold">Planned</div>
<p className="mt-1 text-xs text-[var(--color-muted)]">
{t("msg.admin.overview.summary.policy_gate", "Keto + Admin checks")}
{t(
"msg.admin.overview.summary.policy_gate",
"Keto + Admin checks",
)}
</p>
</CardContent>
</Card>

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

@@ -3,6 +3,7 @@ import type { AxiosError } from "axios";
import { CornerDownRight, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
import * as React from "react";
import { Link, useNavigate } from "react-router-dom";
import { RoleGuard } from "../../../components/auth/RoleGuard";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {
@@ -27,7 +28,6 @@ import {
fetchTenants,
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";
import { RoleGuard } from "../../../components/auth/RoleGuard";
function TenantListPage() {
const navigate = useNavigate();
@@ -41,7 +41,10 @@ function TenantListPage() {
if (profile?.role === "tenant_admin") {
const manageableCount = profile.manageableTenants?.length ?? 0;
// If only 1 in array, OR array is empty but we have a primary tenantId
if ((manageableCount === 1 || manageableCount === 0) && profile.tenantId) {
if (
(manageableCount === 1 || manageableCount === 0) &&
profile.tenantId
) {
navigate(`/tenants/${profile.tenantId}`, { replace: true });
}
}
@@ -50,7 +53,10 @@ function TenantListPage() {
const query = useQuery({
queryKey: ["tenants", { limit: 1000, offset: 0 }],
queryFn: () => fetchTenants(1000, 0),
enabled: profile?.role === "super_admin" || (profile?.role === "tenant_admin" && (profile.manageableTenants?.length ?? 0) > 1),
enabled:
profile?.role === "super_admin" ||
(profile?.role === "tenant_admin" &&
(profile.manageableTenants?.length ?? 0) > 1),
});
const deleteMutation = useMutation({
@@ -60,17 +66,28 @@ function TenantListPage() {
},
});
if (profile && profile.role !== "super_admin" && profile.role !== "tenant_admin") {
if (
profile &&
profile.role !== "super_admin" &&
profile.role !== "tenant_admin"
) {
return (
<div className="flex h-[50vh] flex-col items-center justify-center space-y-4">
<h3 className="text-xl font-bold">{t("msg.admin.common.forbidden", "접근 권한이 없습니다.")}</h3>
<Button onClick={() => navigate("/")}>{t("ui.common.go_home", "홈으로 이동")}</Button>
<h3 className="text-xl font-bold">
{t("msg.admin.common.forbidden", "접근 권한이 없습니다.")}
</h3>
<Button onClick={() => navigate("/")}>
{t("ui.common.go_home", "홈으로 이동")}
</Button>
</div>
);
}
// While redirecting (only if exactly one manageable tenant)
if (profile?.role === "tenant_admin" && (profile.manageableTenants?.length ?? 0) <= 1) {
if (
profile?.role === "tenant_admin" &&
(profile.manageableTenants?.length ?? 0) <= 1
) {
return null;
}

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

@@ -71,7 +71,8 @@ export function TenantSchemaPage() {
: "text",
required: Boolean(field?.required),
adminOnly: Boolean(field?.adminOnly),
validation: typeof field?.validation === "string" ? field.validation : "",
validation:
typeof field?.validation === "string" ? field.validation : "",
})),
);
}
@@ -170,7 +171,9 @@ export function TenantSchemaPage() {
</Label>
<Input
value={field.key}
onChange={(e) => updateField(index, { key: e.target.value })}
onChange={(e) =>
updateField(index, { key: e.target.value })
}
placeholder={t(
"ui.admin.tenants.schema.field.key_placeholder",
"예: employee_id",
@@ -315,4 +318,3 @@ export function TenantSchemaPage() {
</div>
);
}

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

@@ -144,7 +144,7 @@ const MemberListDialog: React.FC<{
{node.name}{" "}
{t("ui.admin.tenants.members.list_title", "구성원 관리")}
<span className="text-sm font-normal text-muted-foreground ml-1">
({isDirectLoading ? "..." : directData?.total ?? 0})
({isDirectLoading ? "..." : (directData?.total ?? 0)})
</span>
</DialogTitle>
<DialogDescription>
@@ -167,7 +167,7 @@ const MemberListDialog: React.FC<{
className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-0 py-2"
>
{t("ui.admin.tenants.members.direct", "소속 멤버")} (
{isDirectLoading ? "..." : directData?.total ?? 0})
{isDirectLoading ? "..." : (directData?.total ?? 0)})
</TabsTrigger>
<TabsTrigger
value="descendants"
@@ -715,7 +715,10 @@ const TenantTreeRow: React.FC<{
type="button"
className="flex items-center gap-2 cursor-pointer hover:bg-muted p-1.5 rounded-md transition-all group/members w-full text-left"
onClick={() => setIsMemberListOpen(true)}
title={t("msg.admin.org.hover_member_info", "클릭하여 멤버 상세 조회")}
title={t(
"msg.admin.org.hover_member_info",
"클릭하여 멤버 상세 조회",
)}
>
<div className="bg-primary/10 p-1.5 rounded text-primary">
<Users size={16} />
@@ -872,10 +875,7 @@ function TenantUserGroupsTab() {
const tree = buildTenantFullTree(allTenants, tenantId);
if (tree.currentBase) {
// Merge backend-provided UserGroups into the tree as virtual children
tree.currentBase.children = [
...tree.currentBase.children,
...groupNodes,
];
tree.currentBase.children = [...tree.currentBase.children, ...groupNodes];
}
return tree;
}, [allTenants, tenantId, groupNodes]);
@@ -1092,9 +1092,9 @@ function TenantUserGroupsTab() {
/>
</div>
{treeSearchTerm && (
<Button
variant="ghost"
size="sm"
<Button
variant="ghost"
size="sm"
onClick={() => setTreeSearchTerm("")}
className="text-xs"
>

11
adminfront/src/features/users/UserCreatePage.tsx
View File

@@ -103,9 +103,13 @@ function UserCreatePage() {
const registerMetadata = (field: UserSchemaField) =>
register(`metadata.${field.key}` as `metadata.${string}`, {
required: field.required
? t("msg.admin.users.create.form.field_required", "{{label}}은(는) 필수입니다.", {
label: field.label || field.key,
})
? t(
"msg.admin.users.create.form.field_required",
"{{label}}은(는) 필수입니다.",
{
label: field.label || field.key,
},
)
: false,
pattern: field.validation
? {
@@ -537,5 +541,4 @@ function UserCreatePage() {
);
}
export default UserCreatePage;

134
adminfront/src/features/users/UserDetailPage.tsx
View File

@@ -1,6 +1,13 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { ArrowLeft, BadgeCheck, Building2, Loader2, Save, Users } from "lucide-react";
import {
ArrowLeft,
BadgeCheck,
Building2,
Loader2,
Save,
Users,
} from "lucide-react";
import * as React from "react";
import { useForm } from "react-hook-form";
import { Link, useNavigate, useParams } from "react-router-dom";
@@ -36,16 +43,16 @@ type UserSchemaField = {
type UserFormValues = UserUpdateRequest & { metadata: Record<string, unknown> };
// [New] Component for per-tenant profile/schema management
function TenantProfileCard({
tenant,
register,
errors,
isAdmin
}: {
tenant: any,
register: any,
errors: any,
isAdmin: boolean
function TenantProfileCard({
tenant,
register,
errors,
isAdmin,
}: {
tenant: any;
register: any;
errors: any;
isAdmin: boolean;
}) {
const { data: detail, isLoading } = useQuery({
queryKey: ["tenant", tenant.id],
@@ -56,7 +63,12 @@ function TenantProfileCard({
? (detail?.config?.userSchema as UserSchemaField[])
: [];
if (isLoading) return <div className="p-4 border rounded-lg animate-pulse bg-muted/20">Loading schema...</div>;
if (isLoading)
return (
<div className="p-4 border rounded-lg animate-pulse bg-muted/20">
Loading schema...
</div>
);
if (schema.length === 0) return null;
return (
@@ -64,16 +76,23 @@ function TenantProfileCard({
<div className="bg-muted/50 px-4 py-2 border-b border-border flex items-center justify-between">
<div className="flex items-center gap-2">
<Building2 size={14} className="text-primary" />
<span className="text-xs font-bold uppercase tracking-tight">{tenant.name}</span>
<span className="text-xs font-bold uppercase tracking-tight">
{tenant.name}
</span>
</div>
<span className="text-[10px] font-mono opacity-50">{tenant.slug}</span>
</div>
<div className="p-4 grid gap-4 md:grid-cols-2">
{schema.map((field) => (
<div key={field.key} className="space-y-2">
<Label htmlFor={`metadata.${tenant.id}.${field.key}`} className="text-xs">
<Label
htmlFor={`metadata.${tenant.id}.${field.key}`}
className="text-xs"
>
{field.label}
{field.required && <span className="ml-1 text-destructive">*</span>}
{field.required && (
<span className="ml-1 text-destructive">*</span>
)}
{field.adminOnly && (
<span className="ml-2 text-[9px] bg-blue-500/10 text-blue-500 px-1.5 py-0.5 rounded uppercase font-bold">
Admin Only
@@ -83,13 +102,24 @@ function TenantProfileCard({
<Input
id={`metadata.${tenant.id}.${field.key}`}
type={
field.type === "number" ? "number" :
field.type === "date" ? "date" :
field.type === "boolean" ? "checkbox" : "text"
field.type === "number"
? "number"
: field.type === "date"
? "date"
: field.type === "boolean"
? "checkbox"
: "text"
}
className={
field.type === "boolean" ? "w-auto h-auto" : "h-8 text-sm"
}
className={field.type === "boolean" ? "w-auto h-auto" : "h-8 text-sm"}
{...register(`metadata.${tenant.id}.${field.key}`, {
required: field.required ? t("msg.admin.users.detail.form.field_required", "필수입니다.") : false,
required: field.required
? t(
"msg.admin.users.detail.form.field_required",
"필수입니다.",
)
: false,
})}
/>
{errors.metadata?.[tenant.id]?.[field.key] && (
@@ -154,7 +184,8 @@ function UserDetailPage() {
},
});
const isAdmin = profile?.role === "super_admin" || profile?.role === "tenant_admin";
const isAdmin =
profile?.role === "super_admin" || profile?.role === "tenant_admin";
React.useEffect(() => {
if (user) {
@@ -224,7 +255,10 @@ function UserDetailPage() {
// Combined affiliated tenants
const userAffiliatedTenants = [...(user.joinedTenants || [])];
if (user.tenant && !userAffiliatedTenants.find(t => t.id === user.tenant?.id)) {
if (
user.tenant &&
!userAffiliatedTenants.find((t) => t.id === user.tenant?.id)
) {
userAffiliatedTenants.push(user.tenant);
}
@@ -281,35 +315,55 @@ function UserDetailPage() {
<div className="rounded-lg border border-border bg-muted/30 p-4 space-y-4">
<h3 className="text-sm font-semibold flex items-center gap-2">
<Building2 size={16} className="text-primary" />
{t("ui.admin.users.detail.tenants_section.title", "소속 및 조직 정보")}
{t(
"ui.admin.users.detail.tenants_section.title",
"소속 및 조직 정보",
)}
</h3>
<div className="grid gap-6 md:grid-cols-2">
<div className="space-y-2">
<Label className="text-[10px] uppercase text-muted-foreground tracking-wider font-bold">
{t("ui.admin.users.detail.tenants_section.primary", "대표 소속 테넌트")}
{t(
"ui.admin.users.detail.tenants_section.primary",
"대표 소속 테넌트",
)}
</Label>
{/* Select box to specify representative tenant from joined ones */}
{userAffiliatedTenants.length > 0 ? (
<div className="relative">
<select
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:opacity-50"
{...register("companyCode")}
disabled={profile?.role === "tenant_admin" && userAffiliatedTenants.length <= 1}
disabled={
profile?.role === "tenant_admin" &&
userAffiliatedTenants.length <= 1
}
>
<option value="">{t("ui.admin.users.detail.form.tenant_global", "시스템 전역")}</option>
<option value="">
{t(
"ui.admin.users.detail.form.tenant_global",
"시스템 전역",
)}
</option>
{userAffiliatedTenants.map((t) => (
<option key={t.id} value={t.slug}>
{t.name} ({t.slug})
</option>
))}
</select>
<BadgeCheck size={14} className="absolute right-8 top-3 text-primary pointer-events-none" />
<BadgeCheck
size={14}
className="absolute right-8 top-3 text-primary pointer-events-none"
/>
</div>
) : (
<div className="flex items-center gap-2 p-2 rounded-md bg-background border border-dashed border-border text-muted-foreground italic text-xs">
{t("ui.admin.users.detail.form.tenant_global", "시스템 전역 (소속 없음)")}
{t(
"ui.admin.users.detail.form.tenant_global",
"시스템 전역 (소속 없음)",
)}
</div>
)}
<p className="text-[10px] text-muted-foreground">
@@ -320,15 +374,22 @@ function UserDetailPage() {
{userAffiliatedTenants.length > 1 && (
<div className="space-y-1">
<Label className="text-[10px] uppercase text-muted-foreground tracking-wider font-bold">
{t("ui.admin.users.detail.tenants_section.additional", "전체 소속 목록")}
{t(
"ui.admin.users.detail.tenants_section.additional",
"전체 소속 목록",
)}
</Label>
<div className="flex flex-wrap gap-1.5 pt-1">
{userAffiliatedTenants.map(jt => (
<Link
{userAffiliatedTenants.map((jt) => (
<Link
key={jt.id}
to={`/tenants/${jt.id}`}
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded border text-[11px] transition-colors ${
jt.id === tenants.find(t => t.slug === watch("companyCode"))?.id ? "bg-primary/10 border-primary/30 text-primary font-bold" : "bg-background border-border text-muted-foreground hover:border-primary/50"
jt.id ===
tenants.find((t) => t.slug === watch("companyCode"))
?.id
? "bg-primary/10 border-primary/30 text-primary font-bold"
: "bg-background border-border text-muted-foreground hover:border-primary/50"
}`}
>
<Users size={10} />
@@ -453,7 +514,10 @@ function UserDetailPage() {
<div className="border-t pt-6 space-y-6">
<div className="flex flex-col gap-1">
<h3 className="text-sm font-bold text-muted-foreground uppercase tracking-wider">
{t("ui.admin.users.detail.custom_fields.multi_title", "테넌트별 프로필 관리")}
{t(
"ui.admin.users.detail.custom_fields.multi_title",
"테넌트별 프로필 관리",
)}
</h3>
<p className="text-[11px] text-muted-foreground">
사용자가 소속된 각 테넌트별 맞춤 정보를 관리합니다.

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

@@ -45,15 +45,15 @@ import {
bulkDeleteUsers,
bulkUpdateUsers,
deleteUser,
exportUsersCSVUrl,
fetchMe,
fetchTenant,
fetchTenants,
fetchUsers,
exportUsersCSVUrl,
} from "../../lib/adminApi";
import { t } from "../../lib/i18n";
import { UserBulkUploadModal } from "./components/UserBulkUploadModal";
import { UserBulkMoveGroupModal } from "./components/UserBulkMoveGroupModal";
import { UserBulkUploadModal } from "./components/UserBulkUploadModal";
type UserSchemaField = {
key: string;
@@ -67,7 +67,9 @@ function UserListPage() {
const [search, setSearch] = React.useState("");
const [searchDraft, setSearchDraft] = React.useState("");
const [selectedCompany, setSelectedCompany] = React.useState<string>("");
const [visibleColumns, setVisibleColumns] = React.useState<Record<string, boolean>>({});
const [visibleColumns, setVisibleColumns] = React.useState<
Record<string, boolean>
>({});
const [selectedUserIds, setSelectedUserIds] = React.useState<string[]>([]);
const limit = 50;
const offset = (page - 1) * limit;
@@ -129,7 +131,10 @@ function UserListPage() {
};
const query = useQuery({
queryKey: ["users", { limit, offset, search, companyCode: selectedCompany }],
queryKey: [
"users",
{ limit, offset, search, companyCode: selectedCompany },
],
queryFn: () => fetchUsers(limit, offset, search, selectedCompany),
placeholderData: (previousData) => previousData,
});
@@ -190,7 +195,12 @@ function UserListPage() {
onSuccess: () => {
query.refetch();
setSelectedUserIds([]);
toast.success(t("msg.admin.users.bulk.delete_success", "선택한 사용자들이 삭제되었습니다."));
toast.success(
t(
"msg.admin.users.bulk.delete_success",
"선택한 사용자들이 삭제되었습니다.",
),
);
},
});
@@ -199,7 +209,12 @@ function UserListPage() {
onSuccess: () => {
query.refetch();
setSelectedUserIds([]);
toast.success(t("msg.admin.users.bulk.update_success", "선택한 사용자들의 정보가 수정되었습니다."));
toast.success(
t(
"msg.admin.users.bulk.update_success",
"선택한 사용자들의 정보가 수정되었습니다.",
),
);
},
});
@@ -210,7 +225,15 @@ function UserListPage() {
const handleBulkDelete = () => {
if (selectedUserIds.length === 0) return;
if (window.confirm(t("msg.admin.users.bulk.delete_confirm", "{{count}}명의 사용자를 정말 삭제하시겠습니까?", { count: selectedUserIds.length }))) {
if (
window.confirm(
t(
"msg.admin.users.bulk.delete_confirm",
"{{count}}명의 사용자를 정말 삭제하시겠습니까?",
{ count: selectedUserIds.length },
),
)
) {
bulkDeleteMutation.mutate(selectedUserIds);
}
};
@@ -273,19 +296,30 @@ function UserListPage() {
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{t("ui.admin.users.list.columns.title", "표시 컬럼 설정")}</DialogTitle>
<DialogTitle>
{t("ui.admin.users.list.columns.title", "표시 컬럼 설정")}
</DialogTitle>
<DialogDescription>
{t("msg.admin.users.list.columns.description", "사용자 목록에 표시할 커스텀 필드를 선택하세요.")}
{t(
"msg.admin.users.list.columns.description",
"사용자 목록에 표시할 커스텀 필드를 선택하세요.",
)}
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
{userSchema.length === 0 && (
<p className="text-sm text-muted-foreground text-center py-4">
{t("msg.admin.users.list.columns.no_custom", "현재 테넌트에 정의된 커스텀 필드가 없습니다.")}
{t(
"msg.admin.users.list.columns.no_custom",
"현재 테넌트에 정의된 커스텀 필드가 없습니다.",
)}
</p>
)}
{userSchema.map((field) => (
<label key={field.key} className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 cursor-pointer">
<label
key={field.key}
className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 cursor-pointer"
>
<input
type="checkbox"
className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
@@ -294,14 +328,18 @@ function UserListPage() {
/>
<div className="flex flex-col">
<span className="text-sm font-medium">{field.label}</span>
<span className="text-xs text-muted-foreground font-mono">{field.key}</span>
<span className="text-xs text-muted-foreground font-mono">
{field.key}
</span>
</div>
</label>
))}
</div>
<DialogFooter>
<DialogTrigger asChild>
<Button variant="secondary">{t("ui.common.close", "닫기")}</Button>
<Button variant="secondary">
{t("ui.common.close", "닫기")}
</Button>
</DialogTrigger>
</DialogFooter>
</DialogContent>
@@ -387,7 +425,10 @@ function UserListPage() {
<input
type="checkbox"
className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
checked={items.length > 0 && selectedUserIds.length === items.length}
checked={
items.length > 0 &&
selectedUserIds.length === items.length
}
onChange={toggleSelectAll}
/>
</TableHead>
@@ -407,13 +448,14 @@ function UserListPage() {
)}
</TableHead>
{/* Dynamic Columns from Schema */}
{userSchema.map((field) => (
visibleColumns[field.key] !== false && (
<TableHead key={field.key} className="uppercase">
{field.label}
</TableHead>
)
))}
{userSchema.map(
(field) =>
visibleColumns[field.key] !== false && (
<TableHead key={field.key} className="uppercase">
{field.label}
</TableHead>
),
)}
<TableHead>
{t("ui.admin.users.list.table.created", "CREATED")}
</TableHead>
@@ -444,9 +486,11 @@ function UserListPage() {
</TableRow>
)}
{items.map((user) => (
<TableRow
key={user.id}
className={selectedUserIds.includes(user.id) ? "bg-primary/5" : ""}
<TableRow
key={user.id}
className={
selectedUserIds.includes(user.id) ? "bg-primary/5" : ""
}
>
<TableCell>
<input
@@ -494,13 +538,14 @@ function UserListPage() {
</div>
</TableCell>
{/* Dynamic Metadata Cells */}
{userSchema.map((field) => (
visibleColumns[field.key] !== false && (
<TableCell key={field.key} className="text-sm">
{String(user.metadata?.[field.key] ?? "-")}
</TableCell>
)
))}
{userSchema.map(
(field) =>
visibleColumns[field.key] !== false && (
<TableCell key={field.key} className="text-sm">
{String(user.metadata?.[field.key] ?? "-")}
</TableCell>
),
)}
<TableCell className="text-sm text-muted-foreground">
{new Date(user.createdAt).toLocaleDateString()}
</TableCell>
@@ -534,36 +579,38 @@ function UserListPage() {
{selectedUserIds.length > 0 && (
<div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 flex items-center gap-4 px-6 py-3 rounded-2xl bg-foreground text-background shadow-2xl animate-in slide-in-from-bottom-4 duration-300">
<span className="text-sm font-medium border-r border-background/20 pr-4 mr-2">
{t("ui.admin.users.bulk.selected_count", "{{count}}명 선택됨", { count: selectedUserIds.length })}
{t("ui.admin.users.bulk.selected_count", "{{count}}명 선택됨", {
count: selectedUserIds.length,
})}
</span>
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="sm"
<Button
variant="ghost"
size="sm"
className="text-background hover:bg-background/10 h-8"
onClick={() => handleBulkStatusChange("active")}
>
{t("ui.common.status.active", "활성화")}
</Button>
<Button
variant="ghost"
size="sm"
<Button
variant="ghost"
size="sm"
className="text-background hover:bg-background/10 h-8"
onClick={() => handleBulkStatusChange("inactive")}
>
{t("ui.common.status.inactive", "비활성화")}
</Button>
<UserBulkMoveGroupModal
userIds={selectedUserIds}
<UserBulkMoveGroupModal
userIds={selectedUserIds}
onSuccess={() => {
query.refetch();
setSelectedUserIds([]);
}}
}}
/>
<div className="w-px h-4 bg-background/20 mx-1" />
<Button
variant="ghost"
size="sm"
<Button
variant="ghost"
size="sm"
className="text-destructive-foreground hover:bg-destructive/20 h-8 gap-1.5"
onClick={handleBulkDelete}
>
@@ -571,9 +618,9 @@ function UserListPage() {
{t("ui.common.delete", "삭제")}
</Button>
</div>
<Button
variant="ghost"
size="icon"
<Button
variant="ghost"
size="icon"
className="text-background/50 hover:text-background h-8 w-8 ml-2"
onClick={() => setSelectedUserIds([])}
>

86
adminfront/src/features/users/components/UserBulkMoveGroupModal.tsx
View File

@@ -14,12 +14,12 @@ import {
} from "../../../components/ui/dialog";
import { Input } from "../../../components/ui/input";
import { ScrollArea } from "../../../components/ui/scroll-area";
import {
bulkUpdateUsers,
fetchGroups,
fetchTenants,
import {
type GroupSummary,
type TenantSummary,
type GroupSummary
bulkUpdateUsers,
fetchGroups,
fetchTenants,
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";
@@ -28,12 +28,16 @@ interface UserBulkMoveGroupModalProps {
onSuccess?: () => void;
}
export function UserBulkMoveGroupModal({ userIds, onSuccess }: UserBulkMoveGroupModalProps) {
export function UserBulkMoveGroupModal({
userIds,
onSuccess,
}: UserBulkMoveGroupModalProps) {
const [open, setOpen] = React.useState(false);
const [selectedTenantSlug, setSelectedTenantSlug] = React.useState<string>("");
const [selectedTenantSlug, setSelectedTenantSlug] =
React.useState<string>("");
const [selectedGroupName, setSelectedGroupName] = React.useState<string>("");
const [searchTerm, setSearchTerm] = React.useState("");
const queryClient = useQueryClient();
const { data: tenantsData } = useQuery({
@@ -43,9 +47,10 @@ export function UserBulkMoveGroupModal({ userIds, onSuccess }: UserBulkMoveGroup
});
const tenants = tenantsData?.items ?? [];
const selectedTenantId = React.useMemo(() =>
tenants.find(t => t.slug === selectedTenantSlug)?.id ?? "",
[tenants, selectedTenantSlug]);
const selectedTenantId = React.useMemo(
() => tenants.find((t) => t.slug === selectedTenantSlug)?.id ?? "",
[tenants, selectedTenantSlug],
);
const { data: groups, isLoading: isGroupsLoading } = useQuery({
queryKey: ["tenant-groups", selectedTenantId],
@@ -56,7 +61,12 @@ export function UserBulkMoveGroupModal({ userIds, onSuccess }: UserBulkMoveGroup
const mutation = useMutation({
mutationFn: bulkUpdateUsers,
onSuccess: () => {
toast.success(t("msg.admin.users.bulk.move_success", "사용자들의 부서가 이동되었습니다."));
toast.success(
t(
"msg.admin.users.bulk.move_success",
"사용자들의 부서가 이동되었습니다.",
),
);
setOpen(false);
onSuccess?.();
},
@@ -79,27 +89,41 @@ export function UserBulkMoveGroupModal({ userIds, onSuccess }: UserBulkMoveGroup
const filteredGroups = React.useMemo(() => {
if (!groups) return [];
if (!searchTerm) return groups;
return groups.filter(g => g.name.toLowerCase().includes(searchTerm.toLowerCase()));
return groups.filter((g) =>
g.name.toLowerCase().includes(searchTerm.toLowerCase()),
);
}, [groups, searchTerm]);
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="ghost" size="sm" className="text-background hover:bg-background/10 h-8">
<Button
variant="ghost"
size="sm"
className="text-background hover:bg-background/10 h-8"
>
{t("ui.admin.users.bulk.move_group", "부서 이동")}
</Button>
</DialogTrigger>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>{t("ui.admin.users.bulk.move_title", "사용자 부서 이동")}</DialogTitle>
<DialogTitle>
{t("ui.admin.users.bulk.move_title", "사용자 부서 이동")}
</DialogTitle>
<DialogDescription>
{t("msg.admin.users.bulk.move_description", "선택한 {{count}}명의 사용자를 이동할 테넌트와 부서를 선택하세요.", { count: userIds.length })}
{t(
"msg.admin.users.bulk.move_description",
"선택한 {{count}}명의 사용자를 이동할 테넌트와 부서를 선택하세요.",
{ count: userIds.length },
)}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<label className="text-sm font-medium">{t("ui.admin.users.create.form.tenant", "테넌트 선택")}</label>
<label className="text-sm font-medium">
{t("ui.admin.users.create.form.tenant", "테넌트 선택")}
</label>
<select
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
value={selectedTenantSlug}
@@ -110,14 +134,18 @@ export function UserBulkMoveGroupModal({ userIds, onSuccess }: UserBulkMoveGroup
>
<option value="">{t("ui.common.select", "선택하세요...")}</option>
{tenants.map((t) => (
<option key={t.id} value={t.slug}>{t.name} ({t.slug})</option>
<option key={t.id} value={t.slug}>
{t.name} ({t.slug})
</option>
))}
</select>
</div>
{selectedTenantSlug && (
<div className="space-y-2">
<label className="text-sm font-medium">{t("ui.admin.users.bulk.select_group", "부서 선택")}</label>
<label className="text-sm font-medium">
{t("ui.admin.users.bulk.select_group", "부서 선택")}
</label>
<div className="relative">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
@@ -133,14 +161,18 @@ export function UserBulkMoveGroupModal({ userIds, onSuccess }: UserBulkMoveGroup
type="button"
onClick={() => setSelectedGroupName("")}
className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition ${
selectedGroupName === "" ? "bg-primary text-primary-foreground" : "hover:bg-muted"
selectedGroupName === ""
? "bg-primary text-primary-foreground"
: "hover:bg-muted"
}`}
>
<FolderTree size={14} />
{t("ui.admin.users.bulk.no_department", "(부서 없음)")}
</button>
{isGroupsLoading ? (
<div className="flex justify-center py-4"><Loader2 className="animate-spin text-muted-foreground" /></div>
<div className="flex justify-center py-4">
<Loader2 className="animate-spin text-muted-foreground" />
</div>
) : (
filteredGroups.map((group) => (
<button
@@ -148,7 +180,9 @@ export function UserBulkMoveGroupModal({ userIds, onSuccess }: UserBulkMoveGroup
type="button"
onClick={() => setSelectedGroupName(group.name)}
className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition ${
selectedGroupName === group.name ? "bg-primary text-primary-foreground" : "hover:bg-muted"
selectedGroupName === group.name
? "bg-primary text-primary-foreground"
: "hover:bg-muted"
}`}
>
<FolderTree size={14} />
@@ -166,11 +200,13 @@ export function UserBulkMoveGroupModal({ userIds, onSuccess }: UserBulkMoveGroup
<Button variant="outline" onClick={() => setOpen(false)}>
{t("ui.common.cancel", "취소")}
</Button>
<Button
onClick={handleMove}
<Button
onClick={handleMove}
disabled={!selectedTenantSlug || mutation.isPending}
>
{mutation.isPending && <Loader2 size={16} className="mr-2 animate-spin" />}
{mutation.isPending && (
<Loader2 size={16} className="mr-2 animate-spin" />
)}
{t("ui.admin.users.bulk.do_move", "이동 실행")}
</Button>
</DialogFooter>

122
adminfront/src/features/users/components/UserBulkUploadModal.tsx
View File

@@ -1,5 +1,12 @@
import { useMutation } from "@tanstack/react-query";
import { AlertCircle, CheckCircle2, Download, FileText, Loader2, Upload } from "lucide-react";
import {
AlertCircle,
CheckCircle2,
Download,
FileText,
Loader2,
Upload,
} from "lucide-react";
import * as React from "react";
import { Button } from "../../../components/ui/button";
import {
@@ -12,7 +19,11 @@ import {
DialogTrigger,
} from "../../../components/ui/dialog";
import { ScrollArea } from "../../../components/ui/scroll-area";
import { bulkCreateUsers, type BulkUserItem, type BulkUserResult } from "../../../lib/adminApi";
import {
type BulkUserItem,
type BulkUserResult,
bulkCreateUsers,
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";
import { parseUserCSV } from "../utils/csvParser";
@@ -64,9 +75,15 @@ export function UserBulkUploadModal({ onSuccess }: UserBulkUploadModalProps) {
const downloadTemplate = () => {
const headers = "email,name,phone,role,companyCode,department,employee_id";
const example = "user1@example.com,홍길동,010-1234-5678,user,tenant-slug,개발팀,EMP001";
const blob = new Blob([`${headers}
${example}`], { type: "text/csv" });
const example =
"user1@example.com,홍길동,010-1234-5678,user,tenant-slug,개발팀,EMP001";
const blob = new Blob(
[
`${headers}
${example}`,
],
{ type: "text/csv" },
);
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
@@ -82,11 +99,17 @@ ${example}`], { type: "text/csv" });
if (fileInputRef.current) fileInputRef.current.value = "";
};
const successCount = results?.filter(r => r.success).length ?? 0;
const successCount = results?.filter((r) => r.success).length ?? 0;
const failCount = results ? results.length - successCount : 0;
return (
<Dialog open={open} onOpenChange={(val) => { setOpen(val); if (!val) reset(); }}>
<Dialog
open={open}
onOpenChange={(val) => {
setOpen(val);
if (!val) reset();
}}
>
<DialogTrigger asChild>
<Button variant="outline" className="gap-2">
<Upload size={16} />
@@ -95,16 +118,26 @@ ${example}`], { type: "text/csv" });
</DialogTrigger>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>{t("ui.admin.users.bulk.title", "사용자 일괄 등록")}</DialogTitle>
<DialogTitle>
{t("ui.admin.users.bulk.title", "사용자 일괄 등록")}
</DialogTitle>
<DialogDescription>
{t("msg.admin.users.bulk.description", "CSV 파일을 업로드하여 여러 사용자를 한 번에 등록합니다.")}
{t(
"msg.admin.users.bulk.description",
"CSV 파일을 업로드하여 여러 사용자를 한 번에 등록합니다.",
)}
</DialogDescription>
</DialogHeader>
{!results ? (
<div className="space-y-4 py-4">
<div className="flex justify-between items-center">
<Button variant="ghost" size="sm" onClick={downloadTemplate} className="gap-2">
<Button
variant="ghost"
size="sm"
onClick={downloadTemplate}
className="gap-2"
>
<Download size={14} />
{t("ui.admin.users.bulk.download_template", "템플릿 다운로드")}
</Button>
@@ -115,8 +148,13 @@ ${example}`], { type: "text/csv" });
ref={fileInputRef}
onChange={handleFileChange}
/>
<Button onClick={() => fileInputRef.current?.click()} variant="secondary">
{file ? t("ui.common.change_file", "파일 변경") : t("ui.common.select_file", "파일 선택")}
<Button
onClick={() => fileInputRef.current?.click()}
variant="secondary"
>
{file
? t("ui.common.change_file", "파일 변경")
: t("ui.common.select_file", "파일 선택")}
</Button>
</div>
@@ -125,7 +163,9 @@ ${example}`], { type: "text/csv" });
<div className="flex items-center gap-3 mb-2">
<FileText className="text-primary" />
<span className="font-medium">{file.name}</span>
<span className="text-xs text-muted-foreground">({(file.size / 1024).toFixed(1)} KB)</span>
<span className="text-xs text-muted-foreground">
({(file.size / 1024).toFixed(1)} KB)
</span>
</div>
{parsing ? (
<div className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -134,7 +174,11 @@ ${example}`], { type: "text/csv" });
</div>
) : (
<div className="text-sm text-muted-foreground">
{t("msg.admin.users.bulk.parsed_count", "{{count}}명의 사용자가 감지되었습니다.", { count: previewData.length })}
{t(
"msg.admin.users.bulk.parsed_count",
"{{count}}명의 사용자가 감지되었습니다.",
{ count: previewData.length },
)}
</div>
)}
</div>
@@ -160,7 +204,10 @@ ${example}`], { type: "text/csv" });
))}
{previewData.length > 10 && (
<tr>
<td colSpan={3} className="p-2 text-center text-muted-foreground italic">
<td
colSpan={3}
className="p-2 text-center text-muted-foreground italic"
>
... and {previewData.length - 10} more users
</td>
</tr>
@@ -174,28 +221,49 @@ ${example}`], { type: "text/csv" });
<div className="space-y-4 py-4">
<div className="flex items-center gap-4 p-4 rounded-lg bg-muted/30 border">
<div className="flex-1 text-center">
<div className="text-2xl font-bold text-green-600">{successCount}</div>
<div className="text-xs text-muted-foreground uppercase">{t("ui.common.success", "성공")}</div>
<div className="text-2xl font-bold text-green-600">
{successCount}
</div>
<div className="text-xs text-muted-foreground uppercase">
{t("ui.common.success", "성공")}
</div>
</div>
<div className="w-px h-10 bg-border" />
<div className="flex-1 text-center">
<div className="text-2xl font-bold text-destructive">{failCount}</div>
<div className="text-xs text-muted-foreground uppercase">{t("ui.common.fail", "실패")}</div>
<div className="text-2xl font-bold text-destructive">
{failCount}
</div>
<div className="text-xs text-muted-foreground uppercase">
{t("ui.common.fail", "실패")}
</div>
</div>
</div>
<ScrollArea className="h-[250px] rounded-md border">
<div className="p-2 space-y-2">
{results.map((r, i) => (
<div key={i} className="flex items-start gap-3 p-2 rounded border bg-card text-sm">
<div
key={i}
className="flex items-start gap-3 p-2 rounded border bg-card text-sm"
>
{r.success ? (
<CheckCircle2 size={16} className="text-green-500 mt-0.5" />
<CheckCircle2
size={16}
className="text-green-500 mt-0.5"
/>
) : (
<AlertCircle size={16} className="text-destructive mt-0.5" />
<AlertCircle
size={16}
className="text-destructive mt-0.5"
/>
)}
<div className="flex-1 min-w-0">
<div className="font-medium truncate">{r.email}</div>
{!r.success && <div className="text-xs text-destructive">{r.message}</div>}
{!r.success && (
<div className="text-xs text-destructive">
{r.message}
</div>
)}
</div>
</div>
))}
@@ -206,12 +274,14 @@ ${example}`], { type: "text/csv" });
<DialogFooter>
{!results ? (
<Button
onClick={handleUpload}
<Button
onClick={handleUpload}
disabled={previewData.length === 0 || mutation.isPending}
className="w-full sm:w-auto"
>
{mutation.isPending && <Loader2 size={16} className="mr-2 animate-spin" />}
{mutation.isPending && (
<Loader2 size={16} className="mr-2 animate-spin" />
)}
{t("ui.admin.users.bulk.start_upload", "등록 시작")}
</Button>
) : (

13
adminfront/src/features/users/utils/csvParser.ts
View File

@@ -1,4 +1,4 @@
import { type BulkUserItem } from "../../../lib/adminApi";
import type { BulkUserItem } from "../../../lib/adminApi";
export function parseUserCSV(text: string): BulkUserItem[] {
const lines = text.split(/\r?\n/);
@@ -20,9 +20,14 @@ export function parseUserCSV(text: string): BulkUserItem[] {
if (value === undefined || value === "") return;
if (
["email", "name", "phone", "role", "companycode", "department"].includes(
header,
)
[
"email",
"name",
"phone",
"role",
"companycode",
"department",
].includes(header)
) {
const key = header === "companycode" ? "companyCode" : header;
item[key] = value;

2
adminfront/src/lib/adminApi.ts
View File

@@ -450,7 +450,7 @@ export function exportUsersCSVUrl(search?: string, companyCode?: string) {
const params = new URLSearchParams();
if (search) params.append("search", search);
if (companyCode) params.append("companyCode", companyCode);
// Get mock role from storage if exists for dev environment
const mockRole = window.localStorage.getItem("X-Mock-Role");
if (mockRole) params.append("x-test-role", mockRole);

8
adminfront/src/lib/tenantTree.ts
View File

@@ -41,7 +41,9 @@ export function buildTenantFullTree(
// Function to calculate recursive counts with cycle protection
const calculateRecursive = (node: TenantNode): number => {
if (visitedForCalc.has(node.id)) {
console.warn(`Circular dependency detected in tenant tree for ID: ${node.id}`);
console.warn(
`Circular dependency detected in tenant tree for ID: ${node.id}`,
);
return 0; // Prevent infinite loop
}
visitedForCalc.add(node.id);
@@ -51,8 +53,8 @@ export function buildTenantFullTree(
total += calculateRecursive(child);
}
node.recursiveMemberCount = total;
// We don't remove from visitedForCalc here because a tree shouldn't have
// We don't remove from visitedForCalc here because a tree shouldn't have
// multiple paths to the same node anyway (it's a tree, not a graph).
// If it were a DAG, we'd need different logic, but for a tree with parentIds,
// a node should only be visited once.