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.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
๋ก๊ทธ์ธ & ํ์๊ฐ์
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.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
๋ก๊ทธ์ธ & ํ์๊ฐ์
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' });