요구사항 명세서 출력 템플릿

이 파일은 requirement-analyzer 스킬이 생성하는 마크다운 문서의 형식 예시입니다. 실제 출력 시 각 항목을 기획서 내용으로 채우고, 불확실한 항목은 (추정) 또는 <확인 필요> 로 표시합니다.

# 요구사항 명세서: <프로젝트명>

> 기획서: `<파일명.pptx>` | 생성일: <YYYY-MM-DD> | 총 슬라이드: <N>장
> 담당 기획자: <확인 필요> | 개발 일정: <확인 필요>

---

## 1. 화면 목록 (Pages)

| # | 화면명 | 라우팅 경로 | 기획서 슬라이드 | 비고 |
|---|--------|------------|--------------|------|
| 1 | 메인 (랜딩) | `/` | 3-5 | 사전등록 CTA 포함 |
| 2 | 사전등록 | `/register` | 6-9 | 폼 입력 화면 |
| 3 | 등록 완료 | `/register/complete` | 10 | 완료 안내 화면 |
| 4 | 이벤트 소개 | `/about` | 11-13 | 스크롤 단일 페이지 |
| 5 | 공지사항 | `/notice` | 14 | (추정) 목록 페이지 |
| 6 | 공지사항 상세 | `/notice/[id]` | 14 | (추정) 동적 라우트 |

---

## 2. Nuxt 라우팅 구조

pages/ ├── index.vue # 메인 (랜딩) ├── register/ │ ├── index.vue # 사전등록 폼 │ └── complete.vue # 등록 완료 ├── about.vue # 이벤트 소개 └── notice/ ├── index.vue # 공지사항 목록 └── [id].vue # 공지사항 상세 (추정)


**레이아웃:**

layouts/ ├── default.vue # GNB + Footer 포함 (전체 화면) └── blank.vue # GNB/Footer 없음 (모달, 완료 화면 등)


---

## 3. 컴포넌트 트리

components/ ├── common/ │ ├── AppHeader.vue # GNB / 상단 네비게이션 │ ├── AppFooter.vue # 하단 푸터 │ └── AppLogo.vue # 로고 (추정) ├── register/ │ ├── RegisterForm.vue # 사전등록 입력 폼 │ ├── RegisterComplete.vue # 완료 화면 내용 │ └── TermsModal.vue # 약관 모달 (추정) ├── notice/ │ ├── NoticeList.vue # 공지사항 목록 (추정) │ └── NoticeItem.vue # 공지사항 카드 (추정) └── ui/ ├── BaseButton.vue # 공통 버튼 ├── BaseModal.vue # 공통 모달 래퍼 (추정) └── BaseInput.vue # 공통 입력 필드 (추정)


### 컴포넌트 상세

| 컴포넌트 | 사용 화면 | Props (추정) | Emits (추정) | 비고 |
|----------|----------|-------------|-------------|------|
| `AppHeader` | 전체 | `transparent?: boolean` | — | 메인에서 투명 배경 |
| `RegisterForm` | 사전등록 | — | `submit` | 폼 상태 내부 관리 |
| `BaseButton` | 전체 | `variant`, `size`, `disabled` | `click` | Tailwind 기반 |
| `TermsModal` | 사전등록 | `visible` | `close`, `agree` | <확인 필요> |

---

## 4. API 엔드포인트 목록

| # | Method | Endpoint | 설명 | 사용 화면 | 비고 |
|---|--------|----------|------|----------|------|
| 1 | POST | `/api/register` | 사전등록 제출 | 사전등록 | 폼 데이터 전송 |
| 2 | GET | `/api/notices` | 공지사항 목록 | 공지사항 | 페이지네이션 (추정) |
| 3 | GET | `/api/notices/:id` | 공지사항 상세 | 공지사항 상세 | (추정) |
| 4 | GET | `/api/event/info` | 이벤트 기본 정보 | 메인, 소개 | <확인 필요> |

> **참고**: API 경로는 기획서 노트/테이블에서 추출했습니다. 백엔드 팀과 확인이 필요합니다.

---

## 5. 화면 전환 플로우

```mermaid
flowchart TD
    A[메인 랜딩] --> |사전등록 버튼 클릭| B[사전등록 폼]
    A --> |공지사항 메뉴| C[공지사항 목록]
    A --> |이벤트 소개 메뉴| D[이벤트 소개]

    B --> |약관 보기 클릭| E([약관 모달])
    E --> |닫기| B
    B --> |제출 성공| F[등록 완료]
    B --> |제출 실패| B

    C --> |항목 클릭| G[공지사항 상세]
    G --> |목록으로| C

    F --> |메인으로| A

6. 공통 레이아웃

레이아웃	적용 화면	포함 컴포넌트	비고
`default`	메인, 이벤트 소개, 공지사항	AppHeader, AppFooter	GNB 표시
`blank`	등록 완료	—	GNB/Footer 없음 (추정)

7. 추가 참고사항

확인 필요 항목

약관 모달 내용 및 동의 필수 항목 (슬라이드 8 — 상세 미기재)
공지사항 페이지네이션 방식 (무한스크롤 vs 페이지 버튼)
사전등록 중복 참여 처리 방식 (동일 이메일 재등록 시)
/api/event/info 엔드포인트 실제 경로 및 응답 스키마
다국어 지원 여부 (한국어 전용 vs 영어 병행)

기획서에서 발견된 특이사항

슬라이드 7: "등록 마감 후 버튼 비활성화" — 마감일 기준 상태 분기 필요
슬라이드 12: 이벤트 소개 섹션 내 동영상 플레이어 포함 — Video 컴포넌트 추가 검토
슬라이드 14: 공지사항 페이지 기획 미완성으로 표시됨 (<확인 필요>)

미정 항목

항목	현재 상태	담당
OG 태그 / SNS 공유 설정	미기재	<확인 필요>
GA / 트래킹 이벤트 정의	미기재	<확인 필요>
브라우저 지원 범위	미기재	<확인 필요>


---

## 활용 팁

- `<확인 필요>` 항목은 기획자와 킥오프 미팅 전 체크리스트로 활용하세요.
- `(추정)` 항목은 개발 착수 전 기획서를 재확인하고 제거하세요.
- API 엔드포인트 목록은 백엔드 팀과 함께 검토하여 최종 확정하세요.
- Mermaid 플로우차트는 PR 설명이나 Confluence 페이지에 바로 붙여 사용할 수 있습니다.

5.8 KiB Raw Blame History