frontend/apps/sn/docs/작업내용/SN-노후하수관로정비사업/001-fe-SN-노후하수관로정비사업-통합구현기록.md

SN-노후하수관로정비사업 FE 통합구현기록

입력 근거

사용자 작업지시 Excel, 공통 통합설계, /oper/oldPp, 조사관리 업로드, apps/cs/banner/register를 확인했다.

2026-08-03 구현

• src/features/obsltPpl에 API, 타입, 목록, 표형 등록·수정 화면을 추가했다.
• app/(with-base-layout)/oper/obsltPplBiz에 목록·등록·동적 수정 경로를 추가했다.
• 목록에서 Excel 전체 항목과 사업구분·시군구코드를 표시하고 직접 구성 Table을 가로 스크롤 영역에 배치했다.
• 목록 액션을 조회, 등록, 업로드, 엑셀다운로드로 구성하고 삭제는 수정 화면으로 이동했다.
• 업로드 성공 시 전체·정밀조사·정비사업 저장 건수를 표시하고 목록을 재조회한다.
• 기존 공통 또는 타 앱 소스는 변경하지 않았다.

BE 공유 계약

기준 API는 /api/v1/obsltPplBiz이며 목록은 Spring Page, 업로드는 FE 파싱 결과 JSON 배열, 다운로드는 XLSX Blob이다.

남은 리스크

로그인·메뉴 권한이 구성된 통합환경 브라우저 검증이 필요하다.

2026-08-03 지역 검색 유지보수

• 목록의 시도·시군 입력을 공통 SelectBox로 교체했다.
• SN 앱 공통 Zustand store의 ctpv, sgg, fetchCtpv, fetchSgg를 사용하고 선택 시 기존 검색 API 계약에 맞는 한글명을 설정한다.
• 선택한 시도의 코드 앞 두 자리를 기준으로 시군구 후보를 제한하고 시도 변경 시 기존 시군구 선택을 초기화한다.

2026-08-04 Excel 업로드 FE 파싱 전환

• apps/wr /matMng/coMat/ruseCaseMng 흐름을 참고하여 .xlsx 읽기와 값 파싱 책임을 FE로 이동했다.
• lib/obslt-ppl-excel.ts에서 두 필수 시트, B6:V7 핵심 헤더, 필수 사업명, 순번·연장 숫자를 검증한다.
• 노후하수관로 정밀조사 및 정비사업 현황_upload.xlsx의 517개 행을 저장 요청 JSON으로 변환한 뒤 /excel/upload에 application/json으로 전송한다.
• 기존 multipart FormData 전송과 postMutiPart 의존을 제거했다.

2026-08-05 사업순서 제거 및 다운로드 위치 호환

• Excel B열 순번은 헤더 위치 검증만 유지하고 저장 JSON의 bizSeq에는 포함하지 않도록 변경했으며, 사업코드 공란은 빈 문자열로 BE에 전달한다.
• FE 모델·목록·등록/수정 폼에서 bizSeq를 제거했다.
• 화면의 확정 조회조건으로 목록 API를 500건씩 반복 조회하여 조건에 해당하는 전체 활성 자료를 수집한다.
• bizSe에 따라 정밀조사, 정비사업 두 시트로 분리하고 업로드와 같은 B6:V7 헤더, B8:V 데이터 위치로 다운로드한다.
• B열 순번은 DB 값이 아니라 각 시트의 출력 순서로 생성하며 스타일·색상 복제는 적용하지 않았다.
• 기존 BE Excel 다운로드 API는 삭제하지 않았다.

2026-08-07 등록·수정 화면 지역 필수 표시

• 지역 입력 행 제목을 시군구 선택에서 시도,시군구 선택으로 변경하고 필수 표시를 추가했다.
• 저장 전 시도 선택 여부를 검증하며, 미선택 시 시도는 필수입니다.를 표시한다.
• 시군구는 선택사항으로 유지하여 시도만 선택한 자료도 저장 요청할 수 있다.

