---
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~) 진입의 컨텍스트가 됨