---
name: commerce-product-detail
description: |
  판매 채널에 맞는 상품 상세 콘텐츠를 설계하고, 자사몰이나 웹사이트용 HTML·React
  코드를 작성합니다. "스마트스토어 상세페이지", "쿠팡 상세페이지",
  "카카오 선물하기 상품 설명", "SaaS 제품 페이지 React" 요청에 사용합니다.
  마켓 상품 등록 규격은 현재 판매자 계정에서 확인하며, 코드가 마켓 에디터에
  그대로 업로드된다고 약속하지 않습니다.
metadata:
  version: "1.1.3"
---

# 상품 상세 콘텐츠와 페이지 코드

## 입력과 산출물 결정

상품의 실제 사양·가격·옵션·인증·배송·반품 자료, 사진 사용권,
판매 채널과 대상 고객의 근거 자료를 확인합니다. 후기·실적·효능·할인·재고·
행사 마감은 출처가 있을 때만 사용합니다. 빠진 정보는 자리표시자나
`미확인`으로 두고 실제 판매 주장처럼 출력하지 않습니다.

| 게시 환경 | 산출물 | 확인할 것 |
| --- | --- | --- |
| 스마트스토어·쿠팡·카카오 등 마켓 | 카피, 이미지·섹션 구성, 에디터에 맞춘 등록 자료 | 현재 계정의 에디터·이미지·고지 조건 |
| 자사몰·SaaS·독립 웹사이트 | 요청한 기술 스택의 HTML 또는 React 코드 | 기존 프로젝트·디자인 시스템·배포 환경 |

마켓용 HTML·CSS·JavaScript의 허용 여부는 현재 에디터에서 확인합니다.
허용되지 않거나 확인할 수 없으면 마켓에 업로드할 코드라고 표시하지 않고,
카피·이미지와 편집 지침을 제공합니다. React 앱 코드는 자사몰 등 실제로
실행할 수 있는 웹 환경이 확인된 경우에만 생성합니다.

## 작업 순서

1. **기획**: 상품과 구매자의 확인된 문제·선택 기준을 정리합니다.
   자료가 없으면 고객 이름·나이·직업이나 전환율을 만들어 넣지 않습니다.
   구조가 필요하면 `commerce-detail-page-planner`의 선택형 섹션을 사용합니다.
2. **카피**: 특징을 고객에게 필요한 정보로 풀어 쓰고, 가격·혜택·후기·효능은
   원본과 대조합니다. 카피만 필요한 경우 `commerce-detail-page-copy`로 연결합니다.
3. **디자인**: 사용자가 준 브랜드와 기존 디자인 시스템을 먼저 따릅니다.
   지정이 없으면 목적·가독성·접근성을 기준으로 간단한 기본안을 제시합니다.
   디자인 선택지를 묻는 일은 현재 질문 채널이 있고 선택이 결과를 바꿀 때만 합니다.
   질문 채널이 없으면 합리적인 기본안을 밝히고 계속 진행합니다.
4. **제작**: 마켓용이면 현재 계정에서 확인한 규격에 맞춰 등록 자료를 준비합니다.
   자사몰용이면 기존 프로젝트의 프레임워크·컴포넌트·의존성을 재사용합니다.
   특정 버전의 Next.js·Tailwind·shadcn/ui를 설치 전제로 강제하지 않습니다.
5. **검수**: 실제로 생성한 파일을 읽고, 가능한 실행 환경에서 페이지를 렌더링해
   모바일·데스크톱 레이아웃, 글자 대비, 이미지, 옵션·CTA 동작을 확인합니다.
   도구나 계정이 없어 실행하지 못한 항목은 `NOT-RUN`으로 남깁니다.

플랫폼별 확인 항목은 `references/product-detail/platform-specs.md`를 사용합니다.
페이지 구조와 코드는 현재 프로젝트와 확인된 상품 자료를 기준으로 설계합니다.

## 결과와 인계

산출물 형식, 확인한 상품·플랫폼 자료와 조회일, 생성 파일 또는 편집 지침,
렌더링·계정 미리보기 결과, 남은 누락 자료를 보고합니다. HTML이 작성됐다는
사실과 마켓에 등록됐다는 사실을 분리합니다. 실제 등록·배포를 하지 않았다면
완료로 표시하지 않습니다.

이미지는 `commerce-detail-page-image`의 작업용 합성본을 그대로 업로드할 수 있다고
가정하지 않습니다. 현재 채널 규격을 확인한 뒤 필요하면 별도 변환을 수행합니다.
문구 법규 검토는 `commerce-ad-claim-compliance-kr`를 사용하되,
실행하지 않은 검수나 전문가 심의를 통과했다고 표시하지 않습니다.

## 다른 요청의 경로

- 네이버·11번가·G마켓·옥션 등록: `commerce-marketplace-naver`
- 쿠팡 등록: `commerce-marketplace-coupang`
- 독립 랜딩 페이지: `moai-marketer:marketing-landing-page`
- SNS 게시물: `moai-marketer:content-sns-content`