착불 결제 쇼핑몰 + 관리자 대시보드 만들기

새 Supabase 프로젝트 만들기

Supabase 열기

https://supabase.com/?utm_source=partner&utm_medium=social&utm_campaign=supasquad&dub_id=faVfKdcLWvKCbYNp

SQL Editor 열기

SQL 코드 1 실행 — Orders 테이블 만들기

-- Create orders table create table if not exists public.orders ( id uuid primary key default gen_random_uuid(), customer_name text not null, phone text not null, email text, city text not null, address text not null, country text default 'United States', product_name text not null, product_variant text, quantity int not null default 1, notes text, status text not null default 'pending', -- pending, confirmed, shipped, cancelled created_at timestamptz default now() ); -- Enable RLS alter table public.orders enable row level security;

SQL 코드 2 실행 — Profiles 테이블 만들기

-- Create profiles table create table if not exists public.profiles ( user_id uuid primary key references auth.users(id) on delete cascade, role text not null default 'user' ); -- Enable RLS alter table public.profiles enable row level security;

Authentication → Users 에서 관리자 계정 만들기

SQL 코드 3 실행 — 관리자 역할 부여하기

USER_ID를 내 UID로 바꾸기

insert into public.profiles (user_id, role) values ('PUT_USER_ID_HERE', 'admin');

SQL 코드 — 보안 정책 (RLS)

SQL 코드 4 — Profiles 읽기 정책

-- Profiles are readable by owner create policy "Profiles are readable by owner" on public.profiles for select to authenticated using (auth.uid() = user_id);

SQL 코드 5 — 일반 사용자 주문 생성 정책

-- Public can create orders create policy "Public can create orders" on public.orders for insert to anon with check ( status = 'pending' );

SQL 코드 6 — 관리자 주문 조회 정책

-- Admins can view all orders create policy "Admins can view all orders" on public.orders for select to authenticated using ( exists ( select 1 from public.profiles where profiles.user_id = auth.uid() and profiles.role = 'admin' ) );

SQL 코드 7 — 관리자 주문 수정 정책

-- Admins can update all orders create policy "Admins can update all orders" on public.orders for update to authenticated using ( exists ( select 1 from public.profiles where profiles.user_id = auth.uid() and profiles.role = 'admin' ) ) with check ( exists ( select 1 from public.profiles where profiles.user_id = auth.uid() and profiles.role = 'admin' ) );

Project URL과 Publishable Key 복사하기

체크리스트

Supabase Project URL 입력

Supabase Publishable Key 입력

생성된 프롬프트 복사하기

Google AI Studio에서 쇼핑몰 페이지 생성하기

테스트 주문 넣기

Supabase → Orders 테이블에서 주문 확인하기

이 단계에서 사용하는 프롬프트

프롬프트 1 — 쇼핑몰 + 주문 폼 생성하기

You are building a web app INSIDE this Google AI Studio project. Task: Create a beautiful, premium, light-mode single-page Cash-on-Delivery (COD) store TEMPLATE (one product) that is simple and beginner-friendly to customize. IMPORTANT OUTPUT RULES: - Do NOT paste the full HTML/CSS/JS code in the chat. - Instead, create/update the project files directly. - After you finish, reply with: 1) A short bullet summary of what you built 2) Where beginners should edit the template (the exact variables/sections) Design (Light Mode): - Clean white / soft light gray background with a subtle pastel gradient. - Modern premium SaaS look (Apple/Stripe style). - Elegant spacing, rounded corners, soft shadows. - Looks great on mobile. Template placeholders (make them easy to edit): - STORE_NAME: "YOUR STORE NAME" - PRODUCT_NAME: "YOUR PRODUCT NAME" - PRODUCT_DESCRIPTION: "YOUR PRODUCT DESCRIPTION" - PRICE_PER_UNIT: 49 - CURRENCY: "USD" - Variants: "Variant A", "Variant B", "Variant C" - Default country: "United States" Sections to include (keep it simple): 1) Header (store name + link scroll to “How COD Works”) 2) Hero (product name, description, CTA buttons) 3) Benefits (3 cards) 4) How COD Works (3 steps) 5) Order Form (most important) + Order Summary (price x quantity) 6) FAQ (3 items) 7) Footer Supabase (INSERT only): - Use Supabase JS client. - Use placeholders: SUPABASE_URL = "{{SUPABASE_URL}}" SUPABASE_PUBLISHABLE_KEY = "{{SUPABASE_PUBLISHABLE_KEY}}" - On form submit: INSERT into table "orders" with: customer_name, phone, email, city, address, country, product_name, product_variant, quantity, notes, status="pending" Critical rules: - INSERT only. Do NOT use select/update/delete. - Show success banner on success, generic error banner on failure. - Validate required fields with small inline errors. - Disable the submit button while sending. Now build it inside the project so I can run it immediately.

Supabase Project URL

Supabase Project URL을 여기에 붙여넣기

Supabase Publishable Key

Supabase publishable key를 여기에 붙여넣기

체크리스트

Supabase Project URL 입력

Supabase Publishable Key 입력

생성된 프롬프트 복사하기

Google AI Studio에서 관리자 대시보드 생성하기

Supabase 관리자 계정으로 로그인하기

이 단계에서 사용하는 프롬프트

프롬프트 2 — 관리자 대시보드 생성하기

You are an expert full-stack engineer. Build a modern admin dashboard for managing Cash-on-Delivery (COD) orders using Supabase. Use the following Supabase credentials: SUPABASE_URL = "{{SUPABASE_URL}}" SUPABASE_KEY = "{{SUPABASE_KEY}}" The database contains a table called: orders Fields include: customer_name, email, phone, city, address, product_variant, quantity, status, created_at. The dashboard should allow an admin to: • log in • view order statistics • see recent orders • search and filter orders • update order status • customize the application name in settings Design it as a clean modern SaaS dashboard with a light Apple-style UI. Keep the implementation simple and produce a fully working result.

Supabase Project URL

Supabase Project URL을 여기에 붙여넣기

Supabase Publishable Key

Supabase Publishable Key를 여기에 붙여넣기

체크리스트

Google AI Studio에서 프로젝트를 GitHub에 저장하기

Hostinger에서 Node.js Web App 호스팅 만들기

GitHub 저장소 가져오기

공개된 프로젝트 URL 열기

이 단계에서 사용하는 호스팅

Hostinger에 배포하기

영상과 똑같은 구성으로 이 프로젝트를 공개합니다.

RECOMMENDED

https://www.hostg.xyz/SHJ9M

이 업그레이드는 새 주문이 들어올 때마다 자동으로 이메일을 보내 쇼핑몰을 더 쓸모 있게 만듭니다.

- 사장님이 신규 주문 이메일을 받습니다

- 고객이 주문 확인 이메일을 받습니다

AI 쇼핑몰에서 이메일 자동 발송되게 만들기 (Supabase 튜토리얼)

튜토리얼 보기

https://www.youtube.com/watch?v=NK6ztA_-0cE