diff --git a/apps/sn/app/(map-layout)/map/components/repairHistory/RepairHistoryPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/repairHistory/RepairHistoryPopupPage.tsx index 7683ed59b..b9d3b8ddb 100644 --- a/apps/sn/app/(map-layout)/map/components/repairHistory/RepairHistoryPopupPage.tsx +++ b/apps/sn/app/(map-layout)/map/components/repairHistory/RepairHistoryPopupPage.tsx @@ -48,23 +48,27 @@ const resolvePipeUseOptions = (rows: MapLayerSettingRow[]): PipeUseOption[] => r type RepairHistoryTableRow = { fid: string; fcltMngNo: string; + useName: string; repairCount: string; latestRepairYear: string; elapsedYearsSinceRepair: string; materialName: string; + diameter: string; installationYear: string; burialDepth: string; }; /** 부모 업무화면과 동일한 공통 UiTable 헤더·열 정렬 규격이다. */ const REPAIR_HISTORY_HEADLIST: UiHeadProps[] = [ - { id: "fcltMngNo", title: "시설관리번호", align: "center", widthPercent: 22 }, - { id: "repairCount", title: "보수이력(건)", align: "right", widthPercent: 12 }, - { id: "latestRepairYear", title: "최근보수년도", align: "center", widthPercent: 13 }, - { id: "elapsedYearsSinceRepair", title: "보수후 경과년도", align: "right", widthPercent: 14 }, - { id: "materialName", title: "관종", align: "center", widthPercent: 16 }, - { id: "installationYear", title: "설치년도", align: "center", widthPercent: 11 }, - { id: "burialDepth", title: "매설심도(m)", align: "right", widthPercent: 12 }, + { id: "fcltMngNo", title: "시설관리번호", align: "center", widthPercent: 17 }, + { id: "useName", title: "용도", align: "center", widthPercent: 10 }, + { id: "repairCount", title: "보수이력(건)", align: "right", widthPercent: 10 }, + { id: "latestRepairYear", title: "최근보수년도", align: "center", widthPercent: 11 }, + { id: "elapsedYearsSinceRepair", title: "보수후 경과년도", align: "right", widthPercent: 12 }, + { id: "materialName", title: "재질", align: "center", widthPercent: 13 }, + { id: "diameter", title: "관경(mm)", align: "right", widthPercent: 9 }, + { id: "installationYear", title: "설치년도", align: "center", widthPercent: 8 }, + { id: "burialDepth", title: "매설심도(m)", align: "right", widthPercent: 10 }, ]; /** 화면 입력조건은 조회 버튼을 누른 시점의 적용조건과 분리해 다운로드 계약을 고정한다. */ @@ -201,7 +205,7 @@ export default function RepairHistoryPopupPage({ searchParams }: WindowPopupCont }; }, [zoneId]); - /** 화면에서 적용한 조건과 동일한 7개 목록 항목의 XLSX를 내려받는다. */ + /** 화면에서 적용한 조건과 동일한 9개 목록 항목의 XLSX를 내려받는다. */ const handleDownload = async () => { if (!zoneId || rows.length === 0) return; setIsLoading(true); @@ -237,10 +241,12 @@ export default function RepairHistoryPopupPage({ searchParams }: WindowPopupCont () => visibleRows.map((row) => ({ fid: row.fid, fcltMngNo: formatCellValue(row.fcltMngNo), + useName: formatCellValue(row.useNm), repairCount: formatCellValue(row.repairCount), latestRepairYear: formatYear(row.latestRepairYear), elapsedYearsSinceRepair: formatCellValue(row.elapsedYearsSinceRepair), materialName: formatCellValue(row.materialName), + diameter: formatCellValue(row.pdmtVl), installationYear: formatYear(row.installationYear), burialDepth: formatCellValue(row.burialDepth), })), @@ -273,7 +279,7 @@ export default function RepairHistoryPopupPage({ searchParams }: WindowPopupCont - 관재질 + 재질 - - 관경 시작(mm) + + 관경(mm) setFilters((current) => ({ ...current, diameterFrom: event.target.value }))} data-testid="repair-diameter-from" /> - - - - 관경 종료(mm) + ~ setFilters((current) => ({ ...current, diameterTo: event.target.value }))} data-testid="repair-diameter-to" /> - + _보수이력.xlsx` 형식으로 생성 ## 3. UI 기준 diff --git a/apps/sn/docs/작업내용/SFR-011-006-보수이력/001-fe-SFR-011-006-보수이력-구현및검증결과.md b/apps/sn/docs/작업내용/SFR-011-006-보수이력/001-fe-SFR-011-006-보수이력-구현및검증결과.md index b0b5dd94b..c2dc7c627 100644 --- a/apps/sn/docs/작업내용/SFR-011-006-보수이력/001-fe-SFR-011-006-보수이력-구현및검증결과.md +++ b/apps/sn/docs/작업내용/SFR-011-006-보수이력/001-fe-SFR-011-006-보수이력-구현및검증결과.md @@ -7,10 +7,12 @@ - 목록 제목은 `<처리구역명> 총 N건` 형식으로 표시한다. - 용도 선택지는 팝업에 코드·순서를 별도 하드코딩하지 않고 관망도 트리 레이어 설정 API에서 직접 구성한다. - 검색조건 라벨과 입력항목을 한 줄로 배치하고 부모 화면의 글꼴·입력·버튼 규격을 적용했다. +- 검색조건과 목록의 `관재질`·`관종` 표현은 `재질`로 통일하고, 관경 범위는 `관경(mm) [최소] ~ [최대]` 한 항목으로 묶었다. - 목록은 공통 `UiTable`로 교체하고 페이지당 10건으로 표시한다. +- 목록에 `용도`, `관경(mm)`을 추가해 화면 항목을 9개 열로 구성했다. - 초기·조건 조회 결과를 부모 지도에 전달하고 행 단일 클릭 시 선택 관로를 적색 강조한 뒤 이동한다. - 불필요한 Suspense 경계를 제거해 실제 별도 창의 콘텐츠가 즉시 표시되도록 했고, 부모 창에서 popup `closed` 상태도 감시한다. -- 다운로드 파일명은 화면의 처리구역명을 사용해 `<처리구역명>_보수이력.xlsx`로 만들며, XLSX 항목은 화면 그리드와 동일한 7개 열로 맞췄다. +- 다운로드 파일명은 화면의 처리구역명을 사용해 `<처리구역명>_보수이력.xlsx`로 만들며, XLSX 항목은 화면 그리드와 동일한 9개 열로 맞췄다. ## 2. 주요 수정 파일 @@ -33,7 +35,7 @@ - 목록 행을 한 번 클릭한 뒤 해당 행이 `data-state=selected`로 바뀌는 것을 확인했다. - 인증 갱신 후 새 팝업 기준 브라우저 콘솔 error/warn은 0건이었다. - 전체 TypeScript 검사는 기존 선행 오류로 실패했지만 변경 파일명 필터 결과 관련 오류는 0건이었다. -- 실제 팝업에서 다운로드해 `굴포처리구역_보수이력.xlsx` 파일 생성을 확인했고, 파일 내부가 헤더 1행과 데이터 3행 및 화면과 동일한 7개 열로 구성됨을 확인했다. +- 실제 팝업에서 다운로드해 `굴포처리구역_보수이력.xlsx` 파일 생성을 확인했고, 파일 내부가 헤더 1행과 데이터 3행 및 화면과 동일한 9개 열로 구성됨을 확인했다. ## 4. 영향 및 롤백