feat: 보조 이메일(sub_email) 태그/칩 입력 UI 개선 (#917)

- `UserCreatePage` 및 `UserDetailPage`에서 보조 이메일을 입력할 때 일반 텍스트가 아닌 태그(Chip) 형태로 입력/삭제할 수 있도록 UX 개선
- 여러 개의 이메일을 엔터나 클릭으로 하나씩 추가하고, `X` 버튼을 눌러 개별 삭제가 가능하도록 인터랙션 보강
- Form의 `sub_email` 데이터 타입을 `string[]`으로 일원화하여 파싱 오류 및 데이터 정합성 강화

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";
@@ -60,7 +62,7 @@ import { resolvePersonalTenant } from "./utils/personalTenant";
 
 type UserFormValues = UserCreateRequest & {
   metadata: Record<string, unknown> & {
-    sub_email?: string;
+    sub_email?: string[];
   };
 };
 type UserCategory = "hanmac" | "external" | "personal";
@@ -136,6 +138,8 @@ function UserCreatePage() {
   );
   const [isResolvingTenant, setIsResolvingTenant] = React.useState(false);
 
+  const [newSubEmail, setNewSubEmail] = React.useState("");
+
   const { data: tenantsData } = useQuery({
     queryKey: ["tenants", "all"],
     queryFn: () => fetchAllTenants(),
@@ -166,11 +170,34 @@ function UserCreatePage() {
       jobTitle: "",
       role: "user",
       metadata: {
-        sub_email: "",
+        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) {
@@ -377,14 +404,7 @@ function UserCreatePage() {
       ...formMetadata
     } = data.metadata ?? {};
 
-    // Parse sub_email
-    let sub_email: string[] = [];
-    if (typeof rawSubEmail === "string" && rawSubEmail.trim() !== "") {
-      sub_email = rawSubEmail
-        .split(/[;,\n\r\t]/)
-        .map((e) => e.trim())
-        .filter((e) => e.includes("@"));
-    }
+    const sub_email = Array.isArray(rawSubEmail) ? rawSubEmail : [];
 
     const metadata: Record<string, unknown> = {
       ...formMetadata,
@@ -600,22 +620,69 @@ function UserCreatePage() {
 
             <div className="space-y-2">
               <Label
-                htmlFor="sub_email"
+                htmlFor="sub_email_input"
                 className="flex items-center gap-2"
               >
                 {t("ui.admin.users.create.form.sub_email", "보조 이메일")}
-                <span className="text-[10px] text-muted-foreground font-normal">
-                  (여러 개 입력 시 콤마 또는 세미콜론으로 구분)
-                </span>
               </Label>
-              <Input
-                id="sub_email"
-                placeholder={t(
-                  "ui.admin.users.create.form.sub_email_placeholder",
-                  "sub1@example.com, sub2@test.com",
-                )}
-                {...register("metadata.sub_email")}
-              />
+              <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">

adminfront/src/features/users/UserDetailPage.tsx

@@ -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>