리펙토링: 코드 개선

AGENTS.md

@@ -73,6 +73,7 @@ prisma/
 
 - 모든 수학 수식은 KaTeX로 렌더링한다. 일반 텍스트나 Unicode 수식 문자를 직접 사용하지 않는다.
 - KaTeX 컴포넌트는 `components/math/` 하위에 위치한다.
+- 현재 수식 컴포넌트는 `katex.renderToString()`을 직접 사용한다. 별도 래퍼 라이브러리를 추가하기 전에 Next.js App Router 클라이언트 번들에서 런타임 문제가 없는지 확인한다.
 
 ### 상태 관리
 
@@ -83,10 +84,20 @@ prisma/
 
 ### 컴포넌트 배치
 
-- 게임 화면에서 재사용되는 입력, 피드백, 점수 요약 UI는 `components/game/` 하위에 둔다.
+- 게임 화면에서 재사용되는 입력, 피드백, 점수 요약, 진행 단계 UI는 `components/game/` 하위에 둔다.
 - 수식 렌더링 전용 컴포넌트는 `components/math/` 하위에 둔다.
 - 라우트별 조립 컴포넌트(`PlayClient` 등)는 해당 `app/` 라우트 폴더에 둘 수 있다.
 
+### 접근성 / 키보드 조작
+
+- 문제 풀이 화면은 키보드만으로 진행할 수 있어야 한다.
+- 새 문제가 표시되면 첫째 항 입력 칸에 focus를 둔다.
+- 첫째 항에서 Enter를 누르면 둘째 항 입력 칸으로 focus를 이동한다.
+- 둘째 항에서 Enter를 누르면 제출 동작을 실행한다.
+- 정답·오답 피드백이 표시되면 다음 진행 버튼에 focus를 둔다.
+- 최종 결과 화면이 표시되면 다시 시작 버튼에 focus를 둔다.
+- 아이콘이나 기호만으로 상태를 표시할 때는 `aria-label`, `sr-only` 텍스트 등으로 의미를 함께 제공한다.
+
 ### API / 백엔드
 
 - API는 `app/api/` 하위의 Route Handlers로만 구현한다. 별도의 백엔드 서버를 추가하지 않는다.