Merge pull request #1 from dbstjrrb12/17-page-home/api

캘린더 - 캘린더 훅 수정 및 API 쿼리 연결
heypets · Oct 4, 2023 · 7fd42d0 · 7fd42d0
2 parents f9271a4 + d3e176a
commit 7fd42d0
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 20 deletions.
diff --git a/src/api/calendar/calendar.tsx 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<ApiResponse<CalendarEventsResponse[]>> => {
+  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
@@ -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
@@ -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) => {
           })}
         </ul>
 
-        {days.map((week) => {
+        {days.map((week, idx) => {
           return (
-            <ul key={`${week[0].value}`} className={style.days}>
+            <ul key={`${date.month}_${idx}`} className={style.days}>
               {week.map(({ value, month }) => {
                 return (
-                  <li key={`${month}_${value}`}>
+                  <li key={`${date.month}_${value}`}>
                     <div
                       data-day={value}
                       data-month={month}
@@ -80,6 +93,18 @@ const Calendar = ({ className }: CalendarProps) => {
                           month === 'CURRENT' && date.day === value,
                       })}>
                       <span>{value}</span>
+                      {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 <Mark items={items} />;
+                        })()}
                     </div>
                   </li>
                 );
@@ -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
@@ -9,9 +9,6 @@ const Mark = ({ items }: MarkProps) => {
             {type === 'TODO' && (
               <div key={type} aria-label="일정" className={style.todo} />
             )}
-            {type === 'PICTURE' && (
-              <div key={type} aria-label="사진" className={style.picture} />
-            )}
             {type === 'DIARY' && (
               <div key={type} aria-label="일기" className={style.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
@@ -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 (
     <QueryClientProvider client={queryClient}>
-      <RecoilRoot>
-        <Layout header={header}>
-          <Component {...pageProps} />
-        </Layout>
-      </RecoilRoot>
+      <Hydrate state={pageProps.dehydratedState}>
+        <RecoilRoot>
+          <Layout header={header}>
+            <Component {...pageProps} />
+          </Layout>
+        </RecoilRoot>
+      </Hydrate>
     </QueryClientProvider>
   );
 }

diff --git 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);