From de8971bea60ddeae4afcdc6d02b414c7f7499488 Mon Sep 17 00:00:00 2001
From: rsone001 <rsone001@gmail.com>
Date: Tue, 8 Sep 2026 13:43:26 +0900
Subject: [PATCH] =?UTF-8?q?[ST]=20fix:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=ED=86=B5=EA=B3=84=20=EC=B2=98=EB=A6=AC=20=ED=98=84?=
 =?UTF-8?q?=ED=99=A9=20panel=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../st/src/pages/auth/login/ui/login-page.tsx |  2 +-
 .../ui/panels/three-stage-status-panel.tsx    | 68 ++++++++++---------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/apps/st/src/pages/auth/login/ui/login-page.tsx b/apps/st/src/pages/auth/login/ui/login-page.tsx
index 8fbc466d5..704871e3e 100644
--- a/apps/st/src/pages/auth/login/ui/login-page.tsx
+++ b/apps/st/src/pages/auth/login/ui/login-page.tsx
@@ -24,7 +24,7 @@ function LoginPage() {
             await authService.login({ userId, password });
             try {
                 await statisticsApi.refreshAllCommonCodes();
-            } catch(error) {
+            } catch {
                 console.error('로그인 실패');
             }
             window.location.href = "/statistics";
diff --git a/apps/st/src/pages/statistics/ui/panels/three-stage-status-panel.tsx b/apps/st/src/pages/statistics/ui/panels/three-stage-status-panel.tsx
index de90fca3a..ac914a93f 100644
--- a/apps/st/src/pages/statistics/ui/panels/three-stage-status-panel.tsx
+++ b/apps/st/src/pages/statistics/ui/panels/three-stage-status-panel.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { Fragment } from "react";
+
 import type { DashboardSearchParams } from "@/entities/statistics/model/dashboard/dashboard-interface";
 import { useDashboardThreeStageStatus } from "@/entities/statistics/api/dashboard/dashboard-queries";
 import { LoadingWithAnimation } from "@common/components";
@@ -83,7 +85,12 @@ export function ThreeStageStatusPanel({ params }: ThreeStageStatusPanelProps) {
 
             <div className="card-body relative flex flex-1 flex-col items-center justify-center px-8">
                 <div className="flex w-full max-w-3xl flex-col items-center gap-10">
-                    <div className="flex w-full items-start">
+                    <div
+                        className="grid w-full items-start"
+                        style={{
+                            gridTemplateColumns: "repeat(4, auto minmax(0, 1fr)) auto",
+                        }}
+                    >
                         {STEPS.map((step, index) => {
                             const isChecked = checkedList[index];
                             const isCurrent = index === currentIndex;
@@ -91,11 +98,8 @@ export function ThreeStageStatusPanel({ params }: ThreeStageStatusPanelProps) {
                             const lineFilled = checkedList[index];
 
                             return (
-                                <div
-                                    key={step.key}
-                                    className="flex flex-1 flex-col items-center last:flex-none"
-                                >
-                                    <div className="flex w-full items-center">
+                                <Fragment key={step.key}>
+                                    <div className="flex flex-col items-center">
                                         <div className="relative flex flex-col items-center">
                                             {isCurrent && (
                                                 <span className="absolute inset-0 -m-1.5 animate-ping rounded-full bg-blue-400 opacity-40" />
@@ -130,34 +134,32 @@ export function ThreeStageStatusPanel({ params }: ThreeStageStatusPanelProps) {
                                                 )}
                                             </div>
                                         </div>
-
-                                        {!isLast && (
-                                            <div className="mx-3 h-1.5 flex-1 rounded-full bg-gray-200 self-center">
-                                                <div
-                                                    className="h-full rounded-full bg-blue-600 transition-all duration-500"
-                                                    style={{ width: lineFilled ? "100%" : "0%" }}
-                                                />
-                                            </div>
-                                        )}
+                                        <div className="mt-4 text-center">
+                                            <p
+                                                className={`text-xl font-bold ${
+                                                    isChecked
+                                                        ? "text-blue-700"
+                                                        : isCurrent
+                                                          ? "text-blue-600"
+                                                          : "text-gray-400"
+                                                }`}
+                                            >
+                                                {step.label}
+                                            </p>
+                                            <p className="mt-1 text-base text-muted-foreground">
+                                                ({step.subLabel})
+                                            </p>
+                                        </div>
                                     </div>
-
-                                    <div className="mt-4 text-center">
-                                        <p
-                                            className={`text-xl font-bold ${
-                                                isChecked
-                                                    ? "text-blue-700"
-                                                    : isCurrent
-                                                      ? "text-blue-600"
-                                                      : "text-gray-400"
-                                            }`}
-                                        >
-                                            {step.label}
-                                        </p>
-                                        <p className="mt-1 text-base text-muted-foreground">
-                                            ({step.subLabel})
-                                        </p>
-                                    </div>
-                                </div>
+                                    {!isLast && (
+                                        <div className="mx-3 mt-10 h-1.5 -translate-y-1/2 self-start rounded-full bg-gray-200">
+                                            <div
+                                                className="h-full rounded-full bg-blue-600 transition-all duration-500"
+                                                style={{ width: lineFilled ? "100%" : "0%" }}
+                                            />
+                                        </div>
+                                    )}
+                                </Fragment>
                             );
                         })}
                     </div>