⚠ 앞 커밋의 「본문에 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>
사용자 승인(2026-09-07). 앞서 취향을 localStorage 로 옮겨 **탭·재시작** 문제는 풀었고,
이 변경은 그 위에 **다른 PC 에서도 같은 배치**를 얹음. 사용자가 노트북·데스크톱 두 대를 오감.
- `db_management/018_user_ui_prefs.sql` — 사용자당 한 줄, `prefs` JSON 한 칸.
칸을 나누면 취향이 늘 때마다 마이그레이션이 또 필요해 한 칸에 담음.
- `GET/PUT /api/dashboard/me/ui-prefs` — 배치 값만. **설계값은 안 담음**(문자열만 받음).
- 로그인이 확인된 첫 순간에 한 번 받아 로컬 위에 얹고, 취향이 바뀌면 1.5초 모아 올림.
서버가 없거나 못 읽으면 **로컬 값으로 그대로 돔**(계획서 원문).
⚠ 같은 함정을 또 밟을 뻔했음 — 키만 아는 자리가 저장소를 직접 고르면 **올려보내기도 안 걸림**.
그래서 `storageOf` 를 없애고 **읽기·쓰기 창구 하나**(`readByKey`/`writeByKey`)로 모음.
저장소 선택과 서버 올려보내기가 그 한 곳에만 있음. 그물도 그 이름으로 갱신.
**DB 는 아직 적용하지 않았음** — 표가 없으면 API 가 실패하고 화면은 로컬 값으로 도는 것이
정상 동작임. 적용 시점은 다른 창들과 맞춘 뒤.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
화면 취향까지 sessionStorage 에 있어 **탭을 새로 열거나 브라우저를 껐다 켜면** 패널 높이·
접힘·유토곡선 열림이 매번 초기화됐음. 계획서에는 「PC 를 바꾸면」으로 적혀 있었으나 실제
불편은 훨씬 잦았음(사용자 승인 뒤 조사에서 드러남).
- 저장소를 통(bucket)으로 가름 — **`pref` 만 localStorage**, 초안·결과는 세션 그대로.
설계 데이터가 아니므로 CLAUDE.md 5장 「캐시=세션」에 걸리지 않음.
- 키만 들고 저장소를 직접 만지던 화면 공용 부품 셋(`ui_template_resizer`·`_overlay`·
`_overlay_drag`)이 같은 판단(`storageOf`)을 쓰게 함 — 안 그러면 높이 값만 세션에 남아
절반만 옮겨졌음(실측: 접힘 4개는 옮겨지고 높이 3개는 안 옮겨짐).
- 첫 로드 때 세션에 남은 옛 취향을 한 번 쓸어 옮김 — 이 변경으로 쓰던 크기가 초기화되지 않게.
실측(공용 브라우저) — 옮긴 뒤 취향 8개 전부 localStorage, 세션 0개, 높이 보존
(종단 438px · 표 204px). **새 탭에서도 8개 그대로**(같은 값). 검증 탭은 닫음.
시험 `tmp/tests/test_prefs_persist_across_tabs.py` 4건 — 취향만 갈리는지 · 초안·결과는
세션인지 · 공용 부품이 같은 판단을 쓰는지 · 옛 값을 한 번 옮기는지.
이 조각은 DB 없이 되는 몫임. 계정 저장(`018_user_ui_prefs`)은 다음 단계.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
실측(B05 진입): auth/session 4회, workflow-state 2회, 구조물 이관 POST 가 진입할
때마다 나갔다.
- auth/session: 라우터 가드·상단 바·워크플로 확인이 각각 부르던 것을 5초 캐시로
묶음. 로그인·로그아웃에서 즉시 버린다.
- workflow-state: 공용 창구 하나로 모으고 같은 방식으로 캐시. 상단 오버레이가
따로 부르던 경로를 그 창구로 돌림. 단계 이동에서 캐시를 버린다.
- 구 구조물 측점 이관 POST: 탭 수명 동안 노선마다 한 번만.
실측 결과: B05 첫 진입 20 → 18건(핵심 API 10건), B06→B05 이동 7건.
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>
- 면적표 값·머리글을 가운데 맞춤으로 바꾼다.
- 값 칸을 모든 카드에서 버튼으로 만든다. 선택되지 않은 카드에서 눌리면 부모에 측점과 키를
함께 올려, 카드 선택과 면적 강조가 한 번에 반영된다. 강조 상태는 부모가 들고 있다가 카드를
다시 그릴 때 되살리고, 측점이 바뀌면 따라가지 않는다.
- 카드 그리드 빈 자리를 누르면 선택을 해제한다.
- 접어도 빈 배경이 남던 문제: 인라인 min-height가 .is-collapsed { height: auto }를 이겨
360px 상자가 그대로 남았다. CSS 변수로 넘기고 :not(.is-collapsed)에만 건다.
- 접기 손잡이를 헤더 캐럿에서 패널 하단 가운데 삼각형 손잡이로 옮긴다. 좌측 사이드 패널과
같은 공용 컴포넌트를 90° 돌린 모양이며, 위로 접히는 패널이라 collapseToward 옵션에
"up"/"down"을 추가했다(기존 좌우 호출부는 그대로). 리사이저는 손잡이 위로 14px 올렸다.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
상세 배수유역 정보는 페이지에 들어오면 바로 보여야 하는데 기본값이 접힘이었고,
접기/펼치기 화살표도 반대를 가리키고 있었다.
- 기본값: 저장값이 없을 때 `!== "false"`(접힘)를 `=== "true"`(펼침)로 바꿨다.
같은 페이지 하단 종단 패널(B05_wf2_Route_UI_Profile_Panel.ts:592)이 이미 쓰던 규칙과
같아졌다.
- 화살표: 공용 `createWorkflowPanelHandle`은 왼쪽에 도킹해 왼쪽으로 접히는 패널
(제목 카드)을 전제로 회전값을 고정하고 있었다. 배수유역 패널은 오른쪽에 도킹해
오른쪽으로 접히므로 같은 회전을 쓰면 열기/닫기 표시가 정확히 거꾸로 나온다.
`collapseToward` 인자를 추가하고 이 패널만 "right"를 넘긴다.
기본값 "left"라 나머지 호출처는 회전값이 이전과 동일하다:
- ui_template_overlay.ts:81 제목 카드 — "side" 기본값, 열림 180° / 닫힘 0° 그대로
- B05_wf2_Route_UI_Profile_Panel.ts:244 하단 패널 — "bottom" 배치라 애초에 무관
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
eomsangdonandClaude Opus 5