From 7662e80ebaeb7655c82f71f269ac89b9539c5850 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 12 Mar 2026 16:31:36 +0900
Subject: [PATCH] =?UTF-8?q?[st]=20feat:=20WithLoadingButton=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../verification/detail/RegionalGrid.tsx      | 10 +-----
 apps/st/src/shared/ui/with-loading-button.tsx | 32 +++++++++++++++++++
 2 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 apps/st/src/shared/ui/with-loading-button.tsx

diff --git a/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx b/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx
index abfa0fdfb..db259df39 100644
--- a/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx
+++ b/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx
@@ -341,15 +341,7 @@ const RegionalGrid: React.FC<RegionalGridProps> = ({
                         onClick={handleDownload}
                         disabled={!vrfcTrgtSn || isDownloading}
                     >
-                        {isDownloading ? (
-                            <div className="flex w-[4.8rem] items-center justify-center">
-                                <div className="relative size-[2rem]">
-                                    <LoadingWithAnimation color="primary" />
-                                </div>
-                            </div>
-                        ) : (
-                            "다운로드"
-                        )}
+                        다운로드
                     </Button>
                 </div>
             </div>
diff --git a/apps/st/src/shared/ui/with-loading-button.tsx b/apps/st/src/shared/ui/with-loading-button.tsx
new file mode 100644
index 000000000..384464954
--- /dev/null
+++ b/apps/st/src/shared/ui/with-loading-button.tsx
@@ -0,0 +1,32 @@
+import {
+    Button,
+    type ButtonProps,
+    LoadingWithAnimation,
+} from "@common/components";
+
+interface WithLoadingButtonProps extends ButtonProps {
+    isLoading: boolean;
+    children: React.ReactNode;
+}
+
+function WithLoadingButton({
+    isLoading,
+    children,
+    ...props
+}: WithLoadingButtonProps) {
+    return (
+        <Button {...props}>
+            {isLoading ? (
+                <div className="flex w-[4.8rem] items-center justify-center">
+                    <div className="relative size-[2rem]">
+                        <LoadingWithAnimation color="primary" />
+                    </div>
+                </div>
+            ) : (
+                children
+            )}
+        </Button>
+    );
+}
+
+export { WithLoadingButton };