---
name: clone-shell
description: 4개 페이지 스크랩본에서 공통 셸(layout, sidebar, header, 테마 토큰, 재사용 UI 원자)을 추출하여 Next.js 16 layout과 components/, lib/theme.ts로 구현하는 절차. shell-architect 에이전트의 메인 스킬.
---
# Clone Shell
페이지 작업 전에 **한 번만** 실행한다. 결과는 모든 page-cloner의 기반.
## 절차
### 1. 사전 분석 (전 페이지 훑기)
`html-scrape-analysis`의 grep 절차를 4개 md에 모두 적용. 다음을 한 표로 정리:
| 요소 | workspace | plant-list | plant-report | alarm-list |
|------|-----------|-----------|--------------|-----------|
| 사이드바 항목 | ... | ... | ... | ... |
| 헤더 우측 | ... | ... | ... | ... |
| 색 토큰 | ... | ... | ... | ... |
**셸 승격 규칙**: 3개 이상의 페이지에 등장 → 무조건 셸. 2개 → 셸 권장. 1개 → 페이지 전용.
### 2. 테마 토큰 추출
원본 ``에서 변수 전체를 가져온다:
```bash
grep -oE '--el-color-[a-z0-9-]+: #[0-9a-fA-F]+' docs/page/workspace.md | sort -u
```
`app/globals.css`:
```css
@import "tailwindcss";
@theme {
--color-primary: #409EFF;
--color-primary-light-3: #79bbff;
/* ... */
}
```
`lib/theme.ts` — 차트 등 JS에서 토큰 참조용:
```ts
export const theme = {
primary: "#409EFF",
primaryLight3: "#79bbff",
// ...
} as const;
```
### 3. 루트 레이아웃
`app/layout.tsx` (Server Component):
- `` (원본은 `lang="en"`이지만 한국어 콘텐츠가 많으면 ko)
- ``에 `AppShell`로 사이드바 + 헤더 + `{children}` 슬롯
- favicon, metadata 정의 — `next16-conventions`의 metadata 문서 확인 후 작성
- qweather-icons는 ``에 직접 ``로 두는 대신 `package.json`에 추가하고 `globals.css`에서 `@import` 또는 CDN 유지 결정. 결정 사유를 MANIFEST에 기록.
### 4. AppShell 분해
```
components/shell/
AppShell.tsx # Server. 사이드바 + 메인 영역 그리드
Sidebar.tsx # Client (라우트 활성 표시 useSelectedLayoutSegment)
Header.tsx # 대부분 Server, 사용자 메뉴 등 잎만 Client
NavLink.tsx # Client
```
라우트 매핑 (사이드바 항목 → URL):
- 워크스페이스 → `/`
- 발전소 목록 → `/plant-list`
- 발전소 리포트 → `/plant-report`
- 알람 목록 → `/alarm-list`
### 5. 공통 UI 원자
`components/ui/` — 2회 이상 재사용되는 것만:
- `Card`, `Stat`, `Badge`, `Tag` 정도가 흔함
- 차트 래퍼는 `components/charts/ChartContainer.tsx`(Client)로 두어 page에서 재사용
### 6. MANIFEST 작성
`_workspace/01_shell/MANIFEST.md`:
```md
# Shell Manifest
## 사용 가능한 export
| 모듈 | export | 타입 | props | 사용 예 |
|------|--------|------|-------|---------|
| components/shell/AppShell | default | RSC | { children } | layout.tsx에서 사용 |
| components/ui/Card | Card | RSC | { title?, children } | … |
| lib/theme | theme | const | — | theme.primary |
## 페이지 슬롯
페이지는 `app/{route}/page.tsx`만 export하면 AppShell이 자동 감쌈.
## 결정 사항
- ECharts vs Recharts: ____ 선택. 이유: ____
- qweather-icons: CDN 유지 / npm 설치 — ____
- 한국어/중국어 텍스트 처리: 원문 보존
## 미해결 / 차후 추가
- (페이지 에이전트가 발견하면 SendMessage로 요청)
```
### 7. 자체 검증
- `pnpm exec next build` — 통과해야 한다 (페이지는 빈 placeholder도 OK).
- `pnpm dev` 후 `/`에서 셸 시각 확인.