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

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

1. 작업 목적

• 전날 적용한 CS UI 통일 결과를 디지털하수관로 전체 화면에서 실제로 검증한다.
• 단순 URL 렌더링이 아니라 본창 조회, 탭 전환, 행 선택, WindowPopup 생성과 실데이터 상세 흐름을 확인한다.
• 검증 중 발견한 버튼·입력 높이, 로딩 중복, 팝업 취소, 헤더, 스크롤과 SSR 오류를 보완한다.

2. 원본 및 화면 인벤토리 확인

• 화면설계서 전체 58장과 요구사항정의서 3. (기능)요구사항정의 및 추적표 73~100행을 대조했다.
• Next page.tsx 라우트는 27개로 확인했다.
• 실제 업무 본창은 17개, WindowPopup 정의·레지스트리는 각각 33개이며 누락은 0개다.
• WindowPopup 33개 중 실제 기능 팝업은 31개, 안내용 placeholder는 floodPredictionMapPopup, gisEditPopup 2개다.
• 현재 운영 대상 논리 화면은 업무 본창 17개와 기능 팝업 31개를 합한 48개다.

3. 실제 브라우저 검증

3.1 본창 17개

• /map
• /ii/irsetting, /ii/rdii, /ii/result, /ii/rdiiResult
• /oper/ctyFldngPrvtnBiz 목록·등록·수정
• /oper/dredging
• /oper/exmn/register, /oper/exmn/status
• /oper/floodPre
• /oper/obsltPplBiz 목록·등록·수정
• /oper/oldPp
• /oper/trtdst

각 화면에서 최초 문서 요청 HTTP 200, 애플리케이션 오류 문구 없음, 문서 가로 넘침 없음, 로딩 종료 후 잔존 스피너 없음으로 확인했다.

3.2 WindowPopup 33개

• 팝업 33개를 동일한 로그인 세션에서 실제로 열었다.
• 실데이터가 있는 팝업은 목록과 상세 데이터를 확인했다.
• 데이터가 없는 팝업은 로더 종료 후 공통 빈 상태를 확인했다.
• 파일·시설 식별자가 필요한 팝업은 필수 파라미터 안내를 확인했다.
• 모든 팝업에 마지막 액션으로 32px 흰색 취소가 존재함을 확인했다.
• 팝업 문서 전체의 불필요한 가로 넘침은 없고, 열이 많은 표 내부에서만 가로 스크롤이 발생함을 확인했다.

3.3 관로조사 상세현황

• 조사관리 본창에서 실제 조사사업과 처리분구를 선택해 상세현황을 확인했다.
• 덕풍처리분구의 관로 3건과 결함 집계가 조회되는 상태를 확인했다.
• 관로, 본단위구간, 조회, 초기화, 엑셀다운로드, 취소 버튼 높이를 모두 32px로 통일했다.
• 상세 헤더 내부에 있던 별도 로딩 애니메이션과 조회하고 있습니다 문구를 제거하고 전체 오버레이 하나만 사용하도록 했다.
• 조사 목록과 단일 상세 집계표 헤더는 56px 규격으로 통일했다.
• 결함표는 4단 복합 헤더이므로 전체 높이는 더 크지만 헤더 셀의 파란 배경·흰색 글자·가운데 정렬·패딩 토큰은 동일하게 적용했다.

4. 검증 중 보완한 내용

4.1 버튼과 입력 높이

• 지도 상단 공통 검색바의 25px 조회 버튼을 32px로 변경했다.
• 침입수·RDII 화면의 상단 액션·조회·파일 선택 버튼을 32px로 통일했다.
• 관로분석, 노후관로, 지반침하, 침수지도, 보수이력, 침수이력 등 분석 팝업의 주요 액션을 32px로 통일했다.
• 공통 SelectBox와 지도 팝업에 남아 있던 35px 선택박스를 32px로 통일했다.
• 페이지 번호, 표 셀 링크, 지도 확대·축소처럼 문맥상 소형이어야 하는 컨트롤은 기존 소형 규격을 유지했다.

4.2 로딩 구조

• 입력 화면은 전체 화면 LoadingOverlay 하나만 사용하도록 했다.
• 목록 화면은 공통 표 로더 또는 전체 오버레이 중 하나만 사용하도록 정리했다.
• 침입수·RDII 결과 목록의 최초 중복 조회 effect를 제거했다.
• 정보검색, 조사 상세, 통수위험, 분석 결과 팝업의 중복 로딩 문구와 표 내부 스피너를 제거했다.

4.3 정보검색·분석도구 팝업

• mapSearch를 가용 화면 전체 크기로 열도록 하고 compact underline 탭을 적용했다.
• 기본정보·유지관리·보고서 탭의 조회·초기화·엑셀다운로드·지도에서 보기 버튼을 통일했다.
• 관로분석, 관로현황, 시도별 노후관로, GIS 관리, 통수위험, 침입수·RDII 결과 팝업을 재점검했다.
• 통수위험 전용 표를 MapPopupDataTable로 변경해 공통 빈 상태·페이징·순번·가로 스크롤 규칙을 적용했다.

