fix timetable frame fallback

Author: ff1451

src/api/timetable/queries.ts

@@ -31,6 +31,9 @@ type FrameListQueryParams = {
 const canUseStudentTimetableQuery = (token: string, userType?: TimetableUserType) =>
   Boolean(token) && (!userType || userType === 'STUDENT');
 
+export const isValidTimetableFrameId = (timetableFrameId: number | null | undefined): timetableFrameId is number =>
+  typeof timetableFrameId === 'number' && Number.isInteger(timetableFrameId) && timetableFrameId > 0;
+
 export const createDefaultTimetableFrameList = (): TimetableFrameListResponse => [
   {
     id: null,
@@ -92,7 +95,10 @@ export const timetableQueries = {
   lectureInfo: (authorization: string, timetableFrameId: number) =>
     queryOptions({
       queryKey: timetableQueryKeys.lectureInfo(timetableFrameId),
-      queryFn: () => (authorization ? getTimetableLectureInfo(authorization, timetableFrameId) : null),
+      queryFn: () =>
+        authorization && isValidTimetableFrameId(timetableFrameId)
+          ? getTimetableLectureInfo(authorization, timetableFrameId)
+          : null,
     }),
 
   allLectures: (token: string) =>

src/components/TimetablePage/components/MainTimetable/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { deptQueries } from 'api/dept/queries';
+import { isValidTimetableFrameId } from 'api/timetable/queries';
 import DownloadIcon from 'assets/svg/download-icon.svg';
 import GraduationIcon from 'assets/svg/graduation-icon.svg';
 import EditIcon from 'assets/svg/pen-icon.svg';
@@ -37,7 +38,7 @@ function MainTimetable({ timetableFrameId }: { timetableFrameId: number }) {
       return false;
     }
 
-    if (timeTableFrameList.length === 0) {
+    if (!timeTableFrameList.some((frame) => isValidTimetableFrameId(frame.id))) {
       toast.error('시간표가 존재하지 않습니다. 시간표를 추가해주세요.');
       return false;
     }

src/pages/timetable/index.tsx

@@ -1,11 +1,16 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import type { GetServerSidePropsContext } from 'next';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { isKoinError } from '@bcsdlab/koin';
 import { dehydrate, QueryClient } from '@tanstack/react-query';
 import { deptQueries } from 'api/dept/queries';
-import { createDefaultTimetableFrameList, timetableQueries, timetableQueryKeys } from 'api/timetable/queries';
+import {
+  createDefaultTimetableFrameList,
+  isValidTimetableFrameId,
+  timetableQueries,
+  timetableQueryKeys,
+} from 'api/timetable/queries';
 import { SSRLayout } from 'components/layout';
 import useTimetableFrameList from 'components/TimetablePage/hooks/useTimetableFrameList';
 import DefaultPage from 'components/TimetablePage/MainTimetablePage/DefaultPage';
@@ -30,7 +35,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const year = Number(query.year);
   const term = query.term as Term;
   const frameId = Number(query.timetableFrameId);
-  const validatedFrameId = Number.isNaN(frameId) ? null : frameId;
+  const validatedFrameId = isValidTimetableFrameId(frameId) ? frameId : null;
 
   if (token) {
     try {
@@ -80,24 +85,24 @@ function TimetablePage() {
   const { timetableFrameId } = router.query;
   const { data: timetableFrameList } = useTimetableFrameList(token, semester);
   const mainFrame = timetableFrameList.find((frame) => frame.is_main === true);
-  const [currentFrameIndex, setCurrentFrameIndex] = React.useState(mainFrame?.id ? mainFrame.id : 0);
+  const mainFrameId = isValidTimetableFrameId(mainFrame?.id) ? mainFrame.id : 0;
+  const queryFrameId = typeof timetableFrameId === 'string' ? Number(timetableFrameId) : Number.NaN;
+  const initialFrameId = isValidTimetableFrameId(queryFrameId) ? queryFrameId : mainFrameId;
+  const [currentFrameIndex, setCurrentFrameIndex] = useState(initialFrameId);
+  const resolvedCurrentFrameIndex = timetableFrameList.some((frame) => frame.id === currentFrameIndex)
+    ? currentFrameIndex
+    : initialFrameId;
 
-  React.useEffect(() => {
-    if (timetableFrameId) {
-      setCurrentFrameIndex(Number(timetableFrameId));
-    } else {
-      setCurrentFrameIndex(mainFrame?.id ? mainFrame.id : 0);
-    }
+  useEffect(() => {
     sessionStorage.setItem('enterTimetablePage', new Date().getTime().toString());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <div className={styles.page}>
       {!isMobile ? (
-        <DefaultPage timetableFrameId={currentFrameIndex} setCurrentFrameId={setCurrentFrameIndex} />
+        <DefaultPage timetableFrameId={resolvedCurrentFrameIndex} setCurrentFrameId={setCurrentFrameIndex} />
       ) : (
-        <MobilePage timetableFrameId={currentFrameIndex} setCurrentFrameId={setCurrentFrameIndex} />
+        <MobilePage timetableFrameId={resolvedCurrentFrameIndex} setCurrentFrameId={setCurrentFrameIndex} />
       )}
     </div>
   );