diff --git a/front/src/pages/Home.css b/front/src/pages/Home.css index 908cc2f58cbcc53ef7aa596725d56b5db678d5b5..bc0a678618498ee801560f565938bb88d19d0bed 100644 --- a/front/src/pages/Home.css +++ b/front/src/pages/Home.css @@ -3,6 +3,120 @@ position: relative; width: 1325px; height: 714px; + + ul { + position: absolute; + top: 48%; + left: 50%; + transform: translate(-50%, -50%); + margin: 0; + padding: 0; + display: flex; + } + + ul li { + list-style: none; + margin: 0 95px; + } + + + ul li a { + position: relative; + display: block; + width: 170px; + height: 170px; + text-align: center; + font-size: 30px; + font-weight: 600; + -webkit-text-stroke: 0.5px black; + text-decoration: none; + color: #181818; + background-color: #808080; + transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0, 0); + transition: 0.5s; + box-shadow: -30px 30px 10px rgba(0, 0, 0, 0.5); + } + + ul li a::before { + content: ""; + position: absolute; + top: 10px; + left: -20px; + height: 100%; + width: 20px; + background-color: #93a092; + transition: 0.5s; + transform: rotate(0deg) skewY(-45deg); + } + + ul li a::after { + content: ""; + position: absolute; + bottom: -20px; + left: -10px; + height: 20px; + width: 100%; + background-color: var(--grey); + transition: 0.5s; + transform: rotate(0deg) skewX(-45deg); + } + + ul li a:hover { + transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px); + box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5); + } + + ul li:hover .fab { + color: var(--white); + } + + ul li:hover:nth-child(1) a { + color: #242834; + } + + ul li:hover:nth-child(1) a::before { + background: #242834; + } + + ul li:hover:nth-child(1) a::after { + background: #3C3D40; + } + + ul li:hover:nth-child(2) a { + color: #8C7DFF; + } + + ul li:hover:nth-child(2) a::before { + background: #8C7DFF; + } + + ul li:hover:nth-child(2) a::after { + background: #9E91FF; + } + + ul li:hover:nth-child(3) a { + color: #CFFF5E; + } + + ul li:hover:nth-child(3) a::before { + background: #CFFF5E; + } + + ul li:hover:nth-child(3) a::after { + background: #E0FF96; + } + + ul li:hover:nth-child(4) a { + color: #B87EED; + } + + ul li:hover:nth-child(4) a::before { + background: #B87EED; + } + + ul li:hover:nth-child(4) a::after { + background: #CBA8EA; + } } .hero { @@ -35,11 +149,6 @@ display: flex; justify-content: center; gap: 3rem; -} - -.content-box { - width: 200px; - height: 200px; - background-color: #f5f5f5; - border-radius: 10px; + margin: 0; + padding: 0; } \ No newline at end of file diff --git a/front/src/pages/Home.jsx b/front/src/pages/Home.jsx index a993cb4273abbc2f04c31cd57cf576bda3b4a358..5740c3ef69ae87065a67d1572f622d48901ec8e2 100644 --- a/front/src/pages/Home.jsx +++ b/front/src/pages/Home.jsx @@ -1,4 +1,5 @@ import React from "react"; +import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; import "./Home.css"; function Home() { @@ -10,10 +11,28 @@ function Home() { <p>Unlock a Personalized Training Plan Designed to Fit Your Goals, Schedule, and Lifestyle.</p> </header> <div className="content-grid"> - <div className="content-box"></div> - <div className="content-box"></div> - <div className="content-box"></div> - <div className="content-box"></div> + <ul> + <li> + <Link to="/workout"> + <span>Workout</span> + </Link> + </li> + <li> + <Link to="/habitTracker"> + <span>Habit Tracker</span> + </Link> + </li> + <li> + <Link to="/routine"> + <span>Routine</span> + </Link> + </li> + <li> + <Link to="/diet"> + <span>Diet</span> + </Link> + </li> + </ul> </div> </div> ); diff --git a/front/src/pages/diet/BmrDisplay.jsx b/front/src/pages/diet/BmrDisplay.jsx index 345f48030e3f19717725cc60b8cf502382a423f3..f0c84027a2c1d0daa32fab9eb9d569641e356b1e 100644 --- a/front/src/pages/diet/BmrDisplay.jsx +++ b/front/src/pages/diet/BmrDisplay.jsx @@ -2,7 +2,7 @@ import NutrientDisplay from './NutrientDisplay'; import React, { useEffect, useState } from 'react'; import './BmrDisplay.css'; -function BmrDisplay({ user, diet }) { +function BmrDisplay({ user, diet, activity }) { const [bmr, setBmr] = useState(0); const [achievement, setAchievement] = useState([]); const [constants] = useState([1.2, 1.375, 1.555, 1.725, 1.9]); @@ -41,13 +41,13 @@ function BmrDisplay({ user, diet }) { </div> <div className="calorie-box"> <p>총 대사량</p> - <span>{Math.round(constants[achievement.in_current_week] * bmr)}</span> + <span>{Math.round(constants[activity] * bmr)}</span> <p>kcal</p> </div> </div> </div> - <NutrientDisplay user={user} bmr={Math.round(constants[achievement.in_current_week] * bmr)} /> + <NutrientDisplay user={user} bmr={Math.round(constants[activity] * bmr)} /> </React.Fragment> ); } diff --git a/front/src/pages/diet/Checkactivity.css b/front/src/pages/diet/Checkactivity.css new file mode 100644 index 0000000000000000000000000000000000000000..374715ae55fee3efe4e484f0d5952bf1394ac699 --- /dev/null +++ b/front/src/pages/diet/Checkactivity.css @@ -0,0 +1,17 @@ +#activity-container { + align-items: center; + width: 370px; + height: 75px; + margin: -10px; + margin-left: 5px; +} + +#activity-container button { + width: 40px; + height: 40px; + margin: 15px; + border-radius: 4px; + font-weight: 600; + border: 0.1px solid #eee; + cursor: pointer; +} \ No newline at end of file diff --git a/front/src/pages/diet/Checkactivity.jsx b/front/src/pages/diet/Checkactivity.jsx new file mode 100644 index 0000000000000000000000000000000000000000..b7ef680f1e4becd382290dda273ba94415d27489 --- /dev/null +++ b/front/src/pages/diet/Checkactivity.jsx @@ -0,0 +1,29 @@ +import React, { useState } from 'react'; +import './Checkactivity.css'; + +function Checkactivity({ onButtonClick }) { + const [activeButton, setActiveButton] = useState(null); // 클릭한 버튼의 인덱스 저장 + + const handleClick = (index) => { + setActiveButton(index); // 클릭한 버튼의 인덱스를 저장 + onButtonClick(index); // 부모 컴포넌트의 클릭 핸들러 호출 + }; + + return ( + <div id="activity-container"> + {Array.from({ length: 5 }, (_, i) => ( + <button + key={i + 1} + onClick={() => handleClick(i + 1)} + style={{ + backgroundColor: i+1 === activeButton ? '#eee' : 'transparent', + }} + > + {i + 1} + </button> + ))} + </div> + ); +} + +export default Checkactivity; diff --git a/front/src/pages/diet/Diet.jsx b/front/src/pages/diet/Diet.jsx index 7988b295537d7ab38a6220da8f08ba01896eb0d3..59431ab49e11181a3c6578b0e0faad37cb6fbcca 100644 --- a/front/src/pages/diet/Diet.jsx +++ b/front/src/pages/diet/Diet.jsx @@ -3,6 +3,7 @@ import BmrDisplay from './BmrDisplay'; import WeightBar from './WeightBar'; import WeightChart from './WeightChart'; import MealRecord from './MealRecord'; +import Checkactivity from './Checkactivity'; import { getDietData, getUserData } from './api'; import "./Diet.css" @@ -10,13 +11,14 @@ function App() { const [user, setUser] = useState([]); const [diet, setDiet] = useState([]); const [update, setUpdate] = useState(false); + const [activity, setActivity] = useState(2); useEffect(() => { const fetchDietData = async () => { try { const startDate = new Date(); const endDate = new Date(); - endDate.setDate(startDate.getDate() - 14); + endDate.setDate(startDate-13); const data = await getDietData(null, startDate, endDate); setDiet(data); @@ -42,15 +44,21 @@ function App() { fetchUser(); }, []); + const handleButtonClick = (act) => { + setActivity(act); + }; + + return ( <div id='Diet-container'> <div id='SideBar'> - <BmrDisplay user={user} diet={diet} /> + <BmrDisplay user={user} diet={diet} activity = {activity} /> <WeightBar diet={diet} /> + <Checkactivity onButtonClick={handleButtonClick} /> </div> <div id='Contents'> <WeightChart diet={diet} /> - <MealRecord diet={diet} onClick={setUpdate(true)} /> + <MealRecord diet={diet} /> </div> </div> ); diff --git a/front/src/pages/diet/MealRecord.jsx b/front/src/pages/diet/MealRecord.jsx index b745528f549a2bf76bea70342c39eecaff3e691d..50c9bb47c777b947fe961da1bb070dc5dc76c601 100644 --- a/front/src/pages/diet/MealRecord.jsx +++ b/front/src/pages/diet/MealRecord.jsx @@ -189,14 +189,12 @@ function MealRecord(diet) { } }; - const handleDeleteFood = (meal, index) => { - setData((prevData) => { - const updatedMeal = prevData[selectedDate][meal].filter((_, idx) => idx !== index); - return { - ...prevData, - [selectedDate]: { ...prevData[selectedDate], [meal]: updatedMeal }, - }; - }); + const handleDeleteFood = async (meal, index) => { + try { + await deleteDiet(selectedDate, selectedMeal, selectedFood.food_id); + } catch (err) { + alert(err); + } }; const calculateTotal = (meal, nutrient) => { diff --git a/front/src/pages/diet/WeightBar.jsx b/front/src/pages/diet/WeightBar.jsx index ad320d27e22e5bfcd86c4e6113188c0129750215..685f316b6680d660777f4178d47f82dc22727d0e 100644 --- a/front/src/pages/diet/WeightBar.jsx +++ b/front/src/pages/diet/WeightBar.jsx @@ -15,8 +15,8 @@ function WeightBar({ diet }) { 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) * 100)); }); + setPercentage(((start_weight - current_weight) / ((start_weight - goal_weight)+0.01) * 100)); setGoalWeight(goal_weight); setStartWeight(start_weight); } diff --git a/front/src/pages/diet/WeightChart.jsx b/front/src/pages/diet/WeightChart.jsx index 8e8223829465cfb8b266f40d5b511cd01b32fc25..a9881025bb7a42ab406c7c944dcd87dcc083d33b 100644 --- a/front/src/pages/diet/WeightChart.jsx +++ b/front/src/pages/diet/WeightChart.jsx @@ -72,9 +72,21 @@ const options = { }, }; +let diet = [ + { weight: 54 }, + { weight: 54 }, + { weight: 54 }, + { weight: 53 }, + { weight: 53 }, + { weight: 53 }, + { weight: 52 }, + { weight: 52 }, + { weight: 51 }, +]; -function WeightChart(diet) { + +function WeightChart() { const [chartData, setChartData] = useState({ labels: [], datasets: [ @@ -96,17 +108,44 @@ function WeightChart(diet) { return `${year}-${month}-${day}`; }; - const getWeight = (w) => { - if(w!=undefined){ - setWeight(w); - return w; - }else return false; - } - useEffect(() => { - if (diet && diet.array) { - const labels = diet.array.map(entry => getTodayDate(entry.date)); // 날짜 데이터 - const weights = diet.array.map(entry => getWeight(entry.achievement?.weight) || weight); // 체중 데이터 + const toda = new Date(); + for (let i = 0; i < 9; i++) { + diet[i].date = new Date(); + diet[i].date.setDate(toda.getDate() - i); + } + + if (diet && Array.isArray(diet)) { + let labels = Array(14).fill(""); + let weights = Array(14).fill(null); + /* + const itemMap = new Map(diet.map((item, index) => [item.date.toISOString().split("T")[0], index])); + const tmp = new Date(diet[diet.length - 1].date); + for (let i = 13; i >= 0; i--) { + tmp.setDate(tmp.getDate() + 1); + const targetIndex = itemMap.get(tmp.toISOString().split("T")[0]) ?? -1; + if (targetIndex != -1) { + labels[i] = getTodayDate(diet[targetIndex].date); + weights[i] = diet[targetIndex].achievement.weight; + } else if (i < 13) { + labels[i] = labels[i + 1]; + weights[i] = weights[i + 1]; + } + } + */ + const itemMap = new Map(diet.map((item, index) => [item.date.toISOString().split("T")[0], index])); + for (let i = 0; i < 14; i++) { + const tmp = new Date(); + tmp.setDate(toda.getDate() - i); + const targetIndex = itemMap.get(tmp.toISOString().split("T")[0]) ?? -1; + if (targetIndex != -1) { + labels[i] = getTodayDate(diet[targetIndex].date); + weights[i] = diet[targetIndex].weight; + } else if (i > 0) { + labels[i] = labels[i - 1]; + weights[i] = weights[i - 1]; + } + } setChartData({ labels: labels, datasets: [