frontend/apps/sn/docs/작업내용/SN-CS-UI통일-2차/001-fe-SN-CS-UI통일-2차-구현기록.md

SN CS UI 통일 2차 구현 기록

1. 작업 목적

• CS의 카드, 검색, 버튼, 폼, 목록, 페이징, 팝업 UI를 SN의 도시침수예방사업, 침입수 분석, RDII 분석과 하수관망도 WindowPopup에 적용한다.
• 하수관망도 지도 자체는 변경하지 않고 지도에서 여는 WindowPopup만 통일한다.
• 기존 API, 파일 업로드, 분석 실행, 부모 지도 메시지와 지도 하이라이트 흐름은 유지한다.

2. 원본 요구사항 확인

• 원본 화면설계서.pptx와 요구사항정의서.xlsx를 직접 대조했다.
• 하수관망도 WindowPopup은 화면설계서 717쪽, 2025쪽과 SFR-010/011/012 계열의 지도 조회 흐름을 유지했다.
• 도시침수예방사업 업무 CRUD와 침입수·RDII 업무 화면은 원본에 직접 대응하는 화면 ID 및 요구사항 ID가 없어, 기존 기능 계약을 보존한 UI 통일 설계 제안으로 적용했다.
• 도시침수예방사업은 승인된 기존 작업계획의 /oper/ctyFldngPrvtnBiz와 기존 호환 경로 /oper/floodPre를 함께 유지했다.

3. 공통 적용 규칙

• 검색 버튼은 조회 파란색, 초기화 흰색 순서로 통일했다.
• 엑셀 파일 액션은 엑셀다운로드, 업로드 양식은 양식다운로드로 통일했다.
• 삭제 버튼은 빨간색이며 액션의 마지막에 배치했다.
• 목록의 NO는 순번으로 바꾸고 전체 건수에서 현재 페이지 위치를 차감해 내림차순으로 표시한다.
• 목록 타이틀 옆 총 건수 표시는 제거했다.
• 헤더는 항상 가운데 정렬하고 데이터 셀은 내용 성격에 따라 정렬한다.
• 사용자 헤더 정렬 기능과 관련 정렬 상태·이벤트를 제거하고 서버 기본 최신순만 유지한다.
• 일반 페이지 크기의 목록은 내부 세로 스크롤을 만들지 않고 창 스크롤을 사용한다. 열이 많은 표만 내부 가로 스크롤을 사용한다.
• 로딩은 공통 LoadingOverlay, 사용자 메시지는 CS와 같은 AlertDialog와 ConfirmDialog 흐름을 유지한다.

4. CS 컴포넌트 그대로 사용한 범위

• BaseLayout, Header, LNB, Footer, PageTitle
• Button, Input, Label, Select, 날짜/월 선택 컴포넌트
• DataTable, Table, Dialog, LoadingWithAnimation
• AlertDialog, ConfirmDialog와 useAlertStore, useConfirm 메시지 흐름
• 공통 카드 클래스 card, card-border, card-header

5. 커스텀 유지 범위

• CS 배치 규칙을 재사용 가능하게 묶은 중립 래퍼 StandardDataTable, StandardFormSection, StandardFormField, StandardPopupLayout
• SN의 서버 페이징·역순 순번 계약을 공통 표에 연결하는 앱 로컬 MapPopupDataTable, ExmnStandardDataTable
• 도시침수예방사업의 다단 Excel 헤더와 시설 가변 행
• 관로분석 연도·재질 병합표의 rowSpan
• 침입수·RDII 결과 차트와 결과 전용 모드
• 지도 WindowPopup의 부모창 postMessage, 관로 선택, 지도 이동과 하이라이트
• 준설 사진 업로드·EXIF 위치·지도 선택과 GIS GeoPackage 업로드/미리보기처럼 CS에 동일 기능이 없는 업무 UI

6. 대상 화면

