[feature] calendar탭 api 연결

apis/auth.tsx

@@ -20,7 +20,7 @@ export const SignIn = async (userData: {
     return response.data;
   } catch (error) {
     if (error.response) {
-      //200 이 외
+      // 200 이외
       console.error("서버 응답 오류:", error.response.data);
     } else if (error.request) {
       // 요청이 전송되었으나 응답을 받지 못한 경우

apis/calendar.ts

@@ -0,0 +1,27 @@
+import client, { ResponseBody } from "./client";
+
+interface GetMonthCalendarResponse extends ResponseBody {
+  result: MonthCalendarProps[];
+}
+
+export interface MonthCalendarProps {
+  programIdx: number;
+  name: string;
+  openDate: {
+    year: number;
+    month: number;
+    day: number;
+  };
+  dueDate: {
+    year: number;
+    month: number;
+    day: number;
+  };
+}
+
+// 챌린지 월별 조회
+export const getMonthCalendar = async (): Promise<GetMonthCalendarResponse> => {
+  const response = await client.get("/programs", {});
+  // console.log("calenderData", response.data.result);
+  return response.data.result;
+};

apis/hooks/calendar.ts

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import { getMonthCalendar } from "../calendar";
+
+const useGetMonthCalendar = () => {
+  const { data } = useQuery({
+    queryKey: ["getMonthCalendar"],
+    queryFn: getMonthCalendar,
+  });
+  // console.log("isLoading", isLoading);
+  console.log("Query Data", data);
+  return { data };
+};
+
+export { useGetMonthCalendar };

components/NavBar.tsx

@@ -19,41 +19,38 @@ const NavBar = () => {
   }, []);
 
   return (
-    <>
-      <div className="w-full min-h-[4rem]" />
-      <div
-        className="flex flex-basis h-[4rem] w-full fixed inset-x-0 bottom-0 "
-        style={{
-          borderTop: "0.5px solid rgba(112, 115, 124, 0.16)",
-          backgroundColor: "#ffffff",
-        }}
-      >
-        <FlexBox className="w-full justify-between">
-          <NavBarItem
-            isActive={pathname === "/"}
-            text="홈"
-            onClick={() => handleNavigate("/")}
-            iconType="home"
-          >
-            <HomeIcon />
-          </NavBarItem>
-          <NavBarItem
-            isActive={pathname === "/calendar"}
-            text="캘린더"
-            onClick={() => handleNavigate("/calendar")}
-            iconType="calendar"
-          >
-            <CalenderIcon />
-          </NavBarItem>
-          <NavBarItem
-            isActive={pathname === "/mypage"}
-            text="마이페이지"
-            onClick={() => handleNavigate("/mypage")}
-            iconType="mypage"
-          >
-            <MypageIcon />
-          </NavBarItem>
-        </FlexBox>
+    <div
+      className="flex flex-basis h-[4rem] w-full absolute inset-x-0 bottom-0 z-50"
+      style={{
+        borderTop: "0.5px solid rgba(112, 115, 124, 0.16)",
+        backgroundColor: "#ffffff",
+      }}
+    >
+      <div className="flex flex-basis h-full w-full flex-row justify-between items-center ">
+        <NavBarItem
+          isActive={pathname === "/"}
+          text="홈"
+          onClick={() => handleNavigate("/")}
+          iconType="home"
+        >
+          <HomeIcon />
+        </NavBarItem>
+        <NavBarItem
+          isActive={pathname === "/calendar"}
+          text="캘린더"
+          onClick={() => handleNavigate("/calendar")}
+          iconType="calendar"
+        >
+          <CalenderIcon />
+        </NavBarItem>
+        <NavBarItem
+          isActive={pathname === "/mypage"}
+          text="마이페이지"
+          onClick={() => handleNavigate("/mypage")}
+          iconType="mypage"
+        >
+          <MypageIcon />
+        </NavBarItem>
       </div>
     </>
   );

components/calendar/InfoCalendar.tsx

@@ -2,17 +2,67 @@ import Calendar from "react-calendar";
 import { useState } from "react";
 import styled from "styled-components";
 import moment from "moment";
+import { useGetMonthCalendar } from "@/apis/hooks/calendar";
+import { MonthCalendarProps } from "@/apis/calendar";
+import Dot from "@/public/svgs/Dot.svg";
 
 export default function InfoCalendar() {
   type DatePiece = Date | null;
   type SelectedDate = DatePiece | [DatePiece, DatePiece];
 
   const [clickedDate, setClickedDate] = useState<SelectedDate>(new Date());
 
+  // const [monthCalendarData, setMonthCalendarData] = useState<
+  //   MonthCalendarProps[]
+  // >([]);
+
   const onChangeToday = () => {
     setClickedDate(clickedDate);
   };
 
+  const { data } = useGetMonthCalendar();
+
+  const customTileContent = ({ date, view }: { date: Date; view: string }) => {
+    let isOpen = true;
+    if (data && view === "month") {
+      const dayData = data.find((dayData: MonthCalendarProps) => {
+        const openDate = new Date(
+          dayData.openDate.year,
+          dayData.openDate.month - 1,
+          dayData.openDate.day,
+        );
+
+        const dueDate = new Date(
+          dayData.dueDate.year,
+          dayData.dueDate.month - 1,
+          dayData.dueDate.day,
+        );
+
+        if (date.getTime() === openDate.getTime()) isOpen = true;
+        else isOpen = false;
+
+        return (
+          date.getTime() === openDate.getTime() ||
+          date.getTime() === dueDate.getTime()
+        );
+      });
+
+      if (dayData) {
+        return (
+          <div className="custom-tile-content">
+            <div className=" flex flex-row justify-center items-center gap-1 ">
+              <Dot color={isOpen ? "#F06459" : "#8E8E93"} />
+              <div className="h6 custom-tile-text text-grey-900 whitespace-nowrap overflow-hidden text-ellipsis">
+                {dayData.name}
+              </div>
+            </div>
+          </div>
+        );
+      }
+    }
+    return null;
+  };
+
   return (
     <div className="flex justify-center items-center">
       <StyledCalendarWrapper>
@@ -24,6 +74,7 @@ export default function InfoCalendar() {
           prev2Label={null}
           minDate={new Date(2024, 4, 1)}
           formatDay={(locale, date) => moment(date).format("DD")}
+          tileContent={customTileContent}
         />
       </StyledCalendarWrapper>
     </div>
@@ -42,6 +93,20 @@ const StyledCalendarWrapper = styled.div`
     padding: 0;
   }
 
+  .custom-tile-content {
+    /* position: absolute; */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+  }
+
+  .custom-tile-text {
+    text-align: start;
+    line-height: 130%;
+    flex-wrap: wrap;
+  }
+
   /* 년도, 월 */
   .react-calendar__navigation {
     display: flex;

pages/calendar.tsx

@@ -7,6 +7,8 @@ import InfoCalendar from "@/components/calendar/InfoCalendar";
 import { NextPage } from "next";
 
 const CalendarPage: NextPage = () => {
+  const date = new Date();
+  console.log(date);
   return (
     <div className="flex flex-col w-full h-screen pb-[4rem]">
       <HeadFunction title="캘린더" />

pages/login.tsx

@@ -44,12 +44,12 @@ const Login: NextPage = () => {
   );
 
   const signInMutation = useMutation({
+    queryKey: ["SignIn"],
     mutationFn: SignIn,
     onSuccess: async (data) => {
       console.log(data);
       const accessToken = data.result.accessToken;
       const refreshToken = data.result.refreshToken;
-      console.log("accessToken:", accessToken);
       setTokenFromLocalStorage(accessToken);
       router.push("/");
       alert("로그인에 성공하였습니다");