본문으로 건너뛰기

[1.54.0] 모바일 개편 Phase 0 — 디자인 토큰 체계 정비

· 약 2분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

작업 일자: 2026-06-15 작업 브랜치: feature/1.54.0-design-tokens

📋 작업 개요

작업 유형: 디자인 토큰 확장 (모바일 개편 Phase 0 ①) 담당: jsg3121 + Claude

모바일 사용성 전면 개편 기획서의 Phase 0 첫 작업. 이후 공용 컴포넌트·화면 작업의 기반이 될 디자인 토큰을 tailwind.config.js에 추가했다.

[1.54.0] 모바일 사용성 전면 개편 기획서 — 기반 먼저, 스트랭글러 점진 교체

· 약 2분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

작업 일자: 2026-06-15 작업 브랜치: feature/1.54.0-redesign-spec

📋 작업 개요

작업 유형: 기획서(SPEC) 작성 (분석 + 전략 수립) 담당: jsg3121 + Claude

모바일 사용자 비중이 높은(55.6%) 포케코리아의 모바일 사용성 전면 개편 전략을 기획서로 정리했다. 코드 수정 없이, 현황 조사 → 전략 수립 → 단계별 로드맵을 문서화했다.

[1.54.0] ux-designer 에이전트 강화 — Design Critique + claude.ai/design 연동

· 약 2분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

작업 일자: 2026-06-15 작업 브랜치: feature/1.54.0-ux-designer-critique

📋 작업 개요

작업 유형: 하네스(에이전트 정의) 강화 + 외부 연동 편입 담당: jsg3121 + Claude

Anthropic 공식 Design 플러그인(Design Critique / UX Writing / Accessibility Audit 등)을 참고하여, 기존 ux-designer 에이전트에 구조화된 디자인 비평(Design Critique) 역할을 추가했다. 동시에 claude.ai/design의 디자인 시스템 동기화(DesignSync)를 워크플로우에 편입하되, 에이전트의 "코드 미작성·plan 모드" 원칙과 충돌하지 않도록 역할 분리(방안 A) 구조로 설계했다.

[1.52.4] 챔피언스 티어 페이지 포괄 키워드 회수

· 약 3분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

작업 일자: 2026-06-13 작업 브랜치: hotfix/1.52.4-champions-tier-keyword

📋 작업 개요

작업 유형: SEO 핫픽스 (검색 노출수 회복) 담당: jsg3121 + Claude

서치콘솔에서 챔피언스 티어 페이지의 노출수가 6월 9~10일 완만한 하락에 이어 6월 11일 급락한 현상을 분석하고, 원인을 제거하기 위한 메타데이터 단독 수정 핫픽스입니다.

[1.53.0] 번들 최적화 Phase 3 — 타입 상성표 데이터-주도 렌더링

· 약 3분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

작업 일자: 2026-06-13 작업 브랜치: feature/1.53.0-type-effectiveness-split

📋 작업 개요

작업 유형: 데이터-주도 렌더링 리팩토링 + 번들 청크 분할 담당: jsg3121 + Claude

전 라우트 중 First Load JS가 가장 무거웠던 /type-effectiveness(180KB)를 개선했다. 원인은 18×18 타입 상성표가 JSX로 완전히 하드코딩(desktop·mobile 각 ~1000줄)되어 있던 것이었다. 상성 데이터를 매트릭스로 추출하고 테이블을 동적 렌더링으로 전환했다.

[1.53.0] 번들 최적화 Phase 1 — chart.js 동적 임포트 + 분석기 도입

· 약 3분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

작업 일자: 2026-06-11 작업 브랜치: feature/1.53.0-bundle-chartjs

📋 작업 개요

작업 유형: 번들 코드 스플리팅 + 빌드 분석 도구 도입 담당: jsg3121 + Claude

next build 산출물을 분석한 결과, 상세 계열 라우트의 First Load JS가 비정상적으로 무거운 것을 발견했다. 원인은 chart.js가 상세 페이지 공통 청크에 묶여 초기 로드에 통째로 포함되는 것이었다. 이를 동적 임포트로 분리하여 초기 번들을 줄이고, 향후 지속적인 번들 최적화를 위해 @next/bundle-analyzer를 도입했다.

[1.53.0] 번들 최적화 Phase 2 — cross-fetch 제거 (Next.js 내장 fetch 사용)

· 약 3분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

작업 일자: 2026-06-11 작업 브랜치: feature/1.53.0-optimize-imports

📋 작업 개요

작업 유형: 레거시 폴리필 제거 + 번들 최적화 담당: jsg3121 + Claude

Phase 1(chart.js 동적 임포트)에 이어, 번들에 불필요하게 포함된 레거시 폴리필을 정리했다. @apollo/clientHttpLink에 명시적으로 주입하던 cross-fetch가 모던 브라우저·Next.js 환경에서는 중복 코드임을 측정으로 확인하고 제거했다.

[1.45.0] 챔피언스 상세 페이지 Phase 4 — 포맷 분리 + 폼 라우트 + 폼 탭 + 메타 요약

· 약 6분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

작업 일자: 2026-06-05 작업 브랜치: feature/1.45.0-champions-detail 연결 SPEC: .claude/specs/champions-frontend-implementation-plan.md (Phase 4)

📋 작업 개요

작업 유형: 라우트 구조 변경 + 폼 라우트 5개 신설 + 신규 컴포넌트 + 폼 정확 라우팅 전체 적용 담당: jsg3121 + Claude

champions-frontend-implementation-plan.md Phase 4 (상세) 단계 — 1.45.0 의 가장 큰 작업. 백엔드의 신규 응답 (formSiblings, formType 필드 다수 추가) 을 활용해 폼별 라우트 분리 + 폼 간 빠른 전환 UX 를 도입했다.

ux-designer 에이전트로 정보 위계 검토 → ui-publisher 에이전트로 정적 시안 → 사용자 피드백 반영 사이클을 거쳐 본 구현 진입했다.

[1.45.0] 챔피언스 리스트 페이지 Phase 2 — 포맷 분리 + 메타 카드 + 정렬

· 약 6분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

작업 일자: 2026-06-04 ~ 2026-06-05 작업 브랜치: feature/1.45.0-champions-list 연결 SPEC: .claude/specs/champions-frontend-implementation-plan.md (Phase 2)

📋 작업 개요

작업 유형: 라우트 구조 변경 + 카드 컴포넌트 재설계 + 필터/정렬 UI + 백엔드 스키마 변경 대응 담당: jsg3121 + Claude

champions-frontend-implementation-plan.md Phase 2 (리스트) 단계. Phase 1 의 포맷 분리 패턴을 리스트 라우트에도 동일하게 적용하고, 카드를 "도감"이 아닌 "메타 분석 카드" 로 재설계했다.

ux-designer 에이전트로 정보 위계 검토 → ui-publisher 에이전트로 정적 시안(mockups/champions-list-v2/) 작성 → 사용자 피드백 4회 반영 사이클을 거쳐 카드 변경/필터 위치/sticky 동작을 합의한 뒤 본 구현 진입했다.