Aislo/docs/wiki/pages/A08_Support/A08_frontend.md

status, page_id, related_pages, last_updated

status	page_id	related_pages	last_updated
stable	A08_Support	A08_Support/A08_backend a00_app_shell_framework ui_templates	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 스타일 상속)