From 806ccf950f50c280edb777150b53aaca9510579b Mon Sep 17 00:00:00 2001
From: jcchoi <jcchoi@onasys.co.kr>
Date: Mon, 12 Oct 2026 18:38:00 +0900
Subject: [PATCH] =?UTF-8?q?=ED=96=89=EC=A0=95=EC=A7=80=EC=9B=90=20?=
 =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20=ED=85=8C=EB=A7=88=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/lib/national-as-map.module.css  | 30 +++++++++++++++++++
 .../dashboard/ui/dashboard-noti-list.tsx      |  8 ++---
 .../dashboard/ui/dashboard-notice-table.tsx   |  2 +-
 .../src/pages/dashboard/ui/dashboard-page.tsx |  3 +-
 .../dashboard/ui/doc-prgrs-stts-cards.tsx     | 13 ++++----
 .../pages/dashboard/ui/national-as-map.tsx    |  2 +-
 6 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/apps/as/src/pages/dashboard/lib/national-as-map.module.css b/apps/as/src/pages/dashboard/lib/national-as-map.module.css
index 3a735138c..eabcd07b7 100644
--- a/apps/as/src/pages/dashboard/lib/national-as-map.module.css
+++ b/apps/as/src/pages/dashboard/lib/national-as-map.module.css
@@ -157,3 +157,33 @@
   border-color: #96c3ff;
   box-shadow: 0 4px 12px rgba(0, 107, 248, 0.3);
 }
