# [프로젝트명] 개발 요구사항 명세서

## 1. 프로젝트 개요

- 목적: [예: 개인 개발자를 위한 깔끔한 포트폴리오 웹사이트]

- 주요 타겟: [예: 인사담당자 및 오픈소스 기여자]

## 2. 기술 스택 (Tech Stack)

- Frontend: React (Vite), TypeScript, Tailwind CSS

- State Management: Zustand

- Deployment: Vercel

## 3. 핵심 기능 요구사항

### 3.1. 메인 페이지

- [ ] 히어로 섹션: 한 줄 소개와 프로필 이미지 배치

- [ ] 프로젝트 카드 리스트: 썸네일, 제목, 사용 기술 태그 포함

- [ ] 제약조건: 모든 애니메이션은 Framer Motion을 사용하여 부드럽게 처리할 것.

### 3.2. 프로젝트 상세 모달

- [ ] 카드를 클릭하면 모달 창이 열림.

- [ ] Markdown 렌더러를 통해 프로젝트 상세 글을 읽어올 것.

## 4. 데이터 구조 및 폴더 아키텍처

```text

src/

├── components/

│ ├── Hero.tsx

│ ├── ProjectCard.tsx

│ └── Modal.tsx

├── hooks/

└── App.tsx

```

## 5. 주의 및 금지 사항

- 외부 라이브러리 추가 시 반드시 설치 전에 물어볼 것.

- 인라인 스타일 대신 가급적 Tailwind CSS 유틸리티 클래스만 사용할 것.