# 제품 상세 페이지 빌더 (Product Detail Page Builder)

전자상거래 및 SaaS 플랫폼의 제품/서비스 상세 페이지를 생성합니다.
**고객 신뢰도 향상**, **전환율 극대화**, **SEO 최적화**를 모두 만족하는 완성된 페이지 코드를 제공합니다.

## Overview

한 제품에 대한 상세하고 설득력 있는 페이지를 자동 생성합니다.

**주요 구성:**
- 제품 이미지 & 갤러리
- 기본 정보 (가격, 재고, 평점)
- 상세 설명 & 기능 목록
- 사용자 후기 (testimonials)
- FAQ & Q&A
- 관련 제품 추천
- 구매 CTA

> **핵심**: 사용자가 "우리 제품 상세 페이지 만들어줘, 가격은 49,000원, 별점은 4.8"이라고 말하면,
> 바로 배포 가능한 HTML/React 코드를 받을 수 있어야 합니다.

---

## 제품 상세 페이지 구조

### 기본 레이아웃
```
┌─────────────────────────────────┐
│        Header (네비게이션)       │
├─────────────────────────────────┤
│ ┌──────────────┐                │
│ │              │  제품명         │
│ │   이미지     │  가격/재고      │
│ │   갤러리     │  평점/후기 수    │
│ │              │  구매 버튼      │
│ └──────────────┘                │
├─────────────────────────────────┤
│  탭메뉴: 상세정보 | 후기 | FAQ   │
├─────────────────────────────────┤
│  상세 정보 섹션                  │
│  - 기능 목록                     │
│  - 스펙 / 사이즈 안내            │
│  - 배송 & 반품 정책              │
├─────────────────────────────────┤
│  후기 섹션                       │
│  - 사용자 댓글 + 평점            │
│  - 이미지 포함 후기              │
├─────────────────────────────────┤
│  FAQ 섹션                        │
│  - 아코디언 형식                 │
├─────────────────────────────────┤
│  관련 제품 추천                  │
│  (슬라이드 또는 그리드)          │
├─────────────────────────────────┤
│  최종 CTA (구매 / 장바구니)      │
├─────────────────────────────────┤
│         Footer                   │
└─────────────────────────────────┘
```

---

## 섹션별 상세 가이드

### 1. Header & Navigation
```
요소:
- 로고
- 검색 바
- 장바구니 아이콘 (숫자 배지)
- 사용자 계정 (로그인/회원가입)
- 카테고리 메뉴 (드롭다운)

고정 여부: 스크롤 시 상단 고정 (sticky)
색상: 브랜드 색상 또는 흰색 배경
```

### 2. Product Image Gallery
```
메인 이미지:
- 큼 (500×500px 이상)
- 좌측 배치 (데스크톱)
- 풀 너비 (모바일)

썸네일 갤러리:
- 메인 이미지 하단 또는 우측
- 5~10개 이미지
- 호버 시 메인 이미지 전환
- 줌 기능 (확대 보기)

Zoom:
- "돋보기" 아이콘
- 호버 시 마우스 따라 확대 부분 표시
```

### 3. Product Info (기본 정보)
```
레이아웃 (데스크톱):
┌────────────────────────┐
│ 제품명                  │
│ ★★★★★ (4.8/5.0)      │
│ 후기 1,234개            │
│                        │
│ 가격: 49,000원         │
│ 할인: 20% (-10,000원)  │
│ [최종가격 표시]        │
│                        │
│ 재고: ✓ 충분           │
│ 배송료: 무료           │
│                        │
│ [옵션 선택 드롭다운]   │
│ - 색상: ▼             │
│ - 사이즈: ▼            │
│ - 수량: [1] ▲▼        │
│                        │
│ [💚 찜하기]            │
│ [🛒 장바구니]         │
│ [⚡ 바로구매]          │
└────────────────────────┘

색상:
- 제목: 검은색 (또는 주색)
- 가격: 빨강색 (또는 주색)
- 할인가: 회색 (strikethrough)
- 버튼: 브랜드 색상
```

### 4. Tabs (탭 메뉴)
```
탭 3~4개:
1. 상세정보 (기본 활성)
2. 후기
3. FAQ
4. (선택) 배송/반품

스타일:
- 언더라인 탭 또는 버튼 탭
- 활성 탭: 굵은 텍스트 + 컬러
- 비활성 탭: 밝은 회색
```

### 5. Details Tab (상세정보)
```
구성:
■ 제품 설명
  - 개요 (2~3문단)
  - 사진/이미지 포함

■ 주요 기능
  - 체크마크 아이콘 + 기능 리스트
  - 각 기능 아이콘

■ 스펙 / 사이즈
  - 테이블 형식
  ┌──────────────┬──────────┐
  │ 항목         │ 값       │
  ├──────────────┼──────────┤
  │ 크기         │ 10×10cm  │
  │ 무게         │ 100g     │
  │ 소재         │ 폴리에스 │
  │ 색상         │ 5가지    │
  └──────────────┴──────────┘

■ 배송 & 반품
  - 배송 기간
  - 반품 가능 기간
  - 교환 절차
```

