[st] design: 디자인 수정

2026-02-12 10:22:35 +09:00
parent 3b23113955
commit 78e3e8e20e
7 changed files with 105 additions and 45 deletions
@@ -1,3 +1,3 @@
-import { statisticsPage } from "@/pages/statistics";
+import { StatisticsPage } from "@/pages/statistics";

-export default statisticsPage;
+export default StatisticsPage;
@@ -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];
+        }
+    }
+}
@@ -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
@@ -1 +1 @@
-export { default as statisticsPage } from "./ui/statistics-page";
+export { default as StatisticsPage } from "./ui/statistics-page";
@@ -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 ?? ""}
@@ -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 };
-
@@ -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>