---
status: stable
page_id: A07_Register
related_pages: ["[[A07_Register/A07_backend]]", "[[A06_Login/A06_frontend]]", "[[auth_rbac]]"]
last_updated: 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]]