+
+/* 블랙 스킨 (onasys 디자인 design/c 색상 기준) */
+:global([data-theme="black"]) .basinLabel {
+  background: #404244ee;
+  border-color: #5e6165;
+  color: #f1f1f1;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+
+:global([data-theme="black"]) .basinLabel.active {
+  background: #0056b3;
+  border-color: #96c3ff;
+  color: #fff;
+}
+
+:global([data-theme="black"]) .popup {
+  background: #404244;
+  border-color: #4e5154;
+  color: #f1f1f1;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
+}
+
+:global([data-theme="black"]) .popup > div {
+  border-color: #4e5154;
+}
+
+:global([data-theme="black"]) .popup > div:first-child {
+  background: #4e5154;
+  color: #fff;
+}
diff --git a/apps/as/src/pages/dashboard/ui/dashboard-noti-list.tsx b/apps/as/src/pages/dashboard/ui/dashboard-noti-list.tsx
index ac8869cd9..2f5d766cd 100644
--- a/apps/as/src/pages/dashboard/ui/dashboard-noti-list.tsx
+++ b/apps/as/src/pages/dashboard/ui/dashboard-noti-list.tsx
@@ -40,12 +40,12 @@ export function DashboardNotiList({
   );
 
   return (
-    <section className="card card-border m-0 bg-[#FAFBFC]">
+    <section className="card card-border m-0">
       <div className="card-header flex items-center justify-between gap-4">
         <h3 className="text-2xl font-semibold">
           알림이력
           {dataUpdatedAt > 0 ? (
-            <span className="pl-2 text-lg font-medium text-[#4A4A4A]">
+            <span className="pl-2 text-lg font-medium text-label">
               (업데이트 일시: {dayjs(dataUpdatedAt).format("YYYY-MM-DD HH:mm")})
             </span>
           ) : null}
@@ -75,7 +75,7 @@ export function DashboardNotiList({
         ) : null}
 
         {isError ? (
-          <p className="flex min-h-[12rem] items-center justify-center text-[#4A4A4A]">
+          <p className="flex min-h-[12rem] items-center justify-center text-label">
             알림이력을 불러오지 못했습니다.
           </p>
         ) : null}
@@ -110,7 +110,7 @@ interface DashboardNotiRowProps {
 function DashboardNotiRow({ row, isActionPending, onAction }: DashboardNotiRowProps) {
   return (
     <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-4 border-b px-2 py-4 last:border-b-0">
-      <span className="text-lg text-[#4A4A4A]">
+      <span className="text-lg text-label">
         {row.regDt ? dayjs(row.regDt).format("YYYY-MM-DD") : "-"}
       </span>
       <p className="min-w-0 line-clamp-2 text-xl sm:line-clamp-1">{row.notiTtl}</p>
diff --git a/apps/as/src/pages/dashboard/ui/dashboard-notice-table.tsx b/apps/as/src/pages/dashboard/ui/dashboard-notice-table.tsx
index 363679bc8..c74aa9908 100644
--- a/apps/as/src/pages/dashboard/ui/dashboard-notice-table.tsx
+++ b/apps/as/src/pages/dashboard/ui/dashboard-notice-table.tsx
@@ -46,7 +46,7 @@ export function DashboardNoticeTable() {
   });
 
   return (
-    <section className="card card-border m-0 bg-[#FAFBFC]">
+    <section className="card card-border m-0">
       <div className="card-header flex items-center justify-between">
         <h3 className="text-2xl font-semibold">공지사항</h3>
         <Button type="button" size="sm" color="white" className="!text-[#0056B3]" onClick={handleMoreClick}>
diff --git a/apps/as/src/pages/dashboard/ui/dashboard-page.tsx b/apps/as/src/pages/dashboard/ui/dashboard-page.tsx
index 571f0a302..349da5949 100644
--- a/apps/as/src/pages/dashboard/ui/dashboard-page.tsx
+++ b/apps/as/src/pages/dashboard/ui/dashboard-page.tsx
@@ -11,7 +11,8 @@ export function DashboardPage() {
   const { data, isPending, isError, dataUpdatedAt } = useGetMainDashboard();
 
   return (
-    <div className="flex min-h-full gap-4 bg-[#E9EDF2] px-[1.8rem] pb-6 pt-4 text-[#1E1E1E]">
+    // 배경·글자색은 테마 변수를 따름 (배경 --container, 글자 --foreground)
+    <div className="flex min-h-full gap-4 bg-container px-[1.8rem] pb-6 pt-4 text-foreground">
       <div className="hidden flex-[0.5] sm:block">
         <NationalAsMap basinDocPrgrsList={data?.basinDocPrgrsList} />
       </div>
diff --git a/apps/as/src/pages/dashboard/ui/doc-prgrs-stts-cards.tsx b/apps/as/src/pages/dashboard/ui/doc-prgrs-stts-cards.tsx
index 609f67c8b..cab3a5b61 100644
--- a/apps/as/src/pages/dashboard/ui/doc-prgrs-stts-cards.tsx
+++ b/apps/as/src/pages/dashboard/ui/doc-prgrs-stts-cards.tsx
@@ -24,7 +24,7 @@ export function DocPrgrsSttsCards({ items, isPending, isError }: DocPrgrsSttsCar
 
   if (isError) {
     return (
-      <div className="card card-border m-0 flex min-h-[14rem] items-center justify-center bg-[#FAFBFC] text-[#4A4A4A]">
+      <div className="card card-border m-0 flex min-h-[14rem] items-center justify-center text-label">
         진행상황을 불러오지 못했습니다.
       </div>
     );
@@ -39,7 +39,7 @@ export function DocPrgrsSttsCards({ items, isPending, isError }: DocPrgrsSttsCar
         return (
           <div
             key={slot.docSeComCd}
-            className="card card-border hover:bg-muted/40 m-0 block bg-[#FAFBFC] transition-colors"
+            className="card card-border hover:bg-muted/40 m-0 block transition-colors"
           >
             <div className="card-header">
               <h3 className="text-2xl font-semibold">{slot.title}</h3>
@@ -90,7 +90,7 @@ function DocPrgrsSttsMetric({
       >
         <Icon className="size-6" />
       </span>
-      <span className="text-xl text-[#4A4A4A]">{label}</span>
+      <span className="text-xl text-label">{label}</span>
       <span className="text-3xl font-semibold tabular-nums">{count}</span>
     </div>
   );
@@ -108,21 +108,22 @@ const STAT_METRICS = [
     field: "reqCnt",
     label: "신청",
     iconClassName: "bg-[#4285F4]",
-    bgColor: "bg-blue-100",
+    // 블랙 스킨: 아이콘 색 반투명 배경
+    bgColor: "bg-blue-100 [[data-theme=black]_&]:bg-[rgba(66,133,244,0.18)]",
     Icon: FilePlus,
   },
   {
     field: "prgrsCnt",
     label: "진행",
     iconClassName: "bg-[#34A853]",
-    bgColor: "bg-emerald-100",
+    bgColor: "bg-emerald-100 [[data-theme=black]_&]:bg-[rgba(52,168,83,0.18)]",
     Icon: RefreshCw,
   },
   {
     field: "cmptnCnt",
     label: "완료",
     iconClassName: "bg-[#EA4335]",
-    bgColor: "bg-orange-100",
+    bgColor: "bg-orange-100 [[data-theme=black]_&]:bg-[rgba(234,67,53,0.18)]",
     Icon: CircleCheck,
   },
 ] as const;
diff --git a/apps/as/src/pages/dashboard/ui/national-as-map.tsx b/apps/as/src/pages/dashboard/ui/national-as-map.tsx
index 7430a3cf6..f9333b2f6 100644
--- a/apps/as/src/pages/dashboard/ui/national-as-map.tsx
+++ b/apps/as/src/pages/dashboard/ui/national-as-map.tsx
@@ -18,7 +18,7 @@ export function NationalAsMap({ basinDocPrgrsList }: NationalAsMapProps) {
   const popupColumnSpan = Math.max(1, popupContent.items.length);
 
   return (
-    <section className="card card-border m-0 flex h-full min-h-[40rem] flex-col bg-[#FAFBFC]">
+    <section className="card card-border m-0 flex h-full min-h-[40rem] flex-col">
       <div className="card-header">
         <h3 className="text-2xl font-semibold">전국 행정지원 지도</h3>
       </div>