32 KiB
32 KiB
SFR-010-010 지반침하정보 통합 구현 기록
1. 문서 목적
SFR-010-010 지반침하정보의 FE 구현 이력, 설계 결정, 남은 리스크를 기능당 1개 문서로 누적 관리한다.- 이번 턴은 구현 전 단계이므로 설계 검토 결과와 승인 필요 항목만 먼저 기록한다.
- 승인 후에는 새 파일을 추가하지 않고 이 문서 내부 헤더로만 구현 라운드를 누적한다.
2. 입력 근거
COMMON_DOCS_ROOT/작업계획/SFR-010-010 지반침하정보/001-de-SFR-010-010-지반침하정보-설계.mdCOMMON_DOCS_ROOT/작업계획/SFR-010-010 지반침하정보/지반침하정보-화면구성시나리오_v1_1.mdFE_APP_DOCS_ROOT/작업계획/SFR-010-010-지반침하정보/001-fe-SFR-010-010-지반침하정보-작업카드.md
3. 공통 계약
- 프론트는
reuse-service를 직접 호출하지 않고sewerage-service만 호출한다. - 지도 포인트 좌표, 반경 내 관로 거리 계산, 좌표보정상태 판단은 백엔드 응답을 기준으로 처리한다.
- 목록 행 클릭 후 상세 패널은 목록행 데이터가 아니라 상세 API 응답으로 다시 맞춘다.
- 원천에 없는 상세 필드는 FE에서
null -> "-"렌더링을 기본안으로 두되 승인 전까지 확정하지 않는다. - 목록 팝업은 기존
노후관로팝업 패턴, 우측 상세는FeatureClickEventPopup패턴 재사용을 우선한다.
4. 라운드별 기록
4.1 2026-06-02 설계 착수
- 작업지시 폴더의 요구사항명세서, 시나리오, HTML, PNG를 읽고 기능 범위를 재해석했다.
- 백엔드 현재 작업트리에서 아래 선반영 코드를 확인했다.
GET /api/v1/sinkholes/geometry- IL datasource
- 주소 기반 지오코딩 서비스
- 프론트 현재 코드에서는
지반침하정보실제 기능 구현은 없고, HTML 샘플 및 레이어 명칭 흔적만 확인됐다. - 이번 기능의 FE 핵심 축을 아래로 정리했다.
- 레이어 체크/해제
- 목록 팝업
- 우측 상세 패널
- 반경 적용 UX
- 관리자 전용 동기화 버튼 노출 제어
- 아직 구현하지 않은 항목
- 실제 코드 수정
- 브라우저 검증
- API 연결
4.2 2026-06-05 좌표 응답 정합화
- 프론트 목록 팝업에
좌표보정상태컬럼을 추가해 지오코딩 성공/실패를 운영 화면에서 바로 볼 수 있게 했다. - 상세 패널에서 좌표가 없어 반경 내 관로를 조회하지 못하는 경우
geocodeErrorMessage를 함께 노출하도록 보강했다. - 같은 시점의 로컬 백엔드 응답을 확인한 결과,
reuse-service지오코딩 응답의 추가 필드를 무시하지 못해Unrecognized field "adresTy"예외가 나고 있었음을 확인했다. - 즉 프론트 좌표 표시 이상은 지도 상태관리 자체보다 백엔드 좌표 응답 실패가 선행 원인이었다.
4.3 2026-06-05 구현 흐름 메모
- 지반침하 원천 데이터에는 사고 정보는 있는데 지도에 바로 표시할 좌표가 없는 경우가 있어서, 프론트는 백엔드가 좌표보정상태까지 붙여 내려주는 구조를 전제로 구현했다.
예시데이터
- 사고번호:
20260024 - 주소:
인천광역시 서구 백석동 74-11 - 발생일자:
20260409 - 복구상태:
복구중 ocrn_txcrd,ocrn_tycrd: 비어 있음
프론트에서 본 처리 흐름
- 목록 API에서 지반침하사고 1건을 받음
- 백엔드가 원천 좌표 또는 주소 API 결과를 기준으로
x,y,coordStatus를 같이 내려줌 - 프론트는
coordStatus가 성공이면 지도 포인트를 그림 - 실패면 목록에서
좌표보정상태 = 실패로 보여주고 상세에서 실패 사유를 보여줌
4.4 2026-06-05 상세 패널 유지보수
- 지반침하 상세를 열었을 때 중심점과 반경 원은 그려지지만 줌이 그대로여서 사용자가 위치를 바로 확인하기 어렵다고 판단했다.
- 그래서 상세 조회 성공 시점과 반경 재적용 시점 모두 반경 원 extent 기준으로
fit하도록 보강했다. 침하발생 반경내 관로정보표는 기존 단순 HTML 테이블에서 공용Table스타일로 바꿔 발생정보 카드와 더 비슷한 시각 톤을 맞췄다.- 관로 ID 행을 클릭하면
GisApp.Module.layer.showSearchResultsFromGeoJSON로tb_ms_swage_ppl의fid를 넘겨 지도 강조를 요청하도록 연결해, 반경 내 관로를 상세 패널에서 바로 따라갈 수 있게 했다.
4.5 2026-06-05 관로 강조와 상세 복귀 유지보수
- 관로 ID 클릭 시 현재 줌레벨은 유지한 채 해당 관로만 지도에 하이라이트하고, 관로 상세정보 창을 함께 열도록 수정했다.
- 관로 상세정보 창의 닫기 버튼을 누르면 선택된 관로 하이라이트를 해제하고, 직전에 보던 지반침하 상세 패널이 다시 보이도록 복귀 흐름을 추가했다.
4.6 2026-06-05 레이어설정 기준 지반침하 트리 재정리
- 초기에는 프론트에서
지반침하정보루트와 연도 노드를 임의로 만들었지만, 실제tb_sn_lyr_stng에는지반침하정보루트만 있고 자식 노드가 없어서 도시침수지도와 같은 토글 구조로 보이지 않았다. - 그래서 프론트는 실제 루트 row를 부모 토글로 사용하고, DB 자식 노드가 없을 때만
현재년도,전체2개를 fallback으로 붙이도록 정리했다. - 연도 노드 클릭 시에는 노드명 하드코딩 대신
filter_sql을 우선 읽어 목록 조회 조건을 만들고,filter_sql이 없을 때만sinkholeYear값을 fallback으로 사용하도록 수정했다.
4.7 2026-06-09 연도/전체 노드 해석 유지보수
tb_sn_lyr_stng에2026년,전체자식 노드를 실제로 넣은 뒤에는 프론트 fallback 노드가 아니라 DB 노드를 주로 타게 됐는데, 기존applySinkholeYearFilters는sinkholeYear커스텀 필드만 읽고 있어 DB 자식 노드 선택을 해석하지 못하고 있었다.- 그 결과 화면에는
2026년,전체가 보여도 초기 레이어 표출과 팝업 동기화에서는 기본 최근 3개월 조건이 남아 있을 수 있는 드리프트가 생겼다. - 이번 유지보수에서 프론트는
sinkholeYear가 없는 경우에도 노드 텍스트2026년,전체를 각각2026,ALL토큰으로 해석하도록 보강했다. - 또한
page.tsx의 레이어 설정 초기 로딩에 지반침하 루트/자식 보정 유틸을 다시 연결해, DB 자식 노드가 있을 때와 없을 때 모두 같은 정리 경로를 거치도록 맞췄다.
4.8 2026-06-09 발생기간 조회 시작일 2016년 확장
- 지반침하발생현황 팝업은 빈 조회조건으로 열릴 때 최근 3개월을 기본값으로 넣고 있었는데, 운영 확인용 장기 이력 조회에서는 시작일을 2016년까지 바로 내릴 수 있어야 한다는 요청이 생겼다.
- 프론트 기본 조회조건은
2016-01-01 ~ 오늘로 바꾸고, 날짜 입력min도2016-01-01로 고정했다. - 이 변경만으로는 서버가
최대 1년검증에서 막히므로, 백엔드 검증 규칙도 같은 기준으로 함께 맞춰야 한다고 정리했다.
4.9 2026-06-09 다운로드 전체 결과 기준 재조회 유지보수
- 기존 다운로드 버튼은 현재 테이블에 렌더된
rows만 엑셀로 내보내고 있어, 사용자가 2페이지 이후 결과를 조회하지 않아도 “전체 조회 결과 다운로드”를 기대하는 UX와 어긋나고 있었다. - 이번 수정으로 다운로드는 현재 조회조건을 그대로 유지한 채
/api/v1/sinkholes를 200건 단위로 다시 호출해 전체 결과를 합친 뒤 엑셀을 생성하도록 바꿨다. - 엑셀
NO컬럼도 현재 페이지 기준이 아니라 전체 결과 기준 1번부터 연속 번호가 매겨지도록 정리했다.
4.10 2026-06-09 다운로드 체감속도 재검토
- 지반침하 다운로드는 기능적으로 전체 결과 기준으로 맞췄지만, 1600건 수준에서도 체감이 길다면 단순 페이지 수보다 백엔드 좌표보정 경로가 병목일 가능성이 높다고 판단했다.
- 프론트 재조회 배치 크기는 2000으로 올려 1600건 정도는 1회 목록 호출로 내려받게 조정했다.
- 이와 별개로 동일 주소의 지오코딩 실패도 30분 동안은 캐시되도록 백엔드 정책을 바꿔, 같은 다운로드를 반복할 때 외부 지오코딩을 매번 다시 치지 않게 정리했다.
4.11 2026-06-09 좌표 실패 건 상세 fallback 표시
- 좌표변환 실패 건을 목록에서 클릭했을 때 상세 API가 generic 500으로 실패하면, 사용자는 사고 상세 자체를 전혀 열 수 없게 되는 문제가 있었다.
- 하지만 목록 행에는 사고번호, 발생일자, 주소, 복구상태, 좌표보정상태, 지오코딩 실패 사유가 이미 있으므로, 이 경우에는 목록 데이터를 우선 상세 패널 fallback 값으로 사용해도 UX가 성립한다고 판단했다.
- 그래서 목록 행 클릭 경로에서는 상세 API 실패 시 row 데이터를
SinkholeDetail형태로 보강해 우측 패널을 열고, 반경 내 관로 조회가 실패하더라도 상세 자체는 계속 보여주도록 방어 로직을 추가했다. - 이후 추가 정리로, 목록 row에 좌표가 없고
coordStatus/geocodeStatus가 이미 실패 상태인 경우에는 상세 API를 아예 호출하지 않고 곧바로 fallback 상세 패널을 여는 쪽으로 단순화했다.
4.12 2026-06-09 연도 노드 지도범례 아이콘 표시
- 지반침하
2026년,전체노드는 체크박스만 보이고 지도 범례 느낌이 약해, 하수처리시설처럼 노드 앞에 작은 아이콘을 두는 쪽이 더 직관적이라고 판단했다. 2026년은 주황 원형,전체는 파랑 원형 SVG 아이콘을public/images/map/layericon/아래에 추가했고, DB 자식 노드와 FE fallback 노드 모두 같은 규칙으로 아이콘을 붙이도록 맞췄다.- 공용 트리 렌더러는 기존에
SN_SINKHOLE*전체를 아이콘 숨김 대상으로 보고 있었기 때문에, 지반침하 루트만 예외로 두고 연도 노드는 아이콘이 보이도록 분기 범위를 조정했다. - 추가 확인 결과 공용 트리의
makeLegendSrc()가gobjTy를 먼저 검사해iconNm만 있는 노드를 바로 탈락시키고 있었고, 이 때문에icon_nm을 넣어도 화면에 변화가 없었다. - 그래서 공용 트리 렌더 순서를
iconNm 우선 -> 없으면 gobjTy 기반 범례 생성으로 바꿔, DBicon_nm과 FE 주입iconNm모두 실제로 보이게 맞췄다.
4.13 2026-06-09 연도 노드 색과 지도 포인트 색상 일치
- 연도 노드 아이콘이 보여도 아이콘 중앙의 흰 점 때문에 지도 포인트와 시각 톤이 달라 보여, SVG를 단색 원형 + 진한 외곽선 형태로 다시 정리했다.
- 지도 포인트도 같은 색 규칙을 쓰도록
createSinkholePointStyle을 연도 기반 variant 구조로 바꿨다. 전체선택 시에는2026년건만 주황, 나머지 연도는 파랑으로 보이고, 선택 상세 포인트와 반경 원도 같은 색 계열을 따르도록 맞췄다.
4.14 2026-06-09 포인트/아이콘 시각 농도 완화
- 실제 화면 확인 피드백 기준으로 지반침하 포인트가 너무 진해서 바탕지도를 가리고 있었고, 연도 노드 아이콘도 가운데가 빈 점처럼 보여 지도 포인트와 다르게 느껴졌다.
- 그래서 연도 아이콘 SVG는 외곽선과 중심 흰 점을 모두 제거한 꽉 찬 단색 점으로 단순화했다.
- 지도 포인트는 주황/파랑 모두 fill alpha와 stroke alpha를 낮추고 반경 원 투명도도 줄여, 기존보다 바탕지도가 더 잘 보이도록 완화했다.
4.15 2026-06-09 포인트 농도 재보정
- 완화 이후 실제 체감이 지나치게 옅어져 포인트 존재감이 약해졌기 때문에, 일반 포인트 fill/stroke alpha와 반지름을 한 단계 다시 올렸다.
- 목표는 “예전 지반침하정보처럼 자연스럽게 보이되 지도 바탕을 과도하게 가리지 않는 중간 농도”로 두었다.
4.17 2026-06-09 포인트 투명도 미세 상향
- 추가 피드백 기준으로는 아직도 포인트가 너무 연하게 느껴졌기 때문에, 일반 포인트 fill/stroke와 반경 원 alpha를 현재 값에서 절반 정도 더 보이는 수준으로 한 번 더 올렸다.
- 선택 포인트는 이미 충분히 강조되고 있어 선택 색은 유지하고, 일반 점과 반경 원의 가시성만 미세 조정했다.
4.18 2026-06-09 목록/다운로드 조회조건 정리
- 추가 요구사항으로 지반침하 목록에
좌표보정상태조회조건을 넣고, 다운로드는좌표보정상태열 자체를 제외한 채 현재 조회조건 전체 결과를 받아야 한다는 기준이 확정됐다. - 프론트는 기본 발생기간을 다시
현재 기준 최근 1년으로 되돌렸고, 팝업 조회영역에좌표보정상태select를 추가했다. - 다운로드는 현재 조회조건을 유지하되
includeCoordStatus=false로 목록 API를 재조회해, 좌표보정상태 컬럼과 좌표해석 비용을 함께 줄이는 방향으로 정리했다.
4.19 2026-06-09 팝업 닫힘 시 기본 최근 1년 복귀
- 기존에는 지반침하 팝업에서 마지막으로 조회한 조건이
appliedSinkholeFilters에 남아, 팝업을 닫아도 지도 레이어가 그 조건을 계속 유지하고 있었다. - 추가 협의 기준으로는 팝업을 닫으면 다시 기본 최근 1년 조건으로 복귀하는 쪽이 더 자연스럽다고 보고, 팝업 close watcher를 붙였다.
- 이제 팝업이 닫히면 지도 지반침하 레이어 조회조건도
buildSinkholeDefaultFilters()기준 최근 1년으로 즉시 되돌아간다.
4.20 2026-06-09 초기 지도 표출 기준을 팝업 조건으로 단일화
- 기존에는
appliedSinkholeFilters와 별도로2026년/전체연도 자식 노드 체크 상태가applySinkholeYearFilters()로 다시 날짜조건을 덮어쓰고 있어, 초기 로드 시 최근 1년 기본조건과 충돌했다. - 그래서 지도 레이어 조회와 팝업 초기 전달에는 연도 노드 덮어쓰기를 제거하고, 팝업 조회조건 자체를 유일한 필터 기준으로 정리했다.
- 결과적으로 초기 로드, 팝업 조회 후 지도 반영, 팝업 닫힘 후 기본 최근 1년 복귀가 같은 필터 흐름으로 맞춰졌다.
4.22 2026-06-09 팝업 활성 중 필터 우선순위 재정리
- 추가 확인 결과 사용자가 원하는 동작은 “평소에는 트리 연도 체크 상태 기준, 팝업이 열려 조회를 수행한 동안만 팝업 조건 우선, 팝업을 닫으면 다시 트리 기준 복귀”였다.
- 그래서 지반침하 레이어 조회에
isSinkholePopupFilterActive상태를 추가하고, 팝업 sync 메시지를 받았을 때만 팝업 필터를 우선 사용하도록 조정했다. - 팝업이 닫히거나 지반침하 레이어 자체를 끄면 popup-active 상태를 해제하고, 기본 최근 1년 필터를 기준으로 다시 트리 연도 조건이 적용되도록 정리했다.
4.23 2026-06-09 목록보기 오픈 즉시 지도 동기화
- 추가 요구사항으로
목록보기버튼을 눌러 팝업이 열리는 순간에도, 팝업이 들고 뜨는 초기 조회조건이 즉시 지도에 반영돼야 한다는 기준을 확인했다. - 그래서
openSinkholePopupWindow()에서 팝업 오픈 직후isSinkholePopupFilterActive=true,appliedSinkholeFilters=effectiveFilters를 바로 반영하고 selection version도 증가시키도록 연결했다. - 이로써 팝업 내부 첫 조회 응답을 기다리지 않아도 지도와 팝업의 초기 조건이 먼저 맞춰진다.
4.24 2026-06-09 트리 상위조건 + 팝업 하위조건 결합
- 추가 정리 결과 최종 UX는
2026년,전체를 상위 큰 조건으로 두고, 팝업 조회조건은 그 범위 안에서만 한 번 더 좁히는 구조가 가장 자연스럽다고 판단했다. - 그래서 popup-active가 아닐 때는
buildSinkholeTreeBaseFilters()에 트리 연도 조건만 적용하고, popup-active일 때만팝업 조회조건 ∩ 트리 연도조건을 계산하도록 로직을 바꿨다. - 이로써
2026년만 체크 시 다른 연도는 나오지 않고,전체체크 시에는 팝업 조건이 전체 범위 안에서만 적용되며, 팝업 종료 후에는 다시 트리 기준으로 복귀한다.
4.25 2026-06-09 팝업 열린 상태에서 레이어 재체크 시 필터 유지
- 추가 확인 결과 팝업이 열린 상태에서 지반침하 레이어를 껐다가 다시 켜면, 레이어 해제 분기에서 popup-active 상태와
appliedSinkholeFilters를 같이 초기화하고 있어 팝업 조건이 사라지고 있었다. - 이건 팝업 close 시점과 레이어 토글 시점을 혼동한 것이므로, 레이어 해제 시에는 popup-active와 팝업 필터를 건드리지 않고 레이어/상세만 닫도록 수정했다.
- 이제 팝업이 열린 상태에서 레이어를 다시 켜면 방금 보던 팝업 조건이 그대로 유지된 채 지도에 재적용된다.
4.26 2026-06-09 기능 테스트 성공 반영
- 최종 사용자 확인 기준으로 현재 대화에서 다뤘던 지반침하 팝업/지도/다운로드 연동 이슈는 모두 기대 동작으로 수렴했다.
- 따라서 본 문서는 이번 라운드 기능 구현이 사용자 기능 테스트 기준 성공 상태임을 기준점으로 남긴다.
4.16 2026-06-09 연도 노드 아이콘 외곽선 재조정
- 연도 노드 아이콘은 단색 점만 두었을 때 경계가 약해 보여, 사용자가 보여준 예시처럼
색 원 + 흰 외곽선형태가 더 읽기 쉽다고 판단했다. - 그래서
2026년주황 아이콘과전체파랑 아이콘 모두 흰 외곽선을 다시 추가해 트리 안에서 더 또렷하게 보이도록 맞췄다.
4.21 2026-06-09 조회옵션/다운로드 마감 정리
좌표보정상태조회조건은 최종적으로전체 / 성공 / 실패만 남기고주소없음옵션은 제거했다.- 다운로드 엑셀은
좌표보정상태열을 제외한 9개 컬럼만 내리도록 유지했고, 헤더 범위도A1:I1로 맞춰 첫 데이터 행이 헤더색을 먹지 않게 수정했다.
4.27 2026-06-10 개발서버 SVG 아이콘 400 유지보수
- 로컬에서는 보였지만 개발서버에서는
SN_SINKHOLE_SPOT_ORANGE.svg,SN_SINKHOLE_SPOT_BLUE.svg요청이 각각400 Bad Request로 떨어지는 현상을 확인했다. - 경로 생성은 기존
Layer_Select_BTN.png와 같은/images/map/layericon/규칙을 타고 있었고, 개발서버에서만 신규svg2건만 실패했으므로 이번 이슈는 트리 로직보다 개발서버의 정적 SVG 처리 차이로 판단했다. layericon폴더의 기존 운영 자산이 대부분png기반인 점도 고려해, 연도 노드 아이콘 자산을png로 추가하고sinkholeTypes.ts상수도.png를 바라보도록 바꿨다.- 이렇게 하면 DB 자식 노드와 FE fallback 노드 모두 기존 정적 아이콘 자산 체계와 같은 형식을 사용하므로, 서버 설정 차이 없이 같은 경로 규칙으로 안정적으로 로드할 수 있다.
4.28 2026-06-11 목록 총 건수 헤더 보강
- 지반침하 목록 팝업은 기존에도
/api/v1/sinkholes응답의total값을 상태로 보관하고 있었지만,UiTable의headName을 비워 둔 상태라 노후관로처럼 상단에 “조회 결과 총 n건” 문구가 노출되지 않았다. - 이번 유지보수에서는
SinkholePopupPage.tsx의 목록 테이블 헤더를지반침하 조회 결과 총 {total.toLocaleString()}건으로 지정하고,isHideCount={true}를 함께 적용해UiTable기본 건수 문구와 중복되지 않도록 정리했다. - 결과적으로 노후관로 팝업과 같은 위치/형식으로 총 건수가 표시되며, 별도 API 변경 없이 기존
total응답을 그대로 재사용한다.
4.29 2026-06-11 시설물 트리 하단 설정영역 분리
- 기존에는
지반침하정보의 반경 설정 패널이 트리 노드 바로 아래 인라인으로 붙어 있었는데, 생활안전지도처럼 “레이어를 사용할 때만 하단 설정영역에 따로 모아 보여주는 구조” 요청이 추가됐다. - 이번 유지보수에서는 패널 디자인과 입력/적용 동작은 그대로 두고,
map/page.tsx에서 인라인 노출 분기를 제거한 뒤Gis의layerSettingView하단 영역으로 이동시켰다. - 따라서
지반침하정보를 체크하지 않으면 설정 패널이 보이지 않고, 연도/전체 노드가 활성화된 동안에만 트리 하단 별도 영역에 나타난다. - 후속 보정으로 하단 영역 자체에
선택 레이어 설정헤더와 선택된 레이어명 표시를 추가하고, 세로 공간이 부족할 때는 내부 스크롤이 생기도록 정리했다. 노후관로 설정과 패널 폭이 달라 보이지 않도록지반침하정보설정 패널 폭도 하단 영역 기준w-full로 통일했다.- 추가 보정으로 별도 상단 타이틀 줄은 제거하고, 대신 시설물 레이어 목록 영역 자체를 얇은 직사각형 테두리로 감싸서 위 레이어 영역과 아래 설정영역이 자연스럽게 구분되도록 정리했다.
- 추가 점검으로
선택 레이어 설정노출 기준을 연도 자식 노드 탐지 대신 실제isSinkholeChecked상태로 바꿔, 지반침하 레이어 체크 시 하단 설정영역 반영이 누락되지 않도록 보정했다. - 공용 트리 접기 버튼이 세로 스크롤바 위를 덮어 보이는 문제를 줄이기 위해, 버튼을 패널 안쪽이 아니라 우측 바깥 경계 쪽으로 이동시켜 핸들처럼 보이도록 조정했다.
- 후속 조정으로 버튼이 아예 보이지 않는 문제를 해결하기 위해, 접기/펼치기 버튼을 패널 밖 가운데에 붙는 단일 토글 핸들 구조로 재배치했다.
- 추가 수정으로 토글 버튼이
overflow-hidden패널 박스에 같이 들어가 잘리던 구조를 분리해, 버튼을 패널 박스 바깥 형제 위치로 옮겨 실제 화면에서 보이도록 보정했다. - 최종 보정으로 토글 버튼 시각 스타일은 분석도구 패널에서 사용 중인
36x20핸들 디자인과 동일하게 맞추고, 위치는 패널 바깥 중앙을 유지하도록 정리했다. - 추가 구조 보정으로 시설물 레이어 직사각형 박스는 화면에 항상 보이는 고정 영역으로 두고, 실제 롤업/스크롤은 그 내부에서만 일어나도록 바꿨다. 토글 핸들도 이제 패널 전체가 아니라 이 직사각형 박스 기준 중앙에 붙는다.
- 후속 위치 보정으로 토글 핸들이 박스 바깥으로 너무 멀리 빠지지 않도록
left-full배치를 제거하고, 레이어 직사각형 박스 오른쪽 경계에 걸치는right음수 오프셋 기준으로 다시 맞췄다. - 후속 가시성 보정으로 토글 핸들 크기를 키우고 파란 계열 대비와 그림자를 강화해, 배경 지도와 겹쳐도 버튼이 바로 보이도록 조정했다.
- 추가 구조 보정으로 생활안전지도처럼
레이어 박스 내부 스크롤과패널 전체 스크롤을 분리했다. 시설물 레이어 박스는 고정 높이와 고정 테두리를 유지하고, 선택 레이어 설정이 많아질 때는 패널 전체 스크롤로 아래 내용을 보도록 정리했다. 침수위험지도(중점관리지역),도시침수지도(정보제공포털)선택 시침수심 범례는 토글 제어가 아니라 선택 레이어 설정 안에서 실제 범례 항목을 그대로 보여주는 정보 카드로 정리했다.- 스크롤바 폭은 줄이되 색상은 브라우저 기본색으로 되돌려, 이전보다 얇지만 과한 커스텀 색은 보이지 않도록 맞췄다.
- 후속 정리로 선택 레이어 설정 안의 침수심 범례 카드는 실제 범례 본문만 남기고, 지도 우측 하단에 별도로 뜨던 기존 범례 박스는 제거했다.
- 추가 구조 보정으로 토글 핸들을 패널 이동 영역과 완전히 분리된 형제로 빼고, 열림 시에는 레이어 박스 옆에, 닫힘 시에는 화면 왼쪽 가장자리에 남도록 바꿔 다시 열기 버튼이 사라지지 않게 정리했다.
4.30 2026-06-24 개발서버 PNG 아이콘 400 재점검
- 개발서버에서
SN_SINKHOLE_SPOT_ORANGE.png,SN_SINKHOLE_SPOT_BLUE.png만400 Bad Request로 실패하고, 없는 파일은404, 기존layericonPNG는200으로 내려오는 차이를 재확인했다. - 코드의
/images/map/layericon/경로 조합은 기존 PNG와 같으므로, 아이콘명을 다른 자산으로 바꾸지 않고 두 PNG의 저장 구조를 비교했다. - 문제 PNG는
sRGB,gAMA,pHYs부가 청크를 포함하고 있었고, 정상 로드되는 단순 RGBA PNG 중WTL_RSRV_PS_ORANGE.png는IHDR,IDAT,IEND만 가지고 있었다. - 이에
SN_SINKHOLE_SPOT_ORANGE.png,SN_SINKHOLE_SPOT_BLUE.png의 파일명과 픽셀은 유지하고, PNG 컨테이너만IHDR + IDAT + IEND구조로 재인코딩해 개발서버 정적 파일 처리 차이를 줄였다.
4.31 2026-06-25 반경 내 관로정보 경과년도 컬럼 및 요약문구 추가
- 요구사항 변경으로 관로
용도컬럼은 이번 범위에서 제외하고, 지반침하 상세 패널의침하발생 반경내 관로정보표에경과년도컬럼만 추가했다. - 표는
NO / 관로 ID / 경과년도 / 거리(m)4개 컬럼으로 구성하고, 기존 제목은 유지하고 제목 아래에 요약문구 한 줄을 추가해건수,평균경과,최장경과값을 파란색 볼드로 표시한다. - 집계값은
nearbyPipes응답의elapsedYears중 숫자로 해석 가능한 값만 대상으로 계산하며, 계산 대상이 없으면 기존 표시 정책대로-를 보여준다. - 개별 행의
경과년도는 백엔드nearbyPipes응답에 추가한elapsedYears를 사용한다.
4.32 2026-06-25 반경 조회 흐름 원복 확인
- 기존 반경 내 관로 조회 기능은 정상 동작하던 기능이므로,
map/page.tsx에 추가했던 좌표/사고번호 재조회 fallback 변경은 제거했다. - FE 변경 범위는
SinkholeDetailPanel.tsx의 표 컬럼 추가와sinkholeTypes.ts의elapsedYears타입 추가로 제한한다.
4.33 2026-06-26 레이어 연도범위 설정 전환 사전 분석
- 이번 요청은 구현 전 분석 단계로 한정하며, 실제 FE/BE 코드는 수정하지 않았다.
- 요구사항은 기존
2026년,전체자식 레이어를 화면에서 제거하고,지반침하정보루트 레이어만 on/off 하도록 단순화하는 것이다. - 현재 하단
선택 레이어 설정의SinkholeLayerSettingPanel에는지반침하반경(m)만 있으므로, 다음 구현에서는 같은 패널에시작년도,종료년도입력과 적용 버튼을 추가한다. - 기본 연도 범위는 현재 연도 기준 최근 1년으로 해석한다. 현재 연도가 2026년이면 화면 입력값은
2025 ~ 2026이고, API 호출값은startYmd=20250101,endYmd=20261231로 변환한다. - 현재 코드에서 정리해야 할 지점은 아래와 같다.
sinkholeTypes.ts:buildSinkholeYearNodes,isSinkholeYearNode,applySinkholeYearFilters, 연도 노드 아이콘 상수의 사용 범위 축소 또는 제거page.tsx:appendSinkholeControlNode의 연도 fallback 추가 제거,applySinkholeYearFilters호출 제거, 팝업 close 시 기본 필터 복귀 기준 재정의SinkholeLayerSettingPanel.tsx: 연도 범위 입력 상태와 검증, 적용 callback 추가DB작업.sql:2026년,전체자식 레이어 추가/보정 DML 제거 또는 기존 행 삭제 DML로 전환
- BE는 이미
startYmd/endYmd목록 조회 파라미터와 최소일 검증을 제공하므로, 이번 요구는 현재 분석 기준으로 FE/DB 기준정보 변경만으로 처리 가능하다. - 팝업 조회조건과 설정패널 연도 범위의 관계는 다음 구현에서 명확히 고정해야 한다. 우선안은 설정패널 연도 범위를 지도 레이어 기본 조건으로 두고, 팝업은 그 조건을 초기값으로 받아 목록 조회를 시작하는 방식이다.
4.34 2026-06-26 레이어 연도범위 설정 전환 구현
sinkholeTypes.ts에서2026년/전체합성 노드와 연도 노드 기반 필터 결합 로직을 제거하고,SinkholeYearRange및 시작/종료년도 기반 필터 변환 유틸을 추가했다.page.tsx는 지반침하정보 트리 노출을 루트 on/off로 단순화하고, 지도 조회/팝업 동기화는 선택 레이어 설정의 연도 범위에서 만든startYmd/endYmd를 사용하도록 변경했다.SinkholeLayerSettingPanel.tsx에 시작년도/종료년도 입력을 추가하고 적용 시 연도 유효성 검증 후 지도 레이어를 다시 조회하도록 연결했다.- 기본 연도 범위는 현재년도 기준 최근 1년이다. 2026년 기준 화면 기본값은
2025 ~ 2026이며 조회 파라미터는20250101 ~ 20261231로 변환된다. - 기존 반경 설정, 상세 패널 반경 내 관로 조회, 목록 팝업 row 선택 흐름은 유지했다.
4.35 2026-06-26 상세 500 fallback 및 설정 패널 UI 보정
- 지도 포인트 선택 시
loadSinkholeDetail에 feature/list 응답 기반 fallback 상세정보를 함께 전달하도록 변경했다. 상세 API가 500을 반환해도 목록 응답에 있는 주소, 발생일자, 좌표, 복구상태 등으로 상세 패널을 계속 열 수 있다. - 지반침하반경 설정은 선택 지점이 없어도 전역 값으로 저장되며, 선택 지점이 있을 때만 반경 내 관로를 즉시 재조회한다.
- 선택 지점 좌표가 있는 경우 반경 내 관로 재조회는
nearbyPipesByPoint를 우선 사용해 사고번호 기반 주변 관로 API 실패 영향을 줄였다. - 선택 레이어 설정 패널의 시작/종료년도 줄은 기존 반경 입력 줄과 같은 버튼 크기와 입력 높이, 간격으로 정렬했다.
4.36 2026-06-26 지반침하 포인트 색상 단일화
- 지반침하 포인트가 발생연도 기준으로 현재년도는 주황색, 그 외 연도는 파란색으로 표시되던 분기 로직을 제거했다.
resolveSinkholePointVariant는 발생일자를 받아도 항상blue를 반환하도록 변경해, 2026년 데이터와 그 외 데이터가 모두 동일한 파란색 원형 포인트로 표시된다.- 선택 지점 포인트와 반경 표시 기본 스타일도 파란색 기준으로 맞췄다.
4.37 2026-06-26 선택 레이어 설정 안내문구 및 범례 높이 미세조정
- 지반침하 반경 적용 alert는 적용된 반경 값을 포함해
지반침하반경은 {값}m로 반영되었습니다.로 표시한다. - 지반침하 시작/종료년도 적용 alert는 적용된 연도 범위를 포함해
시작년도 {시작년도} ~ 종료년도 {종료년도} 반영되었습니다.로 표시한다. - 노후관로 경과년도 적용 alert는 적용된 경과년 값을 포함해
노후관로 경과년도 {값}년으로 반영되었습니다.로 표시한다. - 침수심 범례는 내부 디자인은 유지하고 외곽 세로 여백만 줄여 선택 레이어 설정 영역의 높이를 소폭 낮췄다.
5. 승인 전 보류 사항
- 목록 팝업을
window popup으로 열지/map내부 중앙 모달로 열지 확정 필요 - 최근 동기화 일시를 관리자에게 어디에 보여줄지 확정 필요
- 원천 부재 필드를 FE에서
-로 고정해도 되는지 승인 필요 - 좌표 캐시를 메모리만 쓸지 DB 영속화까지 포함할지 BE 승인 필요
6. 남은 리스크
map/page.tsx는 기존 기능이 많아 무리하게 누적하면 회귀 위험이 크다.- 원천 데이터에 없는 컬럼을 화면은 요구하고 있어, API/FE 표시 정책이 늦게 확정되면 구현이 되돌아갈 수 있다.
- 좌표 없는 사고건과 좌표 실패 사고건은 UI와 QA 시나리오가 달라 예외 흐름이 많다.