diff --git a/src/pages/KeywordSelectionPage.js b/src/pages/KeywordSelectionPage.js
new file mode 100644
index 0000000..48aa886
--- /dev/null
+++ b/src/pages/KeywordSelectionPage.js
@@ -0,0 +1,238 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import TimePicker from "react-time-picker";
+import "react-time-picker/dist/TimePicker.css";
+import "react-clock/dist/Clock.css";
+import Logo from "../components/Logo";
+
+const keywords = {
+ "수면 여부 확인": ["아침", "밤"],
+ "식사 여부 확인": ["아침", "점심", "저녁"],
+ "약 복용 여부 확인": ["아침", "점심", "저녁"],
+ "활동 여부 확인": ["외출", "청소", "교회", "운동", "목욕"],
+ "심리적 상태 체크": ["O", "X"]
+};
+
+const timeSettingKeywords = {
+ "수면 여부 확인": ["아침"],
+ "식사 여부 확인": ["아침", "점심", "저녁"],
+ "약 복용 여부 확인": ["아침", "점심", "저녁"]
+};
+
+const weekdays = ["월", "화", "수", "목", "금", "토", "일"];
+
+const TimeSetting = ({ value, onSave }) => {
+ const [tempTime, setTempTime] = useState(value.time);
+ const [tempDays, setTempDays] = useState(value.days || []);
+
+ const toggleDay = (day) => {
+ setTempDays((prev) =>
+ prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day]
+ );
+ };
+
+ const handleSave = () => {
+ onSave({
+ time: tempTime,
+ days: tempDays
+ });
+ };
+
+ return (
+
+
+ {weekdays.map((day) => (
+
+ ))}
+
+
+
+
+ );
+};
+
+const KeywordSelectionPage = () => {
+ const navigate = useNavigate();
+
+ const [selected, setSelected] = useState(
+ Object.keys(keywords).reduce((acc, category) => {
+ acc[category] = {};
+ keywords[category].forEach((keyword) => {
+ acc[category][keyword] = {
+ selected: false,
+ time: "08:00",
+ days: []
+ };
+ });
+ return acc;
+ }, {})
+ );
+
+ const toggleSelection = (category, keyword) => {
+ setSelected((prev) => ({
+ ...prev,
+ [category]: {
+ ...prev[category],
+ [keyword]: {
+ ...prev[category][keyword],
+ selected: !prev[category][keyword].selected
+ }
+ }
+ }));
+ };
+
+ const saveTimeAndDays = (category, keyword, newData) => {
+ setSelected((prev) => ({
+ ...prev,
+ [category]: {
+ ...prev[category],
+ [keyword]: {
+ ...prev[category][keyword],
+ ...newData
+ }
+ }
+ }));
+ };
+
+ return (
+
+
+
확인하고 싶은 키워드를 선택해주세요.
+ {Object.entries(keywords).map(([category, options]) => (
+
+
• {category}
+
+ {options.map((keyword) => (
+
+
+ {selected[category][keyword].selected &&
+ timeSettingKeywords[category]?.includes(keyword) && (
+ saveTimeAndDays(category, keyword, data)}
+ />
+ )}
+
+ ))}
+
+
+ ))}
+
+
+ );
+};
+
+const styles = {
+ container: {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ backgroundColor: "#F8EAD2",
+ height: "100vh",
+ padding: "20px",
+ overflowY: "auto",
+ },
+ title: {
+ fontSize: "18px",
+ fontWeight: "bold",
+ marginBottom: "20px",
+ },
+ category: {
+ marginBottom: "15px",
+ textAlign: "left",
+ width: "100%",
+ },
+ categoryTitle: {
+ fontSize: "16px",
+ fontWeight: "bold",
+ marginBottom: "5px",
+ },
+ buttonContainer: {
+ display: "flex",
+ flexWrap: "wrap",
+ gap: "10px",
+ },
+ keywordBlock: {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ gap: "5px",
+ },
+ keywordButton: {
+ border: "2px solid black",
+ borderRadius: "20px",
+ padding: "10px 15px",
+ cursor: "pointer",
+ fontSize: "14px",
+ },
+ completeButton: {
+ backgroundColor: "#DABEC9",
+ border: "none",
+ padding: "10px 20px",
+ borderRadius: "8px",
+ fontSize: "16px",
+ cursor: "pointer",
+ marginTop: "20px",
+ },
+ timeSettingContainer: {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ gap: "10px",
+ backgroundColor: "#FFF",
+ padding: "10px",
+ borderRadius: "10px",
+ border: "1px solid #ccc",
+ marginTop: "5px",
+ },
+ weekdayContainer: {
+ display: "flex",
+ gap: "6px",
+ flexWrap: "wrap",
+ justifyContent: "center",
+ },
+ dayButton: {
+ padding: "5px 8px",
+ borderRadius: "6px",
+ border: "1px solid #888",
+ cursor: "pointer",
+ fontSize: "12px",
+ },
+ saveButton: {
+ fontSize: "12px",
+ padding: "5px 10px",
+ borderRadius: "5px",
+ backgroundColor: "#DABEC9",
+ border: "none",
+ cursor: "pointer"
+ }
+};
+
+export default KeywordSelectionPage;
diff --git a/src/pages/VoiceTrainingPage.js b/src/pages/VoiceTrainingPage.js
index 517892c..5a40422 100644
--- a/src/pages/VoiceTrainingPage.js
+++ b/src/pages/VoiceTrainingPage.js
@@ -21,7 +21,7 @@ const VoiceTrainingPage = () => {
-