### 6. Reviews Tab (후기)
```
구성:
■ 평점 요약
  ★★★★★ (4.8/5.0)
  총 1,234개 후기
  
  평점 분포 (막대 그래프):
  ★★★★★ 1000개 (80%)
  ★★★★ 200개 (16%)
  ...

■ 필터 & 정렬
  - 최신순 / 평점순 / 도움순
  - 별점 필터 (5성, 4성 등)
  - 이미지 포함만 보기

■ 후기 목록
  각 후기:
  - 사용자명 (닉네임)
  - 평점 (별)
  - 제목
  - 날짜
  - 본문
  - 이미지 (있으면)
  - 도움됨 (좋아요)

■ 후기 작성 버튼
  [후기 작성하기] (CTA)
```

### 7. FAQ Tab
```
구성:
■ 검색 바
  "배송료", "반품" 등 검색

■ 아코디언 형식
  Q: 배송료는 얼마인가요?
  A: 30,000원 이상 무료배송합니다. [▼ 접기]
  
  Q: 언제 배송되나요?
  A: 주문 후 2~3일 이내... [▼ 접기]

  총 10~15개 질문
```

---

## 디자인 시스템

### 색상 팔레트
```
Primary (브랜드 색):
- 버튼, 강조 텍스트, 별점

Secondary (보조색):
- 배경, 구분선

Neutral:
- 검은색 (텍스트)
- 회색 (보조 텍스트)
- 흰색 (배경)

Accent:
- 빨강색 (가격, 할인)
- 녹색 (재고 충분)
```

### 폰트
```
제목 (H1, H2): Bold, 24~32px
본문: Regular, 14~16px
작은 텍스트: Regular, 12~14px

한글: Pretendard (또는 시스템 폰트)
영문: Inter, SF Pro
```

### 버튼 스타일
```
Primary Button (구매):
- 배경: 브랜드 색
- 텍스트: 흰색
- 패딩: 12px 24px
- 호버: 약간 더 진한 색

Secondary Button (찜하기):
- 배경: 흰색
- 테두리: 회색
- 텍스트: 회색
- 호버: 밝은 회색 배경
```

---

## 절대 규칙 (Hard Rules)

### 1. 모바일 반응형
```
- 데스크톱: 2컬럼 (이미지 좌, 정보 우)
- 태블릿: 2컬럼 또는 1컬럼
- 모바일: 1컬럼 (이미지 상단, 정보 하단)
```

### 2. 성능 최적화
```
- 이미지: 최대 500KB (각)
- 레이지 로딩: 스크롤 시 이미지 로드
- 번들 크기: JS 100KB 이하
```

### 3. SEO
```
필수 메타 태그:
- <title> (제품명 포함, 50~60자)
- <meta name="description"> (150~160자)
- <meta name="keywords">
- Open Graph (og:image, og:price 등)
- Schema.json (Product 구조화 데이터)
```

### 4. 접근성
```
- 이미지: alt 텍스트
- 폼: <label> 태그
- 색상 대비: WCAG AA 이상
- 키보드 네비게이션 지원
```

### 5. 보안
```
- HTTPS 필수
- 가격 정보: 서버에서 계산 (프론트엔드 조작 방지)
- 장바구니: 세션/쿠키 암호화
```

---

## 출력 형식

### HTML 패키지
```
product-detail/
├── index.html
├── css/
│   ├── styles.css
│   └── responsive.css
├── js/
│   ├── main.js (탭, 갤러리, 수량 선택)
│   └── api.js (장바구니, 찜하기)
├── assets/
│   ├── images/ (제품 이미지 가이드)
│   └── icons/
└── README.md (배포 가이드)
```

### React/Next.js
```
src/
├── components/
│   ├── ProductImage.tsx
│   ├── ProductInfo.tsx
│   ├── TabMenu.tsx
│   ├── Reviews.tsx
│   └── FAQ.tsx
├── pages/
│   └── product/[id].tsx
├── styles/
│   └── product.module.css
└── hooks/
    └── useProduct.ts
```

---

## 워크플로우

```
제품 정보 수집:
- 이미지 URL
- 제품명, 설명
- 가격, 할인율
- 스펙, 배송 정보
- 후기 데이터 (선택)

↓

페이지 구조 설계:
- 섹션 레이아웃
- 색상 / 폰트
- 인터랙션

↓

코드 생성:
- HTML/React 작성
- 스타일링
- 기본 기능 (탭, 갤러리)

↓

배포 가이드 제공:
- 서버 연동 방법
- 이미지 최적화
- SEO 검증
```

---

## 트러블슈팅

| 증상 | 원인 | 해결 |
|------|------|------|
| 이미지 로딩 느림 | 용량 과다 | WebP 변환, 레이지로딩 추가 |
| 갤러리 안 움직임 | JS 오류 | main.js 검증, 콘솔 오류 확인 |
| 모바일 깨짐 | 반응형 부족 | 미디어쿼리 수정 |
| 장바구니 안 됨 | 백엔드 연동 필요 | API 연동 가이드 참고 |
| SEO 순위 낮음 | 구조화 데이터 부재 | schema.json 추가 |

---

## 프롬프트 예시

```
제품 상세 페이지 생성 요청:

"우리 제품 상세 페이지 만들어줘.
- 제품명: 프리미엄 보냉가방
- 가격: 49,000원
- 할인: 20% (최종가: 39,200원)
- 평점: 4.8/5.0 (1,234개 후기)
- 이미지: 5개 제공할 수 있음
- 색상 옵션: 검은색, 흰색, 회색
- 스펙: 가로 30cm, 세로 20cm, 깊이 15cm, 무게 300g
- 배송: 무료배송, 2~3일 이내
- 반품: 7일 무료반품

네이버, 쿠팡 스타일로 전문적이고 신뢰감 있게 만들어줘."
```
