84 lines
3.6 KiB
Markdown
84 lines
3.6 KiB
Markdown
---
|
|
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~) 진입의 컨텍스트가 됨
|