jisangs/math-quiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jisang Park
2026-05-26 18:39:50 +09:00
parent 2427b458dc
commit 98dd5d319c
4 changed files with 70 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
+3
View File
@@ -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
+5 -1
View File
@@ -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
+8 -2
View File
@@ -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>
{userAnswerContent ?? (
<span className={correct ? undefined : "text-red-700"}>
<KatexRenderer latex={userAnswerLatex} output="mathml" />
</span>
)}
{correct ? (
<span
aria-label="정답"
@@ -52,9 +56,11 @@ export default function AnswerResultLine({
</span>
<span className="text-slate-700">
(
{correctAnswerContent ?? (
<span className="font-bold">
<KatexRenderer latex={correctAnswerLatex} output="mathml" />
</span>
)}
)
</span>
</>
components/game/ScoreSummary.tsx
+48 -7
View File
@@ -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}.