Event discovery scaffoldP0 20/70

/events

행사 목록

행사 목록과 상세 전환을 위한 모바일 탐색 구조

행사 카드, 상세 정보, 신청 CTA 위치를 고정해 Stitch 시안과 API 연결을 병렬화합니다.

서툰 우리의 옆자리

Concept C — Social Event

큐레이션 행사 탐색

행사 카드, 잔여석, 인증 멤버 조건, 분위기 태그를 전면에 둔다.

PDF 로고 반영 · 폰트/앱 아이콘 미확정

Route

/events행사 목록사용자 모바일 · P0

Template

eventDiscovery시안 변경 시 family plan과 componentSet을 먼저 수정합니다.High expression

Reusable components

ExtractedLogoEventCardFilterChipsCapacityBadgeVerifiedBadge

Guardrails

검증된 오프라인 이벤트에 초대받는 밝고 설레는 경험투표/매칭 화면은 밝게, 인증/결제/관리자 화면은 절제한다실시간 채팅, AI 매칭, OCR, 구독/IAP처럼 보이는 UI를 만들지 않는다

Primary CTA

행사 신청 흐름 보기계약상 route action을 유지하고, 시각 표현만 Concept C 컴포넌트로 교체합니다.행사 신청 흐름 보기

행사검증된 오프라인 이벤트

내

이번 주 모임

사진으로 분위기를 먼저 보고, 오늘 참여할 만한 모임을 빠르게 고릅니다.

핵심행사 목록운영 검토

전체오늘 19:30다이닝와인소규모

모집중24석

ASBU 금요일 디너

성수 · 24석 · 모집중

검증 멤버 전용참가비 79000

마감임박16석

ASBU 선데이 커피

한남 · 16석 · 마감임박

검증 멤버 전용참가비 59000

다음 이동

행사 신청 흐름 보기

행사 내용을 살펴본 뒤 신청으로 넘어갑니다.

행사 신청 흐름 보기

fixture-only no-provider-call audit log preview

Template family

eventDiscovery

행사 신청 CTA 대기

01EventCard

02Schedule summary

03Eligibility status

04BottomNav

UI primitives

공통 컴포넌트 슬롯

MobileShellPageHeaderEventCardStatusBadgeCallToActionBottomNav

State contract

로딩·빈값·오류·차단·주요 행동

디자인과 실데이터를 기다리는 동안에도 모든 route가 같은 실패/대기/빈값 골격을 유지하도록 화면별 상태 계약을 고정합니다.

행사 목록 불러오는 중

행사 목록 화면은 사용자 데이터와 공통 primitive 계약을 동시에 기다리는 로딩 상태를 노출합니다.

Empty

행사 목록에 표시할 항목이 없습니다

실제 사용자 데이터가 비어 있어도 레이아웃이 무너지지 않도록 안내문과 다음 행동을 유지합니다.

Error

행사 목록 데이터를 확인하지 못했습니다

실제 계정·정책·결제 연동 전에는 외부 요청을 만들지 않고, 재시도·문의·뒤로가기 위치만 계약으로 고정합니다.

Blocked

행사 목록 고객 입력 대기

brandSkin, eventContent, capacityPolicy, firebaseProject 항목이 확정되기 전까지 디자인과 실데이터를 잠그지 않습니다.

Success

행사 목록이 완료됐어요

행사 정보를 확인하고 신청 흐름으로 이어갈 수 있습니다. 다음 단계는 행사 상세에서 이어서 확인할 수 있어요.

Primary action

행사 신청 흐름 보기/events/[eventId]customer input required

Required data

eventCatalogeventCapacityapplicationWindowprimitive:MobileShellprimitive:PageHeaderprimitive:EventCardprimitive:StatusBadgeprimitive:CallToActionprimitive:BottomNav

Customer input

brandSkineventContentcapacityPolicyfirebaseProject

Next routes

/events/[eventId]/me

Action/Form contract

버튼·폼·상태전이 바인딩