4.4 WindowPopup 취소와 GIS 편집세션

• StandardPopupLayout에 기본 흰색 취소(window.close) 액션을 추가했다.
• 자체 저장·수정 보호 로직이 있는 팝업은 기본 취소를 끄고 기존 핸들러를 유지했다.
• 정의된 33개 팝업 모두 공통 취소 또는 자체 취소 중 하나를 가지도록 점검했다.
• GIS 편집세션 상단 패널을 레이어·현재 모드·변경 건수·되돌리기 액션 중심으로 재구성했다.
• 지도 하단 편집툴바를 편집도구·스냅핑·저장 → 취소 그룹으로 정리했다.

4.5 준설관리

• 목록의 상세보기 기능을 제거하고 수정 기능만 유지했다.
• 최종 액션은 엑셀다운로드 → 등록 → 수정 → 삭제이며 삭제는 빨간색 마지막 버튼이다.
• 등록·수정 팝업의 32px 저장·취소, 사진·지도·직접등록 전환 흐름을 재확인했다.

4.6 최초 요청 SSR 500 오류

• 전체 본창·팝업의 최초 SSR 요청에서 dynamic usage of require is not supported 오류가 발생하는 문제를 확인했다.
• 원인은 business_components Excel export 모듈이 @xlsx/xlsx-populate를 서버에서 즉시 평가하는 구조였다.
• Excel 스타일 모듈을 사용자 다운로드 시점에 동적으로 로딩하도록 변경했다.
• 변경 후 침입수·RDII 본창과 WindowPopup 33개의 최초 문서 요청이 HTTP 200으로 응답함을 확인했다.

5. 공통 컴포넌트 사용 구분

5.1 CS/공통 컴포넌트를 그대로 사용

• Button, Input, Select, 날짜·월 선택 컴포넌트
• Table, Dialog, AlertDialog, ConfirmDialog
• card, card-border, card-header
• StandardDataTable, StandardFormSection, StandardFormField, StandardPopupLayout

5.2 업무 특성상 커스텀 유지

• 관로조사 결함 4단 복합 헤더
• 관로분석 연도·재질 rowSpan 표
• 도시침수·노후관로 Excel 가변 다중 탭
• 준설 사진·EXIF·지도 위치 선택
• GIS GeoPackage 업로드·미리보기와 지도 postMessage
• 침입수·RDII 분석 차트

6. 수정 범위

• apps/sn/**
• packages/common/business_components/**

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

7. 테스트 및 검증

• 브라우저에서 업무 본창 17개와 WindowPopup 33개를 확인했다.
• 실제 조사사업 → 처리분구 → 관로조사 상세현황 흐름을 확인했다.
• node apps/sn/scripts/audit-screen-inventory.mjs 결과 라우트 27개, 팝업 정의 33개, 레지스트리 33개, 누락 0개를 확인했다.
• tsc --noEmit --incremental false --ignoreDeprecations 5.0 전체 검사를 통과했다.
• 대상 파일 Prettier 검사를 통과했다.
• git diff --check -- apps/sn packages/common/business_components를 통과했다.
• 사용자 개발 서버를 보호하기 위해 Next production build는 실행하지 않았다.

8. 영향 범위

• API, DB, 요청·응답 구조와 저장 로직에는 영향이 없다.
• business_components의 검색바·SelectBox 규격 변경은 해당 컴포넌트의 다른 소비 화면에 영향을 줄 수 있으므로 32px 공통 규격을 기준으로 적용했다.
• Excel 모듈은 사용자 다운로드 시점에만 로딩되며 기존 다운로드 파일 생성 흐름은 유지한다.

9. 롤백 방법

• SN 각 화면의 32px Button·Select 및 로딩 구조 변경을 되돌린다.
• StandardPopupLayout 기본 취소와 개별 팝업의 중복 방지 속성을 함께 되돌린다.
• business_components의 검색바, SelectBox, Excel 동적 로딩 변경을 되돌린다.
• 화면 인벤토리 스크립트와 일자별 검증 문서를 삭제한다.

10. 남은 리스크

• floodPredictionMapPopup은 원본 요구사항이 있으나 현재 안내용 placeholder다.
• gisEditPopup 직접 URL은 placeholder이며 실제 GIS 편집은 지도 본창의 인라인 편집세션으로 동작한다.
• 저장·삭제·업로드·분석 실행은 실제 데이터 변경을 피하기 위해 실행하지 않았다.
• Next 개발 모드에서 Radix 자동 ID 관련 hydration 경고가 간헐적으로 발생하지만 화면 표시와 기능에는 영향이 없었다. Production build 검증은 사용자 개발 서버 보호 때문에 수행하지 않았다.