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] 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">