공개 문서
docs/00-structure-and-design.md
아래는 docs/00-structure-and-design.md 와 동일한 원문입니다. Markdown과 HTML 변환 결과를 각각 복사할 수 있습니다.
공개 문서 원문 (Markdown)
# Skoolchef Tutorial — 구조와 설계
> 프로젝트 전체 구조·설계의 단일 진입점. 상세 분석은 [structure-and-design-analysis.md](structure-and-design-analysis.md) 참고.
---
## 1. 개요
| 항목 | 내용 |
|------|------|
| **제품** | Skoolchef Tutorial — AI 코딩 도구 4종 커리큘럼 (Cursor, Claude Code, Gemini CLI, Google Workspace CLI) |
| **대상** | 스쿨 수강생 |
| **기술** | Next.js 15 (App Router), MDX, Tailwind CSS, Vercel 배포 |
---
## 2. 디렉터리 구조
```
skoolchef-tutorial/
├── app/ # Next.js App Router
│ ├── layout.tsx # 루트 레이아웃, 메타, Navigation
│ ├── page.tsx # 홈 (히어로 + 커리큘럼 요약)
│ ├── globals.css
│ └── courses/
│ ├── page.tsx # 커리큘럼 목록
│ └── [slug]/page.tsx # 챕터 상세 (MDX 렌더)
├── components/
│ ├── Navigation.tsx # 상단 고정 네비
│ ├── CourseNav.tsx # 챕터 상세 좌측 사이드바(데스크톱)
│ ├── MobileCourseNav.tsx # 챕터 상세 모바일 네비
│ └── MdxImage.tsx # MDX 내 이미지 → next/image
├── lib/
│ ├── theme.ts # 모듈별 색·테마 단일 소스
│ └── mdx.ts # 코스 메타·목록·모듈 그룹 (getAllCourses, getModuleInfo)
├── content/
│ ├── courses/ # 챕터 MDX 플랫 (order 0~18, 총 19파일 + index.mdx)
│ ├── curriculum-v2-plan.md # v2 기획안 (Module 0~5, 22챕터 제안)
│ └── image-mapping.json # Notion 이미지 → 로컬 경로 매핑
├── public/images/notion/ # Notion 추출 이미지
├── scripts/ # Notion 추출·이미지·목차·export 스크립트
├── output/ # 강의안 export (md, html) — 생성물
├── docs/ # 분석·배포·가이드 문서
├── CLAUDE.md # 프로젝트 가이드 (진입점)
├── README.md
└── .env.example
```
**PDCA 폴더**: 사용하지 않음. 계획/설계/보고는 `docs/` 또는 `content/curriculum-v2-plan.md`에 둠.
---
## 3. 설계 원칙
- **콘텐츠**: `content/courses/*.mdx` 플랫 구조. frontmatter `order`로 정렬·모듈 구간 매핑 (`lib/mdx.ts`).
- **테마**: 모듈별 색·뱃지는 `lib/theme.ts` 단일 소스 — 홈/목록/사이드바에서 import.
- **Notion 파이프라인**: extract → download-images → generate-index-mdx. 콘텐츠 반영 시 이 순서로 실행 후 커밋.
- **보안**: `lib/mdx.ts`에서 slug path traversal 방지, frontmatter 런타임 검증.
---
## 4. 모듈·챕터 매핑
| order 구간 | 모듈 | 설명 |
|------------|------|------|
| 0 | Module 0 | AI 코딩 도구 개요 |
| 1–5 | Module 1 | Cursor |
| 6–9 | Module 2 | Claude Code |
| 10–12 | Module 3 | Gemini CLI |
| 13–15 | Module 4 | Google Workspace CLI |
| 16+ | Module 5 | 실전 프로젝트 |
현재 **19챕터** (frontmatter `order` 0 ~ 18). 예: 통합 실습·로그인(Supabase)·Show me 출력 규칙 등이 order 16 이후에 추가됨. 목차는 `pnpm generate-index-mdx`로 `content/courses/index.mdx` 자동 생성.
**점검·기획 요약:** [00-structure-and-learning-plan.md](00-structure-and-learning-plan.md)
---
## 5. 문서 인덱스 (docs/)
| 문서 | 용도 |
|------|------|
| **00-structure-and-design.md** | 구조·설계 진입점 (이 문서) |
| [00-structure-and-learning-plan.md](00-structure-and-learning-plan.md) | 구조 **점검**(문서·코드 정합) + 학습 사이트 기획 **요약** |
| [structure-and-design-analysis.md](structure-and-design-analysis.md) | 심화 분석·개선 제안·체크리스트 |
| [content-structure.md](content-structure.md) | 콘텐츠 폴더·v2 기획과의 관계 |
| [deployment.md](deployment.md) | Vercel 배포 절차·환경 변수 |
| [gws-auth-and-verified-usage.md](gws-auth-and-verified-usage.md) | Google Workspace CLI 인증·검증된 명령 |
| [curriculum-levels.md](curriculum-levels.md) | L1/L2 난이도·커리큘럼 수준 |
| [00-전체-소목차.md](00-전체-소목차.md) | 전체 소목차 요약 |
| [tone-and-manner-review.md](tone-and-manner-review.md) | 톤앤매너 검토 |
| [word-page-estimate.md](word-page-estimate.md) | 분량 추정 |
---
## 6. 빠른 참조
- **최근 허브 개편 참고**: `projects/openclaw/saas-engine`의 `curriculum/m1~m4`가 도구별 표준 구조(설치/최근 업데이트/핵심 기능 5)로 재구성됨.
- 공통 템플릿: `projects/openclaw/saas-engine/components/skoolchef-hub/skoolchef-tool-page.tsx`
- 업데이트 데이터: `projects/openclaw/saas-engine/lib/data/tool-updates.ts`
- 점검/검증일 갱신: `cd ../openclaw/saas-engine && pnpm update:tool-updates -- --dry-run`
- **실행**: `pnpm dev` → http://localhost:3000
- **목차 갱신**: 챕터 추가·수정 후 `pnpm generate-index-mdx`
- **배포**: [deployment.md](deployment.md)
- **상세 가이드**: [CLAUDE.md](../CLAUDE.md)
공개 문서 변환 코드 (HTML)
<h1>Skoolchef Tutorial — 구조와 설계</h1>
<blockquote>
<p>프로젝트 전체 구조·설계의 단일 진입점. 상세 분석은 <a href="structure-and-design-analysis.md">structure-and-design-analysis.md</a> 참고.</p>
</blockquote>
<hr>
<h2>1. 개요</h2>
<table>
<thead>
<tr>
<th>항목</th>
<th>내용</th>
</tr>
</thead>
<tbody><tr>
<td><strong>제품</strong></td>
<td>Skoolchef Tutorial — AI 코딩 도구 4종 커리큘럼 (Cursor, Claude Code, Gemini CLI, Google Workspace CLI)</td>
</tr>
<tr>
<td><strong>대상</strong></td>
<td>스쿨 수강생</td>
</tr>
<tr>
<td><strong>기술</strong></td>
<td>Next.js 15 (App Router), MDX, Tailwind CSS, Vercel 배포</td>
</tr>
</tbody></table>
<hr>
<h2>2. 디렉터리 구조</h2>
<pre><code>skoolchef-tutorial/
├── app/ # Next.js App Router
│ ├── layout.tsx # 루트 레이아웃, 메타, Navigation
│ ├── page.tsx # 홈 (히어로 + 커리큘럼 요약)
│ ├── globals.css
│ └── courses/
│ ├── page.tsx # 커리큘럼 목록
│ └── [slug]/page.tsx # 챕터 상세 (MDX 렌더)
├── components/
│ ├── Navigation.tsx # 상단 고정 네비
│ ├── CourseNav.tsx # 챕터 상세 좌측 사이드바(데스크톱)
│ ├── MobileCourseNav.tsx # 챕터 상세 모바일 네비
│ └── MdxImage.tsx # MDX 내 이미지 → next/image
├── lib/
│ ├── theme.ts # 모듈별 색·테마 단일 소스
│ └── mdx.ts # 코스 메타·목록·모듈 그룹 (getAllCourses, getModuleInfo)
├── content/
│ ├── courses/ # 챕터 MDX 플랫 (order 0~18, 총 19파일 + index.mdx)
│ ├── curriculum-v2-plan.md # v2 기획안 (Module 0~5, 22챕터 제안)
│ └── image-mapping.json # Notion 이미지 → 로컬 경로 매핑
├── public/images/notion/ # Notion 추출 이미지
├── scripts/ # Notion 추출·이미지·목차·export 스크립트
├── output/ # 강의안 export (md, html) — 생성물
├── docs/ # 분석·배포·가이드 문서
├── CLAUDE.md # 프로젝트 가이드 (진입점)
├── README.md
└── .env.example
</code></pre>
<p><strong>PDCA 폴더</strong>: 사용하지 않음. 계획/설계/보고는 <code>docs/</code> 또는 <code>content/curriculum-v2-plan.md</code>에 둠.</p>
<hr>
<h2>3. 설계 원칙</h2>
<ul>
<li><strong>콘텐츠</strong>: <code>content/courses/*.mdx</code> 플랫 구조. frontmatter <code>order</code>로 정렬·모듈 구간 매핑 (<code>lib/mdx.ts</code>).</li>
<li><strong>테마</strong>: 모듈별 색·뱃지는 <code>lib/theme.ts</code> 단일 소스 — 홈/목록/사이드바에서 import.</li>
<li><strong>Notion 파이프라인</strong>: extract → download-images → generate-index-mdx. 콘텐츠 반영 시 이 순서로 실행 후 커밋.</li>
<li><strong>보안</strong>: <code>lib/mdx.ts</code>에서 slug path traversal 방지, frontmatter 런타임 검증.</li>
</ul>
<hr>
<h2>4. 모듈·챕터 매핑</h2>
<table>
<thead>
<tr>
<th>order 구간</th>
<th>모듈</th>
<th>설명</th>
</tr>
</thead>
<tbody><tr>
<td>0</td>
<td>Module 0</td>
<td>AI 코딩 도구 개요</td>
</tr>
<tr>
<td>1–5</td>
<td>Module 1</td>
<td>Cursor</td>
</tr>
<tr>
<td>6–9</td>
<td>Module 2</td>
<td>Claude Code</td>
</tr>
<tr>
<td>10–12</td>
<td>Module 3</td>
<td>Gemini CLI</td>
</tr>
<tr>
<td>13–15</td>
<td>Module 4</td>
<td>Google Workspace CLI</td>
</tr>
<tr>
<td>16+</td>
<td>Module 5</td>
<td>실전 프로젝트</td>
</tr>
</tbody></table>
<p>현재 <strong>19챕터</strong> (frontmatter <code>order</code> 0 ~ 18). 예: 통합 실습·로그인(Supabase)·Show me 출력 규칙 등이 order 16 이후에 추가됨. 목차는 <code>pnpm generate-index-mdx</code>로 <code>content/courses/index.mdx</code> 자동 생성.</p>
<p><strong>점검·기획 요약:</strong> <a href="00-structure-and-learning-plan.md">00-structure-and-learning-plan.md</a></p>
<hr>
<h2>5. 문서 인덱스 (docs/)</h2>
<table>
<thead>
<tr>
<th>문서</th>
<th>용도</th>
</tr>
</thead>
<tbody><tr>
<td><strong>00-structure-and-design.md</strong></td>
<td>구조·설계 진입점 (이 문서)</td>
</tr>
<tr>
<td><a href="00-structure-and-learning-plan.md">00-structure-and-learning-plan.md</a></td>
<td>구조 <strong>점검</strong>(문서·코드 정합) + 학습 사이트 기획 <strong>요약</strong></td>
</tr>
<tr>
<td><a href="structure-and-design-analysis.md">structure-and-design-analysis.md</a></td>
<td>심화 분석·개선 제안·체크리스트</td>
</tr>
<tr>
<td><a href="content-structure.md">content-structure.md</a></td>
<td>콘텐츠 폴더·v2 기획과의 관계</td>
</tr>
<tr>
<td><a href="deployment.md">deployment.md</a></td>
<td>Vercel 배포 절차·환경 변수</td>
</tr>
<tr>
<td><a href="gws-auth-and-verified-usage.md">gws-auth-and-verified-usage.md</a></td>
<td>Google Workspace CLI 인증·검증된 명령</td>
</tr>
<tr>
<td><a href="curriculum-levels.md">curriculum-levels.md</a></td>
<td>L1/L2 난이도·커리큘럼 수준</td>
</tr>
<tr>
<td><a href="00-%EC%A0%84%EC%B2%B4-%EC%86%8C%EB%AA%A9%EC%B0%A8.md">00-전체-소목차.md</a></td>
<td>전체 소목차 요약</td>
</tr>
<tr>
<td><a href="tone-and-manner-review.md">tone-and-manner-review.md</a></td>
<td>톤앤매너 검토</td>
</tr>
<tr>
<td><a href="word-page-estimate.md">word-page-estimate.md</a></td>
<td>분량 추정</td>
</tr>
</tbody></table>
<hr>
<h2>6. 빠른 참조</h2>
<ul>
<li><strong>최근 허브 개편 참고</strong>: <code>projects/openclaw/saas-engine</code>의 <code>curriculum/m1~m4</code>가 도구별 표준 구조(설치/최근 업데이트/핵심 기능 5)로 재구성됨.<ul>
<li>공통 템플릿: <code>projects/openclaw/saas-engine/components/skoolchef-hub/skoolchef-tool-page.tsx</code></li>
<li>업데이트 데이터: <code>projects/openclaw/saas-engine/lib/data/tool-updates.ts</code></li>
<li>점검/검증일 갱신: <code>cd ../openclaw/saas-engine && pnpm update:tool-updates -- --dry-run</code></li>
</ul>
</li>
<li><strong>실행</strong>: <code>pnpm dev</code> → <a href="http://localhost:3000">http://localhost:3000</a></li>
<li><strong>목차 갱신</strong>: 챕터 추가·수정 후 <code>pnpm generate-index-mdx</code></li>
<li><strong>배포</strong>: <a href="deployment.md">deployment.md</a></li>
<li><strong>상세 가이드</strong>: <a href="../CLAUDE.md">CLAUDE.md</a></li>
</ul>