From 04edb49c9f6367a2bbda4af3364da3b60bb850ac Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Mon, 15 Jun 2026 15:48:05 +0900
Subject: [PATCH] =?UTF-8?q?wr:=20=EC=A7=80=EB=8F=84=20back=20=ED=85=8C?=
 =?UTF-8?q?=EB=A7=88=20=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/wr/src/app/styles/components.css         | 56 +++++++++++++++++++
 .../business_components/src/ui/map/GisTree.js | 14 ++---
 2 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/apps/wr/src/app/styles/components.css b/apps/wr/src/app/styles/components.css
index 4dc30bafd..fd651fe6c 100644
--- a/apps/wr/src/app/styles/components.css
+++ b/apps/wr/src/app/styles/components.css
@@ -21,6 +21,62 @@
     .card-header {
       @apply border-b-[#3f4042];
     }
+
+    .gis-layer-panel {
+      background: #111214;
+      border-right-color: #2f3136;
+      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
+    }
+
+    .gis-layer-panel-title {
+      color: #f3f4f6;
+    }
+
+    .gis-layer-panel hr {
+      border-color: #2f3136;
+    }
+
+    .gis-layer-row {
+      color: #e5e7eb;
+    }
+
+    .gis-layer-row:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    .gis-layer-row span,
+    .gis-layer-row label {
+      color: #e5e7eb !important;
+    }
+
+    .gis-layer-row input[type="checkbox"] {
+      accent-color: #c026d3;
+    }
+
+    .gis-layer-action-button {
+      background: #1a1c20;
+      border-color: #3b82f6;
+      color: #cfe3ff;
+    }
+
+    .gis-layer-action-button:hover {
+      background: #23262b;
+    }
+
+    .gis-layer-setting {
+      background: #111214;
+      border-top: 1px solid #2f3136;
+    }
+
+    .gis-layer-toggle {
+      background: #111214;
+      border-color: #2f3136;
+      color: #f3f4f6;
+    }
+
+    .gis-layer-toggle:hover {
+      background: #1a1c20;
+    }
   }
 
   input[type="file"] {
diff --git a/packages/common/business_components/src/ui/map/GisTree.js b/packages/common/business_components/src/ui/map/GisTree.js
index 75f523cd4..5f9510bb5 100644
--- a/packages/common/business_components/src/ui/map/GisTree.js
+++ b/packages/common/business_components/src/ui/map/GisTree.js
@@ -518,7 +518,7 @@ export default React.memo(function GisTree({
 		<>
 			{/* 사이드 패널 */}
 			<div
-				className={`absolute left-0 top-0 z-40 flex h-full w-[250px] flex-col overflow-hidden border-r border-gray-300 bg-white transition-all duration-300 ${visible
+				className={`gis-layer-panel absolute left-0 top-0 z-40 flex h-full w-[250px] flex-col overflow-hidden border-r border-gray-300 bg-white transition-all duration-300 ${visible
 					? "translate-x-0 opacity-100"
 					: "pointer-events-none -translate-x-full opacity-0"
 					}`}
@@ -527,7 +527,7 @@ export default React.memo(function GisTree({
 					className={`grow overflow-y-auto border-none p-2 pt-0 shadow-none ${activeTab === "layers" ? "block" : "hidden"
 						}`}
 				>
-					<h3 className="mx-2 my-4 text-3xl font-bold text-gray-600 text-center">시설물</h3>
+					<h3 className="gis-layer-panel-title mx-2 my-4 text-3xl font-bold text-gray-600 text-center">시설물</h3>
 					<hr className="mb-4" />
 					{/* DnD Tree */}
 					<DndProvider backend={MultiBackend} options={getBackendOptions()}>
@@ -550,7 +550,7 @@ export default React.memo(function GisTree({
 								return (
 									<div style={{ display: isVisible ? "block" : "none" }}>
 										<div
-											className="flex items-center gap-2 rounded px-2 py-1 hover:bg-gray-100"
+											className="gis-layer-row flex items-center gap-2 rounded px-2 py-1 hover:bg-gray-100"
 											style={{
 												marginInlineStart: depth * 16,
 											}}
@@ -578,7 +578,7 @@ export default React.memo(function GisTree({
 											{showLayerActionButton && (
 												<button
 													type="button"
-													className="ml-1 shrink-0 rounded-sm border border-[#9cc6f0] bg-white px-2 py-[1px] text-[1.1rem] font-medium leading-5 text-[#2c6fb7] transition-colors hover:bg-[#eef6ff]"
+													className="gis-layer-action-button ml-1 shrink-0 rounded-sm border border-[#9cc6f0] bg-white px-2 py-[1px] text-[1.1rem] font-medium leading-5 text-[#2c6fb7] transition-colors hover:bg-[#eef6ff]"
 													onClick={() =>
 														handleLayerImgClick(
 															node.data.lyrTyNm,
@@ -627,13 +627,13 @@ export default React.memo(function GisTree({
 					</DndProvider>
 				</div>
 				{LayerSettingView && (
-					<div className="shrink-0 bg-white px-2 pb-3">
+					<div className="gis-layer-setting shrink-0 bg-white px-2 pb-3">
 						<LayerSettingView />
 					</div>
 				)}
 				<button
 					onClick={() => setVisible(false)}
-					className={`absolute right-[-3px] z-50 transform rounded-l-none rounded-r border border-l border-gray-300 bg-white px-1 py-2 shadow-sm ${toggleButtonPositionClass}`}
+					className={`gis-layer-toggle absolute right-[-3px] z-50 transform rounded-l-none rounded-r border border-l border-gray-300 bg-white px-1 py-2 shadow-sm ${toggleButtonPositionClass}`}
 				>
 					<ChevronLeft size={16} />
 				</button>
@@ -641,7 +641,7 @@ export default React.memo(function GisTree({
 			{!visible && (
 				<button
 					onClick={() => setVisible(true)}
-					className={`absolute left-[-3px] z-50 transform rounded-r border border-r border-gray-300 bg-white px-1 py-2 shadow-sm ${toggleButtonPositionClass}`}
+					className={`gis-layer-toggle absolute left-[-3px] z-50 transform rounded-r border border-r border-gray-300 bg-white px-1 py-2 shadow-sm ${toggleButtonPositionClass}`}
 				>
 					<ChevronRight size={16} />
 				</button>