From 53dacda5d51dcbab1a1106f96c23fded4a4607c3 Mon Sep 17 00:00:00 2001
From: chan <b24028@hanmaceng.co.kr>
Date: Wed, 20 May 2026 13:25:21 +0900
Subject: [PATCH 1/3] feat(adminfront): add Data Management menu to User tab

This commit introduces a 'Data Management' dropdown menu to the User list page, consolidating user CSV import, template download, and export actions. It aligns the UI with the existing Tenant list page.
---
 .../src/features/users/UserListPage.tsx       | 76 +++++++++++++------
 .../users/components/UserBulkUploadModal.tsx  | 25 ++++--
 2 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/adminfront/src/features/users/UserListPage.tsx b/adminfront/src/features/users/UserListPage.tsx
index 6142e93c..7e30b90c 100644
--- a/adminfront/src/features/users/UserListPage.tsx
+++ b/adminfront/src/features/users/UserListPage.tsx
@@ -7,7 +7,9 @@ import {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  Download,
   FileDown,
+  FileSpreadsheet,
   LayoutDashboard,
   Plus,
   RefreshCw,
@@ -15,6 +17,7 @@ import {
   Settings2,
   ShieldCheck,
   Trash2,
+  Upload,
 } from "lucide-react";
 import * as React from "react";
 import { Link, useNavigate } from "react-router-dom";
@@ -90,7 +93,10 @@ import {
 } from "../../lib/adminApi";
 import { t } from "../../lib/i18n";
 import { isSuperAdminRole } from "../../lib/roles";
-import { UserBulkUploadModal } from "./components/UserBulkUploadModal";
+import {
+  UserBulkUploadModal,
+  downloadUserTemplate,
+} from "./components/UserBulkUploadModal";
 import {
   normalizeUserStatusValue,
   type UserStatusValue,
@@ -485,27 +491,53 @@ function UserListPage() {
               <RefreshCw size={16} />
               {t("ui.common.refresh", "새로고침")}
             </Button>
-            <Button
-              variant="outline"
-              onClick={() => handleExport(false)}
-              className="gap-2"
-              disabled={exportMutation.isPending}
-              data-testid="user-export-without-ids-btn"
-            >
-              <FileDown size={16} />
-              {t("ui.common.export_without_ids", "UUID 제외 내보내기")}
-            </Button>
-            <Button
-              variant="outline"
-              onClick={() => handleExport(true)}
-              className="gap-2"
-              disabled={exportMutation.isPending}
-              data-testid="user-export-with-ids-btn"
-            >
-              <FileDown size={16} />
-              {t("ui.common.export_with_ids", "UUID 포함")}
-            </Button>
-            <UserBulkUploadModal onSuccess={() => query.refetch()} />
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  data-testid="user-data-mgmt-btn"
+                  className="gap-2 h-9"
+                >
+                  <LayoutDashboard size={16} />
+                  {t("ui.admin.users.data_mgmt", "데이터 관리")}
+                  <ChevronDown size={14} className="opacity-50" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <DropdownMenuItem
+                  onClick={downloadUserTemplate}
+                  data-testid="user-template-menu-item"
+                  className="cursor-pointer"
+                >
+                  <FileSpreadsheet size={16} className="mr-2 opacity-50" />
+                  {t("ui.admin.users.csv_template", "템플릿 다운로드")}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <UserBulkUploadModal
+                  variant="dropdown"
+                  onSuccess={() => query.refetch()}
+                />
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => handleExport(false)}
+                  disabled={exportMutation.isPending}
+                  data-testid="user-export-menu-item"
+                  className="cursor-pointer"
+                >
+                  <FileDown size={16} className="mr-2 opacity-50" />
+                  {t("ui.common.export_without_ids", "UUID 제외 내보내기")}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => handleExport(true)}
+                  disabled={exportMutation.isPending}
+                  data-testid="user-export-with-ids-menu-item"
+                  className="cursor-pointer"
+                >
+                  <FileDown size={16} className="mr-2 opacity-50" />
+                  {t("ui.common.export_with_ids", "UUID 포함 내보내기")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
             <Dialog>
               <DialogTrigger asChild>
                 <Button variant="outline" size="icon" className="h-9 w-9">
diff --git a/adminfront/src/features/users/components/UserBulkUploadModal.tsx b/adminfront/src/features/users/components/UserBulkUploadModal.tsx
index 33ddb68f..6a310b0b 100644
--- a/adminfront/src/features/users/components/UserBulkUploadModal.tsx
+++ b/adminfront/src/features/users/components/UserBulkUploadModal.tsx
@@ -18,6 +18,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
+import { DropdownMenuItem } from "../../../components/ui/dropdown-menu";
 import { ScrollArea } from "../../../components/ui/scroll-area";
 import {
   type BulkUserItem,
@@ -121,6 +122,22 @@ function hanmacEmailStatusClass(preview?: HanmacImportEmailPreview) {
   return "text-muted-foreground";
 }
 
+export const downloadUserTemplate = () => {
+  const headers =
+    "email,name,phone,role,tenant_slug,department,grade,position,jobTitle,employee_id,tenant_slug1,department1,grade1,position1,jobTitle1,employee_id1";
+  const example =
+    "user1@example.com,홍길동,010-1234-5678,user,tenant-slug,개발팀,수석,팀장,프론트엔드,EMP001,second-tenant,센터,책임,,Architecture,EMP002";
+  const blob = new Blob([`${headers}\n${example}`], {
+    type: "text/csv;charset=utf-8;",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "user_bulk_template.csv";
+  a.click();
+  URL.revokeObjectURL(url);
+};
+
 export function UserBulkUploadModal({
   onSuccess,
   variant = "button",
@@ -334,16 +351,14 @@ export function UserBulkUploadModal({
 
   const triggerNode =
     variant === "dropdown" ? (
-      <div
-        className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-        role="menuitem"
-        tabIndex={-1}
+      <DropdownMenuItem
         onClick={() => setOpen(true)}
+        className="cursor-pointer"
         {...triggerProps}
       >
         <Upload size={16} className="mr-2 opacity-50" />
         {t("ui.admin.users.list.bulk_import", "일괄 등록 (CSV)")}
-      </div>
+      </DropdownMenuItem>
     ) : (
       <DialogTrigger asChild>
         <Button variant="outline" className="gap-2" {...triggerProps}>

From 11d535f4e363960a3f28a3b1d071a7f71a38d4b3 Mon Sep 17 00:00:00 2001
From: chan <b24028@hanmaceng.co.kr>
Date: Wed, 20 May 2026 13:28:03 +0900
Subject: [PATCH 2/3] fix(adminfront): prevent bulk import modal from
 unmounting when dropdown closes

Lifted the modal state out of the DropdownMenuContent to ensure the dialog does not unmount immediately when the dropdown item is clicked.
---
 .../src/features/users/UserListPage.tsx       | 21 +++++++++++++++----
 .../users/components/UserBulkUploadModal.tsx  | 17 +++++++++++----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/adminfront/src/features/users/UserListPage.tsx b/adminfront/src/features/users/UserListPage.tsx
index 7e30b90c..b7aaad10 100644
--- a/adminfront/src/features/users/UserListPage.tsx
+++ b/adminfront/src/features/users/UserListPage.tsx
@@ -146,6 +146,7 @@ function UserListPage() {
     React.useState("");
   const [sortConfig, setSortConfig] =
     React.useState<SortConfig<UserSortKey> | null>(null);
+  const [bulkUploadOpen, setBulkUploadOpen] = React.useState(false);
 
   const limit = 1000;
   const offset = (page - 1) * limit;
@@ -513,10 +514,16 @@ function UserListPage() {
                   {t("ui.admin.users.csv_template", "템플릿 다운로드")}
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
-                <UserBulkUploadModal
-                  variant="dropdown"
-                  onSuccess={() => query.refetch()}
-                />
+                <DropdownMenuItem
+                  onSelect={(e) => {
+                    e.preventDefault();
+                    setBulkUploadOpen(true);
+                  }}
+                  className="cursor-pointer"
+                >
+                  <Upload size={16} className="mr-2 opacity-50" />
+                  {t("ui.admin.users.list.bulk_import", "일괄 등록 (CSV)")}
+                </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
                   onClick={() => handleExport(false)}
@@ -538,6 +545,12 @@ function UserListPage() {
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
+            <UserBulkUploadModal
+              variant="custom"
+              open={bulkUploadOpen}
+              onOpenChange={setBulkUploadOpen}
+              onSuccess={() => query.refetch()}
+            />
             <Dialog>
               <DialogTrigger asChild>
                 <Button variant="outline" size="icon" className="h-9 w-9">
diff --git a/adminfront/src/features/users/components/UserBulkUploadModal.tsx b/adminfront/src/features/users/components/UserBulkUploadModal.tsx
index 6a310b0b..12f54aca 100644
--- a/adminfront/src/features/users/components/UserBulkUploadModal.tsx
+++ b/adminfront/src/features/users/components/UserBulkUploadModal.tsx
@@ -43,7 +43,9 @@ import {
 
 interface UserBulkUploadModalProps {
   onSuccess?: () => void;
-  variant?: "button" | "dropdown";
+  variant?: "button" | "dropdown" | "custom";
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 function buildUserTenantPreviewRows(
@@ -141,8 +143,15 @@ export const downloadUserTemplate = () => {
 export function UserBulkUploadModal({
   onSuccess,
   variant = "button",
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
 }: UserBulkUploadModalProps) {
-  const [open, setOpen] = React.useState(false);
+  const [localOpen, setLocalOpen] = React.useState(false);
+  const open = controlledOpen !== undefined ? controlledOpen : localOpen;
+  const setOpen = (val: boolean) => {
+    setLocalOpen(val);
+    controlledOnOpenChange?.(val);
+  };
   const [file, setFile] = React.useState<File | null>(null);
   const [parsing, setParsing] = React.useState(false);
   const [previewData, setPreviewData] = React.useState<BulkUserItem[]>([]);
@@ -359,7 +368,7 @@ export function UserBulkUploadModal({
         <Upload size={16} className="mr-2 opacity-50" />
         {t("ui.admin.users.list.bulk_import", "일괄 등록 (CSV)")}
       </DropdownMenuItem>
-    ) : (
+    ) : variant === "custom" ? null : (
       <DialogTrigger asChild>
         <Button variant="outline" className="gap-2" {...triggerProps}>
           <Upload size={16} />
@@ -378,7 +387,7 @@ export function UserBulkUploadModal({
           if (!val) reset();
         }}
       >
-        {variant !== "dropdown" && triggerNode}
+        {variant !== "dropdown" && variant !== "custom" && triggerNode}
         <DialogContent className="max-w-2xl">
           <DialogHeader>
             <DialogTitle data-testid="bulk-upload-title">

From f4bfa7c129779bd0120c5551cea53959dda1fdc5 Mon Sep 17 00:00:00 2001
From: chan <b24028@hanmaceng.co.kr>
Date: Wed, 20 May 2026 13:30:29 +0900
Subject: [PATCH 3/3] fix(adminfront): fix double-click required for file input
 in bulk upload modal

Refactored the file input button to use a native HTML label with Radix UI's asChild prop. This ensures the file dialog opens reliably on the first click without relying on JS synthetic click events.
---
 .../users/components/UserBulkUploadModal.tsx  | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/adminfront/src/features/users/components/UserBulkUploadModal.tsx b/adminfront/src/features/users/components/UserBulkUploadModal.tsx
index 12f54aca..10e477e7 100644
--- a/adminfront/src/features/users/components/UserBulkUploadModal.tsx
+++ b/adminfront/src/features/users/components/UserBulkUploadModal.tsx
@@ -416,20 +416,23 @@ export function UserBulkUploadModal({
                     "템플릿 다운로드",
                   )}
                 </Button>
-                <input
-                  type="file"
-                  accept=".csv"
-                  className="hidden"
-                  ref={fileInputRef}
-                  onChange={handleFileChange}
-                />
-                <Button
-                  onClick={() => fileInputRef.current?.click()}
-                  variant="secondary"
-                >
-                  {file
-                    ? t("ui.common.change_file", "파일 변경")
-                    : t("ui.common.select_file", "파일 선택")}
+                <Button asChild variant="secondary" className="cursor-pointer">
+                  <label>
+                    {file
+                      ? t("ui.common.change_file", "파일 변경")
+                      : t("ui.common.select_file", "파일 선택")}
+                    <input
+                      type="file"
+                      accept=".csv"
+                      className="hidden"
+                      ref={fileInputRef}
+                      onChange={handleFileChange}
+                      onClick={(e) => {
+                        // Allow picking the same file again if it was cleared
+                        (e.target as HTMLInputElement).value = "";
+                      }}
+                    />
+                  </label>
                 </Button>
               </div>