From 4bd2060a5c74b6a28f27b6faf447d3d4b52accf9 Mon Sep 17 00:00:00 2001 From: SEUNGHWA LEE Date: Fri, 4 Apr 2025 19:09:44 +0900 Subject: [PATCH 1/3] =?UTF-8?q?KeywordPage=201=EB=B2=88=20=EC=99=84?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/KeywordSelectionPage.js | 96 +++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 src/pages/KeywordSelectionPage.js diff --git a/src/pages/KeywordSelectionPage.js b/src/pages/KeywordSelectionPage.js new file mode 100644 index 0000000..67fd2e1 --- /dev/null +++ b/src/pages/KeywordSelectionPage.js @@ -0,0 +1,96 @@ +import React, {useState} from 'react'; +import { useNavigate} from 'react-router-dom'; +// import Button from "../components/Button"; +import Logo from "../components/Logo"; + +const keywords = { + "수면여부 확인" : ["아침", "밤"], + "식사여부 확인" : ["아침", "점심", "저녁"], + "약 복용 여부 확인" : ["아침", "점심", "저녁"], + "활동 여부 확인" : ["외출", "청소", "교회", "운동", "목욕"], + "심리적 상태 체크" : ["O", "X"] +}; + +const KeywordSelectionPage = () => { + const navigate = useNavigate(); + const [selected, setSelected] = useState({}); + + const toggleSelection = (category, keyword) => { + setSelected((prev) => ({ + ...prev, + [keyword] : !prev[keyword] + })); + }; + + return ( +
+ +

확인하고 싶은 키워드를 선택해주세요.

