eomsangdonandClaude Opus 5
eb30b774f8
- `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>
70 lines
3.0 KiB
Markdown
70 lines
3.0 KiB
Markdown
---
|
|
status: draft
|
|
page_id: A03_CompDetail
|
|
related_pages: ["[[a00_app_shell_framework]]", "[[ui_templates]]", "[[architecture/project_map]]", "[[architecture/public_admin_map]]"]
|
|
last_updated: 2026-07-12
|
|
---
|
|
|
|
# A03_CompDetail — Frontend
|
|
|
|
[[architecture/public_admin_map]]의 공개 회사 소개 경로이며 [[a00_app_shell_framework]]의 SPA 라우터가 이 화면을 로드한다.
|
|
|
|
로그인 전 회사 상세 페이지. 미션 + 핵심 가치 + 연락처.
|
|
|
|
## 파일 구조
|
|
|
|
| 파일 | 위치 | 역할 |
|
|
|---|---|---|
|
|
| `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()` 공통 컴포넌트 + 다국어
|