AI Prompt Collection AI 프롬프트 모음

Copy & paste prompts for your AI coding tool AI 코딩 도구에 복사해서 바로 사용하세요

Lovable Bolt.new v0.dev Replit Agent Firebase Studio

Why SDK? SDK를 추천하는 이유

TypeScript support with full type safetyTypeScript 타입 지원으로 안전한 개발
Simpler code, less boilerplate간결한 코드, 적은 보일러플레이트
Built-in auth token management인증 토큰 자동 관리

SETUP

Initial Setup 초기 설정

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.diffsome.com',
  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.diffsome.com',
  tenantId: 'YOUR_TENANT_ID',
  apiKey: 'YOUR_API_KEY',
  persistToken: true,
});

YOUR_TENANT_ID와 YOUR_API_KEY는 대시보드에서 확인한 실제 값으로 교체하세요.

AUTH

Login & Register 로그인 & 회원가입

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 블로그 목록 & 상세

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 상품 & 카테고리

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 장바구니

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 주문 & 결제

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 결제 연동

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 상품 리뷰

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 쿠폰

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 게시판 & 게시글

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 예약 시스템

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 동적 폼

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 댓글 시스템

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 커스텀 엔티티

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('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('customers');
const { data } = await customers.list();
const record = await customers.get(1); // record.data.company에 타입 적용

MEDIA

File Upload 파일 업로드

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 클라이언트 설정

Create an API client helper for Diffsome API.

Create src/lib/api.ts:

const API_BASE = 'https://www.diffsome.com/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.diffsome.com/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 로그인 & 회원가입

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 블로그 목록 & 상세

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 상품 & 카테고리

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 장바구니

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 주문 & 결제

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 결제 연동

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 상품 리뷰

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 게시판 & 게시글

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 예약 시스템

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 동적 폼

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 댓글 시스템

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 커스텀 엔티티

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 파일 업로드

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' });

For Cursor, Claude Code, Windsurf Cursor, Claude Code, Windsurf 사용자

Use the React Starter Kit for the fastest setup. Clone the repo and start building with AI. 가장 빠른 시작을 위해 React 스타터 킷을 사용하세요. 저장소를 클론하고 AI와 함께 개발을 시작하세요.

React Starter Kit

RECOMMENDED

React 18 + Vite + TypeScript + Tailwind + shadcn/ui + @diffsome/sdk

GitHub

Quick Start 빠른 시작

git clone https://github.com/diffsome/diffsome-demo.git

cd diffsome-demo

npm install

# Edit src/lib/diffsome.ts with your credentials

npm run dev

CONTEXT

AI Context File AI 컨텍스트 파일

Create a .cursorrules or CLAUDE.md file with this content for AI context:

# Project: Diffsome Frontend

## Tech Stack
- React 18 + Vite + TypeScript
- @diffsome/sdk for API calls
- Tailwind CSS + shadcn/ui

## SDK Usage
import { diffsome } from '@/lib/diffsome';

// Auth
await diffsome.auth.login({ email, password });
await diffsome.auth.register({ name, email, password, password_confirmation });

// Blog
const { data: posts } = await diffsome.blog.list();
const post = await diffsome.blog.get(slug);

// Shop
const { data: products } = await diffsome.shop.listProducts();
const cart = await diffsome.shop.getCart();

## Rules
- Always use SDK methods, not raw fetch
- Handle loading and error states
- Use TypeScript types from SDK.cursorrules 또는 CLAUDE.md 파일을 만들어 AI 컨텍스트로 사용하세요:

# 프로젝트: Diffsome 프론트엔드

## 기술 스택
- React 18 + Vite + TypeScript
- @diffsome/sdk로 API 호출
- Tailwind CSS + shadcn/ui

## SDK 사용법
import { diffsome } from '@/lib/diffsome';

// 인증
await diffsome.auth.login({ email, password });
await diffsome.auth.register({ name, email, password, password_confirmation });

// 블로그
const { data: posts } = await diffsome.blog.list();
const post = await diffsome.blog.get(slug);

// 쇼핑몰
const { data: products } = await diffsome.shop.listProducts();
const cart = await diffsome.shop.getCart();

## 규칙
- 항상 SDK 메서드 사용, fetch 직접 사용 금지
- 로딩, 에러 상태 처리 필수
- SDK의 TypeScript 타입 활용

TEMPLATE

Feature Request Template 기능 요청 템플릿

Use this template when asking AI to add features:

Add [FEATURE NAME] page.

Requirements:
- Use @diffsome/sdk from src/lib/diffsome.ts
- Follow existing component patterns in src/components
- Add route in src/App.tsx
- Handle loading and error states
- Use shadcn/ui components

SDK methods to use:
[paste relevant SDK methods here]AI에게 기능 추가를 요청할 때 이 템플릿을 사용하세요:

[기능명] 페이지를 추가해주세요.

요구사항:
- src/lib/diffsome.ts의 @diffsome/sdk 사용
- src/components의 기존 컴포넌트 패턴 따르기
- src/App.tsx에 라우트 추가
- 로딩, 에러 상태 처리
- shadcn/ui 컴포넌트 사용

사용할 SDK 메서드:
[관련 SDK 메서드 여기에 붙여넣기]