From 06c6aff917901f725f27a8f1ba17e75299937cab Mon Sep 17 00:00:00 2001
From: SEUNGHWA LEE <sw092311@cau.ac.kr>
Date: Thu, 3 Apr 2025 15:59:37 +0900
Subject: [PATCH 1/3] =?UTF-8?q?MicButton=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MicButton.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/components/MicButton.js

diff --git a/src/components/MicButton.js b/src/components/MicButton.js
new file mode 100644
index 0000000..d1a8f0d
--- /dev/null
+++ b/src/components/MicButton.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+const MicButton = ({onClick}) => {
+    return (
+        <button onClick={onClick} style={styles.micButton}>
+            <img src="/images/mic_icon.png" alt="Mic Icon" style={styles.micIcon} />
+        </button>
+    );
+};
+
+const styles = {
+    micButton: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        marginBottom: "20px",
+    },
+    micIcon: {
+        width: "60px",
+        height: "60px",
+    },
+};
+
+export default MicButton;
\ No newline at end of file

From 4defcf7e718baa916d748318fd601ef03a803625 Mon Sep 17 00:00:00 2001
From: SEUNGHWA LEE <sw092311@cau.ac.kr>
Date: Thu, 3 Apr 2025 16:11:14 +0900
Subject: [PATCH 2/3] =?UTF-8?q?VoiceTrainingPage=20=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SignupPage.js        |  3 +-
 src/pages/VoiceTrainingPage.js | 78 ++++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/VoiceTrainingPage.js

diff --git a/src/pages/SignupPage.js b/src/pages/SignupPage.js
index bfd40f1..2991c51 100644
--- a/src/pages/SignupPage.js
+++ b/src/pages/SignupPage.js
@@ -4,6 +4,7 @@ import Button from "../components/Button";
 import Logo from "../components/Logo";
 
 const SignupPage = () => {
+    const navigate = useNavigate();
     return(
         <div style={styles.container}>
             <Logo />
@@ -14,7 +15,7 @@ const SignupPage = () => {
             <input style={styles.input} placeholder="피보호자 이름을 입력하세요."/>
             <input style={styles.input} placeholder="피보호자 생일을 6글자로 입력하세요."/>
 
-            <Button text="넘어가기" color="#DABEC9" />
+            <Button text="넘어가기" color="#DABEC9" onClick={() => navigate("/voice-training")} />
         </div>
     );
 };
diff --git a/src/pages/VoiceTrainingPage.js b/src/pages/VoiceTrainingPage.js
new file mode 100644
index 0000000..be90e5f
--- /dev/null
+++ b/src/pages/VoiceTrainingPage.js
@@ -0,0 +1,78 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import MicButton from "../components/MicButton";
+import Logo from "../components/Logo";
+
+const VoiceTrainingPage = () => {
+    const navigate = useNavigate();
+
+    return (
+        <div style={styles.container}>
+            <Logo />
+            <h2 style={styles.title}>목소리를 학습하겠습니다.</h2>
+            <p style={styles.subtilte}>(아래의 마이크 버튼을 누르고 텍스트를 읽어주세요.)</p>
+
+            <div style={styles.memoContainer}>
+                <img src="/images/memo_background.png" alt="Memo" style={styles.memoImage}/>
+                <p style = {styles.memoText}>
+                    안촉촉한 초코칩 나라에 살던 안촉촉한 초코칩이 초초초초초초콬초코촠칩.. 아직 미정이에유.. 텍스트 분석하기 좋은 글들을 넣어봅시다. 
+                </p>
+            </div>
+
+            <MicButton />
+
+            <button style={styles.nextButton} onlick={() => navigate("/")}>
+                넘어가기
+            </button>
+        </div>
+    );
+};
+
+const styles = {
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent : "center",
+        hegith : "100vh",
+        backgroundColor : "#F8EAD2",
+    },
+    title: {
+        fontSize: "20px",
+        fontWeight: "bold",
+    },
+    subtitle: {
+        fontSize: "14px",
+        color: "#555",
+        marginBottom: "20px",
+    },
+    memoContainer: {
+        position: "relative",
+        width: "250px",
+        height: "200px",
+        marginBottom: "20px",
+    },
+    memoImage: {
+        width : "100%",
+        height : "100%",
+        objectFit : "cover",
+    },
+    memoText: {
+        position: "absolute",
+        top: "20px",
+        left: "20px",
+        right: "20px",
+        fontSize: "14px",
+        textAlign : "center",
+        lineHeight : "1.5",
+        fontWeight : "bold",
+    },
+    nextButton: {
+        backgroundColor : "#DABEC9",
+        border: "none",
+        padding: "10px 20px",
+        borderRadius: "8px",
+        fontSize: "16px",
+        cursor: "pointer",
+    },
+};
\ No newline at end of file

From 3753784ca08f0a437432274002d121f99ec80270 Mon Sep 17 00:00:00 2001
From: SEUNGHWA LEE <sw092311@cau.ac.kr>
Date: Thu, 3 Apr 2025 16:17:15 +0900
Subject: [PATCH 3/3] =?UTF-8?q?VoicePage=20=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/VoiceTrainingPage.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/VoiceTrainingPage.js b/src/pages/VoiceTrainingPage.js
index be90e5f..517892c 100644
--- a/src/pages/VoiceTrainingPage.js
+++ b/src/pages/VoiceTrainingPage.js
@@ -10,7 +10,7 @@ const VoiceTrainingPage = () => {
         <div style={styles.container}>
             <Logo />
             <h2 style={styles.title}>목소리를 학습하겠습니다.</h2>
-            <p style={styles.subtilte}>(아래의 마이크 버튼을 누르고 텍스트를 읽어주세요.)</p>
+            <p style={styles.subtitle}>(아래의 마이크 버튼을 누르고 텍스트를 읽어주세요.)</p>
 
             <div style={styles.memoContainer}>
                 <img src="/images/memo_background.png" alt="Memo" style={styles.memoImage}/>
@@ -21,7 +21,7 @@ const VoiceTrainingPage = () => {
 
             <MicButton />
 
-            <button style={styles.nextButton} onlick={() => navigate("/")}>
+            <button style={styles.nextButton} onClick={() => navigate("/")}>
                 넘어가기
             </button>
         </div>
@@ -34,7 +34,7 @@ const styles = {
         flexDirection: "column",
         alignItems: "center",
         justifyContent : "center",
-        hegith : "100vh",
+        minHeight : "100vh",
         backgroundColor : "#F8EAD2",
     },
     title: {
@@ -75,4 +75,6 @@ const styles = {
         fontSize: "16px",
         cursor: "pointer",
     },
-};
\ No newline at end of file
+};
+
+export default VoiceTrainingPage;
\ No newline at end of file