• 도시침수예방사업 목록, 등록·상세·수정, 업로드와 Excel 상세 팝업
• 침입수 분석 입력·결과 목록·지도 결과 팝업·차트 팝업
• RDII 분석 입력·결과 목록·지도 결과 팝업·차트 팝업
• 노후관로, 시도별 노후관로, 침수이력, 지반침하, 침수위험지도, 도시침수지도, 관로분석, 보수이력, 통수위험, GIS 관리, 관망도 검색, 보고서, 우수토실, GIS 편집 세션 등 하수관망도 WindowPopup

7. 검증

• 대상 파일 Prettier 검사를 통과했다.
• git diff --check를 통과했다.
• pnpm exec tsc --noEmit --incremental false --pretty false --ignoreDeprecations 5.0을 통과했다.
• 실행 중인 사용자 개발 서버를 보호하기 위해 Next build는 실행하지 않았다.
• http://localhost:3002에서 하수관망도, 도시침수예방사업 목록·등록, 노후 하수관로 목록, 조사·준설·처리분구, 침입수·RDII 분석을 직접 열어 확인했다.
• 관망도 검색의 기본·유지관리·보고서 탭, 관로분석, GIS 관리, 노후관로, 지반침하, 침입수 결과와 준설·조사 등록 WindowPopup을 직접 열어 버튼·헤더·스크롤·로딩을 확인했다.
• 긴 도시침수예방사업 등록 화면에서 scrollY=1300 상태에도 공통 헤더가 sticky, top=0으로 유지됨을 확인했다.
• 일반 목록의 내부 세로 오버플로가 없고, 팝업은 공통 팝업 본문 스크롤만 사용하며, 브라우저 콘솔 오류가 없음을 확인했다.

8. 영향 및 롤백

• 변경은 apps/sn 화면과 packages/common/business_components의 중립 신규 컴포넌트·클라이언트 경계 보완에 한정한다.
• 현재 StandardDataTable, StandardForm*, StandardPopupLayout의 실제 소비자는 SN뿐이며 WR, DM, FO 화면은 자동 변경되지 않는다.
• 기존 훅 기반 비즈니스 컴포넌트의 use client 선언은 Next 클라이언트 경계를 명시하는 변경이며 시각 규격이나 공개 props를 바꾸지 않는다.
• 롤백 시 SN 업무·지도 팝업 UI, 앱 로컬 어댑터와 중립 Standard* 신규 컴포넌트 및 export/dependency 변경을 함께 되돌린다.

9. 남은 리스크

• 원본에 직접 대응 화면이 없는 도시침수 업무 CRUD와 침입수·RDII 업무화면은 현행 코드와 API 계약을 기준으로 한 설계 제안이다.
• 저장·삭제·파일 업로드, 실제 분석 실행과 실데이터 행 선택 후 지도 이동·하이라이트는 데이터 변경을 피하기 위해 이번 전수 UI 회귀검증에서는 실행하지 않았다.

10. 2026-08-13 지도 상단 검색바 정렬 보완

• 지도 상단의 선택박스는 높이 35px, 조회 버튼은 높이 25px인데 버튼에만 상단 여백이 적용되어 두 요소의 중심선이 5px 어긋난 상태를 브라우저에서 확인했다.
• ProcSearchBar와 SearchBar의 검색 행 및 버튼 영역에 세로 중앙 정렬을 적용하고 버튼의 임의 상단 여백을 제거했다. 버튼 크기, 색상, 이벤트와 선택박스 동작은 변경하지 않았다.
• 공통 SearchBar는 FO와 WR 지도에서 사용되고, ProcSearchBar는 SN 하수관망도에서 사용된다. DM과 WR 일부 화면의 앱 로컬 검색바는 이번 변경 대상이 아니다.
• 수정 후 SN 하수관망도에서 선택박스 3개와 조회 버튼의 중심선이 모두 103px로 일치함을 확인했다.
• SN 전체 TypeScript 검사와 대상 파일 git diff --check를 통과했다.

11. 2026-08-13 분석도구 팝업·버튼·로딩 재점검

