From 78e3e8e20e05f6a88a33b8eef47f1c82284ec5c1 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 12 Feb 2026 10:22:35 +0900
Subject: [PATCH] =?UTF-8?q?[st]=20design:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(with-base-layout)/statistics/page.tsx    |  4 +-
 apps/st/src/components/css/DataGrid.css       | 43 +++++++++++
 .../verification/HbStatisticsVerification.tsx |  6 +-
 apps/st/src/pages/statistics/index.ts         |  2 +-
 .../src/shared/ui/statistics-page-layout.tsx  |  6 +-
 apps/st/src/shared/ui/tab-bar.tsx             | 16 ++--
 .../common/components/src/ui/footer/index.tsx | 73 ++++++++++++-------
 7 files changed, 105 insertions(+), 45 deletions(-)

diff --git a/apps/st/app/(with-base-layout)/statistics/page.tsx b/apps/st/app/(with-base-layout)/statistics/page.tsx
index 3c51a4307..f32417f76 100644
--- a/apps/st/app/(with-base-layout)/statistics/page.tsx
+++ b/apps/st/app/(with-base-layout)/statistics/page.tsx
@@ -1,3 +1,3 @@
-import { statisticsPage } from "@/pages/statistics";
+import { StatisticsPage } from "@/pages/statistics";
 