2026-08-12 CS UI 기준 목록·입력 화면 전환

요구사항 추적

• 원본 화면설계서 슬라이드 89의 SFR-011-001, 화면 ID SN_MN010102와 요구사항정의서의 SFR-011-001SFR-011-004를 재확인했다.
• 원본은 지도 기반 노후관로 관리·현황과 점검 대상 그리드·Excel 다운로드를 다루며, Excel 기반 노후 하수관로 정밀조사 및 정비사업 현황 목록과 직접 일치하지 않는다.
• 따라서 이번 변경은 원본 기능 요구사항의 신규 구현이 아니라, 사용자가 지정한 CS UI 기준을 기존 목록 기능에 적용한 설계 보완으로 구분한다.

구현 내용

• 검색 영역을 CS와 동일한 공통 Label, Select, Input, Button 조합과 카드 구조로 변경하고 조회, 초기화 간격을 공통 gap-2로 통일했다.
• 등록·최종확정예산사업·업로드·엑셀다운로드는 검색 영역에서 분리해 목록 카드 헤더 우측 액션으로 배치했다.
• 22개 컬럼 목록을 공통 DataTable 기반 StandardDataTable로 교체하고, 컬럼별 실제 폭·정렬과 서버 페이징을 TanStack Table 상태에 연결했다.
• StandardDataTable은 업무명에 종속되지 않는 공통 컴포넌트로 유지하며 화면별 가로·세로 스크롤 선택, 고정 헤더, 빈 상태, 목록 액션, 스크롤 영역 밖 페이징을 제공한다.
• 이 화면은 서버가 10건씩 페이징하므로 내부 세로 스크롤은 사용하지 않고 가로 스크롤만 적용해 브라우저 세로 스크롤과 중복되지 않게 했다.
• 공통 표가 실제 scrollWidth > clientWidth인지와 운영체제 스크롤바 높이를 측정하여, 가로 스크롤바가 있으면 그 높이만큼 페이징 상단 여백을 줄인다. 가로 스크롤이 없는 표는 CS 기본 24px 여백을 유지한다.
• StandardDataTable 헤더는 컬럼 본문 정렬값과 분리해 항상 가운데 정렬하고, 사업명·비고·수치 등 본문 셀은 기존 컬럼별 좌·중·우 정렬을 유지한다.
• SN 전체 일반 페이지의 flex 항목에 min-width: 0을 적용하여 넓은 표가 페이지 전체 폭을 확장하지 않고 그리드 내부에서만 가로 스크롤되게 했다. 지도 레이아웃에는 적용하지 않았다.
• 기존 등록·수정 이동, 최종확정예산 팝업, Excel 업로드·다운로드, 검색조건·페이지 복귀 계약은 유지했다.
• 목록 카드 제목은 메뉴명 뒤에 목록을 붙이는 규칙에 맞춰 노후 하수관로 정비사업 목록으로 변경했다.
• 등록 및 상세·수정 화면은 공통 Label, Input, Select, Textarea, Button을 그대로 사용하고 기본 정보, 지역 및 일정, 사업량, 담당자 및 의견의 네 구역으로 재구성했다.
• 입력 구역은 화면 폭에 따라 1열·2열·3열로 반응하며, 데스크톱에서는 연관된 짧은 항목을 한 행에 2~3개 배치한다. 사업명·연락처는 두 칸, 부진사유·비고·공단 의견은 세 칸을 사용하여 빈 셀과 불필요한 세로 길이를 줄였다.
• 사업코드·사업명·시도 필수 검증, 지역 연동, 숫자·연도·일자 처리, 등록·수정·삭제 API 계약은 변경하지 않았다.

영향 범위

