From e844d723c0b3c7a05916b7cb4b583f5ff8b8d371 Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Wed, 26 Jun 2024 15:14:54 +0900 Subject: [PATCH 1/2] =?UTF-8?q?#16=20feat:=20calendar=ED=83=AD=20api=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/auth.tsx | 2 +- apis/calendar.ts | 27 ++++++++++++ apis/hooks/calendar.ts | 14 +++++++ components/NavBar.tsx | 2 +- components/calendar/InfoCalendar.tsx | 63 ++++++++++++++++++++++++++++ pages/calendar.tsx | 2 + pages/login.tsx | 2 +- public/svgs/Dot.svg | 5 +++ 8 files changed, 114 insertions(+), 3 deletions(-) create mode 100644 apis/calendar.ts create mode 100644 apis/hooks/calendar.ts create mode 100644 public/svgs/Dot.svg diff --git a/apis/auth.tsx b/apis/auth.tsx index a8f5757..d88d664 100644 --- a/apis/auth.tsx +++ b/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) { // 요청이 전송되었으나 응답을 받지 못한 경우 diff --git a/apis/calendar.ts b/apis/calendar.ts new file mode 100644 index 0000000..fb0325b --- /dev/null +++ b/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 => { + const response = await client.get("/programs", {}); + // console.log("calenderData", response.data.result); + return response.data.result; +}; diff --git a/apis/hooks/calendar.ts b/apis/hooks/calendar.ts new file mode 100644 index 0000000..d994897 --- /dev/null +++ b/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 }; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index ed7d0c8..28176bd 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -19,7 +19,7 @@ const NavBar = () => { return (
(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 ( +
+
+ + {dayData.name} +
+
+ ); + } + } + return null; + }; + return (
@@ -24,6 +72,7 @@ export default function InfoCalendar() { prev2Label={null} minDate={new Date(2024, 4, 1)} formatDay={(locale, date) => moment(date).format("DD")} + tileContent={customTileContent} />
@@ -42,6 +91,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; diff --git a/pages/calendar.tsx b/pages/calendar.tsx index eab1a6d..303a9bb 100644 --- a/pages/calendar.tsx +++ b/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 (
diff --git a/pages/login.tsx b/pages/login.tsx index 9deb870..779cd6d 100644 --- a/pages/login.tsx +++ b/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("로그인에 성공하였습니다"); diff --git a/public/svgs/Dot.svg b/public/svgs/Dot.svg new file mode 100644 index 0000000..3780dcd --- /dev/null +++ b/public/svgs/Dot.svg @@ -0,0 +1,5 @@ + + + + + From 32531234f1eb3e20f2cee28722c55bcd92027ab0 Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Thu, 27 Jun 2024 10:05:22 +0900 Subject: [PATCH 2/2] =?UTF-8?q?#16=20style:=20=EC=BA=98=EB=A6=B0=EB=8D=94?= =?UTF-8?q?=20=EB=82=B4=EB=B6=80=20=EC=9D=BC=EC=A0=95=EC=9D=B4=20=EA=B8=B8?= =?UTF-8?q?=EC=96=B4=EC=A7=80=EB=A9=B4=20hidden?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/calendar/InfoCalendar.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/calendar/InfoCalendar.tsx b/components/calendar/InfoCalendar.tsx index 3993b8d..82a928f 100644 --- a/components/calendar/InfoCalendar.tsx +++ b/components/calendar/InfoCalendar.tsx @@ -50,9 +50,11 @@ export default function InfoCalendar() { if (dayData) { return (
-
+
- {dayData.name} +
+ {dayData.name} +
);