-export default statisticsPage;
\ No newline at end of file
+export default StatisticsPage;
diff --git a/apps/st/src/components/css/DataGrid.css b/apps/st/src/components/css/DataGrid.css
index e69de29bb..e3961956f 100644
--- a/apps/st/src/components/css/DataGrid.css
+++ b/apps/st/src/components/css/DataGrid.css
@@ -0,0 +1,43 @@
+@tailwind components;
+
+@layer components {
+    .rg-grid .rg-header .rg-table .rg-header-group-cell {
+        @apply !bg-[#466995] !text-[#fff];
+    }
+    .rg-grid .rg-header .rg-table .rg-header-cell {
+        @apply !bg-[#5987bf] !text-[#fff];
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell {
+        @apply !bg-white;
+    }
+
+    [data-theme="black"] {
+        .rg-grid .rg-header .rg-table .rg-header-group-cell {
+            @apply !bg-[#3C4043] !text-[#fff];
+        }
+        .rg-grid .rg-header .rg-table .rg-header-cell {
+            @apply !bg-[#62686d] !text-[#fff];
+        }
+        .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell {
+            @apply !bg-[#545556] !text-[#fff];
+        }
+    }
+
+    [data-theme="red"] {
+        .rg-grid .rg-header .rg-table .rg-header-group-cell {
+            @apply !bg-[#646469] !text-[#fff];
+        }
+        .rg-grid .rg-header .rg-table .rg-header-cell {
+            @apply !bg-[#8d8d94] !text-[#fff];
+        }
+    }
+
+    [data-theme="green"] {
+        .rg-grid .rg-header .rg-table .rg-header-group-cell {
+            @apply !bg-[#518585] !text-[#fff];
+        }
+        .rg-grid .rg-header .rg-table .rg-header-cell {
+            @apply !bg-[#6bafae] !text-[#fff];
+        }
+    }
+}
diff --git a/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx b/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
index ceae173d3..0e4c38362 100644
--- a/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
+++ b/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
@@ -102,7 +102,7 @@ const HbStatisticsVerification = () => {
             <div className="p-2">
                 {/* 통계 검증 섹션 */}
                 <div className="mb-6">
-                    <h3 className="px-2 text-[1.5rem] font-semibold">
+                    <h3 className="px-2 text-[1.5rem] font-semibold text-title">
                         통계 검증
                     </h3>
 
@@ -461,8 +461,8 @@ const HbStatisticsVerification = () => {
                 </div>
 
                 {/* 검증 이력 섹션 */}
-                <div className="mt-8 border-t pt-6">
-                    <h3 className="mb-4 px-2 text-[1.5rem] font-semibold">
+                <div className="mt-8 border-t border-border pt-6">
+                    <h3 className="mb-4 px-2 text-[1.5rem] font-semibold text-title">
                         검증 이력
                     </h3>
                     <DataGrid
diff --git a/apps/st/src/pages/statistics/index.ts b/apps/st/src/pages/statistics/index.ts
index 7a969422f..c419d5df7 100644
--- a/apps/st/src/pages/statistics/index.ts
+++ b/apps/st/src/pages/statistics/index.ts
@@ -1 +1 @@
-export { default as statisticsPage } from "./ui/statistics-page";
\ No newline at end of file
+export { default as StatisticsPage } from "./ui/statistics-page";
diff --git a/apps/st/src/shared/ui/statistics-page-layout.tsx b/apps/st/src/shared/ui/statistics-page-layout.tsx
index 1597a7af0..b34ebb5eb 100644
--- a/apps/st/src/shared/ui/statistics-page-layout.tsx
+++ b/apps/st/src/shared/ui/statistics-page-layout.tsx
@@ -7,12 +7,10 @@ function StatisticsPageLayout({ children }: { children: React.ReactNode }) {
 
     const pageTitle = tabs.find((t) => t.menuItem.menuEngNm === activeTabId);
 
-    const menuPaths = pageTitle?.path
-        ?.split(">")
-        .map((path) => path.trim());
+    const menuPaths = pageTitle?.path?.split(">").map((path) => path.trim());
 
     return (
-        <div className="h-auto min-h-full pb-2">
+        <div className="h-auto min-h-full bg-container pb-2">
             <TabBar />
             <PageTitle
                 title={pageTitle?.label ?? ""}
diff --git a/apps/st/src/shared/ui/tab-bar.tsx b/apps/st/src/shared/ui/tab-bar.tsx
index 23d903c8c..3ba4e1977 100644
--- a/apps/st/src/shared/ui/tab-bar.tsx
+++ b/apps/st/src/shared/ui/tab-bar.tsx
@@ -10,7 +10,10 @@ const TabBar = () => {
         return null;
     }
 
-    const handleCloseTab = (e: React.MouseEvent | React.KeyboardEvent, tabId: string) => {
+    const handleCloseTab = (
+        e: React.MouseEvent | React.KeyboardEvent,
+        tabId: string,
+    ) => {
         e.stopPropagation();
         removeTab(tabId);
     };
@@ -22,22 +25,22 @@ const TabBar = () => {
             className="w-full"
             variant="outline"
         >
-            <TabsList>
+            <TabsList className="w-full !justify-start !p-4 !pb-0">
                 {tabs.map((tab) => (
                     <TabsTrigger
                         key={tab.id}
                         value={tab.id}
-                        className="!px-4 !flex !items-center !justify-start !gap-2 !w-[140px]"
+                        className="!flex !w-[140px] !items-center !justify-start !gap-2 !px-4"
                         title={tab.label}
                     >
-                        <span className="text-xl flex-1 leading-none truncate">
+                        <span className="flex-1 truncate text-xl leading-none">
                             {tab.label}
                         </span>
                         <span
                             role="button"
                             onClick={(e) => handleCloseTab(e, tab.id)}
                             aria-label={`${tab.label} 탭 닫기`}
-                            className="flex items-center justify-center flex-shrink-0 leading-none hover:text-[#2094fa]"
+                            className="flex flex-shrink-0 items-center justify-center leading-none hover:text-[#2094fa]"
                         >
                             <i className="ri-close-line" />
                         </span>
@@ -46,7 +49,6 @@ const TabBar = () => {
             </TabsList>
         </Tabs>
     );
-}
+};
 
 export { TabBar };
-
diff --git a/packages/common/components/src/ui/footer/index.tsx b/packages/common/components/src/ui/footer/index.tsx
index 029b25910..2430820ff 100644
--- a/packages/common/components/src/ui/footer/index.tsx
+++ b/packages/common/components/src/ui/footer/index.tsx
@@ -20,7 +20,7 @@ type BannerImageProps = {
   lnkgUrlAddr: string;
 };
 
-const BannerImage = ({ atflCd, bnrSn, lnkgUrlAddr }: BannerImageProps) => {
+const BannerImage = ({ atflCd, lnkgUrlAddr }: BannerImageProps) => {
   const { data: imageUrl, isLoading } = useQuery({
     queryKey: [ENDPOINT.ATTACH_SERVICE.IMAGES, atflCd],
     queryFn: () => getImageUrlByAtflCd(atflCd),
@@ -29,13 +29,13 @@ const BannerImage = ({ atflCd, bnrSn, lnkgUrlAddr }: BannerImageProps) => {
 
   const handleClick = () => {
     if (lnkgUrlAddr) {
-      window.open(lnkgUrlAddr, '_blank');
+      window.open(lnkgUrlAddr, "_blank");
     }
   };
 
   if (isLoading) {
     return (
-      <div className="relative flex h-24 items-center justify-center bg-accent mx-auto">
+      <div className="relative mx-auto flex h-24 items-center justify-center bg-accent">
         <div className="text-sm text-muted-foreground">로딩 중...</div>
       </div>
     );
@@ -43,18 +43,22 @@ const BannerImage = ({ atflCd, bnrSn, lnkgUrlAddr }: BannerImageProps) => {
 
   if (!imageUrl) {
     return (
-      <div className="relative flex h-24 items-center justify-center bg-accent mx-auto">
+      <div className="relative mx-auto flex h-24 items-center justify-center bg-accent">
         <div className="text-sm text-muted-foreground">이미지 없음</div>
       </div>
     );
   }
 
   return (
-    <div 
-      className="relative flex h-24 items-center justify-center cursor-pointer hover:opacity-80 transition-opacity mx-auto"
+    <div
+      className="relative mx-auto flex h-24 cursor-pointer items-center justify-center transition-opacity hover:opacity-80"
       onClick={handleClick}
     >
-      <img src={imageUrl} className="object-contain w-full h-full" alt="배너 이미지" />
+      <img
+        src={imageUrl}
+        className="h-full w-full object-contain"
+        alt="배너 이미지"
+      />
     </div>
   );
 };
@@ -70,25 +74,33 @@ export function Footer() {
     queryFn: () => getBannerList(siteId),
   });
 
-// MAIN 타입 배너만 필터링
- const mainBanners = bannerList?.filter((banner) => banner.bnrTypeCd === "BNRFTER") ?? [];
- 
+  // MAIN 타입 배너만 필터링
+  const mainBanners =
+    bannerList?.filter((banner) => banner.bnrTypeCd === "BNRFTER") ?? [];
 
   const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
 
   return (
-    <footer className="flex flex-col sm:flex-row w-full shrink-0 items-start border-t border-solid border-border bg-background px-3 sm:px-6 pt-4 pb-1 text-foreground">
-      <div className="w-full sm:w-[55%] mb-4 sm:mb-0">
-        <h6 className="mb-2 sm:mb-4 text-lg sm:text-xl md:text-2xl font-bold">{siteInfo?.siteNm ?? ""}</h6>
-        <p className="my-1 text-sm sm:text-base md:text-xl opacity-60">{siteInfo?.siteAddr ?? ""}</p>
-        <p className="my-1 text-sm sm:text-base md:text-xl opacity-60">
+    <footer className="flex w-full shrink-0 flex-col items-start border-t border-solid border-border bg-background px-3 pb-1 pt-4 text-foreground sm:flex-row sm:px-6">
+      <div className="mb-4 w-full sm:mb-0 sm:w-[55%]">
+        <h6 className="mb-2 text-lg font-bold sm:mb-4 sm:text-xl md:text-2xl">
+          {siteInfo?.siteNm ?? ""}
+        </h6>
+        <p className="my-1 text-sm opacity-60 sm:text-base md:text-xl">
+          {siteInfo?.siteAddr ?? ""}
+        </p>
+        <p className="my-1 text-sm opacity-60 sm:text-base md:text-xl">
           전화: {siteInfo?.telNo ?? ""} / 팩스: {siteInfo?.faxNumber ?? ""}
         </p>
-        <p className="my-1 text-sm sm:text-base md:text-xl opacity-60">{siteInfo?.lwndCn ?? ""}</p>
+        <p className="my-1 text-sm opacity-60 sm:text-base md:text-xl">
+          {siteInfo?.lwndCn ?? ""}
+        </p>
       </div>
-      <div className="flex w-full sm:w-[45%] flex-col">
-        <div className="flex flex-wrap justify-start sm:justify-end gap-2 sm:gap-4 mb-4 sm:mb-0">
-          <span className="text-sm sm:text-base md:text-xl">개인정보처리방침</span>
+      <div className="flex w-full flex-col sm:w-[45%]">
+        <div className="mb-4 flex flex-wrap justify-start gap-2 sm:mb-0 sm:justify-end sm:gap-4">
+          <span className="text-sm sm:text-base md:text-xl">
+            개인정보처리방침
+          </span>
           <span className="text-sm sm:text-base md:text-xl">이용약관</span>
           <span className="text-sm sm:text-base md:text-xl">사이트맵</span>
           <span className="text-sm sm:text-base md:text-xl">고객센터</span>
@@ -97,29 +109,34 @@ export function Footer() {
           <Carousel
             plugins={[plugin.current]}
             opts={{ loop: true }}
-            className="relative my-4 sm:my-8 h-20 sm:h-24"
+            className="relative my-4 h-20 sm:my-8 sm:h-24"
           >
             <CarouselContent>
               {mainBanners && mainBanners.length > 0 ? (
                 mainBanners.map((banner) => (
-                  <CarouselItem key={`banner-${banner.bnrSn}`} className="basis-1/2 sm:basis-1/3">
-                    <BannerImage 
-                      atflCd={banner.atflCd} 
-                      bnrSn={banner.bnrSn} 
+                  <CarouselItem
+                    key={`banner-${banner.bnrSn}`}
+                    className="basis-1/2 sm:basis-1/3"
+                  >
+                    <BannerImage
+                      atflCd={banner.atflCd}
+                      bnrSn={banner.bnrSn}
                       lnkgUrlAddr={banner.lnkgUrlAddr}
                     />
                   </CarouselItem>
                 ))
               ) : (
                 <CarouselItem className="basis-1/2 sm:basis-1/3">
-                  <div className="relative flex h-20 sm:h-24 w-full items-center justify-center bg-accent">
-                    <div className="text-sm text-muted-foreground">배너가 없습니다</div>
+                  <div className="relative flex h-20 w-full items-center justify-center bg-accent sm:h-24">
+                    <div className="text-sm text-muted-foreground">
+                      배너가 없습니다
+                    </div>
                   </div>
                 </CarouselItem>
               )}
             </CarouselContent>
-            <CarouselPrevious className="absolute left-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
-            <CarouselNext className="absolute right-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
+            <CarouselPrevious className="absolute left-2 top-1/2 z-10 !bg-background text-accent-foreground" />
+            <CarouselNext className="absolute right-2 top-1/2 z-10 !bg-background text-accent-foreground" />
           </Carousel>
         </div>
       </div>