160 lines
5.8 KiB
Markdown
160 lines
5.8 KiB
Markdown
# 요구사항 명세서 출력 템플릿
|
|
|
|
이 파일은 `requirement-analyzer` 스킬이 생성하는 마크다운 문서의 형식 예시입니다.
|
|
실제 출력 시 각 항목을 기획서 내용으로 채우고, 불확실한 항목은 `(추정)` 또는 `<확인 필요>` 로 표시합니다.
|
|
|
|
---
|
|
|
|
```markdown
|
|
# 요구사항 명세서: <프로젝트명>
|
|
|
|
> 기획서: `<파일명.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 페이지에 바로 붙여 사용할 수 있습니다.
|