스포츠앱 갤러리 · 모바일 앱 (사용자)
각 유즈케이스는 왼쪽이 라이트, 오른쪽이 다크 모드입니다.
01. 로그인
/login — 이메일·비밀번호 로그인.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
02. 회원가입
/register — 계정 생성 폼.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
03. 홈 피드
/ — 다가오는 경기·추천 상품, 통합 검색·채팅 진입, 하단 5개 탭(홈·시설·스토어·커뮤니티·마이).
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
04. 시설 탭 내주변
/facilities — 내 주변 시설 + 현재 날씨 + Leaflet 지도. 다크에서는 지도 타일·줌 컨트롤·attribution 바까지 어둡게 전환된다.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
05. 시설 상세 대기질
/facility/{id} — 시설 정보 + 에어코리아 대기질(PM10·PM2.5) 카드.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
06. 시설 예약 신청
/booking/new?facilityId= — 대기질 경고 배너 + 슬롯 선택 + 결제수단.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
07. 내 예약 목록
/booking — 확정된 예약 2건. 상태 배지와 시설·시간대가 함께 표시된다.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
08. 스토어 굿즈
/store — 스토어 굿즈 세그먼트.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
09. 스토어 티켓
/store?segment=tickets — 같은 탭의 티켓 세그먼트 — 경기 목록·상태 필터.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
10. 상품 상세
/product/{id} — 가격·설명·수량·장바구니 담기.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
11. 통합 카탈로그
/catalog — 상품·한정판·티켓·클래스·모집을 한 목록으로. 같은 제목의 항목이 섞이지 않도록 시설명(클래스)·경기장(티켓)·일정(티켓·모집)을 함께 표시한다.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
12. 장바구니
/cart — 담긴 상품 2건. 상품명·수량·금액과 합계가 표시된다.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
13. 주문 내역
/orders — 예약·티켓·상품·모집 통합 내역 + 결제 상태 필터.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
14. 한정판 드롭
/limited-drop/{id} — 판매중·남은 수량·1인 구매 한도.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
15. 한정판 구매
/limited-drop/{id}/purchase — 수량 선택 후 구매 확정.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
16. 가상 대기열 입장
/queue/limited-drop/{id} — 플래그 ON·정원 여유 → 즉시 입장 처리.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
17. 이벤트 좌석 선택
/event/{id} — 구역별 좌석 수와 좌석 선택.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
18. 티켓 주문 확인
/event/{id}/order?seatIds= — 선택 좌석 2석 합계 + 5분 선점 안내.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
19. 결제 수단 선택
/payment — 카카오·토스·네이버·다날·카드·계좌이체.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
20. 커뮤니티 게시글
/community — 커뮤니티 탭 게시글 세그먼트(공지 배지).
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
21. 커뮤니티 동아리
/community → 동아리 — 같은 탭의 동아리 세그먼트.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
22. 커뮤니티 글쓰기
/community/new — 제목·본문·종목 선택.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
23. 커뮤니티 글 상세
/community/{postId} — 게시글 본문과 작성자.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
24. 동아리 목록
/communities — 공개 동아리 목록.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
25. 동아리 개설
/communities/new — 이름·소개·공개범위·종목.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
26. 동아리 상세
/communities/{id} — 소개·멤버 탭, 채팅 입장/탈퇴.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
27. 동아리 대관 예약
/communities/{id}/bookings/new — 동아리 활동을 시설 회차에 연결.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
28. 채팅방 목록
/rooms — 최근 메시지·안읽음 배지, 초대함 진입.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
29. 채팅방 대화
/rooms/{id} — STOMP 실시간 연결 상태의 대화.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
30. 초대함
/invitations — 받은 게스트 초대 수락·거절.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
31. 모집 목록
/recruitments — 정원·참가비·마감 D-day.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
32. 모집 상세 신청
/recruitments/{id} — 참가비·정원·활동일 + 신청 CTA.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
33. 모집 등록
/recruitments/new — 제목·정원·참가비·활동일·마감.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
34. 내 모집 신청내역
/recruitments/me — 내가 신청한 모집과 신청 상태.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
35. 모집 신청자 관리
/recruitments/{id}/applications — 모집 주최자가 보는 신청자 목록. 신청자는 닉네임으로 표시된다.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
36. 알림함
/notifications — 예약·결제·모집 알림. 금액은 천 단위 구분자로 표기한다.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |
37. 마이페이지
/me — 서버 프로필. 닉네임(수정 가능)·이메일·역할을 표시하고 내부 식별자는 노출하지 않는다.
| 라이트 | 다크 |
|---|---|
![]() | ![]() |









































































