한국어 포켓몬 정보 웹사이트
poke-korea.com
소개
Poke Korea는 한국 트레이너를 위한 포켓몬 정보 웹사이트입니다. 포켓몬 도감, 기술, 특성, 타입 상성 등 게임 플레이에 필요한 데이터를 한국어로 제공합니다.
주요 기능
- 포켓몬 도감 - 전 세대 포켓몬 정보 (폼체인지, 메가진화, 리전폼, 거다이맥스 포함)
- 기술 도감 - 세대별 기술 데이터 및 습득 포켓몬 목록
- 특성 도감 - 특성 효과 및 보유 포켓몬 목록
- 타입 상성 계산기 - 공격/방어 타입 상성 계산
- 포켓몬 퀴즈 - 실루엣, 특성, 타입, 타입 상성 퀴즈
기술 스택
| 영역 | 기술 |
|---|
| 프레임워크 | Next.js (App Router) |
| 언어 | TypeScript (strict) |
| 스타일링 | Tailwind CSS |
| 데이터 페칭 | Apollo Client + GraphQL |
| 폼 관리 | React Hook Form |
| 차트 | Chart.js |
| 상태 관리 | React Context API + Immer |
| 코드 생성 | GraphQL Code Generator |
주요 특징
- Server Components 기반 SSR/SSG 최적화
- 모바일/데스크톱 이중 레이아웃 구조 (User Agent 기반 서버 사이드 감지)
- 5,000개 이상 URL 동적 사이트맵 및 SEO 메타데이터
- JSON-LD 구조화 데이터 적용
- 무한 스크롤 기반 대용량 리스트 처리
시작하기
요구사항
- Node.js 18+
- GraphQL API 서버 (
localhost:4000/graphql)
설치 및 실행
# 의존성 설치
npm install
# 개발 서버 실행
npm run dev
# 프로덕션 빌드
npm run build
# GraphQL 타입 생성
npm run codegen
프로젝트 구조
src/
├── app/ # Next.js App Router 페이지
├── views/ # 디바이스별 페이지 뷰 (desktop/mobile)
├── container/ # 비즈니스 로직 컨테이너 (desktop/mobile)
├── components/ # 공용 UI 컴포넌트
├── context/ # React Context 상태 관리
├── hook/ # 커스텀 React 훅
├── gql/ # GraphQL 쿼리/프래그먼트 원본
├── graphql/ # 자동 생성된 GraphQL 타입 (수정 금지)
├── module/ # 유틸리티 모듈
├── constants/ # 상수 정의
├── types/ # TypeScript 타입 정의
└── styles/ # 전역 스타일
Claude Code 하네스
.claude/ 디렉토리를 중심으로 Claude Code의 에이전트, 스킬, 자동화를 관리합니다.
.claude/
├── settings.json # 권한 설정 및 hooks 등록
├── hooks/ # 자동화 스크립트
├── conventions/guides/ # 코딩/스타일링/린팅/워크플로우 규칙
├── seo/guides/ # SEO 가이드라인
├── decisions/ # ADR (아키텍처 의사결정 기록)
├── skills/ # 슬래시 커맨드 (14개)
└── agents/ # 도메인 전문 에이전트 (8개)
에이전트
개발 에이전트
| 에이전트 | 역할 |
|---|
seo-specialist | 메타태그, JSON-LD, OG 이미지, sitemap |
ui-publisher | 컴포넌트 구현, desktop/mobile 분리 패턴 |
graphql-specialist | 쿼리/스키마 변경, codegen 관리 |
tool-designer | 도구/계산기 비즈니스 로직 설계 |
성장 분석 에이전트
| 에이전트 | 역할 |
|---|
growth-analyst | 유입/퍼널/리텐션 데이터 분석 |
competitive-watcher | 경쟁사 동향 모니터링 |
user-insight-analyst | 사용자 행동/VOC 분석 |
growth-strategist | 성장 전략 종합 → 실행 액션 도출 |
스킬
개발 스킬
| 명령어 | 설명 |
|---|
/create-branch | 신규 버전 브랜치 생성 |
/create-pr | Pull Request 생성 |
/review-pr | PR 리뷰 코멘트 분석 |
/reply-review | PR 리뷰 답글 작성 |
/lint-check | Prettier + ESLint 전체 검사 |
/seo-audit | SEO 감사 |
/code-review | 서브에이전트 기반 코드 리뷰 |
/component-builder | desktop/mobile 컴포넌트 스캐폴딩 |
/feature-plan | 신규 기능 기획서 작성 |
/page-scaffold | 페이지 풀 세트 스캐폴딩 |
/competitive-audit | 경쟁 사이트 기능 분석 |
/research | 외부 정보 조사 |
성장 분석 스킬
| 명령어 | 설명 |
|---|
/weekly-growth-review | 주간 성장 리뷰 및 핵심 지표 점검 |
/growth-sprint | 성장 실험 설계 및 Sprint 계획 수립 |
Hooks
| Hook | 시점 | 동작 |
|---|
post-edit-format.sh | 파일 수정 후 | 자동 prettier 포맷팅 |
pre-bash-guard.sh | 명령어 실행 전 | 위험 명령어 차단 (rm -rf, git push --force 등) |
stop-changelog-check.sh | 작업 완료 시 | changelog 파일 존재 여부 검증 |
notify.sh | 입력 대기 시 | macOS 데스크톱 알림 |
Changelog
개발 변경사항은 Changelog 블로그에서 확인할 수 있습니다.
라이선스
이 프로젝트는 개인 프로젝트로, 포켓몬 관련 모든 이미지 및 데이터의 저작권은 Nintendo / Creatures Inc. / GAME FREAK inc.에 있습니다.
