리펙토링: 코드 최적화, 출력 양식 변경

AGENTS.md

@@ -85,6 +85,7 @@ prisma/
 ### 컴포넌트 배치
 
 - 게임 화면에서 재사용되는 입력, 피드백, 점수 요약, 진행 단계 UI는 `components/game/` 하위에 둔다.
+- 정답·오답 판정 라인처럼 피드백 화면과 결과 화면이 공유하는 표시는 `components/game/` 하위 공통 컴포넌트로 분리한다.
 - 수식 렌더링 전용 컴포넌트는 `components/math/` 하위에 둔다.
 - 라우트별 조립 컴포넌트(`PlayClient` 등)는 해당 `app/` 라우트 폴더에 둘 수 있다.
 
@@ -163,6 +164,8 @@ NEXTAUTH_SECRET=your-secret
 
 - 시작 화면은 문제 수 `[5] [10]` 선택 버튼 그룹을 제공하고 기본값은 `10`이다.
 - 문제 풀이 화면은 URL의 `count` 쿼리와 Zustand의 선택 문제 수를 동기화한다. 허용 문제 수는 `5`, `10`이며 유효하지 않은 값은 `10`으로 처리한다.
+- 정답·오답 피드백은 `계산식 = 내가 입력한 답` 형식으로 표시한다. 정답은 `○`, 오답은 붉은색 입력값과 `×`, 굵은 정답값을 함께 보여준다.
+- 최종 결과 화면은 지금까지 푼 문제를 `문제 = 내가 입력한 답` 형식으로 나열하고, 피드백 화면과 같은 정답·오답 색상 및 기호 규칙을 사용한다.
 
 ---
 

README.md

@@ -52,6 +52,10 @@
 - 문제 수 기본값은 10개이며, `/play?count=5` 또는 `/play?count=10`으로 선택값을 전달합니다.
 - 문제와 정답 수식은 KaTeX로 렌더링합니다.
 - 진행 단계는 현재 문제, 완료된 정답, 완료된 오답, 남은 문제를 구분해서 표시합니다.
+- 정답·오답 피드백은 각 항의 `계산식 = 내가 입력한 답` 형식으로 표시합니다.
+  - 정답 항목은 정답 색상 박스와 `○` 표시를 사용합니다.
+  - 오답 항목은 오답 색상 박스, 붉은색 입력값, `×`, 굵은 정답값을 함께 표시합니다.
+- 결과 화면은 지금까지 푼 문제를 `문제 = 내가 입력한 답` 형식으로 다시 보여주고, 정답·오답 표시 규칙을 피드백 화면과 공유합니다.
 - 키보드 흐름을 지원합니다.
   - 모든 항은 하나의 input group에서 순서대로 입력
   - 첫째 항 Enter → 같은 input group이 둘째 항 입력으로 전환
@@ -127,7 +131,7 @@ app/                        # Next.js App Router 루트
   page.tsx                  # 시작 화면
 components/
   math/                     # KaTeX 수식 컴포넌트
-  game/                     # 게임 UI 컴포넌트
+  game/                     # 게임 UI 컴포넌트, 피드백/결과 공통 표시 컴포넌트
 lib/
   engine/                   # 문제 생성 알고리즘 엔진
   prisma.ts                 # Prisma Client 싱글턴

components/game/AnswerResultLine.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import type { ReactNode } from "react";
 
 import KatexRenderer from "@/components/math/KatexRenderer";
