Merge pull request #37 from team-Ollie/15-feature-Calendar-Detail-Modal

15 feature calendar detail modal
team-Ollie · Jul 2, 2024 · 48a3ad8 · 48a3ad8
2 parents b87d07e + b2ea71e
commit 48a3ad8
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 120 deletions.
diff --git a/apis/calendar.ts b/apis/calendar.ts
@@ -41,14 +41,12 @@ interface GetProgramDetailBody {
 // 챌린지 월별 조회
 export const getMonthCalendar = async (): Promise<GetMonthCalendarResponse> => {
   const response = await client.get("/programs/list");
-  // 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`);
+  const response = await client.get(`/programs/${programIdx}`);
   return response.data.result;
 };
diff --git a/apis/challenge.ts b/apis/challenge.ts
@@ -35,20 +35,24 @@ async function getMyChallengeList(): Promise<GetMyChallengeListResponse> {
   return data;
 }
 
-type AttendanceDate = {
+export type AttendanceDate = {
   year: number;
   month: number;
   day: number;
 };
 
 export interface GetChallengeDetailBody {
-  attendanceDate: AttendanceDate;
+  name: string;
+  participantsCount: number;
+  attendanceList: AttendanceDate[];
+  totalAchievementRate: number;
+  myAchievementRate: number;
 }
 
-async function getChallengDetail(): Promise<GetChallengeDetailBody> {
-  const response = await client.get(
-    `/challenges/attendance/2?year=2024&month=6`,
-  );
+async function getChallengDetail(
+  challengeIdx: string | string[],
+): Promise<GetChallengeDetailBody> {
+  const response = await client.get(`/challenges/attendance/${challengeIdx}`);
   return response.data.result;
 }
 

diff --git a/apis/hooks/calendar.ts b/apis/hooks/calendar.ts
@@ -6,21 +6,17 @@ const useGetMonthCalendar = () => {
     queryKey: ["getMonthCalendar"],
     queryFn: getMonthCalendar,
   });
-  // console.log("isLoading", isLoading);
-  console.log("Query Data", data);
   return { data };
 };
 
 export { useGetMonthCalendar };
 
-// const useGetProgramDetail = () => {
-//   const { data } = useQuery({
-//     queryKey: ["getProgramDetail"],
-//     queryFn: getProgramDetail,
-//   });
-//   // console.log("isLoading", isLoading);
-//   console.log("Query Data", data);
-//   return { data };
-// };
+const useGetProgramDetail = (programIdx: number) => {
+  const { data } = useQuery({
+    queryKey: ["getProgramDetail"],
+    queryFn: () => getProgramDetail(programIdx),
+  });
+  return { data };
+};
 
-// export { useGetProgramDetail };
+export { useGetProgramDetail };
diff --git a/apis/hooks/challenge.ts b/apis/hooks/challenge.ts
@@ -18,10 +18,10 @@ function useGetMyChallengeList() {
   return { data };
 }
 
-function useGetChallengeDetail() {
+function useGetChallengeDetail(challengeIdx: string | string[]) {
   const { data } = useQuery({
     queryKey: ["getChallengeDetail"],
-    queryFn: getChallengDetail,
+    queryFn: () => getChallengDetail(challengeIdx),
   });
   return { data };
 }

diff --git a/components/calendar/FilterBox.tsx b/components/calendar/FilterBox.tsx
@@ -3,18 +3,20 @@ import FilterArrow from "@/public/svgs/FilterArrow.svg";
 const FilterBox = ({
   filterName,
   onClick,
+  handleSelect,
 }: {
   filterName: string;
-  onClick: () => void;
+  onClick: () => void | null;
+  handleSelect: (e) => void;
 }) => {
   return (
-    <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"
+    <select
+      value={filterName}
+      onChange={handleSelect}
+      className="dropdown 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>
+    </select>
   );
 };
 

diff --git a/components/calendar/InfoCalendar.tsx b/components/calendar/InfoCalendar.tsx
@@ -6,16 +6,12 @@ import { useGetMonthCalendar } from "@/apis/hooks/calendar";
 import { MonthCalendarProps } from "@/apis/calendar";
 import Dot from "@/public/svgs/Dot.svg";
 
-export default function InfoCalendar() {
+export default function InfoCalendar({ filterTag }: { filterTag: string }) {
   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);
   };
@@ -29,7 +25,17 @@ export default function InfoCalendar() {
 
   const customTileContent = ({ date, view }: { date: Date; view: string }) => {
     if (Array.isArray(data) && view === "month") {
-      const dayData = data.filter((dayData: MonthCalendarProps) => {
+      let filteredData = data.filter((dayData: MonthCalendarProps) => {
+        console.log(filterTag);
+        return dayData.category === filterTag || dayData.location === filterTag;
+      });
+
+      // 필터링된 데이터가 없으면 전체 데이터 반환하도록
+      if (filteredData.length === 0) {
+        filteredData = data;
+      }
+
+      const dayData = filteredData.filter((dayData: MonthCalendarProps) => {
         const openDate = new Date(
           dayData.openDate.year,
           dayData.openDate.month - 1,
@@ -59,7 +65,7 @@ export default function InfoCalendar() {
                   day.openDate.month - 1,
                   day.openDate.day,
                 ).getTime();
-              console.log(day);
+              // console.log(day);
               return (
                 <div key={index} className="flex flex-row items-center gap-1">
                   <Dot color={isOpen ? "#F06459" : "#8E8E93"} />
@@ -79,6 +85,10 @@ export default function InfoCalendar() {
     return null;
   };
 
+  const disableAllDates = ({ date }) => {
+    return true;
+  };
+
   return (
     <div className="flex justify-center items-center flex-grow w-full h-full">
       <StyledCalendarWrapper>
@@ -91,6 +101,7 @@ export default function InfoCalendar() {
           minDate={new Date(2024, 4, 1)}
           formatDay={(locale, date) => moment(date).format("DD")}
           tileContent={customTileContent}
+          tileDisabled={disableAllDates}
         />
       </StyledCalendarWrapper>
     </div>

diff --git a/components/challenge/AwardBox.tsx b/components/challenge/AwardBox.tsx
@@ -1,7 +1,7 @@
 interface AwardProps {
   style?: string;
   text: string;
-  percent: string;
+  percent: number;
 }
 
 export default function AwardBox({ style, text, percent }: AwardProps) {
@@ -14,7 +14,7 @@ export default function AwardBox({ style, text, percent }: AwardProps) {
         <br />
       </span>
       <span className="font-bold text-black text-[28px] tracking-[-0.09px]">
-        {percent}
+        {percent}%
       </span>
     </p>
   );

diff --git a/components/challenge/ChallengeCalendar.tsx b/components/challenge/ChallengeCalendar.tsx
@@ -3,9 +3,13 @@ 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";
+import { AttendanceDate } from "@/apis/challenge";
 
-export default function ChallengeCalendar() {
+export default function ChallengeCalendar({
+  attendanceInfo,
+}: {
+  attendanceInfo: AttendanceDate[];
+}) {
   type DatePiece = Date | null;
   type SelectedDate = DatePiece | [DatePiece, DatePiece];
 
@@ -15,16 +19,17 @@ export default function ChallengeCalendar() {
     setClickedDate(clickedDate);
   };
 
-  // API 관리
-  const { data } = useGetChallengeDetail();
+  const disableAllDates = ({ date }) => {
+    return true;
+  };
 
   const customTileContent = ({ date, view }: { date: Date; view: string }) => {
-    if (Array.isArray(data) && view === "month") {
-      const matchedData = data.find((challenge: GetChallengeDetailBody) => {
+    if (Array.isArray(attendanceInfo) && view === "month") {
+      const matchedData = attendanceInfo.find((challenge) => {
         const attendanceDate = new Date(
-          challenge.attendanceDate.year,
-          challenge.attendanceDate.month - 1,
-          challenge.attendanceDate.day,
+          challenge.year,
+          challenge.month - 1,
+          challenge.day,
         );
         return attendanceDate.getTime() === date.getTime();
       });
@@ -53,6 +58,7 @@ export default function ChallengeCalendar() {
           prev2Label={null}
           minDate={new Date(2024, 4, 1)}
           tileContent={customTileContent}
+          tileDisabled={disableAllDates}
         />
       </StyledCalendarWrapper>
     </div>

diff --git a/components/home/challenge.tsx b/components/home/challenge.tsx
@@ -19,7 +19,7 @@ const Challenge: NextPage<ChallengeProps> = ({
       <FlexBox
         direction="col"
         className="w-full gap-1"
-        onClick={() => router.push("/challenge")}
+        onClick={() => router.push(`/challenge?idx=${challengeInfo.challengeIdx}`)}
       >
         <FlexBox className="w-full justify-between items-start">
           <div className="h2">{challengeInfo.name}</div>
@@ -34,7 +34,7 @@ const Challenge: NextPage<ChallengeProps> = ({
       <FlexBox direction="col" className="w-full gap-1">
         <FlexBox
           className="w-full items-start justify-between"
-          onClick={() => router.push("/challenge")}
+          onClick={() => router.push(`/challenge?idx=${challengeInfo.challengeIdx}`)}
         >
           <FlexBox className="gap-1">
             <div className="h5 text-grey-500">개인달성률</div>

diff --git a/pages/calendar.tsx b/pages/calendar.tsx
@@ -11,17 +11,21 @@ interface DropProps {
   regionDrop: boolean;
 }
 
-const categories = ["운동", "예술", "학술", "기타"];
-const locations = ["서울", "경기", "그 외"];
+const categories = ["카테고리", "운동", "예술", "학술", "기타"];
+const locations = ["지역", "서울", "경기", "그 외"];
 
 const CalendarPage: NextPage = () => {
-  const date = new Date();
-  console.log(date);
-
   const [isDrop, setIsDrop] = useState<DropProps>({
     categoryDrop: false,
     regionDrop: false,
   });
+  const [isIndex, setIsIndex] = useState<number>(-1);
+  const [selected, setSelected] = useState("");
+
+  const handleSelect = (e) => {
+    console.log(selected);
+    setSelected(e.target.value);
+  };
 
   const toggleDrop = (dropName: string) => {
     setIsDrop((prev: DropProps) => ({ ...prev, [dropName]: !prev[dropName] }));
@@ -32,53 +36,43 @@ const CalendarPage: NextPage = () => {
       <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-[1rem] gap-3">
-          <div className="">
-            <FilterBox
-              filterName="카테고리"
-              onClick={() => {
-                toggleDrop("categoryDrop");
-                console.log("category");
-              }}
-            />
-            {isDrop.categoryDrop ? (
-              <ul className="absolute bg-white w-[5rem] text-center top-[7rem]">
-                {categories.map((option, index) => (
-                  <li
-                    key={index}
-                    className="cursor-pointer hover:bg-gray-200"
-                    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>
+          {isDrop && (
+            <select
+              value={selected}
+              onChange={handleSelect}
+              className="dropdown w-fit h-[1.9rem] flex justify-center items-center text-center bg-main-color rounded-3xl text-white py-[0.31rem] pl-[0.94rem] pr-[0.44rem] gap-0.5"
+            >
+              {categories.map((opt, index) => (
+                <option
+                  key={index}
+                  className="h3 cursor-pointer hover:bg-gray-100"
+                  value={opt}
+                >
+                  {opt}
+                </option>
+              ))}
+            </select>
+          )}
+
+          <select
+            value={selected}
+            onChange={handleSelect}
+            className="dropdown w-fit h-[1.9rem] flex justify-center items-center text-center bg-main-color rounded-3xl text-white py-[0.31rem] pl-[0.94rem] pr-[0.44rem] gap-0.5"
+          >
+            {locations.map((opt, index) => (
+              <option
+                key={index}
+                className="h3 cursor-pointer hover:bg-gray-100"
+                value={opt}
+              >
+                {opt}
+              </option>
+            ))}
+          </select>
         </div>
 
         <div className="flex w-full">
-          <InfoCalendar />
+          <InfoCalendar filterTag={selected} />
         </div>
       </div>