리펙토링: 코드 검토

AGENTS.md

@@ -107,7 +107,8 @@ prisma/
 #### 숫자 괄호 풀이 화면 (`/number-parentheses/play`)
 
 - 모든 항을 하나의 공유 input으로 입력한다.
-- input 아래에는 각 항의 입력값 버튼을 버튼 그룹으로 표시한다. 현재 입력 중인 항은 `aria-pressed`로 표시하고, 비어 있는 항은 `?`로 표시한다.
+- input 위 우상단에는 각 항의 진행 상태를 progress 스타일로 표시한다.
+- 진행 상태는 값 입력 전에는 괄호 안 원래 항 값을 표시하고, 값 입력 중이거나 입력 후에는 사용자가 입력한 값을 표시한다.
 - 첫째 항에서 Enter를 누르면 같은 input이 둘째 항 입력으로 전환된다.
 - 둘째 항에서 Enter를 누르면 제출 동작을 실행한다. 별도 제출 버튼이 없어도 form submit 흐름이 유지되어야 한다.
 - 터치 기반 입력 환경에서는 input focus 시 커스텀 숫자 키패드를 표시한다. 키패드는 숫자, `+/-`, `.`, `⌫`, `↵` 버튼을 제공한다.
@@ -120,7 +121,8 @@ prisma/
 
 - 답을 직접 입력하지 않는다. 각 항의 보기 버튼 중에서 선택한다.
 - 첫째 항 선택 후 자동으로 둘째 항 보기로 focus가 이동한다.
-- 두 항을 모두 선택하면 `정답 확인` 버튼에 focus가 이동하고 버튼이 활성화된다.
+- 둘째 항을 선택하면 별도 `정답 확인` 버튼 없이 즉시 제출되어 피드백 화면으로 전환된다.
+- 입력 항 진행 상태는 progress 스타일로 표시한다. 선택 전에는 괄호 안 원래 항 값을 표시하고, 선택 후에는 고른 보기 값을 표시한다.
 - 선택된 보기 버튼은 `aria-pressed`로 표시한다.
 
 ### API / 백엔드

README.md

@@ -59,7 +59,7 @@
 - 괄호 종류는 현재 `()`만 선택 가능하고 `{}`, `[]`는 비활성화되어 있습니다.
 - 풀이 화면에서 두 항을 직접 숫자로 입력합니다.
   - 모든 항은 하나의 input에서 순서대로 입력하며, 첫째 항 Enter → 둘째 항 전환, 둘째 항 Enter → 제출.
-  - input 아래 항 버튼 그룹에서 현재 입력 중인 항을 표시하고, 버튼을 누르면 해당 항을 초기화해 다시 입력합니다.
+  - input 위 우상단의 progress 표시에서 각 항의 진행 상태를 보여줍니다. 입력 전에는 괄호 안 원래 항 값, 입력 중/입력 후에는 사용자가 입력한 값을 표시합니다.
   - 터치 환경에서는 커스텀 숫자 키패드(숫자, `+/-`, `.`, `⌫`, `↵`)가 표시되며, 정밀 포인터가 있는 환경(마우스/트랙패드)에서는 숨깁니다.
 
 ### 미지수 괄호 풀기 (`/variable-parentheses` → `/variable-parentheses/play`)
@@ -68,7 +68,8 @@
 - 풀이 화면에서 두 항을 보기 중에서 선택합니다.
   - 각 항의 보기는 정답 계수의 절대값을 기준으로 음수/양수 두 개를 제공합니다.
   - 첫째 항 선택 후 자동으로 둘째 항 보기로 focus가 이동합니다.
-  - 두 항 선택 완료 후 `정답 확인` 버튼이 활성화되며 버튼에 focus가 이동합니다.
+  - 둘째 항을 선택하면 별도 `정답 확인` 버튼 없이 즉시 피드백 화면으로 전환됩니다.
+  - 입력 항 progress 표시는 선택 전에는 괄호 안 원래 항 값, 선택 후에는 고른 보기 값을 표시합니다.
 
 ---
 

components/game/NumberAnswerForm.tsx

@@ -239,7 +239,9 @@ const NumberAnswerForm = forwardRef<
                   key={button.index}
                   className="min-w-0 flex-1"
                   aria-label={`${button.label} ${
-                    completed ? `입력값 ${button.value}` : "미입력"
+                    completed
+                      ? `입력값 ${button.value}`
+                      : `원래 항 ${displayValue}, 미입력`
                   }${selected ? ", 현재 입력 중" : ""}`}
                 >
                   <span

components/game/VariableChoiceAnswerForm.tsx

@@ -53,14 +53,18 @@ export default function VariableChoiceAnswerForm({
             const selected = activeTermIndex === index;
             const selectedChoice = getSelectedChoice(index as 0 | 1);
             const completed = choiceId !== null && selectedChoice !== null;
+            const statusLabel =
+              completed && selectedChoice
+                ? `선택값 ${selectedChoice.latex}`
+                : `원래 항 ${pendingChoiceLabels[index]}, 미선택`;
 
             return (
               <li
                 key={index}
                 className="min-w-0 flex-1"
-                aria-label={`${index + 1}항 ${
+                aria-label={`${index + 1}항 ${statusLabel}${
-                  completed ? "선택 완료" : "미선택"
+                  selected ? ", 현재 선택 중" : ""
-                }${selected ? ", 현재 선택 중" : ""}`}
+                }`}
               >
                 <span
                   className={`block truncate text-center text-xs font-bold ${