@@ -10,6 +8,8 @@ interface AnswerResultLineProps {
   correctAnswerLatex: string;
   correct: boolean;
   prefix?: ReactNode;
+  userAnswerContent?: ReactNode;
+  correctAnswerContent?: ReactNode;
 }
 
 export default function AnswerResultLine({
@@ -18,6 +18,8 @@ export default function AnswerResultLine({
   correctAnswerLatex,
   correct,
   prefix,
+  userAnswerContent,
+  correctAnswerContent,
 }: AnswerResultLineProps) {
   return (
     <li
@@ -30,9 +32,11 @@ export default function AnswerResultLine({
       {prefix}
       <KatexRenderer latex={expressionLatex} output="mathml" />
       <span aria-hidden="true">=</span>
-      <span className={correct ? undefined : "text-red-700"}>
+      {userAnswerContent ?? (
-        <KatexRenderer latex={userAnswerLatex} output="mathml" />
+        <span className={correct ? undefined : "text-red-700"}>
-      </span>
+          <KatexRenderer latex={userAnswerLatex} output="mathml" />
+        </span>
+      )}
       {correct ? (
         <span
           aria-label="정답"
@@ -52,9 +56,11 @@ export default function AnswerResultLine({
           </span>
           <span className="text-slate-700">
             (
-            <span className="font-bold">
+            {correctAnswerContent ?? (
-              <KatexRenderer latex={correctAnswerLatex} output="mathml" />
+              <span className="font-bold">
-            </span>
+                <KatexRenderer latex={correctAnswerLatex} output="mathml" />
+              </span>
+            )}
             )
           </span>
         </>

components/game/ScoreSummary.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useEffect, useRef } from "react";
 
 import AnswerResultLine from "@/components/game/AnswerResultLine";
+import KatexRenderer from "@/components/math/KatexRenderer";
 import type { GradeResult, ParenthesisSignProblem } from "@/lib/engine/types";
 
 interface ScoreSummaryProps {
@@ -14,12 +15,54 @@ interface ScoreSummaryProps {
   onRestart: () => void;
 }
 
-function formatLatexTermPair(first: number, second: number) {
+function formatAnswerPairLatex(first: number, second: number) {
   const operator = second < 0 ? "-" : "+";
 
   return `${first} ${operator} ${Math.abs(second)}`;
 }
 
+function renderUserAnswerPair(result: GradeResult) {
+  const secondOperator = result.userAnswer[1] < 0 ? "-" : "+";
+  const firstCorrect = result.userAnswer[0] === result.correctAnswer[0];
+  const secondCorrect = result.userAnswer[1] === result.correctAnswer[1];
+
+  return (
+    <span className="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
+      <span className={firstCorrect ? undefined : "text-red-700"}>
+        <KatexRenderer latex={`${result.userAnswer[0]}`} output="mathml" />
+      </span>
+      <span className={secondCorrect ? undefined : "text-red-700"}>
+        <KatexRenderer
+          latex={`${secondOperator} ${Math.abs(result.userAnswer[1])}`}
+          output="mathml"
+        />
+      </span>
+    </span>
+  );
+}
+
+function renderCorrectAnswerPair(result: GradeResult) {
+  const secondOperator = result.correctAnswer[1] < 0 ? "-" : "+";
+  const firstCorrect = result.userAnswer[0] === result.correctAnswer[0];
+  const secondCorrect = result.userAnswer[1] === result.correctAnswer[1];
+
+  return (
+    <span className="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
+      <span className={firstCorrect ? undefined : "font-bold text-blue-700"}>
+        <KatexRenderer latex={`${result.correctAnswer[0]}`} output="mathml" />
+      </span>
+      <span
+        className={secondCorrect ? undefined : "font-bold text-blue-700"}
+      >
+        <KatexRenderer
+          latex={`${secondOperator} ${Math.abs(result.correctAnswer[1])}`}
+          output="mathml"
+        />
+      </span>
+    </span>
+  );
+}
+
 export default function ScoreSummary({
   correctCount,
   totalCount,
@@ -59,22 +102,20 @@ export default function ScoreSummary({
 
         <ol className="space-y-3">
           {solvedItems.map(({ problem, result }, index) => {
-            const userAnswerLatex = formatLatexTermPair(
+            const userAnswerLatex = formatAnswerPairLatex(
               result.userAnswer[0],
               result.userAnswer[1],
             );
-            const correctAnswerLatex = formatLatexTermPair(
-              result.correctAnswer[0],
-              result.correctAnswer[1],
-            );
 
             return (
               <AnswerResultLine
                 key={problem.key}
                 expressionLatex={problem.latexBefore}
                 userAnswerLatex={userAnswerLatex}
-                correctAnswerLatex={correctAnswerLatex}
+                correctAnswerLatex={problem.latexAfter}
                 correct={result.correct}
+                userAnswerContent={renderUserAnswerPair(result)}
+                correctAnswerContent={renderCorrectAnswerPair(result)}
                 prefix={
                   <span className="mr-1 text-sm font-bold text-slate-500">
                     {index + 1}.