Store user's name using sessionStorage

src/pages/conversationPage.jsx

@@ -8,6 +8,12 @@ import Animation from './components/animation.jsx';
 
 function ConversationPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
+  const [name] = useState(() => {
+    return sessionStorage.getItem("name") || '';
+  });
+
+  const DialogText = data.text.replace("{name}", name);
+  const DialogName = data.name.replace("{name}", name);
 
   return (
     <div
@@ -29,11 +35,11 @@ function ConversationPage({data , onClicked}) {
       </div>
       <div style={{width:'60vw'}}>
         <div className='nameBox title'>
-          {data.name}
+          {DialogName}
         </div>
       </div>
       <div className='textBox title' style={{overflow: 'scroll',}}>
-        {data.text}
+        {DialogText}
       </div>
     </div>
   );

src/pages/namePage.jsx

@@ -1,10 +1,16 @@
 import '../css/global.css'
 import '../css/customInput.css'
 import BlackButton from './components/customButton'
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 function NamePage() {
-    const [name, setName] = useState('');
+    const [name, setName] = useState(() => {
+        return sessionStorage.getItem("name") || '';
+    });
+
+    useEffect(() => {
+        sessionStorage.setItem("name", name);
+    }, [name]);
 
     return (
         <div style={{

src/pages/storyPage.jsx

@@ -5,6 +5,11 @@ import '../css/textBox.css';
 
 function StoryPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
+  const [name] = useState(() => {
+    return sessionStorage.getItem("name") || '';
+  });
+
+  const DialogText = data.text.replace("{name}", name);
 
   return (
     <div
@@ -22,7 +27,7 @@ function StoryPage({data , onClicked}) {
       }}
     >
       <div className='textBox title' style={{marginTop: '50vh', overflow: 'scroll',}}>
-        {data.text}
+        {DialogText}
       </div>
     </div>
   );