지반침하 반경 내 관로정보 요약 표시 개선

apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx

@@ -121,11 +121,24 @@ export default function SinkholeDetailPanel({
         />
 
         <section className="pb-[1.2rem]">
-          <div className="card-header flex items-center justify-between px-[1.2rem]">
-            <h3 className="text-2xl mx-3 font-medium text-label">
+          <div className="card-header !block px-[1.2rem]">
+            <h3 className="mx-3 whitespace-nowrap text-2xl font-medium text-label">
               침하발생 반경내 관로정보
             </h3>
-            <div className="mr-3 text-[1rem] text-slate-500">반경 {radiusMeters}m · {nearbyPipes.length}건</div>
+            {canShowNearby ? (
+              <div className="mx-3 mt-2 whitespace-nowrap text-left text-[0.95rem] leading-5 text-slate-500">
+                <span>반경 {radiusMeters}m · </span>
+                <span className="font-bold text-[#1d4ed8]">{nearbyPipes.length.toLocaleString()}건</span>
+                <span>, 평균경과 </span>
+                <span className="font-bold text-[#1d4ed8]">
+                  {displayElapsedYears(nearbyPipeElapsedSummary.average)}
+                </span>
+                <span>, 최장경과 </span>
+                <span className="font-bold text-[#1d4ed8]">
+                  {displayElapsedYears(nearbyPipeElapsedSummary.oldest)}
+                </span>
+              </div>
+            ) : null}
           </div>
           {!canShowNearby ? (
             <div className="card !m-[1.2rem] !mt-0 rounded-sm border border-amber-200 bg-amber-50 px-3 py-3 text-[1.05rem] text-amber-700">
@@ -166,20 +179,6 @@ export default function SinkholeDetailPanel({
                   </tr>
                 </thead>
                 <tbody>
-                  <tr className="bg-slate-50">
-                    <td colSpan={2} className="border border-gray-300 px-1 py-2 text-center text-[0.95rem] text-slate-900">
-                      <span className="font-medium text-slate-600">평균경과</span>
-                      <span className="ml-1 font-semibold">
-                        {displayElapsedYears(nearbyPipeElapsedSummary.average)}
-                      </span>
-                    </td>
-                    <td colSpan={2} className="border border-gray-300 px-1 py-2 text-center text-[0.95rem] text-slate-900">
-                      <span className="font-medium text-slate-600">최대경과</span>
-                      <span className="ml-1 font-semibold">
-                        {displayElapsedYears(nearbyPipeElapsedSummary.oldest)}
-                      </span>
-                    </td>
-                  </tr>
                   {nearbyPipes.map((pipe, index) => (
                     <tr
                       key={`${pipe.fid}-${index}`}

apps/sn/docs/작업검증/SFR-010-010-지반침하정보/002-qa-SFR-010-010-지반침하정보-통합검증결과.md

@@ -102,7 +102,7 @@
   - 사용자 확인 완료
   - 추가 브라우저 재현 캡처와 빌드 재실행은 이번 라운드에서 수행하지 않음
 
-### 2.14 2026-06-25 반경 내 관로정보 경과년도 컬럼 및 집계행 코드 검증
+### 2.14 2026-06-25 반경 내 관로정보 경과년도 컬럼 및 요약문구 코드 검증
 
 - 검증 대상
   - `FE_APP_ROOT/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx`
@@ -111,12 +111,12 @@
   - `BE_REPO_ROOT/src/main/java/iipbs/sewerage/api/sinkhole/dto/SinkholeNearbyPipeRowDto.java`
 - 확인 내용
   - 백엔드 `nearbyPipes` row DTO에 `elapsedYears`가 추가되고 native query 결과 매핑 인덱스가 함께 조정됐는지 확인했다.
-  - 프론트 반경 내 관로정보 표에서 `용도` 컬럼을 제외하고 `경과년도` 컬럼과 최상단 집계행(`평균경과`, `최대경과`)이 추가되는지 코드 경로를 확인했다.
+  - 프론트 반경 내 관로정보 표에서 `용도` 컬럼을 제외하고 `경과년도` 컬럼과 제목 아래 요약문구(`건수`, `평균경과`, `최장경과` 값 파란색 볼드)가 추가되는지 코드 경로를 확인했다.
   - `git diff --check`를 FE/BE 변경 파일 기준으로 실행해 공백 오류가 없음을 확인했다.
   - 백엔드 `./gradlew.bat compileJava` 통과를 확인했다.
 - 미확인 내용
   - FE `tsc --noEmit`은 로컬 `tsc` 명령 부재로 실행하지 못했다.
-  - 실제 브라우저에서 4개 컬럼과 집계행이 잘리지 않는지, API 응답 `elapsedYears` 값으로 평균/최대경과가 계산되는지는 개발서버 수동 검증이 필요하다.
+  - 실제 브라우저에서 4개 컬럼과 요약문구가 잘리지 않는지, API 응답 `elapsedYears` 값으로 평균경과/최장경과가 계산되는지는 개발서버 수동 검증이 필요하다.
 
 ### 2.15 2026-06-25 반경 조회 회귀 방지 확인
 - `map/page.tsx`에 추가했던 반경 조회 fallback 변경을 제거하고, 기존 조회 흐름으로 원복했음을 확인했다.

apps/sn/docs/작업내용/SFR-010-010-지반침하정보/001-fe-SFR-010-010-지반침하정보-통합구현기록.md

@@ -246,10 +246,10 @@
 - 문제 PNG는 `sRGB`, `gAMA`, `pHYs` 부가 청크를 포함하고 있었고, 정상 로드되는 단순 RGBA PNG 중 `WTL_RSRV_PS_ORANGE.png`는 `IHDR`, `IDAT`, `IEND`만 가지고 있었다.
 - 이에 `SN_SINKHOLE_SPOT_ORANGE.png`, `SN_SINKHOLE_SPOT_BLUE.png`의 파일명과 픽셀은 유지하고, PNG 컨테이너만 `IHDR + IDAT + IEND` 구조로 재인코딩해 개발서버 정적 파일 처리 차이를 줄였다.
 
-### 4.31 2026-06-25 반경 내 관로정보 경과년도 컬럼 및 집계행 추가
+### 4.31 2026-06-25 반경 내 관로정보 경과년도 컬럼 및 요약문구 추가
 
 - 요구사항 변경으로 관로 `용도` 컬럼은 이번 범위에서 제외하고, 지반침하 상세 패널의 `침하발생 반경내 관로정보` 표에 `경과년도` 컬럼만 추가했다.
-- 표는 `NO / 관로 ID / 경과년도 / 거리(m)` 4개 컬럼으로 구성하고, 본문 최상단에 집계 1행을 추가해 `평균경과`와 `최대경과`를 함께 표시한다.
+- 표는 `NO / 관로 ID / 경과년도 / 거리(m)` 4개 컬럼으로 구성하고, 기존 제목은 유지하고 제목 아래에 요약문구 한 줄을 추가해 `건수`, `평균경과`, `최장경과` 값을 파란색 볼드로 표시한다.
 - 집계값은 `nearbyPipes` 응답의 `elapsedYears` 중 숫자로 해석 가능한 값만 대상으로 계산하며, 계산 대상이 없으면 기존 표시 정책대로 `-`를 보여준다.
 - 개별 행의 `경과년도`는 백엔드 `nearbyPipes` 응답에 추가한 `elapsedYears`를 사용한다.