From e148a957eaaf65a8d85fc03c0606fc5a05400020 Mon Sep 17 00:00:00 2001 From: jisangs Date: Sun, 31 May 2026 13:14:33 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A6=AC=ED=8E=99=ED=86=A0=EB=A7=81:=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=EC=A4=80=EB=B9=84=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=9A=94=EC=86=8C=20=EB=AC=B6=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NumberParenthesesClient.tsx | 145 ++-------------- .../VariableParenthesesClient.tsx | 149 ++-------------- .../game/ParenthesesPreparationClient.tsx | 161 ++++++++++++++++++ 3 files changed, 184 insertions(+), 271 deletions(-) create mode 100644 components/game/ParenthesesPreparationClient.tsx diff --git a/app/(game)/number-parentheses/NumberParenthesesClient.tsx b/app/(game)/number-parentheses/NumberParenthesesClient.tsx index a616002..71b4ae2 100644 --- a/app/(game)/number-parentheses/NumberParenthesesClient.tsx +++ b/app/(game)/number-parentheses/NumberParenthesesClient.tsx @@ -1,148 +1,25 @@ "use client"; -import Link from "next/link"; -import { useEffect, useRef } from "react"; - +import ParenthesesPreparationClient from "@/components/game/ParenthesesPreparationClient"; import { useGameStore } from "@/store/gameStore"; -import type { ProblemCount } from "@/store/gameStore"; - -const problemCounts: ProblemCount[] = [5, 10]; - -const bracketKinds = [ - { - label: "()", - name: "소괄호", - selected: true, - disabled: false, - }, - { - label: "{}", - name: "중괄호", - selected: false, - disabled: true, - }, - { - label: "[]", - name: "대괄호", - selected: false, - disabled: true, - }, -]; export default function NumberParenthesesClient() { - const startLinkRef = useRef(null); const selectedProblemCount = useGameStore( (state) => state.selectedProblemCount, ); const setProblemCount = useGameStore((state) => state.setProblemCount); const initSession = useGameStore((state) => state.initSession); - useEffect(() => { - startLinkRef.current?.focus(); - }, []); - return ( -
-
-
-

- 숫자 괄호 학습 준비 -

-

- 숫자 괄호 풀기 -

-

- 정수로 이루어진 괄호식을 풀며 음수 분배와 부호 변화를 - 연습합니다. -

-
- -
-
- - 문제 수 - -
- {problemCounts.map((count) => { - const selected = selectedProblemCount === count; - - return ( - - ); - })} -
-
- -
- - 괄호 종류 - -
- {bracketKinds.map((bracketKind) => ( - - ))} -
-
- -
- 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" - > - 연습 시작 - - - 뒤로가기 - -
-
- -
-

현재는 소괄호 숫자 문제만 선택할 수 있습니다.

-
-
-
+ initSession(selectedProblemCount)} + /> ); } diff --git a/app/(game)/variable-parentheses/VariableParenthesesClient.tsx b/app/(game)/variable-parentheses/VariableParenthesesClient.tsx index 18e26cb..0041a82 100644 --- a/app/(game)/variable-parentheses/VariableParenthesesClient.tsx +++ b/app/(game)/variable-parentheses/VariableParenthesesClient.tsx @@ -1,38 +1,9 @@ "use client"; -import Link from "next/link"; -import { useEffect, useRef } from "react"; - -import { - useVariableGameStore, - type VariableProblemCount, -} from "@/store/variableGameStore"; - -const problemCounts: VariableProblemCount[] = [5, 10]; - -const bracketKinds = [ - { - label: "()", - name: "소괄호", - selected: true, - disabled: false, - }, - { - label: "{}", - name: "중괄호", - selected: false, - disabled: true, - }, - { - label: "[]", - name: "대괄호", - selected: false, - disabled: true, - }, -]; +import ParenthesesPreparationClient from "@/components/game/ParenthesesPreparationClient"; +import { useVariableGameStore } from "@/store/variableGameStore"; export default function VariableParenthesesClient() { - const startLinkRef = useRef(null); const selectedProblemCount = useVariableGameStore( (state) => state.selectedProblemCount, ); @@ -41,112 +12,16 @@ export default function VariableParenthesesClient() { ); const initSession = useVariableGameStore((state) => state.initSession); - useEffect(() => { - startLinkRef.current?.focus(); - }, []); - return ( -
-
-
-

- 미지수 괄호 학습 준비 -

-

- 미지수 괄호 풀기 -

-

- 괄호 안의 한 항에 미지수 x가 들어간 식을 풀며 부호 변화를 - 연습합니다. -

-
- -
-
- - 문제 수 - -
- {problemCounts.map((count) => { - const selected = selectedProblemCount === count; - - return ( - - ); - })} -
-
- -
- - 괄호 종류 - -
- {bracketKinds.map((bracketKind) => ( - - ))} -
-
- -
- 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" - > - 연습 시작 - - - 뒤로가기 - -
-
- -
-

현재는 소괄호와 미지수 x 문제만 선택할 수 있습니다.

-
-
-
+ initSession(selectedProblemCount)} + /> ); } diff --git a/components/game/ParenthesesPreparationClient.tsx b/components/game/ParenthesesPreparationClient.tsx new file mode 100644 index 0000000..69a1877 --- /dev/null +++ b/components/game/ParenthesesPreparationClient.tsx @@ -0,0 +1,161 @@ +"use client"; + +import Link from "next/link"; +import { useEffect, useRef } from "react"; + +export type PreparationProblemCount = 5 | 10; + +interface ParenthesesPreparationClientProps { + eyebrow: string; + title: string; + description: string; + notice: string; + playHref: string; + selectedProblemCount: PreparationProblemCount; + onProblemCountChange: (count: PreparationProblemCount) => void; + onStart: () => void; +} + +const problemCounts: PreparationProblemCount[] = [5, 10]; + +const bracketKinds = [ + { + label: "( )", + name: "소괄호", + selected: true, + disabled: false, + }, + { + label: "{ }", + name: "중괄호", + selected: false, + disabled: true, + }, + { + label: "[ ]", + name: "대괄호", + selected: false, + disabled: true, + }, +]; + +export default function ParenthesesPreparationClient({ + eyebrow, + title, + description, + notice, + playHref, + selectedProblemCount, + onProblemCountChange, + onStart, +}: ParenthesesPreparationClientProps) { + const startLinkRef = useRef(null); + + useEffect(() => { + startLinkRef.current?.focus(); + }, []); + + return ( +
+
+
+

{eyebrow}

+

+ {title} +

+

+ {description} +

+
+ +
+
+ + 문제 수 + +
+ {problemCounts.map((count) => { + const selected = selectedProblemCount === count; + + return ( + + ); + })} +
+
+ +
+ + 괄호 종류 + +
+ {bracketKinds.map((bracketKind) => ( + + ))} +
+
+ +
+ + 연습 시작 + + + 뒤로가기 + +
+
+ +
+

{notice}

+
+
+
+ ); +}