내 지역·날짜에 맞는 행사를 찾아주는 서비스
무엇을 만드나?
MVP 기획 · 19,000원
PRD·기능정의·화면목록·DB·API 계약까지, 개발자에게 바로 넘기는 기획서.
샘플은 여기까지 공개합니다
파일 다운로드와 전문(全文) 복사는 실제 결과물에서만 제공됩니다. 내 아이디어를 입력하면 같은 형식의 결과물을 받아볼 수 있습니다.
내 지역·날짜에 맞는 지역 행사를 골라주는 웹 서비스를 만듭니다. 흩어진 행사 정보를 모아 '이번 주말 갈 만한 곳'을 바로 제시하고 저장하게 해, 검색·비교 없이 결정을 돕는지 검증합니다. 티켓·예약은 다음 단계입니다.
지역 주민이 주말 나들이·문화생활에 필요한 근처 행사를 한 곳에서 탐색하고 저장할 수 있는 지역 행사 추천/탐색 서비스. Next.js(App Router) + Supabase(Auth·PostgreSQL)로 구현하며 Vercel에 배포한다. MVP는 행사 탐색·저장·관리자 등록에 집중하고 결제·지도·실시간·외부 자동 수집은 포함하지 않는다.
목표
비목표(1차 제외)
회원 인증 (이메일/패스워드)
“지역 주민으로서 이메일과 비밀번호로 회원가입·로그인하여 관심 행사 저장 등 개인화 기능을 이용하고 싶다.”
행사 목록 탐색 및 필터
“지역 주민으로서 지역과 날짜를 선택해 내 주변에서 열리는 행사만 걸러 볼 수 있으면 좋겠다.”
행사 상세 조회
“지역 주민으로서 행사의 상세 정보(설명·날짜·장소·카테고리)를 한 눈에 확인하고 싶다.”
관심 행사 저장 및 목록 관리
“로그인한 지역 주민으로서 마음에 드는 행사를 저장하고 나중에 저장 목록에서 한번에 확인하고 싶다.”
관리자 행사 등록
“관리자로서 새로운 행사를 플랫폼에 직접 등록해 주민들이 탐색할 수 있도록 하고 싶다.”
랜딩 페이지 및 서비스 진입
“처음 방문한 주민으로서 서비스가 무엇인지 파악하고 바로 행사 탐색을 시작하고 싶다.”
행사 등록·지역/날짜 필터·상세·저장·관리자 등록. 티켓/예약/결제 제외.
1단계 — 기반
셋업, 행사 데이터 모델, 관리자 등록
2단계 — 탐색·저장
지역/날짜 필터·목록·상세·저장
3단계 — 다듬기·배포
재방문 고리(저장/알림)·QA·배포
견적 참고 · 지역 1곳·1개월치 검증 기준. 자동 수집·알림·예약은 별도 견적.
랜딩 페이지 /
GNB (로고, 로그인/로그아웃 버튼, 저장 목록 링크) · HeroBanner (서비스 소개 문구, CTA 버튼 '행사 탐색 시작하기') · RecentEventGrid (최신 행사 최대 6개 EventCard 그리드) · Footer (서비스명, 저작권)
상태: recentEvents: Event[] — SSR로 서버에서 fetch, session: Session | null — 로그인 여부에 따라 GNB 분기
행사 목록 페이지 /events
GNB · FilterBar (region 셀렉트, date 날짜 입력, 초기화 버튼) · EventGrid (EventCard 목록, 빈 상태 메시지) · EventCard (제목, 지역, 날짜, 장소 표시 + 상세 링크)
상태: events: Event[] — URL 쿼리(region, date) 기반 서버 컴포넌트에서 fetch, filterRegion: string — URL searchParam에서 파싱, filterDate: string — URL searchParam에서 파싱, isEmpty: boolean — events.length === 0 일 때 빈 상태 UI 표시
행사 상세 페이지 /events/[id]
GNB · EventDetailCard (제목, 설명, 카테고리, 지역, 날짜, 장소, 주최자) · SaveToggleButton (저장/저장 취소, 비로그인 시 로그인 유도) · BackLink ('← 목록으로' 링크)
상태: event: Event — SSR/SSG로 id 기준 fetch, isSaved: boolean — 로그인 사용자의 saved_events 조회 결과, session: Session | null — 저장 버튼 노출 여부 분기
관심 저장 목록 페이지 /saved
GNB · PageTitle ('내 관심 행사') · SavedEventGrid (저장된 EventCard 목록, 빈 상태 메시지) · RemoveSaveButton (각 카드의 저장 취소 버튼)
상태: savedEvents: (SavedEvent & Event)[] — 로그인 사용자 기준 서버에서 fetch, isEmpty: boolean — savedEvents.length === 0 일 때 빈 상태 UI, session: Session — 미인증 시 /login 리다이렉트 (서버 컴포넌트에서 처리)
관리자 행사 등록 페이지 /admin/events/new
GNB · PageTitle ('행사 등록') · EventForm (title, description, category, region, date, venue, organizer 입력 필드) · SubmitButton ('등록하기', 로딩 상태 포함) · ValidationErrorMessages (필드별 인라인 오류)
상태: formValues: Partial<EventInput> — 각 필드 입력값, errors: Record<string, string> — 서버 액션 반환 오류 메시지, isSubmitting: boolean — 제출 중 버튼 비활성화, session.role: string — 'admin' 아닐 경우 서버에서 403 또는 /로 리다이렉트
로그인 / 회원가입 페이지 /login
AuthCard (탭: 로그인 | 회원가입) · EmailPasswordForm (email, password 입력 필드, 제출 버튼) · AuthErrorMessage (인증 실패 오류 메시지)
상태: activeTab: 'login' | 'signup' — 탭 전환 상태, formValues: { email: string, password: string }, authError: string | null — Supabase Auth 오류 메시지 표시, isSubmitting: boolean — 제출 중 버튼 비활성화, redirectTo: string — 로그인 성공 후 원래 경로로 복귀
users
events
saved_events
# API / 서버 액션 계약 > 모든 쓰기 작업은 Next.js Server Action 또는 Route Handler(서버 전용)로 처리한다. > Supabase Service Role Key는 서버 환경변수(`SUPABASE_SERVICE_ROLE_KEY`)에만 보관하며 클라이언트에 노출하지 않는다. > 인증이 필요한 액션은 `supabase.auth.getUser()`로 세션을 서버에서 직접 검증한다. --- ## 1. 행사 목록 조회
나머지 113줄은 실제 결과물에서 확인할 수 있습니다
# 주요 의사결정 및 리스크 대응 --- ## 의사결정 ### D-01. 서버 액션(Server Action) 중심 아키텍처 - **결정**: 별도 REST API Route Handler 대신 Next.js App Router의 Server Action을 쓰기 작업의 주요 수단으로 채택 - **근거**: 서비스 롤 키를 서버 내에 완전히 격리할 수 있으며, 클라이언트 노출 경로가 구조적으로 차단됨. 별도 API 라우트 없이 코드량 최소화 가능
나머지 38줄은 실제 결과물에서 확인할 수 있습니다
# 수용 테스트 / QA 체크리스트 > 테스트 환경: Supabase 로컬 에뮬레이터 또는 별도 스테이징 프로젝트 사용. > 모든 체크리스트 항목은 PR 머지 전 통과를 기준으로 한다. --- ## T-01. 랜딩 페이지
나머지 81줄은 실제 결과물에서 확인할 수 있습니다
M0프로젝트 부트스트랩 & 환경 설정
M1데이터베이스 스키마 & RLS 적용
M2Supabase Auth 인증 구현
M3행사 목록 & 필터 기능
M4행사 상세 페이지
M5관심 행사 저장 목록
M6관리자 행사 등록
M7랜딩 페이지 & UI 마감
M8Vercel 배포 & 검증
이 문서는 개발자에게 그대로 전달할 수 있는 기획서입니다.