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

Merge branch 'dev' into feature/issue-917-sub-email-support

Browse Source
This commit is contained in:
조찬영
2026-05-29 13:23:06 +09:00
parent b245dd3111 592c1d1741
commit deed33aad2
186 changed files with 11084 additions and 2370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,21 +40,21 @@ import {
TabsTrigger,
} from "../../components/ui/tabs";
import {
type TenantSummary,
type UserAppointment,
type UserCreateRequest,
type UserCreateResponse,
createUser,
fetchAllTenants,
fetchMe,
fetchTenant,
type TenantSummary,
type UserAppointment,
type UserCreateRequest,
type UserCreateResponse,
} from "../../lib/adminApi";
import { t } from "../../lib/i18n";
import { isSuperAdminRole } from "../../lib/roles";
import {
type OrgChartTenantSelection,
buildAuthenticatedOrgChartTenantPickerUrl,
filterNonHanmacFamilyTenants,
type OrgChartTenantSelection,
parseOrgChartTenantSelection,
} from "./orgChartPicker";
import type { UserSchemaField } from "./userSchemaFields";
@@ -111,7 +111,10 @@ function createEmptyAppointment(): AppointmentDraft {
tenantId: "",
tenantName: "",
tenantSlug: "",
isPrimary: false,
isOwner: false,
isAdmin: false,
isManager: false,
grade: "",
jobTitle: "",
position: "",
@@ -347,8 +350,8 @@ function UserCreatePage() {
if (currentIndex === index) {
return { ...appointment, ...patch };
}
if (patch.isOwner === true) {
return { ...appointment, isOwner: false };
if (patch.isPrimary === true) {
return { ...appointment, isPrimary: false };
}
return appointment;
}),
@@ -463,8 +466,10 @@ function UserCreatePage() {
tenantId: appointment.tenantId,
tenantSlug: appointment.tenantSlug,
tenantName: appointment.tenantName,
isPrimary: appointment.isOwner,
isOwner: appointment.isOwner,
isPrimary: appointment.isPrimary === true,
...(appointment.isOwner === true ? { isOwner: true } : {}),
...(appointment.isAdmin === true ? { isAdmin: true } : {}),
...(appointment.isManager === true ? { isManager: true } : {}),
grade: appointment.grade,
jobTitle: appointment.jobTitle,
position: appointment.position,
@@ -480,12 +485,11 @@ function UserCreatePage() {
return;
}
const primary = appointments.find((a) => a.isOwner);
const primary = appointments.find((a) => a.isPrimary);
if (primary) {
metadata.primaryTenantId = primary.tenantId;
metadata.primaryTenantSlug = primary.tenantSlug;
metadata.primaryTenantName = primary.tenantName;
metadata.primaryTenantIsOwner = true;
}
payload.additionalAppointments = appointments;
@@ -916,10 +920,10 @@ function UserCreatePage() {
)}
<label className="flex items-center gap-3 text-sm">
<Switch
checked={appointment.isOwner}
checked={appointment.isPrimary === true}
onCheckedChange={(checked) =>
updateAppointment(index, {
isOwner: checked === true,
isPrimary: checked === true,
})
}
aria-label={t(
@@ -932,6 +936,24 @@ function UserCreatePage() {
"대표 조직",
)}
</label>
<label className="flex items-center gap-3 text-sm">
<Switch
checked={appointment.isManager === true}
onCheckedChange={(checked) =>
updateAppointment(index, {
isManager: checked === true,
})
}
aria-label={t(
"ui.admin.users.detail.form.appointment_manager",
"조직장",
)}
/>
{t(
"ui.admin.users.detail.form.appointment_manager",
"조직장",
)}
</label>
</div>
</div>

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

@@ -60,10 +60,8 @@ import {
TabsTrigger,
} from "../../components/ui/tabs";
import { toast } from "../../components/ui/use-toast";
import type { PasswordPolicyResponse } from "../../lib/adminApi";
import {
type TenantSummary,
type UserAppointment,
type UserUpdateRequest,
deleteUser,
fetchAllTenants,
fetchMe,
@@ -71,18 +69,20 @@ import {
fetchTenant,
fetchUser,
fetchUserRpHistory,
type TenantSummary,
type UserAppointment,
type UserUpdateRequest,
updateUser,
} from "../../lib/adminApi";
import type { PasswordPolicyResponse } from "../../lib/adminApi";
import { t } from "../../lib/i18n";
import { normalizeAdminRole } from "../../lib/roles";
import { generateSecurePassword } from "../../lib/utils";
import {
type OrgChartTenantSelection,
buildAuthenticatedOrgChartTenantPickerUrl,
filterNonHanmacFamilyTenants,
isHanmacFamilyTenant,
isHanmacFamilyUser,
type OrgChartTenantSelection,
parseOrgChartTenantSelection,
} from "./orgChartPicker";
import type { UserSchemaField } from "./userSchemaFields";
@@ -142,6 +142,8 @@ function createEmptyAppointment(): AppointmentDraft {
tenantSlug: "",
isPrimary: false,
isOwner: false,
isAdmin: false,
isManager: false,
grade: "",
jobTitle: "",
position: "",
@@ -579,8 +581,8 @@ function UserDetailPage() {
if (currentIndex === index) {
return { ...appointment, ...patch };
}
if (patch.isOwner === true) {
return { ...appointment, isOwner: false };
if (patch.isPrimary === true) {
return { ...appointment, isPrimary: false };
}
return appointment;
}),
@@ -701,6 +703,9 @@ function UserDetailPage() {
isPrimary:
appointment.isPrimary === true ||
appointment.tenantId === primaryFromMetadata?.id,
isOwner: appointment.isOwner === true,
isAdmin: appointment.isAdmin === true,
isManager: appointment.isManager === true,
draftId: createDraftId(),
}))
: isUserHanmacFamily
@@ -714,6 +719,8 @@ function UserDetailPage() {
isOwner:
metadata.primaryTenantIsOwner === true &&
tenant.id === fallbackAppointment?.id,
isAdmin: false,
isManager: false,
grade: user.grade,
jobTitle: user.jobTitle,
position: user.position,
@@ -727,6 +734,8 @@ function UserDetailPage() {
tenantSlug: fallbackAppointment.slug,
isPrimary: true,
isOwner: metadata.primaryTenantIsOwner === true,
isAdmin: false,
isManager: false,
grade: user.grade,
jobTitle: user.jobTitle,
position: user.position,
@@ -836,23 +845,23 @@ function UserDetailPage() {
tenantId: appointment.tenantId,
tenantSlug: appointment.tenantSlug,
tenantName: appointment.tenantName,
isPrimary: appointment.isOwner,
isOwner: appointment.isOwner,
isPrimary: appointment.isPrimary === true,
...(appointment.isOwner === true ? { isOwner: true } : {}),
...(appointment.isAdmin === true ? { isAdmin: true } : {}),
...(appointment.isManager === true ? { isManager: true } : {}),
grade: appointment.grade,
jobTitle: appointment.jobTitle,
position: appointment.position,
}));
const primary = appointments.find((a) => a.isOwner);
const primary = appointments.find((a) => a.isPrimary);
if (primary) {
payload.tenantSlug = primary.tenantSlug;
payload.primaryTenantId = primary.tenantId;
payload.primaryTenantName = primary.tenantName;
payload.primaryTenantIsOwner = true;
metadata.primaryTenantId = primary.tenantId;
metadata.primaryTenantSlug = primary.tenantSlug;
metadata.primaryTenantName = primary.tenantName;
metadata.primaryTenantIsOwner = true;
} else {
payload.tenantSlug = undefined;
}
@@ -868,12 +877,10 @@ function UserDetailPage() {
primaryTenantId: primary?.tenantId,
primaryTenantName: primary?.tenantName,
primaryTenantSlug: primary?.tenantSlug,
primaryTenantIsOwner: primary?.isOwner ?? false,
};
payload.tenantSlug = primary?.tenantSlug;
payload.primaryTenantId = primary?.tenantId;
payload.primaryTenantName = primary?.tenantName;
payload.primaryTenantIsOwner = primary?.isOwner ?? false;
}
mutation.mutate(payload);
@@ -1362,13 +1369,13 @@ function UserDetailPage() {
)}
<label className="flex items-center gap-3 text-sm">
<Switch
checked={appointment.isOwner}
checked={appointment.isPrimary === true}
onCheckedChange={(checked) =>
updateAppointment(index, {
isOwner: checked === true,
isPrimary: checked === true,
})
}
disabled={appointment.isPrimary}
disabled={appointment.isPrimary === true}
aria-label={t(
"ui.admin.users.detail.form.appointment_owner",
"대표 조직",
@@ -1379,6 +1386,24 @@ function UserDetailPage() {
"대표 조직",
)}
</label>
<label className="flex items-center gap-3 text-sm">
<Switch
checked={appointment.isManager === true}
onCheckedChange={(checked) =>
updateAppointment(index, {
isManager: checked === true,
})
}
aria-label={t(
"ui.admin.users.detail.form.appointment_manager",
"조직장",
)}
/>
{t(
"ui.admin.users.detail.form.appointment_manager",
"조직장",
)}
</label>
</div>
</div>

192
adminfront/src/features/users/UserListPage.render.test.tsx Normal file
View File

@@ -0,0 +1,192 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { createI18nMock } from "../../test/i18nMock";
import UserListPage from "./UserListPage";
const selectRenderCounter = vi.hoisted(() => ({ count: 0 }));
const users = Array.from({ length: 200 }, (_, index) => ({
id: `user-${index}`,
name: `User ${index}`,
email: `user${index}@example.com`,
phone: `010-${String(index).padStart(4, "0")}-0000`,
role: "user",
status: "active",
tenantSlug: "hanmac",
tenant: { id: "tenant-1", name: "한맥", slug: "hanmac" },
metadata: {},
createdAt: "2026-05-01T00:00:00Z",
updatedAt: "2026-05-01T00:00:00Z",
}));
const fetchUsersMock = vi.hoisted(() => vi.fn());
const searchRenderBudgetMs =
process.env.npm_lifecycle_event === "test:coverage" ? 500 : 200;
vi.mock("../../lib/i18n", () => createI18nMock());
vi.mock("../../lib/adminApi", () => ({
fetchMe: vi.fn(async () => ({
id: "admin-user",
role: "super_admin",
name: "Admin",
email: "admin@example.com",
})),
fetchAllTenants: vi.fn(async () => ({
items: [{ id: "tenant-1", name: "한맥", slug: "hanmac" }],
total: 1,
})),
fetchTenant: vi.fn(async () => ({
id: "tenant-1",
name: "한맥",
slug: "hanmac",
config: { userSchema: [] },
})),
fetchUsers: fetchUsersMock,
bulkCreateUsers: vi.fn(),
bulkDeleteUsers: vi.fn(),
bulkUpdateUsers: vi.fn(),
deleteUser: vi.fn(),
exportUsersCSV: vi.fn(),
updateUser: vi.fn(),
}));
vi.mock("../../components/ui/select", () => ({
Select: ({ children }: { children: React.ReactNode }) => (
<div>{children}</div>
),
SelectTrigger: ({
children,
...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
selectRenderCounter.count += 1;
return (
<button type="button" {...props}>
{children}
</button>
);
},
SelectValue: () => <span />,
SelectContent: ({ children }: { children: React.ReactNode }) => (
<div>{children}</div>
),
SelectItem: ({
children,
value: _value,
}: {
children: React.ReactNode;
value: string;
}) => <div>{children}</div>,
}));
function renderUserListPage() {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
});
return render(
<QueryClientProvider client={queryClient}>
<MemoryRouter>
<UserListPage />
</MemoryRouter>
</QueryClientProvider>,
);
}
function createDeferred<T>() {
let resolve: (value: T) => void = () => {};
const promise = new Promise<T>((promiseResolve) => {
resolve = promiseResolve;
});
return { promise, resolve };
}
describe("UserListPage search rendering", () => {
beforeEach(() => {
selectRenderCounter.count = 0;
fetchUsersMock.mockReset();
fetchUsersMock.mockImplementation(
async (_limit: number, _offset: number, search?: string) => {
const normalizedSearch = search?.trim().toLowerCase();
const items = normalizedSearch
? users.filter((user) =>
`${user.name} ${user.email}`
.toLowerCase()
.includes(normalizedSearch),
)
: users;
return { items, total: items.length };
},
);
});
it("does not rerender user table controls while typing a draft search", async () => {
renderUserListPage();
await screen.findByText("User 0");
const searchInput = screen.getByPlaceholderText("이름 또는 이메일 검색...");
const renderCountBeforeTyping = selectRenderCounter.count;
fireEvent.change(searchInput, { target: { value: "u" } });
expect(searchInput).toHaveValue("u");
expect(selectRenderCounter.count).toBe(renderCountBeforeTyping);
});
it("keeps rendered row controls below the full 200-user result set", async () => {
renderUserListPage();
await screen.findByText("User 0");
expect(screen.getAllByTestId(/^user-status-select-/).length).toBeLessThan(
200,
);
});
it("renders compact vertically centered user table headers", async () => {
renderUserListPage();
await screen.findByText("User 0");
const nameHeader = screen.getByRole("columnheader", { name: /이름/ });
const content = nameHeader.firstElementChild;
expect(nameHeader).toHaveClass("h-9", "py-1", "align-middle", "text-xs");
expect(content).toHaveClass("flex", "h-full", "items-center");
});
it("centers the initial loading message across the user table", async () => {
const deferred = createDeferred<{ items: typeof users; total: number }>();
fetchUsersMock.mockReturnValueOnce(deferred.promise);
renderUserListPage();
const loadingCell = await screen.findByTestId("user-table-loading-cell");
expect(loadingCell).toHaveClass(
"flex",
"items-center",
"justify-center",
"text-center",
);
expect(loadingCell).toHaveStyle({ gridColumn: "1 / -1" });
deferred.resolve({ items: users, total: users.length });
});
it("renders a 200-user search result update within 200ms after search submit", async () => {
renderUserListPage();
await screen.findByText("User 0");
const searchInput = screen.getByPlaceholderText("이름 또는 이메일 검색...");
const startedAt = performance.now();
fireEvent.change(searchInput, { target: { value: "user 19" } });
fireEvent.keyDown(searchInput, { key: "Enter" });
expect(screen.getByText("User 19")).toBeInTheDocument();
expect(screen.queryByText("User 0")).not.toBeInTheDocument();
expect(performance.now() - startedAt).toBeLessThan(searchRenderBudgetMs);
});
});

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

