---
status: stable
page_id: B10_Payment
related_pages: ["[[B11_Status/B11_frontend]]", "[[ui_templates]]", "[[architecture/project_map]]"]
last_updated: 2026-07-17
source: docs/raw/verification/2026-07-17_verify_layout_and_payment_mockups.md
---

# B10_Payment — Frontend

결재 페이지. 일반결재(세금계산서 발행 요청 + 통장 입금 안내) 흐름의 화면 골격 목업.

## 파일 구조

| 파일 | 위치 | 역할 |
|---|---|---|
| `B10_Payment_UI_Page.ts` | `B10_Payment/B10_Payment_UI_Page.ts:1-120` | 결재 폼 렌더링 + 발행 요청 처리 목업 |
| `B10_Payment_UI_Style.css` | `B10_Payment/B10_Payment_UI_Style.css:1-40` | 결재 폼 전용 스타일시트 |

## 주요 컴포넌트 및 함수 (Mockup)

| 함수 | 위치 | 역할 |
|---|---|---|
| `renderB10Payment(root)` | `B10_Payment/B10_Payment_UI_Page.ts:15` | 일반업무 레이아웃 기반 세금계산서 발행 요청 정보 입력 카드 구성 |
| `onB10_Request_TaxInvoice_Click()` | `B10_Payment/B10_Payment_UI_Page.ts:50` | 발행 요청 제출 핸들러 (더미 데이터 유효성 검사 및 B11 상태 화면 이동) |

## 비즈니스 로직 전제 (목업)
*   **결재 방식**: 카드 자동 결재가 아닌, 기업간 거래를 위한 **일반결재(세금계산서 발행 및 계좌 입금)** 방식을 따릅니다.
*   **사용자 입력 항목**: 사업자등록번호, 상호명, 대표자명, 이메일 주소.
*   **동작**: 사용자가 정보를 입력하고 "발행 요청"을 누르면 목업 상태에 따라 발행 접수 처리(Mock) 후 B11 결재 상태 화면으로 이동합니다.

## 로컬라이제이션

| UI 요소 | 로케일 키 |
|---|---|
| 제목 | `B10_Payment_Title` |
| 사업자 번호 / 상호 | `B10_Payment_Field_RegNum`, `B10_Payment_Field_CompName` |
| 발행요청 버튼 | `B10_Payment_Submit` |
| 계좌 안내 정보 | `B10_Payment_Account_Info` |

## 의존성
*   [[ui_templates]] — `ui_template_general_layout.ts` (일반업무 레이아웃 사용) 및 `createInputField`, `createButton` 공용 블록
*   `config_frontend.ts` — `ROUTES` 관리


- 하위 컴포넌트: [[B10_Payment/frontend/B10_Payment_UI_Page|B10_Payment_UI_Page]]