노후관로현황 그리드 수정

apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/AgedPipeStatusByCtpvPopupPage.tsx

@@ -7,6 +7,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Input } from "@common/components";
 import {
+  getStandardRowNumber,
   StandardDataTable,
   StandardPopupLayout,
 } from "@common/business_components";
@@ -66,7 +67,15 @@ export default function AgedPipeStatusByCtpvPopupPage() {
   const yearOptions = useMemo(() => buildAgedPipeStatusYearOptions(), []);
   const columns = useMemo<ColumnDef<AgedPipeStatusByCtpvRow>[]>(
     () => [
-      { accessorKey: "rowNumber", header: "순번" },
+      {
+        id: "rowNumber",
+        header: "순번",
+        cell: ({ row }) =>
+          getStandardRowNumber({
+            total: rows.length,
+            rowIndex: row.index,
+          }),
+      },
       { accessorKey: "ctpvNm", header: "시도" },
       ...years.map((year) => ({
         id: `year_${year}`,
@@ -87,7 +96,7 @@ export default function AgedPipeStatusByCtpvPopupPage() {
         ],
       })),
     ],
-    [years],
+    [rows.length, years],
   );
 
   const pagination: PaginationState = {
@@ -292,7 +301,6 @@ export default function AgedPipeStatusByCtpvPopupPage() {
         table={table}
         className="!w-full !max-w-full"
         title="시도별 노후관로 목록"
-        total={rows.length}
         scrollMode="horizontal"
         minTableWidth={years.length > 0 ? "120rem" : "100%"}
         actions={

apps/sn/docs/작업검증/SFR-011-001-시도별 노후관로현황/001-qa-SFR-011-001-시도별 노후관로현황-검증기록.md

@@ -8,3 +8,10 @@
 - `pnpm --filter sn build`
   - 결과: 시간 제한 내 완료되지 않아 최종 성공/실패를 확정하지 못했다.
   - 비고: 이 저장소는 기존에도 FE build가 환경 영향으로 지연 또는 `EMFILE` 이슈가 있었으므로 사용자 로컬 실행 확인이 추가로 필요하다.
+
+## 3. 2026-09-10 공통 목록 정합성 확인
+
+- 사용자 지시에 따라 그리드 제목의 `총 18건` 표기를 제거하고 `시도별 노후관로 목록`만 유지했다.
+- 순번은 전체 건수 기준 역순으로 계산해 로컬 3002에서 1페이지 18~9, 2페이지 8~1 표출을 확인했다.
+- 원본 근거는 요구사항정의서 `SFR-011-001`, 화면설계서 8~9번 `SN_MN010102`이며 순번·제목 건수는 원본 필수항목이 아닌 공통 그리드 표시 규칙이다.
+- API, 조회조건, 연도 그룹 헤더와 Excel 다운로드 형식은 변경하지 않았다.

apps/sn/docs/작업내용/FE-GRID-전수조사/001-fe-SN-관로분석그리드개선-전수조사.md

@@ -19,8 +19,8 @@
 ## 변경 내용
 
 - `PipeAnalysisPopupPage.tsx`의 별도 YEAR_MATERIAL Table/UiPageNations 분기와 일반 MapPopupDataTable 분기를 `PipeAnalysisSummaryTable`로 통합했다.
-- `StandardDataTable`의 카드·로딩/빈 목록 처리·공통 페이지네이션을 재사용하고, 지원하는 `renderTable`로 병합 셀을 유지했다. 독립적인 구형 그리드를 새로 만든 것이 아니다.
-- 표 본문은 공통 `Table variant="default"`의 파란 헤더를 사용한다. 공용 CSS 변경 없이 관로분석 전용 CSS로 너비·행 높이·고정 열만 적용한다.
+- `StandardDataTable`의 카드·로딩/빈 목록 처리·공통 페이지네이션을 재사용하고, 범용 `layout`, `pinnedColumns`, `getCellProps` 옵션으로 병합 셀·고정 열을 유지한다. 독립적인 구형 그리드를 새로 만든 것이 아니다.
+- 표 본문은 확장된 공통 렌더러와 `Table variant="default"`의 파란 헤더를 사용한다. 관로분석 전용 CSS 없이 공통 `standard-data-table.css`가 너비·행 높이·고정 열을 처리한다.
 - 순번 56px, 시도·시군구 각각 120px, 처리구역 160px, 합계 100px를 고정한다. 경과년도는 112px, 재질은 120~160px를 확보한다.
 - 헤더 높이 64px, 본문은 공통 폰트·행간·패딩을 그대로 사용한다. 2026-09-09 후속 요청으로 최초 12px/18px 별도 폰트와 헤더 구분선 설정을 제거했다. 지역 텍스트는 한 줄과 전체값 title을 사용한다.
 - 헤더는 세로 스크롤, 지역 식별 정보와 합계는 가로 스크롤 중 고정된다. 페이지/분석구분 전환 시 표 스크롤을 초기화한다.
@@ -74,7 +74,7 @@ TypeScript AST로 주석·문자열을 제외한 실제 JSX와 import 별칭을
 ## 재현 방법과 롤백
 
 - 표 사용처 전수조사는 AST 기반 일회성 스크립트로 수행했으며, 해당 스크립트는 저장소에 남기지 않았다.
-- 원복은 PipeAnalysisPopupPage의 이번 표 렌더링 변경과 신규 PipeAnalysisSummaryTable/CSS만 되돌린다. DB 이관은 없다.
+- 원복은 PipeAnalysisPopupPage의 이번 표 렌더링 변경, PipeAnalysisSummaryTable과 StandardDataTable 확장만 되돌린다. DB 이관은 없다.
 - 공통 패키지와 타 앱 변경은 없다. 커밋·배포는 수행하지 않았다.
 - 긴 재질 목록은 가로 스크롤이 필요하다. 재질명 중복은 코드별 기존 데이터이므로 이름만 보고 열을 병합하지 않았다.
 
@@ -91,6 +91,14 @@ TypeScript AST로 주석·문자열을 제외한 실제 JSX와 import 별칭을
 - 최초 조사에서 추가 전환 대상으로 분류한 3곳 중 GIS 오류 목록은 전환 완료했고 지반침하 주변 관로 및 조사현황 집계표 2곳은 검토 대상으로 남는다.
 - 롤백은 이번 CSS 제거 변경과 GisManagementPopupPage의 오류 목록 렌더링만 되돌린다.
 
+## 2026-09-10 StandardDataTable 공통 확장 전환
+
+- `StandardDataTable`에 하위 호환 `layout`, `pinnedColumns`, `getCellProps` 계약과 확장 렌더러를 추가했다. 옵션을 사용하지 않는 기존 화면은 기존 `DataTable` 경로를 유지한다.
+- 관로분석은 경과년도·재질 데이터 구성과 상세 조회 조건만 소유하고, 실제 table·thead·td, sticky header, 고정 열 위치, 셀 overflow는 공통 컴포넌트가 처리하도록 전환했다.
+- 처리구역별 4행은 공통 `getCellProps`의 `rowSpan`·`hidden` 계약으로 렌더링하며 관로분석 전용 `pipe-analysis-summary-table.css`를 제거했다.
+- 실행 중인 로컬 3002 HMR에서 경과년도별 10행, 경과년도&재질 40행과 첫 5열 `rowSpan=4`를 확인했다. 가로 2,186px·세로 1,160px 스크롤 후에도 고정 열 x=37.5/93.5/213.5/333.5/493.5px, 헤더와 스크롤 영역 y=217px가 유지됐다.
+- 시도별 노후관로현황은 제목의 별도 총 건수 표기를 제거하고 공통 역순 순번을 적용했다. 전체 18건에서 1페이지 18~9, 2페이지 8~1 표출을 로컬 브라우저로 확인했다.
+
 ## 최초 전수조사 당시 실제 앱 전체 사용처
 
 | 파일 | JSX 구성요소:행 | 판정 |

packages/common/business_components/src/ui/standard_data_table/index.tsx

@@ -278,11 +278,34 @@ function StandardDataTableRenderer<T>({
         {table.getHeaderGroups().map((headerGroup) => (
           <TableRow key={headerGroup.id}>
             {headerGroup.headers.map((header) => {
+              const columnRelativeDepth = header.depth - header.column.depth;
+              if (
+                !header.isPlaceholder &&
+                columnRelativeDepth > 1 &&
+                header.id === header.column.id
+              ) {
+                return null;
+              }
+
+              let rowSpan = 1;
+              if (header.isPlaceholder) {
+                const leafHeaders = header.getLeafHeaders();
+                rowSpan =
+                  (leafHeaders[leafHeaders.length - 1]?.depth ?? 0) -
+                  header.depth;
+              }
+
               const pinned = getPinnedProps(header.column.id);
+              const isNestedGroupHeader =
+                !header.isPlaceholder && header.column.columns.length > 0;
               return (
                 <TableHead
                   key={header.id}
                   colSpan={header.colSpan}
+                  rowSpan={rowSpan}
+                  className={cn(
+                    isNestedGroupHeader && "data-table-group-header",
+                  )}
                   data-pinned={pinned.pinned}
                   style={pinned.style}
                   align={header.column.columnDef.meta?.align}