diff --git a/apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/AgedPipeStatusByCtpvPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/AgedPipeStatusByCtpvPopupPage.tsx index 1a9d8a220..99904fd40 100644 --- a/apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/AgedPipeStatusByCtpvPopupPage.tsx +++ b/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[]>( () => [ - { 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={ diff --git a/apps/sn/docs/작업검증/SFR-011-001-시도별 노후관로현황/001-qa-SFR-011-001-시도별 노후관로현황-검증기록.md b/apps/sn/docs/작업검증/SFR-011-001-시도별 노후관로현황/001-qa-SFR-011-001-시도별 노후관로현황-검증기록.md index b95de821c..b11584943 100644 --- a/apps/sn/docs/작업검증/SFR-011-001-시도별 노후관로현황/001-qa-SFR-011-001-시도별 노후관로현황-검증기록.md +++ b/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 다운로드 형식은 변경하지 않았다. diff --git a/apps/sn/docs/작업내용/FE-GRID-전수조사/001-fe-SN-관로분석그리드개선-전수조사.md b/apps/sn/docs/작업내용/FE-GRID-전수조사/001-fe-SN-관로분석그리드개선-전수조사.md index 9c4131597..4ce853388 100644 --- a/apps/sn/docs/작업내용/FE-GRID-전수조사/001-fe-SN-관로분석그리드개선-전수조사.md +++ b/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 구성요소:행 | 판정 |