Home수정+Diet수정

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

front/src/pages/Home.jsx

 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>
   );

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>
     );
 }

front/src/pages/diet/Checkactivity.css

+#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

front/src/pages/diet/Checkactivity.jsx

+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;

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>
   );

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) => {

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);
         }

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(() => {
+        const toda = new Date();
+        for (let i = 0; i < 9; i++) {
+            diet[i].date = new Date();
+            diet[i].date.setDate(toda.getDate() - i);
         }
 
-    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); // 체중 데이터
+        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: [