---
name: web-build
description: "여행 계획 웹사이트를 React + Vite로 구축하거나 수정한다. 컴포넌트 추가, 스타일 변경, 기능 구현, 버그 수정 등 웹사이트 관련 모든 개발 작업 시 반드시 이 스킬을 사용할 것. '웹사이트 만들어줘', '디자인 바꿔줘', '기능 추가해줘' 등의 요청에 트리거."
---

# Web Build — 여행 웹사이트 개발 스킬

React + Vite 기반 코타키나발루 여행 계획 웹사이트를 구축/수정한다.

## 프로젝트 초기 세팅

프로젝트가 아직 없으면 다음 순서로 세팅한다:

### 1. Vite + React 프로젝트 생성
```bash
npm create vite@latest . -- --template react
npm install
```

### 2. 불필요한 보일러플레이트 정리
- `src/App.css` 내용 비우기
- `src/assets/` 내 기본 파일 삭제
- `public/vite.svg` 삭제

### 3. 폴더 구조 생성
```
src/
├── components/    — UI 컴포넌트
├── data/          — 여행지 JSON 데이터
├── hooks/         — 커스텀 훅
└── styles/        — CSS 파일
```

## 핵심 기능

### 장소 목록 보기
- 카드 그리드 레이아웃 (모바일 1열, 태블릿 2열, 데스크톱 3열)
- 각 카드: 장소명, 카테고리 뱃지, 한줄 설명, 우선순위 표시
- priority가 "must"인 장소는 시각적으로 강조

### 카테고리 필터
- 상단 탭으로 카테고리 필터링
- "전체" 탭 포함
- 현재 선택된 카테고리 하이라이트

### 장소 상세 보기
- 카드 클릭 시 모달 또는 확장 뷰
- 상세 설명, 팁, 가격대, 소요시간 표시
- 닫기 버튼

### 새 장소 추가
- 플로팅 "+" 버튼 또는 하단 추가 섹션
- 간단한 폼: 장소명, 카테고리, 설명, 메모
- LocalStorage에 저장하여 새로고침해도 유지

### 검색
- 장소명/설명 텍스트 검색
- 실시간 필터링

### 메모 기능
- 각 장소에 개인 메모 추가 가능
- LocalStorage에 저장

## 디자인 시스템

### 컬러 팔레트
```css
:root {
  --primary: #0891b2;       /* 바다색 — 주요 액션 */
  --primary-light: #67e8f9; /* 연한 바다색 — 배경 악센트 */
  --secondary: #059669;     /* 숲 초록 — 보조 */
  --accent: #fbbf24;        /* 모래/골드 — 강조 (must 뱃지) */
  --bg: #f0fdfa;            /* 아주 연한 민트 — 배경 */
  --card-bg: #ffffff;       /* 카드 배경 */
  --text: #1e293b;          /* 본문 텍스트 */
  --text-light: #64748b;    /* 보조 텍스트 */
  --border: #e2e8f0;        /* 테두리 */
}
```

### 타이포그래피
- 시스템 폰트 스택 사용 (추가 로딩 없음)
- 제목: 1.5rem bold, 본문: 1rem, 보조: 0.875rem

### 카드 스타일
- 둥근 모서리 (border-radius: 12px)
- 가벼운 그림자 (box-shadow: 0 2px 8px rgba(0,0,0,0.08))
- 호버 시 살짝 올라오는 효과

### 반응형 브레이크포인트
- 모바일: ~640px (1열)
- 태블릿: 640px~1024px (2열)
- 데스크톱: 1024px~ (3열)

## usePlaces 훅 설계

```javascript
// 장소 데이터 관리 커스텀 훅
function usePlaces() {
  // 1. places.json에서 초기 데이터 로드
  // 2. LocalStorage에서 사용자 추가 장소 로드
  // 3. 두 데이터 병합
  // 반환: { places, addPlace, removePlace, updateMemo, filterByCategory, search }
}
```

## 빌드 및 실행
- 개발: `npm run dev`
- 빌드: `npm run build`
- 프리뷰: `npm run preview`