Files
Aislo/docs/wiki/pages/A01_Home/A01_frontend.md
T
eomsangdonandClaude Opus 5 eb30b774f8 chore(docs): docs 폴더 git 추적 전환 · PLAN·OWNERS 최상위 이관
- `docs/` 를 .gitignore 에서 빼 git 추적 대상으로 전환 (위키·완료 이력·검증 기록)
- `docs/raw/PLAN.md` · `docs/raw/OWNERS.md` 를 저장소 최상위로 이동 후 .gitignore 에 등록
  — 창끼리 공유하되 저장소에는 안 올리는 장부
- 살아 있는 경로 참조 7개 파일 정정 (아카이브 107건은 그때 사실이라 그대로 둠)
- graphify 날짜별 산출물(`docs/wiki/graphify-out/20*/`) 제외 — `graphify update` 가 다시 만듦

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-09 18:19:07 +09:00

2.6 KiB

status, page_id, related_pages, last_updated
status page_id related_pages last_updated
draft A01_Home
A02_ProgDetail/A02_frontend
A04_NewsHistory/A04_frontend
a00_app_shell_framework
ui_templates
architecture/project_map
architecture/public_admin_map
2026-07-12

A01_Home — Frontend

architecture/public_admin_map은 이 페이지를 방문자의 공개 진입점으로 라우팅하고, A01_Home/frontend/A01_Home_UI_Page가 화면을 구현한다.

로그인 전 01: 홈 페이지. 소개 히어로 + 최신 소식 + 주요 기능 3가지를 showcase하는 정적 소개 페이지. 백엔드 없음.

파일 구조

파일 세분화 위키 명세 역할
A01_Home_UI_Page.ts [[A01_Home/frontend/A01_Home_UI_Page]] 페이지 렌더링 로직 (buildHero, buildNews, buildFeatures)
A01_Home_UI_Style.css A01_Home/A01_Home_UI_Style.css 스타일 (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에 분리했다.