Aislo/docs/wiki/pages/B02_ProjRegister/B02_frontend.md

status, page_id, related_pages, last_updated

status	page_id	related_pages	last_updated
stable	B02_ProjRegister	B02_ProjRegister/B02_backend B02_ProjRegister/B02_db ui_templates a00_app_shell_framework	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~) 진입의 컨텍스트가 됨