⚠ 앞 커밋의 「본문에 320 을 남긴다」가 폭 500 에서 패널을 **180px 로 눌러** 목록
이름이 잘렸음(랩탑 보조 실측: 잘린 이름 2건). 폭을 반씩 나누면 **둘 다 못 쓰는
화면**이 됨.
- CSS ≤560 — 패널을 **안 줄임**(280px 유지). 본문 밀기는 이미 ≤860 에서 꺼져 있어
패널이 **본문 위에 겹쳐** 뜨고, 읽을 때는 손잡이로 접음. 폭 500 에서 잘린 글자 0.
- TS — 정한 적이 없고 화면이 아주 좁으면(≤560) **접은 채로 시작**함. 펼친 채로 열면
본문이 가려진 화면부터 보게 되기 때문임.
- ⚠ **사용자가 정한 적이 있으면 그 뜻이 이김** — 저장값이 있으면 그대로 따름.
- ⚠ **처음 앉힐 때는 저장하지 않음** — 좁아서 접은 것을 「사용자가 접었다」로 적으면
넓은 화면으로 돌아와도 접힌 채로 남음.
실측
정한 적 없음 + 500 → 접힘 true · 저장값 null (기록 안 남김)
정한 적 없음 + 1400 → 접힘 false · 저장값 null
「펼침」 정해 둠 + 500 → 접힘 false (사용자 뜻이 이김)
잘린 글자 860·620·560·500 전부 0
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
⚠ 인라인 좌표는 미디어 규칙보다 세다. 넓은 화면에서 끌어 둔 자리가 좁은 화면에도
그대로 남아 본문을 덮었음(앞 커밋으로 폭은 줄였으나 자리는 그대로였음).
- 좁아지면 인라인 좌표를 **떼어** CSS 자리로 보냄. ⚠ **저장값은 안 지움** —
지우면 사용자가 맞춰 둔 자리가 사라져 더 나쁨.
- 넓어지면 **끌어 둔 자리를 되찾음.**
- ⚠ 좁은 폭에서 사용자가 직접 끌면 **그 뜻이 이김** — 규칙이 다시 덮지 않음.
그 자리는 **저장하지 않아** 넓은 화면 자리를 밀어내지도 않음.
실측(진행단계 패널, 저장값 {left:420, top:300} 을 심어 두고)
1400 420/300 (끌어 둔 자리) 저장값 유지
760 물러남 · 본문 남음 288px 저장값 유지
500 물러남 · 본문 남음 194px 저장값 유지
620 에서 직접 끌기 → 410/309 로 붙고, 폭을 600 으로 바꿔도 그 자리 유지
다시 1400 → 420/300 되찾음 · 저장값 안 바뀜
곁들여 — 좁은 폭 진행단계 규칙에서 `top: auto; bottom: …` 을 뺌. 위·아래가 함께
잡혀 패널이 화면 높이만큼 늘어났음(실측 717px). 폭만 줄이고 자리는 그대로 둠.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
⚠ 「넘침은 0 인데 못 읽는」 자리였음. 표가 자기 스크롤 안에서 잘려 넘침 수치로는
안 잡히고, 실제로는 좌측 패널(320 고정)과 진행단계 패널(fixed)이 화면을 덮고 있었음.
실측(B08, 본문에 남는 폭)
860px 348 → 388 760px 248 → 288
620px 108 → 175 500px 4 → 194
1400·1000 은 그대로 (넓은 화면 배치 안 건드림)
방법 — 패널을 비율(vw)로 줄이면 좁아질수록 본문도 같이 줄어 결국 못 읽음.
그래서 **본문에 남길 폭**(--wf-min-content-width: 320px)을 정하고 패널이 그만큼
물러나게 함. 좁은 폭 전용 패널 폭(--wf-left-panel-narrow-width: 280px)도 따로 둠.
진행단계 패널은 폭을 줄이고 아래로 내려 본문 윗부분(탭·표 머리)을 안 가리게 함.
확인 — B03·B05·B06·B07·B08·B09 를 1400·760 두 폭에서 훑음. 문서 넘침 전부 0,
넓은 폭 배치 변화 없음(좌측 320 유지).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- 워크플로 상태 응답에 project_name 추가. 좌측 제목 패널 같은 행 오른쪽 끝에
프로젝트 이름 표기(길면 말줄임, 전체는 툴팁). 이름표를 오버레이 쪽에 두어
레이아웃을 직접 조립하는 B03 까지 여섯 화면이 한 곳으로 반영됨.
- fetchProjectWorkflowState 가 {status, workflow_state} 껍데기를 벗기도록 수정.
- 계획노선을 「업로드한 CSV」로 적은 주석을 「계획노선(정본)」으로 정리.
업로드 판정이 .csv 개수만 세어 shapefile 을 막던 것도 .shp 포함으로 맞춤.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- 헤더를 잡아 끌어 자리 이동, 이동 범위는 상단 헤더 아래 화면 안으로 clamp
- 아래 공간 부족 시 `is-flip-up` 으로 헤더 위로 펼침(바닥 기준 정렬)
- 자리는 sessionStorage 세션 캐시에만 보관, 접힘/펴짐 뒤 방향 재판정
- threshold 4px 초과 시에만 포인터 캡처 — pointerdown 캡처는 click 대상을
제목에서 헤더로 바꿔 접기/펴기 토글을 죽임(실측)
- 이동은 window 에서 청취 — B07 CAD iframe 위로 커서가 나가도 안 끊김
검증: 공용 브라우저 B03·B05·B07 실측(이동 오차 1px 이내, clamp·뒤집힘·토글 정상),
tsc --noEmit 통과
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
splitSidebarActions가 body 직계자식(:scope >)에서만 .ui-sidebar-actions를
찾았지만, 실제 액션 줄은 페이지 패널 루트(b05-route__panel 등) 안에 있어 분리가
아예 일어나지 않았다 — 직전 커밋에서 sticky까지 걷어낸 상태라 액션 줄이 내용을
따라 끌려 올라갔다(2026-08-18 사용자 보고).
- 깊이 무관하게 찾고, 액션 줄의 실제 부모를 기준으로 [스크롤 래퍼][액션 줄]로 쪼갠다.
- body와 그 부모 사이 중간 요소에 ui-sidebar-fill을 붙여 높이 체인(플렉스 세로
확장 + min-height:0)을 이어준다. B08 목록의 자체 overflow도 이 규칙이 덮어
스크롤이 래퍼로 옮겨간다.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
sticky + margin-top:auto 조합은 본문 높이가 패널 높이를 넘나들 때마다 액션 줄이
붙었다 떨어졌다 했다(2026-08-18 사용자 보고). 액션 줄을 스크롤 대상에서 아예 빼는
구조로 바꾼다.
- overlay.ts: 사이드 패널 생성 시 본문의 `.ui-sidebar-actions` 앞 형제들을
마진·패딩 없는 `.ui-sidebar-scroll` 래퍼로 옮기고 body에 `ui-sidebar-split`을
붙인다. 페이지 코드는 지금처럼 본문 끝에 액션 줄을 붙이기만 하면 된다.
- overlay.css: split body = 세로 플렉스 + overflow hidden + padding-bottom 0,
스크롤 래퍼 = flex:1/min-height:0/overflow-y:scroll + gap:inherit(그룹 간격 유지),
액션 줄 = flex:none(sticky·margin-top 제거).
- B08: 전용 sticky 규칙을 버리고 공용 ui-sidebar-actions로 통합 — B04~B08이 한 규칙.
스크롤바 자리 상시 예약(2026-08-17)은 래퍼가 이어받아 내용 폭은 그대로다.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
지금까지는 sticky만 걸려 있어 내용이 패널보다 짧으면 버튼 줄이 내용 바로 아래에
떠 있었다. 공용 .ui-sidebar-actions에 margin-top:auto를 주고, 액션 줄을 담은
사이드 body를 세로 플렉스로 만들어(:has) 남는 세로 공간을 액션 줄 위 여백이
전부 먹게 했다. B04·B05·B06·B07 공통 적용(B08은 .b08-drawing-actions가 이미
같은 방식).
- B05: 액션 dock 위 구분선·구조물 목록도 함께 최하단에 붙는다.
- B05 .b05-route__panel의 padding-bottom(24px) 제거 — dock이 바닥에 붙은 뒤로는
버튼 아래 빈 띠로만 남는다. 공용 body 패딩 16px는 dock의 sticky bottom:-16px가 덮는다.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-06 사용자 지시 2건:
- 3D 측점 라벨 배경을 fillRect → roundRect(반경 10)로 — 둥근 판
- 사이드 컨테이너 외곽선: 어제 45% 혼합이 아직 흐리다는 재보고로 보조색
비중 75%로 상향. 공통 클래스(ui-sidebar-section)가 테두리 두께·형태까지
소유하도록 강화 — 자체 테두리 없는 컨테이너도 클래스만 붙이면 동일 외곽선.
테마 변수 혼합이라 라이트/다크 자동 대응
- B04~B06만 적용돼 있던 것을 B07 설계 도면 그룹에도 적용(+라운드·패딩)
실측: 3D 라벨 라운드, B05·B07 외곽선 라이트/다크 모두 선명, 콘솔 에러 0.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 유토곡선 SVG 상단 여백 padTop 옵션 신설(공용 렌더러), B05는 40px —
범례·기준 버튼 오버레이(top 34px)와 커브 겹침 해소. B06은 기존 10px 유지
- 사이드 패널 컨테이너 공통 클래스(ui-sidebar-section): 외곽선을 본문 보조색
45% 혼합으로 진하게 — 두 테마 모두 흐려 안 보이던 문제. B04/B05/B06 적용
- 하단 패널 리사이즈 끊김 해소: 끌리는 동안 프레임당 경량 높이 동기화
(캐스케이드 계산 + 캔버스/차트 높이만), 무거운 차트·테이블 재구성은
손 뗀 뒤 120ms 디바운스로 1회. 추가 리소스 없음 — 프레임당 비용 감소
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 구조물 종류 드롭다운에 빈칸 항목 — 초기·리셋 상태는 빈칸이고 하위 옵션 전체
숨김, 미선택이면 추가 불가(2026-08-05 사용자 지시)
- 사이드 패널 최하단 고정 액션 줄 공용 클래스(ui-sidebar-actions): 계산·확정
버튼이 스크롤에서 제외되고 불투명 배경이 지나가는 내용을 가림.
B04(확정·초기화)/B05(계산·확정)/B06(재계산·저장·확정) 적용, B07은 기존
자체 sticky 유지
- 하단 패널 높이 캐스케이드: 아래로 끌면 종단 먼저 최소(100px)까지 →
테이블·유토곡선이 같이 비례 축소(각자 최소 140/160px, 인라인 임시 축소라
다시 키우면 원래 높이 복귀) → 셋 다 최소면 리사이저 동적 하한이 차단.
공용 리사이저 min을 함수 지원으로 확장. 반대로 서브패널 펼침으로 부족하면
메인 패널을 키움(기존 로직 유지)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
강조색 패널 테두리(24번)가 side 손잡이의 라운드 모서리 틈으로 비쳐 외곽선이
어긋나 보였다(2026-08-04 사용자 보고). 손잡이를 1px 안쪽으로 겹쳐 선을 덮는다.
배수유역(왼쪽 부착) 손잡이는 이상 없음 확인돼 그대로 둔다.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- 이름표 손잡이: 화살표·이름표 flex 압축 제외 — 글자를 줄이지 않고 폭이 내용에 맞춰
늘어난다(B06 '종단/유토곡선' 104px, 화살표 7px 유지)
- B06 토글 아래 테두리를 좌우와 같은 강조색으로 — 외곽선 색 섞임 해소
- B06 리사이저 상시 표시선: 히트 영역 가운데(경계 4px 위) 대신 패널 아래 경계에 정착
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
eomsangdonandClaude Opus 5