• 현재 직접 전환한 업무 화면은 /oper/obsltPplBiz 목록과 /oper/obsltPplBiz/register, /oper/obsltPplBiz/register/[id] 등록·상세·수정 화면이다.
• SN 일반 BaseLayout의 폭 수축 규칙은 다른 일반 페이지에도 적용되지만, 콘텐츠를 넓히지 않고 기존 flex overflow를 정상화하는 규칙만 추가했다.
• StandardDataTable은 business_components에 두어 WR·DM·FO 등에서도 재사용할 수 있으며 SN 또는 노후하수관로 업무 분기는 포함하지 않았다. 다른 앱의 기존 화면 코드는 수정하지 않았다.

검증 결과

• 로컬 브라우저에서 실제 정밀조사 128건을 조회하고 첫 페이지 10행, 128부터의 역순 번호를 확인했다.
• 1,265px 문서 폭에서 문서 scrollWidth가 1,265px로 유지되고, 표 스크롤 영역은 clientWidth 995px / scrollWidth 2,800px로 내부 가로 스크롤되는 것을 확인했다.
• 표의 10행은 clientHeight 493px / scrollHeight 493px로 내부 세로 스크롤 없이 자연 높이로 표시된다. 720px 브라우저 높이에서 문서 높이는 993px이므로 페이지 세로 이동은 브라우저 기본 스크롤만 사용함을 확인했다.
• 노후 하수관로 표는 가로 스크롤바 높이 15px을 감지해 페이징 상단 여백을 9px로 보정하고, 마지막 행부터 페이징까지 총 24px을 유지함을 확인했다. 가로 스크롤이 없는 준설 목록은 기존 24px 여백과 총 24px 간격을 그대로 유지했다.
• 페이징이 스크롤 컨테이너 바깥에 있고, 2페이지 이동 시 첫 번호 118, 1페이지·초기화 복귀 시 128로 조회되는 것을 확인했다.
• 사업명 임시 입력 후 초기화하면 입력값이 비워지고 사업구분 정밀조사, 1페이지로 복귀함을 확인했다.
• 첫 행 클릭 시 /oper/obsltPplBiz/register/128로 이동하는 기존 상세·수정 진입을 확인했다.
• 등록 화면을 1,280px 폭에서 확인한 결과 기본 정보 3열·2행, 지역 및 일정 3열·3행, 사업량 3열·1행, 담당자 및 의견 3열·4행으로 배치되며 문서 가로 스크롤은 발생하지 않았다.
• 빈 등록 화면에서 저장을 시도했을 때 API 저장 없이 사업코드는 필수입니다., 사업명은 필수입니다., 시도는 필수입니다.가 각 항목에 표시됨을 확인했다.
• 상세·수정 화면에서 128번 자료의 사업구분, 사업코드, 사업명, 시도·시군구·환경청, 일정, 사업량, 담당자와 의견 값이 기존 데이터와 동일하게 로딩되고 저장, 목록, 삭제 버튼이 유지됨을 확인했다.
• 목록 제목이 노후 하수관로 정비사업 목록으로 표시되고, 공통 표 헤더가 모두 가운데 정렬됨을 브라우저 계산 스타일로 확인했다.

2026-08-12 최종확정예산사업 팝업 UI·순번 통일

설계 구분

• 원본 요구사항정의서와 화면설계서에는 현재 Excel 기반 노후 하수관로 정비사업 및 최종확정예산사업 팝업과 직접 일치하는 화면이 없어 기존 통합설계와 사용자 지시에 따른 설계 보완으로 적용했다.

구현 내용

• 최종확정예산사업 WindowPopup의 구형 SearchDiv, ListDiv, UiTable을 공통 StandardPopupLayout, StandardDataTable, Button, Input, Select 구조로 교체했다.
• 행정구역·사업 분류·년도·사업명 검색, 조회·초기화, 다중 선택·등록, Excel 다운로드와 부모창 완료 메시지 계약은 보존했다.
• 행정구역·사업규모·총사업비·년차 사업비의 다단 헤더를 CS 기본 파란 헤더·흰 글씨·가운데 정렬로 통일했다.
• 표 헤더는 순번으로 표시하고 전체 건수와 서버 페이지를 기준으로 내림차순 번호를 계산한다. 정렬 기능은 추가하지 않았다.
• 백엔드 API, 저장 계약과 DB 구조는 변경하지 않았다.

