chore(plan): 10-10 조사 AE(표 레벨 외부 사례)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LLCk2y5xE8YGVgjbTntWsY
2026-10-10 17:29:58 +09:00
parent a23ccc2b04
commit ef59f49896
1 changed files with 109 additions and 0 deletions
@@ -0,0 +1,109 @@
+# 조사 AE — 표 레벨 기능 외부 사례 (요구 99 · 조사만)
+
+대상 = B09 설계내역서 레벨(182 · 184 · 200-2 · 201 · 204-1) + 공용 표 `ui_template_data_table.ts` level 옵션. 코드 · 자료 고침 없음.
+
+## 1. 한눈 결론
+
+- 지금 레벨은 「들여쓰기 + 굵게」 보기와 「한 줄씩 옮기는 손질」뿐. 외부 표가 모두 가진 **접기 · 펴기(▸ ▾)와 레벨 단추(1 · 2 · 3 · 전체)가 없음** — 사용자가 「제대로 안 됨」이라 느낄 가장 큰 까닭.
+- 키가 일반 표와 거꾸로 — 우리 ↑↓ = 줄을 옮김(내역이 바뀜) · ←→ = 레벨. 외부(엑셀 · MS Project · 웹 표 · 접근성 기준)는 ↑↓ = 고른 줄만 옮김 · ←→ = 접기 · 펴기 · 레벨은 Alt+Shift+←→ 나 Tab. 게다가 **되돌리기(Ctrl+Z)가 없음**.
+- 번호는 1 · 2단 묶음만 이름 앞에 붙음 — 실무 엑셀은 「공종」 칸을 따로 두고 Ⅰ · 1 · 4.1 · Ⅱ 로 적음. 경쟁사 STmate 는 번호 꼴까지 고르게 함.
+- 한 줄만 고를 수 있어 여러 줄 한꺼번에 들여쓰기 · 옮기기 · 지우기 · 복사 · 붙여넣기 불가. 끌기는 표 가장자리에서 저절로 내려가지 않음.
+- 넣는 길 — 새 라이브러리 없이 공용 표에 「접기」 옵션 하나(줄 차례 + 레벨만으로 숨김 셈) → 설계내역서 · 총괄 · 원가계산서 · 목록표가 같이 얻음. 키 체계 · 번호 칸은 사용자 결정 거리.
+
+## 2. 지금 구현 · 빈틈
+
+지금 생김새:
+
+| 부분 | 지금 | 자리 |
+|---|---|---|
+| 저장 꼴 | 평면 배열 + parent — `user.bill` v2 `{v:2, rows:[{key · parent · kind group · 고친 칸}], gone}` · 배열 차례 = 형제 차례 | `B09_Estimation_UI_Tabs_Bill_Edit.ts` 머리 |
+| 셈 | `Calc_Bill` 짝(.py ↔ .ts)이 나무를 다시 세움 → 부모 먼저 차례 · `level` 1~5 · `kind` title / group / item · 자식 생긴 항목 = 저절로 묶음 · 묶음 금액 = 자손 항목 합(묶음 머리 줄에) · 깊이 5 | `B09_Estimation_Calc_Bill.ts` tree() · computeBill() |
+| 번호 | 직접비 1 · 2단 묶음만 `1` · `1.1` — 이름 글 앞에 붙임(고칠 때 떼어 냄) · 관급 · 3단 이하 없음 | 같은 파일 끝 · `…_UI_Tabs_Bill.ts` |
+| 그리기 | 공용 표 `level {key, of}` → 명칭 칸 왼쪽 맞춤 + 레벨마다 1em 들여쓰기 · 묶음 · 제목 굵게 · 손 줄 왼쪽 띠 · 줄 1,000개용 보이는 구간만 그림 | `ui_template_data_table.ts` · `.css` 177~189 |
+| 손질 | 우클릭(위 · 아래 · 하위 줄 추가 · 새 공종 · 위로 · 아래로 · 들여 · 내어쓰기 · 묶음 ↔ 항목 · 자동값으로 · 지우기) · 도구 단추 넷 · 끌기(위아래 = 자리 · 좌우 = 레벨 · 자손 함께 · 빨간 점선 = 못 놓음) | `…_Bill_Edit.ts` · `…_Bill_Level.ts` · `…_Bill_Drag.ts` |
+| 키 | 고른 줄 + 글 칸 편집 아님 → Tab / Shift+Tab · ← → = 레벨 · ↑ ↓ · Alt+↑↓ = 옮김 · Esc = 편집 끝 / 고름 풂 | `…_Bill_Level.ts` keyAct() |
+| 고름 | 한 줄(줄 키 하나) · 표시 = 호버와 같은 색 + 밑줄(`is-focus`) | 같은 파일 · `.css` 149 |
+
+빈틈:
+
+| # | 빈틈 | 지금 | 사용자가 겪는 것 | 외부 기준 |
+|---|---|---|---|---|
+| 1 | 접기 · 펴기 없음 | 늘 전부 펼침 | 줄이 많으면 공종 뼈대가 한눈에 안 보임 | 엑셀 ± · MS Project · AG Grid · Tabulator · STmate 레벨 거름 |
+| 2 | 레벨 단추 없음 | — | 「1 · 2단만 보기」(실무 내역서총괄표 꼴) 불가 | 엑셀 1 2 3 · STmate 「= 이상 ~ ====== 이상」 |
+| 3 | 계층 표시 약함 | 1em 들여쓰기 + 굵게 · ▸▾ 없음 · 트리 선 없음 · 글 크기 차 지움(200-2) | 3 · 4 · 5단 구분이 흐림 · 자식 있는 줄인지 모름 | Tabulator 가지 선 · AG Grid 쉐브론 · Handsontable 머리 들여쓰기 |
+| 4 | 키 충돌 | ↑↓ = 줄 옮김 · ←→ = 레벨 · Tab 가로챔 | 표를 키로 훑다 내역 차례가 바뀜 · Tab 으로 표 밖에 못 나감 | ↑↓ = 고름 · ←→ = 접기/펴기 · Alt+Shift+←→ = 레벨 |
+| 5 | 되돌리기 없음 | 키 한 번 = 바로 바뀜 | 잘못 누르면 손으로 되돌려야 함 | 모든 도구 Ctrl+Z |
+| 6 | 한 줄만 고름 | 고름 = 줄 키 하나 | 10줄을 한 단 내리려면 10번 | MS Project · 구글 시트 = 여러 줄 고르고 Alt+Shift+→ |
+| 7 | 복사 · 붙여넣기 없음 | — | 비슷한 묶음을 또 만들 때 줄마다 새로 | 엑셀 · Handsontable 줄 복사 |
+| 8 | 번호 약함 | 1 · 2단만 · 이름 글에 붙음 · 관급 없음 | 실무 엑셀 꼴(공종 칸 Ⅰ · 1 · 4.1 · Ⅱ)과 다름 | MS Project 개요 번호 자동 · WBS 꼴 · STmate 번호 자동입력 |
+| 9 | 끌기 다듬기 | 가장자리 자동 스크롤 없음 · 잡을 손잡이 없음(글 칸은 못 잡음) · 그린 구간 밖 못 놓음 | 긴 내역에서 먼 자리로 못 끎 · 잡을 곳을 모름 | AG Grid 끌기 = 자동 스크롤 · 줄 위 0.5초 머물면 자식 |
+| 10 | 고른 줄 · 함께 갈 줄 표시 | 호버 색과 같음 · 자손 표시 없음 | 무엇을 골랐는지 · 옮기면 몇 줄이 가는지 흐림 | AG Grid · MS Project 고른 줄 진한 색 |
+| 11 | 접근성 | role · aria 없음 | 화면 읽기 프로그램이 계층을 모름 | ARIA treegrid `aria-level` · `aria-expanded` |
+| 12 | 보기 전용 표도 같음 | 총괄 · 원가계산서 · 목록표 · 노임 · 산근 · B08 = 들여쓰기만 | 큰 목록표에서도 접을 수 없음 | 공용 옵션 하나면 같이 해결 |
+
+## 3. 외부 공통 꼴
+
+| 기능 | 엑셀(그룹 · 윤곽) | MS Project | AG Grid · TanStack · Tabulator | 견적 프로그램(STmate · 실무 엑셀) | ARIA treegrid |
+|---|---|---|---|---|---|
+| 저장 꼴 | 시트 차례 + 행마다 윤곽 수준(최대 8) | 작업 차례 + 개요 수준 | AG = 평면 + `parentId`(`treeDataParentIdField`) · TanStack = `getSubRows` → 펼친 줄만 평면 + `row.depth` · Tabulator = `_children` | STmate `BOQ11` 한 표에 말단 + 제목(T1~T5) + 계(E1~E5) + 제외(C) · `SORTCODE` / `ENDCODE` 로 짝 | 줄마다 `aria-level`(1부터) |
+| 접기 · 펴기 | 묶음마다 ± | 요약 작업 ▸ · Alt+Shift+- / = | 쉐브론 ▸▾ · 처음 펼칠 레벨 지정(`groupDefaultExpanded` · `dataTreeStartExpanded` 레벨별) | STmate = 레벨 거름 · 실무 = 내역서총괄표가 2단까지 접은 같은 나무 | `aria-expanded` · → 펴기 · ← 접기 |
+| 레벨 한꺼번에 | 1 2 3 단추(그 레벨까지 펼침) | 개요 레벨 1~9 보기 | 레벨별 펼침 배열 | STmate 「= 이상 ~ ====== 이상」 · 「1레벨(소계) 이상 ~ 6레벨(총대계) 이상」 | — |
+| 계층 표시 | 여백의 윤곽 막대 | 들여쓰기 + 요약 굵게 | 들여쓰기 px + 가지 선 + 아이콘 | 실무 = 공종 번호 칸 + 묶음 뒤 빈 줄(들여쓰기 없음) | 레벨 값 |
+| 요약 줄 합 | SUBTOTAL · 요약 줄 아래(기본) / 위 선택 | 요약 작업 = 하위 합 자동 | `aggFunc` 로 부모 줄 합 · 접혀도 합은 보임 | 실무 = 묶음 머리 줄에 합 · STmate = 제목 줄 + 계 줄 둘 다 | — |
+| 들여 · 내어쓰기 | 그룹 / 그룹 해제 | Alt+Shift+→ / ← · 여러 줄 함께 · 위 작업이 요약이 됨 | Handsontable 메뉴 「자식 줄 넣기 · 부모에서 떼기」 | STmate 「계표시(레벨) 1단계 상향 / 하향」 | 편집 규칙 없음(앱 몫) |
+| 번호 | 없음(손 · 수식) | 개요 번호 1 · 1.1 자동(손으로 못 고침) · WBS 꼴 = 레벨마다 숫자 · 대문자 · 소문자 · 구분자 | 없음 | STmate 「공종번호 자동입력」 = 가..하 · a..z · 0 · 00 · 000 · 앞뒤 글자 · 실무 Ⅰ / 1 / 4.1 / Ⅱ | `aria-posinset` · `aria-setsize` |
+| 끌어 놓기 | 행 잘라 붙이기 | 끌기 | AG = 줄 위 0.5초 머물면 그 줄 자식 · 자기 아래 금지 · Tabulator = 나무에선 끌기 막음 | — | — |
+| 키 이동 | ↑↓ 칸 이동 | ↑↓ 고름 | ↑↓ 고름 | — | ↑↓ 줄 · Home / End · Tab = 다음 단추 · 표 밖 |
+| 여러 줄 | 범위 고름 | 범위 고른 뒤 들여쓰기 | 여러 줄 고름 | STmate 「선택된 항목만」 일괄 보정 | — |
+
+공통 꼴 요약 — 줄은 평면 배열(차례 + 깊이 또는 부모 키) · 화면엔 펼친 줄만 · 자식 있는 줄에 ▸▾ · 접혀도 묶음 합은 보임 · 레벨 단추로 한 번에 접음 · 번호는 차례로 자동.
+
+## 4. 우리 표에 넣을 것 (제안 · 새 의존성 없음)
+
+| 차례 | 무엇 | 크기 | 꼴 |
+|---|---|---|---|
+| ① | 공용 표 접기 · 펴기 | 작음~중간 · `ui_template_data_table.ts` +60줄 안팎(428 → 500 안) · CSS +15 · 새 시험 1 | `level: { key, of, fold?: { id: (i) => string, open?: number } }` — 자식 = 바로 아래 줄 레벨이 더 큼(차례 + 레벨만, parent 필요 없음) · 접힌 줄 아래 더 깊은 줄 숨김 · ▸▾ 단추 = 레벨 칸 글 앞 · `data-i` = 원래 줄 번호 그대로(메뉴 · 끌기 · 고침 그대로) · 보이는 구간 셈은 펼친 줄 목록 위에서 · 접힘 = 줄 키 모음(표 안에 두고 setRows 뒤에도 지킴) · `t.foldTo(n)` |
+| ② | 레벨 단추 [1] [2] [3] [전체] | 작음 · `…_Bill_Level.ts` +20 | 설계내역서 도구 줄 · 보기 전용 표는 줄 많은 표(목록표 · 집계표)만 |
+| ③ | 되돌리기 Ctrl+Z · 다시 Ctrl+Y | 작음 · +30 | `user.bill` 이전 판을 메모리에 쌓음(탭 안 · 저장 안 함) · 캐시 · [저장] 흐름 그대로 |
+| ④ | 키 정리 | 작음 · keyAct +10 · 시험 200_2 · 204_1 기대값 | 안 = ↑↓ 고름 옮김 · ←→ 접기 / 펴기(ARIA) · Alt+Shift+←→ 와 Tab / Shift+Tab = 레벨 · Alt+↑↓ = 줄 옮김 — 204 「방향키 = 레벨」 뒤집음 |
+| ⑤ | 계층 표시 | 작음 · CSS +15 | ▸▾(①) + 레벨 칸 세로 안내선(배경 그라데이션 · 1em 간격 · 요소 안 늘림) + 고른 줄 진한 색 + 함께 갈 자손 옅은 띠 |
+| ⑥ | 여러 줄 고르기 | 중간 · +100 · 시험 | Shift+클릭 · Shift+↑↓ = 이어진 줄 · 같은 부모 형제끼리만 한꺼번에 들여 · 내어 · 옮김 · 지움(MS Project 꼴) |
+| ⑦ | 끌기 다듬기 | 작음 · `…_Bill_Drag.ts` +20 | 표 위아래 끝 근처 자동 스크롤 · 레벨 칸 왼쪽 손잡이 ⋮⋮ · 접힌 묶음은 자손째(지금 규칙 그대로) |
+| ⑧ | 번호 칸 | 중간 · 셈 짝 .py ↔ .ts + 거울 시험 | 실무 꼴 「공종」 칸 따로(Ⅰ · 1 · 4.1 · Ⅱ) · 3단 이하 번호 여부 · 번호 꼴(STmate · WBS 꼴) |
+| ⑨ | 줄 복사 · 붙여넣기 · 접근성 | 중간 / 작음 | 묶음째 복사(새 hand: 키) · `role="treegrid"` · 줄 `aria-level` · `aria-expanded`(① 안에서 몇 줄) |
+
+- 설계내역서 = ①~⑨ · 보기 전용 표(총괄 · 원가계산서 · 목록표 · 노임 · 산근 · B08 집계) = ① · ② · ⑤ · ⑨(접근성)만 — 옵션을 켠 표만 바뀜.
+- 접힘 · 펼침 = 보기 상태 — 작업본 · 초기값에 넣지 않음.
+- 묶음 합은 이미 머리 줄에 있어 접어도 금액이 보임(외부 꼴과 같음).
+
+사용자 결정 거리:
+
+- ⬜ AE-a 키 체계 — 추천 표준(④) / 지금(방향키 = 레벨) 그대로.
+- ⬜ AE-b 처음 펼침 — 추천 전부 펼침 + 레벨 단추 / 2단까지만.
+- ⬜ AE-c 번호 — 추천 실무 꼴 「공종」 칸 따로 · 1 · 2단 + 관급 Ⅱ / 지금대로 이름 앞.
+- ⬜ AE-d 접힘 기억 — 추천 탭 안에서만(새로 열면 펼침) / 브라우저에 기억.
+
+## 5. 출처
+
+웹:
+
+- 엑셀 윤곽 · 그룹 — https://support.microsoft.com/en-us/office/outline-group-data-in-a-worksheet-08ce98c4-0063-4d42-8ac7-8278c49e9aff
+- 엑셀 단축키(Ctrl+8 윤곽 기호) — https://support.microsoft.com/en-us/office/keyboard-shortcuts-in-excel-1798d9d5-842a-42b8-9c99-9b7213f0040f
+- 구글 시트 행 그룹(Alt+Shift+→ / ←) — https://www.howtogeek.com/755108/how-to-group-and-ungroup-rows-and-columns-in-google-sheets/
+- MS Project 단축키(들여 · 내어쓰기 · 하위 숨김) — https://support.microsoft.com/en-us/office/keyboard-shortcuts-for-project-7a4dc22b-ceb8-4a97-ac6f-6f9eaf36414a
+- MS Project WBS · 개요 번호 — https://support.microsoft.com/en-us/project/create-wbs-codes-in-project-desktop · https://support.microsoft.com/en-us/project/wbs-code-definition-dialog-box
+- AG Grid 평면 + parentId — https://www.ag-grid.com/vue-data-grid/tree-data-self-referential/
+- AG Grid 나무 끌기 — https://www.ag-grid.com/vue-data-grid/tree-data-row-dragging/
+- TanStack Table 펼치기 — https://tanstack.com/table/v8/docs/guide/expanding · https://tanstack.com/table/v8/docs/api/features/expanding
+- Handsontable 부모 · 자식 줄 — https://handsontable.com/docs/row-parent-child
+- Tabulator 나무 — https://tabulator.info/docs/6.3/tree
+- ARIA treegrid — https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/ · https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/examples/treegrid-1/
+- 견적 도구 접기(접어도 합 보임) — https://help.constructiononline.com/en/expand/collapse-estimate-category-1
+
+지식DB · 실무:
+
+- STmate 내역 편집 「계표시(레벨) 1단계 상향/하향」 · `+=` ~ `+=====` 레벨 — `resources/knowledge/original/경쟁사 프로그램/STmate 분석/20_분석/26_편집기와_사이클식.md` §5
+- STmate 레벨 거름 · 공종번호 자동입력 `wITNum` — 같은 폴더 `34_화면구조_정리.md` §2.1 · `22_UI_폼_분석.md` §3.5
+- STmate `BOQ11` T · E · C 줄 · `SORTCODE` / `ENDCODE` — 같은 폴더 `16_골든셋_회귀_결과.md` §4.1 · `02_데이터셋과_파일형식.md`
+- 다산 ESTX `Level` 칸(-3 ~ 3 · 뜻 확인 불가) — `resources/knowledge/original/원가계산/다산소프트/ESTX_값사전_견적내역.md`
+- 실무 내역서 꼴(공종 칸 Ⅰ · 1 · 4.1 · Ⅱ · 묶음 머리 줄 합 · 내역서총괄표 = 2단까지) — `resources/knowledge/original/실무문서/01.산불거창(거창북상병곡)/01.내역서/00.25년_산불_거창(…)내역+수량.xlsx` 「내역서」 · 「내역서총괄표」 시트