2.8 KiB
2.8 KiB
status, page_id, related_pages, last_updated
| status | page_id | related_pages | last_updated | ||
|---|---|---|---|---|---|
| stable | A03_CompDetail |
|
2026-07-12 |
A03_CompDetail — Frontend
로그인 전 회사 상세 페이지. 미션 + 핵심 가치 + 연락처.
파일 구조
| 파일 | 위치 | 역할 |
|---|---|---|
A03_CompDetail_UI_Page.ts |
A03_CompDetail/A03_CompDetail_UI_Page.ts:1-114 |
페이지 렌더링 로직 |
A03_CompDetail_UI_Style.css |
A03_CompDetail/A03_CompDetail_UI_Style.css:1-100 |
스타일 (theme.css 변수만 사용) |
컴포넌트 (섹션 빌더)
| 함수 | 위치 | 역할 |
|---|---|---|
buildHero() |
A03_CompDetail/A03_CompDetail_UI_Page.ts:23-41 |
Hero(제목+부제목), mist-violet→canvas 그라디언트 |
buildMission() |
A03_CompDetail/A03_CompDetail_UI_Page.ts:43-57 |
미션 섹션 제목+본문(중앙정렬, max 60자) |
buildValues() |
A03_CompDetail/A03_CompDetail_UI_Page.ts:59-87 |
핵심가치 3열 카드그리드(createCard 3개) |
buildContact() |
A03_CompDetail/A03_CompDetail_UI_Page.ts:89-103 |
연락처 섹션 제목+이메일 |
renderA03CompDetail() |
A03_CompDetail/A03_CompDetail_UI_Page.ts:108-113 |
페이지 진입점(4개 섹션 조립) |
로컬라이제이션
모든 텍스트는 ui_locales[key][currentLanguageIndex] 형식으로 ui_templates에서 로드.
하드코딩 금지.
| UI 요소 | 로케일 키 |
|---|---|
| 제목 | A03_CompDetail_Title |
| 히어로 부제목 | A03_CompDetail_Hero_Subtitle |
| 미션 섹션 제목 | A03_CompDetail_Mission_SectionTitle |
| 미션 본문 | A03_CompDetail_Mission_Body |
| 가치 섹션 제목 | A03_CompDetail_Value_SectionTitle |
| 가치 1~3 | A03_CompDetail_Value{1..3}_Title, A03_CompDetail_Value{1..3}_Desc |
| 연락처 섹션 제목 | A03_CompDetail_Contact_SectionTitle |
| 연락처 이메일 | A03_CompDetail_Contact_Email |
스타일 (CSS)
CSS 클래스 구조
.a03-comp-detail— 페이지 래퍼 (flex column, gap: section-gap).a03-hero— 그래디언트 배경.a03-hero__inner— 중앙 정렬 컨테이너.a03-hero__title— heading-lg, deep-iris, max 18자.a03-hero__subtitle— body 텍스트, slate, max 56자.a03-section— 공통 섹션 (max-width: page-max-width, padding: spacing-32).a03-section__title— heading-sm, deep-iris, 중앙 정렬.a03-mission__body— body, slate, 중앙 정렬, max 60자.a03-value-grid— 3열 그리드 (gap: spacing-24).a03-value-card— 카드 (min-height: 140px).a03-value__desc— body-sm, slate.a03-contact__email— body, charcoal, 중앙 정렬
반응형
- 900px 이하: 가치 그리드 1열, 히어로 제목 폰트 축소
의존성
- a00_app_shell_framework — 공통 헤더·푸터
- ui_templates —
createCard()공통 컴포넌트 + 다국어