status, page_id, related_pages, last_updated
| status |
page_id |
related_pages |
last_updated |
| stable |
A01_Home |
|
2026-07-12 |
A01_Home — Frontend
로그인 전 01: 홈 페이지. 소개 히어로 + 최신 소식 + 주요 기능 3가지를 showcase하는 정적 소개 페이지. 백엔드 없음.
파일 구조
| 파일 |
위치 |
역할 |
A01_Home_UI_Page.ts |
A01_Home/A01_Home_UI_Page.ts:1-157 |
페이지 렌더링 로직 |
A01_Home_UI_Style.css |
A01_Home/A01_Home_UI_Style.css:1-113 |
스타일 (theme.css 변수만 사용) |
컴포넌트
Hero 섹션
- 함수:
buildHero() (A01_Home_UI_Page.ts:52-85)
- 구성: 제목 + 부제목 + 2개 CTA 버튼 (회원가입/프로그램 상세)
- 색상: 라벤더 그라디언트 배경 (
--color-mist-violet → --color-canvas)
최신 소식 섹션
- 함수:
buildNews() (A01_Home_UI_Page.ts:87-116)
- 데이터: MOCK_NEWS 배열 (A01_Home_UI_Page.ts:32-36, 백엔드 연결 전)
- 각 항목: 태그 + 뉴스 제목 + 날짜
주요 기능 섹션
- 함수:
buildFeatures() (A01_Home_UI_Page.ts:118-146)
- 레이아웃: 3열 그리드 (반응형: 900px 이하 1열)
- 카드: createCard 공통 컴포넌트 사용
이벤트 핸들러
| 함수 |
위치 |
동작 |
onA01_Home_GetStarted_Click() |
A01_Home_UI_Page.ts:41-43 |
회원가입(A07_REGISTER) 이동 |
onA01_Home_Explore_Click() |
A01_Home_UI_Page.ts:45-47 |
프로그램 상세(A02_PROG_DETAIL) 이동 |
로컬라이제이션
모든 텍스트는 ui_locales[key][currentLanguageIndex] 형식으로 ui_templates 에서 로드.
하드코딩 금지.
| UI 요소 |
로케일 키 |
| 제목 |
A01_Home_Title |
| 히어로 부제목 |
A01_Home_Hero_Subtitle |
| CTA 버튼 (Primary/Secondary) |
A01_Home_Hero_CtaPrimary, A01_Home_Hero_CtaSecondary |
| 소식 섹션 제목 |
A01_Home_News_SectionTitle |
| 소식 태그 |
A01_Home_News_Tag |
| 기능 섹션 제목 |
A01_Home_Features_SectionTitle |
| 기능 카드 1~3 |
A01_Home_Feature{1..3}_Title, A01_Home_Feature{1..3}_Desc |
세부 구현
스타일 구조·의존성·데이터 흐름·미해결 사항은 A01_Home/A01_components에 분리했다.
