Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions .context/commands.md
Original file line number Diff line number Diff line change
@@ -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
```

13 changes: 13 additions & 0 deletions .context/current-status.md
Original file line number Diff line number Diff line change
@@ -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 스크립트 기반, 개발서버/빌드 금지 지침 포함한 실용적 명령어 가이드

## 다음 작업 요소
- 추후 정의
157 changes: 157 additions & 0 deletions .context/development-guidelines.md
Original file line number Diff line number Diff line change
@@ -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. **컴포넌트 단순화**: 단일 책임 원칙
70 changes: 70 additions & 0 deletions .context/git-workflow.md
Original file line number Diff line number Diff line change
@@ -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에서 변경된 내용을 간략히 설명 -->

## 변경 이유
<!-- 왜 이 변경이 필요한지 설명 -->
```
Loading