feat(가이드): B02 프로젝트 등록 가이드 글 5 · 그림 8 · 장면 목록(PLAN 540-1 · 요구 359 · 360)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-26 09:18:32 +09:00
parent 9787507bca
commit 30518a03f9
14 changed files with 493 additions and 4 deletions
@@ -1,9 +1,32 @@
-# 프로젝트 등록 설명서
+# 프로젝트 등록

-## 이 화면에서 하는 일
+새 임도 설계 프로젝트의 이름 · 종류 · 노선 구간 · 도면 표제란 값을 입력해 프로젝트를 만듦.
+
+## 여는 길
+
+- 대시보드 [프로젝트] 구역의 [+] → 새 프로젝트 창에서 [임도설계].
+
+![화면 한눈에](B02_00_overview.webp)
+
+## 화면 구역
+
+| 번호 | 구역 | 하는 일 |
+| --- | --- | --- |
+| 1 | 사업 연도 · 사업 지역 | 프로젝트명의 바탕이 되는 연도와 지역 입력 |
+| 2 | 임도 종류 · 프로젝트명 | 임도 종류 선택 · 이름은 앞 세 값으로 자동 완성(고칠 수 있음) |
+| 3 | 노선 시작 · 종료 누가거리 | 계획노선 가운데 쓸 구간(비우면 전 구간) |
+| 4 | 시행청 · 설계일자 | 도면 표제란에 들어갈 값 |
+| 5 | 과업책임자 · 분야별책임자 | 도면 표제란 책임자 선택 |
+| 6 | 설계자 | 도면 표제란 설계자 선택 |
+| 7 | 비고 | 메모(선택) |
+| 8 | 단추 줄 | [?] 도움말 · [취소] · [프로젝트 생성] → [생성과 취소](B02/04_생성과_취소) |

 ## 작업 순서

-## 버튼
+1. [사업 지역] 입력 → [기본 항목 입력](B02/01_기본_항목_입력).
+2. [임도 종류] 선택 → [임도 종류와 노선 구간](B02/02_임도_종류와_노선_구간).
+3. 필요하면 노선 구간 입력 → [임도 종류와 노선 구간](B02/02_임도_종류와_노선_구간).
+4. 도면 표제란 값 입력 → [도면 표제란](B02/03_도면_표제란).
+5. [프로젝트 생성] → 파일입력 화면으로 넘어감 → [생성과 취소](B02/04_생성과_취소).

