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

i18n refresh and frontend fixes

Browse Source
This commit is contained in:
Lectom C Han
2026-02-10 19:15:51 +09:00
parent 2441c64598
commit b6d3b69cda
44 changed files with 8603 additions and 1760 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,18 +15,30 @@ import {
import { Input } from "../../components/ui/input";
import { Label } from "../../components/ui/label";
import {
createUser,
fetchTenants,
fetchTenant,
type UserCreateRequest,
type UserCreateResponse,
createUser,
fetchTenant,
fetchTenants,
} from "../../lib/adminApi";
import { t } from "../../lib/i18n";
type UserSchemaField = {
key: string;
label?: string;
type?: "text" | "number" | "boolean";
required?: boolean;
};
type UserFormValues = UserCreateRequest & { metadata: Record<string, unknown> };
function UserCreatePage() {
const navigate = useNavigate();
const queryClient = useQueryClient();
const [error, setError] = React.useState<string | null>(null);
const [generatedPassword, setGeneratedPassword] = React.useState<string | null>(null);
const [generatedPassword, setGeneratedPassword] = React.useState<
string | null
>(null);
const [createdEmail, setCreatedEmail] = React.useState<string | null>(null);
const [autoPassword, setAutoPassword] = React.useState(true);
@@ -41,7 +53,7 @@ function UserCreatePage() {
handleSubmit,
watch,
formState: { errors },
} = useForm<UserCreateRequest & { metadata: Record<string, any> }>({
} = useForm<UserFormValues>({
defaultValues: {
email: "",
password: "",
@@ -57,13 +69,22 @@ function UserCreatePage() {
const selectedCompanyCode = watch("companyCode");
const selectedTenant = tenants.find((t) => t.slug === selectedCompanyCode);
const selectedTenantId = selectedTenant?.id ?? "";
const { data: tenantDetail } = useQuery({
queryKey: ["tenant", selectedTenant?.id],
queryFn: () => fetchTenant(selectedTenant!.id),
enabled: !!selectedTenant?.id,
queryKey: ["tenant", selectedTenantId],
queryFn: () => fetchTenant(selectedTenantId),
enabled: selectedTenantId.length > 0,
});
const userSchema = (tenantDetail?.config?.userSchema as any[]) ?? [];
const userSchema: UserSchemaField[] = Array.isArray(
tenantDetail?.config?.userSchema,
)
? (tenantDetail?.config?.userSchema as UserSchemaField[])
: [];
const registerMetadata = (key: string) =>
register(`metadata.${key}` as `metadata.${string}`);
const mutation = useMutation({
mutationFn: createUser,
@@ -77,7 +98,10 @@ function UserCreatePage() {
navigate("/users");
},
onError: (err: AxiosError<{ error?: string }>) => {
setError(err.response?.data?.error || "사용자 생성에 실패했습니다.");
setError(
err.response?.data?.error ||
t("msg.admin.users.create.error", "사용자 생성에 실패했습니다."),
);
},
});
@@ -92,7 +116,12 @@ function UserCreatePage() {
}
if (!data.password) {
setError("비밀번호를 입력하거나 자동 생성을 사용해 주세요.");
setError(
t(
"msg.admin.users.create.password_required",
"비밀번호를 입력하거나 자동 생성을 사용해 주세요.",
),
);
return;
}
@@ -114,17 +143,21 @@ function UserCreatePage() {
<div className="space-y-2">
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
<Link to="/users" className="hover:underline">
Users
{t("ui.admin.users.create.breadcrumb.section", "Users")}
</Link>
<span>/</span>
<span className="text-foreground">New</span>
<span className="text-foreground">
{t("ui.admin.users.create.breadcrumb.new", "New")}
</span>
</div>
<h2 className="text-3xl font-semibold">사용자 추가</h2>
<h2 className="text-3xl font-semibold">
{t("ui.admin.users.create.title", "사용자 추가")}
</h2>
</div>
<Button variant="ghost" asChild>
<Link to="/users">
<ArrowLeft size={16} className="mr-2" />
목록으로 돌아가기
{t("ui.admin.users.create.back", "목록으로 돌아가기")}
</Link>
</Button>
</header>
@@ -132,9 +165,23 @@ function UserCreatePage() {
{generatedPassword && (
<Card>
<CardHeader>
<CardTitle>초기 비밀번호 생성 완료</CardTitle>
<CardTitle>
{t(
"ui.admin.users.create.password_generated.title",
"초기 비밀번호 생성 완료",
)}
</CardTitle>
<CardDescription>
{createdEmail ? `${createdEmail} 계정의 초기 비밀번호입니다.` : "초기 비밀번호가 생성되었습니다."}
{createdEmail
? t(
"msg.admin.users.create.password_generated.with_email",
"{{email}} 계정의 초기 비밀번호입니다.",
{ email: createdEmail },
)
: t(
"msg.admin.users.create.password_generated.default",
"초기 비밀번호가 생성되었습니다.",
)}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
@@ -142,11 +189,13 @@ function UserCreatePage() {
<span className="font-mono text-sm">{generatedPassword}</span>
<Button size="sm" variant="outline" onClick={onCopyPassword}>
<ClipboardCopy className="mr-2 h-4 w-4" />
복사
{t("ui.common.copy", "복사")}
</Button>
</div>
<div className="flex justify-end">
<Button onClick={() => navigate("/users")}>목록으로 이동</Button>
<Button onClick={() => navigate("/users")}>
{t("ui.admin.users.create.go_list", "목록으로 이동")}
</Button>
</div>
</CardContent>
</Card>
@@ -154,8 +203,15 @@ function UserCreatePage() {
<Card>
<CardHeader>
<CardTitle>계정 정보</CardTitle>
<CardDescription>새로운 사용자를 시스템에 등록합니다.</CardDescription>
<CardTitle>
{t("ui.admin.users.create.account.title", "계정 정보")}
</CardTitle>
<CardDescription>
{t(
"msg.admin.users.create.account.subtitle",
"새로운 사용자를 시스템에 등록합니다.",
)}
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
@@ -166,182 +222,200 @@ function UserCreatePage() {
)}
<div className="space-y-2">
<Label htmlFor="email">이메일</Label>
<Label htmlFor="email">
{t("ui.admin.users.create.form.email", "이메일")}
</Label>
<Input
id="email"
placeholder="user@example.com"
{...register("email", { required: "이메일은 필수입니다." })}
placeholder={t(
"ui.admin.users.create.form.email_placeholder",
"user@example.com",
)}
{...register("email", {
required: t(
"msg.admin.users.create.form.email_required",
"이메일은 필수입니다.",
),
})}
/>
{errors.email && (
<p className="text-xs text-destructive">{errors.email.message}</p>
<p className="text-xs text-destructive">
{errors.email.message}
</p>
)}
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label htmlFor="password">비밀번호</Label>
<Label htmlFor="password">
{t("ui.admin.users.create.form.password", "비밀번호")}
</Label>
<label className="flex items-center gap-2 text-xs text-muted-foreground">
<input
type="checkbox"
checked={autoPassword}
onChange={(event) => setAutoPassword(event.target.checked)}
/>
자동 생성
{t("ui.admin.users.create.form.auto_password", "자동 생성")}
</label>
</div>
<Input
id="password"
type="password"
placeholder="********"
placeholder={t(
"ui.admin.users.create.form.password_placeholder",
"********",
)}
disabled={autoPassword}
{...register("password")}
/>
<p className="text-xs text-muted-foreground">
{autoPassword
? "비워두면 시스템이 초기 비밀번호를 자동 생성합니다."
: "초기 비밀번호를 직접 설정합니다."}
? t(
"msg.admin.users.create.form.password_auto_help",
"비워두면 시스템이 초기 비밀번호를 자동 생성합니다.",
)
: t(
"msg.admin.users.create.form.password_manual_help",
"초기 비밀번호를 직접 설정합니다.",
)}
</p>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="name">이름</Label>
<Label htmlFor="name">
{t("ui.admin.users.create.form.name", "이름")}
</Label>
<Input
id="name"
placeholder="홍길동"
{...register("name", { required: "이름은 필수입니다." })}
placeholder={t(
"ui.admin.users.create.form.name_placeholder",
"홍길동",
)}
{...register("name", {
required: t(
"msg.admin.users.create.form.name_required",
"이름은 필수입니다.",
),
})}
/>
{errors.name && (
<p className="text-xs text-destructive">{errors.name.message}</p>
<p className="text-xs text-destructive">
{errors.name.message}
</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="phone">전화번호</Label>
<Label htmlFor="phone">
{t("ui.admin.users.create.form.phone", "전화번호")}
</Label>
<Input
id="phone"
placeholder="010-1234-5678"
placeholder={t(
"ui.admin.users.create.form.phone_placeholder",
"010-1234-5678",
)}
{...register("phone")}
/>
</div>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="companyCode">
{t("ui.admin.users.create.form.tenant", "테넌트 (Tenant)")}
</Label>
<div className="space-y-2">
<div className="relative">
<select
id="companyCode"
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"
{...register("companyCode")}
>
<option value="">
{t(
"ui.admin.users.create.form.tenant_global",
"시스템 전역 (소속 없음)",
)}
</option>
<Label htmlFor="companyCode">테넌트 (Tenant)</Label>
{tenants.map((t) => (
<option key={t.id} value={t.slug}>
{t.name} ({t.slug})
</option>
))}
</select>
</div>
</div>
<div className="relative">
<div className="space-y-2">
<Label htmlFor="department">
{t("ui.admin.users.create.form.department", "부서")}
</Label>
<select
<Input
id="department"
placeholder={t(
"ui.admin.users.create.form.department_placeholder",
"개발팀",
)}
{...register("department")}
/>
</div>
</div>
id="companyCode"
{userSchema.length > 0 && (
<div className="border-t pt-4">
<h3 className="mb-4 text-sm font-medium text-muted-foreground">
{t(
"ui.admin.users.create.custom_fields.title",
"테넌트 확장 정보 (Custom Fields)",
)}
</h3>
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"
<div className="grid gap-4 md:grid-cols-2">
{userSchema.map((field) => (
<div key={field.key} className="space-y-2">
<Label htmlFor={`metadata.${field.key}`}>
{field.label}
</Label>
{...register("companyCode")}
<Input
id={`metadata.${field.key}`}
type={field.type === "number" ? "number" : "text"}
{...registerMetadata(field.key)}
/>
</div>
))}
</div>
</div>
)}
>
<option value="">시스템 전역 (소속 없음)</option>
{tenants.map((t) => (
<option key={t.id} value={t.slug}>
{t.name} ({t.slug})
</option>
))}
</select>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="department">부서</Label>
<Input
id="department"
placeholder="개발팀"
{...register("department")}
/>
</div>
</div>
{userSchema.length > 0 && (
<div className="border-t pt-4">
<h3 className="mb-4 text-sm font-medium text-muted-foreground">
테넌트 확장 정보 (Custom Fields)
</h3>
<div className="grid gap-4 md:grid-cols-2">
{userSchema.map((field) => (
<div key={field.key} className="space-y-2">
<Label htmlFor={`metadata.${field.key}`}>
{field.label}
</Label>
<Input
id={`metadata.${field.key}`}
type={field.type === "number" ? "number" : "text"}
{...register(`metadata.${field.key}` as any)}
/>
</div>
))}
</div>
</div>
)}
<div className="space-y-2">
<Label htmlFor="role">역할 (Role)</Label>
<div className="space-y-2">
<Label htmlFor="role">
{t("ui.admin.users.create.form.role", "역할 (Role)")}
</Label>
<div className="relative">
<select
id="role"
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"
{...register("role")}
>
<option value="user">User</option>
<option value="admin">Admin</option>
<option value="user">
{t("ui.common.role.user", "User")}
</option>
<option value="admin">
{t("ui.common.role.admin", "Admin")}
</option>
</select>
</div>
<p className="text-xs text-muted-foreground">
시스템 접근 권한을 결정합니다.
{t(
"msg.admin.users.create.form.role_help",
"시스템 접근 권한을 결정합니다.",
)}
</p>
</div>
@@ -351,14 +425,14 @@ function UserCreatePage() {
variant="outline"
onClick={() => navigate("/users")}
>
취소
{t("ui.common.cancel", "취소")}
</Button>
<Button type="submit" disabled={mutation.isPending}>
{mutation.isPending && (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
)}
<Save className="mr-2 h-4 w-4" />
사용자 생성
{t("ui.admin.users.create.submit", "사용자 생성")}
</Button>
</div>
</form>

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

@@ -15,24 +15,39 @@ import {
import { Input } from "../../components/ui/input";
import { Label } from "../../components/ui/label";
import {
fetchUser,
fetchTenants,
fetchTenant,
updateUser,
type UserUpdateRequest,
fetchTenant,
fetchTenants,
fetchUser,
updateUser,
} from "../../lib/adminApi";
import { t } from "../../lib/i18n";
type UserSchemaField = {
key: string;
label?: string;
type?: "text" | "number" | "boolean";
required?: boolean;
};
type UserFormValues = UserUpdateRequest & { metadata: Record<string, unknown> };
function UserDetailPage() {
const { id } = useParams<{ id: string }>();
const params = useParams<{ id: string }>();
const userId = params.id ?? "";
const navigate = useNavigate();
const queryClient = useQueryClient();
const [error, setError] = React.useState<string | null>(null);
const [successMsg, setSuccessMsg] = React.useState<string | null>(null);
const { data: user, isLoading, isError } = useQuery({
queryKey: ["user", id],
queryFn: () => fetchUser(id!),
enabled: !!id,
const {
data: user,
isLoading,
isError,
} = useQuery({
queryKey: ["user", userId],
queryFn: () => fetchUser(userId),
enabled: userId.length > 0,
});
const { data: tenantsData } = useQuery({
@@ -47,7 +62,7 @@ function UserDetailPage() {
reset,
watch,
formState: { errors },
} = useForm<UserUpdateRequest & { metadata: Record<string, any> }>({
} = useForm<UserFormValues>({
defaultValues: {
name: "",
phone: "",
@@ -63,13 +78,22 @@ function UserDetailPage() {
const selectedCompanyCode = watch("companyCode");
const selectedTenant = tenants.find((t) => t.slug === selectedCompanyCode);
const selectedTenantId = selectedTenant?.id ?? "";
const { data: tenantDetail } = useQuery({
queryKey: ["tenant", selectedTenant?.id],
queryFn: () => fetchTenant(selectedTenant!.id),
enabled: !!selectedTenant?.id,
queryKey: ["tenant", selectedTenantId],
queryFn: () => fetchTenant(selectedTenantId),
enabled: selectedTenantId.length > 0,
});
const userSchema = (tenantDetail?.config?.userSchema as any[]) ?? [];
const userSchema: UserSchemaField[] = Array.isArray(
tenantDetail?.config?.userSchema,
)
? (tenantDetail?.config?.userSchema as UserSchemaField[])
: [];
const registerMetadata = (key: string) =>
register(`metadata.${key}` as `metadata.${string}`);
React.useEffect(() => {
if (user) {
@@ -87,15 +111,26 @@ function UserDetailPage() {
}, [user, reset]);
const mutation = useMutation({
mutationFn: (data: UserUpdateRequest) => updateUser(id!, data),
mutationFn: (data: UserUpdateRequest) => updateUser(userId, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["users"] });
queryClient.invalidateQueries({ queryKey: ["user", id] });
setSuccessMsg("사용자 정보가 수정되었습니다.");
queryClient.invalidateQueries({ queryKey: ["user", userId] });
setSuccessMsg(
t(
"msg.admin.users.detail.update_success",
"사용자 정보가 수정되었습니다.",
),
);
setError(null);
},
onError: (err: AxiosError<{ error?: string }>) => {
setError(err.response?.data?.error || "사용자 수정에 실패했습니다.");
setError(
err.response?.data?.error ||
t(
"msg.admin.users.detail.update_error",
"사용자 수정에 실패했습니다.",
),
);
setSuccessMsg(null);
},
});
@@ -103,19 +138,23 @@ function UserDetailPage() {
const onSubmit = (data: UserUpdateRequest) => {
const payload = { ...data };
if (!payload.password) {
delete payload.password;
payload.password = undefined;
}
mutation.mutate(payload);
};
if (isLoading) {
return <div className="p-8 text-center">Loading...</div>;
return (
<div className="p-8 text-center">
{t("msg.common.loading", "Loading...")}
</div>
);
}
if (isError || !user) {
return (
<div className="p-8 text-center text-destructive">
사용자를 찾을 수 없습니다.
{t("msg.admin.users.detail.not_found", "사용자를 찾을 수 없습니다.")}
</div>
);
}
@@ -126,26 +165,34 @@ function UserDetailPage() {
<div className="space-y-2">
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
<Link to="/users" className="hover:underline">
Users
{t("ui.admin.users.detail.breadcrumb.section", "Users")}
</Link>
<span>/</span>
<span className="text-foreground">{user.name}</span>
</div>
<h2 className="text-3xl font-semibold">사용자 상세</h2>
<h2 className="text-3xl font-semibold">
{t("ui.admin.users.detail.title", "사용자 상세")}
</h2>
</div>
<Button variant="ghost" asChild>
<Link to="/users">
<ArrowLeft size={16} className="mr-2" />
목록으로 돌아가기
{t("ui.admin.users.detail.back", "목록으로 돌아가기")}
</Link>
</Button>
</header>
<Card>
<CardHeader>
<CardTitle>정보 수정</CardTitle>
<CardTitle>
{t("ui.admin.users.detail.edit_title", "정보 수정")}
</CardTitle>
<CardDescription>
{user.email} 계정의 정보를 수정합니다.
{t(
"msg.admin.users.detail.edit_subtitle",
"{{email}} 계정의 정보를 수정합니다.",
{ email: user.email },
)}
</CardDescription>
</CardHeader>
<CardContent>
@@ -163,22 +210,39 @@ function UserDetailPage() {
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="name">이름</Label>
<Label htmlFor="name">
{t("ui.admin.users.detail.form.name", "이름")}
</Label>
<Input
id="name"
placeholder="홍길동"
{...register("name", { required: "이름은 필수입니다." })}
placeholder={t(
"ui.admin.users.detail.form.name_placeholder",
"홍길동",
)}
{...register("name", {
required: t(
"msg.admin.users.detail.form.name_required",
"이름은 필수입니다.",
),
})}
/>
{errors.name && (
<p className="text-xs text-destructive">{errors.name.message}</p>
<p className="text-xs text-destructive">
{errors.name.message}
</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="phone">전화번호</Label>
<Label htmlFor="phone">
{t("ui.admin.users.detail.form.phone", "전화번호")}
</Label>
<Input
id="phone"
placeholder="010-1234-5678"
placeholder={t(
"ui.admin.users.detail.form.phone_placeholder",
"010-1234-5678",
)}
{...register("phone")}
/>
</div>
@@ -186,149 +250,145 @@ function UserDetailPage() {
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="status">상태</Label>
<Label htmlFor="status">
{t("ui.admin.users.detail.form.status", "상태")}
</Label>
<div className="relative">
<select
id="status"
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"
{...register("status")}
>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="blocked">Blocked</option>
<option value="active">
{t("ui.common.status.active", "Active")}
</option>
<option value="inactive">
{t("ui.common.status.inactive", "Inactive")}
</option>
<option value="blocked">
{t("ui.common.status.blocked", "Blocked")}
</option>
</select>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="role">역할 (Role)</Label>
<Label htmlFor="role">
{t("ui.admin.users.detail.form.role", "역할 (Role)")}
</Label>
<div className="relative">
<select
id="role"
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"
{...register("role")}
>
<option value="user">User</option>
<option value="admin">Admin</option>
<option value="user">
{t("ui.common.role.user", "User")}
</option>
<option value="admin">
{t("ui.common.role.admin", "Admin")}
</option>
</select>
</div>
</div>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="companyCode">테넌트 (Tenant)</Label>
<div className="relative">
<select
id="companyCode"
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"
{...register("companyCode")}
>
<option value="">시스템 전역 (소속 없음)</option>
{tenants.map((t) => (
<option key={t.id} value={t.slug}>
{t.name} ({t.slug})
</option>
))}
</select>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="department">부서</Label>
<Input
id="department"
placeholder="개발팀"
{...register("department")}
/>
</div>
</div>
{userSchema.length > 0 && (
<div className="border-t pt-4">
<h3 className="mb-4 text-sm font-medium text-muted-foreground">
테넌트 확장 정보 (Custom Fields)
</h3>
<div className="grid gap-4 md:grid-cols-2">
{userSchema.map((field) => (
<div key={field.key} className="space-y-2">
<Label htmlFor={`metadata.${field.key}`}>
{field.label}
</Label>
<Input
id={`metadata.${field.key}`}
type={field.type === "number" ? "number" : "text"}
{...register(`metadata.${field.key}` as any)}
/>
</div>
))}
</div>
</div>
)}
<div className="border-t pt-4">
<h3 className="mb-4 text-sm font-medium text-muted-foreground">보안 설정</h3>
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="password">비밀번호 변경</Label>
<Label htmlFor="companyCode">
{t("ui.admin.users.detail.form.tenant", "테넌트 (Tenant)")}
</Label>
<div className="relative">
<select
id="companyCode"
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"
{...register("companyCode")}
>
<option value="">
{t(
"ui.admin.users.detail.form.tenant_global",
"시스템 전역 (소속 없음)",
)}
</option>
{tenants.map((t) => (
<option key={t.id} value={t.slug}>
{t.name} ({t.slug})
</option>
))}
</select>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="department">
{t("ui.admin.users.detail.form.department", "부서")}
</Label>
<Input
id="department"
placeholder={t(
"ui.admin.users.detail.form.department_placeholder",
"개발팀",
)}
{...register("department")}
/>
</div>
</div>
{userSchema.length > 0 && (
<div className="border-t pt-4">
<h3 className="mb-4 text-sm font-medium text-muted-foreground">
{t(
"ui.admin.users.detail.custom_fields.title",
"테넌트 확장 정보 (Custom Fields)",
)}
</h3>
<div className="grid gap-4 md:grid-cols-2">
{userSchema.map((field) => (
<div key={field.key} className="space-y-2">
<Label htmlFor={`metadata.${field.key}`}>
{field.label}
</Label>
<Input
id={`metadata.${field.key}`}
type={field.type === "number" ? "number" : "text"}
{...registerMetadata(field.key)}
/>
</div>
))}
</div>
</div>
)}
<div className="border-t pt-4">
<h3 className="mb-4 text-sm font-medium text-muted-foreground">
{t("ui.admin.users.detail.security.title", "보안 설정")}
</h3>
<div className="space-y-2">
<Label htmlFor="password">
{t(
"ui.admin.users.detail.security.password",
"비밀번호 변경",
)}
</Label>
<Input
id="password"
type="password"
placeholder="변경할 경우에만 입력"
placeholder={t(
"ui.admin.users.detail.security.password_placeholder",
"변경할 경우에만 입력",
)}
{...register("password")}
/>
<p className="text-xs text-muted-foreground">
비밀번호를 변경하려면 입력하세요. 비워두면 현재 비밀번호가 유지됩니다.
{t(
"msg.admin.users.detail.security.password_hint",
"비밀번호를 변경하려면 입력하세요. 비워두면 현재 비밀번호가 유지됩니다.",
)}
</p>
</div>
</div>
@@ -339,14 +399,14 @@ function UserDetailPage() {
variant="outline"
onClick={() => navigate("/users")}
>
취소
{t("ui.common.cancel", "취소")}
</Button>
<Button type="submit" disabled={mutation.isPending}>
{mutation.isPending && (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
)}
<Save className="mr-2 h-4 w-4" />
저장
{t("ui.common.save", "저장")}
</Button>
</div>
</form>
@@ -356,4 +416,4 @@ function UserDetailPage() {
);
}
export default UserDetailPage;
export default UserDetailPage;

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

@@ -31,6 +31,7 @@ import {
TableRow,
} from "../../components/ui/table";
import { deleteUser, fetchUsers } from "../../lib/adminApi";
import { t } from "../../lib/i18n";
function UserListPage() {
const navigate = useNavigate();
@@ -67,7 +68,12 @@ function UserListPage() {
const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
?.data?.error;
const fallbackError =
!errorMsg && query.isError ? "사용자 목록 조회에 실패했습니다." : null;
!errorMsg && query.isError
? t(
"msg.admin.users.list.fetch_error",
"사용자 목록 조회에 실패했습니다.",
)
: null;
const items = query.data?.items ?? [];
const total = query.data?.total ?? 0;
@@ -80,7 +86,15 @@ function UserListPage() {
}, [items]);
const handleDelete = (userId: string, userName: string) => {
if (!window.confirm(`사용자 "${userName}"을(를) 정말 삭제하시겠습니까?`)) {
if (
!window.confirm(
t(
"msg.admin.users.list.delete_confirm",
'사용자 "{{name}}"을(를) 정말 삭제하시겠습니까?',
{ name: userName },
),
)
) {
return;
}
deleteMutation.mutate(userId);
@@ -91,13 +105,20 @@ function UserListPage() {
<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)]">
<span>Users</span>
<span>{t("ui.admin.users.list.breadcrumb.section", "Users")}</span>
<span>/</span>
<span className="text-foreground">List</span>
<span className="text-foreground">
{t("ui.admin.users.list.breadcrumb.list", "List")}
</span>
</div>
<h2 className="text-3xl font-semibold">사용자 관리</h2>
<h2 className="text-3xl font-semibold">
{t("ui.admin.users.list.title", "사용자 관리")}
</h2>
<p className="text-sm text-[var(--color-muted)]">
시스템 사용자를 조회하고 관리합니다. (Local DB)
{t(
"msg.admin.users.list.subtitle",
"시스템 사용자를 조회하고 관리합니다. (Local DB)",
)}
</p>
</div>
<div className="flex items-center gap-2">
@@ -107,12 +128,12 @@ function UserListPage() {
disabled={query.isFetching}
>
<RefreshCw size={16} />
새로고침
{t("ui.common.refresh", "새로고침")}
</Button>
<Button asChild>
<Link to="/users/new">
<Plus size={16} />
사용자 추가
{t("ui.admin.users.list.add", "사용자 추가")}
</Link>
</Button>
</div>
@@ -121,9 +142,15 @@ function UserListPage() {
<Card className="bg-[var(--color-panel)]">
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle>User Registry</CardTitle>
<CardTitle>
{t("ui.admin.users.list.registry.title", "User Registry")}
</CardTitle>
<CardDescription>
총 {total}명의 사용자가 등록되어 있습니다.
{t(
"msg.admin.users.list.registry.count",
"총 {{count}}명의 사용자가 등록되어 있습니다.",
{ count: total },
)}
</CardDescription>
</div>
</CardHeader>
@@ -132,7 +159,10 @@ function UserListPage() {
<div className="relative flex-1 max-w-sm">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder="이름 또는 이메일 검색..."
placeholder={t(
"ui.admin.users.list.search_placeholder",
"이름 또는 이메일 검색...",
)}
className="pl-9"
value={searchDraft}
onChange={(e) => setSearchDraft(e.target.value)}
@@ -140,7 +170,7 @@ function UserListPage() {
/>
</div>
<Button variant="secondary" onClick={handleSearch}>
검색
{t("ui.common.search", "검색")}
</Button>
</div>
@@ -154,26 +184,41 @@ function UserListPage() {
<Table>
<TableHeader>
<TableRow>
<TableHead>NAME / EMAIL</TableHead>
<TableHead>ROLE</TableHead>
<TableHead>STATUS</TableHead>
<TableHead>TENANT / DEPT</TableHead>
<TableHead>CREATED</TableHead>
<TableHead className="text-right">ACTIONS</TableHead>
<TableHead>
{t("ui.admin.users.list.table.name_email", "NAME / EMAIL")}
</TableHead>
<TableHead>
{t("ui.admin.users.list.table.role", "ROLE")}
</TableHead>
<TableHead>
{t("ui.admin.users.list.table.status", "STATUS")}
</TableHead>
<TableHead>
{t(
"ui.admin.users.list.table.tenant_dept",
"TENANT / DEPT",
)}
</TableHead>
<TableHead>
{t("ui.admin.users.list.table.created", "CREATED")}
</TableHead>
<TableHead className="text-right">
{t("ui.admin.users.list.table.actions", "ACTIONS")}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{query.isLoading && (
<TableRow>
<TableCell colSpan={6} className="h-24 text-center">
로딩 중...
{t("msg.common.loading", "로딩 중...")}
</TableCell>
</TableRow>
)}
{!query.isLoading && items.length === 0 && (
<TableRow>
<TableCell colSpan={6} className="h-24 text-center">
검색 결과가 없습니다.
{t("msg.admin.users.list.empty", "검색 결과가 없습니다.")}
</TableCell>
</TableRow>
)}
@@ -193,7 +238,9 @@ function UserListPage() {
</div>
</TableCell>
<TableCell>
<Badge variant="outline">{user.role}</Badge>
<Badge variant="outline">
{t(`ui.common.role.${user.role}`, user.role)}
</Badge>
</TableCell>
<TableCell>
<Badge
@@ -201,7 +248,7 @@ function UserListPage() {
user.status === "active" ? "default" : "secondary"
}
>
{user.status}
{t(`ui.common.status.${user.status}`, user.status)}
</Badge>
</TableCell>
<TableCell>
@@ -211,7 +258,13 @@ function UserListPage() {
</span>
{user.tenant && (
<span className="text-[10px] text-muted-foreground uppercase">
Slug: {user.tenant.slug}
{t(
"ui.admin.users.list.tenant_slug",
"Slug: {{slug}}",
{
slug: user.tenant.slug,
},
)}
</span>
)}
<span className="text-xs text-muted-foreground">
@@ -228,7 +281,11 @@ function UserListPage() {
variant="ghost"
size="icon"
onClick={() => navigate(`/users/${user.id}`)}
aria-label={`사용자 수정: ${user.name}`}
aria-label={t(
"ui.admin.users.list.edit_aria",
"사용자 수정: {{name}}",
{ name: user.name },
)}
>
<Pencil size={16} />
</Button>
@@ -238,7 +295,11 @@ function UserListPage() {
className="text-destructive hover:text-destructive"
onClick={() => handleDelete(user.id, user.name)}
disabled={deleteMutation.isPending}
aria-label={`사용자 삭제: ${user.name}`}
aria-label={t(
"ui.admin.users.list.delete_aria",
"사용자 삭제: {{name}}",
{ name: user.name },
)}
>
<Trash2 size={16} />
</Button>
@@ -260,10 +321,13 @@ function UserListPage() {
disabled={page === 1 || query.isFetching}
>
<ChevronLeft size={16} />
Previous
{t("ui.common.previous", "Previous")}
</Button>
<div className="text-sm text-muted-foreground">
Page {page} of {totalPages}
{t("ui.common.page_of", "Page {{page}} of {{total}}", {
page,
total: totalPages,
})}
</div>
<Button
variant="outline"
@@ -271,7 +335,7 @@ function UserListPage() {
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
disabled={page === totalPages || query.isFetching}
>
Next
{t("ui.common.next", "Next")}
<ChevronRight size={16} />
</Button>
</div>