검증 결과

• 로그인 브라우저에서 /oper/obsltPplBiz의 목록 헤더가 순번이며 첫 페이지가 128부터 내림차순으로 표시되는 것을 확인했다.
• /popup/cfmtnBgt?bizSe=정비사업에서 조회 후 다단 헤더, 내부 가로 스크롤, 첫 페이지 170부터의 내림차순 번호와 2페이지 첫 번호 160을 확인했다.
• 검색·초기화·등록 비활성 상태·Excel 다운로드 버튼과 10건 서버 페이징을 확인했다.
• TypeScript 전체 검사는 이번 팝업 파일의 오류가 없음을 확인했으나 작업 범위 밖 기존 오류로 전체 명령은 실패했다. 개발 서버 보호를 위해 Next 빌드는 수행하지 않았다.

2026-08-12 SN 일반 화면 상단 헤더 고정 회귀 보완

• 넓은 표의 페이지 전체 가로 스크롤을 막기 위해 sn-base-layout 상위 요소에 적용했던 overflow-x-hidden이 공통 Header의 sticky 기준을 변경해, 세로 스크롤 시 헤더가 콘텐츠와 함께 올라가는 회귀를 확인했다.
• 상위 레이아웃의 가로 넘침 처리를 스크롤 컨테이너를 만들지 않는 overflow-x: clip으로 변경했다.
• flex 레이아웃에는 min-width: 0, max-width: 100%만 유지하고, 실제 다열 표의 좌우 이동은 StandardDataTable 내부 가로 스크롤이 계속 담당한다.
• 브라우저에서 준설관리와 노후 하수관로 정비사업 화면을 최하단까지 이동한 뒤 헤더 위치가 top: 0으로 유지되는 것을 확인했다.
• 노후 하수관로 화면의 문서 폭은 clientWidth 1265px, scrollWidth 1265px로 페이지 전체 가로 스크롤이 다시 생기지 않았음을 확인했다.
• 하수관망도와 팝업 레이아웃, API·DB 계약은 변경하지 않았다.

2026-08-12 버튼 색상·문구·순서 통일

• 목록 검색은 조회 파란색, 초기화 흰색 순서로 유지했다.
• 목록 액션은 엑셀다운로드 → 등록 → 최종확정예산사업 → 업로드 순서로 정리하고 실행 동작은 파란색으로 통일했다.
• 등록·상세/수정 화면은 저장 파란색, 취소 흰색, 삭제 빨간색 순서로 변경해 삭제가 항상 마지막에 오도록 했다.
• 최종확정예산사업 팝업은 조회 → 초기화, 목록 액션은 엑셀다운로드 → 등록 순서를 적용했다.
• 기존 Excel 업로드·다운로드, 등록·수정·삭제 기능과 비활성화 조건은 변경하지 않았다.

2026-08-13 최종확정예산사업 팝업 여백·검색 배치 보완

