forked from baron/baron-sso
feat: 보조 이메일(sub_email) 태그/칩 입력 UI 개선 (#917)
- `UserCreatePage` 및 `UserDetailPage`에서 보조 이메일을 입력할 때 일반 텍스트가 아닌 태그(Chip) 형태로 입력/삭제할 수 있도록 UX 개선 - 여러 개의 이메일을 엔터나 클릭으로 하나씩 추가하고, `X` 버튼을 눌러 개별 삭제가 가능하도록 인터랙션 보강 - Form의 `sub_email` 데이터 타입을 `string[]`으로 일원화하여 파싱 오류 및 데이터 정합성 강화
This commit is contained in:
@@ -17,6 +17,7 @@ import {
|
||||
Shield,
|
||||
Trash2,
|
||||
Users,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import * as React from "react";
|
||||
import {
|
||||
@@ -95,7 +96,7 @@ import { resolvePersonalTenant } from "./utils/personalTenant";
|
||||
type UserFormValues = Omit<UserUpdateRequest, "metadata"> & {
|
||||
email: string;
|
||||
metadata: Record<string, Record<string, string | number | boolean>> & {
|
||||
sub_email?: string;
|
||||
sub_email?: string[];
|
||||
};
|
||||
};
|
||||
type UserCategory = "hanmac" | "external" | "personal";
|
||||
@@ -409,6 +410,30 @@ function UserDetailPage() {
|
||||
const isSelf = Boolean(profile?.id && user?.id && profile.id === user.id);
|
||||
const watchedStatus = watch("status");
|
||||
|
||||
const [newSubEmail, setNewSubEmail] = React.useState("");
|
||||
const currentSubEmails = (watch("metadata.sub_email") as string[]) || [];
|
||||
|
||||
const handleAddSubEmail = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter" || e.key === "," || e.key === " ") {
|
||||
e.preventDefault();
|
||||
const value = newSubEmail.trim().replace(/,/g, "");
|
||||
if (value && value.includes("@") && !currentSubEmails.includes(value)) {
|
||||
setValue("metadata.sub_email", [...currentSubEmails, value], {
|
||||
shouldDirty: true,
|
||||
});
|
||||
setNewSubEmail("");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveSubEmail = (emailToRemove: string) => {
|
||||
setValue(
|
||||
"metadata.sub_email",
|
||||
currentSubEmails.filter((e) => e !== emailToRemove),
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
};
|
||||
|
||||
const resetMutation = useMutation({
|
||||
mutationFn: (newPass: string) => updateUser(userId, { password: newPass }),
|
||||
onSuccess: (_, newPass) => {
|
||||
@@ -636,10 +661,13 @@ function UserDetailPage() {
|
||||
Record<string, string | number | boolean>
|
||||
>) || {}),
|
||||
sub_email: Array.isArray(user.metadata?.sub_email)
|
||||
? user.metadata.sub_email.join(", ")
|
||||
? user.metadata.sub_email
|
||||
: typeof user.metadata?.sub_email === "string"
|
||||
? user.metadata.sub_email
|
||||
: "",
|
||||
.split(/[;,\n\r\t]/)
|
||||
.map((e) => e.trim())
|
||||
.filter((e) => e.includes("@"))
|
||||
: [],
|
||||
},
|
||||
});
|
||||
const isUserHanmacFamily = isHanmacFamilyUser(
|
||||
@@ -1087,27 +1115,74 @@ function UserDetailPage() {
|
||||
<div className="grid gap-8 md:grid-cols-2 pt-6 border-t border-dashed">
|
||||
<div className="space-y-2 col-span-full">
|
||||
<Label
|
||||
htmlFor="sub_email"
|
||||
htmlFor="sub_email_input"
|
||||
className="text-xs font-bold uppercase text-muted-foreground flex items-center gap-2"
|
||||
>
|
||||
<Mail size={14} />
|
||||
{t("ui.admin.users.detail.form.sub_email", "보조 이메일")}
|
||||
<span className="text-[10px] text-muted-foreground font-normal normal-case">
|
||||
(여러 개 입력 시 콤마 또는 세미콜론으로 구분)
|
||||
</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="sub_email"
|
||||
{...register("metadata.sub_email")}
|
||||
className="h-11 shadow-sm"
|
||||
placeholder="sub1@example.com, sub2@test.com"
|
||||
/>
|
||||
<p className="text-[10px] text-muted-foreground mt-1">
|
||||
{t(
|
||||
"msg.admin.users.detail.sub_email_help",
|
||||
"* 보조 이메일로도 로그인이 가능하며 계정 찾기 등에 활용될 수 있습니다.",
|
||||
)}
|
||||
</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-wrap gap-2 mb-1">
|
||||
{currentSubEmails.map((email) => (
|
||||
<Badge
|
||||
key={email}
|
||||
variant="secondary"
|
||||
className="flex items-center gap-1 px-2.5 py-1 text-xs font-medium"
|
||||
>
|
||||
{email}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveSubEmail(email)}
|
||||
className="text-muted-foreground hover:text-foreground ml-1 rounded-full p-0.5 hover:bg-muted transition-colors"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="sub_email_input"
|
||||
value={newSubEmail}
|
||||
onChange={(e) => setNewSubEmail(e.target.value)}
|
||||
onKeyDown={handleAddSubEmail}
|
||||
className="h-11 shadow-sm pr-20"
|
||||
placeholder={t(
|
||||
"ui.admin.users.detail.form.sub_email_placeholder",
|
||||
"추가할 이메일 입력 후 Enter",
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-1 top-1 h-9 text-xs font-bold"
|
||||
onClick={() => {
|
||||
const value = newSubEmail.trim().replace(/,/g, "");
|
||||
if (
|
||||
value &&
|
||||
value.includes("@") &&
|
||||
!currentSubEmails.includes(value)
|
||||
) {
|
||||
setValue(
|
||||
"metadata.sub_email",
|
||||
[...currentSubEmails, value],
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
setNewSubEmail("");
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t("ui.common.add", "추가")}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-[10px] text-muted-foreground mt-1">
|
||||
{t(
|
||||
"msg.admin.users.detail.sub_email_help",
|
||||
"* 보조 이메일로도 로그인이 가능하며 계정 찾기 등에 활용될 수 있습니다.",
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user