Project

General

Profile

Actions
Copy link

새기능 #522

open

[프론트][P2] UX·접근성 묶음

Added by joungmin ko about 2 months ago. Updated about 2 months ago.

Status:
진행
Priority:
보통
Assignee:
-
Start date:
06/27/2026
Due date:
% Done:

80%

Estimated time:

Description

프론트엔드 UX/접근성 개선:

  • 플래시카드 role=button 안에 중첩 button/a → 키보드/AT 깨짐 (study/drill-session). 구조 분리.
  • song-lyrics가 lib/api 우회하고 /backoffice-api 직접 fetch (song-lyrics.tsx:283,317). lib/api로 추출.
  • 아이콘 전용 버튼/링크 aria-label 부재(스트리밍/하트/Listen).
  • artist 협업 파서 정규식 취약(Tyler, The Creator 등) → 백엔드 /featuring 사용 (artist/page.tsx:18).
  • my/page 즐겨찾기 해제 실패 무시 → UI/DB 불일치 (my/page.tsx:35).
  • lang='ko' 고정 + 메타데이터 빈약(OG/SEO/per-route) (layout.tsx).
  • Modal 닫을 때 포커스 복원 안 됨. speak() 3곳 중복 → lib/speech.ts.

— 6-페르소나 코드리뷰(2026-06-27)에서 도출. 소스 검증 완료. [AI 등록]

Actions
Copy link
 #1

Updated by joungmin ko about 2 months ago

  • Status changed from 신규 to 진행
  • % Done changed from 0 to 80

커밋 92dac0c. 안전·고가치 항목 처리 완료(next build OK, 재기동, 6개 라우트 200):
[x] 플래시카드 role=button 중첩 인터랙티브 제거 + 명시적 Flip 버튼(키보드/AT 정상).
[x] 공용 lib/speech.ts speak() — study/drill 세션 중복 제거.
[x] song-lyrics의 /backoffice-api 직접 fetch → lib/api 타입 헬퍼(fetch/translate), 429/503/partial UX 동일.
[x] 아이콘 전용 컨트롤 aria-label/aria-hidden(스트리밍·하트(aria-pressed)·Listen).
[x] my/page 즐겨찾기 해제 실패 시 상태 유지 + 오류 노출(기존 낙관적 무시 수정).
[x] Modal 닫을 때 opener로 포커스 복원.
[x] layout 메타데이터 강화(metadataBase·OpenGraph·Twitter).

보류: artist 협업 파서 → 백엔드 /featuring 전환(데이터소스 변경·검증 필요, /featuring 실사용 확인 후). 소소 잔여: song-lyrics의 speak()는 아직 공용 util 미적용(다음에 통합). [AI 조치]

Actions
Copy link

Also available in: Atom PDF