Feat/report page

src/pages/HomePage.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import Logo from "../components/Logo"; // 올바른 경로
+
+const HomePage = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.logoWrapper}>
+        <Logo />
+      </div>
+      <div style={styles.buttonContainer}>
+        <button style={styles.button} onClick={() => navigate("/reports")}>
+          리포트 확인하기
+        </button>
+        <button style={styles.button} onClick={() => navigate("/keywords")}>
+          키워드 보기
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    backgroundColor: "#F8EAD2",
+    height: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center", // 수직 가운데
+    alignItems: "center",     // 수평 가운데
+    padding: "20px",
+  },
+  logoWrapper: {
+    marginBottom: "40px",
+  },
+  buttonContainer: {
+    display: "flex",
+    gap: "30px",
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  button: {
+    width: "140px",
+    height: "100px",
+    fontSize: "16px",
+    border: "1px solid #555",
+    borderRadius: "20px",
+    backgroundColor: "#FFF",
+    cursor: "pointer",
+    boxShadow: "2px 2px 5px rgba(0,0,0,0.2)",
+  },
+};
+
+export default HomePage;

src/pages/ReportsPage.js

@@ -0,0 +1,80 @@
+import React from "react";
+import Logo from "../components/Logo";
+
+const ReportsPage = () => {
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <Logo />
+        <h2 style={styles.title}>몇월 몇주차 리포트입니다.</h2>
+      </div>
+
+      <div style={styles.reportBox}>
+        <p style={styles.reportText}>
+            리포트 내용
+        </p>
+      </div>
+
+      <div style={styles.imagePlaceholder}>
+        <p style={styles.placeholderText}>감정 분석 결과 이미지가 여기에 표시됩니다.</p>
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    backgroundColor: "#F8EAD2",
+    minHeight: "100vh",
+    padding: "30px",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  header: {
+    width: "100%",
+    maxWidth: "500px",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "20px",
+  },
+  title: {
+    fontSize: "18px",
+    fontWeight: "bold",
+    color: "#1C2C5B",
+  },
+  reportBox: {
+    width: "100%",
+    maxWidth: "500px",
+    backgroundColor: "#F8EAD2",
+    border: "1px solid #888",
+    borderRadius: "12px",
+    padding: "20px",
+    marginBottom: "30px",
+    maxHeight: "250px",        
+    overflowY: "auto",         
+    boxSizing: "border-box",   
+  },
+  reportText: {
+    fontSize: "15px",
+    color: "#444",
+  },
+  imagePlaceholder: {
+    width: "100%",
+    maxWidth: "500px",
+    height: "300px",
+    backgroundColor: "#FFF",
+    border: "1px solid #ccc",
+    borderRadius: "10px",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  placeholderText: {
+    color: "#999",
+    fontStyle: "italic",
+  },
+};
+
+export default ReportsPage;

src/pages/VoiceTrainingPage.js

@@ -14,9 +14,13 @@ const VoiceTrainingPage = () => {
 
             <div style={styles.memoContainer}>
                 <img src="/images/memo_background.png" alt="Memo" style={styles.memoImage}/>
-                <p style = {styles.memoText}>
-                    안촉촉한 초코칩 나라에 살던 안촉촉한 초코칩이 초초초초초초콬초코촠칩.. 아직 미정이에유.. 텍스트 분석하기 좋은 글들을 넣어봅시다. 
-                </p>
+                <div style={styles.memoText}>
+                    <p>오늘 하루는 어땠나요? 기분이 괜찮으신가요?</p>
+                    <p>밖에 나가서 산책도 하셨어요?</p>
+                    <p>식사는 잘 챙기셨는지 궁금합니다.</p>
+                    <p>약은 꼭 챙겨드셔야 해요. 잊지 마세요.</p>
+                    <p>목소리를 들으니 안심이 됩니다.</p>
+                </div>
             </div>
 
             <MicButton />
@@ -48,25 +52,25 @@ const styles = {
     },
     memoContainer: {
         position: "relative",
-        width: "250px",
-        height: "200px",
+        width: "300px",  // 너비 약간 키움
+        padding: "20px", // 내부 여백
+        backgroundImage: "url('/images/memo_background.png')",
+        backgroundSize: "cover",
+        backgroundRepeat: "no-repeat",
         marginBottom: "20px",
-    },
-    memoImage: {
-        width : "100%",
-        height : "100%",
-        objectFit : "cover",
-    },
-    memoText: {
-        position: "absolute",
-        top: "20px",
-        left: "20px",
-        right: "20px",
+        borderRadius: "10px",
+      },
+
+      memoImage: {
+        display: "none", // 안 써도 됨 (backgroundImage로 대체했기 때문)
+      },
+
+      memoText: {
         fontSize: "14px",
-        textAlign : "center",
-        lineHeight : "1.5",
-        fontWeight : "bold",
-    },
+        lineHeight: "1.6",
+        fontWeight: "bold",
+        textAlign: "left",
+      },
     nextButton: {
         backgroundColor : "#DABEC9",
         border: "none",