From 0f07c2d337f869b70c30796d4e70ee7481635947 Mon Sep 17 00:00:00 2001
From: useruseruse <eliza1102@kaist.ac.kr>
Date: Wed, 18 Sep 2024 14:24:01 -0400
Subject: [PATCH 1/2] fix: change base to latest origin migration

---
 src/pages/MainPage.jsx | 303 -----------------------------------------
 src/pages/MainPage.tsx | 167 +++++++++++++++++++++++
 src/queries/main.ts    |  55 ++++++++
 3 files changed, 222 insertions(+), 303 deletions(-)
 delete mode 100644 src/pages/MainPage.jsx
 create mode 100644 src/pages/MainPage.tsx
 create mode 100644 src/queries/main.ts

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
deleted file mode 100644
index ee087d7..0000000
--- a/src/pages/MainPage.jsx
+++ /dev/null
@@ -1,303 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { withTranslation } from 'react-i18next';
-import PropTypes, { bool } from 'prop-types';
-import axios from 'axios';
-import { range } from 'lodash';
-
-import { ZaboEmbed } from 'zabo-embed';
-
-import { appBoundClassNames as classNames } from '../common/boundClassNames';
-
-import Footer from '../common/guideline/components/Footer';
-import TodaysTimetableSection from '../components/sections/main/TodaysTimetableSection';
-import AcademicScheduleSection from '../components/sections/main/AcademicScheduleSection';
-import RelatedCourseFeedSection from '../components/sections/main/RelatedCourseFeedSection';
-import LatestReviewSection from '../components/sections/main/LatestReviewSection';
-import FamousMajorReviewFeedSection from '../components/sections/main/FamousMajorReviewFeedSection';
-import FamousHumanityReviewFeedSection from '../components/sections/main/FamousHumanityReviewFeedSection';
-import RankedReviewFeedSection from '../components/sections/main/RankedReviewFeedSection';
-import ReviewWriteFeedSection from '../components/sections/main/ReviewWriteFeedSection';
-import MainSearchSection from '../components/sections/main/MainSearchSection';
-import userShape from '../shapes/model/session/UserShape';
-import NoticeSection from '../components/sections/main/NoticeSection';
-import RateFeedSection from '../components/sections/main/RateFeedSection';
-
-class MainPage extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      feedDays: [],
-      notices: null,
-      isLoading: false,
-    };
-
-    this.contentRef = React.createRef();
-  }
-
-  componentDidMount() {
-    const { user } = this.props;
-
-    window.addEventListener('scroll', this.handleScroll);
-
-    const today = new Date();
-    if (user) {
-      this._fetchFeeds(today);
-    }
-    this._fetchNotices();
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    const { user } = this.props;
-
-    const today = new Date();
-    if (user && !prevProps.user) {
-      this._fetchFeeds(today);
-    }
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.handleScroll);
-  }
-
-  handleScroll = (e) => {
-    this._checkAndLoadFeeds();
-  };
-
-  _checkAndLoadFeeds = () => {
-    const { isLoading } = this.state;
-    const { user } = this.props;
-    const SCROLL_BOTTOM_PADDING = 100;
-
-    if (isLoading) {
-      return;
-    }
-    if (!user) {
-      return;
-    }
-
-    const columns = Array.from(
-      this.contentRef.current.querySelectorAll(`.${classNames('page-grid--main')} > div`),
-    );
-
-    const isBottomReached = columns.some(
-      (cl) => cl.lastChild.getBoundingClientRect().top < window.innerHeight + SCROLL_BOTTOM_PADDING,
-    );
-    if (isBottomReached) {
-      this._fetchFeeds(this._getPrevDate());
-    }
-  };
-
-  _getPrevDate = () => {
-    const { feedDays } = this.state;
-    const targetDate = new Date(feedDays[feedDays.length - 1].date);
-    targetDate.setDate(targetDate.getDate() - 1);
-    return targetDate;
-  };
-
-  _fetchFeeds = (date) => {
-    const { feedDays, isLoading } = this.state;
-    const { user } = this.props;
-
-    if (isLoading) {
-      return;
-    }
-    if (!user) {
-      return;
-    }
-    if (this._getDateDifference(date) >= 14) {
-      return;
-    }
-
-    this.setState({
-      isLoading: true,
-    });
-
-    const dateString = date.toJSON().slice(0, 10);
-
-    axios
-      .get(`/api/users/${user.id}/feeds`, {
-        params: {
-          date: dateString,
-        },
-        metadata: {
-          gaCategory: 'Feed',
-          gaVariable: 'GET / List',
-        },
-      })
-      .then((response) => {
-        this.setState({
-          isLoading: false,
-          feedDays: [
-            ...feedDays,
-            {
-              date: dateString,
-              feeds: response.data,
-            },
-          ],
-        });
-        this._checkAndLoadFeeds();
-      })
-      .catch((error) => {});
-  };
-
-  _fetchNotices = () => {
-    const now = new Date();
-    axios
-      .get('/api/notices', {
-        params: {
-          time: now.toJSON(),
-          order: ['start_time', 'id'],
-        },
-        metadata: {
-          gaCategory: 'Notice',
-          gaVariable: 'GET / List',
-        },
-      })
-      .then((response) => {
-        this.setState({
-          notices: response.data,
-        });
-      })
-      .catch((error) => {});
-  };
-
-  _getDateDifference = (date) => {
-    const copiedDate = new Date(date);
-    const todayDate = new Date();
-    copiedDate.setHours(0, 0, 0, 0);
-    todayDate.setHours(0, 0, 0, 0);
-    const timeDiff = todayDate - copiedDate;
-    return timeDiff / (24 * 60 * 60 * 1000);
-  };
-
-  render() {
-    const { t } = this.props;
-    const { feedDays, notices } = this.state;
-    const { user, isPortrait } = this.props;
-
-    const mapFeedToSection = (feed, date) => {
-      if (feed.type === 'REVIEW_WRITE') {
-        return (
-          <ReviewWriteFeedSection
-            lecture={feed.lecture}
-            review={user.reviews.find((r) => r.lecture.id === feed.lecture.id)}
-            key={`${date.date}-${feed.type}-${feed.lecture.id}`}
-          />
-        );
-      }
-      if (feed.type === 'RELATED_COURSE') {
-        return (
-          <RelatedCourseFeedSection
-            course={feed.course}
-            key={`${date.date}-${feed.type}-${feed.course.id}`}
-          />
-        );
-      }
-      if (feed.type === 'FAMOUS_MAJOR_REVIEW') {
-        return (
-          <FamousMajorReviewFeedSection
-            department={feed.department}
-            reviews={feed.reviews}
-            key={`${date.date}-${feed.type}-${feed.department.code}`}
-          />
-        );
-      }
-      if (feed.type === 'FAMOUS_HUMANITY_REVIEW') {
-        return (
-          <FamousHumanityReviewFeedSection
-            reviews={feed.reviews}
-            key={`${date.date}-${feed.type}`}
-          />
-        );
-      }
-      if (feed.type === 'RANKED_REVIEW') {
-        return (
-          <RankedReviewFeedSection
-            semester={feed.semester}
-            reviews={feed.reviews}
-            key={`${date.date}-${feed.type}`}
-          />
-        );
-      }
-      if (feed.type === 'RATE') {
-        return <RateFeedSection rated={feed.rated} key={`${date.date}-${feed.type}`} />;
-      }
-      return null;
-    };
-
-    const columnNum = isPortrait ? 1 : 3;
-
-    const feeds = [
-      <TodaysTimetableSection key="TODAYS_TIMETABLE" />,
-      <AcademicScheduleSection key="ACADEMIC_SCHEDULE" />,
-      <ZaboEmbed key="ZABO_EMBED" serviceColor="#E54C65" style={{ marginBottom: 12 }} />,
-      notices
-        ? notices.map((n) => (
-            <NoticeSection notice={n} key={`${n.start_date}-${n.end_date}-${n.title}`} />
-          ))
-        : [],
-      <LatestReviewSection key="LATEST_REVIEW" />,
-      !user ? [] : feedDays.map((d) => d.feeds.map((f) => mapFeedToSection(f, d))),
-    ].flat(3);
-
-    return (
-      <>
-        <section className={classNames('main-image')}>
-          <MainSearchSection />
-        </section>
-        <section className={classNames('content')} ref={this.contentRef}>
-          <div className={classNames('page-grid', 'page-grid--main')}>
-            {range(columnNum).map((i) => (
-              <div
-                style={{
-                  gridArea: `feeds-column-${i + 1}`,
-                  position: 'relative',
-                  overflow: 'initial',
-                  minWidth: 0,
-                }}
-                key={i}>
-                {feeds.filter((v, i2) => i2 % columnNum === i)}
-                <div style={{ position: 'absolute', width: '100%' }}>
-                  {range(10).map((j) => (
-                    <div className={classNames('section', 'section--feed--placeholder')} key={j} />
-                  ))}
-                </div>
-              </div>
-            ))}
-            <div className={classNames('main-date')}>
-              {user ? (
-                <span onClick={() => this._fetchFeeds(this._getPrevDate())}>
-                  {t('ui.button.loadMore')}
-                </span>
-              ) : (
-                <>
-                  <a href={`/session/login/?next=${window.location.href}`}>
-                    {t('ui.button.signInWithSso')}
-                  </a>
-                  <div>{t('ui.message.signInForMore')}</div>
-                </>
-              )}
-            </div>
-          </div>
-        </section>
-        <Footer />
-      </>
-    );
-  }
-}
-
-const mapStateToProps = (state) => ({
-  user: state.common.user.user,
-  isPortrait: state.common.media.isPortrait,
-});
-
-const mapDispatchToProps = (dispatch) => ({});
-
-MainPage.propTypes = {
-  user: userShape,
-  isPortrait: PropTypes.bool.isRequired,
-};
-
-export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(MainPage));
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
new file mode 100644
index 0000000..14d448c
--- /dev/null
+++ b/src/pages/MainPage.tsx
@@ -0,0 +1,167 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { ZaboEmbed } from 'zabo-embed';
+import { appBoundClassNames as classNames } from '../common/boundClassNames';
+import Footer from '../common/guideline/components/Footer';
+import TodaysTimetableSection from '../components/sections/main/TodaysTimetableSection';
+import AcademicScheduleSection from '../components/sections/main/AcademicScheduleSection';
+import RelatedCourseFeedSection from '../components/sections/main/RelatedCourseFeedSection';
+import LatestReviewSection from '../components/sections/main/LatestReviewSection';
+import FamousMajorReviewFeedSection from '../components/sections/main/FamousMajorReviewFeedSection';
+import FamousHumanityReviewFeedSection from '../components/sections/main/FamousHumanityReviewFeedSection';
+import RankedReviewFeedSection from '../components/sections/main/RankedReviewFeedSection';
+import ReviewWriteFeedSection from '../components/sections/main/ReviewWriteFeedSection';
+import MainSearchSection from '../components/sections/main/MainSearchSection';
+import NoticeSection from '../components/sections/main/NoticeSection';
+import RateFeedSection from '../components/sections/main/RateFeedSection';
+import { rootReducer } from '@/App';
+import { range, throttle } from 'lodash';
+import { useFeed, useNotices } from '@/queries/main';
+
+type RootState = ReturnType<typeof rootReducer>;
+
+// TODO: Feed 의 타입은 이후에 API 타입 패키지로 바꿀 예정
+// TODO: 스크롤 감지 interserct observer 로 바꾸기
+const MainPage: React.FC = () => {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  const { user } = useSelector((state: RootState) => state.common.user);
+  const { isPortrait } = useSelector((state: RootState) => state.common.media);
+  const { t } = useTranslation();
+
+  const { data: notices } = useNotices();
+  const { data: feedDays, isFetchingNextPage, fetchNextPage } = useFeed(user);
+
+  const handleScroll = throttle(() => {
+    if (!user || !contentRef.current) return;
+    const SCROLL_BOTTOM_PADDING = 100;
+    const columns = Array.from(
+      contentRef.current.querySelectorAll(`.${classNames('page-grid--main')} > div`),
+    );
+
+    const isBottomReached = columns.some(
+      (column) =>
+        column.lastChild &&
+        column.lastChild.getBoundingClientRect().top < window.innerHeight + SCROLL_BOTTOM_PADDING,
+    );
+
+    if (isBottomReached && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, 2000);
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [user]);
+
+  const mapFeedToSection = (feed: any, date: any) => {
+    switch (feed.type) {
+      case 'REVIEW_WRITE':
+        return (
+          <ReviewWriteFeedSection
+            lecture={feed.lecture}
+            review={user?.reviews.find((r: any) => r.lecture.id === feed.lecture.id)}
+            key={`${date}-${feed.type}-${feed.lecture.id}`}
+          />
+        );
+      case 'RELATED_COURSE':
+        return (
+          <RelatedCourseFeedSection
+            course={feed.course}
+            key={`${date}-${feed.type}-${feed.course.id}`}
+          />
+        );
+      case 'FAMOUS_MAJOR_REVIEW':
+        return (
+          <FamousMajorReviewFeedSection
+            department={feed.department}
+            reviews={feed.reviews}
+            key={`${date}-${feed.type}-${feed.department.code}`}
+          />
+        );
+      case 'FAMOUS_HUMANITY_REVIEW':
+        return (
+          <FamousHumanityReviewFeedSection reviews={feed.reviews} key={`${date}-${feed.type}`} />
+        );
+      case 'RANKED_REVIEW':
+        return (
+          <RankedReviewFeedSection
+            semester={feed.semester}
+            reviews={feed.reviews}
+            key={`${date}-${feed.type}`}
+          />
+        );
+      case 'RATE':
+        return <RateFeedSection rated={feed.rated} key={`${date}-${feed.type}`} />;
+      default:
+        return null;
+    }
+  };
+
+  const columnNum = isPortrait ? 1 : 3;
+
+  const feeds = [
+    <TodaysTimetableSection key="TODAYS_TIMETABLE" />,
+    <AcademicScheduleSection key="ACADEMIC_SCHEDULE" />,
+    <ZaboEmbed key="ZABO_EMBED" serviceColor="#E54C65" style={{ marginBottom: 12 }} />,
+    notices &&
+      notices.map((n: any) => (
+        <NoticeSection notice={n} key={`${n.start_date}-${n.end_date}-${n.title}`} />
+      )),
+    <LatestReviewSection key="LATEST_REVIEW" />,
+    user &&
+      feedDays?.pages.map((page, index) =>
+        page.map((feed) => mapFeedToSection(feed, feedDays.pageParams[index])),
+      ),
+  ].flat();
+
+  return (
+    <>
+      <section className={classNames('main-image')}>
+        <MainSearchSection />
+      </section>
+      <section className={classNames('content')} ref={contentRef}>
+        <div className={classNames('page-grid', 'page-grid--main')}>
+          {range(columnNum).map((i) => (
+            <div
+              style={{
+                gridArea: `feeds-column-${i + 1}`,
+                position: 'relative',
+                overflow: 'initial',
+                minWidth: 0,
+              }}
+              key={i}>
+              {feeds.filter((_, feedIndex) => feedIndex % columnNum === i)}
+              <div style={{ position: 'absolute', width: '100%' }}>
+                {range(10).map((j) => (
+                  <div className={classNames('section', 'section--feed--placeholder')} key={j} />
+                ))}
+              </div>
+            </div>
+          ))}
+          <div className={classNames('main-date')}>
+            {user ? (
+              <span onClick={fetchNextPage}>
+                {isFetchingNextPage ? t('ui.placeholder.loading') : t('ui.button.loadMore')}
+              </span>
+            ) : (
+              <>
+                <a href={`/session/login/?next=${window.location.href}`}>
+                  {t('ui.button.signInWithSso')}
+                </a>
+                <div>{t('ui.message.signInForMore')}</div>
+              </>
+            )}
+          </div>
+        </div>
+      </section>
+      <Footer />
+    </>
+  );
+};
+
+export default MainPage;
diff --git a/src/queries/main.ts b/src/queries/main.ts
new file mode 100644
index 0000000..d7633fe
--- /dev/null
+++ b/src/queries/main.ts
@@ -0,0 +1,55 @@
+import User from '@/shapes/model/session/User';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchFeeds = async (userId: number, date: Date) => {
+  const dateString = date.toJSON().slice(0, 10);
+
+  const response = await axios.get(`/api/users/${userId}/feeds`, {
+    params: { date: dateString },
+    metadata: {
+      gaCategory: 'Feed',
+      gaVariable: 'GET / List',
+    },
+  });
+  return response.data;
+};
+
+const fetchNotices = async () => {
+  const now = new Date();
+  const response = await axios.get('/api/notices', {
+    params: {
+      time: now.toJSON(),
+      order: ['start_time', 'id'],
+    },
+    metadata: {
+      gaCategory: 'Notice',
+      gaVariable: 'GET / List',
+    },
+  });
+  return response.data;
+};
+
+export const useFeed = (user: User) => {
+  const userId = user?.id;
+  return useInfiniteQuery({
+    queryKey: ['feeds', userId],
+    queryFn: ({ pageParam }) => {
+      return fetchFeeds(userId, pageParam);
+    },
+    getNextPageParam: (_, __, lastPageParam) => {
+      const nextPageParam = new Date();
+      nextPageParam.setDate(lastPageParam.getDate() - 1);
+      return nextPageParam;
+    },
+    initialPageParam: new Date(),
+    enabled: !!user,
+  });
+};
+
+export const useNotices = () => {
+  return useQuery({
+    queryKey: ['notices'],
+    queryFn: fetchNotices,
+  });
+};

From d08a38fb2e82291dfac85adb462d0b41598e6e93 Mon Sep 17 00:00:00 2001
From: useruseruse <eliza1102@kaist.ac.kr>
Date: Wed, 18 Sep 2024 14:44:20 -0400
Subject: [PATCH 2/2] fix: pr review

---
 src/pages/MainPage.tsx | 24 ++++++++---------
 src/queries/main.ts    | 61 +++++++++++++++++++-----------------------
 2 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 14d448c..8b6dcd3 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -15,20 +15,22 @@ import ReviewWriteFeedSection from '../components/sections/main/ReviewWriteFeedS
 import MainSearchSection from '../components/sections/main/MainSearchSection';
 import NoticeSection from '../components/sections/main/NoticeSection';
 import RateFeedSection from '../components/sections/main/RateFeedSection';
-import { rootReducer } from '@/App';
 import { range, throttle } from 'lodash';
 import { useFeed, useNotices } from '@/queries/main';
-
-type RootState = ReturnType<typeof rootReducer>;
+import { RootState } from '@/redux';
 
 // TODO: Feed 의 타입은 이후에 API 타입 패키지로 바꿀 예정
-// TODO: 스크롤 감지 interserct observer 로 바꾸기
+// TODO: 추후 스크롤 감지 interserct observer 로 바꾸기
+
 const MainPage: React.FC = () => {
-  const contentRef = useRef<HTMLDivElement | null>(null);
+  const { t } = useTranslation();
 
+  const contentRef = useRef<HTMLDivElement | null>(null);
   const { user } = useSelector((state: RootState) => state.common.user);
   const { isPortrait } = useSelector((state: RootState) => state.common.media);
-  const { t } = useTranslation();
+
+  const COLUMN_NUM = isPortrait ? 1 : 3;
+  const SCROLL_WAIT_TIME = 2000;
 
   const { data: notices } = useNotices();
   const { data: feedDays, isFetchingNextPage, fetchNextPage } = useFeed(user);
@@ -49,7 +51,7 @@ const MainPage: React.FC = () => {
     if (isBottomReached && !isFetchingNextPage) {
       fetchNextPage();
     }
-  }, 2000);
+  }, SCROLL_WAIT_TIME);
 
   useEffect(() => {
     window.addEventListener('scroll', handleScroll);
@@ -102,8 +104,6 @@ const MainPage: React.FC = () => {
     }
   };
 
-  const columnNum = isPortrait ? 1 : 3;
-
   const feeds = [
     <TodaysTimetableSection key="TODAYS_TIMETABLE" />,
     <AcademicScheduleSection key="ACADEMIC_SCHEDULE" />,
@@ -126,7 +126,7 @@ const MainPage: React.FC = () => {
       </section>
       <section className={classNames('content')} ref={contentRef}>
         <div className={classNames('page-grid', 'page-grid--main')}>
-          {range(columnNum).map((i) => (
+          {range(COLUMN_NUM).map((i) => (
             <div
               style={{
                 gridArea: `feeds-column-${i + 1}`,
@@ -135,7 +135,7 @@ const MainPage: React.FC = () => {
                 minWidth: 0,
               }}
               key={i}>
-              {feeds.filter((_, feedIndex) => feedIndex % columnNum === i)}
+              {feeds.filter((_, feedIndex) => feedIndex % COLUMN_NUM === i)}
               <div style={{ position: 'absolute', width: '100%' }}>
                 {range(10).map((j) => (
                   <div className={classNames('section', 'section--feed--placeholder')} key={j} />
@@ -145,7 +145,7 @@ const MainPage: React.FC = () => {
           ))}
           <div className={classNames('main-date')}>
             {user ? (
-              <span onClick={fetchNextPage}>
+              <span onClick={() => fetchNextPage()}>
                 {isFetchingNextPage ? t('ui.placeholder.loading') : t('ui.button.loadMore')}
               </span>
             ) : (
diff --git a/src/queries/main.ts b/src/queries/main.ts
index d7633fe..7d1a5ca 100644
--- a/src/queries/main.ts
+++ b/src/queries/main.ts
@@ -2,54 +2,47 @@ import User from '@/shapes/model/session/User';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
-const fetchFeeds = async (userId: number, date: Date) => {
-  const dateString = date.toJSON().slice(0, 10);
-
-  const response = await axios.get(`/api/users/${userId}/feeds`, {
-    params: { date: dateString },
-    metadata: {
-      gaCategory: 'Feed',
-      gaVariable: 'GET / List',
-    },
-  });
-  return response.data;
-};
-
-const fetchNotices = async () => {
-  const now = new Date();
-  const response = await axios.get('/api/notices', {
-    params: {
-      time: now.toJSON(),
-      order: ['start_time', 'id'],
-    },
-    metadata: {
-      gaCategory: 'Notice',
-      gaVariable: 'GET / List',
-    },
-  });
-  return response.data;
-};
-
 export const useFeed = (user: User) => {
   const userId = user?.id;
   return useInfiniteQuery({
     queryKey: ['feeds', userId],
-    queryFn: ({ pageParam }) => {
-      return fetchFeeds(userId, pageParam);
+    queryFn: async ({ pageParam }) => {
+      const dateString = pageParam.toJSON().slice(0, 10); // pageParam을 date로 사용
+      const response = await axios.get(`/api/users/${userId}/feeds`, {
+        params: { date: dateString },
+        metadata: {
+          gaCategory: 'Feed',
+          gaVariable: 'GET / List',
+        },
+      });
+      return response.data;
     },
     getNextPageParam: (_, __, lastPageParam) => {
       const nextPageParam = new Date();
-      nextPageParam.setDate(lastPageParam.getDate() - 1);
+      nextPageParam.setDate(lastPageParam.getDate() - 1); // 다음 페이지 날짜 계산
       return nextPageParam;
     },
-    initialPageParam: new Date(),
-    enabled: !!user,
+    initialPageParam: new Date(), // 첫 페이지는 현재 날짜
+    enabled: !!user, // 유저가 있을 때만 쿼리 실행
   });
 };
 
 export const useNotices = () => {
   return useQuery({
     queryKey: ['notices'],
-    queryFn: fetchNotices,
+    queryFn: async () => {
+      const now = new Date();
+      const response = await axios.get('/api/notices', {
+        params: {
+          time: now.toJSON(),
+          order: ['start_time', 'id'],
+        },
+        metadata: {
+          gaCategory: 'Notice',
+          gaVariable: 'GET / List',
+        },
+      });
+      return response.data;
+    },
   });
 };