chore :: 급식 추가

Author: phyuna0525

src/apis/meal/index.ts

@@ -16,3 +16,13 @@ export const TodayMeals = () => {
     },
   });
 };
+
+export function useMonthMeals(date: string) {
+  return useQuery<TodayMealsType>({
+    queryKey: ["monthMeals", date],
+    queryFn: async () => {
+      const { data } = await instance.get(`${router}/date?date=${date}`);
+      return data;
+    },
+  })
+}

src/assets/svg/mealIcon.svg

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import { format, startOfWeek, addDays, isSameDay } from "date-fns";
 import { theme } from "@/styles/theme";
 import upArrow from "@/assets/svg/upArrow.svg";
 import useCalendarContext from "./useCalendarContext";

src/components/calendar/weeklyCalendar.tsx

@@ -1,12 +1,12 @@
 import { styled } from "styled-components";
 import { theme } from "@/styles/theme";
-import { useState } from "react";
 import HelpContent from "../helpContent/helpcontent";
 import Face from "@/assets/svg/face.svg";
 import Bug from "@/assets/svg/bug.svg";
 import Out from "@/assets/svg/out.svg";
 import { useNavigate } from "react-router-dom";
 import { cookie } from "@/utils/auth";
+import melasIcon from "@/assets/svg/mealIcon.svg";
 
 const HelfMenu = () => {
   const navigate = useNavigate();
@@ -43,6 +43,13 @@ const HelfMenu = () => {
         content="버그 제보"
         icon={<img src={Bug} alt="" />}
       />
+      <HelpContent
+        onClick={() => {
+          navigate("/meals");
+        }}
+        content="급식 확인"
+        icon={<img src={melasIcon} />}
+      />
       <TestTitle>계정</TestTitle>
       <HelpContent
         onClick={() => {

src/components/helfMenu.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import styled from "styled-components";
+import Calendar from "@/components/calendar";
+import WeeklyCalendar from "@/components/calendar/weeklyCalendar";
+import useCalendarContext from "@/components/calendar/useCalendarContext";
+import downArrow from "@/assets/svg/downarrow.svg";
+import { theme } from "@/styles/theme";
+
+interface CalendarComponentsProps {
+    onDateChange: (date: string) => void;
+}
+
+const CalendarComponents = ({ onDateChange }: CalendarComponentsProps) => {
+    const [isMonthlyView, setIsMonthlyView] = useState(false);
+    const { selectedDate } = useCalendarContext();
+
+    const handleDateClick = (date: string) => {
+        const selected = new Date(date);
+
+        const formattedDate = selected.toISOString().split("T")[0];
+
+        selectedDate.selectDate(date);
+        setIsMonthlyView(false);
+        if (onDateChange) {
+            onDateChange(formattedDate);
+        }
+    };
+
+    const handleBackToMonthlyClick = () => {
+        setIsMonthlyView(true);
+    };
+
+    return (
+        <Container>
+            {isMonthlyView ? (
+                <>
+                    <img src={downArrow} alt="" onClick={() => setIsMonthlyView(false)} />
+                    <Calendar.Header />
+                    <Calendar.Body onClickDate={handleDateClick} />
+                </>
+            ) : (
+                <WeeklyCalendar
+                    selectedDate={selectedDate.date}
+                    onBackToMonthlyClick={handleBackToMonthlyClick}
+                    onDateSelect={handleDateClick}
+                />
+            )}
+        </Container>
+    );
+};
+
+const WrappedCalendarComponents = ({
+    onDateChange,
+}: CalendarComponentsProps) => (
+    <Calendar>
+        <CalendarComponents onDateChange={onDateChange} />
+    </Calendar>
+);
+
+export default WrappedCalendarComponents;
+
+const Container = styled.div`
+  width: 100%;
+  height: fit-content;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  background-color: ${theme.color.normal.white};
+  border-top-right-radius: 20px;
+  border-top-left-radius: 20px;
+  box-shadow: ${theme["box-shadow"]};
+`;