[1.54.0] 타입 상성 페이지 개편 — 반응형 단일 + 계산기·표 연동

작업 일자: 2026-07-20 작업 브랜치: feature/1.54.0-type-effectiveness-redesign 설계 근거: UX-009 재설계 (ux-designer)

📋 작업 개요

작업 유형: 페이지 전면 재구성 (2단계 — 페이지 단위 재구성 7호, D그룹) 담당: jsg3121 + Claude

홈·리스트·상세·습득기술(A)·특성(B)·기술 도감(C, PR #185)에 이어 타입 상성 1개 라우트를 개편. UX-009 설계 → HTML 시안 확인·피드백(배율 표기 (a)배지형/(b)텍스트형 비교 → 텍스트형 확정) → 구현 → 로컬 QA 2라운드(최종적으로 배율은 구버전 설명 문장형으로 재확정)의 사이클을 따랐다.

이 페이지는 목록/상세형이 아니라 "입력(타입 선택) → 즉시 계산 결과"의 계산기형 인터랙션이 핵심이라, 설계 축이 선택 컨트롤 시맨틱(TypeChip)과 상세 페이지 DS(TypeMatchup)의 재사용 판단에 있었다.

🎯 해결한 문제

• [Critical] 모바일 18×18 상성표가 읽을 수 없는 상태 — w-full table-fixed로 324셀을 뷰포트에 욱여넣어 셀이 ~15px로 압축, "0.5배"가 2줄로 개행되고 타입명이 세로로 분해(실캡처 확정, WCAG 1.4.10). 가로 스크롤 + sticky 행 헤더 + 셀 min-w-11(44px)로 전환
• [Critical] 계산기 선택 상태 대비 미약 — 선택/미선택이 opacity 100/60 차이뿐 (실캡처에서 육안 구별 불가). TypeChip DS(grayscale↔컬러 + 라벨 볼드)로 교체
• [Major] UA 분기 2벌(18파일) + 실효 없는 revalidate — 반응형 단일 통합, revalidate 제거
• [Major] 결과 배지가 도감 타입 배지 시각 언어와 불일치 — CardColor 인라인 헥사 → Tag DS + grade-* 토큰으로 통일
• [Major] 임의값·비토큰 색 도배 — text-[2rem]·#8b8b8b·중요도 배경 임의 헥사 5종(#feb0b0 등) 전량 토큰 정합(grade-*와 1:1 대응)
• [Major] 계산기(5단계)와 표(4단계) 배율 체계 혼동 소지 — "단일 타입 기준" 캡션·축 안내 문구 추가

✨ 주요 변경사항

계산기 — TypeChip DS 재사용

• 타입 선택 18종을 자체 알약 버튼에서 **TypeChip(mode='multi')**으로 교체 — 도감 리스트 FilterBar와 동일한 "다중 선택 + 최대 2개 잠금" 요구라 원자가 그대로 맞는다. TypeEffectivenessContext(선택 상태 로직)는 그대로 재사용
• "최대 2개" 제약을 상시 보조문구로 선제 고지(구버전은 선택 완료 후에야 안내)
• 초기화를 타입 목록(ul 19번째 li)에서 분리 — Button DS는 44px(min-h-touch) 강제라 보조 액션엔 과대해(QA 라운드 1), 도감·기술 필터 초기화와 동일한 슬림 버튼(min-h-8/desktop:min-h-9)으로 통일
• 모바일 타입 선택 영역은 auto-fit 그리드 균등 분배 — 고정폭 칩 flex-wrap이 기기 폭에 따라 우측에만 공백을 몰던 이슈(QA 라운드 1)

계산 결과 — grade 색 설명 문장 + 타입 배지 (QA 라운드 2 최종 확정)

• TypeMatchup 재사용 판정(보류 트랙): 컴포넌트 재사용 ✗ — 방어 관점 정적 표시(상세)와 공격 관점 능동 계산+도감 링크(계산기)는 극성·책임이 다르다. 대신 디자인 언어(grade- 색 토큰, dl 시맨틱, srLabel 패턴)만 승계*
• 배율은 배지가 아니라 grade 색 설명 문장("4배의 데미지를 줄 수 있어요")
  • 행 좌측 grade 색 보더 4px, 타입 칩은 문장 아래 배치. 타입만 배지(Tag+Link)로 남겨 "배지 = 타입" 단일 규칙로 배율-타입 혼동을 원천 차단. 시안의 압축 표기(×4)는 QA 라운드 2에서 구버전 설명 문장형으로 재확정(초심자 자명성), 조심 섹션 문구는 공격 관점으로 정합("0.5배의 데미지만 줄 수 있어요")
• 섹션 라벨은 공격 관점 유지("이런 타입을 쓰면 좋아요/조심해야 해요") — TypeMatchup의 약점/강점 라벨과 극성이 반대라 그대로 쓰면 오해 유발
• aria-live는 상시 마운트된 sr-only 요약 한 문장으로 좁혀 매 선택마다 결과 전체를 낭독하는 소음 방지

상성표 — 반응형 단일 + 계산기 연동

• 모바일: 카드형 경계의 가로 스크롤 위젯(overflow-x-auto + tabindex + aria-label, W3C scrollable region) + sticky 행 헤더 열(불투명 배경, border-separate — sticky와 border-collapse 병용 시 브라우저별 테두리 버그 회피) + 셀 min-w-11. 데스크톱은 폭 여유로 전체 수용
• 계산기 선택 연동: 선택한 상대 타입 = 표의 "공격받는 포켓몬" 축(열) — 해당 열 배경 하이라이트 + 헤더 강조. 구버전은 Provider가 계산기만 감싸 연동 자체가 불가능했던 구조를 Provider 뷰 최상위 승격으로 해결. 선택 시 표로 자동 스크롤 인하는 동작은 조작 흐름을 끊어 제거(QA 라운드 1, 사용자 결정)
• 배율 필터 활성화 시 흐림(opacity)을 td→내부 span으로 이동 — td에 걸면 셀 보더까지 흐려져 표 라인이 사라져 보이던 이슈(QA 라운드 1)
• 배율 필터(2배만/0.5배만/0배만 보기)는 텍스트 링크 → 테두리+채움 알약 토글로 어포던스 보강(aria-pressed 유지). 열 하이라이트(배경)와 배율 강조(텍스트)는 다른 시각 채널이라 동시 적용 가능
• 데/모가 달랐던 셀 표기(½/0/2 vs 0.5배/0배/2배)를 데스크톱 표기로 통일

CTA·설명

• CTA 3종(도감·챔피언스·퀴즈) 구조 유지, 임의값 토큰 정합, 모바일 1열 반응형
• 설명("타입별 추가 효과") 콘텐츠 유지, text-[1.75rem]→토큰, h3→h2 승격

페이지 재배선

• 크롬만 UA 분기(A~C 패턴 — 크롬은 전 라우트 공용 UA분기 컴포넌트라 이 페이지만 제거 불가, 크롬 통합은 별도 트랙), revalidate 제거, 광고 3종 제거, JSON-LD 유지
• PageHeader 신규 도입(구버전은 sr-only h1만 있어 시각 타이틀 부재)

♿ 접근성

• 계산기 role="group", TypeChip 원자가 개별 라벨 보장
• 결과 배지 aria-label="{타입} 타입 포켓몬 도감 보기" + focus-visible, 배율은 설명 문장 자체가 낭독됨(별도 srLabel 불필요)
• 표: scope 시맨틱 유지, 스크롤 컨테이너 키보드 접근(tabindex+aria-label), 배율은 색+텍스트 병기(WCAG 1.4.1)

✅ 검증

• tsc --noEmit / eslint(신규 파일 0건) / next build 통과
• 로컬 시각 검증(모바일 375·데스크톱 1280) — QA 2라운드(총 6건) 반영 후 사용자 확인 완료

🔒 보존 (일괄 제거 트랙)

구버전 데/모 뷰·컨테이너(views/{desktop,mobile}/typeEffectiveness/**, container/{desktop,mobile}/typeEffectiveness/**)와 광고 3종은 이번 PR에서 제거하지 않는다 — 다른 구버전과 함께 일괄 제거 트랙에서 정리(전 그룹 동일 방식).