#16 feat: calendar 월별 데이터 배열 수정

team-Ollie · Jun 27, 2024 · 172947f · 172947f
1 parent 74fca6a
commit 172947f
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 18 deletions.
diff --git a/apis/calendar.ts b/apis/calendar.ts
@@ -19,9 +19,35 @@ export interface MonthCalendarProps {
   };
 }
 
+type CalendarDate = {
+  year: number;
+  month: number;
+  day: number;
+};
+
+interface GetProgramDetailBody {
+  programIdx: number;
+  name: string;
+  openDate: CalendarDate;
+  dueDate: CalendarDate;
+  location: string;
+  host: string;
+  schedule: string;
+  description: string;
+}
+
 // 챌린지 월별 조회
 export const getMonthCalendar = async (): Promise<GetMonthCalendarResponse> => {
-  const response = await client.get("/programs", {});
+  const response = await client.get("/programs");
   // console.log("calenderData", response.data.result);
   return response.data.result;
 };
+
+export const getProgramDetail = async (
+  programIdx: number,
+): Promise<GetProgramDetailBody> => {
+  // const response = await client.get(`/programs/${programIdx}`);
+  const response = await client.get(`/programs/2`);
+  // console.log("calenderDetail", response.data.result);
+  return response.data.result;
+};
diff --git a/apis/hooks/calendar.ts b/apis/hooks/calendar.ts
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { getMonthCalendar } from "../calendar";
+import { getMonthCalendar, getProgramDetail } from "../calendar";
 
 const useGetMonthCalendar = () => {
   const { data } = useQuery({
@@ -12,3 +12,15 @@ const useGetMonthCalendar = () => {
 };
 
 export { useGetMonthCalendar };
+
+const useGetProgramDetail = () => {
+  const { data } = useQuery({
+    queryKey: ["getProgramDetail"],
+    queryFn: getProgramDetail,
+  });
+  // console.log("isLoading", isLoading);
+  console.log("Query Data", data);
+  return { data };
+};
+
+export { useGetProgramDetail };
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -52,7 +52,7 @@ const NavBar = () => {
           <MypageIcon />
         </NavBarItem>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/components/calendar/CalendarModal.tsx b/components/calendar/CalendarModal.tsx
@@ -1,5 +1,3 @@
-interface CalendarModalProps {}
-
 const CalendarModal = ({ filterName }) => {
   return (
     <div className="w-fit h-[1.9rem] flex justify-center items-center bg-main-color rounded-3xl text-white py-[0.31rem] pl-[0.94rem] pr-[0.44rem] gap-0.5">

diff --git a/components/calendar/InfoCalendar.tsx b/components/calendar/InfoCalendar.tsx
@@ -20,12 +20,16 @@ export default function InfoCalendar() {
     setClickedDate(clickedDate);
   };
 
+  // API 관리
   const { data } = useGetMonthCalendar();
 
+  const handleDayDataClick = (programIdx: number) => {
+    console.log("API 호출: ", programIdx);
+  };
+
   const customTileContent = ({ date, view }: { date: Date; view: string }) => {
-    let isOpen = true;
     if (data && view === "month") {
-      const dayData = data.find((dayData: MonthCalendarProps) => {
+      const dayData = data.filter((dayData: MonthCalendarProps) => {
         const openDate = new Date(
           dayData.openDate.year,
           dayData.openDate.month - 1,
@@ -38,24 +42,36 @@ export default function InfoCalendar() {
           dayData.dueDate.day,
         );
 
-        if (date.getTime() === openDate.getTime()) isOpen = true;
-        else isOpen = false;
-
         return (
           date.getTime() === openDate.getTime() ||
           date.getTime() === dueDate.getTime()
         );
       });
 
-      if (dayData) {
+      if (dayData.length > 0) {
         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>
+            {dayData.map((day: MonthCalendarProps, index: number) => {
+              const isOpen =
+                date.getTime() ===
+                new Date(
+                  day.openDate.year,
+                  day.openDate.month - 1,
+                  day.openDate.day,
+                ).getTime();
+              console.log(day);
+              return (
+                <div key={index} className="flex flex-row items-center gap-1">
+                  <Dot color={isOpen ? "#F06459" : "#8E8E93"} />
+                  <div
+                    className="h6 custom-tile-text text-grey-900 whitespace-nowrap overflow-hidden text-ellipsis"
+                    onClick={() => handleDayDataClick(day.programIdx)}
+                  >
+                    {day.name}
+                  </div>
+                </div>
+              );
+            })}
           </div>
         );
       }
@@ -96,9 +112,10 @@ const StyledCalendarWrapper = styled.div`
   .custom-tile-content {
     /* position: absolute; */
     display: flex;
+    flex-direction: column;
     justify-content: center;
-    align-items: center;
     z-index: 1;
+    gap: 1px;
   }
 
   .custom-tile-text {