본 문서는 FanPulse 서비스의 주요 화면을 정의하며, 각 화면의 기능, 레이아웃, 인터랙션을 상세히 설명합니다.
MVP 범위는 doc/mvp/mvp_화면_정의서.md를 기준으로 합니다.
| 화면 ID | 화면명 | 경로 | 설명 |
|---|---|---|---|
| H001 | 메인 화면 | / |
최신 뉴스, 인기 게시글, 차트 순위 표시 |
| H002 | 로그인 | /login |
OAuth2 및 이메일 기반 로그인 |
| H002-1 | 회원가입 | /login |
이메일 기반 회원가입 |
| H003 | 팬 커뮤니티 | /community |
아티스트별 팬 페이지 및 게시물 |
| H003-1 | 아티스트 필터 | /community |
아티스트 선택 필터 화면 |
| H004 | 투표 페이지 | /voting |
실시간 투표 참여 및 결과 확인 |
| H005 | 차트 순위 | /chart |
Billboard, Melon 등 차트 순위 |
| H006 | 라이브 & 이벤트 | /live |
실시간 스트리밍 방송 |
| H007 | 콘서트 일정 | /concert |
예정/지난 공연 일정 및 예매 |
| H008 | 광고 & 리워드 | /ads |
광고 시청 후 포인트 적립 및 교환 |
| H009 | 팬 멤버십 (VIP Club) | /membership |
VIP 구독 서비스 및 혜택 안내 |
| H010 | 설정 페이지 | /settings |
계정 설정, 알림, 테마 변경 |
| H011 | 뉴스 상세 페이지 | /news/:id |
뉴스 상세 내용 표시 |
| H012 | 상세 게시글 | /post/:id |
게시글 상세 내용 및 댓글 |
| H013 | 게시글 작성 페이지 | /post-create |
새로운 게시글 작성 |
| H014 | 아티스트 상세 페이지 | /artist/:id |
아티스트 프로필 및 활동 정보 |
| H015 | 상세 공연 정보 페이지 | /concert/:id |
공연 상세 정보 및 티켓 예매 |
| H016 | 마이페이지 | /mypage |
프로필, 포인트, 활동 내역 확인 |
| H017 | 알림 목록 | /notifications |
받은 알림 목록 및 관리 |
| H018 | 검색 화면 | /search |
통합 검색 기능 |
| H019 | 라이브 상세 | /live/:id |
실시간 스트리밍 시청 및 채팅 |
| H020 | 좋아요한 아티스트 | /favorites |
관심 아티스트 목록 |
| H021 | 저장한 게시물 | /saved |
저장한 게시물 목록 |
| H022 | 예매 내역 | /tickets |
콘서트 예매 내역 확인 |
| H022-1 | 예매 상세 | /tickets/:id |
예매 상세 정보 및 QR 코드 |
| H023 | 고객센터 | /support |
도움말 및 문의 (탭 진입/기본 FAQ) |
| H023-1 | FAQ | /support/faq |
자주 묻는 질문 |
| H023-2 | 1:1 문의 | /support/inquiry |
문의 내역 목록 |
| H023-3 | 문의 작성 | /support/inquiry/create |
새 문의 작성 폼 |
| H023-4 | 공지사항 | /support/notice |
서비스 공지사항 |
| H023-5 | 공지사항 상세 | /support/notice/:id |
공지사항 상세 내용 |
| H024 | 에러 페이지 | /error |
오류 발생 시 안내 화면 |
| H025 | 메뉴 (드로어) | (overlay) | 오버레이 메뉴 |
설명: K-POP 관련 최신 뉴스, 인기 게시글, 차트 순위를 표시하는 홈 화면
| 항목 | 내용 |
|---|---|
| 화면 ID | H001 |
| 화면명 | 메인 화면 |
| 경로 | / |
| 주요 기능 | - 최신 K-POP 뉴스 표시<br>- 인기 게시글 리스트 제공<br>- 실시간 차트 순위 표시<br>- 각 기능으로 이동하는 네비게이션 제공 |
| 주요 버튼 및 인터랙션 | - 뉴스 카드 클릭 → 뉴스 상세 페이지 (H011)<br>- 인기 게시글 클릭 → 팬 커뮤니티 (H003)<br>- 차트 클릭 → 차트 순위 페이지 (H005) |
설명: OAuth2 기반 SNS 로그인 및 이메일 기반 로그인을 지원하는 화면
| 항목 | 내용 |
|---|---|
| 화면 ID | H002 |
| 화면명 | 로그인 |
| 경로 | /login |
| 주요 기능 | - 로그인/회원가입 탭 전환<br>- Google 소셜 로그인 지원<br>- 이메일/비밀번호 입력 로그인<br>- 비밀번호 찾기 기능 |
| 주요 버튼 및 인터랙션 | - 로그인/회원가입 탭 → 회원가입 탭 클릭 시 H002-1로 전환<br>- Google로 로그인 버튼 → OAuth2 인증 후 메인 화면 (H001)<br>- 로그인 버튼 → 이메일 인증 후 메인 화면 (H001)<br>- 비밀번호를 잊으셨나요? → 비밀번호 재설정 |
설명: 이메일 기반 회원가입을 지원하는 화면
| 항목 | 내용 |
|---|---|
| 화면 ID | H002-1 |
| 화면명 | 회원가입 |
| 경로 | /login (회원가입 탭 활성화 상태) |
| 주요 기능 | - 로그인/회원가입 탭 전환<br>- Google 소셜 회원가입 지원<br>- 이메일/비밀번호/비밀번호 확인 입력<br>- 닉네임 입력(미입력 시 자동 생성)<br>- 이용약관 및 개인정보 동의 |
| 주요 버튼 및 인터랙션 | - 로그인/회원가입 탭 → 로그인 탭 클릭 시 H002로 전환<br>- Google로 회원가입 버튼 → OAuth2 인증 후 메인 화면 (H001)<br>- 회원가입 버튼 → 가입 완료 후 메인 화면 (H001) |