지역 행사 추천 서비스

AI 코딩 에이전트(Cursor · v0 · Claude Code 등)에 아래 순서대로 붙여넣으면 됩니다. 각 단계를 끝내면 체크하세요.

1. 1

   AI 코딩 에이전트 준비

   Cursor · v0 · Claude Code · Bolt 중 편한 도구를 열고 새 프로젝트를 시작하세요. 스택은 Next.js (App Router) · Supabase (PostgreSQL) (Next.js · Supabase · Vercel) 기준입니다.

2. 2

   프로젝트 셋업 — 환경변수 · 인증

   필요한 환경변수

   NEXT_PUBLIC_SUPABASE_URL
   NEXT_PUBLIC_SUPABASE_ANON_KEY
   SUPABASE_SERVICE_ROLE_KEY

   인증 설정 가이드 보기

   # 인증 설정 — Supabase Auth (Google OAuth)
   
   1. Supabase 프로젝트 생성 → Project Settings > API 에서 URL / anon / service_role 키 확보
   2. Authentication > Providers > Google 활성화 (Google Cloud Console 에서 OAuth Client ID/Secret 발급해 입력)
   3. Authentication > URL Configuration: Site URL + Redirect URLs(`https://<도메인>/**`)
   4. 패키지: `@supabase/ssr`, `@supabase/supabase-js`
   5. 서버/클라이언트 Supabase client 분리. service_role 키는 서버 전용(브라우저 노출 금지).
   6. App Router 미들웨어로 세션 갱신.

3. 3

   전체 골격 만들기 — 마스터 프롬프트 실행

   아래 프롬프트를 통째로 복사해 에이전트에 붙여넣으면 프로젝트 뼈대가 만들어집니다.

   프롬프트 샘플에서는 일부만 표시

   ## 역할
   당신은 Next.js 풀스택 시니어 엔지니어입니다. 아래 명세를 읽고 지역 행사 추천 MVP를 처음부터 끝까지 완전히 구현하세요. 비개발자도 실행할 수 있도록 모든 파일을 직접 생성하고, 단계별로 진행하세요.
   
   ---
   
   ## 제품 요약
   …

4. 4

   모듈 구현 — 1단계: 프로젝트 셋업

   앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.

   프롬프트 샘플에서는 일부만 표시

   Next.js 15 (App Router) + Supabase + Vercel 스택으로 '지역 행사 추천 서비스' MVP 프로젝트를 셋업해줘.
   
   ## 요구사항
   - `npx create-next-app@latest`로 프로젝트 생성 (TypeScript, Tailwind CSS, App Router 사용)
   …

5. 5

   모듈 구현 — 2단계: Supabase Auth 인증

   앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.

   프롬프트 샘플에서는 일부만 표시

   Supabase Auth 기반 이메일/패스워드 인증을 Next.js App Router에 구현해줘.
   
   ## 요구사항
   - Supabase Auth (이메일+패스워드)만 사용. 다른 인증 방식 추가 금지
   …

6. 6

   모듈 구현 — 3단계: DB 스키마 설계 및 Supabase 설정

   앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.

   프롬프트 샘플에서는 일부만 표시

   Supabase (PostgreSQL)에서 지역 행사 추천 서비스 MVP용 DB 스키마를 설계하고 마이그레이션 SQL을 작성해줘.
   
   ## 테이블 정의
   
   …

7. 7

   모듈 구현 — 4단계: 핵심 기능 구현 (행사 목록·상세·필터·관심 저장)

   앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.

   프롬프트 샘플에서는 일부만 표시

   지역 행사 추천 서비스의 핵심 기능 4가지를 Next.js App Router로 구현해줘.
   
   ## 구현할 화면 및 기능
   
   …

8. 8

   모듈 구현 — 5단계: 관리자 행사 등록 및 Vercel 배포

   앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.

   프롬프트 샘플에서는 일부만 표시

   관리자 행사 등록 기능을 구현하고 Vercel 배포 설정을 완성해줘.
   
   ## 관리자 기능 (`src/app/admin/`)
   
   …

