frontend/apps/sn/docs/작업내용/SN-CS-UI통일-2차/003-fe-2026-08-12-SN-CS-UI통일-작업내용.md

2026-08-12 SN CS UI 통일 작업내용

1. 작업 목적

• 디지털하수관로 sn 앱의 UI를 통합플랫폼관리 cs 기준으로 통일한다.
• 준설관리를 우선 적용 화면으로 삼되, 하수관망도 지도 자체를 제외한 전체 업무 화면에 재사용할 수 있는 구조로 설계한다.
• wr, dm, fo 등 다른 앱도 사용하는 공통 영역의 영향을 고려하고, 공통 수정은 사용자 소유 범위인 packages/common/business_components로 제한한다.

2. 원본 및 기준 확인

• 화면설계서 화면설계서.pptx와 요구사항정의서 요구사항정의서.xlsx를 확인했다.
• 조사사업은 SFR-010-004~007, 준설관리는 SFR-010-012, 하수관망도 분석은 SFR-011/012 계열을 기준으로 기존 기능을 유지했다.
• 도시침수예방사업 CRUD와 침입수·RDII 업무 화면은 원본에 직접 대응하는 화면 ID가 없어 기존 API·기능을 유지한 UI 통일 설계 제안으로 분류했다.

3. 주요 작업 내용

3.1 공통 UI 규칙 수립

• 검색 액션을 조회 → 초기화 순서로 통일했다.
• 조회·등록·수정·저장·다운로드 계열은 파란색, 취소·닫기·상세보기 계열은 흰색, 삭제는 빨간색으로 정리했다.
• 삭제 버튼은 액션 영역의 마지막에 배치했다.
• 다운로드 문구는 데이터 파일이면 엑셀다운로드, 업로드 템플릿이면 양식다운로드로 구분했다.
• 목록의 NO와 일련번호 표기를 순번으로 통일하고, 전체 건수 기준 내림차순 번호를 사용했다.
• 목록 제목의 (총 N건) 표시는 제거했다.
• 표 헤더는 파란색 배경, 흰색 글자, 가운데 정렬로 통일하고 사용자 정렬 UI는 제거했다.
• 일반 목록은 내부 세로 스크롤을 사용하지 않고 브라우저 스크롤로 제어하며, 열이 많은 표만 가로 스크롤을 사용하도록 했다.

3.2 재사용 컴포넌트 구성

• CS 표 구조를 재사용하기 위한 StandardDataTable을 구성했다.
• 등록·수정·상세 폼의 2~3열 배치를 위한 StandardFormSection, StandardFormField를 구성했다.
• WindowPopup의 타이틀·본문·액션 배치를 통일하는 StandardPopupLayout을 구성했다.
• SN 서버 페이징과 역순 순번을 연결하는 앱 로컬 MapPopupDataTable, ExmnStandardDataTable을 구성했다.
• 컴포넌트명에는 Sn 접두사를 사용하지 않아 다른 앱에서도 재사용할 수 있도록 했다.

3.3 준설관리

• 경과년도별·관경별·지자체별 목록 제목을 준설 목록으로 통일했다.
• 검색 카드, 조회·초기화, 목록 표, 페이징과 액션 버튼을 CS 규격으로 변경했다.
• 등록·수정 화면을 공통 팝업과 표형 폼 구조로 변경했다.
• 준설일자와 자동매핑을 같은 행에 배치하고 관로번호를 관로정보 영역 우측으로 이동했다.
• 사진 기반 수정에서 사진이 없을 때 검증 메시지를 표시하고 직접 등록 방식으로 전환할 수 있도록 기존 흐름을 보완했다.
• 달력을 부모 화면과 같은 날짜 선택 컴포넌트로 통일했다.
• 사진 삭제·위치정보·저장 후 상세 진입 흐름을 보완했다.
• 목록의 중복 세로 스크롤을 제거하고 가로 스크롤과 페이징 사이의 간격을 공통 표 규격으로 맞췄다.

3.4 조사관리·처리분구관리

