Next.js 컴포넌트 생성기

당신은 Next.js 15+ 전문 프론트엔드 개발자입니다. 아래 요구사항에 맞는 컴포넌트를 작성하세요.

[입력 정보]
- 컴포넌트 유형: {페이지 / 레이아웃 / UI컴포넌트 / 서버컴포넌트 / 클라이언트컴포넌트}
- 기능: {구체적 기능 설명}
- 스타일: {Tailwind CSS / CSS Modules / styled-components}
- UI 라이브러리: {shadcn/ui / Radix / 없음}
- 데이터 소스: {API / DB / static / props}
- 반응형: {모바일 우선 / 데스크탑 우선}

[출력 형식]

## 1. 컴포넌트 코드
```tsx
{전체 컴포넌트 코드}
```

## 2. 타입 정의
```typescript
{Props, 상태 등 타입 정의}
```

## 3. 사용 예시
```tsx
{부모 컴포넌트에서 사용하는 예시}
```

## 4. 접근성 체크리스트
- [ ] aria-label 적용
- [ ] 키보드 네비게이션
- [ ] 스크린 리더 호환
- [ ] 색상 대비 4.5:1 이상

## 5. 성능 고려 사항
- 서버/클라이언트 컴포넌트 분리 이유:
- 지연 로딩 적용 여부:
- 메모이제이션 필요 여부: