requirements-phase2.md

PatchDiff.gg – Phase 2 요구사항 명세서 (v1.0)

Phase 1 MVP 완료 후 추가 개선 및 신규 기능에 대한 요구사항입니다.

권장 구현 순서 (의존성 고려)

1. 카테고리 표시 개선(§3) → 카테고리 필터(§1): 파서에서 category 정확히 분류해야 필터가 의미 있음
2. 게임 모드 지원 확장(§6): 메인 페이지 구조 변경 시 캐시 무효화(§6.3) 함께 반영
3. 크롤러 메타데이터(§4): §6 완료 후 모드별 타임스탬프 기록 구현

공통 개발 원칙

• 캐시 전략: Phase 2 기능 구현 시 use cache 적용·확장 시 반드시 고려
  • 신규 데이터 fetcher는 cacheTag, cacheLife 명시
  • 태그는 모드·페이지·검색 등 용도별로 분리 (예: patches, search-results)

---

1. 카테고리 필터 기능

1.1 배경

• 현재 패치 상세 페이지에는 변경 유형 필터(All, Buff, Nerf, Adjust)만 존재
• 사용자가 챔피언/아이템/기타 항목을 빠르게 탐색하기 어려움

1.2 요구사항

• 카테고리 필터 추가: 챔피언, 아이템, 그 외(시스템 등)
• 기존 변경 유형 필터와 조합 가능하게 구현
  • 예: "챔피언" + "너프"로 필터링 → 이번 패치에서 너프된 챔피언만 조회

1.3 의존성

• 카테고리 표시 개선(§3) 선행 필요: category가 정확히 분류되어야 필터 동작 가능

1.4 UI/UX 고려사항

• 필터 UI가 복잡해지지 않도록 직관적인 디자인 필요
• 모바일에서도 사용하기 편한 레이아웃 (드롭다운, 토글 버튼 등 검토)
• 필터 상태가 URL에 반영되면 공유에 용이 (선택 사항)

---

2. 검색 기능 (패치 상세 페이지 내)

2.1 범위

• 패치 상세 페이지 내 검색: 현재 패치 내 챔피언/아이템 검색 (우선 구현)

2.2 상세

• UI 위치: 변경 유형 토글(All, Buff, Nerf, Adjust) 영역 오른쪽 끝
• 검색 대상: 챔피언명, 아이템명, 변경 내용
• 토글 영역 오른쪽 끝에 검색 input 배치
• 입력 시 items를 클라이언트에서 필터링 (이름, 변경 내용 기준)

---

3. 카테고리 표시 개선

3.1 문제

• 현재 UI에서 챔피언/아이템 옆에 "UNKNOWN"으로 표시됨
• 파서가 category: 'unknown'으로 하드코딩되어 있음

3.2 요구사항

• 패치노트 HTML 구조를 파싱하여 카테고리 자동 분류 (실제 구조 확인 필요: <h2>, id 등)
• UI에 "챔피언", "아이템", "시스템" 등으로 표시
• 기존 DB category 컬럼 및 UI Badge 활용 (신규 개발 최소화)
• LoL 패치노트 HTML 구조 분석 (섹션별 h2/h3 id 등)
• 파서에서 category: 'unknown' → 실제 값으로 분류

---

4. 크롤러 메타데이터

4.1 목적

• 마지막 크롤링 시간을 DB에 저장하여 상태 모니터링

4.2 구현

• crawler_runs 테이블 추가 또는 기존 테이블에 last_crawled_at 컬럼 추가
• 모드 구분: LoL/TFT 등 game_mode 또는 patch_type 컬럼으로 크롤링 대상 구분
• 크롤러 실행 시 타임스탬프 기록 (모드별로)
• (선택) 관리자 페이지에서 확인 가능

---

5. UI/UX 개선

5.1 디자인 폴리시

• 디자인 컨셉 확정
• 반응형 웹 재점검 (모바일/태블릿/데스크탑)
• (기타 디자인 요소 추가)

---

6. 게임 모드 지원 확장

6.1 배경

• 현재는 소환사의 협곡 패치노트만 제공
• LoL 생태계 내 다른 인기 모드의 패치노트 수요 존재

6.2 요구사항

Phase 2 범위

• TFT 크롤러: game-updates 페이지에서 TFT 링크 추출, 상세 HTML 파싱
• TFT 파서: TFT 패치노트 HTML 구조에 맞는 파서 신규 작성
• DB 스키마: patches 또는 games에 game_mode / patch_type 컬럼 추가
• 전략적 팀 전투(TFT) 패치노트 추가
• 메인 화면에서 게임 모드 선택 UI
  • 소환사의 협곡 / 전략적 팀 전투 중 선택
  • 선택한 모드에 따라 해당 패치 목록만 노출

추후 확장 (Phase 3 등)

• 칼바람 증강모드 패치노트 추가 예정

6.3 기술 고려사항

• 크롤 대상 URL
  • LoL(소환사의 협곡): https://www.leagueoflegends.com/ko-kr/news/tags/patch-notes/ (현재) 또는 .../news/game-updates/
  • TFT: https://www.leagueoflegends.com/ko-kr/news/game-updates/ 에서 TFT 링크 추출
  • TFT 상세 URL 형식: https://teamfighttactics.leagueoflegends.com/ko-kr/news/game-updates/teamfight-tactics-patch-{major}-{minor}
• DB: games 테이블 확장 또는 game_mode / patch_type 컬럼 추가 검토
• 라우팅: /summoners-rift, /tft 또는 쿼리 파라미터 방식 검토

크롤링 후 캐시 무효화

• 현재 크롤러 완료 시 revalidateTag('patches', { expire: 0 }) 로 패치 데이터 캐시를 즉시 만료함 (app/api/crawl/route.ts)
• 메인 페이지가 모드 선택 화면으로 변경되면, 패치 목록이 모드별로 분리됨 → revalidateTag 호출부 수정 필요
  • 예: 모드별 캐시 태그(patches-summoners-rift, patches-tft) 도입 시, 크롤된 모드의 태그만 revalidateTag 호출
  • 새 패치 반영이 즉시 되려면 크롤된 모드에 해당하는 캐시 태그를 무효화해야 함

6.4 UI/UX

• 메인 상단에 탭 또는 토글 형태로 모드 선택
• 선택 상태가 URL에 반영되어 북마크·공유 가능하도록 (선택 사항)

---

7. 기타 / 추후 고려

전체 패치 통합 검색 (Phase 3)

• 예) "아트록스" 검색 시 모든 패치의 아트록스 변경사항 조회
• UI: 구글 홈 화면처럼 메인/홈 화면 가운데 검색 input, 검색 결과 전용 화면

조정(Adjust) 분석 (Phase 3)

• 분기점 계산 (예: "AP 100 이상이면 상향, 미만이면 하향")

• 레벨별/스킬랭크별 유불리 시각화

• (추가 요구사항 작성)

---

작성자 메모: v1.0 기준 문서입니다. 필요한 항목을 추가/삭제/수정해 주세요.