diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx
index a7282830d..994feb3b3 100644
--- a/packages/common/business_components/src/ui/chart/BarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/BarChart.tsx
@@ -110,6 +110,12 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle='
               axisLine={true}
               fontSize={12}
               fontWeight={500}
+              tickFormatter={(value) => {
+                // 소수점이 있는 경우 소수점을 유지하고 천단위 콤마 추가
+                return value.toString().includes('.') 
+                  ? value.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 })
+                  : value.toLocaleString();
+              }}
               label={yFieldText ? { value: yFieldText, className:"text-[13px] font-bold", position: 'insideLeft', angle: -90, offset: -24,  orientation: "left"  } : undefined}
             />
             <ChartTooltip cursor={false} content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />}/>
diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
index 8c7202104..11984cc14 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -127,7 +127,7 @@ export default function LineBarchart({
               className="text-[12px] font-bold" 
               tickCount={6}
               orientation="left" 
-              domain={[0, Math.ceil(lineMaxValue * 1)]}
+              tickFormatter={(value) => value.toLocaleString()}
               label={{ value: yFieldText, angle: -90, position: 'insideLeft' }} 
             />}
             {/* 오른쪽 Y축: barVal */}
@@ -136,7 +136,7 @@ export default function LineBarchart({
               className="text-[12px] font-bold" 
               tickCount={6} 
               orientation="right" 
-              domain={[0, Math.ceil(barMaxValue * 1)]}
+              tickFormatter={(value) => value.toLocaleString()}
               label={{ value: yFieldText2, angle: -90, position: 'insideRight' }} 
               reversed={true} 
             />}
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index 28b4ceabf..6c1b6e7bd 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -193,7 +193,7 @@ export default function Linechart({
           >
             <CartesianGrid vertical={false} />
             <XAxis dataKey="label" fontSize="8px" fontWeight="bold" />
-            <YAxis yAxisId="left" className="text-[12px] font-bold" domain={[0, Math.ceil(lineMaxValue * 1.1)]} tickCount={6} orientation="left" label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} />
+            <YAxis yAxisId="left" className="text-[12px] font-bold" tickFormatter={(value) => value.toLocaleString()} tickCount={6} orientation="left" label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} />
             <Tooltip content={<CustomTooltip />} />
             {showLegend && <Legend content={CustomLegend as ContentType}/>}
             {Object.keys(chartData).map((key) => {
diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts
index fd1e6fe9e..06c641259 100644
--- a/packages/common/business_components/src/ui/index.ts
+++ b/packages/common/business_components/src/ui/index.ts
@@ -21,4 +21,5 @@ export * from "./table_div";
 export * from "./title";
 export * from "./sdmInsertForm";
 export * from "./popover_ui";
-export * from "./date_month_picker";
\ No newline at end of file
+export * from "./date_month_picker";
+export * from "./loadingBar";
\ No newline at end of file
diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js
index 977f21b2b..2af6f76dc 100644
--- a/packages/common/business_components/src/ui/map/Gis.js
+++ b/packages/common/business_components/src/ui/map/Gis.js
@@ -40,12 +40,14 @@ function Gis({
 	const mapRef = useRef();
 	const [mapObject, setMapObject] = useState({});
 	const [tabVisible, setTabVisible] = useState(true);
+	const [layerNm, setLayerNm] = useState('')
 	// const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
 	// const [featureData, setFeatureData] = useState(null) // 선택된 피쳐 데이터
 	// const [isSearchModalOpen, setIsSearchModalOpen] = useState(false); // SearchModal 열림 상태
 	const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []);
 	const mapInstanceRef = useRef(null);
 	const checkedLayerIds = useRef([]);
+	const [viewMode, setViewMode] = useState("detail");
 
 	// 팝업 데이터를 저장할 상태와 오버레이 참조를 저장할 ref 추가
 	// const [facilityInfoPopupData, setFacilityInfoPopupData] = useState([]);
@@ -358,14 +360,17 @@ function Gis({
 						visible={tabVisible}
 						setVisible={setTabVisible}
 						onCheckedChange={handleCheckedLayersChange}
+						onLayerIconClick={(nodeNm)=>{setLayerNm(nodeNm); setIsOpen(true); setViewMode("detail")}}
 					/>
 
 					{/* <GisContent onFeatureSelect={handleFeatureSelect} isSearch={isSearch} isSearchModalOpen={isSearchModalOpen} setIsSearchModalOpen={setIsSearchModalOpen} /> */}
 
 					{/* DetailView가 존재할 때만 렌더링 isSearchModalOpen이 true면 visible=false로 팝업 숨김 */}
-					{isOpen && featureData && !isSearchModalOpen && (
+					{isOpen && !isSearchModalOpen && (
 						<DetailView
 							featureData={featureData}
+							seletectedLayerNm={layerNm}
+							viewMode={viewMode}
 							onClose={closePopup} // 닫기 콜백 전달
 						/>
 					)}
diff --git a/packages/common/business_components/src/ui/map/GisTree.js b/packages/common/business_components/src/ui/map/GisTree.js
index 200e9d988..5b30dc7f4 100644
--- a/packages/common/business_components/src/ui/map/GisTree.js
+++ b/packages/common/business_components/src/ui/map/GisTree.js
@@ -6,10 +6,11 @@ import {
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 import { DndProvider } from "react-dnd";
+
 import { useGisContext } from './Gis';
 import GisApp from './lib/gis.core';
 
-export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes = () => { }, visible, setVisible, onCheckedChange }) {
+export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes = () => { }, visible, setVisible, onCheckedChange, onLayerIconClick }) {
 	const { gisCore, treeData } = useGisContext();
 	const [checked, setChecked] = useState([]);
 	const [expanded, setExpanded] = useState([]);
@@ -187,7 +188,10 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 		image.src = canvas.toDataURL('image/png');
 		return image;
 	};
-	
+	const handleLayerImgClick = (nodeNm) => {
+		console.log('click!', nodeNm)
+		onLayerIconClick(nodeNm)
+	}
 	if (!treeData || treeData.length === 0) return null;
 
 	return (
@@ -220,7 +224,7 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 									<input type="checkbox" checked={checked.includes(node.id)} onChange={() => handleCheck(node.id)} className="cursor-pointer" />
 									{node.icon && <span>{node.icon}</span>}
 									<span className="text-[1.3rem] font-medium text-label">{node.text}</span>
-									{depth > 0 && <span><img className="cursor-pointer w-5 h-5" src='/images/map/layericon/Layer_Select_BTN.png' onClick={()=>{}} alt={node.text}></img></span>}
+									{depth > 0 && <span><img className="cursor-pointer w-5 h-5" src='/images/map/layericon/Layer_Select_BTN.png' onClick={()=>{handleLayerImgClick(node.text)}} alt={node.text}></img></span>}
 								</div>
 							)}
 							sort={(a, b) => {