eomsangdonandClaude Opus 5
eb30b774f8
- `docs/` 를 .gitignore 에서 빼 git 추적 대상으로 전환 (위키·완료 이력·검증 기록) - `docs/raw/PLAN.md` · `docs/raw/OWNERS.md` 를 저장소 최상위로 이동 후 .gitignore 에 등록 — 창끼리 공유하되 저장소에는 안 올리는 장부 - 살아 있는 경로 참조 7개 파일 정정 (아카이브 107건은 그때 사실이라 그대로 둠) - graphify 날짜별 산출물(`docs/wiki/graphify-out/20*/`) 제외 — `graphify update` 가 다시 만듦 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
10 KiB
type, status, page_id, related_pages, last_updated, source
| type | status | page_id | related_pages | last_updated | source | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| page-frontend | stable | B05_Profile | 2026-09-02 |
|
B05_Profile — Frontend
B05 노선 설계 프론트엔드는 Canvas/WebGL 기반 3D 노선 뷰어, SVG/HTML 기반 종단 선형 및 지반고 편집 도구, 비정규 측점(구조물) 입력 UI, 배수유역/관매설 편집 패널 및 마커 레이어로 구성됩니다.
구조물 단일 편집 폼, 배수관 부속 옵션, 종단 알약 레인과 4경로 선택 동기화는 B05_Profile/B05_structures를 기준으로 한다. 배관은 pipe_points.json, 일반 구조물은 structures.json을 정본으로 유지한다. 2026-08-19 범위 입력·설계속도·표시 정비는 B05_Profile/B05_Profile_plan_2026-08-19에 정리했다.
3D 예상형상의 5종 삼각망 서피스, 원지반 재절단, 캐시·저장, 절성토 완전 분리와 편집 갱신은 B05_Profile/B05_corridor_surface를 기준으로 한다.
📂 소스코드 1:1 세분화 위키 파일 목록
| 소스 파일명 | 위키 명세 문서 | 핵심 역할 |
|---|---|---|
B05_Profile_UI_Page.ts |
[[B05_Profile/frontend/B05_Profile_UI_Page]] |
메인 뷰포트 조립 및 새로고침 복원 오케스트레이터 |
B05_Profile_UI_Panel.ts |
[[B05_Profile/frontend/B05_Profile_UI_Panel]] |
좌측 지표면 선택, 제어점 팔레트, 등급/경사 폼 패널 |
B05_Profile_UI_Profile_Panel.ts |
[[B05_Profile/frontend/B05_Profile_UI_Profile_Panel]] |
하단 60vh 2단 종단면 패널 오케스트레이터 |
B05_Profile_UI_Profile_Table.ts |
[[B05_Profile/frontend/B05_Profile_UI_Profile_Table]] |
12행 도면식 테이블 렌더러 및 비정규 측점 2단 스태거 표기 (700줄 한계 준수를 위해 구조물 라인은 분리) |
_UI_Profile_Structures.ts |
[[B05_Profile/frontend/_UI_Profile_Structures]] |
[신설/2026-08-02] 종단 그래프 구조물 측점선 렌더링, 그래프 위 드래그 조작(attachStationDrag) 및 3D 마커 연동 모듈 (113줄) |
B05_Profile_UI_Profile_Alignment.ts |
[[B05_Profile/frontend/B05_Profile_UI_Profile_Alignment]] |
시공계획고 기하 및 수동 델타 편집 정본 모델링 |
B05_Profile_UI_IrregularStations.ts |
[[B05_Profile/frontend/B05_Profile_UI_IrregularStations]] |
비정규 측점(구조물) 구조화 입력 UI 섹션 |
B05_Profile_UI_Drainage_Panel.ts |
[[B05_Profile/frontend/B05_Profile_UI_Drainage_Panel]] |
B05 배수유역도 우측 패널 및 관 매설 정보 연동/조회 조율 (530줄) |
_UI_Drainage_Render.ts |
[[B05_Profile/frontend/_UI_Drainage_Render]] |
[신설/2026-08-02] 700줄 한계 준수를 위해 분리된 우측 배수유역도 Canvas 렌더러 |
B05_Profile_UI_Drainage_Parts.ts |
[[B05_Profile/frontend/B05_Profile_UI_Drainage_Parts]] |
배수유역도 관련 공용 UI 파츠 및 버튼 렌더러, 패널 리사이즈 및 캐시 헬퍼 |
_UI_Selection.ts |
[[B05_Profile/frontend/_UI_Selection]] |
[신설/2026-08-02] 유역 영역 ↔ 종단 그래프 세로선 ↔ 좌측 구조물 폼(+3D 마커) 간의 선택 3자 양방향 동기화 및 무한 루프 방지 가드 모듈 (97줄) |
B05_Profile_UI_Drainage_Pipes.ts |
[[B05_Profile/frontend/B05_Profile_UI_Drainage_Pipes]] |
배관 정보 시각화 및 노선 선형 상 배관 마커 조회 레이어 (246줄) |
B05_Profile_UI_Viewer.ts |
[[B05_Profile/frontend/B05_Profile_UI_Viewer]] |
Three.js WebGL 3D 뷰어 인터페이스 및 마커 오버레이 |
B05_Profile_Api_Fetch.ts |
[[B05_Profile/frontend/B05_Profile_Api_Fetch]] |
백엔드 API (solve, confirm 등) 통신 클라이언트 (B05 전용 drainage API를 제거하고 B04 공용 API를 직접 매핑 호출) |
B05_Profile_Api_Structures.ts |
[[B05_Profile/B05_structures]] |
구조물 레지스트리·정본 조회/저장 및 충돌 오류 구분 |
B05_Profile_UI_Structures_Panel.ts |
[[B05_Profile/B05_structures]] |
A·C·D·E·기타 선택, 측점·옵션 단일 폼과 목록 CRUD |
B05_Profile_UI_Structures_Fields.ts |
[[B05_Profile/B05_structures]] |
공통 옵션 입력 조각과 기슭막이 필드 |
B05_Profile_UI_Drainage_Facility.ts |
[[B05_Profile/B05_structures]] |
배수관·BOX암거·세월교 부속 폼과 관 저장소 연결 |
B05_Profile_UI_Structures_Marks.ts |
[[B05_Profile/B05_structures]] |
2행 알약 레인·벌룬·구간 띠·A군 세로선 선택 동기화 |
_Facility_Fields.ts |
[[B05_Profile/B05_structures]] |
보호공·날개벽 입력 조각과 물넘이·세월교 필요 단면 표시 |
_Structures_List.ts |
[[B05_Profile/B05_structures]] |
구조물 목록 렌더링·항목 라벨 분리 |
_Drainage_Chrome.ts·_Drainage_Interact.ts |
[[B05_Profile/B05_structures]] |
배수 패널 DOM·포인터/휠 상호작용 분리 |
📋 핵심 프론트엔드 아키텍처 개요
-
일반 구조물 정본 편집(2026-08-16):
structures.json을 별도 정본으로 로드·직렬 저장하고, 실패·409 충돌 시 서버 정본을 다시 조회한다. 우클릭 빠른 추가는 배관 관리 타입과 필수 옵션 타입을 제외하며, 필수 옵션 타입은 사이드 폼에서 확정 후 저장한다. -
B05 구조물·배수 UI 정리(2026-08-17): 종단 설계 기준은 기본 접힘이며, 보호공은 돌붙임(찰/메)·도수로로 통합했다. 구조물·배수·페이지·종단 패널 5개 파일은 401~695줄로 분리했고, 가변 상태는 접근자로 전달해 기존 동작을 보존한다.
-
유량 기반 추천 표시(2026-08-17): 유역 목록은 유효직경 뒤에 배관/BOX암거/세월교 추천을 표시한다. 물넘이·세월교는 월류 폭 입력 시 필요한 수심·단면·유속을 보여 주며, 지형 조건은 현장 확인 문구로 구분한다.
-
B04/B05 배수 데이터 일원화 완결 (2026-08-02): B05 전용 배수 API를 호출하던 통신 클라이언트를 폐기하고, B04 공용 API(
fetchDetailPipePoints·computeDetailBasins·saveDetailPipePoints)를 직접 호출하여 B04와 B05 화면이 하나의pipe_points.json및04_detailed_basins.geojson정본을 완벽히 공유하도록 연동했습니다. -
종단 그래프 구조물 연동 및 드래그 조작: 테이블의 복잡성을 줄이고 직관성을 높이기 위해 구조물 라인을 종단 그래프 칸(
.b05-profile__chart)으로 통합 배치했습니다.kind === "irregular"인 측점선(배관 포함)을 좌클릭 드래그(attachStationDrag)하여 위치를 이동시키면 실시간으로 배수유역 및 관 매설 정보가 재계산되고 2D/3D 오버레이로 즉각 전파됩니다. -
종단 그래프 우클릭 컨텍스트 메뉴: 그래프 빈 자리 우클릭 시 "배관 추가", 측점선 근처 우클릭 시 "배관/구조물 삭제"가 작동하도록 우클릭 메뉴(
mountStructureMenuin_UI_Profile_Structures.ts)를 이관 통합했습니다. -
선택 3자 동기화:
_UI_Selection.ts신설을 통해 유역 영역 클릭 ↔ 종단 그래프 세로선 선택 ↔ 좌측 구조물 폼(+3D 마커) 간의 선택 상태를 실시간 양방향 갱신하고, 내부isSyncing가드를 두어 재귀적 무한 루프를 원천 가드했습니다. -
휠 줌 당기면 확대, 밀면 축소 반전: 2D 지도, 횡단도, CAD 뷰어 등 전반에 걸쳐 마우스 휠 당길 시 확대, 밀 시 축소로 방향을 일괄 반전 적용했습니다.
-
패널 리사이즈 뷰포트 배율 유지: 리사이즈 감지 시 뷰포트 오프셋과 범위를 늘어난 만큼 더 넓은 범위를 보여 주도록 재보정하여, 사용자가 이전에 확인하던 줌 축척의 이탈 현상을 방지했습니다.
-
유역 목록 3행 스크롤 제한: 유역 수가 많아질 때 패널 레이아웃이 무한히 늘어나지 않도록, CSS calc를 활용해 최대 3행 높이만 노출하고 내부 스크롤이 일어나도록 UI 스크롤을 제한했습니다.
-
배수 오버레이 가독성 최적화: 집중유역 오버레이를 마커 및 유역 최상단으로 분리 렌더링하고, 유역 번호 서클 라벨을 배관 마커 위에 최종 오버레이로 얹어 등고선/화살표에 가려지지 않도록 조치했습니다.
-
배수유역 패널 UI 정정 (2026-08-02): 페이지 진입 시 배수유역 패널이 기본적으로 접혀 보이던 문제를 기본 펼침 상태로 정정하였으며, 우측 도킹 패널의 접힘 메커니즘에 맞추어
collapseToward: "right"및 접기/펼치기 화살표 회전 각도를 올바르게 보정 구현하였습니다. -
하위 컴포넌트: B05_Profile/B05_frontend_viewer
남은 파일 한계
2026-08-22 현재 B05_Profile_UI_Structures_Panel.ts는 1,015줄이다. 동작 문제는 아니지만 단일 파일 700줄 제한을 넘으므로 후속 분리 대상이다.
종단테이블 표시 보정
구조물 측점의 빈 칸은 왼쪽 테두리를 투명 처리해 곡선 L/R 경계가 절토고~곡선 행을 관통해 보이지 않게 한다. 곡선 셀과 일반 값 셀의 행 구분선은 유지한다.
종단 편집 안전장치
최소고 가드는 모든 편집이 통과하는 _Profile_Panel.applyEdits에서 판정한다. 편집 이력은 b05:pipes도 함께 보존해 계획선과 관 위치를 같이 되돌린다.