9. 9

   배포하기

   배포 가이드 보기

   # 배포 — Vercel
   
   1. Vercel 에 GitHub 저장소 Import (Framework Preset = Next.js)
   2. 환경변수(NEXT_PUBLIC_SUPABASE_URL / ANON_KEY / SUPABASE_SERVICE_ROLE_KEY) 등록
   3. `vercel.json` 에 `{ "framework": "nextjs" }` 명시(권장)
   4. main 푸시 시 자동 배포. 배포 후 Supabase Redirect URLs 에 운영 도메인 추가.

10. 10

    검증 — 핵심 시나리오 테스트

    아래 체크리스트로 핵심 기능이 동작하는지 확인하세요.

    테스트 계획 보기

    # 수용 테스트 / QA 체크리스트
    
    > 테스트 환경: Supabase 로컬 에뮬레이터 또는 별도 스테이징 프로젝트 사용.
    > 모든 체크리스트 항목은 PR 머지 전 통과를 기준으로 한다.
    
    ---
    
    ## T-01. 랜딩 페이지
    
    - [ ] 비로그인 상태에서 랜딩 페이지(`/`) 정상 로드
    - [ ] "행사 탐색하기" CTA 클릭 시 `/events` 이동
    - [ ] 로그인/로그아웃 상태에 따라 네비게이션 메뉴가 올바르게 전환됨
    
    ---
    
    ## T-02. 행사 목록 조회 및 필터
    
    - [ ] `/events` 진입 시 행사 목록이 기본 렌더링됨 (날짜 오름차순)
    - [ ] `region` 필터 선택 후 해당 지역 행사만 표시됨
    - [ ] `date_from` + `date_to` 범위 필터 적용 후 범위 외 행사 미표시됨
    - [ ] 필터 초기화 버튼 클릭 시 전체 목록으로 복귀
    - [ ] 등록된 행사가 없을 때 "등록된 행사가 없습니다" 빈 상태 메시지 표시
    - [ ] 페이지네이션: 20개 초과 시 다음 페이지 버튼 활성화, 데이터 정확히 분리됨
    
    ---
    
    ## T-03. 행사 상세
    
    - [ ] 목록 클릭 시 `/events/[id]` 상세 페이지로 이동
    - [ ] 제목·지역·날짜·장소·설명이 정확히 표시됨
    - [ ] 존재하지 않는 `id` 접근 시 404 페이지 표시
    - [ ] 비로그인 상태에서 "관심 저장" 버튼 클릭 시 로그인 페이지로 리다이렉트
    
    ---
    
    ## T-04. 인증 (Supabase Auth)
    
    - [ ] 이메일/패스워드로 회원가입 → 이메일 인증 링크 수신 (또는 Magic Link)
    - [ ] 로그인 성공 후 이전 페이지 또는 `/events`로 리다이렉트
    - [ ] 잘못된 비밀번호 입력 시 에러 메시지 표시
    - [ ] 로그아웃 후 `/saved` 접근 시 `/login`으로 리다이렉트 (미들웨어 동작 확인)
    - [ ] 서버 액션에서 `getUser()` 미인증 요청 시 `Unauthorized` 반환 확인
    
    ---
    
    ## T-05. 관심 행사 저장 / 삭제
    
    - [ ] 로그인 상태에서 행사 상세 페이지 "관심 저장" 클릭 시 DB `saved_events`에 레코드 생성
    - [ ] 이미 저장된 행사를 다시 저장 시도 시 "이미 저장된 행사입니다" 에러 메시지 표시
    - [ ] "저장 취소" 클릭 시 DB에서 레코드 삭제되고 UI 즉시 업데이트
    - [ ] 저장/삭제 액션이 서버 액션으로 처리되고 클라이언트에 서비스 키 미노출 확인 (DevTools Network 탭)
    
    ---
    
    ## T-06. 저장 목록 페이지
    
    - [ ] `/saved` 진입 시 로그인 사용자의 저장 행사만 표시됨
    - [ ] 다른 사용자의 저장 행사가 노출되지 않음 (Row Level Security 동작 확인)
    - [ ] 저장 행사가 없을 때 "저장한 행사가 없습니다" 빈 상태 메시지 표시
    - [ ] 목록에서 행사 클릭 시 해당 상세 페이지로 이동
    
    ---
    
    ## T-07. 관리자 행사 등록
    
    - [ ] `role = 'admin'` 계정으로 `/admin/events/new` 접근 가능
    - [ ] 일반 사용자 계정으로 `/admin/*` 접근 시 403 또는 `/` 리다이렉트
    - [ ] 비로그인 상태로 `/admin/*` 접근 시 `/login` 리다이렉트
    - [ ] 필수 필드(제목·지역·날짜·장소) 미입력 시 유효성 에러 메시지 표시
    - [ ] 정상 등록 후 DB `events` 테이블에 레코드 생성되고 목록 페이지 반영됨
    - [ ] 서버 액션 내 관리자 역할 검증이 클라이언트 우회로 무력화되지 않음 (직접 fetch 시도)
    
    ---
    
    ## T-08. 보안 / 환경변수
    
    - [ ] `SUPABASE_SERVICE_ROLE_KEY` 가 빌드 결과물 및 클라이언트 번들에 포함되지 않음
    - [ ] `.env.local` 파일이 `.gitignore`에 포함되어 저장소에 커밋되지 않음
    - [ ] 환경변수 하드코딩 코드 없음 (`grep -r "service_role"` 코드베이스 전수 검색)
    - [ ] Supabase RLS(Row Level Security) 정책이 모든 테이블에 활성화되어 있음
    - [ ] `saved_events` 테이블 RLS: 본인 레코드만 SELECT/INSERT/DELETE 가능
    
    ---
    
    ## T-09. UI / 반응형
    
    - [ ] 모바일(375px) · 태블릿(768px) · 데스크톱(1280px) 주요 화면 레이아웃 깨짐 없음
    - [ ] 행사 목록 카드 이미지/텍스트 말줄임 처리 확인
    - [ ] 필터 UI가 모바일에서 접근 가능한 형태로 표시됨
    