@@ -1,4 +1,10 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import {
observeElementRect,
type Rect,
useVirtualizer,
type Virtualizer,
} from "@tanstack/react-virtual";
import type { AxiosError } from "axios";
import {
ArrowDown,
@@ -7,7 +13,6 @@ import {
ChevronDown,
ChevronLeft,
ChevronRight,
Users,
Download,
FileDown,
FileSpreadsheet,
@@ -19,13 +24,13 @@ import {
ShieldCheck,
Trash2,
Upload,
Users,
} from "lucide-react";
import * as React from "react";
import { Link, useNavigate } from "react-router-dom";
import { PageHeader } from "../../../../common/core/components/page";
import {
SortableTableHead,
sortableTableHeadBaseClassName,
sortableTableHeaderClassName,
} from "../../../../common/core/components/sort";
import {
@@ -81,7 +86,6 @@ import {
} from "../../components/ui/table";
import { toast } from "../../components/ui/use-toast";
import {
type UserSummary,
bulkDeleteUsers,
bulkUpdateUsers,
deleteUser,
@@ -90,13 +94,15 @@ import {
fetchMe,
fetchTenant,
fetchUsers,
type TenantSummary,
type UserSummary,
updateUser,
} from "../../lib/adminApi";
import { t } from "../../lib/i18n";
import { isSuperAdminRole } from "../../lib/roles";
import {
UserBulkUploadModal,
downloadUserTemplate,
UserBulkUploadModal,
} from "./components/UserBulkUploadModal";
import {
normalizeUserStatusValue,
@@ -113,6 +119,23 @@ type UserSchemaField = {
type UserSortKey = string;
const USER_ROW_ESTIMATED_HEIGHT = 64;
const USER_ROW_OVERSCAN = 8;
const USER_TABLE_VIEWPORT_ESTIMATED_HEIGHT = 640;
const userFixedColumnWidths = [48, 160, 220, 160, 260, 170, 160, 220] as const;
const userMetadataColumnWidth = 160;
const userCreatedColumnWidth = 150;
type UserRowVirtualizer = Virtualizer<HTMLDivElement, HTMLTableRowElement>;
const userTableHeadClassName =
"h-9 px-3 py-1 text-xs leading-tight align-middle whitespace-nowrap";
const userTableHeadInteractiveClassName = `${userTableHeadClassName} cursor-pointer transition-colors hover:bg-muted/50`;
const userTableHeadContentClassName = "flex h-full items-center gap-1";
const userSortableTableHeadClassName =
"!h-9 !px-3 !py-1 leading-tight whitespace-nowrap";
const userSortableTableHeadContentClassName = "h-full items-center";
const userTableStateCellClassName =
"flex h-24 items-center justify-center p-0 text-center text-sm text-muted-foreground";
const bulkPermissionOptions = [
{
value: "super_admin",
@@ -130,11 +153,124 @@ function assignableSystemRoleValue(role?: string | null) {
return isSuperAdminRole(role) ? "super_admin" : "user";
}
function userMatchesSearch(user: UserSummary, search: string) {
const normalizedSearch = search.trim().toLowerCase();
if (!normalizedSearch) {
return true;
}
return (
user.name?.toLowerCase().includes(normalizedSearch) ||
user.email?.toLowerCase().includes(normalizedSearch) ||
user.phone?.toLowerCase().includes(normalizedSearch) ||
user.id?.toLowerCase().includes(normalizedSearch) ||
user.tenantSlug?.toLowerCase().includes(normalizedSearch) ||
user.tenant?.name?.toLowerCase().includes(normalizedSearch) ||
user.department?.toLowerCase().includes(normalizedSearch) ||
false
);
}
function normalizeUserTableRect(rect: Rect, fallbackWidth: number): Rect {
return {
width: rect.width > 0 ? rect.width : fallbackWidth,
height:
rect.height > 0 ? rect.height : USER_TABLE_VIEWPORT_ESTIMATED_HEIGHT,
};
}
type UserListSearchControlsProps = {
search: string;
selectedCompany: string;
tenants: TenantSummary[];
profileRole?: string | null;
onSearch: (value: string) => void;
onCompanyChange: (value: string) => void;
};
const UserListSearchControls = React.memo(function UserListSearchControls({
search,
selectedCompany,
tenants,
profileRole,
onSearch,
onCompanyChange,
}: UserListSearchControlsProps) {
const [searchDraft, setSearchDraft] = React.useState(search);
React.useEffect(() => {
setSearchDraft(search);
}, [search]);
const handleSearch = React.useCallback(() => {
onSearch(searchDraft);
}, [onSearch, searchDraft]);
const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === "Enter") {
handleSearch();
}
},
[handleSearch],
);
const tenantOptions = React.useMemo(
() =>
tenants.map((tenant) => (
<option key={tenant.id} value={tenant.slug}>
{tenant.name}
</option>
)),
[tenants],
);
return (
<SearchFilterBar
primary={
<>
<div className="relative w-48">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder={t(
"ui.admin.users.list.search_placeholder",
"이름 또는 이메일 검색...",
)}
className="h-9 pl-9"
value={searchDraft}
onChange={(event) => setSearchDraft(event.target.value)}
onKeyDown={handleKeyDown}
/>
</div>
<select
className="flex h-9 w-[160px] 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 disabled:opacity-50"
value={selectedCompany}
onChange={(event) => onCompanyChange(event.target.value)}
disabled={profileRole === "tenant_admin"}
>
<option value="">{t("ui.common.all", "전체 테넌트")}</option>
{tenantOptions}
</select>
<Button
variant="secondary"
size="sm"
onClick={handleSearch}
className="h-9"
>
{t("ui.common.search", "검색")}
</Button>
</>
}
/>
);
});
function UserListPage() {
const navigate = useNavigate();
const [page, setPage] = React.useState(1);
const [search, setSearch] = React.useState("");
const [searchDraft, setSearchDraft] = React.useState("");
const [selectedCompany, setSelectedCompany] = React.useState<string>("");
const [visibleColumns, setVisibleColumns] = React.useState<
Record<string, boolean>
@@ -148,6 +284,7 @@ function UserListPage() {
const [sortConfig, setSortConfig] =
React.useState<SortConfig<UserSortKey> | null>(null);
const [bulkUploadOpen, setBulkUploadOpen] = React.useState(false);
const userTableViewportRef = React.useRef<HTMLDivElement | null>(null);
const limit = 1000;
const offset = (page - 1) * limit;
@@ -254,16 +391,15 @@ function UserListPage() {
},
});
const handleSearch = () => {
setSearch(searchDraft);
const handleSearch = React.useCallback((nextSearch: string) => {
setSearch(nextSearch);
setPage(1);
};
}, []);
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Enter") {
handleSearch();
}
};
const handleCompanyChange = React.useCallback((nextCompany: string) => {
setSelectedCompany(nextCompany);
setPage(1);
}, []);
const handleExport = (includeIds = false) => {
exportMutation.mutate(includeIds);
@@ -279,7 +415,14 @@ function UserListPage() {
)
: null;
const rawItems = query.data?.items ?? [];
const serverItems = query.data?.items ?? [];
const rawItems = React.useMemo(() => {
if (!query.isFetching || search.trim() === "") {
return serverItems;
}
return serverItems.filter((user) => userMatchesSearch(user, search));
}, [query.isFetching, search, serverItems]);
const userSortResolvers = React.useMemo<
SortResolverMap<UserSummary, UserSortKey>
>(
@@ -306,8 +449,55 @@ function UserListPage() {
[userSchema],
);
const items = React.useMemo(() => {
if (!sortConfig) {
return rawItems;
}
return sortItems(rawItems, sortConfig, userSortResolvers);
}, [rawItems, sortConfig, userSortResolvers]);
const visibleUserSchemaFields = React.useMemo(
() => userSchema.filter((field) => visibleColumns[field.key] !== false),
[userSchema, visibleColumns],
);
const userTableColumnWidths = React.useMemo(
() => [
...userFixedColumnWidths,
...visibleUserSchemaFields.map(() => userMetadataColumnWidth),
userCreatedColumnWidth,
],
[visibleUserSchemaFields],
);
const userTableGridTemplateColumns = React.useMemo(
() => userTableColumnWidths.map((width) => `${width}px`).join(" "),
[userTableColumnWidths],
);
const userTableMinWidth = React.useMemo(
() => userTableColumnWidths.reduce((sum, width) => sum + width, 0),
[userTableColumnWidths],
);
const observeUserTableElementRect = React.useCallback(
(instance: UserRowVirtualizer, callback: (rect: Rect) => void) =>
observeElementRect(instance, (rect) => {
callback(normalizeUserTableRect(rect, userTableMinWidth));
}),
[userTableMinWidth],
);
const rowVirtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => userTableViewportRef.current,
estimateSize: () => USER_ROW_ESTIMATED_HEIGHT,
measureElement: (element) =>
element.getBoundingClientRect().height || USER_ROW_ESTIMATED_HEIGHT,
observeElementRect: observeUserTableElementRect,
overscan: USER_ROW_OVERSCAN,
initialRect: {
width: userTableMinWidth,
height: USER_TABLE_VIEWPORT_ESTIMATED_HEIGHT,
},
});
const virtualRows = rowVirtualizer.getVirtualItems();
const shouldVirtualizeRows = !query.isLoading && items.length > 0;
const tableColumnCount = 9 + visibleUserSchemaFields.length;
const requestSort = (key: UserSortKey) => {
setSortConfig((current) => toggleSort(current, key));
@@ -436,52 +626,13 @@ function UserListPage() {
)}
actions={
<>
<SearchFilterBar
primary={
<>
<div className="relative w-48">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder={t(
"ui.admin.users.list.search_placeholder",
"이름 또는 이메일 검색...",
)}
className="h-9 pl-9"
value={searchDraft}
onChange={(e) => setSearchDraft(e.target.value)}
onKeyDown={handleKeyDown}
/>
</div>
<select
className="flex h-9 w-[160px] 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 disabled:opacity-50"
value={selectedCompany}
onChange={(e) => {
setSelectedCompany(e.target.value);
setPage(1);
}}
disabled={profile?.role === "tenant_admin"}
>
<option value="">
{t("ui.common.all", "전체 테넌트")}
</option>
{tenants.map((t) => (
<option key={t.id} value={t.slug}>
{t.name}
</option>
))}
</select>
<Button
variant="secondary"
size="sm"
onClick={handleSearch}
className="h-9"
>
{t("ui.common.search", "검색")}
</Button>
</>
}
<UserListSearchControls
search={search}
selectedCompany={selectedCompany}
tenants={tenants}
profileRole={profile?.role}
onSearch={handleSearch}
onCompanyChange={handleCompanyChange}
/>
<Button
@@ -643,82 +794,92 @@ function UserListPage() {
)}
<div className={commonTableShellClass}>
<div className={commonTableViewportClass}>
<Table>
<div
ref={userTableViewportRef}
data-testid="user-table-viewport"
className={commonTableViewportClass}
>
<Table style={{ display: "grid", minWidth: userTableMinWidth }}>
<TableHeader className={sortableTableHeaderClassName}>
<TableRow>
<TableHead
className={`${sortableTableHeadBaseClassName} w-12`}
>
<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
}
onChange={toggleSelectAll}
/>
<TableRow
style={{
display: "grid",
gridTemplateColumns: userTableGridTemplateColumns,
minWidth: userTableMinWidth,
}}
>
<TableHead className={`${userTableHeadClassName} w-12`}>
<div className="flex h-full items-center justify-center">
<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
}
onChange={toggleSelectAll}
/>
</div>
</TableHead>
<TableHead
className="min-w-[120px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
className={`${userTableHeadInteractiveClassName} min-w-[120px]`}
onClick={() => requestSort("name")}
>
<div className="flex items-center">
<div className={userTableHeadContentClassName}>
{t("ui.admin.users.list.table.name", "이름")}
{getSortIcon("name")}
</div>
</TableHead>
<TableHead
className="min-w-[180px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
className={`${userTableHeadInteractiveClassName} min-w-[180px]`}
onClick={() => requestSort("email")}
>
<div className="flex items-center">
<div className={userTableHeadContentClassName}>
{t("ui.admin.users.list.table.email", "이메일")}
{getSortIcon("email")}
</div>
</TableHead>
<TableHead
className="min-w-[140px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
className={`${userTableHeadInteractiveClassName} min-w-[140px]`}
onClick={() => requestSort("phone")}
>
<div className="flex items-center">
<div className={userTableHeadContentClassName}>
{t("ui.admin.users.list.table.phone", "전화번호")}
{getSortIcon("phone")}
</div>
</TableHead>
<TableHead
className="min-w-[220px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
className={`${userTableHeadInteractiveClassName} min-w-[220px]`}
onClick={() => requestSort("id")}
>
<div className="flex items-center">
<div className={userTableHeadContentClassName}>
{t("ui.admin.users.list.table.id", "ID")}
{getSortIcon("id")}
</div>
</TableHead>
<TableHead
className="whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
className={userTableHeadInteractiveClassName}
onClick={() => requestSort("status")}
>
<div className="flex items-center">
<div className={userTableHeadContentClassName}>
{t("ui.admin.users.list.table.status", "STATUS")}
{getSortIcon("status")}
</div>
</TableHead>
<TableHead
className="whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
className={userTableHeadInteractiveClassName}
onClick={() => requestSort("role")}
>
<div className="flex items-center">
<div className={userTableHeadContentClassName}>
{t("ui.admin.users.list.table.role", "ROLE")}
{getSortIcon("role")}
</div>
</TableHead>
<TableHead
className="whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
className={userTableHeadInteractiveClassName}
onClick={() => requestSort("tenant_dept")}
>
<div className="flex items-center">
<div className={userTableHeadContentClassName}>
{t(
"ui.admin.users.list.table.tenant_dept",
"TENANT / DEPT",
@@ -727,21 +888,20 @@ function UserListPage() {
</div>
</TableHead>
{/* Dynamic Columns from Schema */}
{userSchema.map(
(field) =>
visibleColumns[field.key] !== false && (
<SortableTableHead
key={field.key}
className="whitespace-nowrap"
label={field.label}
onSort={requestSort}
sortConfig={sortConfig}
sortKey={field.key}
/>
),
)}
{visibleUserSchemaFields.map((field) => (
<SortableTableHead
key={field.key}
className={userSortableTableHeadClassName}
contentClassName={userSortableTableHeadContentClassName}
label={field.label}
onSort={requestSort}
sortConfig={sortConfig}
sortKey={field.key}
/>
))}
<SortableTableHead
className="whitespace-nowrap"
className={userSortableTableHeadClassName}
contentClassName={userSortableTableHeadContentClassName}
label={t("ui.admin.users.list.table.created", "CREATED")}
onSort={requestSort}
sortConfig={sortConfig}
@@ -749,22 +909,51 @@ function UserListPage() {
/>
</TableRow>
</TableHeader>
<TableBody>
<TableBody
style={
shouldVirtualizeRows
? {
display: "grid",
height: `${rowVirtualizer.getTotalSize()}px`,
minWidth: userTableMinWidth,
position: "relative",
}
: undefined
}
>
{query.isLoading && (
<TableRow>
<TableRow
data-testid="user-table-loading-row"
style={{
display: "grid",
gridTemplateColumns: userTableGridTemplateColumns,
minWidth: userTableMinWidth,
}}
>
<TableCell
colSpan={7 + userSchema.length}
className="h-24 text-center"
colSpan={tableColumnCount}
data-testid="user-table-loading-cell"
className={userTableStateCellClassName}
style={{ gridColumn: "1 / -1" }}
>
{t("msg.common.loading", "로딩 중...")}
</TableCell>
</TableRow>
)}
{!query.isLoading && items.length === 0 && (
<TableRow>
<TableRow
data-testid="user-table-empty-row"
style={{
display: "grid",
gridTemplateColumns: userTableGridTemplateColumns,
minWidth: userTableMinWidth,
}}
>
<TableCell
colSpan={7 + userSchema.length}
className="h-24 text-center"
colSpan={tableColumnCount}
data-testid="user-table-empty-cell"
className={userTableStateCellClassName}
style={{ gridColumn: "1 / -1" }}
>
{t(
"msg.admin.users.list.empty",
@@ -773,145 +962,162 @@ function UserListPage() {
</TableCell>
</TableRow>
)}
{items.map((user) => (
<TableRow
key={user.id}
className={
selectedUserIds.includes(user.id) ? "bg-primary/5" : ""
}
>
<TableCell>
<input
type="checkbox"
className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
checked={selectedUserIds.includes(user.id)}
onChange={() => toggleSelectUser(user.id)}
disabled={user.id === profile?.id}
title={
user.id === profile?.id
? t(
"msg.admin.users.self_delete_blocked",
"본인 계정은 삭제할 수 없습니다.",
)
: undefined
{shouldVirtualizeRows &&
virtualRows.map((virtualRow) => {
const user = items[virtualRow.index];
if (!user) return null;
return (
<TableRow
key={user.id}
data-index={virtualRow.index}
ref={rowVirtualizer.measureElement}
className={
selectedUserIds.includes(user.id)
? "bg-primary/5"
: ""
}
/>
</TableCell>
<TableCell>
<Link
to={`/users/${user.id}`}
className="font-medium hover:underline text-primary truncate block max-w-[150px]"
title={user.name}
style={{
display: "grid",
gridTemplateColumns: userTableGridTemplateColumns,
height: `${virtualRow.size}px`,
minWidth: userTableMinWidth,
position: "absolute",
transform: `translateY(${virtualRow.start}px)`,
width: "100%",
}}
>
{user.name}
</Link>
</TableCell>
<TableCell
className="text-sm text-muted-foreground truncate max-w-[200px]"
title={user.email}
>
{user.email}
</TableCell>
<TableCell className="text-sm text-muted-foreground whitespace-nowrap">
{user.phone || "-"}
</TableCell>
<TableCell
className="max-w-[220px] break-all font-mono text-xs text-muted-foreground"
data-testid={`user-internal-id-${user.id}`}
>
{user.id}
</TableCell>
<TableCell>
<Select
value={normalizeUserStatusValue(user.status)}
onValueChange={(status) =>
statusMutation.mutate({
userId: user.id,
status,
})
}
disabled={
statusMutation.isPending || user.id === profile?.id
}
>
<SelectTrigger
className="h-8 w-[150px] border-none bg-transparent hover:bg-muted/50 transition-colors px-0 font-medium"
aria-label={t(
"ui.admin.users.list.change_status",
"{{name}} 상태 변경",
{ name: user.name },
)}
data-testid={`user-status-select-${user.id}`}
<TableCell>
<input
type="checkbox"
className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
checked={selectedUserIds.includes(user.id)}
onChange={() => toggleSelectUser(user.id)}
disabled={user.id === profile?.id}
title={
user.id === profile?.id
? t(
"msg.admin.users.self_delete_blocked",
"본인 계정은 삭제할 수 없습니다.",
)
: undefined
}
/>
</TableCell>
<TableCell>
<Link
to={`/users/${user.id}`}
className="font-medium hover:underline text-primary truncate block max-w-[150px]"
title={user.name}
>
{user.name}
</Link>
</TableCell>
<TableCell
className="text-sm text-muted-foreground truncate max-w-[200px]"
title={user.email}
>
<SelectValue />
</SelectTrigger>
<SelectContent>
{userStatusValues.map((status) => (
<SelectItem key={status} value={status}>
{userStatusLabel(status)}
</SelectItem>
))}
</SelectContent>
</Select>
</TableCell>
<TableCell>
<Select
value={assignableSystemRoleValue(user.role)}
onValueChange={(value) =>
bulkUpdateMutation.mutate({
userIds: [user.id],
role: value,
})
}
disabled={
bulkUpdateMutation.isPending ||
!isSuperAdminRole(profile?.role) ||
user.id === profile?.id
}
>
<SelectTrigger className="h-8 w-[140px] border-none bg-transparent hover:bg-muted/50 transition-colors px-0 font-medium">
<SelectValue />
</SelectTrigger>
<SelectContent>
{bulkPermissionOptions.map((option) => (
<SelectItem
key={option.value}
value={option.value}
{user.email}
</TableCell>
<TableCell className="text-sm text-muted-foreground whitespace-nowrap">
{user.phone || "-"}
</TableCell>
<TableCell
className="max-w-[220px] break-all font-mono text-xs text-muted-foreground"
data-testid={`user-internal-id-${user.id}`}
>
{user.id}
</TableCell>
<TableCell>
<Select
value={normalizeUserStatusValue(user.status)}
onValueChange={(status) =>
statusMutation.mutate({
userId: user.id,
status,
})
}
disabled={
statusMutation.isPending ||
user.id === profile?.id
}
>
<SelectTrigger
className="h-8 w-[150px] border-none bg-transparent hover:bg-muted/50 transition-colors px-0 font-medium"
aria-label={t(
"ui.admin.users.list.change_status",
"{{name}} 상태 변경",
{ name: user.name },
)}
data-testid={`user-status-select-${user.id}`}
>
{t(option.labelKey, option.fallback)}
</SelectItem>
))}
</SelectContent>
</Select>
</TableCell>
<TableCell>
<div className="flex flex-col gap-1">
<span className="text-sm font-medium">
{user.tenant?.name ||
user.tenantSlug ||
t("ui.common.unassigned", "미배정")}
</span>
{user.department && (
<span className="text-xs text-muted-foreground">
{user.department}
</span>
)}
</div>
</TableCell>
{/* Dynamic Metadata Cells */}
{userSchema.map(
(field) =>
visibleColumns[field.key] !== false && (
<SelectValue />
</SelectTrigger>
<SelectContent>
{userStatusValues.map((status) => (
<SelectItem key={status} value={status}>
{userStatusLabel(status)}
</SelectItem>
))}
</SelectContent>
</Select>
</TableCell>
<TableCell>
<Select
value={assignableSystemRoleValue(user.role)}
onValueChange={(value) =>
bulkUpdateMutation.mutate({
userIds: [user.id],
role: value,
})
}
disabled={
bulkUpdateMutation.isPending ||
!isSuperAdminRole(profile?.role) ||
user.id === profile?.id
}
>
<SelectTrigger className="h-8 w-[140px] border-none bg-transparent hover:bg-muted/50 transition-colors px-0 font-medium">
<SelectValue />
</SelectTrigger>
<SelectContent>
{bulkPermissionOptions.map((option) => (
<SelectItem
key={option.value}
value={option.value}
>
{t(option.labelKey, option.fallback)}
</SelectItem>
))}
</SelectContent>
</Select>
</TableCell>
<TableCell>
<div className="flex flex-col gap-1">
<span className="text-sm font-medium">
{user.tenant?.name ||
user.tenantSlug ||
t("ui.common.unassigned", "미배정")}
</span>
{user.department && (
<span className="text-xs text-muted-foreground">
{user.department}
</span>
)}
</div>
</TableCell>
{/* Dynamic Metadata Cells */}
{visibleUserSchemaFields.map((field) => (
<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>
</TableRow>
))}
))}
<TableCell className="text-sm text-muted-foreground">
{new Date(user.createdAt).toLocaleDateString()}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>

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

@@ -16,12 +16,12 @@ import { Input } from "../../../components/ui/input";
import { ScrollArea } from "../../../components/ui/scroll-area";
import { toast } from "../../../components/ui/use-toast";
import {
type GroupSummary,
type TenantSummary,
type UserSummary,
bulkUpdateUsers,
fetchAllTenants,
fetchGroups,
type GroupSummary,
type TenantSummary,
type UserSummary,
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";

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

@@ -30,17 +30,17 @@ import {
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";
import {
buildTenantImportPreview,
type TenantCSVRow,
type TenantImportPreviewRow,
buildTenantImportPreview,
} from "../../tenants/utils/tenantCsvImport";
import { isHanmacFamilyTenant, isHanmacFamilyUser } from "../orgChartPicker";
import { parseUserCSV } from "../utils/csvParser";
import {
type HanmacImportEmailPreview,
buildHanmacImportEmailPreview,
} from "../utils/hanmacImportEmail";
import { applyGeneralPlanningOfficePriority } from "../utils/generalPlanningOfficePriority";
import {
buildHanmacImportEmailPreview,
type HanmacImportEmailPreview,
} from "../utils/hanmacImportEmail";
interface UserBulkUploadModalProps {
onSuccess?: () => void;
@@ -551,7 +551,10 @@ export function UserBulkUploadModal({
</thead>
<tbody>
{previewData.slice(0, 10).map((u, index) => (
<tr key={`${u.email}-${index}`} className="border-t">
<tr
key={`${u.email}-${u.tenantSlug ?? ""}-${u.name}`}
className="border-t"
>
<td className="p-2">
<input
className="h-8 w-full min-w-[180px] rounded-md border border-input bg-background px-2 font-mono text-xs"

4
adminfront/src/features/users/orgChartPicker.test.ts
View File

@@ -59,9 +59,7 @@ describe("orgChartPicker", () => {
buildAuthenticatedOrgChartUrl("https://orgchart.example.com/", {
includeInternal: false,
}),
).toBe(
"https://orgchart.example.com/login?auto=1&returnTo=%2Fchart",
);
).toBe("https://orgchart.example.com/login?auto=1&returnTo=%2Fchart");
});
it("parses the first tenant id and name from orgfront confirm messages", () => {

4
adminfront/src/features/users/userStatus.ts
View File

@@ -12,7 +12,9 @@ export const userStatusValues = [
export type UserStatusValue = (typeof userStatusValues)[number];
export function normalizeUserStatusValue(status?: string | null): UserStatusValue {
export function normalizeUserStatusValue(
status?: string | null,
): UserStatusValue {
switch ((status ?? "").trim().toLowerCase()) {
case "active":
return "active";

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

@@ -206,6 +206,12 @@ function cleanAdditionalAppointment(
...(appointment.isOwner !== undefined
? { isOwner: appointment.isOwner }
: {}),
...(appointment.isAdmin !== undefined
? { isAdmin: appointment.isAdmin }
: {}),
...(appointment.isManager !== undefined
? { isManager: appointment.isManager }
: {}),
...(appointment.department ? { department: appointment.department } : {}),
...(appointment.grade ? { grade: appointment.grade } : {}),
...(appointment.position ? { position: appointment.position } : {}),
@@ -232,9 +238,7 @@ function normalizeHeader(header: string) {
"worksmobile_alias_email",
"worksmobile_alias_emails",
].includes(separatorNormalized) ||
["보조이메일", "보조메일", "추가이메일", "추가메일"].includes(
compactKorean,
)
["보조이메일", "보조메일", "추가이메일", "추가메일"].includes(compactKorean)
) {
return "secondary_emails";
}