가맹점마다 자기 데이터만 보이도록 격리하고, 본사·지역관리자·점주·직원 네 역할에 서로 다른 권한을 주며, 가맹점 발주와 일매출이 본사 대시보드에 자동 집계되고, 정산 내역은 변경 이력이 남아 이견이 생기면 근거를 되짚을 수 있는 다점포 운영 도구
‘MVP 기획’·‘AI 빌드 기획 패키지’·‘프로토타입 프롬프트’는 빌드 패키지 하나에 함께 들어갑니다 — 따로 결제하지 않습니다.
어떻게 만드나?
AI 빌드 기획 패키지 · 베타 무료
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 미들웨어로 세션 갱신.
전체 골격 만들기 — 마스터 프롬프트 실행
아래 프롬프트를 통째로 복사해 에이전트에 붙여넣으면 프로젝트 뼈대가 만들어집니다.
# 역할 및 제품 요약 당신은 시니어 프로덕트 매니저와 풀스택 아키텍트입니다. 아래 프랜차이즈 본사·가맹점 통합 관리 서비스의 검증용 MVP를 Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel로 신속히 빌드해야 합니다. ### 서비스 요약 본사, 지역 관리자, 가맹점주, 직원이 사용할 다점포 관리 웹 서비스로 사용자·권한 관리, 실시간 발주/매출/정산 관리, 대시보드, 변경 이력을 제공합니다. 현재는 수작업(팩스/카톡/전화/엑셀)으로 이뤄지는 매출·발주·정산의 병목과 불투명성을 해소합니다. …
모듈 구현 — 프로젝트 셋업
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Next.js (App Router)로 새로운 프로젝트를 생성합니다. Supabase 프로젝트를 생성하고 Web URL과 anon/public key 환경변수는 .env.local 파일에 등록합니다. Vercel에 배포할 준비까지 진행합니다. 모든 시크릿과 환경변수는 코드에 하드코딩하지 않습니다. 불필요한 예제, 생성 코드 제거하고, 깔끔한 초기상태로 유지하세요.
모듈 구현 — 인증 및 사용자 권한 관리 (Supabase Auth)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Supabase Auth(이메일/비밀번호)로 인증 기능을 추가합니다. Users 테이블과 연동, role(본사,지역관리자,가맹점주,직원)별로 앱에서 접근 권한을 분리합니다. 인증 초기화, 로그인/회원가입 화면 각 1개씩 만들고, 인증된 사용자만 접근 가능한 경로를 적용합니다. Supabase Auth 외의 추가 인증은 사용하지 않습니다.
모듈 구현 — DB 스키마(Supabase PostgreSQL) 설계 및 마이그레이션
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Supabase PostgreSQL에서 논리 데이터(Users, Stores, Orders, Sales, Settlements, SettlementChanges)에 맞춰 테이블을 설계하고 생성합니다. 외부에서 직접 쓰기가 불가하게 Row Level Security 정책과 Supabase 정책을 적용합니다. created_by/updated_by 등 감사 정보와 변경내역 기록 필드를 포함하세요. 설계 후 migration script(sql) 작성해 Supabase에 반영하세요.
모듈 구현 — 핵심 기능 개발 (발주/매출/정산 관리 및 대시보드)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
- 가맹점주는 자신의 발주(Orders)와 일매출(Sales) 입력 및 조회가 가능합니다. - 지역 관리자는 담당 매장에 대해서만 대시보드에서 주문 승인/확정, 매출, 공지 확인이 가능합니다. - 본사 사용자는 모든 가맹점 주문, 매출, 정산 내역을 한눈에 보는 전용 대시보드를 가집니다. - 정산내역(정산/변경이력), 권한·역할별 화면 하위 컴포넌트/라우팅 구조로 작성합니다. …
모듈 구현 — 관리자 기능 및 Vercel 배포
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
- (본사) 관리자/슈퍼유저는 사용자, 매장, 권한(역할 및 담당 매장 할당)을 관리합니다. - 간단한 공지(공지사항 테이블/화면) 추가, 량점주 대상 이벤트 준비 누락 방지. - 최종적으로 Vercel에 배포하며 환경 변수 및 시크릿 노출, 누락이 없는지 재확인합니다. - admin 권한으로만 접근 가능한 라우트/컴포넌트 분리합니다.
배포하기
# 배포 — 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 에 운영 도메인 추가.검증 — 핵심 시나리오 테스트
아래 체크리스트로 핵심 기능이 동작하는지 확인하세요.
### QA 수용 테스트 체크리스트 - [ ] 권한별 회원 로그인 및 내 정보 조회 (점주/직원/지역관리자/본사) - [ ] 점주가 발주 생성 시 정상 등록/조회/내점 매장만 노출됨 - [ ] 점주 발주 입력 후 지역관리자가 상태 변경(확인) 가능, 자신의 지역점포만 목록/수정 가능 - [ ] 본사가 발주 확정 시 상태 변경 및 모든 단계별 히스토리 반영 - [ ] 점주/직원이 일매출 등록 시 본인 매장만 입력/수정 - [ ] 지역관리자는 담당 점포 매출만 열람/관리 - [ ] 본사 대시보드는 전체 매장 발주, 매출, 정산 내역을 정상 조회/수정 가능 - [ ] 정산 마감 후(Mar 1~31→closed) 더 이상 금액 수정 불가, 불가시 적절 에러 메시지 노출 - [ ] 정산 금액 변경 시 변경내역(수정자, 시각, 전/후값, 사유) 자동 기록/조회 가능 - [ ] 본사 공지/알림 기능 비활성 또는 메뉴 비노출 - [ ] 미인증 사용자 api 접근시 401 Unauthorized 노출 (SSR, API 액션 모두) - [ ] 서비스 키 등 보안정보가 브라우저에 노출되지 않음 ---
막혔을 때 — 트러블슈팅
에이전트가 에러로 막히면 아래 대응을 참고하세요.
### 자주 막히는 문제 & 해결법 1. 증상: 배포환경(또는 개발환경)에서 인증이 안되고 api 호출마다 401 Unauthorized 발생 → 원인: Supabase Service Key 등 환경변수(.env.local) 미설정, Vercel 환경변수 누락 또는 잘못 설정 → 해결: Vercel/환경별 환경변수(SUPABASE_URL, SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY 등) 정확히 추가/반영(redeploy 필요), Next.js 서버리스타트 2. 증상: 특정 사용자가 전체 매장 정보/매출/정산을 볼 수 있다 (권한누락) → 원인: Supabase RLS(Row Level Security) 정책 미적용 or 잘못된 SQL 조건 → 해결: Supabase DB > Policies 직접 점검(SELECT/INSERT/UPDATE each), role/assigned_store_id 기반으로 구체적 제한 정책 재작성, 정책 테스트 3. 증상: 빌드/배포 실패 및 'Cannot find process.env.SUPABASE_…' 오류 → 원인: 환경변수 파일(.env.local) 커밋/복사 누락, Vercel 내 환경변수 미등록 → 해결: .env.local 샘플 파일 공유 & 깃 관리 제외, 환경변수 재입력, Vercel 환경변수 확인 4. 증상: Next.js 서버액션/SSR 적용 페이지에서 DB 접근 예외 또는 CORS/인증 리다이렉트 무한루프 → 원인: 클라이언트에서 service key 사용 or 서버측만 가능한 액션을 브라우저에서 호출, api route 구현 오류 → 해결: 모든 민감 요청(server key 필요)은 Next.js api route/서버액션으로 우회, 클라이언트에선 절대 service key 사용 금지 5. 증상: 발주, 정산 등 기록 변경 이력이 남지 않는다/수정자가 기록 안됨 → 원인: SettlementChanges 등 감사 로그 insert 누락 (트랜잭션 미적용) → 해결: api route/server action에서 UPDATE 실행 시 반드시 변경내역 SettlementChanges에 동시 기록하는 코드 및 테스트 추가
막히거나 시간이 없다면? 전문가가 이 빌드킷 그대로 제작해드립니다.
전문가에게 맡기기 →프랜차이즈 본사와 가맹점, 지역 관리자가 매출·발주·정산 정보를 웹에서 쉽게 주고받으며, 권한별로 필요한 정보만 안전하게 볼 수 있게 만드는 다점포 관리 서비스입니다.
사용자 및 권한 관리
관리자로서 모든 사용자를 등록/수정/삭제하고, 각자 지정된 권한만 접근하도록 하고 싶다.
가맹점별 발주 관리
가맹점주로서 발주 요청서를 작성하고, 지역 관리자·본사가 확인/확정하는 과정을 웹에서 처리하고 싶다.
일매출보고
가맹점주 또는 매장 직원으로서 매일매일의 매출을 간편하게 입력하고, 본사·관리자는 점포별 매출 현황을 볼 수 있다.
정산 내역 및 변경 이력 관리
본사 담당자로서 각 점포/기간별 정산 내역을 전산화하여 잘못 입력되면 누가 언제 무엇을 바꿨는지 확인하고 싶다.
대시보드(본사/지역)
본사와 지역 관리자 각각의 대시보드에서 권한에 맞는 점포·매출·발주·정산 현황을 한눈에 보는 화면이 필요하다.
backend/schema.sql
샘플에서는 일부만 표시-- Enable pgcrypto for UUID generation
CREATE EXTENSION IF NOT EXISTS pgcrypto;
-- Users table
CREATE TABLE users (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
name TEXT NOT NULL,
role TEXT NOT NULL CHECK (role IN ('본사', '지역관리자', '가맹점주', '직원')),나머지 105줄은 실제 결과물에서 확인할 수 있습니다
backend/rls.sql
샘플에서는 일부만 표시-- Enable Row Level Security (RLS) for all main tables ALTER TABLE users ENABLE ROW LEVEL SECURITY; ALTER TABLE stores ENABLE ROW LEVEL SECURITY; ALTER TABLE regions ENABLE ROW LEVEL SECURITY; ALTER TABLE orders ENABLE ROW LEVEL SECURITY; ALTER TABLE sales ENABLE ROW LEVEL SECURITY; ALTER TABLE settlements ENABLE ROW LEVEL SECURITY; ALTER TABLE settlement_changes ENABLE ROW LEVEL SECURITY;
나머지 17줄은 실제 결과물에서 확인할 수 있습니다
backend/seed.sql
샘플에서는 일부만 표시-- Regions
INSERT INTO regions (id, name) VALUES ('11111111-1111-1111-1111-111111111111', '서울'),
('22222222-2222-2222-2222-222222222222', '부산');
-- Stores
INSERT INTO stores (id, name, region_id) VALUES
('aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa', '강남점', '11111111-1111-1111-1111-111111111111'),
('bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb', '홍대점', '11111111-1111-1111-1111-111111111111'),나머지 25줄은 실제 결과물에서 확인할 수 있습니다
frontend/tailwind.config.js
샘플에서는 일부만 표시module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},나머지 3줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/layout.tsx
샘플에서는 일부만 표시import './globals.css';
import { 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="w-full bg-white shadow p-4 mb-4 text-xl font-bold">프랜차이즈 본사·가맹점 통합 관리</header>나머지 6줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Button.tsx
샘플에서는 일부만 표시import React from 'react';
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
children: React.ReactNode;
};
export function Button({ children, ...props }: ButtonProps) {
return (
<button {...props} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400" >
{children}나머지 4줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Card.tsx
샘플에서는 일부만 표시import React from 'react';
export function Card({ title, children }: { title: string; children: React.ReactNode }) {
return (
<section className="bg-white rounded shadow p-4 mb-4">
<h2 className="text-lg font-semibold mb-2">{title}</h2>
<div>{children}</div>
</section>
);나머지 2줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/dashboard/page.tsx
샘플에서는 일부만 표시// Stub: 본사 전용 대시보드. 추후 Supabase 연동 등 확장 예정.
import { Card } from '../../components/Card';
export default function DashboardPage() {
return (
<>
<Card title="매출 요약">
<div>전 가맹점 매출: <strong>1,300,000원</strong></div>
<div>이번달 정산 예정: <strong>1,600,000원</strong></div>나머지 10줄은 실제 결과물에서 확인할 수 있습니다
M0. 환경 기초 작업
세부 태스크 3개
M1. 핵심 데이터 조회 화면 구현
세부 태스크 2개
M2. Supabase 연동 및 인증기반 데이터 제공
세부 태스크 2개
M3. 전역 데이터 관리 및 API 연결 개선
세부 태스크 2개
# 역할 및 제품 요약 당신은 시니어 프로덕트 매니저와 풀스택 아키텍트입니다. 아래 프랜차이즈 본사·가맹점 통합 관리 서비스의 검증용 MVP를 Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel로 신속히 빌드해야 합니다. ### 서비스 요약 본사, 지역 관리자, 가맹점주, 직원이 사용할 다점포 관리 웹 서비스로 사용자·권한 관리, 실시간 발주/매출/정산 관리, 대시보드, 변경 이력을 제공합니다. 현재는 수작업(팩스/카톡/전화/엑셀)으로 이뤄지는 매출·발주·정산의 병목과 불투명성을 해소합니다. # 필수 스택 - Next.js (App Router)
나머지 53줄은 실제 결과물에서 확인할 수 있습니다
프로젝트 셋업
샘플에서는 일부만 표시Next.js (App Router)로 새로운 프로젝트를 생성합니다. Supabase 프로젝트를 생성하고 Web URL과 anon/public key 환경변수는 .env.local 파일에 등록합니다. Vercel에 배포할 준비까지 진행합니다. 모든 시크릿과 환경변수는 코드에 하드코딩하지 않습니다. 불필요한 예제, 생성 코드 제거하고, 깔끔한 초기상태로 유지하세요.
인증 및 사용자 권한 관리 (Supabase Auth)
샘플에서는 일부만 표시Supabase Auth(이메일/비밀번호)로 인증 기능을 추가합니다. Users 테이블과 연동, role(본사,지역관리자,가맹점주,직원)별로 앱에서 접근 권한을 분리합니다. 인증 초기화, 로그인/회원가입 화면 각 1개씩 만들고, 인증된 사용자만 접근 가능한 경로를 적용합니다. Supabase Auth 외의 추가 인증은 사용하지 않습니다.
DB 스키마(Supabase PostgreSQL) 설계 및 마이그레이션
샘플에서는 일부만 표시Supabase PostgreSQL에서 논리 데이터(Users, Stores, Orders, Sales, Settlements, SettlementChanges)에 맞춰 테이블을 설계하고 생성합니다. 외부에서 직접 쓰기가 불가하게 Row Level Security 정책과 Supabase 정책을 적용합니다. created_by/updated_by 등 감사 정보와 변경내역 기록 필드를 포함하세요. 설계 후 migration script(sql) 작성해 Supabase에 반영하세요.
핵심 기능 개발 (발주/매출/정산 관리 및 대시보드)
샘플에서는 일부만 표시- 가맹점주는 자신의 발주(Orders)와 일매출(Sales) 입력 및 조회가 가능합니다. - 지역 관리자는 담당 매장에 대해서만 대시보드에서 주문 승인/확정, 매출, 공지 확인이 가능합니다. - 본사 사용자는 모든 가맹점 주문, 매출, 정산 내역을 한눈에 보는 전용 대시보드를 가집니다. - 정산내역(정산/변경이력), 권한·역할별 화면 하위 컴포넌트/라우팅 구조로 작성합니다. - 모든 데이터 쓰기는 Next.js API Route에서 Supabase Service Role로 server-side만 작성하세요.
관리자 기능 및 Vercel 배포
샘플에서는 일부만 표시- (본사) 관리자/슈퍼유저는 사용자, 매장, 권한(역할 및 담당 매장 할당)을 관리합니다. - 간단한 공지(공지사항 테이블/화면) 추가, 량점주 대상 이벤트 준비 누락 방지. - 최종적으로 Vercel에 배포하며 환경 변수 및 시크릿 노출, 누락이 없는지 재확인합니다. - admin 권한으로만 접근 가능한 라우트/컴포넌트 분리합니다.