Merge pull request 'feature/issue-917-sub-email-support' (#931) from feature/issue-917-sub-email-support into dev

Reviewed-on: baron/baron-sso#931

adminfront/src/features/users/UserCreatePage.tsx

@@ -8,6 +8,8 @@ import {
   Plus,
   Save,
   Trash2,
+  Mail,
+  X,
 } from "lucide-react";
 import * as React from "react";
 import { useForm } from "react-hook-form";
@@ -58,7 +60,11 @@ import {
 import type { UserSchemaField } from "./userSchemaFields";
 import { resolvePersonalTenant } from "./utils/personalTenant";
 
-type UserFormValues = UserCreateRequest & { metadata: Record<string, unknown> };
+type UserFormValues = UserCreateRequest & {
+  metadata: Record<string, unknown> & {
+    sub_email?: string[];
+  };
+};
 type UserCategory = "hanmac" | "external" | "personal";
 
 type PickerTarget = { kind: "appointment"; index: number };
@@ -135,6 +141,8 @@ function UserCreatePage() {
   );
   const [isResolvingTenant, setIsResolvingTenant] = React.useState(false);
 
+  const [newSubEmail, setNewSubEmail] = React.useState("");
+
   const { data: tenantsData } = useQuery({
     queryKey: ["tenants", "all"],
     queryFn: () => fetchAllTenants(),
@@ -164,10 +172,35 @@ function UserCreatePage() {
       position: "",
       jobTitle: "",
       role: "user",
-      metadata: {},
+      metadata: {
+        sub_email: [],
+      },
     },
   });
 
+  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 },
+    );
+  };
+
   // Lock company for tenant_admin
   React.useEffect(() => {
     if (profile?.role === "tenant_admin" && profile.tenantSlug) {
@@ -370,10 +403,15 @@ function UserCreatePage() {
     const {
       hanmacFamily: _hanmacFamily,
       userType: _userType,
+      sub_email: rawSubEmail,
       ...formMetadata
     } = data.metadata ?? {};
+
+    const sub_email = Array.isArray(rawSubEmail) ? rawSubEmail : [];
+
     const metadata: Record<string, unknown> = {
       ...formMetadata,
+      ...(sub_email.length > 0 ? { sub_email } : { sub_email: [] }),
     };
 
     const payload: UserCreateRequest = {
@@ -584,6 +622,73 @@ function UserCreatePage() {
               )}
             </div>
 
+            <div className="space-y-2">
+              <Label
+                htmlFor="sub_email_input"
+                className="flex items-center gap-2"
+              >
+                {t("ui.admin.users.create.form.sub_email", "보조 이메일")}
+              </Label>
+              <div className="flex flex-col gap-2">
+                <div className="flex flex-wrap gap-2 mb-1">
+                  {currentSubEmails.map((email) => (
+                    <div
+                      key={email}
+                      className="inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 bg-secondary text-secondary-foreground"
+                    >
+                      {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>
+                    </div>
+                  ))}
+                </div>
+                <div className="relative">
+                  <Input
+                    id="sub_email_input"
+                    value={newSubEmail}
+                    onChange={(e) => setNewSubEmail(e.target.value)}
+                    onKeyDown={handleAddSubEmail}
+                    className="pr-20"
+                    placeholder={t(
+                      "ui.admin.users.create.form.sub_email_placeholder",
+                      "추가할 이메일 입력 후 Enter",
+                    )}
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="absolute right-1 top-1 h-8 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">
+                  * 여러 개 입력 가능. 입력 후 엔터를 눌러 추가하세요.
+                </p>
+              </div>
+            </div>
+
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <Label htmlFor="password">