-## 주의할 점
+> 주의: 임도 종류는 이후 노선설계의 설계속도 선택지와 종단기울기 상한을 정함. 만들기 전에 확인.
@@ -0,0 +1,26 @@
+# 기본 항목 입력
+
+사업 연도 · 사업 지역 · 프로젝트명 입력.
+
+## 여는 길
+
+- 프로젝트 등록 화면 맨 위 줄.
+
+![기본 항목 칸](B02_01_basic_fields.webp)
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | (그림 ①) [사업 연도] 확인 — 올해 연도가 미리 들어 있음 (2000 ~ 올해 + 5) |
+| 2 | (그림 ②) [사업 지역] 입력 (예: 울진군 금강송면) — 필수 |
+| 3 | (그림 ③) [임도 종류] 선택 |
+| 4 | (그림 ④) [프로젝트명] 확인 — 앞 세 값으로 자동 완성 |
+| 5 | 이름 중간이나 끝에 글을 덧붙이고 싶으면 [프로젝트명] 칸을 직접 고침 |
+
+## 보이는 것
+
+- [프로젝트명] 은 「사업 연도 + 사업 지역 + 임도 종류」 순으로 채워짐 (그림 ④ · 예: 2026 울진군 금강송면 간선임도).
+- 연도 · 지역 · 종류를 다시 바꿔도 직접 덧붙인 글은 그대로 남고 해당 조각만 바뀜.
+
+> 주의: [사업 지역] 이 비어 있으면 생성 안 됨 → [생성과 취소](B02/04_생성과_취소).
@@ -0,0 +1,42 @@
+# 임도 종류와 노선 구간
+
+임도 종류를 고르고, 계획노선 중 설계에 쓸 구간(누가거리)을 정함.
+
+## 여는 길
+
+- 프로젝트 등록 화면 가운데 줄.
+
+![임도 종류 고르기](B02_02_road_type.webp)
+
+## 단계
+
+### 임도 종류
+
+- 그림 ① [임도 종류] · ② [프로젝트명] — 종류를 바꾸면 프로젝트명 글자도 바뀜.
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | [임도 종류] 칸을 누름 |
+| 2 | 간선임도 · 산불진화임도 · 작업임도 중 선택 |
+| 3 | [프로젝트명] 의 종류 글자가 함께 바뀜 |
+
+### 노선 구간
+
+![노선 구간 입력](B02_03_route_range.webp)
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | (그림 ①) [노선 시작 누가거리 (m)] 에 시작 위치 입력 — 비우면 처음부터 |
+| 2 | (그림 ②) [노선 종료 누가거리 (m)] 에 끝 위치 입력 — 비우면 끝까지 |
+| 3 | (그림 ②) 종료 칸 이름에 「연장 ○○m」 가 표시되는지 확인 |
+
+## 보이는 것
+
+![종료가 시작보다 작을 때](B02_07_range_error.webp)
+
+- 시작과 종료를 모두 넣으면 종료 칸 제목에 구간 길이가 나옴 (예: 연장 2500.0m).
+- 종료가 시작보다 작거나 같은 채 [프로젝트 생성] 을 누르면 종료 칸 아래에 「종료 누가거리는 시작보다 커야 합니다.」 표시 · 프로젝트는 만들어지지 않음.
+
+> 주의: 임도 종류는 노선설계 화면의 설계속도 선택지와 종단기울기 상한 기준이 됨.
+
+> 참고: 계획노선 자료가 공사지 전체일 때 쓸 구간만 따로 정하는 칸. 한 구간 전체를 쓰면 둘 다 비워 둠.
@@ -0,0 +1,25 @@
+# 도면 표제란
+
+도면 오른쪽 아래 표제란에 들어갈 시행청 · 설계일자 · 책임자를 미리 입력. 비워 두면 도면에 빈칸으로 나감.
+
+## 여는 길
+
+- 프로젝트 등록 화면 아래쪽 줄.
+
+![도면 표제란 칸](B02_04_title_block.webp)
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | (그림 ①) [시행청 (도면 표제란)] 입력 |
+| 2 | (그림 ②) [설계일자 (도면 표제란)] 에서 날짜 선택 |
+| 3 | (그림 ③ ④ ⑤) [과업책임자 (도면 표제란)] · [분야별책임자 (도면 표제란)] · [설계자 (도면 표제란)] 를 목록에서 선택 |
+| 4 | (그림 ⑥) 필요하면 [비고] 에 메모 |
+
+## 보이는 것
+
+- 세 책임자 칸은 같은 회사 팀원 목록. 처음에는 프로젝트를 만드는 본인이 선택됨.
+- 목록에 없는 사람은 대시보드 [팀원 관리] 에서 추가한 뒤 고름 → [B01 회사와 팀원](B01/05_회사와_팀원).
+
+> 참고: 나중에 대시보드 [프로젝트] 표의 [수정] 에서 같은 값을 고칠 수 있음 → [B01 프로젝트 목록](B01/02_프로젝트_목록).
@@ -0,0 +1,28 @@
+# 생성과 취소
+
+입력을 마치고 프로젝트를 만들거나, 만들지 않고 돌아감.
+
+## 여는 길
+
+- 프로젝트 등록 화면 오른쪽 아래 단추 줄.
+
+![단추 줄](B02_06_buttons.webp)
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | 필수 칸(사업 연도 · 사업 지역 · 프로젝트명)을 채움 |
+| 2 | [프로젝트 생성] 누름 |
+| 3 | 「프로젝트가 생성되었습니다. 파일 입력 단계로 이동합니다.」 알림과 함께 파일입력 화면이 열림 → [B03](B03/00_설명서) |
+| 4 | 만들지 않으려면 [취소] — 대시보드로 돌아감 |
+
+## 보이는 것
+
+![필수 칸 오류](B02_05_required_error.webp)
+
+- 비워 둔 필수 칸 아래에 「필수 항목을 입력하세요.」 표시.
+- 연도가 범위를 벗어나면 「숫자 범위를 벗어났습니다.」 표시.
+- 오류가 있으면 프로젝트는 만들어지지 않음.
+
+> 참고: 그림 ① [?] 는 이 화면의 도움말을 엶 · ② [취소] · ③ [프로젝트 생성].
@@ -0,0 +1,345 @@
+[
+  {
+    "name": "B02_00_overview",
+    "route": "#/b02-proj-register",
+    "project": "none",
+    "before": [
+      {
+        "wait": ".b02-proj__grid"
+      },
+      {
+        "wait_ms": 1200
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(1)\", \".b02-proj__grid > :nth-child(2)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__u1';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(3)\", \".b02-proj__grid > :nth-child(4)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__u2';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(5)\", \".b02-proj__grid > :nth-child(6)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__u3';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(7)\", \".b02-proj__grid > :nth-child(8)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__u4';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(9)\", \".b02-proj__grid > :nth-child(10)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__u5';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(11)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__u6';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(12)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__u7';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      },
+      {
+        "eval": "document.querySelectorAll('.b02-proj__grid select option').forEach(o=>{o.textContent=o.textContent.replace('엄상돈','홍길동')})"
+      }
+    ],
+    "clip": null,
+    "callouts": [
+      {
+        "n": 1,
+        "sel": "#__u1"
+      },
+      {
+        "n": 2,
+        "sel": "#__u2"
+      },
+      {
+        "n": 3,
+        "sel": "#__u3"
+      },
+      {
+        "n": 4,
+        "sel": "#__u4"
+      },
+      {
+        "n": 5,
+        "sel": "#__u5"
+      },
+      {
+        "n": 6,
+        "sel": "#__u6"
+      },
+      {
+        "n": 7,
+        "sel": "#__u7"
+      },
+      {
+        "n": 8,
+        "sel": ".b02-proj__actions"
+      }
+    ]
+  },
+  {
+    "name": "B02_01_basic_fields",
+    "route": "#/b02-proj-register",
+    "project": "none",
+    "before": [
+      {
+        "wait": ".b02-proj__grid"
+      },
+      {
+        "fill": ".b02-proj__grid > :nth-child(2) input",
+        "value": "울진군 금강송면"
+      },
+      {
+        "wait_ms": 300
+      },
+      {
+        "wait_ms": 800
+      },
+      {
+        "eval": "document.querySelectorAll('.b02-proj__grid select option').forEach(o=>{o.textContent=o.textContent.replace('엄상돈','홍길동')})"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(1)\", \".b02-proj__grid > :nth-child(4)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__clip';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      }
+    ],
+    "clip": "#__clip",
+    "clip_pad": 4,
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b02-proj__grid > :nth-child(1)"
+      },
+      {
+        "n": 2,
+        "sel": ".b02-proj__grid > :nth-child(2)"
+      },
+      {
+        "n": 3,
+        "sel": ".b02-proj__grid > :nth-child(3)"
+      },
+      {
+        "n": 4,
+        "sel": ".b02-proj__grid > :nth-child(4)"
+      }
+    ]
+  },
+  {
+    "name": "B02_02_road_type",
+    "route": "#/b02-proj-register",
+    "project": "none",
+    "before": [
+      {
+        "wait": ".b02-proj__grid"
+      },
+      {
+        "select": ".b02-proj__grid > :nth-child(3) select",
+        "value": "fire"
+      },
+      {
+        "wait_ms": 500
+      },
+      {
+        "eval": "document.querySelectorAll('.b02-proj__grid select option').forEach(o=>{o.textContent=o.textContent.replace('엄상돈','홍길동')})"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(3)\", \".b02-proj__grid > :nth-child(4)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__clip';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      }
+    ],
+    "clip": "#__clip",
+    "clip_pad": 4,
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b02-proj__grid > :nth-child(3)"
+      },
+      {
+        "n": 2,
+        "sel": ".b02-proj__grid > :nth-child(4)"
+      }
+    ]
+  },
+  {
+    "name": "B02_03_route_range",
+    "route": "#/b02-proj-register",
+    "project": "none",
+    "before": [
+      {
+        "wait": ".b02-proj__grid"
+      },
+      {
+        "fill": ".b02-proj__grid > :nth-child(5) input",
+        "value": "1000"
+      },
+      {
+        "fill": ".b02-proj__grid > :nth-child(6) input",
+        "value": "3500"
+      },
+      {
+        "wait_ms": 500
+      },
+      {
+        "eval": "document.querySelectorAll('.b02-proj__grid select option').forEach(o=>{o.textContent=o.textContent.replace('엄상돈','홍길동')})"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(5)\", \".b02-proj__grid > :nth-child(6)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__clip';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      }
+    ],
+    "clip": "#__clip",
+    "clip_pad": 4,
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b02-proj__grid > :nth-child(5)"
+      },
+      {
+        "n": 2,
+        "sel": ".b02-proj__grid > :nth-child(6)"
+      }
+    ]
+  },
+  {
+    "name": "B02_04_title_block",
+    "route": "#/b02-proj-register",
+    "project": "none",
+    "before": [
+      {
+        "wait": ".b02-proj__grid"
+      },
+      {
+        "wait_ms": 1500
+      },
+      {
+        "eval": "document.querySelectorAll('.b02-proj__grid select option').forEach(o=>{o.textContent=o.textContent.replace('엄상돈','홍길동')})"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(7)\", \".b02-proj__grid > :nth-child(12)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__clip';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      }
+    ],
+    "clip": "#__clip",
+    "clip_pad": 4,
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b02-proj__grid > :nth-child(7)"
+      },
+      {
+        "n": 2,
+        "sel": ".b02-proj__grid > :nth-child(8)"
+      },
+      {
+        "n": 3,
+        "sel": ".b02-proj__grid > :nth-child(9)"
+      },
+      {
+        "n": 4,
+        "sel": ".b02-proj__grid > :nth-child(10)"
+      },
+      {
+        "n": 5,
+        "sel": ".b02-proj__grid > :nth-child(11)"
+      },
+      {
+        "n": 6,
+        "sel": ".b02-proj__grid > :nth-child(12)"
+      }
+    ]
+  },
+  {
+    "name": "B02_05_required_error",
+    "route": "#/b02-proj-register",
+    "project": "none",
+    "before": [
+      {
+        "wait": ".b02-proj__grid"
+      },
+      {
+        "click": ".b02-proj__actions .ui-btn--filled"
+      },
+      {
+        "wait_ms": 600
+      },
+      {
+        "eval": "document.querySelectorAll('.b02-proj__grid select option').forEach(o=>{o.textContent=o.textContent.replace('엄상돈','홍길동')})"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(1)\", \".b02-proj__grid > :nth-child(2)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__clip';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      }
+    ],
+    "clip": "#__clip",
+    "clip_pad": 4,
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b02-proj__grid > :nth-child(2)"
+      }
+    ]
+  },
+  {
+    "name": "B02_06_buttons",
+    "route": "#/b02-proj-register",
+    "project": "none",
+    "before": [
+      {
+        "wait": ".b02-proj__actions"
+      },
+      {
+        "eval": "document.querySelectorAll('.b02-proj__grid select option').forEach(o=>{o.textContent=o.textContent.replace('엄상돈','홍길동')})"
+      }
+    ],
+    "clip": ".b02-proj__actions",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b02-proj__actions .ui-help-btn"
+      },
+      {
+        "n": 2,
+        "sel": ".b02-proj__actions .ui-btn--ghost:nth-child(2)"
+      },
+      {
+        "n": 3,
+        "sel": ".b02-proj__actions .ui-btn--filled"
+      }
+    ]
+  },
+  {
+    "name": "B02_07_range_error",
+    "route": "#/b02-proj-register",
+    "project": "none",
+    "before": [
+      {
+        "wait": ".b02-proj__grid"
+      },
+      {
+        "fill": ".b02-proj__grid > :nth-child(2) input",
+        "value": "울진군 금강송면"
+      },
+      {
+        "fill": ".b02-proj__grid > :nth-child(5) input",
+        "value": "3000"
+      },
+      {
+        "fill": ".b02-proj__grid > :nth-child(6) input",
+        "value": "1000"
+      },
+      {
+        "click": ".b02-proj__actions .ui-btn--filled"
+      },
+      {
+        "wait_ms": 600
+      },
+      {
+        "eval": "document.querySelectorAll('.b02-proj__grid select option').forEach(o=>{o.textContent=o.textContent.replace('엄상돈','홍길동')})"
+      },
+      {
+        "eval": "(()=>{const q=[\".b02-proj__grid > :nth-child(5)\", \".b02-proj__grid > :nth-child(6)\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__clip';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      }
+    ],
+    "clip": "#__clip",
+    "clip_pad": 4,
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b02-proj__grid > :nth-child(5)"
+      },
+      {
+        "n": 2,
+        "sel": ".b02-proj__grid > :nth-child(6)"
+      }
+    ]
+  }
+]