diff --git a/front/src/pages/diet/BmrDisplay.jsx b/front/src/pages/diet/BmrDisplay.jsx index f0c84027a2c1d0daa32fab9eb9d569641e356b1e..57e15745d6b9eb63b64d11d6b36ea4139f99ccaf 100644 --- a/front/src/pages/diet/BmrDisplay.jsx +++ b/front/src/pages/diet/BmrDisplay.jsx @@ -1,33 +1,48 @@ import NutrientDisplay from './NutrientDisplay'; import React, { useEffect, useState } from 'react'; +import { getUserData } from './api'; import './BmrDisplay.css'; function BmrDisplay({ user, diet, activity }) { const [bmr, setBmr] = useState(0); - const [achievement, setAchievement] = useState([]); + const [userInfo, setUserInfo] = useState([]); const [constants] = useState([1.2, 1.375, 1.555, 1.725, 1.9]); useEffect(() => { - for (let i = 0; i < diet.length; i++) { - if (diet[i]) { - setAchievement(diet[i].achievement); - break; + const fetchUserInfo = async () => { + try{ + const data=await getUserData(); + setUserInfo(data); + }catch(error){ + console.error('Error fetching user info:', error); } - } - },[diet]); + }; + fetchUserInfo(); + }, []); const calculateBmr = () => { - if (user.user_gender === 1) { - return 66.47 + (13.75 * achievement.weight) + (5 * achievement.height) - (6.76 * user.user_birth); + if (!userInfo.user_gender || !userInfo.user_weight || + !userInfo.user_height || !userInfo.user_birth) { + return 0; + } + + const today = new Date(); + const birthYear = new Date(userInfo.user_birth).getFullYear(); + const age = today.getFullYear() - birthYear; + + if (userInfo.user_gender === 1) { + return 66.47 + (13.75 * userInfo.user_weight) + (5 * userInfo.user_height) - (6.76 * age); } else { - return 655.1 + (9.56 * achievement.weight) + (1.85 * achievement.height) - (4.68 * user.user_birth); + return 655.1 + (9.56 * userInfo.user_weight) + (1.85 * userInfo.user_height) - (4.68 * age); } }; useEffect(() => { const calculatedBmr = calculateBmr(); - setBmr(Math.round(calculatedBmr)); - }); + if (!isNaN(calculatedBmr)) { + setBmr(Math.round(calculatedBmr)); + } + }, [userInfo]); return ( <React.Fragment> diff --git a/front/src/pages/diet/WeightBar.css b/front/src/pages/diet/WeightBar.css index 3498ed778fa5f41fce0d47490158392d49413c40..a8c4929dd1bbf8c79278826fdac9b69aa6121f3d 100644 --- a/front/src/pages/diet/WeightBar.css +++ b/front/src/pages/diet/WeightBar.css @@ -72,4 +72,15 @@ align-items: right; text-align: right; color: #000000; +} + +.suchi input { + width: 50px; + text-align: right; + padding: 2px 5px; + margin-right: 5px; +} + +.suchi span { + cursor: pointer; } \ No newline at end of file diff --git a/front/src/pages/diet/WeightBar.jsx b/front/src/pages/diet/WeightBar.jsx index 685f316b6680d660777f4178d47f82dc22727d0e..c4b8878b3b7940d399aae99a607933f56bc51a8a 100644 --- a/front/src/pages/diet/WeightBar.jsx +++ b/front/src/pages/diet/WeightBar.jsx @@ -1,38 +1,68 @@ import React, { useState, useEffect } from 'react'; import './WeightBar.css' +import { getUserData, getWeightHistory } from './api'; function WeightBar({ diet }) { const [percentage, setPercentage] = useState(0); - const [goalweight, setGoalWeight] = useState(0); - const [startweight, setStartWeight] = useState(0); + const [goalWeight, setGoalWeight] = useState(''); + const [userInfo, setUserInfo] = useState(null); + const [weightHistory, setWeightHistory] = useState([]); + const [isEditing, setIsEditing] = useState(false); useEffect(() => { - let goal_weight = -1; - let current_weight = -1; - let start_weight; - if (diet&&diet.array) { - diet.array.forEach(element => { - if (element.achievement.weight) start_weight = element.achievement.weight; - if (goal_weight == -1 && element.achievement.goal_weight) goal_weight = element.achievement.goal_weight; - if (current_weight == -1 && element.achievement.weight) current_weight = element.achievement.weight - }); - setPercentage(((start_weight - current_weight) / ((start_weight - goal_weight)+0.01) * 100)); - setGoalWeight(goal_weight); - setStartWeight(start_weight); - } - }, [diet]); + const fetchData = async () => { + try { + const userData = await getUserData(); + const weightHistoryData = await getWeightHistory(); + + setUserInfo(userData); + setWeightHistory(weightHistoryData); + + if (userData.user_weight && goalWeight) { + const startWeight = weightHistory[0]?.weight || userData.user_weight; + const currentWeight = userData.user_weight; + const progress = ((startWeight - currentWeight) / (startWeight - goalWeight)) * 100; + setPercentage(Math.min(Math.max(progress, 0), 100)); + } + } catch (error) { + console.error('데이터를 가져오는데 실패했습니다:', error); + } + }; + + fetchData(); + }, [goalWeight]); + + const handleGoalWeightSubmit = (e) => { + e.preventDefault(); + setIsEditing(false); + }; return ( <div className='WeightBar-container'> <h3>체중 목표</h3> <div className="weight-bar"> - <div className='per'>{percentage}%</div> + <div className='per'>{percentage.toFixed(1)}%</div> <div className="bar"> <div className="bar-progress" style={{ width: `${percentage}%` }}></div> </div> <div className='suchi'> - <span>{startweight}kg</span> - <span>{goalweight}kg</span> + <span>{weightHistory[0]?.weight || userInfo?.user_weight}kg</span> + {isEditing ? ( + <form onSubmit={handleGoalWeightSubmit}> + <input + type="number" + value={goalWeight} + onChange={(e) => setGoalWeight(e.target.value)} + onBlur={() => setIsEditing(false)} + autoFocus + /> + <span>kg</span> + </form> + ) : ( + <span onClick={() => setIsEditing(true)}> + {goalWeight ? `${goalWeight}kg` : '목표 체중 설정'} + </span> + )} </div> </div> </div>