feat: diagram-design 스킬로 커버리지 맵 · 하네스 · 타임라인 다이어그램 3종 추가

README.md

@@ -140,6 +140,10 @@ Code Complete는 30년이 지난 지금도 유효한 소프트웨어 구현 원
 
 ## 챕터 구성
 
+<p align="center">
+  <img src="./static/diagrams/chapter-map.svg" alt="Code Complete 2판 35장 중 다룬 20장 커버리지 맵" width="900" />
+</p>
+
 | 파트 | 챕터 | 주제 |
 |------|------|------|
 | 🧭 구현의 기초 | 1–4장 | 소프트웨어 구현 기초, 메타포, 선행 조건 |
@@ -151,6 +155,16 @@ Code Complete는 30년이 지난 지금도 유효한 소프트웨어 구현 원
 
 <br />
 
+## 퍼블리싱 하네스
+
+Notion 산출물을 Docusaurus로 옮기는 작업은 6개 에이전트가 3-Zone YAML을 주고받는 파이프라인으로 자동화돼 있어요. 자세한 구조는 [`CLAUDE.md`](./CLAUDE.md)에서 확인할 수 있어요.
+
+<p align="center">
+  <img src="./static/diagrams/harness-pipeline.svg" alt="6-에이전트 하네스 파이프라인 — Notion DB에서 Docusaurus MDX까지" width="900" />
+</p>
+
+<br />
+
 ## 로컬 개발
 
 ```bash

docs/appendix/dashboard.mdx

@@ -8,6 +8,7 @@ unlisted: true
 
 import VerdictDistribution from '@site/src/components/VerdictDistribution';
 import BestDiscussions from '@site/src/components/BestDiscussions';
+import ProgressTimeline from '@site/src/components/ProgressTimeline';
 
 ## 📖 스터디 개요
 
@@ -109,16 +110,7 @@ import BestDiscussions from '@site/src/components/BestDiscussions';
 
 ## 📅 진행 타임라인
 
-스터디는 책 챕터 순서가 아니라 주차 순서로 진행됐어요. 누적 챕터 수는 다음과 같이 쌓였어요.
-
-| 순서 | 주차    | 책 챕터        | 파트 레이블                               | 판정 상태 | 누적 |
-| ---- | ------- | -------------- | ----------------------------------------- | --------- | ---- |
-| 1    | 2주차   | 31, 32, 33, 34 | Part 7 (레이아웃·자기 설명·성격·장인정신) | complete  | 4장  |
-| 2    | 3~4주차 | 20, 21, 22, 23 | Part 5 (품질·협력·테스트·디버깅)          | complete  | 8장  |
-| 3    | 5주차   | 24, 25, 26     | Part 5 (리팩터링·튜닝 전략·튜닝 기법)     | complete  | 11장 |
-| 4    | 6주차   | 5, 6           | Part 2 (구현 설계·클래스 설계)            | complete  | 13장 |
-| 5    | 7주차   | 7, 8, 9        | Part 2 (루틴·방어적 프로그래밍·PPP)       | complete  | 16장 |
-| 6    | 8주차   | 1, 2, 3, 4     | Part 1 (개요·비유·사전준비·핵심결정)      | complete  | 20장 |
+<ProgressTimeline />
 
 ## ⚠️ 경고
 

docs/index.mdx

@@ -7,6 +7,7 @@ hide_title: true
 
 import HeroSection from '@site/src/components/HeroSection';
 import MemberGrid from '@site/src/components/MemberGrid';
+import ChapterMap from '@site/src/components/ChapterMap';
 
 <HeroSection />
 
@@ -35,11 +36,7 @@ McConnell이 2004년에 쓴 책이지만 핵심 원칙(복잡도 관리·정보
 총 35장 중 **20장**을 커버했어요. 사이드바는 책 내용의 흐름(구현 전 준비 → 좋은 코드 → 완성과
 성장)에 맞춰 3개 테마로 묶었어요.
 
-| 테마              | 책 챕터          | 주제                                                                |
-| ----------------- | ---------------- | ------------------------------------------------------------------- |
-| 🧭 구현의 기초    | 1-4장, 5-6장     | 구현이란 · 비유 · 문제 정의 · 요구사항 / 구현 설계 · 클래스 설계    |
-| ✏️ 좋은 코드 쓰기 | 7-9장, 20-23장   | 좋은 루틴 · 방어적 프로그래밍 · PPP / 품질 · 협력 · 테스트 · 디버깅 |
-| 🔧 완성과 성장    | 24-26장, 31-34장 | 리팩터링 · 코드 튜닝 / 레이아웃 · 자기 설명 · 성격 · 장인정신       |
+<ChapterMap />
 
 ## 기여하고 싶다면
 

src/components/ChapterMap.module.css

@@ -0,0 +1,16 @@
+.wrapper {
+  margin: 1rem 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  overflow-x: auto;
+}
+
+.svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  min-width: 720px;
+  max-width: 1200px;
+  margin: 0 auto;
+}