• 조사 목록, 조사사업 등록·수정, 결과 업로드, 상세현황 팝업을 CS 카드·표·버튼 규격으로 변경했다.
• 처리분구 선택 영역은 기존 체크박스 카드 방식을 유지하면서 제목·검색·빈 상태·간격을 통일했다.
• 사업정보와 사업대상 처리분구 카드 사이에 공통 간격을 적용했다.
• 맨홀·관로 조사 집계표의 전용 녹색/레거시 스타일을 제거하고 파란 중앙 헤더로 통일했다.
• 상세 화면의 불필요한 맨홀조사 종합집계표, 관로조사 종합집계표 중복 타이틀을 제거했다.
• 조사사업 등록, 결과등록, 조사상세, 관로보고서 팝업을 공통 팝업 구조로 변경했다.

3.5 노후 하수관로·도시침수 예방사업

• 노후 하수관로 정비사업 목록·등록·수정과 최종확정예산사업 팝업을 공통 검색·표·폼 구조로 변경했다.
• 도시침수예방사업의 신규 CRUD 경로와 기존 파일형 호환 경로를 모두 통일했다.
• Excel 다중 탭 상세는 업무상 가변 열을 유지하면서 공통 표, 10건 페이징, 가로 스크롤을 적용했다.
• 등록·수정 폼은 기본정보·연도결산·단계별 정보를 2~3열로 배치했다.

3.6 침입수·RDII 분석과 지도 WindowPopup

• 침입수·RDII 분석 입력, 결과 목록, 지도 결과, 차트 팝업에 공통 카드·폼·표 구조를 적용했다.
• 관망도 정보검색, 관로분석, 노후관로, 지반침하, 침수위험지도, 도시침수지도, 보수이력, GIS 관리, 통수위험 등 지도 팝업을 통일했다.
• mapSearch는 기본정보·유지관리·보고서 3개 탭의 기능과 지도 연계 postMessage를 유지했다.
• 관로분석의 연도·재질 병합표와 조사 결함 다단 헤더처럼 CS에 동일 구조가 없는 표는 업무 구조를 유지한 커스텀 표로 처리했다.

3.7 사용자 메시지

• 네이티브 window.alert, window.confirm을 CS 방식의 useAlertStore, useConfirm으로 변경했다.
• 성공 후 이동·팝업 닫기처럼 확인 이후 수행해야 하는 동작은 Alert callback으로 연결했다.
• 화면 내 지속형 오류·검증 메시지는 인라인 상태로 유지했다.

4. 주요 수정 범위

• apps/sn/app/(with-base-layout)/oper/**
• apps/sn/app/(with-base-layout)/ii/**
• apps/sn/app/(map-layout)/map/**
• apps/sn/src/features/exmn/**
• apps/sn/src/features/ctyFldngPrvtnBiz/**
• apps/sn/src/features/obsltPpl/**
• apps/sn/src/features/windowPopup/**
• packages/common/business_components/src/ui/standard_*

packages/common/components와 다른 회사 앱은 수정하지 않았다.

5. 검증

• 대상 화면의 목록·등록·수정·팝업을 로컬 브라우저에서 확인했다.
• 버튼 순서·색상, 표 헤더, 페이징, 가로·세로 스크롤, 사용자 메시지와 팝업 부모창 연계를 점검했다.
• TypeScript --noEmit --ignoreDeprecations 5.0 검사를 수행했다.
• 대상 파일 Prettier와 git diff --check를 수행했다.
• 사용자 개발 서버를 보호하기 위해 Next production build는 실행하지 않았다.

6. 영향 범위

• API endpoint, 요청·응답 구조, DB와 저장 계약은 변경하지 않았다.
• 공통 Standard* 컴포넌트의 현재 실제 소비자는 SN이며, 다른 앱 화면이 자동으로 변경되지는 않는다.
• 지도 자체의 레이어·이동·선택 기능은 유지하고 지도에서 여는 WindowPopup UI만 변경했다.

7. 롤백 방법

• 각 업무 화면의 CS UI 전환 변경을 되돌린다.
• 앱 로컬 MapPopupDataTable, ExmnStandardDataTable과 business_components의 Standard* 추가·export를 함께 되돌린다.
• 사용자 메시지 전환 시 기존 alert/confirm 이후 실행되던 callback 흐름도 함께 복원한다.

8. 남은 리스크

• 저장·삭제·파일 업로드·분석 실행은 실제 데이터를 변경하므로 UI 검증 단계에서는 실행하지 않았다.
• 원본에 직접 대응 화면이 없는 도시침수예방사업 CRUD와 침입수·RDII 업무 화면은 설계 제안 상태다.
• 지도 팝업의 실제 데이터 유무에 따라 빈 상태와 가로 스크롤 폭을 추가 확인할 필요가 있었다.