Merge pull request #23 from team-Ollie/13-feature-Calendar-Modal

13 feature calendar modal

Author: leejin-rho

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

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

components/calendar/CalendarModal.tsx

@@ -0,0 +1,9 @@
+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">
+      <div>{filterName}</div>
+    </div>
+  );
+};
+
+export default CalendarModal;

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) => {
+    if (Array.isArray(data) && view === "month") {
+      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 {

package.json

@@ -45,6 +45,7 @@
     "@yarnpkg/pnpify": "^4.1.0",
     "eslint": "8.54.0",
     "eslint-config-next": "14.0.3",
+    "eslint-plugin-react": "^7.34.3",
     "typescript": "5.4.5"
   },
   "packageManager": "[email protected]"

pages/login.tsx

@@ -44,7 +44,7 @@ const Login: NextPage = () => {
   );
 
   const signInMutation = useMutation({
-    queryKey: ["SignIn"],
+    mutationKey: ["SignIn"],
     mutationFn: SignIn,
     onSuccess: async (data) => {
       console.log(data);

yarn.lock

@@ -4029,7 +4029,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.33.2":
+"eslint-plugin-react@npm:^7.33.2, eslint-plugin-react@npm:^7.34.3":
   version: 7.34.3
   resolution: "eslint-plugin-react@npm:7.34.3"
   dependencies:
@@ -7677,6 +7677,7 @@ __metadata:
     embla-carousel-react: "npm:^8.1.3"
     eslint: "npm:8.54.0"
     eslint-config-next: "npm:14.0.3"
+    eslint-plugin-react: "npm:^7.34.3"
     gh-pages: "npm:^6.1.1"
     jotai: "npm:^2.8.3"
     lottie-web: "npm:^5.12.2"