move step components

app/level/[level]/round/[round]/Step.tsx

@@ -1,7 +1,7 @@
-import { LearnCharacterStepContent } from "./LearnCharacterStepContent"
-import { InfoStepContent } from "./InfoStepContent"
-import { CharacterQuizChoiceStepContent } from "./CharacterQuizChoiceStepContent"
-import { KeywordChallengeStepContent } from "./KeywordChallengeStepContent"
+import { LearnCharacter } from "@/components/Steps/LearnCharacter"
+import { Info } from "@/components/Steps/Info"
+import { CharacterQuizChoice } from "@/components/Steps/CharacterQuizChoice"
+import { KeywordChallenge } from "@/components/Steps/KeywordChallenge"
 import { observer } from "mobx-react-lite"
 import { useLevelStore } from "@/store/LevelStore"
 import { AnimatePresence } from "framer-motion"
@@ -12,40 +12,25 @@ const StepContent = observer(function StepContent() {
 
     switch (step.type) {
         case StepType.INFO:
-            return <InfoStepContent step={step} key={StepType.INFO} />
+            return <Info step={step} />
         case StepType.KANA_LEARN:
-            return (
-                <LearnCharacterStepContent
-                    step={step}
-                    key={StepType.KANA_LEARN}
-                />
-            )
+            return <LearnCharacter step={step} />
         case StepType.KANA_QUIZ_CHOICE:
-            return (
-                <CharacterQuizChoiceStepContent
-                    step={step}
-                    key={StepType.KANA_QUIZ_CHOICE}
-                />
-            )
+            return <CharacterQuizChoice step={step} />
         case StepType.KEYWORD_CHALLENGE:
-            return (
-                <KeywordChallengeStepContent
-                    step={step}
-                    key={StepType.KEYWORD_CHALLENGE}
-                />
-            )
+            return <KeywordChallenge step={step} />
         default:
             return null
     }
 })
 
 export const Step = () => {
-    const { nextStep } = useLevelStore()
+    const { nextStep, uniqueStepKey } = useLevelStore()
 
     return (
         <form onSubmit={() => nextStep()}>
             <AnimatePresence mode="wait">
-                <StepContent />
+                <StepContent key={uniqueStepKey} />
             </AnimatePresence>
         </form>
     )

app/level/[level]/round/[round]/CharacterQuizChoiceStepContent.tsx → components/Steps/CharacterQuizChoice.tsx

@@ -16,7 +16,7 @@ const Answer = {
 
 type Choice = (typeof Answer)[keyof typeof Answer]
 
-export const CharacterQuizChoiceStepContent = ({
+export const CharacterQuizChoice = ({
     step,
 }: CharacterQuizChoiceStepContentProps) => {
     const { nextStep } = useLevelStore()

app/level/[level]/round/[round]/InfoStepContent.tsx → components/Steps/Info.tsx

@@ -5,7 +5,7 @@ type InfoStepContentProps = {
     step: InfoStep
 }
 
-export const InfoStepContent = ({ step }: InfoStepContentProps) => {
+export const Info = ({ step }: InfoStepContentProps) => {
     return (
         <div className="flex flex-col gap-2">
             <h2 className="text-xl font-bold">{step.title}</h2>

app/level/[level]/round/[round]/KeywordChallengeStepContent.test.tsx → components/Steps/KeywordChallenge.test.tsx

@@ -1,12 +1,12 @@
 import { renderWithContext } from "@/test-utils/renderWithContext"
-import { KeywordChallengeStepContent } from "./KeywordChallengeStepContent"
+import { KeywordChallenge } from "./KeywordChallenge"
 import { StepType } from "@/data/levels"
 
 describe("KeywordChallengeStepContent", () => {
     it("should render successfully", () => {
         expect(() => {
             renderWithContext(
-                <KeywordChallengeStepContent
+                <KeywordChallenge
                     step={{
                         type: StepType.KEYWORD_CHALLENGE,
                         keyword: "うえ",

app/level/[level]/round/[round]/KeywordChallengeStepContent.tsx → components/Steps/KeywordChallenge.tsx

@@ -7,7 +7,7 @@ type KeywordChallengeStepContentProps = {
     step: KeywordChallengeStep
 }
 
-export const KeywordChallengeStepContent = ({
+export const KeywordChallenge = ({
     step,
 }: KeywordChallengeStepContentProps) => {
     const [inputValue, setInputValue] = useState<string>("")

app/level/[level]/round/[round]/LearnCharacterStepContent.tsx → components/Steps/LearnCharacter.tsx

@@ -6,9 +6,7 @@ type LearnCharacterStepContentProps = {
     step: LearnCharacterStep
 }
 
-export const LearnCharacterStepContent = ({
-    step,
-}: LearnCharacterStepContentProps) => {
+export const LearnCharacter = ({ step }: LearnCharacterStepContentProps) => {
     return (
         <div className="flex flex-col gap-4 mt-8">
             <CharacterDisplay

store/LevelStore.tsx

@@ -34,6 +34,11 @@ const LevelStore = types
             return this.round.steps[self.stepIndex]
         },
     }))
+    .views((self) => ({
+        get uniqueStepKey() {
+            return `${self.levelIndex}-${self.roundIndex}-${self.stepIndex}`
+        },
+    }))
     .actions((self) => ({
         nextStep() {
             if (self.stepIndex >= self.round.steps.length - 1) return