260715_0

2026-07-15 18:33:33 +09:00
parent 6b1583103f
commit f533082537
201 changed files with 19776 additions and 563 deletions
@@ -0,0 +1,83 @@
+---
+status: stable
+page_id: B02_ProjRegister
+related_pages: ["[[B02_ProjRegister/B02_backend]]", "[[B02_ProjRegister/B02_db]]", "[[ui_templates]]", "[[a00_app_shell_framework]]"]
+last_updated: 2026-07-12
+---
+
+# B02_ProjRegister — Frontend
+
+신규 임도 설계 프로젝트 등록 폼. 기본정보(이름·지역·임도종류·연도·연장·메모) 입력 → 생성 후 B03으로 이동.
+
+## 파일 구조
+
+| 파일 | 위치 | 역할 |
+|---|---|---|
+| `B02_ProjRegister_UI_Page.ts` | `B02_ProjRegister/B02_ProjRegister_UI_Page.ts:1-179` | 등록 폼 렌더링 + 제출 로직 |
+| `B02_ProjRegister_UI_Style.css` | `B02_ProjRegister/B02_ProjRegister_UI_Style.css:1-66` | 스타일 (theme.css 변수만 사용) |
+
+## 컴포넌트 / 함수
+
+| 함수 | 위치 | 역할 |
+|---|---|---|
+| `renderB02ProjRegister(root)` | `B02_ProjRegister/B02_ProjRegister_UI_Page.ts:35` | 헤더+카드(2열 그리드 폼) 조립 |
+| `onB02_Proj_Submit_Click()` | `B02_ProjRegister/B02_ProjRegister_UI_Page.ts:96` | 제출 핸들러(검증→fetch POST→B03 이동) |
+
+## 입력 필드
+
+| 필드 | 컴포넌트 | 비고 |
+|---|---|---|
+| 프로젝트명 | createInputField | 필수 |
+| 지역 | createInputField | 필수 |
+| 임도 종류 | createSelectField | main/branch/fire/stream 4종 |
+| 사업연도 | createInputField(number) | 기본 올해, min 2000/max 올해+5 |
+| 예상 연장(m) | createInputField(number) | 선택, min 0 |
+| 메모 | createInputField(text) | 선택 |
+
+## 제출 로직
+
+1. **1차 유효성 검사**: name/region 필수, project_year 정수·2000~2100, estimated_length_m ≥0(입력 시)
+2. `fetch("${API_BASE_URL}/b02/project", POST)` 직접 호출 (별도 Api_Fetch 파일 없음)
+   - body: name, region, road_type, project_year, estimated_length_m, memo
+3. 성공: `localStorage`에 `CURRENT_PROJECT_ID_KEY`로 project_id 저장 → 성공 토스트 → `navigateTo(ROUTES.B03_FILE_INPUT)`
+4. 실패: 응답 detail/message 파싱해 에러 토스트
+
+## 로컬라이제이션
+
+모든 텍스트는 [[ui_templates]]에서 로드. 하드코딩 금지.
+
+| UI 요소 | 로케일 키 |
+|---|---|
+| 제목/부제 | `B02_Proj_Title`, `B02_Proj_Subtitle` |
+| 필드 | `B02_Proj_Field_Name`, `_Region`, `_RoadType`, `_Year`, `_Length`, `_Memo` (+각 Placeholder) |
+| 임도종류 옵션 | `B02_Proj_RoadType_Main`, `_Branch`, `_Fire`, `_Stream` |
+| 제출/성공 | `B02_Proj_Submit`, `B02_Proj_Success` |
+| 오류 | `B02_Proj_Error_Required`, `Common_Validation_NumberRange`(공통) |
+
+## 스타일 (CSS)
+
+- `.b02-proj` — 페이지 래퍼 (max-width: 720px)
+- `.b02-proj__header` — 제목+부제
+- `.b02-proj__grid` — 2열 필드 그리드 (640px 이하 1열)
+- `.b02-proj__select` — 드롭다운 화살표 여백
+- `.b02-proj__submit` — 좌측 정렬 버튼
+- 폼 전체는 `createCard({ raised: true })`로 감쌈
+
+## 이벤트 핸들러
+
+| 함수 | 위치 | 동작 |
+|---|---|---|
+| `onB02_Proj_Submit_Click()` | `B02_ProjRegister/B02_ProjRegister_UI_Page.ts:96` | 프로젝트 생성 검증·제출 |
+
+## 의존성
+
+- [[a00_app_shell_framework]] — `navigateTo()` 라우팅
+- `config_frontend.ts` — `ROUTES`, `API_BASE_URL`, `CURRENT_PROJECT_ID_KEY`
+- `common_util_validate` — `isBlank`
+- [[ui_templates]] — `createButton`, `createInputField`, `createSelectField`, `createCard`, `showLoadingOverlay`/`hideLoadingOverlay`, `showToast`
+- 백엔드 API → [[B02_ProjRegister/B02_backend]]
+
+## 참고
+
+- 프론트가 fetch를 직접 호출 (A08처럼 별도 API 클라이언트 파일 없음)
+- 프로젝트 생성 성공 시 `CURRENT_PROJECT_ID_KEY`가 이후 워크플로우(B03~) 진입의 컨텍스트가 됨