11. 11

    막혔을 때 — 트러블슈팅

    에이전트가 에러로 막히면 아래 대응을 참고하세요.

    트러블슈팅 보기

    ## 빌드/타입 에러가 나요
    - **증상**: `npm run build` 에서 타입 에러. **원인**: 서버/클라이언트 컴포넌트 경계 혼동. **해결**: 데이터 조회는 서버 컴포넌트에서, 상호작용은 `"use client"` 파일로 분리하라고 에이전트에 지시.
    
    ## 로그인 후 리다이렉트가 안 돼요
    - **증상**: 구글 로그인 후 빈 화면/무한 로딩. **원인**: Supabase Redirect URLs 미등록. **해결**: Supabase > Authentication > URL Configuration 에 `http://localhost:3000/**` 와 배포 도메인을 등록.
    
    ## 환경변수 관련 에러
    - **증상**: `supabaseUrl is required` 등. **원인**: `.env.local` 미설정. **해결**: `.env.example` 를 복사해 `.env.local` 로 만들고 Supabase 키를 채운 뒤 서버 재시작.
    
    ## 데이터가 안 보이거나 저장이 안 돼요
    - **증상**: 목록이 비거나 쓰기 실패. **원인**: RLS(Row Level Security) 정책 누락. **해결**: 각 테이블에 SELECT/INSERT 정책을 추가하라고 지시(비로그인 읽기 허용/본인 쓰기 등).
    
    ## 배포는 됐는데 운영에서만 깨져요
    - **증상**: 로컬은 되는데 Vercel 에서 에러. **원인**: 운영 환경변수 미등록. **해결**: Vercel > Settings > Environment Variables 에 동일 키 등록 후 재배포.