• 침입수·RDII 입력 화면의 상단 액션, 조회, 파일 선택 버튼을 CS 기본 높이 32px로 통일했다. 버튼 순서는 양식다운로드 → 분석 실행 → 결과보기, 조회 → 초기화를 유지했다.
• 침입수·RDII 결과 목록에서 최초 조회가 두 번 실행되던 중복 effect를 제거했다. 입력 화면은 전체 화면 로더 하나, 결과 목록은 표 로더 하나만 사용한다.
• 관망도 정보검색은 compact underline 탭, 탭별 검색 카드와 기본 높이 버튼을 적용했다. 중첩 카드와 중복 로더를 제거하고 필요한 가로 스크롤만 유지했다.
• mapSearch WindowPopup은 maximize: true로 설정하여 screen.availWidth와 screen.availHeight 기준의 가용 화면 전체 크기로 연다.
• 관로분석·관로현황, 시도별 노후관로, GIS 관리, 통수위험, 침입수·RDII 분석결과 팝업의 검색 필드·버튼·카드·탭·표 헤더를 다시 점검했다. 통수위험은 공통 underline 탭으로 전환했고, 관로분석의 연도·재질 병합표는 업무상 rowSpan을 유지하면서 CS 카드와 파란 중앙 헤더를 적용했다.
• 분석도구 메뉴 9개 항목을 확인했다. 정보검색, 관로분석, 시도별 노후관로, GIS 관리, 통수위험, 침입수·RDII 결과는 실제 팝업이며, GIS 편집은 지도 내부 편집 토글이다. 침수예측현황은 기존 placeholder로서 요구 기능을 임의 구현하지 않았다.
• 전역 로딩 사용처를 정적 감사하고 전체 화면 LoadingOverlay와 StandardDataTable 로딩을 동시에 쓰던 7개 목록에서 표 로딩을 제거했다. 이후 검사에서 동일 파일 내 전체 화면 로더와 표 로더 중복은 0건이다.
• packages/common에서 이번 UI 통일 변경이 있는 범위는 사용자 소유의 packages/common/business_components뿐이며, 다른 공용 패키지는 수정하지 않았다.
• 원본 추적 근거는 화면설계서 슬라이드 817, 1923과 요구사항정의서 sheet3 87~95행이다. 정보검색과 침입수·RDII 업무 화면은 직접 대응 화면 ID가 없어 기존 기능 계약을 보존한 UI 설계 제안으로 분류한다.
• 침입수·RDII 네 화면은 브라우저에서 버튼 높이와 콘솔 오류 0건을 확인했다. 목록 로딩은 지연 응답을 주입해 전체 화면 로더 1개·표 로더 0개를 확인했다. 정보검색은 3개 탭 전환과 조회·초기화·엑셀다운로드·지도에서 보기 버튼 32px를 확인했고, 관로분석·통수위험은 파란 중앙 헤더, 순번, 32px 버튼, 내부 세로스크롤 0건을 확인했다. 분석도구의 8개 WindowPopup 경로는 모두 HTTP 200이며 런타임 오류가 없음을 확인했다. 사용자 개발 서버가 일시 중단된 동안에는 임의 재기동하지 않았으며 자동 복구된 뒤 최종 브라우저 회귀검증을 완료했다.

12. 2026-08-13 조사 상세·분석 차트·WindowPopup 취소·GIS 편집 재점검

