# CBMC LINK MVP Page Template Specification

기준일: 2026-09-22

## 1. 템플릿 원칙

- V2가 canonical URL과 기사 원문을 소유한다.
- V3는 같은 Issue/Story/Media를 읽는 특집 표현층이다.
- 기존 회원이 최신 콘텐츠를 읽는 흐름을 최우선으로 한다.
- Primary CTA는 기사 읽기다.
- 검색·필터·아카이브는 MVP에 포함하지 않는다.
- 공개 화면에 `/admin` 링크를 노출하지 않는다.

## 2. V2 Issue Home

### 목적

최신 Issue와 대표 기사를 가장 빠르게 읽게 한다.

### Sequence

```text
SkipLink
BrandHeader
IssueMasthead + Primary Story CTA
Editor's Selection
FeaturedStory
StoryCard Grid
Field/Community Highlights
Optional Resources
ParticipationCTA
Next Issue note
SiteFooter
```

### Desktop geometry

- shell max 1320px
- 주요 콘텐츠 max 1200px
- Masthead 8/12 + 4/12 또는 full width
- 대표 기사 8/12, 보조 기사 4/12
- 일반 카드 3열 × 4/12

### Mobile

- Masthead text-first
- 대표 기사 1개를 먼저 표시
- 나머지는 단일 열
- 중요한 기사 순서를 DOM 순서와 동일하게 유지
- 고정 CTA로 화면을 가리지 않는다

### Required data

- Issue title/date/theme
- Primary Story
- 최소 1개 Published Story
- 승인된 공식 로고와 카피

### States

- loading: masthead와 카드 skeleton
- partial: 가능한 기사만 표시
- empty: 발행된 기사가 없으면 공개하지 않거나 이전 공식 콘텐츠로 안내
- error: 재시도와 안전한 공식 홈페이지 이동

## 3. V2 Article Detail

### Sequence

```text
SkipLink
BrandHeader
Breadcrumb
ArticleHeader
Hero ImageFigure optional
ArticleBody
PullQuote/ImageFigure blocks
Source/credit
RelatedStories
ParticipationCTA optional
SiteFooter
```

### Reading geometry

- Title max-width 960px
- Body max-width 720px
- Desktop optional aside 3/12
- 모바일 본문 전체 폭
- 문단·제목·이미지 간격은 Foundation semantic spacing 사용

### Required data

- title
- canonical slug/URL
- body
- publishedAt
- publication status

### Optional data

- dek
- author
- organization/chapter
- hero media
- reading time
- related stories
- CTA

### SEO

- canonical은 V2 URL
- SEO title/description/social image
- Article structured data
- 발행·수정일 구분

### States

- preview: 인증된 편집 환경에서만
- published
- unavailable/unpublished
- 404
- unsupported body block
- media rights expired

## 4. V3 Paper Reader

### 목적

창간호·특집호를 책의 흐름으로 읽게 하되 V2 기사 접근을 대체하지 않는다.

### Sequence

```text
SkipLink
Reader Header
Issue identity
Book stage / Mobile page stack
Page contents button
Previous button
Current page title + progress
Next button
Link to canonical V2 story where applicable
Reader footer
```

### Navigation contract

- 이전/다음 버튼은 모든 화면에서 기본 조작이다.
- 모바일 버튼은 최소 44px이고 항상 발견 가능해야 한다.
- swipe와 page-corner는 선택 보조일 뿐 필수가 아니다.
- 첫 페이지에서 이전 버튼, 마지막 페이지에서 다음 버튼을 disabled 처리한다.
- 전환 중 버튼을 input-locked 상태로 표시한다.
- 목차는 실제 페이지 이동 버튼이어야 한다.

### Responsive

- Desktop: spread
- Tablet: scale-down spread 또는 single-page mode
- Mobile: single-page vertical reading + fixed/non-obstructive button controls
- 모바일에서 “책 모서리를 누르세요” 안내를 사용하지 않는다.

### Content mapping

- V2 Issue/Story/Media를 원본으로 사용한다.
- V3 presentation metadata가 page order, spread type, selected quote, crop을 정의한다.
- Story 원문을 V3 전용 필드에 복제하지 않는다.
- 각 feature page에서 canonical V2 기사 링크를 제공할 수 있다.

### Accessibility

- 현재 page title과 `current/total`을 live status로 제공한다.
- progress semantics를 제공한다.
- reduced motion에서는 회전 없이 즉시 교체한다.
- 숨겨진 페이지가 스크린리더에 중복 노출되지 않게 한다.
- 전역 화살표 키가 입력 필드와 충돌하지 않게 한다.

## 5. 404 / Error

### Sequence

```text
BrandHeader compact
Status title
Short explanation
Primary: 최신 기사 읽기
Secondary: Issue Home
SiteFooter compact
```

### Rules

- 내부 서버 정보와 관리 경로를 노출하지 않는다.
- 검색은 MVP가 아니므로 검색창을 기본 해결책으로 제시하지 않는다.
- 오류 페이지에서도 브랜드와 주요 기사 이동이 유지되어야 한다.

## 6. Template state matrix

| Template | Loading | Empty | Error | Partial | Unavailable |
|---|---|---|---|---|---|
| Issue Home | skeleton | 공개 차단 또는 공식 안내 | retry | 가능한 기사 표시 | 이전 콘텐츠 안내 |
| Article Detail | body skeleton | 해당 없음 | retry | 미디어 없이 본문 | 404/비공개 안내 |
| V3 Reader | page skeleton | V2 이동 | V2 이동 | 가능한 페이지 | V2 canonical 이동 |
| Error | 해당 없음 | 해당 없음 | 자체 상태 | 해당 없음 | 자체 상태 |

## 7. MVP acceptance

- Home Hero·대표 섹션에서 기사 읽기가 가장 강한 행동이다.
- Article Detail이 canonical URL과 전체 원문을 가진다.
- 제목은 길이에 관계없이 잘리지 않는다.
- 320px에서 가로 overflow가 없다.
- V3를 이전/다음 버튼만으로 완독할 수 있다.
- V3 목차가 실제로 이동한다.
- 공개 헤더·푸터·에러 화면에 `/admin` 링크가 없다.
- 검색·필터·아카이브 없이도 최신 Issue의 모든 주요 기사에 접근할 수 있다.