Lovable
Bolt.new
v0.dev
Replit Agent
Firebase Studio
SDK Method 방식
Recommended 추천
API Method 방식
Why SDK?
SDK를 추천하는 이유
TypeScript support with full type safety TypeScript 타입 지원으로 안전한 개발
Simpler code, less boilerplate 간결한 코드, 적은 보일러플레이트
Built-in auth token management 인증 토큰 자동 관리
SETUP
Initial Setup
초기 설정
Copy
Install the Diffsome SDK and set up the client.
npm install @diffsome/sdk
Create src/lib/diffsome.ts:
import { Diffsome } from '@diffsome/sdk';
export const diffsome = new Diffsome({
baseUrl: 'https://www.superselling.co.kr',
tenantId: 'YOUR_TENANT_ID',
apiKey: 'YOUR_API_KEY',
persistToken: true,
});
Replace YOUR_TENANT_ID and YOUR_API_KEY with your actual values from the dashboard.Diffsome SDK를 설치하고 클라이언트를 설정해주세요.
npm install @diffsome/sdk
src/lib/diffsome.ts 파일을 생성하세요:
import { Diffsome } from '@diffsome/sdk';
export const diffsome = new Diffsome({
baseUrl: 'https://www.superselling.co.kr',
tenantId: 'YOUR_TENANT_ID',
apiKey: 'YOUR_API_KEY',
persistToken: true,
});
YOUR_TENANT_ID와 YOUR_API_KEY는 대시보드에서 확인한 실제 값으로 교체하세요.
AUTH
Login & Register
로그인 & 회원가입
Copy
Create login and register pages using the Diffsome SDK.
Login:
const { token, user } = await diffsome.auth.login({ email, password });
Register:
const { token, user } = await diffsome.auth.register({ name, email, password, password_confirmation: password });
Logout:
await diffsome.auth.logout();
Check auth state:
const user = await diffsome.auth.me();
Use persistToken: true in SDK config for automatic token management.Diffsome SDK를 사용해서 로그인, 회원가입 페이지를 만들어주세요.
로그인:
const { token, user } = await diffsome.auth.login({ email, password });
회원가입:
const { token, user } = await diffsome.auth.register({ name, email, password, password_confirmation: password });
로그아웃:
await diffsome.auth.logout();
로그인 상태 확인:
const user = await diffsome.auth.me();
SDK 설정에서 persistToken: true를 사용하면 토큰이 자동 관리됩니다.
BLOG
Blog List & Detail
블로그 목록 & 상세
Copy
Create blog list and detail pages using Diffsome SDK.
List posts:
const { data: posts, meta } = await diffsome.blog.list({ page: 1, per_page: 10 });
Get single post:
const post = await diffsome.blog.get(slug);
Get categories:
const categories = await diffsome.blog.categories();
Filter by category:
const { data: posts } = await diffsome.blog.byCategory('tech');Diffsome SDK를 사용해서 블로그 목록, 상세 페이지를 만들어주세요.
글 목록:
const { data: posts, meta } = await diffsome.blog.list({ page: 1, per_page: 10 });
글 상세:
const post = await diffsome.blog.get(slug);
카테고리 목록:
const categories = await diffsome.blog.categories();
카테고리별 필터:
const { data: posts } = await diffsome.blog.byCategory('tech');
SHOP
Products & Categories
상품 & 카테고리
Copy
Create product list and detail pages using Diffsome SDK.
Product List:
const { data: products, meta } = await diffsome.shop.listProducts({ page: 1, per_page: 12 });
Product Detail:
const product = await diffsome.shop.getProduct(slug);
Featured Products:
const featured = await diffsome.shop.featuredProducts(8);
Search Products:
const { data: results } = await diffsome.shop.searchProducts('keyword');
Categories:
const { data: categories } = await diffsome.shop.listCategories();
const category = await diffsome.shop.getCategory(slug);
const { data: products } = await diffsome.shop.categoryProducts(categorySlug);Diffsome SDK를 사용해서 상품 목록, 상세 페이지를 만들어주세요.
상품 목록:
const { data: products, meta } = await diffsome.shop.listProducts({ page: 1, per_page: 12 });
상품 상세:
const product = await diffsome.shop.getProduct(slug);
추천 상품:
const featured = await diffsome.shop.featuredProducts(8);
상품 검색:
const { data: results } = await diffsome.shop.searchProducts('keyword');
카테고리:
const { data: categories } = await diffsome.shop.listCategories();
const category = await diffsome.shop.getCategory(slug);
const { data: products } = await diffsome.shop.categoryProducts(categorySlug);
SHOP
Cart
장바구니
Copy
Create cart page using Diffsome SDK.
Get Cart:
const cart = await diffsome.shop.getCart();
// cart.items, cart.total, cart.item_count
Add to Cart:
await diffsome.shop.addToCart({ product_id: 1, quantity: 1, variant_id: optionalVariantId });
Update Quantity:
await diffsome.shop.updateCartItem(itemId, { quantity: 2 });
Remove Item:
await diffsome.shop.removeFromCart(itemId);
Clear Cart:
await diffsome.shop.clearCart();
Note: Guest cart is automatically persisted via session_id.Diffsome SDK를 사용해서 장바구니 페이지를 만들어주세요.
장바구니 조회:
const cart = await diffsome.shop.getCart();
// cart.items, cart.total, cart.item_count
장바구니 추가:
await diffsome.shop.addToCart({ product_id: 1, quantity: 1, variant_id: optionalVariantId });
수량 변경:
await diffsome.shop.updateCartItem(itemId, { quantity: 2 });
항목 삭제:
await diffsome.shop.removeFromCart(itemId);
장바구니 비우기:
await diffsome.shop.clearCart();
참고: 비회원 장바구니는 session_id로 자동 유지됩니다.
SHOP
Orders & Checkout
주문 & 결제
Copy
Create checkout and order pages using Diffsome SDK.
Create Order:
const order = await diffsome.shop.createOrder({
shipping_name: 'John Doe',
shipping_phone: '010-1234-5678',
shipping_address: '123 Main St',
shipping_address_detail: 'Apt 101',
shipping_postal_code: '12345',
payment_method: 'card', // card, bank_transfer, virtual_account
note: 'Please leave at door'
});
My Orders:
const { data: orders, meta } = await diffsome.shop.listOrders({ page: 1 });
Order Detail:
const order = await diffsome.shop.getOrder(orderNumber);
Cancel Order:
await diffsome.shop.cancelOrder(orderId);Diffsome SDK를 사용해서 주문/결제 페이지를 만들어주세요.
주문 생성:
const order = await diffsome.shop.createOrder({
shipping_name: '홍길동',
shipping_phone: '010-1234-5678',
shipping_address: '서울시 강남구 테헤란로 123',
shipping_address_detail: '101호',
shipping_postal_code: '12345',
payment_method: 'card', // card, bank_transfer, virtual_account
note: '문 앞에 놓아주세요'
});
내 주문 목록:
const { data: orders, meta } = await diffsome.shop.listOrders({ page: 1 });
주문 상세:
const order = await diffsome.shop.getOrder(orderNumber);
주문 취소:
await diffsome.shop.cancelOrder(orderId);
SHOP
Payment Integration
결제 연동
Copy
Integrate payments using Diffsome SDK.
Check Payment Status:
const status = await diffsome.shop.getPaymentStatus();
// { toss_enabled, stripe_enabled }
Toss Payments (Korea):
const ready = await diffsome.shop.tossPaymentReady({ order_number: 'ORD-123' });
// Use ready.client_key with Toss SDK
const result = await diffsome.shop.tossPaymentConfirm({ paymentKey, orderId, amount });
Stripe (Global):
const { checkout_url } = await diffsome.shop.stripeCheckout({
order_number: 'ORD-123',
success_url: 'https://yoursite.com/success',
cancel_url: 'https://yoursite.com/cancel'
});
window.location.href = checkout_url;
// After redirect:
const result = await diffsome.shop.stripeVerify({ session_id });Diffsome SDK를 사용해서 결제를 연동하세요.
결제 상태 확인:
const status = await diffsome.shop.getPaymentStatus();
// { toss_enabled, stripe_enabled }
토스 페이먼츠 (한국):
const ready = await diffsome.shop.tossPaymentReady({ order_number: 'ORD-123' });
// ready.client_key를 토스 SDK와 함께 사용
const result = await diffsome.shop.tossPaymentConfirm({ paymentKey, orderId, amount });
Stripe (해외):
const { checkout_url } = await diffsome.shop.stripeCheckout({
order_number: 'ORD-123',
success_url: 'https://yoursite.com/success',
cancel_url: 'https://yoursite.com/cancel'
});
window.location.href = checkout_url;
// 리다이렉트 후:
const result = await diffsome.shop.stripeVerify({ session_id });
SHOP
Product Reviews
상품 리뷰
Copy
Create product review system using Diffsome SDK.
Get Reviews:
const { data: reviews, stats } = await diffsome.shop.getProductReviews(productSlug, { rating: 5, sort: 'latest' });
// stats: { average_rating, total_count, rating_counts }
Check if Can Review:
const { can_review, reason } = await diffsome.shop.canReviewProduct(productSlug);
// Requires: logged in + purchased + not reviewed yet
Create Review:
const review = await diffsome.shop.createReview(productSlug, {
rating: 5,
title: 'Great product!',
content: 'Highly recommended...',
images: [mediaId1, mediaId2] // optional
});
Mark Helpful:
await diffsome.shop.markReviewHelpful(reviewId);
My Reviews:
const { data: myReviews } = await diffsome.shop.myReviews();Diffsome SDK를 사용해서 상품 리뷰 시스템을 만들어주세요.
리뷰 조회:
const { data: reviews, stats } = await diffsome.shop.getProductReviews(productSlug, { rating: 5, sort: 'latest' });
// stats: { average_rating, total_count, rating_counts }
리뷰 작성 가능 여부:
const { can_review, reason } = await diffsome.shop.canReviewProduct(productSlug);
// 조건: 로그인 + 구매 완료 + 미작성
리뷰 작성:
const review = await diffsome.shop.createReview(productSlug, {
rating: 5,
title: '정말 좋아요!',
content: '강력 추천합니다...',
images: [mediaId1, mediaId2] // 선택
});
도움됨 표시:
await diffsome.shop.markReviewHelpful(reviewId);
내 리뷰 목록:
const { data: myReviews } = await diffsome.shop.myReviews();
SHOP
Coupons
쿠폰
Copy
Create coupon system using Diffsome SDK.
My Coupons:
const coupons = await diffsome.shop.myCoupons();
Validate Coupon:
const validation = await diffsome.shop.validateCoupon(couponCode, orderAmount);
// { valid, discount_amount, message }
Apply coupon during checkout by passing coupon_code to createOrder.Diffsome SDK를 사용해서 쿠폰 시스템을 만들어주세요.
내 쿠폰 목록:
const coupons = await diffsome.shop.myCoupons();
쿠폰 검증:
const validation = await diffsome.shop.validateCoupon(couponCode, orderAmount);
// { valid, discount_amount, message }
주문 시 coupon_code를 createOrder에 전달하여 쿠폰을 적용합니다.
BOARD
Board & Posts
게시판 & 게시글
Copy
Create board pages using Diffsome SDK.
Boards:
const { data: boards } = await diffsome.boards.list();
const board = await diffsome.boards.get(slug);
Posts:
const { data: posts } = await diffsome.boards.listPosts(boardSlug);
const post = await diffsome.boards.getPost(postId);
await diffsome.boards.createPost({ board_id, title, content });
Comments:
const comments = await diffsome.boards.listComments(postId);
await diffsome.boards.createComment(postId, { content });Diffsome SDK를 사용해서 게시판 페이지를 만들어주세요.
게시판:
const { data: boards } = await diffsome.boards.list();
const board = await diffsome.boards.get(slug);
게시글:
const { data: posts } = await diffsome.boards.listPosts(boardSlug);
const post = await diffsome.boards.getPost(postId);
await diffsome.boards.createPost({ board_id, title, content });
댓글:
const comments = await diffsome.boards.listComments(postId);
await diffsome.boards.createComment(postId, { content });
RESERVATION
Reservation System
예약 시스템
Copy
Create reservation pages using Diffsome SDK.
Settings & Services:
const settings = await diffsome.reservation.getSettings();
const services = await diffsome.reservation.listServices();
const staffs = await diffsome.reservation.listStaff(serviceId); // optional filter
Available Slots:
const dates = await diffsome.reservation.getAvailableDates({ service_id, month: '2025-01' });
const slots = await diffsome.reservation.getAvailableSlots({ service_id, date: '2025-01-15', staff_id });
Create Reservation:
const result = await diffsome.reservation.create({
service_id, staff_id, date, start_time,
customer_name, customer_email, customer_phone, note
});
My Reservations:
const { data: reservations } = await diffsome.reservation.list();
const upcoming = await diffsome.reservation.upcoming(10);
const past = await diffsome.reservation.past(10);
const detail = await diffsome.reservation.get(reservationNumber);
Cancel:
await diffsome.reservation.cancel(reservationNumber, 'reason');Diffsome SDK를 사용해서 예약 페이지를 만들어주세요.
설정 & 서비스:
const settings = await diffsome.reservation.getSettings();
const services = await diffsome.reservation.listServices();
const staffs = await diffsome.reservation.listStaff(serviceId); // 선택적 필터
예약 가능 시간:
const dates = await diffsome.reservation.getAvailableDates({ service_id, month: '2025-01' });
const slots = await diffsome.reservation.getAvailableSlots({ service_id, date: '2025-01-15', staff_id });
예약 생성:
const result = await diffsome.reservation.create({
service_id, staff_id, date, start_time,
customer_name, customer_email, customer_phone, note
});
내 예약:
const { data: reservations } = await diffsome.reservation.list();
const upcoming = await diffsome.reservation.upcoming(10);
const past = await diffsome.reservation.past(10);
const detail = await diffsome.reservation.get(reservationNumber);
취소:
await diffsome.reservation.cancel(reservationNumber, '취소 사유');
FORMS
Dynamic Forms
동적 폼
Copy
Create form pages using Diffsome SDK.
List Forms:
const { data: forms } = await diffsome.forms.list();
Get Form (with fields schema):
const form = await diffsome.forms.get(formSlug);
// form.fields: [{ name, label, type, required, options }]
Submit Form:
const submission = await diffsome.forms.submit(formSlug, {
name: 'John',
email: '[email protected] ',
message: 'Hello...'
});
My Submissions:
const { data: submissions } = await diffsome.forms.mySubmissions();
const submission = await diffsome.forms.getSubmission(submissionId);Diffsome SDK를 사용해서 폼 페이지를 만들어주세요.
폼 목록:
const { data: forms } = await diffsome.forms.list();
폼 조회 (필드 스키마 포함):
const form = await diffsome.forms.get(formSlug);
// form.fields: [{ name, label, type, required, options }]
폼 제출:
const submission = await diffsome.forms.submit(formSlug, {
name: '홍길동',
email: '[email protected] ',
message: '안녕하세요...'
});
내 제출 내역:
const { data: submissions } = await diffsome.forms.mySubmissions();
const submission = await diffsome.forms.getSubmission(submissionId);
COMMENTS
Comment System
댓글 시스템
Copy
Create comment system using Diffsome SDK.
Blog Post Comments:
const comments = await diffsome.comments.blogPost(slug);
await diffsome.comments.createBlogPost(slug, { content, author_name, author_email });
Board Post Comments:
const comments = await diffsome.comments.boardPost(postId);
await diffsome.comments.createBoardPost(postId, { content });
Standalone Comments (Guestbook, Feedback):
const comments = await diffsome.comments.standalone('guestbook');
await diffsome.comments.createStandalone('guestbook', { content, author_name });
Common Actions:
await diffsome.comments.update(commentId, { content });
await diffsome.comments.delete(commentId);
await diffsome.comments.like(commentId);Diffsome SDK를 사용해서 댓글 시스템을 만들어주세요.
블로그 댓글:
const comments = await diffsome.comments.blogPost(slug);
await diffsome.comments.createBlogPost(slug, { content, author_name, author_email });
게시판 댓글:
const comments = await diffsome.comments.boardPost(postId);
await diffsome.comments.createBoardPost(postId, { content });
단독 댓글 (방명록, 피드백):
const comments = await diffsome.comments.standalone('guestbook');
await diffsome.comments.createStandalone('guestbook', { content, author_name });
공통 기능:
await diffsome.comments.update(commentId, { content });
await diffsome.comments.delete(commentId);
await diffsome.comments.like(commentId);
ENTITIES
Custom Entities
커스텀 엔티티
Copy
Create custom data management using Diffsome SDK.
Entity Definitions:
const entities = await diffsome.entities.list();
const entity = await diffsome.entities.get('customers');
Records CRUD:
const { data: records, meta } = await diffsome.entities.listRecords('customers', { page: 1, search: 'ACME' });
const record = await diffsome.entities.getRecord('customers', recordId);
const newRecord = await diffsome.entities.createRecord('customers', { company: 'ABC', email: '[email protected] ' });
await diffsome.entities.updateRecord('customers', recordId, { company: 'XYZ' });
await diffsome.entities.deleteRecord('customers', recordId);
Typed Access (TypeScript):
interface Customer { company: string; email: string; }
const customers = diffsome.entities.typed<Customer>('customers');
const { data } = await customers.list();
const record = await customers.get(1); // record.data.company is typedDiffsome SDK를 사용해서 커스텀 데이터 관리를 만들어주세요.
엔티티 정의:
const entities = await diffsome.entities.list();
const entity = await diffsome.entities.get('customers');
레코드 CRUD:
const { data: records, meta } = await diffsome.entities.listRecords('customers', { page: 1, search: 'ACME' });
const record = await diffsome.entities.getRecord('customers', recordId);
const newRecord = await diffsome.entities.createRecord('customers', { company: 'ABC', email: '[email protected] ' });
await diffsome.entities.updateRecord('customers', recordId, { company: 'XYZ' });
await diffsome.entities.deleteRecord('customers', recordId);
타입 지정 접근 (TypeScript):
interface Customer { company: string; email: string; }
const customers = diffsome.entities.typed<Customer>('customers');
const { data } = await customers.list();
const record = await customers.get(1); // record.data.company에 타입 적용
MEDIA
File Upload
파일 업로드
Copy
Create file upload using Diffsome SDK.
Upload Single File:
const media = await diffsome.media.upload(file); // File or Blob
// media.id, media.url, media.thumbnail_url
Upload Multiple Files:
const mediaList = await diffsome.media.uploadMultiple([file1, file2]);
List My Media:
const { data: files } = await diffsome.media.list({ type: 'image' });
Get & Delete:
const media = await diffsome.media.get(mediaId);
await diffsome.media.delete(mediaId);
Use with Reviews/Posts:
const media = await diffsome.media.upload(imageFile);
await diffsome.shop.createReview(slug, { rating: 5, content: '...', images: [media.id] });Diffsome SDK를 사용해서 파일 업로드를 만들어주세요.
단일 파일 업로드:
const media = await diffsome.media.upload(file); // File 또는 Blob
// media.id, media.url, media.thumbnail_url
다중 파일 업로드:
const mediaList = await diffsome.media.uploadMultiple([file1, file2]);
내 미디어 목록:
const { data: files } = await diffsome.media.list({ type: 'image' });
조회 & 삭제:
const media = await diffsome.media.get(mediaId);
await diffsome.media.delete(mediaId);
리뷰/게시글과 함께 사용:
const media = await diffsome.media.upload(imageFile);
await diffsome.shop.createReview(slug, { rating: 5, content: '...', images: [media.id] });
API Method
API 방식
Direct fetch calls without SDK. More verbose but works without npm packages.
SDK 없이 fetch로 직접 호출합니다. 코드가 더 길지만 npm 패키지 없이 작동합니다.
SETUP
API Client Setup
API 클라이언트 설정
Copy
Create an API client helper for Diffsome API.
Create src/lib/api.ts:
const API_BASE = 'https://www.superselling.co.kr/api/YOUR_TENANT_ID';
const API_KEY = 'YOUR_API_KEY';
export async function api(endpoint: string, options: RequestInit = {}) {
const token = localStorage.getItem('auth_token');
const res = await fetch(`${API_BASE}${endpoint}`, {
...options,
headers: {
'Content-Type': 'application/json',
'X-API-Key': API_KEY,
...(token && { 'Authorization': `Bearer ${token}` }),
...options.headers,
},
});
if (!res.ok) throw new Error(await res.text());
return res.json();
}
Replace YOUR_TENANT_ID and YOUR_API_KEY with actual values.Diffsome API를 위한 클라이언트 헬퍼를 만들어주세요.
src/lib/api.ts 파일 생성:
const API_BASE = 'https://www.superselling.co.kr/api/YOUR_TENANT_ID';
const API_KEY = 'YOUR_API_KEY';
export async function api(endpoint: string, options: RequestInit = {}) {
const token = localStorage.getItem('auth_token');
const res = await fetch(`${API_BASE}${endpoint}`, {
...options,
headers: {
'Content-Type': 'application/json',
'X-API-Key': API_KEY,
...(token && { 'Authorization': `Bearer ${token}` }),
...options.headers,
},
});
if (!res.ok) throw new Error(await res.text());
return res.json();
}
YOUR_TENANT_ID와 YOUR_API_KEY는 실제 값으로 교체하세요.
AUTH
Login & Register
로그인 & 회원가입
Copy
Create login and register pages using fetch API.
Login:
const res = await api('/auth/login', {
method: 'POST',
body: JSON.stringify({ email, password })
});
localStorage.setItem('auth_token', res.token);
Register:
const res = await api('/auth/register', {
method: 'POST',
body: JSON.stringify({ name, email, password, password_confirmation: password })
});
localStorage.setItem('auth_token', res.token);
Get current user:
const { data: user } = await api('/auth/me');
Logout:
localStorage.removeItem('auth_token');fetch API를 사용해서 로그인, 회원가입 페이지를 만들어주세요.
로그인:
const res = await api('/auth/login', {
method: 'POST',
body: JSON.stringify({ email, password })
});
localStorage.setItem('auth_token', res.token);
회원가입:
const res = await api('/auth/register', {
method: 'POST',
body: JSON.stringify({ name, email, password, password_confirmation: password })
});
localStorage.setItem('auth_token', res.token);
현재 사용자:
const { data: user } = await api('/auth/me');
로그아웃:
localStorage.removeItem('auth_token');
BLOG
Blog List & Detail
블로그 목록 & 상세
Copy
Create blog pages using fetch API.
List posts:
const { data: posts, meta } = await api('/blog?page=1&per_page=10');
Get single post:
const { data: post } = await api(`/blog/${slug}`);
Get categories:
const { data: categories } = await api('/blog/categories');
Filter by category:
const { data: posts } = await api('/blog?category=tech');fetch API를 사용해서 블로그 페이지를 만들어주세요.
글 목록:
const { data: posts, meta } = await api('/blog?page=1&per_page=10');
글 상세:
const { data: post } = await api(`/blog/${slug}`);
카테고리 목록:
const { data: categories } = await api('/blog/categories');
카테고리별 필터:
const { data: posts } = await api('/blog?category=tech');
SHOP
Products & Categories
상품 & 카테고리
Copy
Create product pages using fetch API.
Product List:
const { data: products, meta } = await api('/products?page=1&per_page=12');
Product Detail:
const { data: product } = await api(`/products/${slug}`);
Featured Products:
const { data: products } = await api('/products?is_featured=true&per_page=8');
Search Products:
const { data: products } = await api('/products?search=keyword');
Categories:
const { data: categories } = await api('/categories');
const { data: category } = await api(`/categories/${slug}`);
const { data: products } = await api(`/categories/${slug}/products`);fetch API를 사용해서 상품 페이지를 만들어주세요.
상품 목록:
const { data: products, meta } = await api('/products?page=1&per_page=12');
상품 상세:
const { data: product } = await api(`/products/${slug}`);
추천 상품:
const { data: products } = await api('/products?is_featured=true&per_page=8');
상품 검색:
const { data: products } = await api('/products?search=keyword');
카테고리:
const { data: categories } = await api('/categories');
const { data: category } = await api(`/categories/${slug}`);
const { data: products } = await api(`/categories/${slug}/products`);
SHOP
Cart
장바구니
Copy
Create cart page using fetch API.
Get Cart:
const { data: cart } = await api('/cart');
Add to Cart:
await api('/cart/items', { method: 'POST', body: JSON.stringify({ product_id: 1, quantity: 1, variant_id }) });
Update Quantity:
await api(`/cart/items/${itemId}`, { method: 'PUT', body: JSON.stringify({ quantity: 2 }) });
Remove Item:
await api(`/cart/items/${itemId}`, { method: 'DELETE' });
Clear Cart:
await api('/cart', { method: 'DELETE' });fetch API를 사용해서 장바구니 페이지를 만들어주세요.
장바구니 조회:
const { data: cart } = await api('/cart');
장바구니 추가:
await api('/cart/items', { method: 'POST', body: JSON.stringify({ product_id: 1, quantity: 1, variant_id }) });
수량 변경:
await api(`/cart/items/${itemId}`, { method: 'PUT', body: JSON.stringify({ quantity: 2 }) });
항목 삭제:
await api(`/cart/items/${itemId}`, { method: 'DELETE' });
장바구니 비우기:
await api('/cart', { method: 'DELETE' });
SHOP
Orders & Checkout
주문 & 결제
Copy
Create checkout and order pages using fetch API.
Create Order:
const { data: order } = await api('/orders', {
method: 'POST',
body: JSON.stringify({
shipping_name, shipping_phone, shipping_address,
shipping_address_detail, shipping_postal_code,
payment_method: 'card', note
})
});
My Orders:
const { data: orders, meta } = await api('/orders?page=1');
Order Detail:
const { data: order } = await api(`/orders/${orderNumber}`);
Cancel Order:
await api(`/orders/${orderId}/cancel`, { method: 'POST' });fetch API를 사용해서 주문/결제 페이지를 만들어주세요.
주문 생성:
const { data: order } = await api('/orders', {
method: 'POST',
body: JSON.stringify({
shipping_name, shipping_phone, shipping_address,
shipping_address_detail, shipping_postal_code,
payment_method: 'card', note
})
});
내 주문 목록:
const { data: orders, meta } = await api('/orders?page=1');
주문 상세:
const { data: order } = await api(`/orders/${orderNumber}`);
주문 취소:
await api(`/orders/${orderId}/cancel`, { method: 'POST' });
SHOP
Payment Integration
결제 연동
Copy
Integrate payments using fetch API.
Payment Status:
const status = await api('/payments/status');
Toss Payments (Korea):
const ready = await api('/payments/toss/ready', { method: 'POST', body: JSON.stringify({ order_number }) });
const result = await api('/payments/toss/confirm', { method: 'POST', body: JSON.stringify({ paymentKey, orderId, amount }) });
Stripe (Global):
const { checkout_url } = await api('/payments/stripe/checkout', {
method: 'POST',
body: JSON.stringify({ order_number, success_url, cancel_url })
});
window.location.href = checkout_url;
const result = await api('/payments/stripe/verify', { method: 'POST', body: JSON.stringify({ session_id }) });fetch API를 사용해서 결제를 연동하세요.
결제 상태:
const status = await api('/payments/status');
토스 페이먼츠 (한국):
const ready = await api('/payments/toss/ready', { method: 'POST', body: JSON.stringify({ order_number }) });
const result = await api('/payments/toss/confirm', { method: 'POST', body: JSON.stringify({ paymentKey, orderId, amount }) });
Stripe (해외):
const { checkout_url } = await api('/payments/stripe/checkout', {
method: 'POST',
body: JSON.stringify({ order_number, success_url, cancel_url })
});
window.location.href = checkout_url;
const result = await api('/payments/stripe/verify', { method: 'POST', body: JSON.stringify({ session_id }) });
SHOP
Product Reviews
상품 리뷰
Copy
Create product reviews using fetch API.
Get Reviews:
const { data: reviews, stats } = await api(`/products/${slug}/reviews?sort=latest`);
Can Review:
const { can_review, reason } = await api(`/products/${slug}/reviews/can-review`);
Create Review:
const { data: review } = await api(`/products/${slug}/reviews`, {
method: 'POST',
body: JSON.stringify({ rating: 5, title, content, images: [mediaId] })
});
Mark Helpful:
await api(`/reviews/${reviewId}/helpful`, { method: 'POST' });
My Reviews:
const { data: reviews } = await api('/my/reviews');fetch API를 사용해서 상품 리뷰를 만들어주세요.
리뷰 조회:
const { data: reviews, stats } = await api(`/products/${slug}/reviews?sort=latest`);
작성 가능 여부:
const { can_review, reason } = await api(`/products/${slug}/reviews/can-review`);
리뷰 작성:
const { data: review } = await api(`/products/${slug}/reviews`, {
method: 'POST',
body: JSON.stringify({ rating: 5, title, content, images: [mediaId] })
});
도움됨 표시:
await api(`/reviews/${reviewId}/helpful`, { method: 'POST' });
내 리뷰:
const { data: reviews } = await api('/my/reviews');
BOARD
Board & Posts
게시판 & 게시글
Copy
Create board pages using fetch API.
Boards:
const { data: boards } = await api('/boards');
const { data: board } = await api(`/boards/${slug}`);
Posts:
const { data: posts } = await api(`/boards/${boardSlug}/posts`);
const { data: post } = await api(`/posts/${postId}`);
await api('/posts', { method: 'POST', body: JSON.stringify({ board_id, title, content }) });
Comments:
const { data: comments } = await api(`/posts/${postId}/comments`);
await api(`/posts/${postId}/comments`, { method: 'POST', body: JSON.stringify({ content }) });fetch API를 사용해서 게시판 페이지를 만들어주세요.
게시판:
const { data: boards } = await api('/boards');
const { data: board } = await api(`/boards/${slug}`);
게시글:
const { data: posts } = await api(`/boards/${boardSlug}/posts`);
const { data: post } = await api(`/posts/${postId}`);
await api('/posts', { method: 'POST', body: JSON.stringify({ board_id, title, content }) });
댓글:
const { data: comments } = await api(`/posts/${postId}/comments`);
await api(`/posts/${postId}/comments`, { method: 'POST', body: JSON.stringify({ content }) });
RESERVATION
Reservation System
예약 시스템
Copy
Create reservation pages using fetch API.
Settings & Services:
const settings = await api('/reservation/settings');
const { data: services } = await api('/reservation/services');
const { data: staffs } = await api('/reservation/staffs?service_id=1');
Available Slots:
const dates = await api('/reservation/available-dates?service_id=1&month=2025-01');
const slots = await api('/reservation/available-slots?service_id=1&date=2025-01-15');
Create Reservation:
const result = await api('/reservations', {
method: 'POST',
body: JSON.stringify({ service_id, staff_id, date, start_time, customer_name, customer_email, customer_phone })
});
My Reservations:
const { data: reservations } = await api('/reservations');
const { data: detail } = await api(`/reservations/${reservationNumber}`);
await api(`/reservations/${reservationNumber}/cancel`, { method: 'POST', body: JSON.stringify({ reason }) });fetch API를 사용해서 예약 페이지를 만들어주세요.
설정 & 서비스:
const settings = await api('/reservation/settings');
const { data: services } = await api('/reservation/services');
const { data: staffs } = await api('/reservation/staffs?service_id=1');
예약 가능 시간:
const dates = await api('/reservation/available-dates?service_id=1&month=2025-01');
const slots = await api('/reservation/available-slots?service_id=1&date=2025-01-15');
예약 생성:
const result = await api('/reservations', {
method: 'POST',
body: JSON.stringify({ service_id, staff_id, date, start_time, customer_name, customer_email, customer_phone })
});
내 예약:
const { data: reservations } = await api('/reservations');
const { data: detail } = await api(`/reservations/${reservationNumber}`);
await api(`/reservations/${reservationNumber}/cancel`, { method: 'POST', body: JSON.stringify({ reason }) });
FORMS
Dynamic Forms
동적 폼
Copy
Create form pages using fetch API.
List Forms:
const { data: forms } = await api('/forms');
Get Form:
const { data: form } = await api(`/forms/${formSlug}`);
Submit Form:
const { data: submission } = await api(`/forms/${formSlug}/submit`, {
method: 'POST',
body: JSON.stringify({ name, email, message })
});
My Submissions:
const { data: submissions } = await api('/form-submissions');
const { data: submission } = await api(`/form-submissions/${id}`);fetch API를 사용해서 폼 페이지를 만들어주세요.
폼 목록:
const { data: forms } = await api('/forms');
폼 조회:
const { data: form } = await api(`/forms/${formSlug}`);
폼 제출:
const { data: submission } = await api(`/forms/${formSlug}/submit`, {
method: 'POST',
body: JSON.stringify({ name, email, message })
});
내 제출 내역:
const { data: submissions } = await api('/form-submissions');
const { data: submission } = await api(`/form-submissions/${id}`);
COMMENTS
Comment System
댓글 시스템
Copy
Create comment system using fetch API.
Blog Comments:
const { data: comments } = await api(`/blog/${slug}/comments`);
await api(`/blog/${slug}/comments`, { method: 'POST', body: JSON.stringify({ content, author_name, author_email }) });
Board Comments:
const { data: comments } = await api(`/posts/${postId}/comments`);
await api(`/posts/${postId}/comments`, { method: 'POST', body: JSON.stringify({ content }) });
Standalone Comments:
const { data: comments } = await api(`/comments/${pageSlug}`);
await api(`/comments/${pageSlug}`, { method: 'POST', body: JSON.stringify({ content, author_name }) });
Common:
await api(`/comments/${commentId}`, { method: 'PUT', body: JSON.stringify({ content }) });
await api(`/comments/${commentId}`, { method: 'DELETE' });
await api(`/comments/${commentId}/like`, { method: 'POST' });fetch API를 사용해서 댓글 시스템을 만들어주세요.
블로그 댓글:
const { data: comments } = await api(`/blog/${slug}/comments`);
await api(`/blog/${slug}/comments`, { method: 'POST', body: JSON.stringify({ content, author_name, author_email }) });
게시판 댓글:
const { data: comments } = await api(`/posts/${postId}/comments`);
await api(`/posts/${postId}/comments`, { method: 'POST', body: JSON.stringify({ content }) });
단독 댓글:
const { data: comments } = await api(`/comments/${pageSlug}`);
await api(`/comments/${pageSlug}`, { method: 'POST', body: JSON.stringify({ content, author_name }) });
공통:
await api(`/comments/${commentId}`, { method: 'PUT', body: JSON.stringify({ content }) });
await api(`/comments/${commentId}`, { method: 'DELETE' });
await api(`/comments/${commentId}/like`, { method: 'POST' });
ENTITIES
Custom Entities
커스텀 엔티티
Copy
Create custom data management using fetch API.
Entity Definitions:
const { data: entities } = await api('/entities');
const { data: entity } = await api(`/entities/${slug}`);
Records CRUD:
const { data: records, meta } = await api(`/entities/${slug}/records?page=1&search=ACME`);
const { data: record } = await api(`/entities/${slug}/records/${id}`);
await api(`/entities/${slug}/records`, { method: 'POST', body: JSON.stringify({ company: 'ABC', email: '[email protected] ' }) });
await api(`/entities/${slug}/records/${id}`, { method: 'PUT', body: JSON.stringify({ company: 'XYZ' }) });
await api(`/entities/${slug}/records/${id}`, { method: 'DELETE' });fetch API를 사용해서 커스텀 데이터 관리를 만들어주세요.
엔티티 정의:
const { data: entities } = await api('/entities');
const { data: entity } = await api(`/entities/${slug}`);
레코드 CRUD:
const { data: records, meta } = await api(`/entities/${slug}/records?page=1&search=ACME`);
const { data: record } = await api(`/entities/${slug}/records/${id}`);
await api(`/entities/${slug}/records`, { method: 'POST', body: JSON.stringify({ company: 'ABC', email: '[email protected] ' }) });
await api(`/entities/${slug}/records/${id}`, { method: 'PUT', body: JSON.stringify({ company: 'XYZ' }) });
await api(`/entities/${slug}/records/${id}`, { method: 'DELETE' });
MEDIA
File Upload
파일 업로드
Copy
Create file upload using fetch API.
Upload File:
const formData = new FormData();
formData.append('file', file);
const { data: media } = await fetch(`${API_BASE}/media`, {
method: 'POST',
headers: { 'X-API-Key': API_KEY, 'Authorization': `Bearer ${token}` },
body: formData
}).then(r => r.json());
List My Media:
const { data: files } = await api('/media?type=image');
Get & Delete:
const { data: media } = await api(`/media/${mediaId}`);
await api(`/media/${mediaId}`, { method: 'DELETE' });fetch API를 사용해서 파일 업로드를 만들어주세요.
파일 업로드:
const formData = new FormData();
formData.append('file', file);
const { data: media } = await fetch(`${API_BASE}/media`, {
method: 'POST',
headers: { 'X-API-Key': API_KEY, 'Authorization': `Bearer ${token}` },
body: formData
}).then(r => r.json());
내 미디어 목록:
const { data: files } = await api('/media?type=image');
조회 & 삭제:
const { data: media } = await api(`/media/${mediaId}`);
await api(`/media/${mediaId}`, { method: 'DELETE' });