+ {Object.entries(keywords).map(([category,options]) => ( +
+

• {category}

+
+ {options.map((keyword) => ( + + ))} +
+
+ ))} + +
+ ); +}; + +const styles = { + container: { + display : "flex", + flexDirection : "column", + alignItems: "center", + backgroundColor : "#F8EAD2", + height: "100vh", + padding : "20px", + }, + title: { + fontSize: "18px", + fontWeight: "bold", + marginBottom: "20px", + }, + category: { + marginBottom: "15px", + textAlign: "left", + width: "100%", + }, + buttonContainer: { + display: "flex", + flexWrap: "wrap", + gap: "10px", + }, + 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", + }, +}; + +export default KeywordSelectionPage; \ No newline at end of file From e82b561fb6bb86c2df70de1c04d2780fb7bdab4d Mon Sep 17 00:00:00 2001 From: SEUNGHWA LEE Date: Fri, 4 Apr 2025 19:19:58 +0900 Subject: [PATCH 2/3] =?UTF-8?q?keyword=20page=20=EC=98=A4=EB=A5=98?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/KeywordSelectionPage.js | 60 +++++++++++++++++++------------ src/pages/VoiceTrainingPage.js | 2 +- 2 files changed, 38 insertions(+), 24 deletions(-) diff --git a/src/pages/KeywordSelectionPage.js b/src/pages/KeywordSelectionPage.js index 67fd2e1..10d1f63 100644 --- a/src/pages/KeywordSelectionPage.js +++ b/src/pages/KeywordSelectionPage.js @@ -1,32 +1,41 @@ -import React, {useState} from 'react'; -import { useNavigate} from 'react-router-dom'; -// import Button from "../components/Button"; +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; import Logo from "../components/Logo"; const keywords = { - "수면여부 확인" : ["아침", "밤"], - "식사여부 확인" : ["아침", "점심", "저녁"], - "약 복용 여부 확인" : ["아침", "점심", "저녁"], - "활동 여부 확인" : ["외출", "청소", "교회", "운동", "목욕"], - "심리적 상태 체크" : ["O", "X"] + "수면여부 확인": ["아침", "밤"], + "식사여부 확인": ["아침", "점심", "저녁"], + "약 복용 여부 확인": ["아침", "점심", "저녁"], + "활동 여부 확인": ["외출", "청소", "교회", "운동", "목욕"], + "심리적 상태 체크": ["O", "X"] }; const KeywordSelectionPage = () => { const navigate = useNavigate(); - const [selected, setSelected] = useState({}); + + const [selected, setSelected] = useState( + Object.keys(keywords).reduce((acc, category) => { + acc[category] = {}; + keywords[category].forEach((keyword) => (acc[category][keyword] = false)); + return acc; + }, {}) + ); const toggleSelection = (category, keyword) => { setSelected((prev) => ({ ...prev, - [keyword] : !prev[keyword] + [category]: { + ...prev[category], + [keyword]: !prev[category][keyword] // 해당 키워드만 변경 + } })); }; return (
-

확인하고 싶은 키워드를 선택해주세요.

- {Object.entries(keywords).map(([category,options]) => ( +

확인하고 싶은 키워드를 선택해주세요.

+ {Object.entries(keywords).map(([category, options]) => (

• {category}

@@ -35,8 +44,8 @@ const KeywordSelectionPage = () => { key={keyword} style={{ ...styles.keywordButton, - backgroundColor: selected[keyword] ? "#DABEC9" : "#FFF", - color: selected[keyword] ? "#FFF" : "#000", + backgroundColor: selected[category][keyword] ? "#DABEC9" : "#FFF", + color: selected[category][keyword] ? "#FFF" : "#000", }} onClick={() => toggleSelection(category, keyword)} > @@ -53,12 +62,12 @@ const KeywordSelectionPage = () => { const styles = { container: { - display : "flex", - flexDirection : "column", + display: "flex", + flexDirection: "column", alignItems: "center", - backgroundColor : "#F8EAD2", + backgroundColor: "#F8EAD2", height: "100vh", - padding : "20px", + padding: "20px", }, title: { fontSize: "18px", @@ -70,13 +79,18 @@ const styles = { textAlign: "left", width: "100%", }, + categoryTitle: { + fontSize: "16px", + fontWeight: "bold", + marginBottom: "5px", + }, buttonContainer: { display: "flex", flexWrap: "wrap", gap: "10px", }, keywordButton: { - border : "2px solid black", + border: "2px solid black", borderRadius: "20px", padding: "10px 15px", cursor: "pointer", @@ -85,12 +99,12 @@ const styles = { completeButton: { backgroundColor: "#DABEC9", border: "none", - padding : "10px 20px", - borderRadius : "8px", + padding: "10px 20px", + borderRadius: "8px", fontSize: "16px", cursor: "pointer", - marginTop : "20px", + marginTop: "20px", }, }; -export default KeywordSelectionPage; \ No newline at end of file +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 = () => { -
From bd797039bae7fb95fba542e6364b9f259415b6ef Mon Sep 17 00:00:00 2001 From: SEUNGHWA LEE Date: Fri, 4 Apr 2025 19:54:10 +0900 Subject: [PATCH 3/3] =?UTF-8?q?keywordpage=20=EC=8B=9C=EA=B0=84=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/KeywordSelectionPage.js | 158 +++++++++++++++++++++++++++--- 1 file changed, 143 insertions(+), 15 deletions(-) diff --git a/src/pages/KeywordSelectionPage.js b/src/pages/KeywordSelectionPage.js index 10d1f63..48aa886 100644 --- a/src/pages/KeywordSelectionPage.js +++ b/src/pages/KeywordSelectionPage.js @@ -1,22 +1,84 @@ 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] = false)); + keywords[category].forEach((keyword) => { + acc[category][keyword] = { + selected: false, + time: "08:00", + days: [] + }; + }); return acc; }, {}) ); @@ -26,7 +88,23 @@ const KeywordSelectionPage = () => { ...prev, [category]: { ...prev[category], - [keyword]: !prev[category][keyword] // 해당 키워드만 변경 + [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 + } } })); }; @@ -40,17 +118,28 @@ const KeywordSelectionPage = () => {

• {category}

{options.map((keyword) => ( - +
+ + {selected[category][keyword].selected && + timeSettingKeywords[category]?.includes(keyword) && ( + saveTimeAndDays(category, keyword, data)} + /> + )} +
))}
@@ -68,6 +157,7 @@ const styles = { backgroundColor: "#F8EAD2", height: "100vh", padding: "20px", + overflowY: "auto", }, title: { fontSize: "18px", @@ -89,6 +179,12 @@ const styles = { flexWrap: "wrap", gap: "10px", }, + keywordBlock: { + display: "flex", + flexDirection: "column", + alignItems: "center", + gap: "5px", + }, keywordButton: { border: "2px solid black", borderRadius: "20px", @@ -105,6 +201,38 @@ const styles = { 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;