`screen-action-contract.json` 기준 primary CTA, form field, 상태전이, provider 차단, audit requirement를 화면에 직접 표시합니다. 현재 경계는 fixture-only-no-provider-call이며 no provider calls before customer accounts 정책을 유지합니다.

Primary CTA

행사 신청 흐름 보기

행사 목록 화면의 주 CTA를 navigate contract로 고정합니다.

navigate행사 신청 흐름 보기/events/demo-event

Provider block

no-provider-call-before-customer-accounts

Firebase·Toss·Storage·Auth production call은 고객 계정 수령 전까지 차단합니다.

Cloud Firestore

Audit requirement

audit log not required

none

none

Form preview

입력 폼 없음이 화면은 primary CTA 또는 상태전이만 fixture로 표시합니다.

준비idle

행사 신청 흐름 보기을 누르면 행사 상세 확인으로 자연스럽게 이어집니다.

진행 중submitting

잠시만 기다리면 행사 목록 상태가 화면에 정리됩니다.

완료success

행사 정보를 확인하고 신청 흐름으로 이어갈 수 있습니다. 다음 단계는 행사 상세에서 이어서 확인할 수 있어요.

다시 확인error

입력한 내용과 화면 안내를 확인한 뒤 행사 신청 흐름 보기을 다시 눌러 주세요.

확인 필요blocked

행사 노출 정보와 신청 조건 확인이 필요합니다. 준비되면 행사 신청 흐름 보기을 다시 진행할 수 있습니다.

action-events-primaryidle → submitting

사용자가 primary action을 실행합니다.

fixtureSuccesssubmitting → success

외부 provider 호출 없이 fixture 성공 상태를 표시합니다.

fixtureErrorsubmitting → error

검증/fixture 오류 상태를 표시합니다.

customerInputMissingidle → blocked

고객 로고/계정/정책 blocker가 남아 있으면 blocked 상태를 유지합니다.

customerInputResolvedblocked → idle

필수 입력이 해결되면 기본 상태로 돌아갑니다.

Fixture interaction runner

role·CTA·form·provider·audit 시뮬레이션

실 provider 호출 없이 primary CTA, role decision, form submit, state transition, audit requirement를 fixture-only로 점검합니다.

Role access

user6 denied roles

Primary flow

행사 신청 흐름 보기/events/demo-event

Form submit

none0 required fields provided by fixture

Audit/provider

audit not required1 blocked providers, 0 calls

Mock navigation fixture

실데이터 없이 클릭 가능한 대표 흐름

Firebase·Toss·정책 원문을 호출하지 않는 fixture-only 링크입니다. 동적 segment는 demo id로 치환해 브라우저에서 바로 route reachability를 확인합니다.

Seed

행사 목록 demo flowroute-events-fixturefixture-only-no-provider-call

Mocked entities

fixture:eventCatalogfixture:eventCapacityfixture:applicationWindowprimitive:MobileShellprimitive:PageHeaderprimitive:EventCardprimitive:StatusBadgeprimitive:CallToActionprimitive:BottomNav

primary행사 신청 흐름 보기/events/demo-eventnext마이페이지 보기/me

Fixture payload

화면별 최소 DTO preview

실제 Firebase/Toss/정책 원문 대신 사용할 최소 payload입니다. 화면 구조와 DTO 슬롯을 먼저 맞추고, 고객 계정·정책 수령 후 실제 데이터로 교체합니다.

Payload contract

eventListpayload-eventsevent

Summary

행사 목록 화면에 표시할 최소 event fixture payload입니다. 실제 provider 호출 없이 layout과 DTO 슬롯만 확인합니다.

route-events-fixture

ready모집중 demo

행사 상태

neutral24 seats demo

정원

모집중

ASBU Friday Dinner

성수 · 24석 · 모집중

eventprice:79000capacity:24

마감임박

ASBU Sunday Coffee

한남 · 16석 · 마감임박

eventprice:59000capacity:16

Table columns

이름 · title상태 · status

user-or-public auth

event status badge

dynamic eventId route