feat: 계층적 CLAUDE.md 구조 및 도메인 아키텍처 개편 (#11)

* feat: 계층적 CLAUDE.md 구조 및 도메인 아키텍처 개편

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

* docs: 컨텍스트 업데이트

---------

Co-authored-by: Claude <[email protected]>

Author: kickbelldev

.context/commands.md

@@ -0,0 +1,74 @@
+# 명령어 레퍼런스
+
+프로젝트에서 사용하는 주요 명령어들을 정리합니다.
+
+## 개발 명령어
+
+### 패키지 관리
+```bash
+# 의존성 설치
+pnpm install
+
+# 패키지 추가/제거
+pnpm add <package-name>
+pnpm add -D <package-name>  # 개발 의존성
+pnpm remove <package-name>
+```
+
+### 주의사항
+```bash
+# 🚫 금지된 명령어들 (CLAUDE.md 지침)
+pnpm dev    # 개발서버 실행 금지
+pnpm build  # 빌드 금지
+pnpm start  # 서버 실행 금지
+```
+
+## 테스트 (Vitest)
+
+### 기본 테스트
+```bash
+# 테스트 실행
+pnpm test
+
+# 테스트 UI 실행
+pnpm test:ui
+
+# 테스트 감시 모드
+pnpm test:watch
+
+# 테스트 커버리지
+pnpm test:coverage
+```
+
+### 특정 테스트
+```bash
+# 파일별 테스트
+pnpm test -- posts.test.ts
+
+# 패턴 테스트
+pnpm test -- --grep "태그 그래프"
+```
+
+## 코드 품질 (Biome)
+
+### 코드 검사 및 포맷팅
+```bash
+# 코드 검사
+pnpm biome:check
+
+# 자동 수정
+pnpm biome:fix
+
+# 스테이지된 파일만 수정
+pnpm biome:staged
+```
+
+### TypeScript 타입 검사
+```bash
+# 타입 검사
+pnpm type
+
+# 타입 검사 (감시 모드)
+pnpm type -- --watch
+```
+

.context/current-status.md

@@ -0,0 +1,13 @@
+# current-status.md
+
+최근 완료 작업과 다음 작업 요소를 정리한 문서입니다.
+
+## 최근 완료 작업
+- ✅ **CLAUDE.md 문서 체계화**: @import 구문으로 모듈화된 문서 구조 완성
+- ✅ **development-guidelines.md 최적화**: 실제 프로젝트의 도메인 중심 설계, 모듈 레벨 캐싱, 태그 그래프 시스템 패턴 중심으로 재작성
+- ✅ **styling-guide.md 최적화**: 실제 컴포넌트 패턴(CategoryBadge, TagBadge, CVA 시스템) 반영한 실용적 가이드
+- ✅ **git-workflow.md 최적화**: 실제 프로젝트의 브랜치 패턴과 커밋 컨벤션 반영
+- ✅ **commands.md 최적화**: 실제 package.json 스크립트 기반, 개발서버/빌드 금지 지침 포함한 실용적 명령어 가이드
+
+## 다음 작업 요소
+- 추후 정의

.context/development-guidelines.md

@@ -0,0 +1,157 @@
+# 개발 가이드라인
+
+이 블로그 프로젝트의 핵심 패턴과 구현 원칙을 정의합니다.
+
+## 아키텍처 패턴
+
+### 도메인 중심 설계
+- **도메인 로직**: `src/domain/blog/` 에 통합
+- **UI 컴포넌트**: `src/app/` 하위에 구현
+- **타입 정의**: `src/domain/blog/types.ts` 중앙 집중
+
+```typescript
+// 도메인 API 사용 예시
+import { getCategoryById, getPostsByCategory, getRelatedPostsByTags } from '@/domain/blog'
+
+const category = getCategoryById('dev')
+const posts = getPostsByCategory('dev')
+const related = getRelatedPostsByTags(currentSlug, 3)
+```
+
+### 모듈 레벨 캐싱
+빌드 타임에 모든 데이터를 사전 로드하여 SSG 최적화
+
+```typescript
+// src/domain/blog/index.ts
+export const allPosts = await getAllPosts()
+export const allCategories = await getAllCategories()
+export const allTags = extractTagsFromPosts(allPosts)
+export const tagGraph = createTagGraph(allPosts, allTags)
+export const tagClusters = createTagClusters(tagGraph)
+```
+
+### 태그 그래프 시스템
+graphology 라이브러리로 태그 간 관계 분석
+
+```typescript
+// 태그 관계 분석
+const relationships = getTagRelationships()
+const clusters = getTagClusters()
+const relatedPosts = getRelatedPostsByTags(currentSlug, 3)
+```
+
+## 콘텐츠 구조
+
+### MDX 파일 구조
+```
+src/contents/
+├── dev/           # 개발 카테고리
+│   ├── category.json
+│   └── *.mdx
+└── life/          # 일상 카테고리
+    ├── category.json
+    └── *.mdx
+```
+
+### 포스트 frontmatter
+```yaml
+---
+title: '포스트 제목'
+date: 2025-01-17
+tags: ['tag1', 'tag2']
+description: '포스트 설명'
+category: 'dev'  # 또는 'life'
+---
+```
+
+### 카테고리 메타데이터
+```json
+{
+  "name": "개발",
+  "description": "개발 관련 포스트",
+  "color": "blue",
+  "icon": "💻"
+}
+```
+
+## 컴포넌트 패턴
+
+### 타입 정의
+```typescript
+interface PostHeaderProps {
+  title: string
+  date: string
+  tags: string[]
+  category?: CategoryId
+  readingTime?: number
+  author?: string
+  className?: string
+}
+```
+
+### 컴포넌트 구현
+```typescript
+// 서버 컴포넌트 기본, 상호작용 필요시만 클라이언트
+export function PostHeader({ title, date, tags, category }: PostHeaderProps) {
+  return (
+    <header className={cn('mb-8 pb-8', className)}>
+      <div className="flex items-center gap-3 mb-4">
+        {category && <CategoryBadge categoryId={category} />}
+        <h1 className="text-3xl font-bold">{title}</h1>
+      </div>
+      <TagList tags={tags} />
+    </header>
+  )
+}
+```
+
+## 품질 기준
+
+### TypeScript 엄격 모드
+- `any` 타입 사용 금지
+- 모든 Props 인터페이스 명시적 정의
+- 도메인 타입 재사용 (`CategoryId`, `Post`, `Tag`)
+
+### 테스트 패턴
+```typescript
+// 비즈니스 로직 테스트
+describe('태그 그래프 시스템', () => {
+  it('관련 포스트를 태그 유사도로 찾는다', () => {
+    const related = getRelatedPostsByTags('test-slug', 3)
+    expect(related).toHaveLength(3)
+  })
+})
+```
+
+### 성능 최적화
+- 모든 데이터 빌드 타임 사전 계산
+- `generateStaticParams()` 사용한 정적 경로 생성
+- 컴포넌트 간 props 최소화
+
+## 디렉토리 구조
+
+```
+src/
+├── app/                    # Next.js App Router
+│   ├── [category]/         # 카테고리 페이지
+│   │   ├── [slug]/         # 포스트 상세
+│   │   └── _components/    # 페이지별 컴포넌트
+│   └── _components/        # 전역 컴포넌트
+├── domain/blog/            # 도메인 로직
+│   ├── index.ts            # 공개 API + 캐싱
+│   ├── types.ts            # 타입 정의
+│   └── logic/              # 비즈니스 로직
+│       ├── posts.ts
+│       ├── categories.ts
+│       └── tags.ts
+└── contents/               # MDX 콘텐츠
+    ├── dev/
+    └── life/
+```
+
+## 구현 원칙
+
+1. **도메인 API 사용**: 직접 파일 시스템 접근 금지
+2. **타입 안전성**: 모든 데이터 흐름 타입 보장
+3. **모듈 레벨 캐싱**: 빌드 타임 데이터 사전 로드
+4. **컴포넌트 단순화**: 단일 책임 원칙

.context/git-workflow.md

@@ -0,0 +1,70 @@
+# Git 워크플로우
+
+브랜치 전략, 커밋 컨벤션, PR 프로세스를 정의합니다.
+
+## 브랜치 전략
+
+### 기본 브랜치
+- **main**: 배포용 안정화 브랜치
+- **feature/**: 기능 개발용 브랜치
+- **fix/**: 버그 수정용 브랜치
+- **docs/**: 문서 작업용 브랜치
+
+### 브랜치 네이밍
+```bash
+# 기능 개발 (실제 프로젝트 패턴)
+feat/entities
+feat/post-navigation
+feat/entity-optimization-and-category-system
+
+# 버그 수정
+fix/resolve-navigation-issue
+fix/correct-typo-in-header
+
+# 문서/설정 작업
+docs/claude-pr-workflow
+config/github-templates
+config/tailwind-setup
+```
+
+## 커밋 컨벤션
+
+### 기본 형식
+```
+type: subject
+
+body (optional)
+
+footer (optional)
+```
+
+### 커밋 타입
+- **feat**: 새로운 기능 추가
+- **fix**: 버그 수정
+- **docs**: 문서 수정
+- **style**: 코드 포맷팅, 세미콜론 누락 등
+- **refactor**: 코드 리팩토링
+- **test**: 테스트 추가 또는 수정
+- **chore**: 빌드 프로세스 또는 보조 도구 변경
+
+## 논리적 단위 커밋
+
+- 커밋은 변경사항 그룹끼리 묶여서 작성
+
+## PR 프로세스
+
+### PR 생성 전 체크리스트
+- [ ] `pnpm test` 통과 확인
+- [ ] `pnpm biome:check` 통과 확인  
+- [ ] `pnpm type` 통과 확인
+- [ ] 커밋 메시지 정리 완료
+- [ ] 관련 이슈 연결
+
+### PR 템플릿
+```markdown
+## 변경사항 요약
+<!-- 이 PR에서 변경된 내용을 간략히 설명 -->
+
+## 변경 이유
+<!-- 왜 이 변경이 필요한지 설명 -->
+```