260715_0

2026-07-15 18:33:33 +09:00
parent 6b1583103f
commit f533082537
201 changed files with 19776 additions and 563 deletions
@@ -0,0 +1,91 @@
+---
+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]]