Pokemon Dex

1세대 포켓몬 151마리의 정보를 조회할 수 있는 포켓몬 도감 웹 애플리케이션입니다.

👉 https://minji105.github.io/pokemon

Features

• 포켓몬 목록 - 151마리 포켓몬을 반응형 그리드 레이아웃으로 표시
• 상세 정보 - 포켓몬 이름, 분류, 설명 확인 + 3D 플립 애니메이션으로 정면/후면 이미지 전환
• 한글 검색 - 자음/모음만 입력해도 검색 가능 (예: "ㅍㅋ" → 피카츄)
• 찜하기 - 하트 아이콘으로 즐겨찾기 관리

Tech Stack

분류	기술
Framework	React 19, Vite
State Management	Redux Toolkit
Routing	React Router DOM
Styling	Tailwind CSS v4
Search	korean-regexp
Deploy	GitHub Pages

Project Structure

src/
├── pages/              # 페이지 컴포넌트
│   ├── Main.jsx        # 메인 (포켓몬 목록)
│   ├── Detail.jsx      # 상세 페이지
│   ├── Search.jsx      # 검색 결과
│   └── Favorite.jsx    # 찜 목록
│
├── components/         # 재사용 컴포넌트
│   ├── Card.jsx        # 포켓몬 카드
│   └── FavoriteButton.jsx  # 찜하기 버튼
│
├── layout/             # 레이아웃
│   └── Header.jsx      # 헤더 (검색, 네비게이션)
│
├── RTK/                # Redux Toolkit
│   ├── store.js        # 스토어 설정
│   ├── slice.js        # 슬라이스 (pokemon, favorite)
│   ├── thunk.js        # 비동기 액션
│   └── selector.js     # 셀렉터
│
└── assets/             # 정적 파일

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# 저장소 클론
git clone https://github.com/minji105/pokemon.git

# 디렉토리 이동
cd pokemon

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

Scripts

명령어	설명
npm run dev	개발 서버 실행
npm run build	프로덕션 빌드
npm run preview	빌드 미리보기
npm run deploy	GitHub Pages 배포

API

PokéAPI를 사용하여 포켓몬 데이터를 가져옵니다.

• 포켓몬 정보: /pokemon-species/{id}/
• 이미지: GitHub PokeAPI Sprites

Performance Optimization

• Code Splitting - React.lazy로 페이지별 지연 로딩
• Memoization - React.memo, createSelector 적용
• Image Loading - Skeleton 애니메이션으로 UX 개선