chore(조사): 334 ☰ 바로가기 코드 조사 — 대시보드 구역 · 시스템 설정 4 페이지

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01C6BNBFXFndbqYxu6sZuknK
This commit is contained in:
2026-10-15 15:36:42 +09:00
co-authored by Claude Opus 5.5
parent 31e6adf7de
commit 422c449eb9
@@ -0,0 +1,230 @@
# 요구 225-1 · 225-2 ☰ 바로가기 — 코드 조사 (PLAN 334)
- 기준: `main_laptop_1` 31e6adf7d · 읽기만 · 근거 = 파일:줄 · 화면 판정은 코드로만(브라우저 · 서버 안 씀).
- 원문(요구 225 · 10-15): ① 대시보드 ☰ 좌측에 진행단계처럼 바로가기 + 페이지 스크롤 ② 시스템 설정 컨테이너로 가는 4 페이지 ☰ 에도 진행단계처럼 바로 이동 단추.
## 0. 결론 요약
1. ☰ = 공용 한 벌(`A00_Common/app_shell.ts` `buildDrawer` 149-222) · 대시보드 ☰ 와 프로젝트 ☰ 는 같은 코드 · 다른 점은 「진행 단계」 칸을 페이지가 채우느냐(`setDrawerSteps`)뿐 · 서랍은 한 열(왼쪽 · 오른쪽 두 열 없음).
2. 진행단계 = `createStepBar`(`ui_template/ui_template_workflow_layout.ts` 57-164) · 🏠 대시보드 + 7단계 · ☰ 는 진행 판에 그린 **그 요소**를 열 때 빌려 감.
3. 시스템 설정 카드 넷(시스템 관리자) = M01 마스터 데이터 + M02 한 페이지의 `open=구조물조합 · 옵션 · 도면` · 그 밖 역할은 구조물 조합 하나 · 지금 그 페이지들 ☰ 의 진행 단계 칸은 비어 숨음.
4. 추천 해석: 대시보드 ☰ 진행 단계 자리에 「대시보드 컨테이너 바로가기」(역할별 화면에 있는 컨테이너 그대로 · 화면 차례) · 누르면 서랍 닫고 그 컨테이너로 굴림 · 본문 구조는 그대로.
5. 페이지 스크롤: 대시보드 본문 · ☰ 서랍 모두 지금도 굴러감(막는 코드 없음) → 「페이지 스크롤」 = 바로가기 누름 → 그 컨테이너로 굴림 + ☰ 자리 비킴(scroll-margin-top).
6. M01 · M02 ☰ = `createStepBar` 를 인자만 바꿔 재사용(🏠 + 카드 넷 · 지금 칸 강조) · 서랍이 「집 없는 요소」를 받게 `app_shell.ts` 두 줄.
7. 함정 셋: `createStepBar` 「둘째 칸 = 시스템 관리자 전용」이 칸 번호로 박힘 · M02 → M02 이동은 머리 가드가 안 물음 · B01 CSS 이미 789줄.
8. 최소안: 기반 2줄 + 몫 A(대시보드) 2 파일 · 몫 B(설정 4 페이지) 새 파일 1 + 4 파일 · 시험 1 고침 + 새 시험 1 · 한 창이 차례로가 나음.
## 1. ☰ 메뉴 코드
### 한 벌 · 공용
- 그리기 = `A00_Common/app_shell.ts` `buildDrawer()` 149-222 — 모든 쪽(A · B · M) 같은 함수 · 페이지마다 따로 없음.
- 셸은 주소가 바뀔 때마다 새로 그림 — `A00_Common/main.ts` 67-80(`renderShell` → `renderCurrentRoute`) · `app_shell.ts` 323-337 · 325 에서 진행 단계 맡김(`drawerSteps`) 비움 → 새 페이지가 다시 맡김. B05↔B06 은 보기만 바꿔 셸을 안 다시 그림(`main.ts` 72-75).
- 대시보드 ☰ vs 프로젝트 ☰ = 같은 코드의 같은 갈래 · 다른 점은 「진행 단계」 칸뿐 — 프로젝트 쪽(B04~B09)은 `createWorkflowLayout` 이 `setDrawerSteps(progressContent)`(`ui_template_workflow_layout.ts` 202-203) · 대시보드(일반 레이아웃 · `B01_Dashboard/B01_Dashboard_UI_Page.ts` 315-320)는 안 맡겨 칸이 비고 CSS 로 숨음(`app_shell.ts` 486).
- B·M 쪽 표시: `html.is-bm-route` = 주소가 b·m + 숫자(`main.ts` 68-71 · `ui_template/ui_template_native_menu.ts` 10) → 위 줄 걷음(`app_shell.ts` 504-512) · ☰ 만 왼쪽 위에 띄움(513-525) · 서랍은 왼쪽에서 열림(526-531) · 토큰 `A00_Common/device_context.css` 89-98(`--app-header-h` 0 · `--app-burger-w` 36 · `--app-burger-inset` 52).
### 칸 구성(한 열 · 위→아래 · `app_shell.ts` 185-220)
| 차례 | 칸(class) | 내용 | 근거 |
| --- | --- | --- | --- |
| 1 | `.app-drawer__brand` | 로고 → A01 홈(대시보드 아님) | 102-117(115) · 186-188 |
| 2 | `.app-drawer__steps` | 진행 단계(맡긴 쪽만 · 비면 숨김) | 119-125 · 162-170 · 486 |
| 3 | `.app-drawer__nav` | 공개 메뉴 다섯(프로그램 · 회사소개 · 소식 · 교육 · 기술지원 → A 쪽) | 127-143 · 189-191 |
| 4 | 묶음(`.app-drawer__group`) | [EN/한] [☾/☀] [설정](332 · 처음 누를 때 `app_settings` 불러옴) | 192-213 |
| | `.app-drawer__auth` | [내 이름 → 대시보드] [로그아웃] | 214-216 · 262-311(273) |
| | `.app-drawer__touch` | 터치 모드 자동 · 켬 · 끔 | 224-259 · 217-220 |
- 시험 `test_device_drawer.py` 76-81 이 이 차례(brand · steps · nav · settings)를 잼.
### 여닫기
- ☰ 누름 = 토글(171) · 덮개 누름 = 닫힘(172) · Esc = 닫힘(173 · ☰ 초점에서도).
- 로고 · 진행 단계 · 메뉴 · 로그인 · [설정] 단추를 누르면 닫힘 · 언어 · 테마 · 터치는 열린 채(174-183).
- 진행 단계 빌림: 열 때 서랍으로 옮기고 닫을 때 제자리(진행 판)로(164-170) · 맡길 때 부모(집)가 없으면 받지 않음(124 `node?.parentElement ? … : null`).
### 크기 · CSS(`SHELL_CSS` 344-537 · 주입 539-545)
- 서랍: fixed · 위 = `--app-header-h`(B·M 0) · 아래 0 · 폭 `min(320px, 100vw)` · 안쪽 16 · 칸 사이 16 · **`overflow-y: auto`**(451-465) · 묶음 사이 선(482-485).
- 덮개: fixed · 반투명 보라(445-450).
- ☰: 36×36(손가락 높이 44) · 왼쪽 위 8,8 · 그림자(513-525).
- 머리 z = `z-dropdown + 1` = 201(504-509) → 좌측 패널 판(z 200 · `ui_template_overlay.css` 8) 위.
- 프로젝트 쪽 떠 있는 진행 판은 B·M 에서 숨김(`ui_template_overlay.css` 544-547) → B·M 의 진행 단계는 ☰ 안에만.
- 최신 모양 = 332-2 [설정] 단추 포함(sub2 aaecfa343 · HEAD 에 합쳐짐 · `A00_Common/app_settings.ts` 91~).
## 2. 진행단계 바로가기 코드
- 그리는 함수: `createStepBar(steps, activeStep, options)` `ui_template_workflow_layout.ts` 57-164 · 세로형 `is-vertical`(65) · 프로젝트 쪽은 `createWorkflowLayout` 이 부름(184-192 · `homeButton: true` · `WORKFLOW_STEP_ICONS`).
| 원천 | 값 | 근거 |
| --- | --- | --- |
| 표시 이름 | 파일입력 · 전처리 · 종단설계 · 횡단설계 · 상세설계 · 수량산출 · 원가계산 | `A00_Common/b_page_scaffold.ts` 139-149 · `ui_template_locale_b1.ts` 231 · `ui_template_locale_common.ts` 82-87 |
| 길 | b03-file-input · b04-preprocess · b05-profile · b06-section · b07-design-detail · b08-quantity · b09-estimation | `A00_Common/b_workflow_nav.ts` 24-32 |
| 아이콘 | 📁 🗺️ 🛣️ 📐 ∑ 🏗️ 📄 | `ui_template_workflow_layout.ts` 55 |
| 맨 위 | 🏠 대시보드 → b01-account(단계 아님 · 늘 켜짐 · 아래 선) | 66-83 · `ui_template_locale_common.ts` 54 · `ui_template_workflow_layout.css` 65-71 |
- 지금 단계 강조: `is-active`(88 · css 83-86) · B05↔B06 은 `setActiveStep`(217-218).
- 잠금: 단계 상태 NOT_STARTED · STALE 면 막힘(지금 단계는 열림 · 103-117) · 개발(DEV)은 막힌 단계도 열고 표시(113 · 148-153) · 상태 테두리 색(css 93-108) · B07 은 운영에서 도면 다 확정 전 수량 · 원가 막음(`B07_DesignDetail_UI_Page.ts` 600-606).
- 역할: 둘째 칸(index 1 = 전처리)만 시스템 관리자 전용 — `fetchDashboardMe` 로 역할 보고 끔 · 풍선 「시스템 관리자 전용 단계입니다.」(119-129 · 9-14). ⚠ **칸 번호**로 박힘(길 아님) — 다른 목록에 쓰면 회사 관리자 · 일반에서 둘째 칸이 꺼짐.
- 누를 수 있는 조건: 켜짐 + `routes[index]` 있음(155-159) — 길 배열을 안 주면 누름이 안 걸림.
- 프로젝트 없이: 못 씀 — 단계 화면은 기억한 프로젝트로 엶(`router.ts` 107-116 · 223-233 「프로젝트 없음」 안내) · 회사 없으면(시스템 관리자 빼고) 대시보드로(`router.ts` 206-221) · 누름 = `goToWorkflowStage(projectId, 길)`(`b_workflow_nav.ts` 96-111) · projectId 없으면 아무것도 안 함(`b_page_scaffold.ts` 128-130 · `B07_DesignDetail_UI_Page.ts` 601 · `design_page.ts` 174-175 토스트).
- 대시보드 프로젝트 표의 단계 막대도 같은 함수(compact · `B01_Dashboard_UI_Projects.ts` 56-67).
- ⚠ 덧 발견(이번 밖): B03(파일입력)은 일반 레이아웃 + 오버레이를 직접 조립하고 `setDrawerSteps` 를 안 부름(`B03_FileInput_UI_Page.ts` 641-675) · B·M 에선 떠 있는 판도 숨음(`ui_template_overlay.css` 544-547) → **B03 ☰ 에 진행 단계 없음**(10-13 ☰ 이관 3fc50044e · fbe0f982d 가 B03 을 안 건드림) · 한 줄 고침 후보.
## 3. 시스템 설정 컨테이너 · 4 페이지
- 컨테이너: `buildSystemSettingsSection` `B01_Dashboard_UI_Page.ts` 222-232(모든 역할 · 한 줄 통째 · 제목 눌러 접힘 · 시스템 관리자는 회사 알약) · 카드 = `buildSystemSettingsPanel` 165-200 · 카드 꼴 `settingCard` 149-163.
- 자리: 시스템 관리자 = 리소스 현황 아래(246) · 회사 관리자 · 일반 = 맨 위(281 · 294).
| 카드(시스템 관리자 · 178-188) | 이동 | 파일 |
| --- | --- | --- |
| 마스터 데이터 | `#/m01-master-data` | `M01_MasterData/M01_MasterData_UI_Page.ts` |
| 구조물 조합 | `#/m02-master-template?open=구조물조합&root=personal`(회사 있음) · `master`(없음) `[&company=고른 회사]` | `M02_MasterTemplete/M02_MasterTemplete_UI_Page.ts` |
| 구조물 옵션 | `…?open=옵션&root=master[&company=]` | 같은 M02 |
| 도면 양식 | `…?open=도면&root=master[&company=]` | 같은 M02 |
- 이름 `ui_template_locale_m1.ts` 7 · `ui_template_locale_m2.ts` 7-9 · 설명 `ui_template_locale_b3.ts` 142-147 · 회사 인자 170-171.
- 그 밖 역할(190-198): 구조물 조합 카드 하나 — 회사 있으면 personal(177) · 없으면 회사 관리자 · 회사 마스터 = company · 일반 = personal.
- 「4 페이지」 = 실제 길은 둘 — M02 셋은 한 페이지의 진입 인자 `open` 만 다름(`M02_MasterTemplete_Layer.ts` 19 · 39-52) → 좌측 패널 그 컨테이너 펼침(`M02_MasterTemplete_UI_Page.ts` 240 · `M02_MasterTemplete_UI_Side.ts` 342-347) · 옵션 · 도면 컨테이너는 마스터 층에만(`UI_Side` 154-160).
- 역할: M01 = 시스템 관리자만(아니면 토스트 + 대시보드로 · M01 page 48-56) · M02 = 로그인만 · 고치기는 층 권한(`Layer` 99-113).
- 지금 그 페이지들 ☰: 진행 단계 칸 빔(숨음) — M01 · M02 는 `createWorkflowOverlays` 를 진행 판 없이 부름(M01 page 263-268 · M02 page 222-227 · `ui_template_overlay.ts` 270-282) · `setDrawerSteps` 없음 → ☰ = 로고(A01 홈) · 공개 메뉴 다섯 · [EN][☾][설정] · [이름 → 대시보드][로그아웃] · 터치 모드. 대시보드로 가는 길 = 이름 단추 하나뿐 · 설정 페이지끼리 오가는 단추 없음.
## 4. 대시보드 ☰ 「좌측」 후보
대시보드 컨테이너 — 모두 `section()` = `.b01-dashboard__section` · 제목 h3 `.ui-card__title`(`ui_template_general_blocks.ts` 9-40) · `grid` 의 직속 자식:
| 역할 | 컨테이너(화면 차례) | 근거 |
| --- | --- | --- |
| 시스템 관리자(10) | 리소스 현황 · 시스템 설정 · 프로젝트 · 임시 보관함 · 사용자 관리 · 가입 요청 · 회사 관리 · 기본정보 · 보안 · 시스템 로그 | 241-277 · 305-312 |
| 회사 관리자(8) | 시스템 설정 · 프로젝트 · 임시 보관함 · 팀원 관리 · 가입 요청 · 회사 정보 · 기본정보 · 보안 | 278-291 · 305-308 |
| 일반(6) | 시스템 설정 · 프로젝트 · 임시 보관함 · 회사 정보 · 기본정보 · 보안 | 292-308 |
- 챗봇 단추 = 오른쪽 아래 떠 있음 · 컨테이너 아님(314 · B01 CSS 525).
- 대시보드에서 다른 화면 가는 곳: 시스템 설정 카드(M01 · M02) · 프로젝트 「+」(B02 · 249 · 283 · 296) · 프로젝트 표 단계 막대(B03~B09 · `Projects.ts` 56-67).
**추천 해석(하나)** — ☰ 서랍 「진행 단계」 자리(로고 바로 아래 · 프로젝트 ☰ 와 같은 자리 · 같은 세로 단추 꼴)에 **대시보드 컨테이너 바로가기** · 그 역할 화면의 컨테이너 그대로 · 화면 차례 그대로 · 누르면 서랍 닫히고 그 컨테이너로 부드럽게 굴림.
- 「좌측에」 = 왼쪽에서 열리는 ☰ 서랍(`app_shell.ts` 526-531) · 「페이지 스크롤」 = 누르면 굴러감.
- 10-8 롤백 둘(해시 탭 2a2c4d0f6 → 1849a11b3 · 좌측 패널에서 고른 컨테이너만 보이기 d69686a0a → c72585016 · `docs/raw/plans/2026-10-08_plan_99_…` 11)은 컨테이너를 감춰 본문 구조를 바꿈 → 이 안은 본문 그대로 · ☰ 안 단추 + 굴림만.
다른 해석(한 줄씩):
- B 다른 화면 가기(시스템 설정 4 · 새 프로젝트) — 본문 카드 · 「+」 와 겹침 · 「페이지 스크롤」 이 설명 안 됨.
- C 최근 프로젝트 · 그 단계로 — 프로젝트 고르기가 먼저 필요 · 표에 단계 막대가 이미 있음.
- D 「좌측에」 = 서랍 안 왼쪽 열(두 열) — 서랍 폭 320 이라 좁음 · 프로젝트 ☰ 와 꼴이 달라짐.
- E 「페이지 스크롤」 = 지금 안 굴러가서 — 5장 판정상 지금도 굴러감.
## 5. 페이지 스크롤 판정
대시보드 본문 — 막는 코드 없음 → 문서가 굴러감:
- html · body = 여백만(`ui_template_theme.css` 471-475) · `A00_Common/index.html` 꾸밈 없음 · 출구 `.app-outlet` = 최소 높이만(`app_shell.ts` 396-401) · `.ui-general-layout` = `min-height: 100dvh`(`ui_template_general_layout.css` 1-5).
- overflow hidden · 고정 높이 · 100vh 잠금 없음 — 전역 html · body · #app · .app-outlet 규칙 검색 결과 위 셋뿐(B07 CAD `App.css` 의 html,body 는 iframe 별도 문서) · JS 로 body overflow 잠그는 곳 0.
- 휠 가로채기: 돋보기는 원이 보일 때만(`ui_template_loupe.ts` 210-220) · `touch_bridge` 는 마우스 · 휠 안 건드림.
- 안쪽 굴림만 따로: 표 4줄 뒤(`B01_Dashboard_UI_Common.ts` 15 · `ui_template_general_blocks.ts` 53~) · 챗봇 창(B01 CSS 559-570 · 610-618).
☰ 서랍 — `overflow-y: auto` + 위 · 아래 고정(`app_shell.ts` 451-465) → 넘치면 서랍만 굴러감 · 시스템 관리자 바로가기 10개면 서랍 높이 약 900px 넘음 → 이 굴림이 일함 · 서랍 끝에서 뒤 페이지로 이어 굴림(overscroll) 막음은 없음.
판정: 「페이지 스크롤 추가」 = 바로가기 누름 → 그 컨테이너로 굴림(`scrollIntoView` · smooth · block start).
고칠 곳:
- 굴림 = `B01_Dashboard_UI_Page.ts`(바로가기 누름).
- ☰ 자리 비킴 = 맨 위로 굴린 컨테이너 제목이 왼쪽 위 ☰(52px)에 깔림(폭 1248 아래 · 카드 왼쪽 끝 24) → `html.is-bm-route .ui-general-block__section { scroll-margin-top: var(--app-burger-inset) }` 한 규칙 · 자리 = `ui_template_general_layout.css`(119줄 · 같은 ☰ 들여쓰기 규칙 115-119 곁) · B01 CSS(789줄 · 이미 700 넘음)는 손대지 않음.
- (선택) `app_shell.ts` `.app-drawer` 에 `overscroll-behavior: contain` 한 줄.
## 6. 시스템 설정 4 페이지 ☰
- 꼴: 프로젝트 ☰ 와 같음 — 🏠 대시보드 + 카드 넷(마스터 데이터 · 구조물 조합 · 구조물 옵션 · 도면 양식) · 지금 칸 강조 · 누르면 그 페이지(M02 셋은 `open` 인자) · 그 밖 역할은 🏠 + 구조물 조합.
- 재사용: 됨 — `createStepBar(카드 이름들, 지금 칸, { orientation: "vertical", icons, routes: 카드 길들, homeButton: true, onStepClick })` 인자만. stages 없으면 모두 켜짐(114-115) · `homeButton` = 🏠 대시보드(68-83) · 둘째 칸 규칙은 시스템 관리자 넷엔 통과 · 다른 역할은 한 칸이라 안 걸림(대시보드 목록엔 걸림 → 8장 기반 a).
- 막는 것 둘:
1. 서랍이 집 없는 요소를 안 받음(`app_shell.ts` 124) — M01 · M02 · B01 은 진행 판이 없음 → 두 줄 고침(집 없음 = 서랍이 늘 가짐 · 닫을 때 안 옮김 · 121-124 · 167-169). 대안(진행 판에 넣어 숨긴 채 집으로) = 떠 있는 판 · 끌기 · 저장 키가 헛되이 생김 → 안 권함.
2. M02 → M02(다른 `open`) 이동은 머리 가드가 안 물음(`main.ts` 85 · 같은 길 = 그냥 다시 그림) → 저장 안 한 M02 고침이 말없이 사라짐. M02 자체 층 단추는 먼저 `main.confirmLeave()`(M02 page 99-106 · `M02_MasterTemplete_UI_Main.ts` 239-240 · 시험 `test_m02_layer_screen.py` 183) → 바로가기도 같은 길이면 `takeLeaveGuard()`(`router.ts` 101-105) 먼저 물음 · 다른 길(M02 → M01 · 🏠)은 `main.ts` 가 물음 · M01 은 초안이 sessionStorage 라 가드 없음(M01 page 7-8).
- 역할 규칙 원천은 한 곳으로: 지금 카드 규칙(165-200 · 177 comboRoot 가 까다로움)을 순수 목록 함수로 옮겨 카드 · ☰ 가 같이 씀(두 벌 금지).
- 지금 칸: M01 = 마스터 데이터 · M02 = `entry.open`(구조물조합 · 옵션 · 도면 · 「일위대가조합」은 강조 없음) · 페이지 안 좌측 패널에서 다른 컨테이너를 펼쳐도 강조는 안 따라감(진입 인자 기준 · 알려 둘 한계).
- company: 대시보드는 시스템 관리자 고른 회사를 해시에 실음(170-171) · M02 는 해시 없으면 sessionStorage `aislo.adminCompany` → 자기 회사(`Layer` 69-80) → M01 에서는 안 실어도 같음 · M02 에서는 지금 `entry.company` 를 이어 실음.
## 7. 시험 · 줄 수 · 겹침
시험(`resources/tester`):
| 파일 | 보는 것 | 서버 |
| --- | --- | --- |
| `test_device_drawer.py` | ☰ 위 줄 걷기 · 서랍 차례 · 진행 단계 빌림 · 단계 누름 이동 · Esc(B07 · A01) | 5174(sub1) · 꺼지면 건너뜀 |
| `test_app_settings.py` + `helper_app_settings.cjs` | ☰ [설정] 창 탭 · 저장 · 물음 | Node + 5177(sub2) |
| `test_b01_settings_cards.py` | 시스템 설정 카드 역할별(제목 · 설명 · 해시) — `settingCard` · `buildSystemSettingsPanel` 소스를 잘라 Node 로 돌림(26-62) · `buildPage` 차례 문자열(99-141) | Node |
| `test_197_1_dashboard_option_card.py` | 카드 해시 셋(위 `_cards` 씀) · M02 진입 · reveal | Node |
| `test_device_audit.py` | 모든 쪽 네 크기 점검(☰ 포함) | 5174 |
| `test_design_page_single.py` | workflow_layout 의 `setActiveStep` · `setTitle` 문자열(96-97) | 없음 |
| `test_m02_layer_screen.py` · `_combo_screen` · `_combo_table` · `_labor_tree` · `_precombo_scope` · `_structure_panel` | M02 page 소스 문자열 | 없음 |
- 대시보드 바로가기 · 설정 4 페이지 ☰ 시험은 아직 없음.
줄 수(700 제한):
| 파일 | 지금 | 예상 |
| --- | --- | --- |
| `A00_Common/app_shell.ts` | 545 | +1~2 |
| `ui_template/ui_template_workflow_layout.ts` | 220 | 한 줄 바꿈 |
| `ui_template/ui_template_general_layout.css` | 119 | +3 |
| `B01_Dashboard/B01_Dashboard_UI_Page.ts` | 329 | +15~20(카드 함수는 줄어듦) |
| `B01_Dashboard/B01_Dashboard_UI_Style.css` | **789(이미 초과)** | 손대지 않음 |
| `M01_MasterData/M01_MasterData_UI_Page.ts` | 280 | +2 |
| `M02_MasterTemplete/M02_MasterTemplete_UI_Page.ts` | 244 | +2 |
| 새 `A00_Common/m_settings_nav.ts` | — | ~50 |
겹침:
- 원격 가지 전부(origin/sub_laptop_1~8 · main_desktop_1 · sub_desktop_1 · CODEX · 안티그래비티 · dev)에 HEAD 대비 위 파일의 안 합친 커밋 0 · 랩탑 보조 여덟 폴더 미커밋 0(읽기 diff) · 데스크탑 미커밋은 못 봄.
- PLAN 열린 장 중 이 파일을 쓰는 장 없음 · 332(☰ [설정] · sub2)는 끝 · 합침.
- 주의: `app_shell.ts` · `ui_template_workflow_layout.ts` = 모든 B · M 쪽 공용(B04~B09 진행 단계) · B01 = CODEX 챗봇 영역(`Knowledge_Chat` · CSS 520~ · PLAN 「CODEX」 장 열린 줄 「추가 커밋은 제 워크트리에만」) — 이번엔 `B01_Dashboard_UI_Page.ts` 만 · 챗봇 파일 안 건드림.
- 225-3 · 225-4 는 검토만(코드 없음) → 겹침 없음.
## 8. 구현 최소안
기반(몫 A 가 먼저 · 둘 다 씀):
- (a) `ui_template_workflow_layout.ts` 119 — `index === 1` → `options?.routes?.[index] === ROUTES.B04_PREPROCESS`(전처리 시스템 관리자 전용 = 길 기준 · 지금 부르는 곳 B01 표 · B03 · B04 · B05/06 · B07 · B08 · B09 · 초안 모두 `WORKFLOW_STEP_ROUTES` 라 그대로 · `ROUTES` 이미 import 2).
- (b) `app_shell.ts` 121-124 · 167-169 — 집 없는 요소 받음(`home` null → 닫을 때 안 옮김).
몫 A — 대시보드(225-1):
- `B01_Dashboard_UI_Page.ts` — `buildPage` 에서 grid 채운 뒤 새 함수 하나: grid 자식 컨테이너마다 제목(`.ui-card__title`) → `createStepBar(제목들, -1, { orientation: "vertical", icons, routes: 제목들, onStepClick: i → 컨테이너.scrollIntoView({ behavior: "smooth", block: "start" }) })` → `setDrawerSteps(…)`. 역할 규칙을 다시 안 씀(화면 차례를 읽음) · `homeButton` 없음(지금이 대시보드).
- `ui_template_general_layout.css` — scroll-margin-top 한 규칙(5장).
- 늦게 끝난 그림 막기: 맡기기 전 `currentRoute() === ROUTES.B01_ACCOUNT` 확인 한 줄(B01 은 자료를 기다린 뒤 그림 · 그 사이 떠나면 새 쪽 서랍에 대시보드 줄이 들어감 · `setDrawerSteps` 는 차례 검사 없음).
몫 B — 시스템 설정 4 페이지(225-2):
- 새 `A00_Common/m_settings_nav.ts`(`b_workflow_nav.ts` 짝 이름 · B01 폴더도 가능하나 M → B01 의존이 생김):
- `settingLinks(user, companyId)` = B01 165-200 규칙을 옮긴 순수 목록(key · 이름 · 설명 · 길 · 인자) · M01 은 인자 `undefined`(`{}` 면 주소 끝에 「?」 · 시험 기대값 어긋남).
- `mountSettingsDrawer(user, activeKey, companyId)` = `createStepBar(…, { homeButton: true, … })` → `setDrawerSteps` · 누름 = 같은 길이면 `takeLeaveGuard()` 먼저 → `navigateTo(길, 인자)`.
- `B01_Dashboard_UI_Page.ts` 165-200 — `settingLinks` 로 카드만 그림(규칙 한 벌).
- M01 page 56 뒤 한 줄 — `mountSettingsDrawer(user, "m01", null)`.
- M02 page 236 뒤 한 줄 — `mountSettingsDrawer(user, entry.open, company)`.
- `test_b01_settings_cards.py` `_cards` — 옮긴 함수 소스(`export` 떼고)를 같이 실음 · 기대값 그대로(동작 안 바뀜 증명) · 지금 `_fn` 정규식은 `^function` 만 잡음.
역할별 표시:
- 대시보드 ☰: 그 역할 화면의 컨테이너 그대로(10 · 8 · 6).
- 설정 ☰: 시스템 관리자 = 🏠 + 넷 · 회사 관리자 · 일반 = 🏠 + 구조물 조합(M02 만 · M01 은 못 들어옴).
- 새 locale 키 없음(카드 이름 · 컨테이너 제목 · 「대시보드」 다 있음).
확인:
- 시험(고친 대상만): `test_b01_settings_cards` · `test_197_1_dashboard_option_card` · `test_device_drawer`(B07 그대로) · `test_design_page_single` · `test_m02_layer_screen` + 새 `test_225_drawer_shortcuts.py`
- Node: `settingLinks` 역할 셋 · 지금 칸 · 전처리 규칙이 길 기준(대시보드 둘째 칸이 회사 관리자 · 일반에서 켜짐).
- 브라우저(자기 vite 포트 · `test_device_audit` 의 `AISLO_UI_BASE` 꼴 · 꺼지면 건너뜀): 대시보드 ☰ 이름 = 컨테이너 제목 차례 · 「보안」 누름 → 서랍 닫힘 · 보안 위 끝 ≈ 52 · M01 ☰ = 대시보드 · 마스터 데이터 · 구조물 조합 · 구조물 옵션 · 도면 양식 · 강조 = 마스터 데이터 · 「도면 양식」 → 해시 `open=도면` · M02 고친 채 「구조물 옵션」 → 물음 창. 로그인 계정이 시스템 관리자인지 먼저 확인.
- `npm run typecheck` · prettier(고친 TS · CSS) · `ruff format`(새 시험).
- 화면 확인 거리(사용자): 역할 셋 대시보드 ☰ 바로가기 · 굴림 · 휴대폰 폭 · 설정 4 페이지 ☰ 강조 · 이동 · M02 저장 안 한 채 이동 물음.
두 몫 파일 경계:
| 몫 | 파일 |
| --- | --- |
| A 대시보드 | 기반 (a) · (b) · `B01_Dashboard_UI_Page.ts`(`buildPage` 쪽) · `ui_template_general_layout.css` · 새 시험 앞부분 |
| B 설정 4 페이지 | 새 `m_settings_nav.ts` · `B01_Dashboard_UI_Page.ts`(`buildSystemSettingsPanel` 쪽) · M01 page · M02 page · `test_b01_settings_cards.py` · 새 시험 뒷부분 |
- 겹침 = `B01_Dashboard_UI_Page.ts`(서로 다른 함수) · 기반 (a)(b) → 권함: 한 창이 A → B 차례로(전체 100줄 안팎) · 나누면 A 합친 뒤 B.
## 9. 정할 것(사용자)
- 아이콘 쓸지 · 어떤 것 — 제안: 대시보드 = 📊 리소스 · ⚙️ 시스템 설정 · 🗂️ 프로젝트 · 📦 임시 보관함 · 👥 사용자/팀원 · 📨 가입 요청 · 🏢 회사 · 👤 기본정보 · 🔒 보안 · 📜 로그 / 설정 = 🗄️ 마스터 데이터 · 🧱 구조물 조합 · 🎛️ 구조물 옵션 · 📑 도면 양식(제목 글 ↔ 아이콘 짝은 같은 그림 때 `L()` 로 맞춤).
- 대시보드 ☰ 에 설정 4 페이지도 바로 넣을지(이 안 = 「시스템 설정」 한 줄 → 그 컨테이너로 굴림).
- 굴린 뒤 접혀 있던 시스템 설정 컨테이너를 펼칠지.
- (나중) 굴리는 동안 지금 컨테이너 강조 따라가기.
## 10. 덧 발견(이번 밖)
- B03 ☰ 진행 단계 없음(2장 끝).
- `B01_Dashboard_UI_Style.css` 789줄 — 700 초과.
- `.app-header.is-drawer-open` z-overlay(`app_shell.ts` 444)는 B·M 규칙(504-509 · 더 구체적)에 눌려 B·M 에선 안 먹음 — 지금은 201 로 좌측 패널(200) 위라 탈 없음.
- `setDrawerSteps` 에 차례 검사 없음 — 늦게 끝난 옛 페이지가 새 쪽 서랍에 맡길 수 있음(B 쪽도 같음 · 빠른 이동 때만).