입출고를 기록하면 안전재고 기준으로 발주 시점과 발주서를 만들어주는 매장 운영 도구
어떻게 만드나?
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 미들웨어로 세션 갱신.
전체 골격 만들기 — 마스터 프롬프트 실행
아래 프롬프트를 통째로 복사해 에이전트에 붙여넣으면 프로젝트 뼈대가 만들어집니다.
### 역할 - 당신은 소상공인 카페·식당·소매점용 "재고·발주 관리 서비스"의 AI 코딩 에이전트입니다. 누구나 붙여넣기만 하면 MVP를 Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel 환경에서 안전하게 바로 빌드할 수 있도록 필요한 코드, 설정, 안내문을 단계별로 출력합니다. ### 제품 요약 - 소상공인/소규모 점주와 직원(1~5인)이 매장 재고를 쉽고 명확하게 관리할 수 있도록 웹 기반으로 입고/출고 기록, 안전재고 설정, 발주서 생성 및 거래처별 발주 이력 등의 기능을 제공합니다. 모바일 네이티브 앱이 아닌 웹앱이며, 실시간 동기화, AI 자동화, 복잡한 실시간 채팅·알림, 결제·정산 등은 MVP 범위에 포함하지 않습니다. …
모듈 구현 — 프로젝트 셋업
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Next.js (App Router) 프로젝트를 TypeScript로 만들고, Supabase 클라이언트를 사용하기 위한 환경을 셋업하세요. 환경변수(.env.local)에는 Supabase URL과 anon public key만을 사용합니다. Vercel 배포를 전제합니다. 린터/포맷터(eslint/prettier) 기본 셋업도 포함하세요.
모듈 구현 — 인증(Supabase Auth) 연동
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Supabase Auth를 Next.js(App Router)에 연동하여 회원가입, 로그인, 로그아웃 기능을 구현하세요. 이메일/비밀번호 방식만 지원하며, 사장님/직원 용 role 필드를 User DB에 저장하세요. 인증 관련 환경변수나 시크릿은 절대로 클라이언트 코드에 하드코딩하지 않습니다. 인증된 사용자만 핵심 화면/기능에 접근할 수 있게 보호 라우트를 구현하세요.
모듈 구현 — DB 스키마 설계 및 연동
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Supabase PostgreSQL에서 아래 논리 데이터(초안)에 따라 테이블을 설계·생성합니다. user_id, item_id 등 PK/FK 컬럼은 UUID로 하며, 필요한 FK 제약조건과 created_at 등 timestamp 컬럼을 추가하세요. 각 핵심 테이블: Users, InventoryItems, StockTransactions, PurchaseOrders, PurchaseOrderDetails. 테이블 생성 및 Supabase DB 클라이언트 연동 코드를 준비하세요.
모듈 구현 — 핵심 재고/발주 관리 기능 구현
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
입고/출고 등록, 안전재고 설정 및 조회, 발주서 생성·이력 확인 등 핵심 기능의 서버 액션 및 클라이언트 페이지/컴포넌트를 Next.js(App Router)/Supabase 쿼리로 구현하세요. 모든 write 액션은 서버(또는 Supabase Row Level Security)에서 인증된 사용자만 할 수 있도록 보호합니다. 사용자는 대시보드, 입·출고 관리, 안전재고 설정, 발주 이력 등을 볼 수 있어야 합니다.
모듈 구현 — 관리자 및 배포 세팅
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
사장님(관리자 role)은 모든 재고/발주 내역을 보고, 직원의 입출고 기록까지 추적할 수 있습니다. 직원은 본인 등록 기록만 확인할 수 있도록 권한을 분리하세요. Vercel로 원클릭 배포(Production, Preview) 환경을 구성하는 법 및 환경변수 안전하게 관리하는 법을 기술하세요.
배포하기
# 배포 — 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 체크리스트 #### 1. 일반 시나리오 - [ ] 로그인하지 않으면 어떠한 데이터도 볼 수 없고, 서버 액션/API가 모두 거부됨 - [ ] 재고 품목 등록/조회/수정이 순조롭고, 사용자가 등록한 품목만 확인 가능 - [ ] 입고 기록 등록 시 해당 품목 재고가 증가, 출고시 감소(음수 안됨) - [ ] 입출고 기록에 사용자, 시점, 품목이 남음(감사추적 가능) - [ ] 안전재고 이하 품목이 별도 표시됨 - [ ] 발주서 생성시 모든 입력값(거래처/수량 등)이 정확히 반영되어 저장됨 - [ ] 발주이력조회에서 거래처/날짜 등 필터링이 기대대로 작동 #### 2. 예외/잠재적 에러 시나리오 - [ ] 없는 품목 id, 사용 불가한 값(inputs)으로 등록 시 시도 실패/오류 안내 - [ ] 출고 수량이 현재 재고보다 많을 때 등록 실패 - [ ] 인증 없는 사용자가 REST API 호출 시 401/403 에러 - [ ] RLS 정책에 따라 한 유저가 다른 유저 데이터 못 보거나 수정 불가 - [ ] 두 사용자가 거의 동시에 입고/출고해도 데이터 정합성 유지(동시성) - [ ] 환경변수/시크릿 미설정시 빌드나 배포가 실패(확인)
막혔을 때 — 트러블슈팅
에이전트가 에러로 막히면 아래 대응을 참고하세요.
### 자주 막히는 문제와 해결법 1. **API 호출시 401/403 에러** - 증상: 로그인했는데도 데이터 쓰기/보기 불가 또는 인증오류 - 원인: Supabase Auth 세션 만료/토큰 전달 안됨, RLS 미설정 - 해결: supabase.auth.getSession()→ 토큰 첨부, Supabase 테이블별 RLS가 user_id=auth.uid()인지 확인 2. **Vercel 배포 후 환경변수 인식/보안키 노출** - 증상: 빌드는 되나 .env 값 적용 안됨 or 서비스키 브라우저 노출 - 원인: .env 안쓰거나 public에 서비스키 노출 - 해결: 프로젝트 루트에 .env.local, Vercel Settings>Environment Variables 에서 입력, 서비스키/DB키는 API서버에서만 3. **DB insert/update/select 권한 에러** - 증상: 기록/수정/조회 자체가 실패, 권한오류 표시 - 원인: Supabase RLS정책 미설정, user_id 누락 - 해결: Supabase Dashboard에서 반드시 user_id=auth.uid() 등 정책 적용 4. **배포 후 CORS Block/에러** - 증상: 브라우저 네트워크 에러, CORS기반 API 차단 - 원인: Supabase 프로젝트, 프록시 및 headers 불일치 - 해결: Supabase Settings > API > CORS에 도메인 추가, Next.js API Route서 Access-Control-Allow-* 헤더 5. **스키마/타입 불일치 에러** - 증상: 객체에 없는 키 접근, 타입스크립트 에러, 런타임 크래시 - 원인: DB schema 변경 후 타입/코드 동기화 깜빡함 - 해결: DB 수정 → 코드 타입 재생성, supabase-js 타입 생성기로 갱신, any 지양, 명시적 지정
막히거나 시간이 없다면? 전문가가 이 빌드킷 그대로 제작해드립니다.
전문가에게 맡기기 →소상공인 매장의 재고와 발주를 간편하게 관리할 수 있는 웹 기반 도구입니다. 매장에서 발생하는 입고/출고 내역을 손쉽게 기록하고, 안전재고 설정 및 발주 시점 알림과 발주서 관리 기능을 제공합니다. 직원이 여러 명이라도 사용자별로 내역을 추적할 수 있습니다.
재고 입고·출고 기록
나는 매장 직원 또는 사장님으로, 매번 입고/출고가 발생할 때 쉽게 내역을 기록해 실제 재고를 신속히 관리하고 싶다.
안전재고 설정보고 및 알림
나는 사장님으로, 품목별 안전재고 수량을 설정하고, 부족 위험이 발생하는 품목을 한눈에 보고싶다.
발주서 생성 및 발주 이력 관리
나는 사장님 또는 담당 직원으로, 거래처별 발주서 작성과 내역을 손쉽게 기록, 조회하고 싶다.
다중 사용자 및 권한 관리
나는 사장님으로, 매장 직원별 계정을 관리하고, 직원이 기록한 이력도 함께 확인하고 싶다.
재고 대시보드 요약
나는 사장님 또는 직원으로, 전체 재고 현황과 입고/출고 내역, 위험 품목을 한눈에 보고싶다.
backend/schema.sql
샘플에서는 일부만 표시CREATE EXTENSION IF NOT EXISTS pgcrypto; -- 사용자 테이블(사장, 직원) CREATE TABLE users ( user_id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name TEXT NOT NULL, email TEXT NOT NULL UNIQUE,
나머지 74줄은 실제 결과물에서 확인할 수 있습니다
backend/rls.sql
샘플에서는 일부만 표시-- Row Level Security 활성화 및 기본 정책 예시 -- 각 테이블에 대해 row level security 활성화 ALTER TABLE users ENABLE ROW LEVEL SECURITY; ALTER TABLE inventory_items ENABLE ROW LEVEL SECURITY; ALTER TABLE stock_transactions ENABLE ROW LEVEL SECURITY; ALTER TABLE purchase_orders ENABLE ROW LEVEL SECURITY; ALTER TABLE purchase_order_details ENABLE ROW LEVEL SECURITY;
나머지 13줄은 실제 결과물에서 확인할 수 있습니다
backend/seed.sql
샘플에서는 일부만 표시-- 데모 사장님(실제 로그인은 Supabase Auth에서 생성됨)
INSERT INTO users (user_id, name, email, password_hash, role) VALUES
('11111111-1111-1111-1111-111111111111', '김사장', 'boss@example.com', 'hashed_pw', '사장님'),
('22222222-2222-2222-2222-222222222222', '이직원', 'staff@example.com', 'hashed_pw', '직원');
INSERT INTO inventory_items (item_id, name, unit, safety_stock_quantity) VALUES
('aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa', '원두', 'kg', 3),나머지 13줄은 실제 결과물에서 확인할 수 있습니다
frontend/tailwind.config.js
샘플에서는 일부만 표시module.exports = {
content: [
'./app/**/*.{ts,tsx,js,jsx}',
'./components/**/*.{ts,tsx,js,jsx}'
],
theme: {
extend: {
colors: {나머지 9줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/layout.tsx
샘플에서는 일부만 표시'use client';
import './globals.css';
import type { ReactNode } from 'react';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="ko">
<body className="bg-background min-h-screen text-gray-900">나머지 11줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Button.tsx
샘플에서는 일부만 표시import type { ButtonHTMLAttributes, ReactNode } from 'react';
export function Button({ children, className = '', ...props }: ButtonHTMLAttributes<HTMLButtonElement> & { children: ReactNode }) {
return (
<button
className={`px-4 py-2 rounded bg-primary text-white hover:bg-blue-700 disabled:opacity-50 transition ${className}`}
{...props}
>나머지 5줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Card.tsx
샘플에서는 일부만 표시import type { ReactNode } from 'react';
export function Card({ children, className = '' }: { children: ReactNode, className?: string }) {
return (
<div className={`bg-white shadow rounded p-4 mb-4 ${className}`}>
{children}
</div>
);나머지 2줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/dashboard/page.tsx
샘플에서는 일부만 표시'use client';
import { Card } from '@/components/Card';
import { Button } from '@/components/Button';
// 데모 static 대시보드 스텁(확장 가능)
export default function DashboardPage() {
return (
<div>나머지 23줄은 실제 결과물에서 확인할 수 있습니다
M0. DB 스키마/보안/시드 구축
세부 태스크 3개
M1. 기본 UI 환경/프레임워크 세팅
세부 태스크 3개
M2. 공통 컴포넌트/대시보드 화면 제작
세부 태스크 3개
M3. Supabase 연동 및 인증 UI 골격
세부 태스크 3개
M4. 핵심 기능별 화면/APIs 추가
세부 태스크 3개
### 역할 - 당신은 소상공인 카페·식당·소매점용 "재고·발주 관리 서비스"의 AI 코딩 에이전트입니다. 누구나 붙여넣기만 하면 MVP를 Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel 환경에서 안전하게 바로 빌드할 수 있도록 필요한 코드, 설정, 안내문을 단계별로 출력합니다. ### 제품 요약 - 소상공인/소규모 점주와 직원(1~5인)이 매장 재고를 쉽고 명확하게 관리할 수 있도록 웹 기반으로 입고/출고 기록, 안전재고 설정, 발주서 생성 및 거래처별 발주 이력 등의 기능을 제공합니다. 모바일 네이티브 앱이 아닌 웹앱이며, 실시간 동기화, AI 자동화, 복잡한 실시간 채팅·알림, 결제·정산 등은 MVP 범위에 포함하지 않습니다. ### 필수 스택/환경 - Next.js (App Router)
나머지 46줄은 실제 결과물에서 확인할 수 있습니다
프로젝트 셋업
샘플에서는 일부만 표시Next.js (App Router) 프로젝트를 TypeScript로 만들고, Supabase 클라이언트를 사용하기 위한 환경을 셋업하세요. 환경변수(.env.local)에는 Supabase URL과 anon public key만을 사용합니다. Vercel 배포를 전제합니다. 린터/포맷터(eslint/prettier) 기본 셋업도 포함하세요.
인증(Supabase Auth) 연동
샘플에서는 일부만 표시Supabase Auth를 Next.js(App Router)에 연동하여 회원가입, 로그인, 로그아웃 기능을 구현하세요. 이메일/비밀번호 방식만 지원하며, 사장님/직원 용 role 필드를 User DB에 저장하세요. 인증 관련 환경변수나 시크릿은 절대로 클라이언트 코드에 하드코딩하지 않습니다. 인증된 사용자만 핵심 화면/기능에 접근할 수 있게 보호 라우트를 구현하세요.
DB 스키마 설계 및 연동
샘플에서는 일부만 표시Supabase PostgreSQL에서 아래 논리 데이터(초안)에 따라 테이블을 설계·생성합니다. user_id, item_id 등 PK/FK 컬럼은 UUID로 하며, 필요한 FK 제약조건과 created_at 등 timestamp 컬럼을 추가하세요. 각 핵심 테이블: Users, InventoryItems, StockTransactions, PurchaseOrders, PurchaseOrderDetails. 테이블 생성 및 Supabase DB 클라이언트 연동 코드를 준비하세요.
핵심 재고/발주 관리 기능 구현
샘플에서는 일부만 표시입고/출고 등록, 안전재고 설정 및 조회, 발주서 생성·이력 확인 등 핵심 기능의 서버 액션 및 클라이언트 페이지/컴포넌트를 Next.js(App Router)/Supabase 쿼리로 구현하세요. 모든 write 액션은 서버(또는 Supabase Row Level Security)에서 인증된 사용자만 할 수 있도록 보호합니다. 사용자는 대시보드, 입·출고 관리, 안전재고 설정, 발주 이력 등을 볼 수 있어야 합니다.
관리자 및 배포 세팅
샘플에서는 일부만 표시사장님(관리자 role)은 모든 재고/발주 내역을 보고, 직원의 입출고 기록까지 추적할 수 있습니다. 직원은 본인 등록 기록만 확인할 수 있도록 권한을 분리하세요. Vercel로 원클릭 배포(Production, Preview) 환경을 구성하는 법 및 환경변수 안전하게 관리하는 법을 기술하세요.