---
status: stable
page_id: A08_Support
related_pages: ["[[A08_Support/A08_backend]]", "[[a00_app_shell_framework]]", "[[ui_templates]]"]
last_updated: 2026-07-12
---

# A08_Support — Frontend

기술지원 문의 폼. 이름·이메일·연락처·제목·문의내용(textarea) 입력 후 제출.

## 파일 구조

| 파일 | 위치 | 역할 |
|---|---|---|
| `A08_Support_UI_Page.ts` | `A08_Support/A08_Support_UI_Page.ts:1-217` | 문의 폼 렌더링 + 제출 로직 |
| `A08_Support_UI_Style.css` | `A08_Support/A08_Support_UI_Style.css:1-64` | 스타일 (theme.css 변수만 사용) |

## 컴포넌트 / 함수

| 함수 | 위치 | 역할 |
|---|---|---|
| `renderA08Support(root)` | `A08_Support/A08_Support_UI_Page.ts:69` | 카드+폼 조립, 세션 정보 자동 채움 |
| `onA08_Support_Submit_Click(event)` | `A08_Support/A08_Support_UI_Page.ts:133` | 제출 핸들러(검증→fetch POST) |
| `createTextAreaField(label, placeholder)` | `A08_Support/A08_Support_UI_Page.ts:32` | 여러 줄 textarea 필드(에러 슬롯 포함) 생성 |

## 제출 로직

1. 필수값 검사(name/email/subject/message), 이메일 형식 검사
2. `fetch("/api/a08/support", POST)` 직접 호출 (별도 Api_Fetch 파일 없음)
3. 성공: 폼 리셋 + 성공 메시지(`A08_Support_Success`) 표시
4. 실패: nameField에 오류 메시지 표시

## 세션 자동 채움

- 렌더 후 백그라운드에서 `fetchSessionUser()`([[A06_Login/A06_frontend]]) 호출
- 로그인 상태면 name/email 필드 자동 입력 (렌더링 지연 없음)

## 로컬라이제이션

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

| UI 요소 | 로케일 키 |
|---|---|
| 제목/부제 | `A08_Support_Title`, `A08_Support_Subtitle` |
| 필드 | `A08_Support_Field_Name`, `_Email`, `_Phone`, `_Subject`, `_Message` (+각 Placeholder) |
| 제출 | `A08_Support_Submit` |
| 성공 | `A08_Support_Success` |
| 오류 | `A08_Support_Error_Required`, `A08_Support_Error_Email` |

## 스타일 (CSS)

- `.a08-support__card` — 카드 (max-width: 520px)
- `.a08-support__success` — 성공 메시지(success 색, mist-violet 배경), 기본 hidden
- `.a08-support__form` — flex 열 (gap: spacing-16)
- `.a08-support__textarea` — resize vertical, min-height 120px
- `.a08-support__submit` — 전체 너비 버튼

## 이벤트 핸들러

| 함수 | 위치 | 동작 |
|---|---|---|
| `onA08_Support_Submit_Click()` | `A08_Support/A08_Support_UI_Page.ts:133` | 문의 검증·제출 |

## 의존성

- `config_frontend.ts` — (직접 `/api/a08/support` 상대경로 fetch)
- `common_util_validate` — `isBlank`, `isValidEmail`
- [[A06_Login/A06_frontend]] — `fetchSessionUser` (세션 자동 채움)
- [[ui_templates]] — `createButton`, `createInputField` (textarea는 자체 구현)
- 백엔드 API → [[A08_Support/A08_backend]]

## 참고

- 문의 폼은 로그인/비로그인 모두 사용 가능 (세션 있으면 name/email 자동 입력)
- textarea는 공통 컴포넌트에 없어 `createTextAreaField`로 자체 구현 (`.ui-field`/`.ui-input` 스타일 상속)