From d951e920c9704d2ea250dce8ba31323d4dba2b3f Mon Sep 17 00:00:00 2001 From: yoonseokgyu Date: Wed, 4 Oct 2023 15:32:08 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[fix]=20:=20useCalendar=20=ED=9B=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 월별 날짜 표시 계산 로직 수정 (days) --- src/utils/hooks/use-calendar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/utils/hooks/use-calendar.tsx b/src/utils/hooks/use-calendar.tsx index b47d696..0fcaaef 100644 --- a/src/utils/hooks/use-calendar.tsx +++ b/src/utils/hooks/use-calendar.tsx @@ -24,8 +24,8 @@ const useCalendar = () => { (month === 'NEXT' && newDate.month + 1) || newDate.month; - newDate.day = value; newDate.month = newMonth - 1; + newDate.day = value; setDate(newDate); setSelectedDate(newDate.format('YYYY-MM-DD')); @@ -53,12 +53,12 @@ const useCalendar = () => { const convertToFormat = (day: number) => { const isLastMonth = day < 0; - const isNextMonth = day > lastDayOfThisMonth(); + const isNextMonth = day > lastDayOfThisMonth() - 1; return { value: (isLastMonth && day + lastDayofLasMonth() + 1) || - (isNextMonth && day - lastDayOfThisMonth()) || + (isNextMonth && day - lastDayOfThisMonth() + 1) || day + 1, month: (isLastMonth && 'LAST') || (isNextMonth && 'NEXT') || 'CURRENT', } as State; @@ -69,7 +69,7 @@ const useCalendar = () => { const days: State[][] = []; const start = -1 * firstWeekOfThisMonth(); - const end = lastDayOfThisMonth() + lastWeekOfThisMonth(); + const end = lastDayOfThisMonth() + (6 - lastWeekOfThisMonth()); for (let day = start; day < end; day += 1) { const week = convertToFormat(day); From d3e176a8599b7ff15bf6c804d2c72f5fab7ee697 Mon Sep 17 00:00:00 2001 From: yoonseokgyu Date: Wed, 4 Oct 2023 15:33:22 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[feat]=20:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=EC=9D=BC=EC=A0=95=20=EC=A1=B0=ED=9A=8C=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 임시 주석 처리 --- src/api/calendar/calendar.tsx | 35 ++++++++++++++ src/api/index.ts | 6 +++ src/components/page/home/calendar/index.tsx | 48 ++++++++++++++++--- .../page/home/calendar/mark/index.tsx | 5 +- src/pages/_app.tsx | 18 ++++--- 5 files changed, 96 insertions(+), 16 deletions(-) create mode 100644 src/api/calendar/calendar.tsx create mode 100644 src/api/index.ts diff --git a/src/api/calendar/calendar.tsx b/src/api/calendar/calendar.tsx new file mode 100644 index 0000000..c8b8269 --- /dev/null +++ b/src/api/calendar/calendar.tsx @@ -0,0 +1,35 @@ +import { useQuery } from '@tanstack/react-query'; +import { axiosRequest } from '../index'; +import { ApiResponse } from '@/types/api.types'; + +type CalendarEventsProps = { + pet_id: number; + year: number; + month: number; +}; + +type CalendarEventsResponse = { + date: string; + event_exist: boolean; + diary_exist: boolean; +}; + +export const calendarEvents = ( + props: CalendarEventsProps +): Promise> => { + const data = { + ...props, + }; + + return axiosRequest.get('/calendar', { data }); +}; + +export const useCalendarEvents = (props: CalendarEventsProps) => { + return useQuery( + ['calendar-events', props.pet_id], + () => calendarEvents({ ...props }), + { + enabled: Boolean(props.pet_id), + } + ); +}; diff --git a/src/api/index.ts b/src/api/index.ts new file mode 100644 index 0000000..686b87f --- /dev/null +++ b/src/api/index.ts @@ -0,0 +1,6 @@ +import axios from 'axios'; + +export const axiosRequest = axios.create({ + // baseURL: 'https://some-domain.com/api/', + // headers: { 'X-Custom-Header': 'foobar' }, +}); diff --git a/src/components/page/home/calendar/index.tsx b/src/components/page/home/calendar/index.tsx index 6d85fc0..5453391 100644 --- a/src/components/page/home/calendar/index.tsx +++ b/src/components/page/home/calendar/index.tsx @@ -1,11 +1,16 @@ -import useCalendar, { State } from '@/utils/hooks/use-calendar'; -import style from './calendar.module.css'; -import cn from 'classnames'; import { MouseEventHandler } from 'react'; +import cn from 'classnames'; + +import useCalendar, { State } from '@/utils/hooks/use-calendar'; +import { calendarEvents, useCalendarEvents } from '@/api/calendar/calendar'; import LeftIcon from 'public/icons/arrow_left.svg'; import RightIcon from 'public/icons/arrow_right.svg'; +import Mark from './mark'; +import style from './calendar.module.css'; +import { QueryClient, dehydrate } from '@tanstack/react-query'; + type CalendarProps = { className?: string; }; @@ -14,6 +19,14 @@ const Calendar = ({ className }: CalendarProps) => { const { days, weeks, changeDate, date, goToNextMonth, goToPrevMonth } = useCalendar(); + const { data: eventInfo } = useCalendarEvents({ + pet_id: 0, + year: date.year, + month: date.month, + }); + + const events = eventInfo?.data; + const onDateClick: MouseEventHandler = (event) => { const target = event.target as HTMLElement; const { day, month } = target.dataset; @@ -63,12 +76,12 @@ const Calendar = ({ className }: CalendarProps) => { })} - {days.map((week) => { + {days.map((week, idx) => { return ( -
    +
      {week.map(({ value, month }) => { return ( -
    • +
    • { month === 'CURRENT' && date.day === value, })}> {value} + {events && + (() => { + const matcher = value - 1; + const { event_exist, diary_exist } = + events?.[matcher]; + const items = [ + event_exist && 'TODO', + diary_exist && 'DIARY', + ].filter(Boolean) as ('TODO' | 'DIARY')[]; + + return ; + })()}
      • ); @@ -93,3 +118,14 @@ const Calendar = ({ className }: CalendarProps) => { }; export default Calendar; + +export const getServerSideProps = async () => { + // const queryClient = new QueryClient(); + // queryClient.prefetchQuery(['calendar-events', id], () => calendarEvents()); + + return { + props: { + // dehydratedState: dehydrate(), + }, + }; +}; diff --git a/src/components/page/home/calendar/mark/index.tsx b/src/components/page/home/calendar/mark/index.tsx index fd5942b..fa35c56 100644 --- a/src/components/page/home/calendar/mark/index.tsx +++ b/src/components/page/home/calendar/mark/index.tsx @@ -9,9 +9,6 @@ const Mark = ({ items }: MarkProps) => { {type === 'TODO' && (
      )} - {type === 'PICTURE' && ( -
      - )} {type === 'DIARY' && (
      )} @@ -23,7 +20,7 @@ const Mark = ({ items }: MarkProps) => { }; type MarkProps = { - items: ('TODO' | 'PICTURE' | 'DIARY')[]; + items: ('TODO' | 'DIARY')[]; }; export default Mark; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index dab598b..807eb37 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -6,7 +6,11 @@ import HomeHeader from '@/components/headers/home'; import type { NextPage } from 'next'; import { useEffect, type ReactElement } from 'react'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { + Hydrate, + QueryClient, + QueryClientProvider, +} from '@tanstack/react-query'; import { RecoilRoot } from 'recoil'; import { serviceWorker } from '@mocks/browser'; @@ -32,11 +36,13 @@ export default function App({ Component, pageProps }: AppPropsWithHeader) { return ( - - - - - + + + + + + + ); }