보수이력 목록 조회 항목 추가

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
           </label>
 
           <label className="flex items-center gap-2 whitespace-nowrap text-xl font-medium text-gray-600">
-            <span>관재질</span>
+            <span>재질</span>
             <select
               className="h-[3.2rem] w-[180px] rounded-lg border border-input bg-white px-3 text-base font-normal text-slate-900"
               value={filters.materialCode}
@@ -287,29 +293,28 @@ export default function RepairHistoryPopupPage({ searchParams }: WindowPopupCont
             </select>
           </label>
 
-          <label className="flex items-center gap-2 whitespace-nowrap text-xl font-medium text-gray-600">
-            <span>관경 시작(mm)</span>
+          <div className="flex items-center gap-2 whitespace-nowrap text-xl font-medium text-gray-600">
+            <span>관경(mm)</span>
             <input
               type="number"
               min="0"
-              className="h-[3.2rem] w-[110px] rounded-lg border border-input bg-white px-3 text-base font-normal text-slate-900"
+              aria-label="최소 관경(mm)"
+              className="h-[3.2rem] w-[100px] rounded-lg border border-input bg-white px-3 text-base font-normal text-slate-900"
               value={filters.diameterFrom}
               onChange={(event) => setFilters((current) => ({ ...current, diameterFrom: event.target.value }))}
               data-testid="repair-diameter-from"
             />
-          </label>
-
-          <label className="flex items-center gap-2 whitespace-nowrap text-xl font-medium text-gray-600">
-            <span>관경 종료(mm)</span>
+            <span aria-hidden="true">~</span>
             <input
               type="number"
               min="0"
-              className="h-[3.2rem] w-[110px] rounded-lg border border-input bg-white px-3 text-base font-normal text-slate-900"
+              aria-label="최대 관경(mm)"
+              className="h-[3.2rem] w-[100px] rounded-lg border border-input bg-white px-3 text-base font-normal text-slate-900"
               value={filters.diameterTo}
               onChange={(event) => setFilters((current) => ({ ...current, diameterTo: event.target.value }))}
               data-testid="repair-diameter-to"
             />
-          </label>
+          </div>
 
           <div className="ml-auto flex shrink-0 items-center gap-2">
             <Button

apps/sn/docs/작업계획/SFR-011-006-보수이력/001-fe-SFR-011-006-보수이력-작업카드.md

@@ -7,12 +7,12 @@
 ## 2. 구현 범위
 
 - `repairHistoryPopup` WindowPopup 정의·레지스트리·콘텐츠
-- 용도, 관재질, 관경 시작·종료 필터와 7개 요구 열 그리드
+- 용도, 재질, `관경(mm) [최소] ~ [최대]` 필터와 용도·관경을 포함한 9개 열 그리드
 - 조회 결과 전체 관로 청록색 강조
 - 목록은 페이지당 10건으로 표시
 - 행 단일 클릭 시 적색 선택과 부모 지도 범위 이동
 - 팝업 종료·처리구역 변경 시 임시 레이어 정리
-- 현재 조건에서 화면 목록과 동일한 7개 열 XLSX 다운로드
+- 현재 조건에서 화면 목록과 동일한 9개 열 XLSX 다운로드
 - 파일명은 `<처리구역명>_보수이력.xlsx` 형식으로 생성
 
 ## 3. UI 기준

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. 영향 및 롤백