13 feature challenge calendar api

apis/calendar.ts

@@ -48,6 +48,5 @@ export const getProgramDetail = async (
 ): 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/challenge.ts

@@ -30,6 +30,23 @@ async function getMyChallengeList(): Promise<GetMyChallengeListResponse> {
   return data;
 }
 
+type AttendanceDate = {
+  year: number;
+  month: number;
+  day: number;
+};
+
+export interface GetChallengeDetailBody {
+  attendanceDate: AttendanceDate;
+}
+
+async function getChallengDetail(): Promise<GetChallengeDetailBody> {
+  const response = await client.get(
+    `/challenges/attendance/2?year=2024&month=6`,
+  );
+  return response.data.result;
+}
+
 async function getChallengeAds(): Promise<GetChallengeAdsResponse> {
   const { data } = await client.get(`/challenges/ads`);
   return data;
@@ -54,4 +71,5 @@ export {
   getChallengeAds,
   getChallengeSearch,
   postNewChallenge,
+  getChallengDetail
 };

apis/hooks/challenge.ts

@@ -3,9 +3,11 @@ import {
   getChallengeSearch,
   getMyChallengeList,
   postNewChallenge,
+  getChallengDetail,
 } from "../challenge";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
+
 function useGetMyChallengeList() {
   const { data } = useQuery({
     queryKey: ["getMyChallengeList"],
@@ -15,6 +17,14 @@ function useGetMyChallengeList() {
   return { data };
 }
 
+function useGetChallengeDetail() {
+  const { data } = useQuery({
+    queryKey: ["getChallengeDetail"],
+    queryFn: getChallengDetail,
+  });
+  return { data };
+}
+
 function useGetChallengeAds() {
   const { data } = useQuery({
     queryKey: ["getChallengeAds"],
@@ -59,4 +69,6 @@ export {
   useGetChallengeAds,
   useGetChallengeSearch,
   usePostNewChallenge,
+  useGetChallengeDetail,
 };
+

components/calendar/FilterBox.tsx

@@ -1,8 +1,17 @@
 import FilterArrow from "@/public/svgs/FilterArrow.svg";
 
-const FilterBox = ({ filterName }) => {
+const FilterBox = ({
+  filterName,
+  onClick,
+}: {
+  filterName: string;
+  onClick: () => void;
+}) => {
   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
+      onClick={onClick}
+      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>
       <FilterArrow />
     </div>

components/calendar/InfoCalendar.tsx

@@ -80,7 +80,7 @@ export default function InfoCalendar() {
   };
 
   return (
-    <div className="flex justify-center items-center">
+    <div className="flex justify-center items-center flex-grow w-full h-full">
       <StyledCalendarWrapper>
         <Calendar
           onChange={onChangeToday}
@@ -113,9 +113,10 @@ const StyledCalendarWrapper = styled.div`
     /* position: absolute; */
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     z-index: 1;
     gap: 1px;
+    height: 100%;
   }
 
   .custom-tile-text {
@@ -124,6 +125,13 @@ const StyledCalendarWrapper = styled.div`
     flex-wrap: wrap;
   }
 
+  .react-calendar__viewContainer {
+    display: flex;
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
+  }
+
   /* 년도, 월 */
   .react-calendar__navigation {
     display: flex;
@@ -158,6 +166,7 @@ const StyledCalendarWrapper = styled.div`
 
   .react-calendar__month-view__days {
     border: 0.5px rgba(244, 138, 130, 0.16) solid;
+    height: 100%;
   }
 
   .react-calendar__month-view__days__day--neighboringMonth
@@ -184,6 +193,7 @@ const StyledCalendarWrapper = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 100%;
   }
 
   .react-calendar__month-view__weekdays {
@@ -197,7 +207,7 @@ const StyledCalendarWrapper = styled.div`
   .react-calendar__tile {
     text-align: center;
     width: 2.5rem;
-    height: 6.6rem;
+    height: 5.69rem;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;

components/challenge/ChallengeCalendar.tsx

@@ -2,6 +2,8 @@ import Calendar from "react-calendar";
 import { useState } from "react";
 import styled from "styled-components";
 import LogoMark from "@/public/svgs/LogoMark.svg";
+import { useGetChallengeDetail } from "@/apis/hooks/challenge";
+import { GetChallengeDetailBody } from "@/apis/challenge";
 
 export default function ChallengeCalendar() {
   type DatePiece = Date | null;
@@ -13,18 +15,29 @@ export default function ChallengeCalendar() {
     setClickedDate(clickedDate);
   };
 
-  const customTileContent = ({ date, view }) => {
-    // if (view === 'month' && DatesList.some(d => d.getTime() === date.getTime())) {
-
-    const customDate = new Date(2024, 5, 19);
-    if (view === "month" && date.getTime() === customDate.getTime()) {
-      return (
-        <div className="custom-tile-content">
-          <div className="custom-image">
-            <LogoMark width="2.75rem" height="2.75rem" />
+  // API 관리
+  const { data } = useGetChallengeDetail();
+
+  const customTileContent = ({ date, view }: { date: Date; view: string }) => {
+    if (Array.isArray(data) && view === "month") {
+      const matchedData = data.find((challenge: GetChallengeDetailBody) => {
+        const attendanceDate = new Date(
+          challenge.attendanceDate.year,
+          challenge.attendanceDate.month - 1,
+          challenge.attendanceDate.day,
+        );
+        return attendanceDate.getTime() === date.getTime();
+      });
+
+      if (matchedData) {
+        return (
+          <div className="custom-tile-content">
+            <div className="custom-image">
+              <LogoMark width="2.75rem" height="2.75rem" />
+            </div>
           </div>
-        </div>
-      );
+        );
+      }
     }
     return null;
   };
@@ -158,8 +171,8 @@ const StyledCalendarWrapper = styled.div`
   /* 일 */
   .react-calendar__tile {
     text-align: center;
-    width: 2.5rem;
-    height: 3.75rem;
+    width: 3.25rem;
+    height: 3.25rem;
     display: flex;
     flex-direction: column;
     justify-content: center;

pages/calendar.tsx

@@ -1,24 +1,83 @@
 import FlexBox from "@/components/Flexbox";
 import HeadFunction from "@/components/HeadFunction";
 import NavBar from "@/components/NavBar";
-
+import { useState, useEffect, useCallback, useRef } from "react";
 import FilterBox from "@/components/calendar/FilterBox";
 import InfoCalendar from "@/components/calendar/InfoCalendar";
 import { NextPage } from "next";
 
+interface DropProps {
+  categoryDrop: boolean;
+  regionDrop: boolean;
+}
+
+const categories = ["운동", "예술", "학술"];
+const locations = ["서울", "경기", "그 외"];
+
 const CalendarPage: NextPage = () => {
   const date = new Date();
   console.log(date);
+
+  const [isDrop, setIsDrop] = useState<DropProps>({
+    categoryDrop: false,
+    regionDrop: false,
+  });
+
+  const toggleDrop = (dropName: string) => {
+    setIsDrop((prev: DropProps) => ({ ...prev, [dropName]: !prev[dropName] }));
+  };
+
   return (
     <div className="flex flex-col w-full h-screen pb-[4rem]">
       <HeadFunction title="캘린더" />
       <div className="flex flex-col flex-grow pt-[1.5rem] items-center overflow-auto scrollbar-hide">
-        <div className="h-fit w-full flex flex-row justify-start items-end px-[2rem] gap-3">
-          <FilterBox filterName="카테고리" />
-          <FilterBox filterName="지역" />
+        <div className="h-fit w-full flex flex-row justify-start items-end px-[1rem] gap-3">
+          <div>
+            <FilterBox
+              filterName="카테고리"
+              onClick={() => {
+                toggleDrop("categoryDrop");
+                console.log("category");
+              }}
+            />
+            {isDrop.categoryDrop ? (
+              <ul className="absolute top-[8rem]">
+                {categories.map((option, index) => (
+                  <li
+                    key={index}
+                    className="cursor-pointer hover:bg-gray-200 p-2"
+                    onClick={() => {}}
+                  >
+                    {option}
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
+          <div>
+            <FilterBox
+              filterName="지역"
+              onClick={() => {
+                setIsDrop({ ...isDrop, regionDrop: !isDrop.regionDrop });
+              }}
+            />
+            {isDrop.regionDrop ? (
+              <ul className="absolute top-[8rem]">
+                {locations.map((option, index) => (
+                  <li
+                    key={index}
+                    className="cursor-pointer hover:bg-gray-200 p-2"
+                    onClick={() => {}}
+                  >
+                    {option}
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
         </div>
 
-        <div className="flex mt-[0rem]">
+        <div className="flex w-full">
           <InfoCalendar />
         </div>
       </div>