Skip to content

Commit 63375d1

Browse files
kickbelldevkickbelldev
authored
feat: 게시글 기본 레이아웃 (#8)
* feat: PostHeader 컴포넌트 구현 - 포스트 제목, 날짜, 태그를 표시하는 PostHeader 컴포넌트 작성 - formatDate 유틸리티 함수 구현 (ISO 날짜를 한국어 형식으로 변환) - 반응형 레이아웃 적용 (모바일/데스크톱) - 다크 모드 지원 및 stone 색상 팔레트 사용 - 태그에 # 접두사 추가 및 Badge 컴포넌트 스타일링 - formatDate 유틸리티 함수 단위 테스트 작성 - PostHeader 사용 예시 파일 추가 * fix: formatDate에서 Number.isNaN 사용하도록 수정 - Biome 린트 경고 해결: isNaN 대신 Number.isNaN 사용 * feat: Post 타입 정의 확장 - PostFrontMatter에 description, author, readingTime, featured 필드 추가 - PostWithNavigation 타입 추가 (이전/다음 포스트, 관련 포스트) - Heading 타입 추가 (목차 생성용) - PostMetadata 타입 추가 (SEO 메타데이터용) * feat: shadcn/ui 컴포넌트 추가 - Badge 컴포넌트 추가 (태그 표시용) - Card 컴포넌트 추가 (콘텐츠 카드용) - class-variance-authority 기반 variant 시스템 적용 * refactor: 블로그 라우트 구조 변경 - /blog/[slug] → /posts/[slug]로 라우트 경로 변경 - 더 명확한 URL 구조로 개선 * feat: PostContent, PostFooter 컴포넌트 추가 - PostContent: MDX 콘텐츠 렌더링 컴포넌트 - PostFooter: 포스트 하단 정보 표시 컴포넌트 - 포스트 페이지 레이아웃 구성 요소 완성 * feat: Kiro 프로젝트 설정 및 스펙 문서 추가 - .kiro/steering/: 개발 표준, 프로젝트 구조, UI 디자인 시스템 가이드라인 - .kiro/specs/post-page-layout/: 포스트 페이지 레이아웃 스펙 문서 - requirements.md: 요구사항 정의 - design.md: 설계 문서 - tasks.md: 구현 작업 목록 * feat: enhance MDX content styling with improved prose and code blocks - Add comprehensive prose styling customization for better readability - Implement enhanced code block styling with mobile scroll support - Add responsive image handling with proper shadows and alignment - Improve mobile experience with touch-friendly scrollbars - Add full dark mode support for all content elements - Update PostContent component with detailed typography classes - Add custom CSS for code blocks, tables, blockquotes, and images - Integrate PostContent component in post page layout Requirements: 2.1, 2.2, 2.3, 5.3, 5.4 * kiro: spec, steering 업데이트 * feat: 포스트 페이지 UI * chore: biome 영향범위 수정 * ci: 테스트 명령어 수정
1 parent df190eb commit 63375d1

File tree

18 files changed

+1034
-12
lines changed

18 files changed

+1034
-12
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,4 @@ jobs:
3333
run: pnpm tsc --noEmit
3434

3535
- name: Run tests
36-
run: pnpm test:run
36+
run: pnpm test

‎.kiro/steering/project-structure.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# 프로젝트 구조 및 개발 가이드라인
2+
3+
## 프로젝트 개요
4+
5+
Next.js 15 기반의 정적 블로그 애플리케이션으로, MDX를 사용한 콘텐츠 관리와 도메인 주도 설계를 따릅니다.
6+
7+
## 기술 스택
8+
9+
- **프레임워크**: Next.js 15 (App Router)
10+
- **콘텐츠**: MDX with rehype-pretty-code
11+
- **스타일링**: Tailwind CSS + shadcn/ui
12+
- **언어**: TypeScript
13+
- **코드 품질**: Biome (formatting/linting)
14+
- **테스팅**: Vitest
15+
- **패키지 매니저**: pnpm
16+
17+
## 디렉토리 구조
18+
19+
```
20+
src/
21+
├── app/ # Next.js App Router 루트
22+
│ ├── _components/ # 전역 컴포넌트
23+
│ ├── _fonts/ # 폰트 설정
24+
│ ├── _lib/ # 유틸리티 함수
25+
│ ├── posts/[slug]/ # 동적 포스트 페이지
26+
│ ├── about/ # About 페이지
27+
│ ├── layout.tsx # 루트 레이아웃
28+
│ └── globals.css # 전역 스타일
29+
├── entities/ # 도메인 엔티티
30+
│ ├── posts/ # 포스트 도메인 로직
31+
│ └── tags/ # 태그 도메인 로직
32+
└── contents/ # MDX 블로그 포스트
33+
```
34+
35+
## 네이밍 컨벤션
36+
37+
- **라우트가 아닌 폴더**: 언더스코어 접두사 사용 (`_components`, `_hooks`)
38+
- **컴포넌트 스코프**:
39+
- 전역: `src/app/_components/`
40+
- 페이지별: `src/app/[route]/_components/`
41+
- **파일명**: kebab-case 또는 PascalCase (컴포넌트)
42+
43+
## 도메인 아키텍처
44+
45+
### 엔티티 구조
46+
- `src/entities/posts/`: 포스트 관련 비즈니스 로직
47+
- `index.ts`: 공개 API
48+
- `types.ts`: 타입 정의
49+
- `logic.ts`: 비즈니스 로직
50+
- `*.test.ts`: 테스트 파일
51+
52+
### 데이터 흐름
53+
1. MDX 파일 (`src/contents/`) → gray-matter 파싱
54+
2. 엔티티 레이어에서 비즈니스 로직 처리
55+
3. App Router 페이지에서 렌더링
56+
57+
## 스타일링 가이드라인
58+
59+
### Tailwind CSS
60+
- **컬러 팔레트**: `stone` 계열 사용 (`text-stone-900`, `border-stone-200`)
61+
- **반응형**: 모바일 퍼스트 접근
62+
- **다크모드**: CSS 변수 기반 테마 지원
63+
64+
### shadcn/ui 컴포넌트
65+
- **설치**: `npx shadcn@latest add <component>`
66+
- **위치**: `src/app/_components/ui/`
67+
- **스타일**: "new-york" 스타일, stone 베이스 컬러
68+
- **아이콘**: Lucide React 사용
69+
70+
## 콘텐츠 관리
71+
72+
### 콘텐츠 위치
73+
`src/contents/*.mdx`
74+
75+
### MDX 구조
76+
```yaml
77+
---
78+
title: '포스트 제목'
79+
slug: 'post-slug'
80+
date: 2025-01-01
81+
tags: ['tag1', 'tag2']
82+
---
83+
84+
# 포스트 내용
85+
```
86+
87+
## 배포 설정
88+
89+
- **basePath**: `/blog` (GitHub Pages 등을 위한 설정)
90+
- **출력**: 정적 파일 (`out/` 디렉토리)
91+
- **환경**: Node.js 환경에서 빌드, 정적 호스팅 가능

‎.kiro/steering/task-execution-process.md‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
# 작업 실행 프로세스
2+
3+
## 작업 진행 원칙
4+
5+
- 작업의 단위를 가능하면 작게 설정
6+
- 지시가 모호하다고 느껴지면 질문 후 진행
7+
8+
## 구현 원칙
9+
10+
### 점진적 개발
11+
- 한 번에 하나의 태스크만 집중하여 구현
12+
- 태스크 완료 후 사용자 검토 대기, 자동으로 다음 태스크 진행하지 않음
13+
- 각 단계에서 이전 단계의 결과물을 기반으로 구축
14+
15+
### 코드 품질
16+
- TypeScript 엄격 모드 준수, any 타입 사용 금지
17+
- 컴포넌트는 단일 책임 원칙 적용
18+
- Props 인터페이스 명시적 정의
19+
- 적절한 기본값 설정
20+
21+
### 테스트 우선
22+
- 비즈니스 로직 구현 시 단위 테스트 함께 작성
23+
- AAA 패턴 (Arrange, Act, Assert) 준수
24+
- 의미있는 테스트명 사용
25+
26+
## 구현 패턴
27+
28+
### 컴포넌트 설계
29+
- **단일 책임 원칙**: 하나의 컴포넌트는 하나의 역할만
30+
- **Props 인터페이스**: 모든 props에 대한 명시적 타입 정의
31+
- **기본값 설정**: 선택적 props에 대한 적절한 기본값
32+
- **커스텀훅**: 로직은 커스텀훅으로 분리함
33+
- **컴포넌트 분리**: 50줄 이상의 컴포넌트는 분리 고려
34+
35+
### 컴포넌트 구현
36+
```typescript
37+
// 1. 인터페이스 정의
38+
interface ComponentProps {
39+
required: string
40+
optional?: boolean
41+
children?: React.ReactNode
42+
}
43+
44+
// 2. 컴포넌트 구현
45+
export function Component({
46+
required,
47+
optional = false,
48+
children
49+
}: ComponentProps) {
50+
// 구현
51+
}
52+
```
53+
54+
### 비즈니스 로직 구현
55+
```typescript
56+
// 1. 타입 정의
57+
export type DataType = {
58+
id: string
59+
value: string
60+
}
61+
62+
// 2. 로직 함수 구현
63+
export function processData(data: DataType[]): DataType[] {
64+
// 구현
65+
}
66+
67+
// 3. 테스트 작성
68+
describe('processData', () => {
69+
it('should process data correctly', () => {
70+
// 테스트 구현
71+
})
72+
})
73+
```
74+
75+
### 기능 구조 우선
76+
- 스타일링보다 기능적 구조와 로직에 집중
77+
- 컴포넌트의 역할과 책임을 명확히 정의
78+
- 데이터 흐름과 상태 관리 구조 우선 설계
79+
- UI는 기본적인 레이아웃만 구현하고 세부 스타일링은 후순위
80+
81+
### 아키텍처 중심 접근
82+
- 도메인 로직과 UI 로직의 명확한 분리
83+
- 컴포넌트 간의 의존성과 데이터 전달 구조 설계
84+
- 재사용 가능한 로직의 추상화
85+
- 확장 가능한 구조로 설계
86+
87+
### 최소 스타일링
88+
- 구조화에 필요한 최소한의 스타일링 가능
89+
- 필요시 shadcn/ui의 컴포넌트를 이용
90+
91+
```typescript
92+
// 구조에 집중한 컴포넌트 예시
93+
<div className="container"> {/* 기본 레이아웃만 */}
94+
<header className="fixed inset-x-0 top-0 h-14">
95+
{/* 기능적 구조 우선 */}
96+
</header>
97+
<main>
98+
<div className="flex items-center gap-x-2">
99+
{/* ... */}
100+
</div>
101+
</main>
102+
</div>
103+
```
104+
105+
### UI 구현
106+
- **플레이스홀더 사용**: 실제 콘텐츠 대신 `[Page Title]`, `[Description]` 등 사용
107+
- **사용자 승인**: UI 구조 구현 전 명시적 요구사항 확인
108+
- **점진적 구현**: 한 번에 모든 기능 구현하지 않기
109+
110+
## 에러 처리
111+
112+
### 클라이언트 사이드
113+
- 사용자 친화적 에러 메시지
114+
- 적절한 폴백 UI 제공
115+
- 개발 환경에서 상세 로깅
116+
117+
### 서버 사이드
118+
- notFound() 함수 활용
119+
- 적절한 에러 바운더리 설정
120+
- Graceful degradation 적용
121+
122+
## 접근성 고려사항
123+
124+
### 필수 요소
125+
- 시맨틱 HTML 태그 사용
126+
- 적절한 ARIA 레이블
127+
- 키보드 네비게이션 지원
128+
- 충분한 색상 대비
129+
130+
### 구현 예시
131+
```typescript
132+
<button
133+
aria-label="설명적인 레이블"
134+
aria-expanded={isExpanded}
135+
className="focus:outline-none focus:ring-2 focus:ring-stone-500"
136+
>
137+
```
138+
139+
## 문서화
140+
141+
### 코드 주석
142+
- 복잡한 로직에 대한 설명 주석
143+
- JSDoc 형태의 함수 문서화
144+
- 타입 정의에 대한 설명
145+
146+
## 형상관리
147+
148+
### 브랜치 전략
149+
- `main`: 프로덕션 준비 코드
150+
- `feat/`: 새 기능 (`feat/search-functionality`)
151+
- `fix/`: 버그 수정 (`fix/mobile-nav-issue`)
152+
- `docs/`: 문서 업데이트
153+
154+
### 커밋 컨벤션
155+
```
156+
<type>: <description>
157+
158+
[optional body]
159+
```
160+
161+
**타입:**
162+
- `feat:` - 새 기능
163+
- `fix:` - 버그 수정
164+
- `docs:` - 문서 업데이트
165+
- `config:` - 설정 변경
166+
- `refactor:` - 리팩토링
167+
- `chore:` - 유지보수
168+
169+
#### 커밋 전략
170+
논리적 단위로 나누어서 커밋

0 commit comments

Comments
 (0)