첫 쇼핑몰 만들기
MCP로 템플릿을 받아 내 상품이 보이는 쇼핑몰을 실행하기
MCP로 템플릿을 받아 내 상품이 보이는 쇼핑몰(TanStack Start SSR 앱)을 실행하고 테스트 결제까지 합니다.
준비
1. 프롬프트 실행
코딩 도구에서 새 폴더를 열고 보냅니다. 순서와 규칙은 에이전트가 get_scaffold_plan에서 받습니다.
sayren MCP로 내 쇼핑몰 화면(스토어프론트)을 만들어줘. 템플릿을 그대로 쓰고, 다 되면 verify_storefront로 확인해줘.단계를 적은 긴 프롬프트는 개발자 › 스토어프론트 만들기의 템플릿 도구가 필요할 때 › 프롬프트 실행에서 복사합니다. 디자인 방향은 끝에 덧붙이거나 나중에 바꿉니다(디자인 수정하기).
터미널로 받기
에이전트 없이 받습니다. SAYREN_TOKEN(액세스 토큰)과 SAYREN_STORE_ID를 주면 .env와 원격 MCP 연결 설정 .mcp.json(주소와 상점 id, 토큰 없음)까지 채우고, 끝에 규칙 검사 결과(규칙 검사: 19/19 통과)를 보여 줍니다.
SAYREN_TOKEN=액세스_토큰 SAYREN_STORE_ID=store_abc123 npx -y @sayren/mcp create my-shop--name <이름>은 package.json 이름(기본은 폴더 이름), --force는 비어 있지 않은 폴더에도 씁니다.
2. 개발 서버 실행
에이전트가 띄우지 않았다면 my-shop에서 npm install, npm run dev를 실행합니다. pnpm·yarn을 써도 됩니다.
.env 값 | 설명 |
|---|---|
SAYREN_API_URL | https://api.sayren.app/storefront/v1 |
SAYREN_STORE_CODE | 내 상점 코드. 상점 서브도메인으로 서비스할 때만 비웁니다 |
SAYREN_ANALYTICS_DEBUG | 1이면 localhost에서도 방문 분석을 보냅니다. 기본은 보내지 않습니다 |
완료 기준: http://localhost:4010 홈에 내 상품이 보입니다. 자바스크립트를 꺼도 보여야 합니다.
3. 구매 흐름 확인
- 상품을 담고 주문서로 갑니다.
- 테스트 결제로 주문합니다.
localhost는 결제 도메인 등록이 필요 없습니다. - 상점 관리 › 판매 › 주문에서
테스트 결제배지가 붙은 주문을 확인합니다.
만들어지는 화면
| 화면 | 경로 |
|---|---|
| 홈 · 상품 목록·검색 · 상품 상세 | /, /products, /products/:productId |
| 장바구니 · 주문서 | /cart, /checkout |
| 결제 복귀(다른 결제수단 재시도) · 주문 완료 | /checkout/return, /checkout/complete |
| 로그인 · 회원가입 · 소셜 로그인 복귀 | /login, /signup, /auth/callback |
| 내 정보(재동의·로그아웃·탈퇴) · 주문 내역 | /account, /orders, /orders/:orderId |
| 비회원 주문 조회 | /guest-order |
회원가입 화면은 상점에서 이메일·비밀번호 로그인을 켰을 때만 열립니다. 헤더와 브라우저 탭 제목에는 설정 › 상점 정보의 상점 이름과 로고가 나옵니다.
기본 라이브러리
화면을 늘릴 때 같은 방식으로 쓸 수 있도록 템플릿에 처음부터 들어 있고, 대표 화면이 실제로 씁니다.
| 라이브러리 | 역할 | 템플릿에서 쓰는 곳 |
|---|---|---|
@tanstack/react-query | 서버 함수 데이터 캐시. loader가 서버에서 미리 받아 첫 HTML에 싣습니다 | 상품 목록 |
nuqs | URL 상태(검색어·필터·정렬·페이지) | 상품 목록 |
react-hook-form · zod | 폼 입력과 검증. 입력 규칙은 스토어프론트 SDK 스키마를 씁니다 | 회원가입 · 주문서 · 비회원 주문 조회 |
query-string | 화면 밖(서버 라우트)에서 주소 만들기 | 소셜 로그인 복귀 |
주문서(/checkout)는 들어올 때마다 주문서를 새로 만들어야 하므로 TanStack Query 캐시를 쓰지 않고 loader가 서버 함수를 바로 부릅니다.
막히면 MCP 문제 해결을 보십시오.