숫자 괄호 학습 준비의 play 폴더 위치 변경

This commit is contained in:
2026-05-30 17:16:53 +09:00
parent f3d051cdd1
commit e0d8fc19d5
5 changed files with 17 additions and 13 deletions
+4 -4
View File
@@ -35,10 +35,10 @@ AI 에이전트(Claude Code 등)가 이 프로젝트에서 작업할 때 따라
app/ # Next.js App Router 루트
(game)/ # 게임 화면 라우트 그룹
number-parentheses/ # 숫자 괄호 준비 화면
play/ # 숫자 괄호 풀이 화면
variable-parentheses/ # 미지수 괄호 준비 화면
play/ # 미지수 괄호 풀이 화면
select-mode/ # 게임 모드 선택 (미구현)
play/ # 숫자 괄호 풀이 화면
api/
auth/ # NextAuth.js 핸들러
problem/ # 문제 생성 API
@@ -95,7 +95,7 @@ prisma/
- 게임 화면에서 재사용되는 입력, 피드백, 점수 요약, 진행 단계 UI는 `components/game/` 하위에 둔다.
- 정답·오답 판정 라인처럼 피드백 화면과 결과 화면이 공유하는 표시는 `components/game/` 하위 공통 컴포넌트로 분리한다.
- 수식 렌더링 전용 컴포넌트는 `components/math/` 하위에 둔다.
- 라우트별 조립 컴포넌트(`PlayClient`, `NumberParenthesesClient` 등)는 해당 `app/` 라우트 폴더에 둘 수 있다.
- 라우트별 조립 컴포넌트(`NumberPlayClient`, `NumberParenthesesClient` 등)는 해당 `app/` 라우트 폴더에 둘 수 있다.
### 접근성 / 키보드 조작
@@ -104,7 +104,7 @@ prisma/
- 최종 결과 화면이 표시되면 다시 시작 버튼에 focus를 둔다.
- 아이콘이나 기호만으로 상태를 표시할 때는 `aria-label`, `sr-only` 텍스트 등으로 의미를 함께 제공한다.
#### 숫자 괄호 풀이 화면 (`/play`)
#### 숫자 괄호 풀이 화면 (`/number-parentheses/play`)
- 모든 항을 하나의 공유 input으로 입력한다.
- input 아래에는 각 항의 입력값 버튼을 버튼 그룹으로 표시한다. 현재 입력 중인 항은 `aria-pressed`로 표시하고, 비어 있는 항은 `?`로 표시한다.
@@ -173,7 +173,7 @@ NEXTAUTH_SECRET=your-secret
| 유형 | 상태 | 라우트 | 답변 방식 |
|---|---|---|---|
| 숫자 괄호 풀기 | 구현 완료 | `/number-parentheses``/play` | 직접 입력 |
| 숫자 괄호 풀기 | 구현 완료 | `/number-parentheses``/number-parentheses/play` | 직접 입력 |
| 미지수 괄호 풀기 | 구현 완료 | `/variable-parentheses``/variable-parentheses/play` | 보기 선택 |
| 분수 괄호 풀기 | 미구현 | — | — |
| 실수 괄호 풀기 | 미구현 | — | — |
+2 -2
View File
@@ -53,7 +53,7 @@
- 결과 화면은 전체 문제를 `문제 = 내가 입력한(고른) 답` 형식으로 나열하며, 피드백과 같은 색상·기호 규칙을 사용합니다.
- 피드백 화면 진입 시 다음 진행 버튼에, 결과 화면 진입 시 다시 시작 버튼에 자동으로 focus가 이동합니다.
### 숫자 괄호 풀기 (`/number-parentheses` → `/play`)
### 숫자 괄호 풀기 (`/number-parentheses` → `/number-parentheses/play`)
- 준비 화면에서 문제 수 5 / 10을 선택하고 연습을 시작합니다. 기본값은 10.
- 괄호 종류는 현재 `()`만 선택 가능하고 `{}`, `[]`는 비활성화되어 있습니다.
@@ -125,9 +125,9 @@ pnpm start
app/ # Next.js App Router 루트
(game)/ # 게임 화면 라우트 그룹
number-parentheses/ # 숫자 괄호 준비 화면
play/ # 숫자 괄호 풀이 화면
variable-parentheses/ # 미지수 괄호 준비 화면
play/ # 미지수 괄호 풀이 화면
play/ # 숫자 괄호 풀이 화면
api/
auth/ # NextAuth.js 핸들러
problem/ # 문제 생성 API
@@ -124,7 +124,7 @@ export default function NumberParenthesesClient() {
<div>
<Link
ref={startLinkRef}
href={`/play?count=${selectedProblemCount}`}
href={`/number-parentheses/play?count=${selectedProblemCount}`}
onClick={() => initSession(selectedProblemCount)}
className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
>
@@ -27,11 +27,13 @@ function parseAnswer(value: string) {
return Number(trimmed);
}
interface PlayClientProps {
interface NumberPlayClientProps {
problemCount: ProblemCount;
}
export default function PlayClient({ problemCount }: PlayClientProps) {
export default function NumberPlayClient({
problemCount,
}: NumberPlayClientProps) {
const session = useGameStore((state) => state.session);
const selectedProblemCount = useGameStore(
(state) => state.selectedProblemCount,
@@ -1,7 +1,7 @@
import PlayClient from "./PlayClient";
import NumberPlayClient from "./NumberPlayClient";
import type { ProblemCount } from "@/store/gameStore";
interface PlayPageProps {
interface NumberPlayPageProps {
searchParams?: {
count?: string | string[];
};
@@ -15,6 +15,8 @@ function parseProblemCount(count?: string | string[]): ProblemCount {
return count === "5" ? 5 : 10;
}
export default function PlayPage({ searchParams }: PlayPageProps) {
return <PlayClient problemCount={parseProblemCount(searchParams?.count)} />;
export default function NumberPlayPage({ searchParams }: NumberPlayPageProps) {
return (
<NumberPlayClient problemCount={parseProblemCount(searchParams?.count)} />
);
}