diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js new file mode 100644 index 0000000..bf92db7 --- /dev/null +++ b/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 ( +
+
+ +
+
+ + +
+
+ ); +}; + +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; \ No newline at end of file diff --git a/src/pages/ReportsPage.js b/src/pages/ReportsPage.js new file mode 100644 index 0000000..2f1f916 --- /dev/null +++ b/src/pages/ReportsPage.js @@ -0,0 +1,80 @@ +import React from "react"; +import Logo from "../components/Logo"; + +const ReportsPage = () => { + return ( +
+
+ +

몇월 몇주차 리포트입니다.

+
+ +
+

+ 리포트 내용 +

+
+ +
+

감정 분석 결과 이미지가 여기에 표시됩니다.

+
+
+ ); +}; + +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; \ No newline at end of file diff --git a/src/pages/VoiceTrainingPage.js b/src/pages/VoiceTrainingPage.js index 5a40422..3eefa4f 100644 --- a/src/pages/VoiceTrainingPage.js +++ b/src/pages/VoiceTrainingPage.js @@ -14,9 +14,13 @@ const VoiceTrainingPage = () => {
Memo -

- 안촉촉한 초코칩 나라에 살던 안촉촉한 초코칩이 초초초초초초콬초코촠칩.. 아직 미정이에유.. 텍스트 분석하기 좋은 글들을 넣어봅시다. -

+
+

오늘 하루는 어땠나요? 기분이 괜찮으신가요?

+

밖에 나가서 산책도 하셨어요?

+

식사는 잘 챙기셨는지 궁금합니다.

+

약은 꼭 챙겨드셔야 해요. 잊지 마세요.

+

목소리를 들으니 안심이 됩니다.

+
@@ -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",