시설물 레이어 패널 토글 복구

apps/sn/app/(map-layout)/map/page.tsx

@@ -6650,6 +6650,7 @@ const Map = () => {
           waterDepth={undefined}
           layerSettingView={ActiveLayerSettingView}
           treeSectionClassName="rounded-sm border border-slate-300 px-1 py-2"
+          detachedTreeToggleButton={true}
           isPlaying={isPlaying}
           setIsPlaying={setIsPlaying as any}
           targetLayerTypes={WATER_DEPTH_LAYER_TYPES as any}

packages/common/business_components/src/ui/map/Gis.js

@@ -75,6 +75,7 @@ function Gis({
   zoomGuide,
   showFloatingSearchButton = true,
   treeTogglePosition = "center",
+  detachedTreeToggleButton = false,
   showZoomScaleInfo = false,
 }) {
   const mapRef = useRef();
@@ -319,6 +320,7 @@ function Gis({
               inlineLayerSettingView={inlineLayerSettingView}
               treeSectionClassName={treeSectionClassName}
               toggleButtonPosition={treeTogglePosition}
+              detachedToggleButton={detachedTreeToggleButton}
             />
 
             {typeof WaterDepth === "function" && (

packages/common/business_components/src/ui/map/GisTree.js

@@ -29,6 +29,7 @@ import GisApp from "./lib/gis.core";
  * - onProgressChange(total, current): 애니메이션 진행상태 콜백
  * - layerSettingView: (선택) 좌측 레이어 트리 하단에 표시할 설정 영역
  * - layerIconVisible: (선택) 레이어 행 우측 액션 아이콘 노출 여부를 결정하는 함수
+ * - detachedToggleButton: (선택) 접기/펼치기 버튼을 패널 밖 고정 핸들로 노출할지 여부
  */
 export default React.memo(function GisTree({
 	checkedNodes = [],
@@ -48,6 +49,8 @@ export default React.memo(function GisTree({
 	inlineLayerSettingView,
 	treeSectionClassName = "",
 	toggleButtonPosition = "center",
+	showLayerPanelTitle = true,
+	detachedToggleButton = false,
 }) {
 	const { gisCore, treeData } = useGisContext();
 
@@ -517,6 +520,7 @@ export default React.memo(function GisTree({
 		toggleButtonPosition === "top" ? "top-4" : "top-1/2 -translate-y-1/2";
 	const thinScrollbarClass =
 		"[scrollbar-width:thin] [&::-webkit-scrollbar]:w-[4px]";
+	const treeSectionClassNames = [treeSectionClassName, thinScrollbarClass].filter(Boolean).join(" ");
 
 	return (
 		<>
@@ -528,13 +532,18 @@ export default React.memo(function GisTree({
 					}`}
 			>
 				<div
-					className={`grow overflow-y-auto border-none p-2 pt-0 shadow-none ${activeTab === "layers" ? "block" : "hidden"
+					className={`grow overflow-y-auto border-none p-2 ${showLayerPanelTitle ? "pt-0" : "pt-2"} shadow-none ${activeTab === "layers" ? "block" : "hidden"
 						}`}
 				>
-					<h3 className="gis-layer-panel-title mx-2 my-4 text-3xl font-bold text-gray-600 text-center">시설물</h3>
-					<hr className="mb-4" />
+					{showLayerPanelTitle && (
+						<>
+							<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()}>
+					<div className={treeSectionClassNames || undefined}>
+						<DndProvider backend={MultiBackend} options={getBackendOptions()}>
 						<Tree
 							tree={nodes}
 							rootId={null}
@@ -638,26 +647,41 @@ export default React.memo(function GisTree({
 								return aOrder - bOrder;
 							}}
 						/>
-					</DndProvider>
+						</DndProvider>
+					</div>
 				</div>
 				{LayerSettingView && (
 					<div className="gis-layer-setting shrink-0 bg-white px-2 pb-3">
 						<LayerSettingView />
 					</div>
 				)}
+				{!detachedToggleButton && (
+					<button
+						onClick={() => setVisible(false)}
+						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>
+				)}
+			</div>
+			{detachedToggleButton && visible && (
 				<button
 					onClick={() => setVisible(false)}
-					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}`}
+					className={`gis-layer-toggle absolute left-[250px] z-50 flex h-[36px] w-[20px] transform items-center justify-center rounded-[4px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] text-[#1e88e5] shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-[#eaf4ff] ${toggleButtonPositionClass}`}
+					title="접기"
 				>
-					<ChevronLeft size={16} />
+					<ChevronLeft className="h-4 w-4" />
 				</button>
-			</div>
+			)}
 			{!visible && (
 				<button
 					onClick={() => setVisible(true)}
-					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}`}
+					className={detachedToggleButton
+						? `gis-layer-toggle absolute left-0 z-50 flex h-[36px] w-[20px] transform items-center justify-center rounded-[4px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] text-[#1e88e5] shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-[#eaf4ff] ${toggleButtonPositionClass}`
+						: `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}`}
+					title="열기"
 				>
-					<ChevronRight size={16} />
+					{detachedToggleButton ? <ChevronRight className="h-4 w-4" /> : <ChevronRight size={16} />}
 				</button>
 			)}
 		</>