Merge branch 'iipbs/sn/dev' of https://www.onasys.co.kr:3000/ONAANDALL/frontend into iipbs/sn/dev

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

@@ -6854,7 +6854,14 @@ const Map = () => {
     if (activeLayerSettingItems.length === 0) return null;
 
     return (
-      <div className="flex h-[34vh] max-h-[32rem] min-h-[24rem] flex-col overflow-hidden rounded-[6px] border border-border bg-background shadow-[0_4px_14px_rgba(15,23,42,0.08)]">
+      <div
+        className="flex h-[34vh] flex-col overflow-hidden rounded-[6px] border border-border bg-background shadow-[0_4px_14px_rgba(15,23,42,0.08)]"
+        style={{
+          // 기본 높이는 유지하고, 창이 낮을 때만 지도 내부의 남은 높이에 맞춰 축소한다.
+          minHeight: "min(24rem, max(38px, calc(100dvh - 112px)))",
+          maxHeight: "min(32rem, max(38px, calc(100dvh - 112px)))",
+        }}
+      >
         <div className="flex h-[38px] shrink-0 items-center gap-2 border-b border-border px-3">
           <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-sm bg-[#EDF8EA] text-[#65B84A]">
             <ListTree size={14} strokeWidth={2} />
@@ -9253,7 +9260,7 @@ const Map = () => {
 
   return (
     <>
-      <div className="sn-map-control-layout relative h-[calc(100dvh-5rem)] overflow-hidden bg-container">
+      <div className="sn-map-control-layout relative h-[calc(100dvh-6rem)] overflow-hidden bg-container">
         {layerLoadError ? (
           <div className="absolute left-4 top-4 z-[60] max-w-[520px] rounded border border-red-200 bg-background px-4 py-3 text-sm text-red-700 shadow">
             레이어 설정 조회 실패: {layerLoadError}
@@ -9414,6 +9421,7 @@ const Map = () => {
           onSave={handleSaveGisEdit}
         />
         <Gis
+          height="h-full"
           treeData={treeData}
           checkedLayerRequest={checkedLayerRequest}
           isSearch={true}
@@ -9448,7 +9456,7 @@ const Map = () => {
           }
           waterDepth={undefined}
           layerSettingView={ActiveLayerSettingView}
-          treeSectionClassName="px-1 py-2 text-foreground"
+          treeSectionClassName="px-[4px] py-2 text-foreground"
           detachedTreeToggleButton={true}
           showLayerPanelTitle={false}
           sectionedTreePanel={true}

apps/sn/docs/작업내용/FE-MAP-레이어패널헤더/001-fe-FE-MAP-레이어패널헤더-구현기록.md

@@ -8,7 +8,7 @@
 ## 적용 기준
 
 - 지도형 화면은 기존 `Gis` 조합을 유지한다.
-- 사용자 지정 스타일은 패널 외곽 여백 `4px`, 영역 사이 간격 `6px`, 패널 배경 `#E5E5E5`이다.
+- 사용자 지정 스타일은 패널 외곽 여백 위·아래·왼쪽 `4px`, 오른쪽 `4.5px`, 영역 사이 간격 `4px`, 패널 배경 `#E5E5E5`이다.
 - 두 영역은 흰색 카드와 제목 헤더로 구분한다.
 
 ## 수정 대상
@@ -69,12 +69,17 @@
 - 분석도구 실행 버튼과 하위 메뉴에는 키보드 탐색 시에만 나타나는 `2px` `#0279FA` `focus-visible` 링을 적용했다.
 - 검색바는 복잡한 지도 배경에서도 경계가 분명하도록 `0 2px 4px rgba(60, 64, 67, 0.3), 0 4px 10px rgba(60, 64, 67, 0.18)` 그림자로 강화했다.
 - 줌 게이지와 줌레벨·축척 요약 박스는 지도 하단 `16px` 기준으로 아래맞춤 정렬했다.
+- 두 패널 카드의 간격은 `4px`로 조정하고, 사이드 패널의 상하좌우 `4px` 외곽 여백은 유지했다.
+- 선택 레이어 설정은 기본 높이를 유지하되 창 높이가 부족할 때만 지도 내부 가용 높이에 맞춰 축소해 스크롤바 하단이 화면 밖으로 넘어가지 않도록 했다.
+- 지도 컨테이너 높이를 실제 `60px` 헤더를 제외한 동적 화면 높이로 맞춰 패널 하단의 `4px` 여백까지 화면 안에 표시되도록 했다.
+- 사이드 패널 오른쪽 패딩은 시각적 정렬 보정을 위해 `4.5px`로 조정하고, 나머지 방향은 `4px`를 유지했다.
+- 레이어 관리 트리 콘텐츠의 좌우 패딩은 `0.25rem` 대신 명시적인 `4px`로 적용했다.
 - 기존 트리 행과 선택 레이어 설정 카드 본문은 유지했다.
 
 ## 검증 기준
 
-- 두 카드의 외곽 여백이 상하좌우 `4px`인지 확인한다.
-- 두 카드 사이 간격이 `6px`인지 확인한다.
+- 두 카드의 외곽 여백이 위·아래·왼쪽 `4px`, 오른쪽 `5px`인지 확인한다.
+- 두 카드 사이 간격이 `4px`인지 확인한다.
 - 패널 바깥 배경이 `#E5E5E5`인지 확인한다.
 - 레이어 체크, 펼침/접힘, 설정 카드 입력과 스크롤이 기존과 동일하게 동작하는지 확인한다.
 

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

@@ -598,7 +598,7 @@ export default React.memo(function GisTree({
 	const treeSectionClassNames = [treeSectionClassName].filter(Boolean).join(" ");
 	// 섹션형 패널은 지도 트리와 선택 레이어 설정을 각각 독립된 카드로 구분한다.
 	const panelShellClassName = sectionedPanel
-		? "gap-[6px] border-r-0 bg-[#E5E5E5] p-1"
+		? "gap-1 border-r-0 bg-[#E5E5E5] py-1 pl-1 pr-[4.5px]"
 		: "border-r border-border bg-background";
 	const treePanelClassName = sectionedPanel
 		? "min-h-0 grow flex-col overflow-hidden rounded-[6px] border border-border bg-background shadow-none"