fix: pr review

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>
             ) : (

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;
+    },
   });
 };