3.6 KiB
3.6 KiB
status, page_id, related_pages, last_updated
| status | page_id | related_pages | last_updated | ||||
|---|---|---|---|---|---|---|---|
| stable | B02_ProjRegister |
|
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차 유효성 검사: name/region 필수, project_year 정수·2000~2100, estimated_length_m ≥0(입력 시)
fetch("${API_BASE_URL}/b02/project", POST)직접 호출 (별도 Api_Fetch 파일 없음)- body: name, region, road_type, project_year, estimated_length_m, memo
- 성공:
localStorage에CURRENT_PROJECT_ID_KEY로 project_id 저장 → 성공 토스트 →navigateTo(ROUTES.B03_FILE_INPUT) - 실패: 응답 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_KEYcommon_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~) 진입의 컨텍스트가 됨