diff --git a/README.md b/README.md index 6906e20..870b613 100644 --- a/README.md +++ b/README.md @@ -140,6 +140,10 @@ Code Complete는 30년이 지난 지금도 유효한 소프트웨어 구현 원 ## 챕터 구성 +

+ Code Complete 2판 35장 중 다룬 20장 커버리지 맵 +

+ | 파트 | 챕터 | 주제 | |------|------|------| | 🧭 구현의 기초 | 1–4장 | 소프트웨어 구현 기초, 메타포, 선행 조건 | @@ -151,6 +155,16 @@ Code Complete는 30년이 지난 지금도 유효한 소프트웨어 구현 원
+## 퍼블리싱 하네스 + +Notion 산출물을 Docusaurus로 옮기는 작업은 6개 에이전트가 3-Zone YAML을 주고받는 파이프라인으로 자동화돼 있어요. 자세한 구조는 [`CLAUDE.md`](./CLAUDE.md)에서 확인할 수 있어요. + +

+ 6-에이전트 하네스 파이프라인 — Notion DB에서 Docusaurus MDX까지 +

+ +
+ ## 로컬 개발 ```bash diff --git a/docs/appendix/dashboard.mdx b/docs/appendix/dashboard.mdx index 5a5485a..9230ccc 100644 --- a/docs/appendix/dashboard.mdx +++ b/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장 | + ## ⚠️ 경고 diff --git a/docs/index.mdx b/docs/index.mdx index 40f779f..0c85cf9 100644 --- a/docs/index.mdx +++ b/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'; @@ -35,11 +36,7 @@ McConnell이 2004년에 쓴 책이지만 핵심 원칙(복잡도 관리·정보 총 35장 중 **20장**을 커버했어요. 사이드바는 책 내용의 흐름(구현 전 준비 → 좋은 코드 → 완성과 성장)에 맞춰 3개 테마로 묶었어요. -| 테마 | 책 챕터 | 주제 | -| ----------------- | ---------------- | ------------------------------------------------------------------- | -| 🧭 구현의 기초 | 1-4장, 5-6장 | 구현이란 · 비유 · 문제 정의 · 요구사항 / 구현 설계 · 클래스 설계 | -| ✏️ 좋은 코드 쓰기 | 7-9장, 20-23장 | 좋은 루틴 · 방어적 프로그래밍 · PPP / 품질 · 협력 · 테스트 · 디버깅 | -| 🔧 완성과 성장 | 24-26장, 31-34장 | 리팩터링 · 코드 튜닝 / 레이아웃 · 자기 설명 · 성격 · 장인정신 | + ## 기여하고 싶다면 diff --git a/src/components/ChapterMap.module.css b/src/components/ChapterMap.module.css new file mode 100644 index 0000000..4305eb8 --- /dev/null +++ b/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; +} diff --git a/src/components/ChapterMap.tsx b/src/components/ChapterMap.tsx new file mode 100644 index 0000000..9cd4025 --- /dev/null +++ b/src/components/ChapterMap.tsx @@ -0,0 +1,412 @@ +import styles from './ChapterMap.module.css'; + +export default function ChapterMap() { + return ( +
+ + Code Complete 2판 35장 커버리지 맵 + + 세 테마(구현의 기초, 좋은 코드 쓰기, 완성과 성장)에 걸쳐 35장 중 20장이 다뤄졌고 15장이 + 미커버임을 보여주는 nested containment 다이어그램 + + + + + + + + + + + + {/* Theme 1 — 구현의 기초 */} + + + + + THEME · 기초 + + + 🧭 구현의 기초 + + + 구현이란 무엇인가 · 비유 · 사전 준비 · 설계 + + + + 1~4장 · 구현 · 비유 · 요구사항 · 결정 + + + WEEK 8 · COVERED + + + + 5~6장 · 구현 설계 · 클래스 설계 + + + WEEK 6 · COVERED + + + + 10~19장 · 변수 · 조건문 · 제어 + + + 데이터 타입 · 변수 · 기본 제어 구조 등 + + + 언어 메커니즘에 해당해 프레임워크 시대 + + + FE에선 우선순위를 낮춰 선정 제외됐어요 + + + 10 CHAPTERS · NOT COVERED + + + + {/* Theme 2 — 좋은 코드 쓰기 */} + + + + + THEME · 좋은 코드 + + + ✏️ 좋은 코드 쓰기 + + + 루틴 · 방어적 프로그래밍 · 품질 · 테스트 · 디버깅 + + + + 7~9장 · 루틴 · 방어 · 의사코드(PPP) + + + WEEK 7 · COVERED + + + + 20~23장 · 품질 · 협력 · 테스트 · 디버깅 + + + WEEK 3~4 · COVERED + + + + 27~30장 · 시스템 고려사항 + + + 프로그램 규모 · 관리 · 생산성 도구 등 + + + 조직·관리 영역이 많아 개발자 관점 학습의 + + + 우선순위에서 뒤로 밀렸어요 + + + 4 CHAPTERS · NOT COVERED + + + + {/* Theme 3 — 완성과 성장 */} + + + + + THEME · 완성 + + + 🔧 완성과 성장 + + + 리팩터링 · 코드 튜닝 · 레이아웃 · 장인정신 + + + + 24~26장 · 리팩터링 · 튜닝 전략·기법 + + + WEEK 5 · COVERED + + + + 31~34장 · 레이아웃 · 자기 설명 · 장인정신 + + + WEEK 2 · COVERED + + + + 35장 · 추가 도서와 자원 + + + McConnell이 권하는 다음 읽을 거리 모음 + + + 본문 원칙 학습 대상이 아니라 부록 성격이라 + + + 스터디 범위에서 제외됐어요 + + + 1 CHAPTER · NOT COVERED + + + + {/* Legend */} + + + LEGEND + + + + 다룬 장 (20) + + + + 미커버 (15) + + + COVERAGE 20/35 · 57% + + +
+ ); +} diff --git a/src/components/HarnessPipeline.module.css b/src/components/HarnessPipeline.module.css new file mode 100644 index 0000000..f9a23c8 --- /dev/null +++ b/src/components/HarnessPipeline.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: 860px; + max-width: 1200px; + margin: 0 auto; +} diff --git a/src/components/HarnessPipeline.tsx b/src/components/HarnessPipeline.tsx new file mode 100644 index 0000000..7102b7b --- /dev/null +++ b/src/components/HarnessPipeline.tsx @@ -0,0 +1,711 @@ +import styles from './HarnessPipeline.module.css'; + +export default function HarnessPipeline() { + return ( +
+ + code-complete-2 하네스 6-에이전트 파이프라인 + + Notion DB를 입력으로 받아 6개 에이전트(notion-extractor, chapter-editor, + fe-content-enhancer, mdx-writer, aggregator, voice-validator)를 거쳐 Docusaurus MDX + 페이지와 대시보드 부록을 생성하는 데이터 파이프라인 + + + + + + + + + + + + + + + + + + {/* ─── Main-row arrows ─── */} + + + + + + + {/* ─── Branch to aggregator (enhancer → aggregator) ─── */} + + + {/* aggregator → dashboard */} + + + {/* writer → voice-validator */} + + + {/* Feedback loop — voice-validator → chapter-editor */} + + + {/* ─── Notion DB ─── */} + + + + + SOURCE + + + Notion DB + + + 산출물 워크스페이스 + + + {/* ─── 1. notion-extractor ─── */} + + + + + AGENT + + + notion-extractor + + + raw → 3-Zone YAML + + + {/* ─── 2. chapter-editor ★ FOCAL ─── */} + + + + + ★ LEAD + + + chapter-editor + + + 9섹션 재배치 + + + + 브릿지 문장 + + + {/* ─── 3. fe-content-enhancer ─── */} + + + + + AGENT + + + fe-content-enhancer + + + Java/C++ → React/TS + + + {/* ─── 4. mdx-writer ─── */} + + + + + AGENT + + + mdx-writer + + + YAML → MDX + + + {/* ─── MDX output ─── */} + + + + + OUTPUT + + + docs/*.mdx + + + 6 페이지 + + + {/* ─── 5. aggregator ─── */} + + + + + AGENT + + + aggregator + + + 판정·투표·토론 집계 + + + {/* ─── Dashboard output ─── */} + + + + + OUTPUT + + + dashboard + + + 부록 + + + {/* ─── 6. voice-validator (feedback) ─── */} + + + + + FEEDBACK + + + voice-validator + + + AI 슬롭 탐지 · 재작성 유도 + + + {/* ─── Legend ─── */} + + + LEGEND + + + + 주역 · 결과물 + + + + 주 흐름 + + + + 피드백 루프 (슬롭 재작성) + + + 6 AGENTS · 10 SKILLS + + +
+ ); +} diff --git a/src/components/ProgressTimeline.module.css b/src/components/ProgressTimeline.module.css new file mode 100644 index 0000000..053de4d --- /dev/null +++ b/src/components/ProgressTimeline.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: 820px; + max-width: 1200px; + margin: 0 auto; +} diff --git a/src/components/ProgressTimeline.tsx b/src/components/ProgressTimeline.tsx new file mode 100644 index 0000000..fe7ffc6 --- /dev/null +++ b/src/components/ProgressTimeline.tsx @@ -0,0 +1,404 @@ +import styles from './ProgressTimeline.module.css'; + +export default function ProgressTimeline() { + return ( +
+ + 스터디 진행 타임라인 + + 2주차부터 8주차까지 6개 페이지에 걸쳐 누적 4장 → 8장 → 11장 → 13장 → 16장 → 20장으로 쌓인 + 진행 경과 타임라인 + + + + + + + + + + + + {/* Baseline */} + + + {/* Progress fill — full range covered (2주차 ~ 8주차 모두 complete) */} + + + {/* ─────────── Node 1 · 2주차 (label above) ─────────── */} + + + + 2주차 · PART 7 + + + 31 · 32 · 33 · 34 + + + 레이아웃 · 자기 설명 + + {/* Cumulative below */} + + 4 / 35 + + + {/* ─────────── Node 2 · 3~4주차 (label below) ─────────── */} + + + + 3~4주차 · PART 5 + + + 20 · 21 · 22 · 23 + + + 품질 · 협력 · 테스트 + + {/* Cumulative above (flipped position for below-label nodes) */} + + 8 / 35 + + + {/* ─────────── Node 3 · 5주차 (label above) ─────────── */} + + + + 5주차 · PART 5 + + + 24 · 25 · 26 + + + 리팩터링 · 튜닝 + + + 11 / 35 + + + {/* ─────────── Node 4 · 6주차 (label below) ─────────── */} + + + + 6주차 · PART 2 + + + 5 · 6 + + + 구현 설계 · 클래스 + + + 13 / 35 + + + {/* ─────────── Node 5 · 7주차 (label above) ─────────── */} + + + + 7주차 · PART 2 + + + 7 · 8 · 9 + + + 루틴 · 방어 · PPP + + + 16 / 35 + + + {/* ─────────── Node 6 · 8주차 FOCAL (label below) ─────────── */} + + + + + 8주차 · PART 1 + + + 1 · 2 · 3 · 4 + + + 개요 · 비유 · 결정 + + + 20 / 35 + + + {/* Editorial aside */} + + 책 챕터 순서가 아니라 주차 순서로 진행했어요 — 가장 최근에 읽은 1~4장이 맨 오른쪽. + + + {/* Legend */} + + + LEGEND + + + + 완료 주차 + + + + 현재 지점 + + + 6 SESSIONS · 20 CHAPTERS + + +
+ ); +} diff --git a/src/css/custom.css b/src/css/custom.css index a35f1a6..bae1e63 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -25,6 +25,20 @@ /* 산악회 amber 강조색 */ --ham-accent: #D97706; --ham-accent-light: #FCD34D; + + /* diagram-design 토큰 (static/diagrams SVG + src/components/ChapterMap·HarnessPipeline에서 사용) */ + --cc2-paper: #ffffff; + --cc2-paper-2: #f6f8fa; + --cc2-ink: #1F2328; + --cc2-muted: #57534e; + --cc2-soft: #78716c; + --cc2-rule: rgba(31, 35, 40, 0.12); + --cc2-rule-solid: rgba(120, 113, 108, 0.35); + --cc2-accent: #16A34A; + --cc2-accent-tint: rgba(22, 163, 74, 0.10); + --cc2-accent-2: #D97706; + --cc2-arrow-default: #78716c; + --cc2-arrow-feedback: #D97706; } [data-theme='dark'] { @@ -42,6 +56,20 @@ --ifm-navbar-background-color: #161B22; --ifm-navbar-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06); --ifm-card-background-color: #161B22; + + /* diagram-design 토큰 · 다크 */ + --cc2-paper: #0D1117; + --cc2-paper-2: #161B22; + --cc2-ink: #f0f6fc; + --cc2-muted: #a8a29e; + --cc2-soft: #8e8680; + --cc2-rule: rgba(240, 246, 252, 0.18); + --cc2-rule-solid: rgba(168, 162, 158, 0.35); + --cc2-accent: #4ADE80; + --cc2-accent-tint: rgba(74, 222, 128, 0.14); + --cc2-accent-2: #FCD34D; + --cc2-arrow-default: #a8a29e; + --cc2-arrow-feedback: #FCD34D; } /* 사이드바 메뉴 폰트 크기 */ diff --git a/static/diagrams/chapter-map.svg b/static/diagrams/chapter-map.svg new file mode 100644 index 0000000..69de547 --- /dev/null +++ b/static/diagrams/chapter-map.svg @@ -0,0 +1,121 @@ + + Code Complete 2판 35장 커버리지 맵 + 세 테마에 걸쳐 35장 중 20장이 다뤄졌고 15장이 미커버임을 보여주는 nested containment 다이어그램 + + + + + + + + + + THEME · 기초 + 🧭 구현의 기초 + 구현이란 무엇인가 · 비유 · 사전 준비 · 설계 + + + 1~4장 · 구현 · 비유 · 요구사항 · 결정 + WEEK 8 · COVERED + + + 5~6장 · 구현 설계 · 클래스 설계 + WEEK 6 · COVERED + + + 10~19장 · 변수 · 조건문 · 제어 + 데이터 타입 · 변수 · 기본 제어 구조 등 + 언어 메커니즘에 해당해 프레임워크 시대 + FE에선 우선순위를 낮춰 선정 제외됐어요 + 10 CHAPTERS · NOT COVERED + + + + + + + THEME · 좋은 코드 + ✏️ 좋은 코드 쓰기 + 루틴 · 방어적 프로그래밍 · 품질 · 테스트 · 디버깅 + + + 7~9장 · 루틴 · 방어 · 의사코드(PPP) + WEEK 7 · COVERED + + + 20~23장 · 품질 · 협력 · 테스트 · 디버깅 + WEEK 3~4 · COVERED + + + 27~30장 · 시스템 고려사항 + 프로그램 규모 · 관리 · 생산성 도구 등 + 조직·관리 영역이 많아 개발자 관점 학습의 + 우선순위에서 뒤로 밀렸어요 + 4 CHAPTERS · NOT COVERED + + + + + + + THEME · 완성 + 🔧 완성과 성장 + 리팩터링 · 코드 튜닝 · 레이아웃 · 장인정신 + + + 24~26장 · 리팩터링 · 튜닝 전략·기법 + WEEK 5 · COVERED + + + 31~34장 · 레이아웃 · 자기 설명 · 장인정신 + WEEK 2 · COVERED + + + 35장 · 추가 도서와 자원 + McConnell이 권하는 다음 읽을 거리 모음 + 본문 원칙 학습 대상이 아니라 부록 성격이라 + 스터디 범위에서 제외됐어요 + 1 CHAPTER · NOT COVERED + + + + + LEGEND + + + 다룬 장 (20) + + + 미커버 (15) + + COVERAGE 20/35 · 57% + diff --git a/static/diagrams/harness-pipeline.svg b/static/diagrams/harness-pipeline.svg new file mode 100644 index 0000000..0fd3337 --- /dev/null +++ b/static/diagrams/harness-pipeline.svg @@ -0,0 +1,162 @@ + + code-complete-2 하네스 6-에이전트 파이프라인 + Notion DB를 입력으로 받아 6개 에이전트가 3-Zone YAML을 다듬어 Docusaurus MDX를 생성하는 데이터 파이프라인 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + SOURCE + Notion DB + 산출물 워크스페이스 + + + + + + AGENT + notion-extractor + raw → 3-Zone YAML + + + + + + ★ LEAD + chapter-editor + 9섹션 재배치 + + 브릿지 문장 + + + + + + AGENT + fe-content-enhancer + Java/C++ → React/TS + + + + + + AGENT + mdx-writer + YAML → MDX + + + + + + OUTPUT + docs/*.mdx + 6 페이지 + + + + + + AGENT + aggregator + 판정·투표·토론 집계 + + + + + + OUTPUT + dashboard + 부록 + + + + + + FEEDBACK + voice-validator + AI 슬롭 탐지 · 재작성 유도 + + + + LEGEND + + + 주역 · 결과물 + + + 주 흐름 + + + 피드백 루프 (슬롭 재작성) + + 6 AGENTS · 10 SKILLS + diff --git a/static/diagrams/progress-timeline.svg b/static/diagrams/progress-timeline.svg new file mode 100644 index 0000000..aa4c126 --- /dev/null +++ b/static/diagrams/progress-timeline.svg @@ -0,0 +1,104 @@ + + 스터디 진행 타임라인 + 2주차부터 8주차까지 누적 4장→8장→11장→13장→16장→20장으로 쌓인 진행 경과 + + + + + + + + + + + + + + 2주차 · PART 7 + 31 · 32 · 33 · 34 + 레이아웃 · 자기 설명 + 4 / 35 + + + + + 3~4주차 · PART 5 + 20 · 21 · 22 · 23 + 품질 · 협력 · 테스트 + 8 / 35 + + + + + 5주차 · PART 5 + 24 · 25 · 26 + 리팩터링 · 튜닝 + 11 / 35 + + + + + 6주차 · PART 2 + 5 · 6 + 구현 설계 · 클래스 + 13 / 35 + + + + + 7주차 · PART 2 + 7 · 8 · 9 + 루틴 · 방어 · PPP + 16 / 35 + + + + + + 8주차 · PART 1 + 1 · 2 · 3 · 4 + 개요 · 비유 · 결정 + 20 / 35 + + + 책 챕터 순서가 아니라 주차 순서로 진행했어요 — 가장 최근에 읽은 1~4장이 맨 오른쪽. + + + + LEGEND + + + 완료 주차 + + + 현재 지점 + + 6 SESSIONS · 20 CHAPTERS +