• 조사 목록 행 선택 시 상세 카드 헤더 안에 직접 렌더되던 절대배치 스피너를 제거하고 공통 전체 화면 LoadingOverlay 하나만 사용하도록 변경했다. 런타임 소스의 직접 LoadingWithAnimation 사용처는 안전한 공통 로더 래퍼 한 곳만 남겼다.
• 조사 목록과 상세 집계표 헤더 높이를 공통 상수 5.6rem으로 묶었다. 브라우저에서 목록과 상세의 첫 헤더 높이가 모두 56px임을 실측했다.
• 침입수·RDII 차트 팝업을 StandardPopupLayout, StandardFormSection, StandardFormField 기반의 2열 조건·결과 요약·그래프 카드 구조로 통일했다. 두 화면 모두 하단 액션은 조회 → 초기화 → 취소이고 버튼 높이는 32px이다.
• WindowPopup 레지스트리 33개 키를 감사했다. 준설 상세 기능 제거 후 자체 저장·수정 보호 로직을 가진 6개 키는 기존 취소를 유지하고, 나머지 27개 키는 공통 팝업 레이아웃이 마지막 액션으로 흰색 취소(window.close)를 제공한다.
• GIS 편집세션은 레이어·도구·변경 건수 상태, 변경 항목 선택 강조, 선택 취소/최근 취소/전체 초기화를 그룹화했다. 지도 하단 편집툴바는 편집도구, 스냅핑, 저장 → 취소 영역으로 나눠 높이를 37px 수준으로 줄였다.
• 처리구역 분석 표 셀 안의 직접 스피너도 제거해 카드 단일 로딩 상태로 통일했다.
• 팝업 레지스트리의 정적 import가 브라우저 전용 엑셀 모듈을 SSR에서 평가해 모든 /popup/* 경로를 막던 결합 문제를 발견했다. 팝업 렌더러를 클라이언트 경계로 이동하고 노후관로·도시침수 Excel 상세를 동적 import하여 팝업 간 의존성 전파를 차단했다.
• 브라우저에서 조사 목록·상세 헤더 56px/56px, 침입수·RDII 차트 팝업의 조회/초기화/취소 32px, 정보검색 팝업 상단 취소, GIS 편집세션과 하단 저장 → 취소 그룹을 확인했다. 팝업 경로의 Turbopack 런타임 오류는 클라이언트 경계 보완 후 재현되지 않았다.
• SN 전체 TypeScript 검사는 --ignoreDeprecations 5.0 조건에서 통과했고 git diff --check도 통과했다. 원본 근거는 조사 SFR-010-004007 및 화면설계서 슬라이드 4749, GIS 편집 SFR-012-003~004 및 화면설계서 슬라이드 32이다. 침입수·RDII 차트는 원본 직접 화면 ID가 없어 UI 설계 제안으로 유지한다.

13. 2026-08-13 통수위험 분석결과 팝업 표준화

• 통수위험 팝업에 남아 있던 전용 HTML 표를 앱 로컬 MapPopupDataTable로 교체해 다른 지도 분석 팝업과 동일한 CS 카드·표·페이징 구조를 적용했다.
• 전용 표의 헤더와 빈 행 높이가 각각 28.5px로 눌리고 바로 아래에 가로 스크롤바가 붙던 문제를 제거했다. 빈 결과는 공통 240px 중앙 안내 영역으로 표시하며 데이터가 있을 때만 표와 필요한 가로 스크롤을 렌더한다.
• 현재 위험과 과거 이력 탭별 열 구성, 전체 건수 기준 내림차순 순번, 수치 소수점, 위험 배지, 행 선택 후 부모 지도 강조, API와 postMessage 계약은 유지했다.
• MapPopupDataTable에는 선택 행 ID를 선택적으로 전달하는 앱 로컬 속성을 추가했다. 기존 소비 화면은 속성을 전달하지 않으므로 동작과 스타일에 영향이 없다.
• 팝업 제목을 통수위험 분석결과 목록으로 정리하고 공통 흰색 취소 버튼, 조회 → 초기화, 32px 검색 컨트롤, underline 탭과 전체 화면 로더 하나를 유지했다.
• 원본 근거는 화면설계서 슬라이드 20~23의 SN_MN010202~010204, SFR-011-007~008과 요구사항정의서 sheet3 93행 SFR-011-007, PR-SN-026이다. 현재·과거 목록 팝업 자체의 정확한 원본 화면은 없어 목록 배치는 기존 기능을 보존한 UI 설계 제안으로 분류한다.
• 브라우저에서 현재 위험·과거 이력 탭 전환, 검색조건 라벨 변경, 공통 취소, 빈 결과 높이 240px, 내부 세로 스크롤 없음과 전체 화면 로더 단일 사용을 확인했다. SN 전체 TypeScript 검사와 대상 파일 git diff --check를 통과했다.