트레이너 스케줄을 보고 PT 회차권을 결제·예약하는 앱
어떻게 만드나?
AI 빌드 기획 패키지 · 49,000원
AI 코딩 에이전트가 바로 투입할 정밀 스펙 + 붙여넣기 프롬프트.
Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel
샘플은 여기까지 공개합니다
파일 다운로드와 전문(全文) 복사는 실제 결과물에서만 제공됩니다. 내 아이디어를 입력하면 같은 형식의 결과물을 받아볼 수 있습니다.
AI 코딩 에이전트(Cursor · v0 · Claude Code 등)에 아래 순서대로 붙여넣으면 됩니다. 각 단계를 끝내면 체크하세요.
AI 코딩 에이전트 준비
Cursor · v0 · Claude Code · Bolt 중 편한 도구를 열고 새 프로젝트를 시작하세요. 스택은 Next.js (App Router) · Supabase (PostgreSQL) (Next.js · Supabase · Vercel) 기준입니다.
프로젝트 셋업 — 환경변수 · 인증
필요한 환경변수
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 미들웨어로 세션 갱신.
전체 골격 만들기 — 마스터 프롬프트 실행
아래 프롬프트를 통째로 복사해 에이전트에 붙여넣으면 프로젝트 뼈대가 만들어집니다.
### 역할/제품 요약 - 당신은 엔지니어링 에이전트입니다. 동네 헬스장에 특화된 PT 트레이너 및 회원 전용 예약·결제 MVP 웹서비스(Next.js(App Router) · Supabase Auth · Supabase(PostgreSQL) · Vercel)를 비전문가가 개발할 수 있도록, 전체 개발 플로우를 한 번에 안내하십시오. ### 필수 스택 - Next.js (App Router) - Supabase Auth …
모듈 구현 — 프로젝트 셋업 및 초기화
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Next.js (App Router) + Supabase(PostgreSQL) 기반 웹앱 프로젝트를 새로 생성한다. Typescript로 개발하고, Supabase CLI로 개발용 프로젝트/인스턴스를 연결한다. 추가적으로 환경변수는 .env.local 파일을 활용하고, 시크릿/키의 클라이언트 노출을 방지하도록 설정한다. Vercel 배포 연동을 위한 기본 설정도 준비한다.
모듈 구현 — Supabase Auth를 활용한 인증/회원가입 구현
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Supabase Auth를 사용해 이메일 기반 회원가입/로그인 기능을 Next.js App Router 환경에 맞게 생성하라. 회원 role(trainer/member) 선택 기능 포함, 회원 가입시 Supabase DB의 Users 테이블에 사용자 정보를 추가 저장한다. Email/Password 인증만 허용한다. 인증 후 DB의 role에 따라 트레이너와 회원의 접근 권한을 구분한다. 클라이언트에 노출되는 키 외에 서비스 시크릿은 코드에 하드코딩하지 않는다.
모듈 구현 — DB 스키마 및 Supabase Table 설계/생성
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
아래 테이블 구조에 따라 Supabase(PostgreSQL) DB에 Users, Trainers, Schedules, Tickets, Reservations 테이블을 생성하라. Foreign Key, 제약조건, Enum 타입(예약 status 등)도 반영하여 SQL Schema로 설계 및 생성한다. - Users(user_id (PK)/name/email/password_hash/role (trainer/member)) - Trainers(trainer_id (PK, FK to Users)/profile_info) …
모듈 구현 — 핵심 기능 페이지 구현 (트레이너 스케줄·PT예약)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
다음 핵심 화면과 기능을 Next.js App Router 방식으로 구현하라. 각 페이지는 서버에서 안전하게 처리하며, 모든 데이터 쓰기 로직은 서버 액션(API Routes, Server Actions 등)에서 실행한다. - 랜딩페이지 - 트레이너별 스케줄 조회/예약(회원) - 회차권 구매 및 잔여회차 관리(회원) …
모듈 구현 — 관리자/배포 환경 세팅 및 유지보수
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Vercel을 활용하여 개발/운영 환경 반영 자동 배포 파이프라인을 구성한다. 유지보수 또는 모니터링 기능은 MVP 범위 내에서 최소화하고, 필요시 Supabase Studio(admin) 및 Vercel dashboard 기능을 활용한다. 서버측 환경변수/시크릿 관리 원칙을 명확히 준수한다.
배포하기
# 배포 — 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 에 운영 도메인 추가.검증 — 핵심 시나리오 테스트
아래 체크리스트로 핵심 기능이 동작하는지 확인하세요.
### 수용 테스트 체크리스트 #### 회원 - [ ] 올바른 회원 가입/로그인(flows: Supabase Auth 사용, 이메일 인증) - [ ] 회차권 최초 구매: 트레이너 선택 후 정상적으로 tickets row가 생성되는지 - [ ] 내 회차권/잔여 회차가 리스트에서 정확히 노출되는지 - [ ] 예약 가능 시간 조회 후 원하는 슬롯을 선택해 예약 진행 시 reservations row가 생기고, 같은 시간 중복예약 불가 - [ ] 회차권 없는 상태에서 예약 시 거절됨 - [ ] 예약건 취소 시 status가 제대로 변경되고 UI 반영 - [ ] 내 예약 내역에서 최근 예약/취소 여부 및 상태 확인됨 #### 트레이너 - [ ] 트레이너 스케줄 등록/조회 동작 확인 - [ ] 트레이너 자신의 스케줄별 예약 현황 페이지에서 올바르게 노출되는지 #### 공통/보안 - [ ] 인증되지 않은 접근 시 모든 API, 주요 페이지에서 접근 제한됨 (401 리턴 또는 로그인 요구) - [ ] role=trainer/member에 따라 권한이 다르게 적용됨(회원-구매/예약/취소, 트레이너-스케줄 등록/조회) - [ ] 서버 사이드에서만 DB 쓰기가 이뤄지고, 클라이언트에서 직접 쓰기 불가 - [ ] 예약, 취소 등 주요 행위가 서버 규칙/로직에 따라만 수행됨 - [ ] 브라우저 콘솔/네트워크에서 서비스키, DB 연결시크릿 노출 없음
막혔을 때 — 트러블슈팅
에이전트가 에러로 막히면 아래 대응을 참고하세요.
### 자주 막히는 문제 & 해결법 1. **증상: 서버액션/Next.js 빌드시 '환경 변수 없음', DB연결/인증 오류** - 원인: .env 파일(Vercel 환경변수 포함) 미설정, 변수명 오타 또는 분리 PR에서 누락 - 해결: - .env.local에 다음 변수 올바르게 입력: SUPABASE_URL, SUPABASE_ANON_KEY - Vercel 배포시 Settings>Environment Variables에 동일한 변수 설정 - 하드코딩 금지, process.env.XXXX 사용 2. **증상: 예약 시도시 401 에러/로그인 리다이렉트 반복** - 원인: Supabase Auth 세션 유실/올바른 인증정보 전달 안 됨, SSR 사용시 서버측에서 토큰 불러오기 누락 - 해결: - 클라이언트에서는 useSession(), 서버에서는 서버컴포넌트(server action) 내 cookies 활용 - 서버액션에서는 supabaseServerClient에 유저 토큰 포함하는지 확인 3. **증상: 브라우저 콘솔에서 Service Key/비밀키 노출** - 원인: 클라이언트에서 보안키/supabase-admin 사용, import 위치 오류 - 해결: - Service Key(서비스 키)는 절대 브라우저 import/노출 금지! - 클라이언트쪽 코드는 anon key만 사용, 서버쪽에서만 관리 키 활용 4. **증상: 예약/회차권 쓰기 시도 시 에러, row insert/update 취소됨** - 원인: Supabase RLS(Row Level Security) 정책 미설정(혹은 너무 엄격), 사용자의 행위에 DB 권한 매칭 안 됨 - 해결: - 각 테이블 별로 RLS 정책 검토(예: session 유저 ID=mapping 된 FK), 최소한 INSERT/UPDATE만 허용 - 정책 내 테스트 계정으로 insert/update/delete 직접 검증 5. **증상: CORS 애러(Access-Control-Allow-Origin…), 클라이언트에서 API 호출 오류** - 원인: API route 또는 Supabase 설정시 도메인 미허용 - 해결: - Supabase Project Settings > API > Allowed Domains에 도메인(Vercel/로컬) 포함시킴 - Next.js API route라면 headers에 Access-Control-Allow-Origin 조정
막히거나 시간이 없다면? 전문가가 이 빌드킷 그대로 제작해드립니다.
전문가에게 맡기기 →이 서비스는 동네 헬스장 회원과 트레이너가 PT(퍼스널 트레이닝)를 쉽고 투명하게 예약·결제·관리할 수 있도록 돕는 웹앱입니다. 기존의 카카오톡, 전화 등의 혼란스러운 예약 과정을 대체하며, 회차권 잔여관리와 간단한 취소 기능을 제공합니다.
트레이너 스케줄 조회
회원으로서, 내가 원하는 트레이너의 가능한 PT 시간대를 한눈에 보고 예약 가능 여부를 알 수 있다.
회차권 구매 및 잔여회차 관리
회원으로서, 내가 보유한 PT 회차권의 남은 회차와 사용내역을 쉽게 확인할 수 있다.
PT 예약 및 내역 조회
회원으로서, 회차권이 있을 때 스케줄에서 원하는 시간에 쉽게 예약할 수 있고, 내가 한 모든 예약을 볼 수 있다.
예약 취소 기능
회원으로서, 예약한 PT 수업을 웹에서 직접 취소할 수 있고, 트레이너도 각 예약의 취소상태를 볼 수 있다.
트레이너의 스케줄 관리
트레이너로서, 본인의 PT 가능 일정을 직접 추가·수정·삭제할 수 있다.
backend/schema.sql
샘플에서는 일부만 표시-- Enable pgcrypto for UUID and hashes
CREATE EXTENSION IF NOT EXISTS "pgcrypto";
-- User Roles Enum
DO $$ BEGIN
CREATE TYPE user_role AS ENUM ('trainer', 'member');
EXCEPTION WHEN duplicate_object THEN null;
END $$;나머지 90줄은 실제 결과물에서 확인할 수 있습니다
backend/rls.sql
샘플에서는 일부만 표시-- Enable Row Level Security ALTER TABLE users ENABLE ROW LEVEL SECURITY; ALTER TABLE trainers ENABLE ROW LEVEL SECURITY; ALTER TABLE schedules ENABLE ROW LEVEL SECURITY; ALTER TABLE tickets ENABLE ROW LEVEL SECURITY; ALTER TABLE reservations ENABLE ROW LEVEL SECURITY; -- Example RLS Policies (Supabase will apply these for web auth session user)
나머지 39줄은 실제 결과물에서 확인할 수 있습니다
backend/seed.sql
샘플에서는 일부만 표시-- Demo users
INSERT INTO users (user_id, name, email, password_hash, role) VALUES
('00000000-0000-0000-0000-000000000001', '홍길동', 'trainer1@test.com', 'hash_trainer1', 'trainer'),
('00000000-0000-0000-0000-000000000002', '김트레이너', 'trainer2@test.com', 'hash_trainer2', 'trainer'),
('10000000-0000-0000-0000-000000000001', '회원1', 'member1@test.com', 'hash_member1', 'member'),
('10000000-0000-0000-0000-000000000002', '회원2', 'member2@test.com', 'hash_member2', 'member');
INSERT INTO trainers (trainer_id, profile_info) VALUES나머지 16줄은 실제 결과물에서 확인할 수 있습니다
frontend/tailwind.config.js
샘플에서는 일부만 표시module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {나머지 7줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/layout.tsx
샘플에서는 일부만 표시import './globals.css';
import type { ReactNode } from 'react';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="ko">
<body className="bg-gray-50 text-gray-900 min-h-screen">
<header className="bg-primary text-white p-4 text-xl font-bold">나머지 10줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Button.tsx
샘플에서는 일부만 표시import type { ButtonHTMLAttributes, ReactNode } from 'react';
export function Button({ children, className = '', ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & {children: ReactNode}) {
return (
<button
className={`bg-primary hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ${className}`}
{...rest}
>나머지 4줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/schedules/page.tsx
샘플에서는 일부만 표시"use client";
import { useState, useEffect } from 'react';
import { Button } from '../../components/Button';
// 실제 배포시 환경변수로 SUPABASE_URL 등 분리 필요
import { createClient } from '@supabase/supabase-js';
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,나머지 50줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/globals.css
샘플에서는 일부만 표시@tailwind base; @tailwind components; @tailwind utilities;
M0. 초기 인프라/DB 구성
세부 태스크 3개
M1. 프론트엔드 기본 설정 및 스타일
세부 태스크 3개
M2. 스케줄 조회 MVP 화면 구현
세부 태스크 3개
### 역할/제품 요약 - 당신은 엔지니어링 에이전트입니다. 동네 헬스장에 특화된 PT 트레이너 및 회원 전용 예약·결제 MVP 웹서비스(Next.js(App Router) · Supabase Auth · Supabase(PostgreSQL) · Vercel)를 비전문가가 개발할 수 있도록, 전체 개발 플로우를 한 번에 안내하십시오. ### 필수 스택 - Next.js (App Router) - Supabase Auth - Supabase (PostgreSQL) - Vercel
나머지 50줄은 실제 결과물에서 확인할 수 있습니다
프로젝트 셋업 및 초기화
샘플에서는 일부만 표시Next.js (App Router) + Supabase(PostgreSQL) 기반 웹앱 프로젝트를 새로 생성한다. Typescript로 개발하고, Supabase CLI로 개발용 프로젝트/인스턴스를 연결한다. 추가적으로 환경변수는 .env.local 파일을 활용하고, 시크릿/키의 클라이언트 노출을 방지하도록 설정한다. Vercel 배포 연동을 위한 기본 설정도 준비한다.
Supabase Auth를 활용한 인증/회원가입 구현
샘플에서는 일부만 표시Supabase Auth를 사용해 이메일 기반 회원가입/로그인 기능을 Next.js App Router 환경에 맞게 생성하라. 회원 role(trainer/member) 선택 기능 포함, 회원 가입시 Supabase DB의 Users 테이블에 사용자 정보를 추가 저장한다. Email/Password 인증만 허용한다. 인증 후 DB의 role에 따라 트레이너와 회원의 접근 권한을 구분한다. 클라이언트에 노출되는 키 외에 서비스 시크릿은 코드에 하드코딩하지 않는다.
DB 스키마 및 Supabase Table 설계/생성
샘플에서는 일부만 표시아래 테이블 구조에 따라 Supabase(PostgreSQL) DB에 Users, Trainers, Schedules, Tickets, Reservations 테이블을 생성하라. Foreign Key, 제약조건, Enum 타입(예약 status 등)도 반영하여 SQL Schema로 설계 및 생성한다. - Users(user_id (PK)/name/email/password_hash/role (trainer/member)) - Trainers(trainer_id (PK, FK to Users)/profile_info) - Schedules(schedule_id (PK)/trainer_id (FK)/date_time/is_booked (boolean))
나머지 4줄은 실제 결과물에서 확인할 수 있습니다
핵심 기능 페이지 구현 (트레이너 스케줄·PT예약)
샘플에서는 일부만 표시다음 핵심 화면과 기능을 Next.js App Router 방식으로 구현하라. 각 페이지는 서버에서 안전하게 처리하며, 모든 데이터 쓰기 로직은 서버 액션(API Routes, Server Actions 등)에서 실행한다. - 랜딩페이지 - 트레이너별 스케줄 조회/예약(회원) - 회차권 구매 및 잔여회차 관리(회원) - 예약 내역 및 예약 상세/취소(회원)
나머지 2줄은 실제 결과물에서 확인할 수 있습니다
관리자/배포 환경 세팅 및 유지보수
샘플에서는 일부만 표시Vercel을 활용하여 개발/운영 환경 반영 자동 배포 파이프라인을 구성한다. 유지보수 또는 모니터링 기능은 MVP 범위 내에서 최소화하고, 필요시 Supabase Studio(admin) 및 Vercel dashboard 기능을 활용한다. 서버측 환경변수/시크릿 관리 원칙을 명확히 준수한다.