wr: 지도 back 테마 적용

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"] {

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>