시설물 상세창 깨짐 수정

apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx

@@ -1018,13 +1018,14 @@ const FeatureClickEventPopup = ({
   return (
     <div
       id="popup"
-      className="absolute right-0 top-0 z-[50] flex h-[calc(100vh-5rem)] w-[350px] flex-col overflow-hidden border-r border-border bg-background transition-all duration-300"
+      className="absolute right-0 top-0 z-[50] flex h-full max-h-[calc(100dvh-6rem)] w-[350px] max-w-full flex-col overflow-hidden border-r border-border bg-background transition-all duration-300"
     >
       <LoadingOverlay isLoading={isLoading} />
-      <div className="card-header relative flex items-center justify-between bg-primary p-4 pr-12">
-        <div className="flex flex-1 items-center space-x-4">
+      {/* 제목·기능 버튼·닫기 버튼의 칸을 분리해 시설 종류나 제목 길이에 관계없이 겹침을 방지한다. */}
+      <div className="card-header relative !mx-0 !grid shrink-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 bg-primary p-4">
+        <div className="min-w-0">
           {surveyMode && (
-            <h3 className="whitespace-nowrap text-2xl font-medium text-primary-foreground">
+            <h3 className="break-words text-2xl font-medium text-primary-foreground">
               조사관리 <br />
               관로번호 :{" "}
               {featureData?.get?.("gisManagementNo") ??
@@ -1034,16 +1035,14 @@ const FeatureClickEventPopup = ({
             </h3>
           )}
           <h3
-            className={`${surveyMode ? "hidden" : ""} whitespace-nowrap text-2xl font-medium text-primary-foreground`}
+            className={`${surveyMode ? "hidden" : ""} break-words text-2xl font-medium text-primary-foreground`}
           >
             {layerNm}
             {tableData?.usg_cd && <>({tableData.usg_cd})</>} 정보 <br />
             관리번호 : {layerSpecificNm}
           </h3>
         </div>
-        <div
-          className={`flex shrink-0 items-center space-x-3 ${layerNm === "하수관로" ? "mr-8" : ""}`}
-        >
+        <div className="flex items-center gap-2">
           {/* 하수관로일 때만 Infil/RDII 버튼 표시 */}
           {layerNm === "하수관로" && (
             <>
@@ -1099,7 +1098,7 @@ const FeatureClickEventPopup = ({
         </div>
         <Button
           onClick={onClose}
-          className="text-primary-foreground/80 absolute right-2 top-1/2 z-10 h-8 w-8 -translate-y-1/2 p-0 hover:text-primary-foreground focus:outline-none"
+          className="text-primary-foreground/80 h-8 w-8 shrink-0 p-0 hover:text-primary-foreground focus:outline-none"
           size="xs"
           aria-label="시설 상세정보 닫기"
           title="닫기"
@@ -1107,8 +1106,9 @@ const FeatureClickEventPopup = ({
           <span aria-hidden="true">✕</span>
         </Button>
       </div>
+      {/* 표 카드를 flex로 압축하지 않고 내용 높이대로 쌓아 본문에서만 스크롤한다. */}
       <div
-        className="flex flex-1 flex-col overflow-y-auto overflow-x-hidden"
+        className="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden"
         ref={contentRef}
       >
         <VerticalTable

apps/sn/docs/검증/SFR-012-001-시설상세레이아웃/001-qa-SN-시설상세레이아웃-검증결과.md

@@ -0,0 +1,67 @@
+# 시설 상세 패널 레이아웃 수정 검증
+
+## 목적 및 원본 근거
+
+- 검증일: 2026-09-04
+- 대상: 하수관망도 우측 시설 상세 패널에서 기본정보·입력정보·유지관리 이력 표가 겹치는 현상
+- 화면설계서: 36번 슬라이드 `SN_MN010303 / SFR-012-001`, 48번 슬라이드 `SN_MN040107 / SFR-010-004`, 10번 슬라이드 `SN_MN010103`
+- 요구사항정의서: `3. (기능)요구사항정의 및 추적표` 96행 `SFR-012-001`, 92행 `SFR-011-006`
+- 기존 시설 속성과 추가 현황정보 표시 기능을 유지하는 레이아웃 수정이다. 데이터·API·저장 계약은 변경하지 않는다.
+
+## 원인 및 수정
+
+- 본문의 `display:flex; flex-direction:column` 때문에 내용이 긴 카드가 가용 높이 안으로 압축됐다. 카드 안의 실제 table은 원래 높이를 유지해 다음 카드 위로 넘쳤다.
+- 실제 관로 `61582`에서 기본정보 카드 높이는 약 204px인데 표 높이는 약 853px, 입력정보 카드 높이는 약 86px인데 표 높이는 약 362px였다.
+- `featureClickEventPopup.tsx` 본문을 일반 블록 흐름으로 복구하고 `min-h-0 min-w-0 flex-1`로 단일 본문 스크롤 영역을 유지했다.
+- 상단 헤더는 `shrink-0`으로 고정하고 음수 좌우 마진을 제거했다.
+- 패널은 지도 부모 높이를 사용하되 공통 상단 헤더(6rem) 아래 가용 화면 높이를 넘지 않도록 제한했다.
+- 침수흔적 심선·위선 선택부, 표 컴포넌트, 입력 폼, 저장 및 닫기 콜백은 변경하지 않았다.
+
+## 실제 브라우저 검증
+
+`localhost:3002/map → 정보검색 → 시설 구분 조회 → 목록의 시설번호 선택` 흐름으로 실행했다.
+
+| 시나리오 | 확인 결과 |
+| --- | --- |
+| 관로 61582 상세 | 기본정보 → 입력정보 → 보수 및 갱신 → 청소 및 준설 → 점검 및 진단 순서 정상 |
+| 관로, 1920×900, 상단·중간·하단 스크롤 | 카드 밖 표 넘침 0건, 인접 영역 겹침 0건, 패널 하단 900px |
+| 관로, 1366×600, 상단·중간·하단 스크롤 | 카드 밖 표 넘침 0건, 인접 영역 겹침 0건, 패널 하단 600px |
+| 관로 입력값 임시 변경·스크롤 | 입력값 유지 확인 후 원래 값으로 복원; 서버 저장 미실행 |
+| 관로 X 닫기·다시 선택 | 닫힘 및 재진입 정상 |
+| 맨홀 1101909890 상세 | 기본정보·입력정보 표 넘침 0건 |
+| 하수처리구역 41830PB009R 상세 | 표 넘침 및 인접 영역 겹침 0건 |
+| 침수흔적위선 관리번호 1 상세 | 기본정보 겹침 0건. 해당 데이터에는 연결 심선/위선 선택 버튼이 없어 버튼 클릭은 검증하지 않음 |
+| 지도 브라우저 콘솔 | 검증 중 error 0건 |
+
+화면 크기 변경 시 기존 300ms transition이 끝난 뒤 최종 배치를 측정했다.
+
+캡처:
+
+- `D:/workspace/IIPBS/docs/작업내용/SFR-012-001-시설상세레이아웃/검증/after-pipe-input-history.png`
+- `D:/workspace/IIPBS/docs/작업내용/SFR-012-001-시설상세레이아웃/검증/after-pipe-1366x600-bottom.png`
+
+## 정적 검사 및 제한
+
+- `git diff --check`: 통과
+- SN 타입 검사: 실패. 기존 HEAD의 `DredgingRegisterModal.tsx:792`에 `statusLabel` 미정의 오류(TS2304)가 존재한다. 이번 수정 파일의 타입 오류는 보고되지 않았다.
+- 실행 명령: `tsc -p apps/sn/tsconfig.json --noEmit --ignoreDeprecations 5.0`
+- 사용자 개발 서버를 보호하기 위해 Next build 및 서버 종료/재시작은 실행하지 않았다.
+- 저장·삭제·업로드 등 DB 변경 검증은 수행하지 않았다.
+
+## 영향 및 롤백
+
+- 변경 코드: `apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx` 한 파일
+- 같은 상세 패널을 사용하는 SN 시설 유형에 적용된다. WR·FO·DM 및 공용 패키지는 수정하지 않는다.
+- 롤백은 해당 파일의 패널/헤더/본문 레이아웃 클래스와 추가 주석 변경만 되돌리면 된다.
+
+## 추가 검증: 헤더 기능 버튼과 X 겹침
+
+- 하수관로에만 우측 여백을 주고 X는 절대 위치에 놓았던 구조라 맨홀의 `상류관로 보기`와 X가 겹쳤다.
+- 헤더를 제목 / 기능 버튼 / 닫기 버튼의 3열 grid로 변경했다. X의 절대 위치와 관로 전용 임의 여백을 제거하고 긴 제목은 자신의 칸 안에서 줄바꿈하도록 했다.
+- 맨홀 `1101909890`, 관로 `1102086715`, 하수처리구역 `41830PB009R`을 실제 정보검색에서 선택하여 1920×900 및 1366×600에서 검증했다.
+- 6개 조합 모두 영역 겹침 0건, 헤더 외부 버튼 넘침 0건. 각 버튼 중앙 hit test도 해당 버튼을 가리켰다.
+- 맨홀 상류관로 버튼과 X, 관로 RDII 버튼과 X 간격은 모두 5px이다.
+- `상류관로 보기` 실제 클릭 시 `GET /api/v1/fcltmhl/upperPpls/1101909890` 응답 200. 해당 표본에서는 찾을 수 없다는 기존 공통 메시지가 표시됐다. 메시지 확인 후 X로 상세 패널을 닫았다.
+- 헤더 수정은 클릭/저장 콜백을 변경하지 않는다. 앞서 수정한 본문 스크롤 구조도 유지한다.
+- 추가 캡처: 같은 검증 폴더의 `after-manhole-header.png`, `after-pipe-header.png`.
+- 타입 검사는 동일한 기존 `DredgingRegisterModal.tsx:792 statusLabel` 오류만 보고됐다. `git diff --check`는 통과했다.