• 원본 화면설계서 슬라이드 8의 SFR-011-001, 요구사항정의서 추적표 8790행의 SFR-011-001SFR-011-004를 다시 확인했다. 원본에는 현재 최종확정예산사업 선택 팝업과 직접 일치하는 화면이 없어 기존 조회·선택·등록 계약을 유지한 설계 보완으로 처리했다.
• 검색조건을 환경청·시도·시군구·년도와 세부사업·내역사업·세부내역·사업명의 4개씩 두 행으로 고정해 창 너비에 따라 임의로 끊기던 배치를 제거했다.
• 팝업에서만 사용하던 25px 소형 버튼을 제거하고 조회·초기화·엑셀다운로드·등록을 CS 공통 32px 버튼 규격으로 통일했다.
• 공통 팝업의 12px 간격과 중복되던 별도 여백을 제거하고, WindowPopup 크기를 1400×720으로 조정했다. 빈 목록은 목록 카드가 남은 세로 공간을 채우도록 해 카드 밖에 과도한 공백이 남지 않게 했다.
• StandardDataTable에 팝업 전용 바깥 margin 제거 옵션을 추가해 이 팝업의 검색 카드와 목록 카드 좌우 기준선을 동일하게 맞췄다. 일반 페이지의 기존 카드 margin은 그대로 보존한다. 빈 목록은 남은 높이를 채우고, 조회 결과가 있으면 표의 자연 높이를 보존해 팝업 본문만 세로 이동하도록 공통 동작을 구분했다.
• API, 조회조건, 다중선택, Excel 다운로드, 등록과 부모창 메시지 계약은 변경하지 않았다.

2026-09-01 운영사업 공통코드 화면 적용

• OBSLTBIZSE, EVDNCSBMSNSTTS, BIZPRGRSSTTS를 기존 CMS 캐시 API로 조회하고 브라우저 세션에서 재사용한다.
• 사업구분 Select는 CMS 코드명을 기존 한글 전송값으로 사용해 정밀조사/정비사업 DB·API 계약을 유지한다.
• 추진현황과 증빙서류 상태는 기존 준공, 발주중, O/X, 공단 등의 자유문자를 보존하면서 CMS 표준값을 datalist 선택 후보로 제공한다.
• 목록은 CMS 코드값 또는 코드명과 정확히 일치하는 값만 코드명으로 표시하고 미등록 기존 값은 그대로 표시한다.
• 영문 lwpoCd 저장 전환과 기존 데이터 이관은 이번 범위에서 수행하지 않았다.
• 백엔드 API, Excel 입출력과 DB는 변경하지 않았다.

2026-09-22 목록 사업코드·추진현황 검색조건 추가

• 사용자 유지보수 요청에 따라 목록 검색조건에 사업코드와 추진현황을 추가했다.
• 검색조건은 사업구분 → 시도 → 시군구 → 사업코드 → 추진현황 → 사업명 순서로 배치했다.
• 사업코드는 자유 입력으로 부분일치 조회하고, 추진현황은 기존 자유문자를 직접 입력하면서 BIZPRGRSSTTS 공통코드 후보를 datalist로 선택할 수 있게 했다.
• 두 조건을 목록 검색 상태에 포함해 조회 URL, 페이지 이동, 정렬, 상세·등록 후 목록 복귀와 초기화에서 동일하게 유지한다.
• Excel 다운로드도 적용된 검색 상태를 재사용하므로 현재 화면과 같은 사업코드·추진현황 조건의 전체 결과를 내려받는다.
• SN 운영 빌드와 별도 TypeScript 검사를 통과했다. 최초 빌드는 Windows 파일 핸들 한도 오류로 중단됐으나 단독 재시도에서 성공했다.

2026-09-22 공단의견 목록·폼·Excel 제거

• 사용자 유지보수 요청에 따라 목록의 공단의견 열과 등록·상세·수정 화면의 공단 의견 입력란을 제거했다.
• FE 저장 요청 타입에서 pbcpOpnnCn을 제거해 등록·수정 API 요청에 공단의견을 포함하지 않는다.
• 업로드 헤더 검증과 행 파싱에서 V열 공단의견을 제거하고 B~U의 20개 업무 열만 저장 요청으로 변환한다.
• 기존 BV 업로드 파일의 V열이 남아 있어도 이를 읽거나 저장하지 않으며, 나머지 BU 열은 같은 위치로 처리한다.
• FE Excel 다운로드의 V열 공단의견, 열 폭, 스타일 범위를 제거하고 B~U 양식으로 생성한다.
• DB 컬럼과 기존 값은 유지하며 화면·API·Excel에서만 제외한다.