Aislo/docs/wiki/pages/A07_Register/A07_frontend.md

status, page_id, related_pages, last_updated

status	page_id	related_pages	last_updated
stable	A07_Register	A07_Register/A07_backend A06_Login/A06_frontend auth_rbac	2026-07-12

A07_Register — Frontend

회원가입 화면. 정보 입력 + 약관 아코디언 동의 → OTP 입력으로 전환하는 2단계 폼.

파일 구조

파일	위치	역할
A07_Register_UI_Auth_Page.ts	A07_Register/A07_Register_UI_Auth_Page.ts:1-208	실사용 회원가입 UI (약관·OTP·실 API)
A07_Register_UI_Page.ts	A07_Register/A07_Register_UI_Page.ts:1-142	⚠️ 구버전 잔재 (미사용, 아래 참고)
A07_Register_UI_Style.css	A07_Register/A07_Register_UI_Style.css:1-103	스타일 (theme.css 변수만 사용)
A07_Register_Api_Fetch.ts	A07_Register/A07_Register_Api_Fetch.ts:1-47	회원가입/회사검색 API 클라이언트

⚠️ 라우터는 A07_Register_UI_Auth_Page만 사용 (router.ts:30 확인). A07_Register_UI_Page.ts는 회사명+이름+이메일+비번만 받는 단순 폼이며 백엔드 미연동(TODO 주석, navigateTo만) — 구버전 잔재로 판단. 정리 권장.

컴포넌트 / 함수 (UI_Auth_Page — 실사용)

함수	위치	역할
renderA07Register(root)	A07_Register/A07_Register_UI_Auth_Page.ts:68	카드+폼 조립, 약관 텍스트 비동기 로드 후 렌더
onA07_Register_Submit_Click(event)	A07_Register/A07_Register_UI_Auth_Page.ts:146	제출 핸들러(검증→가입요청→OTP 전환→검증)
checkboxWithAccordion(label, text)	A07_Register/A07_Register_UI_Auth_Page.ts:22	체크박스+펼침 상세(약관 본문) 컴포넌트
loadAgreementText(filename)	A07_Register/A07_Register_UI_Auth_Page.ts:58	resources/legal/*.txt 약관 파일 fetch

API 클라이언트 함수

함수	위치	역할
requestRegistration(payload)	A07_Register/A07_Register_Api_Fetch.ts:28	POST /auth/register/request
verifyRegistration(email, otpCode)	A07_Register/A07_Register_Api_Fetch.ts:32	POST /auth/register/verify
searchCompanies(query)	A07_Register/A07_Register_Api_Fetch.ts:39	GET /auth/companies?q= → id/name 목록

• RegisterPayload 타입: email, password, password_confirm, name, position, phone, terms_version, terms_agreed, privacy_agreed, marketing_agreed

제출 로직 (2단계 폼 전환)

1. 입력 검증: 이름/이메일/비번/비번확인 필수, 이메일 형식, 비번 8자 이상, 비번 일치, 필수 약관(terms/privacy) 체크
2. requestRegistration() 호출 (terms_version: "1.0" 고정, terms_agreed/privacy_agreed true)
3. 성공 시 verifyStep = true: 입력 필드 숨기고 OTP 필드 노출, 버튼 라벨 → A07_Register_Verify
4. OTP 제출 → verifyRegistration() → 성공 토스트 → navigateTo(ROUTES.A06_LOGIN)

약관 동의 (아코디언)

• checkboxWithAccordion으로 이용약관/개인정보/마케팅 3종 생성
• 약관 본문은 resources/legal/{terms_of_service,privacy_policy,marketing_consent}.txt에서 fetch
• 마케팅은 선택(marketing_agreed), 이용약관·개인정보는 필수

로컬라이제이션

모든 텍스트는 ui_templates에서 로드. 하드코딩 금지.

UI 요소	로케일 키
제목	A07_Register_Title
필드	A07_Register_Field_Name, _Position, _Email, _Phone, _Password, _PasswordConfirm, _Otp
약관	A07_Register_Terms, _Privacy, _Marketing
제출/인증	A07_Register_Submit, A07_Register_Verify
안내/성공	A07_Register_OtpSent, A07_Register_Success
오류	A07_Register_Error_Required, _Email, _Password, _PasswordMismatch, _Terms, _Request
로그인 이동	A07_Register_ToLogin

스타일 (CSS)

• .a07-register__card — 카드 (max-width: 420px)
• .a07-register__agreement — 약관 컨테이너(border, overflow hidden)
• .a07-register__agreement-summary — 체크박스+라벨 헤더(클릭 시 상세 토글)
• .a07-register__agreement-details / -content — 펼침 약관 본문(max-height 200px, pre-wrap)

이벤트 핸들러

함수	위치	동작
onA07_Register_Submit_Click()	A07_Register/A07_Register_UI_Auth_Page.ts:146	가입/OTP 제출
(인라인) 로그인 버튼	A07_Register/A07_Register_UI_Auth_Page.ts:201	A06_LOGIN으로 이동
(인라인) 약관 요약 클릭	A07_Register/A07_Register_UI_Auth_Page.ts:47	상세 아코디언 토글

의존성

• a00_app_shell_framework — navigateTo() 라우팅
• config_frontend.ts — ROUTES, API_BASE_URL
• common_util_validate — isBlank, isValidEmail, hasMinLength
• ui_templates — createButton, createInputField, showLoadingOverlay/hideLoadingOverlay, showToast
• 백엔드 API → A07_Register/A07_backend