견적서를 만들면 금액 구간에 따라 정해진 결재선으로 승인이 올라가고, 승인된 버전만 고객에게 만료되는 열람 링크로 나가며, 고객이 서명하면 계약으로 확정되고 파이프라인 금액이 갱신되는 영업 도구
‘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 미들웨어로 세션 갱신.
전체 골격 만들기 — 마스터 프롬프트 실행
아래 프롬프트를 통째로 복사해 에이전트에 붙여넣으면 프로젝트 뼈대가 만들어집니다.
# 역할 너는 B2B 영업 견적·계약 관리 서비스의 MVP를 개발하는 AI 코딩 에이전트야. 이 서비스의 주요 사용자는 견적서를 주고받는 영업 담당자(사내/외), 승인 권한 팀장, 그리고 견적을 받아 검토 및 서명하는 고객사 담당자다. # 제품 요약 엑셀/이메일 기반 견적 과정에서 발생하는 버전 관리, 승인 흐름, 할인율 오입력, 진행 현황 집계 등 불편을 없애기 위한 웹 기반 견적/계약 관리 도구를 만든다. 쉽게 견적 생성 및 승인, 고객 검토와 서명, 계약 확정과 파이프라인 자동화까지 지원한다. …
모듈 구현 — 프로젝트 셋업 & 기본 환경설정
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Next.js (App Router) 프로젝트를 생성하고, TypeScript를 활성화합니다. Vercel 배포 환경을 고려해 환경변수(.env.local) 관리 구조를 마련하고, gitignore를 적절히 설정합니다. Supabase JS SDK와 필요한 의존성을 install합니다. 클라이언트와 서버 컴포넌트 구분 가이드를 문서로 남깁니다.
모듈 구현 — Supabase Auth 인증 구현
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Supabase Auth를 통한 이메일/비밀번호 회원가입 및 로그인, 로그아웃 기능을 구현합니다. 세션 유지, 유저 권한(영업담당자, 팀장, 고객) 분리에 유의합니다. 인증 관련 환경변수는 절대 코드에 하드코딩하지 않고 .env.local에서 로드합니다. 인증 상태에 따라 접근 제어(HOC 또는 미들웨어, route group)는 서버 컴포넌트에서 처리합니다.
모듈 구현 — 데이터베이스 스키마 설계 및 마이그레이션
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Supabase (PostgreSQL)에서 아래 논리 데이터 스키마에 따라 users, quotations, signatures, pipeline 테이블을 생성합니다. 각 테이블별 PK, FK, 인덱스를 설계하고, 필요한 최소한의 제약조건(CHECK, NULL, UNIQUE 등)을 반영합니다. Supabase Studio를 통해 손쉽게 개발환경에서 테스트할 수 있도록 합니다. 쓰기 및 민감 데이터는 Row Level Security(RLS) 정책 및 Supabase Policy로 보호합니다.
모듈 구현 — 영업 견적·계약 관리 핵심 기능 개발
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
견적서 생성/수정, 금액·할인율 입력, 견적 결재선에 따른 상태(승인대기·승인·반려) 관리, 팀장 승인, 승인 후 견적 만료 링크 발송, 고객 견적 열람·서명·계약 확정 기능을 서버 컴포넌트 위주로 구현합니다. 승인/계약 상태 변경은 반드시 서버 API(Route Handler)에서 권한 체크 후 처리합니다. 견적서별 최종본 버전 관리 및 관련 알림(이메일 또는 페이지 내 표시)에 집중합니다. 파이프라인 및 매출 대시보드 기능(진행·완료 집계)까지 포함합니다.
모듈 구현 — 관리자 설정·배포 및 보안 점검
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Vercel에 Next.js 앱을 안전하게 배포하며, .env.local에 민감 정보 및 Supabase key를 안전하게 관리합니다. 서버 only key가 노출되지 않는지 점검합니다. RLS 정책이 기대대로 동작하는지, 인증되지 않은 요청/권한 없는 유저의 접근이 차단되는지 최종 테스트를 합니다. README에 운영 체계 및 보안 가이드, 초기 관리자 생성법을 명확히 명시합니다.
배포하기
# 배포 — 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 에 운영 도메인 추가.검증 — 핵심 시나리오 테스트
아래 체크리스트로 핵심 기능이 동작하는지 확인하세요.
### 핵심 수용 테스트 체크리스트 - [ ] 영업담당자가 정상적으로 회원가입/로그인/로그아웃 가능하다 - [ ] 영업담당자가 견적서를 신규로 작성, 목록/상세 확인 가능하다 - [ ] 견적서의 할인율이 권한(예: 최대치 등)에 맞게 입력되는지, 이상치 차단(명시적 validation만) - [ ] 견적은 상태가 "작성중"에서 팀장 승인 전까지만 편집할 수 있다 - [ ] 팀장은 승인 대기 견적서만 승인/반려 가능하고, 승인/반려 후 관련 정보가 저장된다 - [ ] 승인된 견적서는 유효기간 링크를 생성해, 고객에게 전달/공유되고, 고객은 링크 통해 열람 가능하다 - [ ] 고객 담당자는 승인된 견적서에 서명(전자서명)하여 계약을 확정할 수 있다 - [ ] 계약 확정 시 파이프라인/대시보드에 자동으로 반영된다(진행중→계약확정, 매출 집계 등) - [ ] 미인증 사용자는 /api/quotations, /api/pipeline 등 API에 접근 시 401 Unauthorized 리턴됨을 확인 - [ ] 만료/잘못된 견적 링크는 열람·서명 불가, 적절한 안내 제공 - [ ] 할인/금액 등 민감 필드는 서버에서만 검증, 클라이언트로만 전송 시 우회 불가함을 검증
막혔을 때 — 트러블슈팅
에이전트가 에러로 막히면 아래 대응을 참고하세요.
### Next.js+Supabase+Vercel 환경의 주요 문제 및 대응법
- 증상: 'Could not find env var SUPABASE_SERVICE_ROLE_KEY' 또는 인증 관련 에러/빌드실패
- 원인: Vercel 환경변수가 미설정, .env.local 또는 Vercel Project Settings에 키 누락
- 해결: Supabase 콘솔에서 service(anon) 키 확인 후, Vercel dashboard > Project > Settings > Environment Variables에 변수 정확히 추가. 클라이언트에서 service key 사용 금지("only anon/public key on client").
- 증상: 인증 사용액션(API) 호출 시 401 Unauthorized 발생
- 원인: Supabase Auth 세션/토큰이 만료됐거나, Authorization header 누락
- 해결: 클라이언트에서 반드시 supabase.auth.getSession()을 사용해 access_token 전달, Next.js 서버액션/route handler에선 토큰 파싱후 검증.
- 증상: "Row Level Security (RLS) policy does not allow access" 또는 DB 쿼리에 데이터 누락/조회 불가
- 원인: Supabase RLS 정책이 과도/미설정됨. 테이블 접근 role/user 제한 오류.
- 해결: Supabase 콘솔에서 각 테이블의 RLS 정책을 점검, 필요한 경우 'enable RLS' 후, 명확한 정책(예: created_by = auth.uid())을 재적용. QA시 여러 계정으로 실제 데이터 시나리오별 리스트업 테스트 병행.
- 증상: Vercel 배포 후 fetch/API 요청에 CORS 에러
- 원인: Route Handler의 response 헤더 부족 or API route와 프론트앱 도메인이 상이/CORS 설정 누락
- 해결: API 응답에 Access-Control-Allow-Origin 헤더 명시, Supabase Functions 등 외부 API 사용시 origins에 허용 도메인 추가
- 증상: DB 변경사항(스키마, 정책 등) 반영이 안 됨/TypeScript 타입 미일치
- 원인: 데이터베이스 스키마가 변경되었는데 코드 반영이 누락됨. 타입 생성 자동화 미실행
- 해결: Supabase CLI로 타입 재생성(supabase gen types ...), 코드와 실제 스키마 동기화. 빌드 전 "npm run db:types" 등 자동화 스크립트 활용.
---
모든 문제는 먼저 최신 로그/콘솔/에러메시지 또는 Supabase/Next.js 공식문서를 참조.막히거나 시간이 없다면? 전문가가 이 빌드킷 그대로 제작해드립니다.
전문가에게 맡기기 →B2B 영업팀이 견적서와 계약서를 온라인에서 쉽고 빠르게 작성·공유·승인하고, 진행 중인 계약현황 및 예상 매출을 편리하게 관리할 수 있는 웹 기반 솔루션입니다. 수작업 Excel, 메일, 메신저 대체로 업무 실수를 줄이고 업무 흐름을 체계화합니다.
견적서 작성 및 금액·할인 입력
영업 담당자는 웹에서 견적서를 작성하고, 필요한 경우 할인율을 직접 입력할 수 있다.
견적 승인 프로세스(결재선)
작성한 견적서에 대해 팀장이 승인할 수 있다. 승인 전 할인율이 규정 범위 넘으면 경고한다.
고객 견적 확인 및 만료 링크
영업 담당자가 승인된 견적서를 고객에게 온라인 링크로 전달하고, 고객이 열람·검토할 수 있다.
고객 서명 및 계약 확정
고객이 온라인에서 서명 후, 견적이 계약으로 확정될 수 있다.
계약현황 및 파이프라인 대시보드
영업팀은 모든 견적서/진행 계약의 상태와 이번 달 예상 매출을 실시간으로 볼 수 있다.
backend/schema.sql
샘플에서는 일부만 표시-- enable extensions
create extension if not exists pgcrypto; -- for gen_random_uuid()
-- users table
create table users (
id uuid primary key default gen_random_uuid(),
name text not null,
email text unique not null,나머지 60줄은 실제 결과물에서 확인할 수 있습니다
backend/rls.sql
샘플에서는 일부만 표시-- Enable row level security alter table users enable row level security; alter table quotations enable row level security; alter table signatures enable row level security; alter table pipeline enable row level security; -- Example RLS policies (최소 보안: production 배포 전 반드시 상세화 필요) -- sales/manager는 본인이 작성한/승인한 데이터만, 고객은 본인 관련 데이터만 접근 허용 예시
나머지 30줄은 실제 결과물에서 확인할 수 있습니다
backend/seed.sql
샘플에서는 일부만 표시-- Users (sales, manager, customer)
insert into users (id, name, email, password_hash, role) values
('aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa', '홍길동', 'sales1@example.com', '$2b$10$abc', 'sales'),
('bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb', '김팀장', 'manager1@example.com', '$2b$10$def', 'manager'),
('cccccccc-cccc-cccc-cccc-cccccccccccc', '이거래처', 'customer1@example.com', '$2b$10$xyz', 'customer');
-- quotation (draft, pending, approved)
insert into quotations (id, created_by, customer_id, amount, discount_rate, status, expiration_date)나머지 11줄은 실제 결과물에서 확인할 수 있습니다
frontend/tailwind.config.js
샘플에서는 일부만 표시module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {나머지 8줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/layout.tsx
샘플에서는 일부만 표시import './globals.css';
export const metadata = {
title: 'B2B 견적·계약 관리',
description: 'B2B 영업을 위한 견적-계약 파이프라인 서비스',
};
export default function RootLayout({ children }) {나머지 12줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Button.tsx
샘플에서는 일부만 표시import React from "react";
import cn from "classnames";
export function Button({ children, variant = 'primary', ...props }) {
return (
<button
className={cn(
'px-4 py-2 rounded font-medium transition',나머지 10줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Card.tsx
샘플에서는 일부만 표시import React from "react";
export function Card({ title, children }) {
return (
<div className="bg-white rounded shadow p-4 mb-6">
{title && <div className="font-bold mb-2 text-lg">{title}</div>}
<div>{children}</div>
</div>나머지 3줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/dashboard/page.tsx
샘플에서는 일부만 표시import { Card } from '../../components/Card'
import { Button } from '../../components/Button'
export default function DashboardPage() {
// 스텁: seedData 예시로 고정된 값 표시
return (
<div>
<h1 className="text-xl font-bold mb-4">영업 파이프라인 대시보드</h1>나머지 17줄은 실제 결과물에서 확인할 수 있습니다
M0. 초기 셋업 및 DB 구조 설계
세부 태스크 4개
M1. 프론트엔드 베이스라인 구현
세부 태스크 5개
M2. Supabase 연동 및 CRUD 기본 API 연결
세부 태스크 3개
M3. 핵심 기능 활성화(견적서 작성/목록/승인 등)
세부 태스크 3개
# 역할 너는 B2B 영업 견적·계약 관리 서비스의 MVP를 개발하는 AI 코딩 에이전트야. 이 서비스의 주요 사용자는 견적서를 주고받는 영업 담당자(사내/외), 승인 권한 팀장, 그리고 견적을 받아 검토 및 서명하는 고객사 담당자다. # 제품 요약 엑셀/이메일 기반 견적 과정에서 발생하는 버전 관리, 승인 흐름, 할인율 오입력, 진행 현황 집계 등 불편을 없애기 위한 웹 기반 견적/계약 관리 도구를 만든다. 쉽게 견적 생성 및 승인, 고객 검토와 서명, 계약 확정과 파이프라인 자동화까지 지원한다. # 필수 스택 - Next.js (App Router)
나머지 40줄은 실제 결과물에서 확인할 수 있습니다
프로젝트 셋업 & 기본 환경설정
샘플에서는 일부만 표시Next.js (App Router) 프로젝트를 생성하고, TypeScript를 활성화합니다. Vercel 배포 환경을 고려해 환경변수(.env.local) 관리 구조를 마련하고, gitignore를 적절히 설정합니다. Supabase JS SDK와 필요한 의존성을 install합니다. 클라이언트와 서버 컴포넌트 구분 가이드를 문서로 남깁니다.
Supabase Auth 인증 구현
샘플에서는 일부만 표시Supabase Auth를 통한 이메일/비밀번호 회원가입 및 로그인, 로그아웃 기능을 구현합니다. 세션 유지, 유저 권한(영업담당자, 팀장, 고객) 분리에 유의합니다. 인증 관련 환경변수는 절대 코드에 하드코딩하지 않고 .env.local에서 로드합니다. 인증 상태에 따라 접근 제어(HOC 또는 미들웨어, route group)는 서버 컴포넌트에서 처리합니다.
데이터베이스 스키마 설계 및 마이그레이션
샘플에서는 일부만 표시Supabase (PostgreSQL)에서 아래 논리 데이터 스키마에 따라 users, quotations, signatures, pipeline 테이블을 생성합니다. 각 테이블별 PK, FK, 인덱스를 설계하고, 필요한 최소한의 제약조건(CHECK, NULL, UNIQUE 등)을 반영합니다. Supabase Studio를 통해 손쉽게 개발환경에서 테스트할 수 있도록 합니다. 쓰기 및 민감 데이터는 Row Level Security(RLS) 정책 및 Supabase Policy로 보호합니다.
영업 견적·계약 관리 핵심 기능 개발
샘플에서는 일부만 표시견적서 생성/수정, 금액·할인율 입력, 견적 결재선에 따른 상태(승인대기·승인·반려) 관리, 팀장 승인, 승인 후 견적 만료 링크 발송, 고객 견적 열람·서명·계약 확정 기능을 서버 컴포넌트 위주로 구현합니다. 승인/계약 상태 변경은 반드시 서버 API(Route Handler)에서 권한 체크 후 처리합니다. 견적서별 최종본 버전 관리 및 관련 알림(이메일 또는 페이지 내 표시)에 집중합니다. 파이프라인 및 매출 대시보드 기능(진행·완료 집계)까지 포함합니다.
관리자 설정·배포 및 보안 점검
샘플에서는 일부만 표시Vercel에 Next.js 앱을 안전하게 배포하며, .env.local에 민감 정보 및 Supabase key를 안전하게 관리합니다. 서버 only key가 노출되지 않는지 점검합니다. RLS 정책이 기대대로 동작하는지, 인증되지 않은 요청/권한 없는 유저의 접근이 차단되는지 최종 테스트를 합니다. README에 운영 체계 및 보안 가이드, 초기 관리자 생성법을 명확히 명시합니다.