diff --git a/AGENTS.md b/AGENTS.md
index dfbbaf7..53082e9 100644
--- a/AGENTS.md
+++ b/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`으로 처리한다.
+- 정답·오답 피드백은 `계산식 = 내가 입력한 답` 형식으로 표시한다. 정답은 `○`, 오답은 붉은색 입력값과 `×`, 굵은 정답값을 함께 보여준다.
+- 최종 결과 화면은 지금까지 푼 문제를 `문제 = 내가 입력한 답` 형식으로 나열하고, 피드백 화면과 같은 정답·오답 색상 및 기호 규칙을 사용한다.
---
diff --git a/README.md b/README.md
index 0dd2159..416618e 100644
--- a/README.md
+++ b/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 싱글턴
diff --git a/components/game/AnswerResultLine.tsx b/components/game/AnswerResultLine.tsx
index 8e39e7f..9ca84f3 100644
--- a/components/game/AnswerResultLine.tsx
+++ b/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 (
=
-
-
-
+ {userAnswerContent ?? (
+
+
+
+ )}
{correct ? (
(
-
-
-
+ {correctAnswerContent ?? (
+
+
+
+ )}
)
diff --git a/components/game/ScoreSummary.tsx b/components/game/ScoreSummary.tsx
index be21e8f..2906343 100644
--- a/components/game/ScoreSummary.tsx
+++ b/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 (
+
+
+
+
+
+
+
+
+ );
+}
+
+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 (
+
+
+
+
+
+
+
+
+ );
+}
+
export default function ScoreSummary({
correctCount,
totalCount,
@@ -59,22 +102,20 @@ export default function ScoreSummary({
{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 (
{index + 1}.