Merge pull request #49 from ktb-23/feat20/food-main

Feat20/food main

src/api/useGetAllDateFoodLog.jsx

@@ -0,0 +1,19 @@
+import api from '../config/apiConfig';
+
+const useGetAllDateFoodLog = async () => {
+  const accesstoken = localStorage.getItem('accesstoken');
+  try {
+    const response = await api.get('/api/food/date/foodlog', {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accesstoken}`,
+      },
+    });
+    console.log(response.data);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    return error;
+  }
+};
+export default useGetAllDateFoodLog;

src/api/useGetAllFoodLog.jsx

@@ -0,0 +1,21 @@
+import api from '../config/apiConfig';
+
+const useGetAllFoodLog = async (date) => {
+  const accesstoken = localStorage.getItem('accesstoken');
+  console.log(date);
+  try {
+    const response = await api.get(`/api/food/all?date=${date}`, {
+      headers: {
+        Authorization: `Bearer ${accesstoken}`,
+        'Content-Type': 'application/json',
+      },
+    });
+    console.log(response.data);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    return error;
+  }
+};
+
+export default useGetAllFoodLog;

src/components/Calendar.jsx

@@ -5,6 +5,7 @@ import montharrowright from '../picture/montharrright.png';
 import Sample from '../picture/sample.svg';
 import UseDailyData from '../components/UseDailyData.jsx';
 import useGetAllDateExlog from '../api/useGetAllDateExlog.jsx';
+import useGetAllDateFoodLog from '../api/useGetAllDateFoodLog.jsx';
 
 const Calendar = ({ selectDate }) => {
   const { checkKcal, checkExercise, saveData } = UseDailyData();
@@ -14,6 +15,7 @@ const Calendar = ({ selectDate }) => {
   const [currentMonth, setCurrentMonth] = useState(new Date().getMonth() + 1);
   const [selectedDateString, setSelectedDateString] = useState('');
   const [exerciseDates, setExerciseDates] = useState([]); // 운동 기록이 있는 날짜 목록
+  const [foodDates, setFoodDates] = useState([]); // 운동 기록이 있는 날짜 목록
 
   const handleDateClick = (dateString) => {
     selectDate(dateString);
@@ -71,8 +73,18 @@ const Calendar = ({ selectDate }) => {
       console.error(error);
     }
   };
+  const GetAllDateFoodlog = async () => {
+    try {
+      const response = await useGetAllDateFoodLog();
+      const dates = response.map((entry) => entry.dateValue); // 받은 데이터를 날짜로 변환
+      setFoodDates(dates);
+    } catch (error) {
+      console.error(error);
+    }
+  };
   useEffect(() => {
     GetAllDateExlog();
+    GetAllDateFoodlog();
   }, []);
   return (
     <div className="calendar">
@@ -104,7 +116,7 @@ const Calendar = ({ selectDate }) => {
 
         {[...Array(getLastDateOfMonth()).keys()].map((date) => {
           const dateString = getDateString(currentYear, currentMonth, date + 1);
-          const isKcal = checkKcal(dateString);
+          const isKcal = foodDates.includes(dateString);
           const isExercise = exerciseDates.includes(dateString); // 운동 기록 확인
           const isSelected = dateString === selectedDateString;
 

src/containers/FoodForm.jsx

@@ -8,10 +8,15 @@ import useUploadFoodImage from '../api/useUploadFoodImage';
 import usePollFoodImageStatus from '../api/usePollFoodImage';
 import useUploadFoodLog from '../api/useUploadFoodLog';
 import useGetFoodLog from '../api/useGetFoodLog';
-
+const formatDate = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // Month is zero-indexed, so add 1
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
 const FoodForm = () => {
   const [state, dispatch] = useReducer(FoodReducer, InitialState);
-  const [currentDate, setCurrentDate] = useState(new Date());
+  const [currentDate, setCurrentDate] = useState(formatDate(new Date()));
   const [mealData, setMealData] = useState({
     아침: { imageUrl: null, foodAnalysis: null, selectedQuantity: 1 },
     점심: { imageUrl: null, foodAnalysis: null, selectedQuantity: 1 },
@@ -78,13 +83,13 @@ const FoodForm = () => {
 
   useEffect(() => {
     if (location.state?.date) {
-      const dateFromMainForm = new Date(location.state.date);
+      const dateFromMainForm = formatDate(new Date(location.state.date)); // Format the date
 
-      if (currentDate.getTime() !== dateFromMainForm.getTime()) {
+      if (currentDate !== dateFromMainForm) {
         setCurrentDate(dateFromMainForm);
         setSelectedDate(dateFromMainForm);
       }
-      const dietInfo = getDietInfo(location.state.date);
+      const dietInfo = getDietInfo(dateFromMainForm);
 
       dispatch({
         type: 'SET_ALL_MEALS',

src/containers/MainForm.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import FixForm from './FixForm.jsx';
 import Index from '../components/Index.jsx';
@@ -13,12 +13,18 @@ import UseDailyData from '../components/UseDailyData.jsx';
 import useWeight from '../hooks/useWeight.jsx';
 import Input from '../components/Input.jsx';
 import useExerciseLog from '../hooks/useExerciseLog.jsx';
+import useGetAllFoodLog from '../api/useGetAllFoodLog.jsx';
 const MainForm = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { selectedDate, setSelectedDate, dailyData, checkKcal, checkExercise } =
     UseDailyData();
   const { weight, setWeight, handleUploadClick } = useWeight(selectedDate);
+  const [foodLogs, setFoodLogs] = useState({
+    아침: null,
+    점심: null,
+    저녁: null,
+  });
   useEffect(() => {
     if (location.state?.date) {
       setSelectedDate(location.state.date);
@@ -38,7 +44,24 @@ const MainForm = () => {
     photos: {},
   };
   const { durations, exItem } = useExerciseLog(selectedDate);
+  const fetchFoodLogData = async () => {
+    const response = await useGetAllFoodLog(selectedDate);
 
+    const newFoodLogs = {
+      아침: null,
+      점심: null,
+      저녁: null,
+    };
+
+    response.forEach((log) => {
+      newFoodLogs[log.mealtype] = log;
+    });
+
+    setFoodLogs(newFoodLogs);
+  };
+  useEffect(() => {
+    fetchFoodLogData();
+  }, [selectedDate]);
   //met를 몸무게로 시간당 칼로리 계산
   const calculateCalories = (met, duration) => {
     // 몸무게가 0보다 클 때만 계산
@@ -70,7 +93,11 @@ const MainForm = () => {
     console.log('Navigating to /weight');
   };
   const getDietKcal = (meal) => {
-    return selectedDayData.diet[meal] || 0;
+    return foodLogs[meal]?.kcal || 0;
+  };
+
+  const getFoodPhoto = (meal) => {
+    return foodLogs[meal]?.food_photo || '';
   };
   const handleWeightChange = (e) => {
     const newWeight = e.target.value;
@@ -106,9 +133,9 @@ const MainForm = () => {
           </Button>
         </div>
         <div className="photo-container">
-          <Photo meal="morning" imageSrc={selectedDayData.photos?.morning} />
-          <Photo meal="lunch" imageSrc={selectedDayData.photos?.lunch} />
-          <Photo meal="dinner" imageSrc={selectedDayData.photos?.dinner} />
+          <Photo meal="morning" imageSrc={getFoodPhoto('아침')} />
+          <Photo meal="lunch" imageSrc={getFoodPhoto('점심')} />
+          <Photo meal="dinner" imageSrc={getFoodPhoto('저녁')} />
         </div>
 
         <div className="mainoutput-container">