---
name: clone-page
description: 단일 페이지 스크랩본을 셸 위에 얹어 Next.js 라우트로 클론하는 절차. page-cloner 에이전트의 메인 스킬. 라우트 파일, 페이지 전용 컴포넌트, 차트, 목업 데이터, 클라이언트 경계 결정을 다룸.
---

# Clone Page

shell-architect의 MANIFEST가 존재한다고 가정한다. 없다면 즉시 leader에 보고 후 중단.

## 입력 확정

- 담당 md 경로 (예: `docs/page/plant-list.md`)
- 라우트 경로 (workspace → `/`, 나머지는 파일명과 동일)
- `_workspace/01_shell/MANIFEST.md`

## 절차

### 1. 페이지 구조 추출

`html-scrape-analysis` 스킬의 grep을 이 파일에만 적용. 산출:
- 섹션 목록 (PageHeader, FilterBar, ...)
- 차트 종류·개수
- 테이블 컬럼·행 수
- 다이얼로그/드로어 존재 여부

### 2. 컴포넌트 트리 설계

```
app/{route}/page.tsx                 # Server. 섹션 조립만.
components/{page}/
  {Page}Header.tsx                   # Server
  {Page}Filters.tsx                  # Client (사용자 입력)
  {Page}Chart.tsx                    # Client (echarts/recharts)
  {Page}Table.tsx                    # Server or Client (정렬 시 Client)
  {Page}DetailDrawer.tsx             # Client
lib/mocks/{page}.ts                  # Server에서 import — typed objects
```

**규칙**: 페이지 컴포넌트는 자기 디렉토리에만 둔다. 다른 페이지가 쓰겠다 싶으면 SendMessage로 셸 승격 협의.

### 3. 목업 데이터

스크랩본의 정적 값(테이블 셀, 카드 숫자)에서 합리적 샘플 8~20개를 뽑아 `lib/mocks/{page}.ts`에 둔다. 타입은 명시:

```ts
export type Plant = {
  id: string;
  name: string;
  capacityKw: number;
  status: "normal" | "warning" | "fault";
  // ...
};

export const plants: Plant[] = [...];
```

### 4. 차트 구현

- MANIFEST의 차트 라이브러리 결정 따름.
- 옵션 구조는 스크랩본의 `<script>` 블록(있다면)에서 추출하거나, 시각만 근사:
  ```bash
  grep -A2 -B2 'series\|xAxis\|yAxis' docs/page/{file}.md | head -100
  ```
- 차트 컴포넌트는 반드시 `"use client"`. SSR 시 `dynamic(..., { ssr: false })` 또는 단순히 Client 컴포넌트로 격리.

### 5. 시각 충실도 검증

- `pnpm dev` 후 해당 라우트 접속.
- 원본 스크랩본을 `_workspace/scrape/{file}.html`로 복사해 브라우저로 옆에 띄우고 비교.
- 1차 목표: 레이아웃·색·여백·타이포 일치. 픽셀 퍼펙트 아님.
- 차이가 발견되면 토큰을 수정하지 말고 페이지 레벨에서 조정 (셸 변경은 leader 승인 필요).

### 6. 보고서

`_workspace/02_pages/{page}_REPORT.md`:

```md
# {page} Clone Report

## 구현한 섹션
- [x] Header
- [x] Filters (검색, 상태, 지역)
- [x] StatsRow (4 카드)
- [x] MainChart (line)
- [x] Table (페이지네이션 미구현)

## 생략/근사 결정
- 실시간 갱신: 미구현 (요청 시 추가)
- 행 다중선택: 미구현

## 셸 보완 요청 / 후속
- (있으면 기재, 없으면 None)

## 빌드/렌더 확인
- next build: PASS
- /{route} 200, 콘솔 에러 0
```

## 흔한 실수

- 셸의 Sidebar/Header를 페이지에서 다시 import → **금지**. layout이 이미 감싸므로 page는 본문만.
- 모든 컴포넌트에 `"use client"` 추가 → **금지**. 정말 이벤트/상태 쓰는 잎에만.
- 하드코딩된 hex 색상 → **금지**. Tailwind 토큰 또는 `theme.*` 사용.
- 한국어/중국어 원문 번역 → **금지**. 원문 보존.