---
name: markup-promotion
description: |
  프로모션/랜딩 페이지용 표준 마크업을 생성합니다.
  캠페인 유형별 섹션 템플릿(히어로, 특징, CTA, 이벤트 일정 등)을 제공하고
  반응형·접근성·SEO 메타를 일관되게 적용합니다.

  다음 상황에서 반드시 사용하세요:
  - "프로모션 페이지 만들어줘", "랜딩 페이지 마크업해줘"
  - "이벤트 페이지 퍼블리싱", "캠페인 HTML 만들어줘"
  - 반복적인 프로모션 구조를 빠르게 구현해야 할 때
---

# 프로모션 마크업 가이드 (markup-promotion)

캠페인 / 이벤트 / 랜딩 페이지의 표준 섹션 구조를 자동 생성합니다.

## 언제 사용하는가

- 신규 프로모션/이벤트 랜딩 페이지를 제작할 때
- 기존 캠페인 구조를 재사용해 빠르게 개발할 때
- 팀 표준 프로모션 레이아웃이 필요할 때

## 입력

- 캠페인 명칭, 기간, 주요 메시지
- 포함할 섹션 목록 (없으면 기본 구성으로 제안)
- 이미지/에셋 경로 또는 플레이스홀더 여부
- 다국어 지원 여부

---

## 작업 순서

### Phase 1: 캠페인 유형 분석

1. 제공된 정보에서 아래 유형을 판별한다.

   | 유형 | 특징 |
   |---|---|
   | 이벤트 | 기간, 참여 조건, CTA 버튼 |
   | 상품 출시 | 제품 특징, 스펙, 구매 링크 |
   | 신규 서비스 | 혜택 강조, 가입 유도 |
   | 콘텐츠/미디어 | 영상/갤러리 중심, SNS 공유 |

2. 필요한 섹션을 제안한다. 사용자가 별도 지정하지 않으면 기본 구성 사용.

**기본 섹션 구성:**
```
Hero → 특징/혜택 → 이벤트 규칙/일정 → FAQ → CTA → Footer
```

### Phase 2: 섹션별 마크업 생성

각 섹션은 독립 Vue 컴포넌트로 작성한다.

#### Hero 섹션
```vue
<section class="relative w-full [height] bg-[color] ...">
  <div class="...">
    <h1 class="...">{{ title }}</h1>
    <p class="...">{{ description }}</p>
    <a :href="ctaLink" class="...">{{ ctaText }}</a>
  </div>
</section>
```

#### 특징/혜택 섹션
```vue
<section aria-labelledby="features-heading">
  <h2 id="features-heading" class="...">{{ heading }}</h2>
  <ul class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <li v-for="item in features" :key="item.id" class="...">
      ...
    </li>
  </ul>
</section>
```

#### CTA 섹션
- 버튼 타입: `<a>` (외부 링크) 또는 `<NuxtLink>` (내부 라우팅)
- `aria-label`로 버튼 목적 명시

### Phase 3: 반응형 + SEO + 접근성

**반응형**: 모바일 우선 (base → `md:` → `lg:`)

**SEO 메타** (Nuxt `useSeoMeta`):
```ts
useSeoMeta({
  title: '캠페인명 | 브랜드명',
  description: '캠페인 한 줄 설명',
  ogTitle: '...',
  ogImage: '이미지 URL',
})
```

**접근성**:
- 이미지 `alt` 텍스트 (장식용이면 `alt=""`)
- 섹션 제목 계층 (`h1` → `h2` → `h3`)
- 카운트다운 타이머: `aria-live="polite"`

### Phase 4: 다국어 처리

다국어 지원 시 i18n 키로 텍스트 분리:
```vue
<h1>{{ $t('HERO-title') }}</h1>
```

키 명명은 `plan-translation-generator` 스킬의 카테고리 가이드 참조.

---

## 출력 형식

```
## 프로모션 마크업: <캠페인명>

### 섹션 구성
1. Hero
2. 특징/혜택
3. CTA

### 파일 구조
pages/promotion/<slug>.vue
components/promotion/
  ├── PromoHero.vue
  ├── PromoFeatures.vue
  └── PromoCta.vue

### 코드
[각 컴포넌트 코드]

### 체크리스트
- [ ] 이미지 alt 텍스트 확정
- [ ] CTA 링크 URL 확정
- [ ] useSeoMeta 값 확정
```