From 98dd5d319cbeea5929f4f1546de55c45e12c095e Mon Sep 17 00:00:00 2001 From: jisangs Date: Tue, 26 May 2026 18:39:50 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A6=AC=ED=8E=99=ED=86=A0=EB=A7=81:=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=B5=9C=EC=A0=81=ED=99=94,=20=EC=B6=9C?= =?UTF-8?q?=EB=A0=A5=20=EC=96=91=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AGENTS.md | 3 ++ README.md | 6 ++- components/game/AnswerResultLine.tsx | 22 +++++++---- components/game/ScoreSummary.tsx | 55 ++++++++++++++++++++++++---- 4 files changed, 70 insertions(+), 16 deletions(-) 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}.