feat(time): 타임테이블 모달 api 연동

.changeset/grumpy-beers-travel.md

@@ -0,0 +1,5 @@
+---
+"@clab-platforms/time": patch
+---
+
+feat(time): 타임테이블 모달 api 연동

apps/time/package.json

@@ -13,6 +13,8 @@
     "@clab-platforms/design-system": "workspace:*",
     "@clab-platforms/icon": "workspace:^",
     "@clab-platforms/utils": "workspace:*",
+    "@tanstack/react-query": "^5.51.23",
+    "@tanstack/react-query-devtools": "^5.40.1",
     "jotai": "^2.9.2",
     "next": "14.1.4",
     "react": "^18",

apps/time/src/app/layout.tsx

@@ -9,7 +9,7 @@ import './globals.css';
 const inter = Noto_Sans_KR({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: '경기타임',
+  title: '경기플러스',
   description: '경기대학교에 계신 모든 순간을 도와드릴게요.',
   icons: {
     icon: '/favicon.ico',

apps/time/src/shared/hooks/index.ts

@@ -2,3 +2,4 @@ export { default as useEditableSearchParams } from './useEditableSearchParams';
 export { default as useOutsideClick } from './useOutsideClick';
 export { default as useModalAction } from './useModalAction';
 export { default as useModalState } from './useModalState';
+export { default as useDebounce } from './useDebounce';

apps/time/src/shared/hooks/useDebounce.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+interface UseDebounceParams<T> {
+  value: T;
+  delay: number;
+}
+
+export default function useDebounce<T>({ value, delay }: UseDebounceParams<T>) {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const delayDebounceTimer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => clearTimeout(delayDebounceTimer);
+  }, [value, delay]);
+
+  return debouncedValue;
+}

apps/time/src/shared/utils/Providers.tsx

@@ -2,8 +2,18 @@
 
 import { PropsWithChildren } from 'react';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
 import { Provider } from 'jotai';
 
 export default function Providers({ children }: PropsWithChildren) {
-  return <Provider>{children}</Provider>;
+  const queryClient = new QueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Provider>{children}</Provider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
 }

apps/time/src/shared/utils/getAPIURL.ts

@@ -0,0 +1,3 @@
+export default function getAPIURL(endPoint: string) {
+  return new URL(`${process.env.NEXT_PUBLIC_API_URL}/api/${endPoint}`);
+}

apps/time/src/shared/utils/index.ts

@@ -1 +1,2 @@
 export { default as Providers } from './Providers';
+export { default as getAPIURL } from './getAPIURL';

apps/time/src/widgets/menu/ui/Nav.tsx

@@ -33,7 +33,7 @@ const actions = [
   </button>,
 ] as const;
 
-const Nav = () => {
+export default function Nav() {
   return (
     <nav className="fixed top-0 w-full border-b bg-white">
       <div className="container flex h-14 items-center justify-between text-nowrap">
@@ -45,7 +45,9 @@ const Nav = () => {
             height={200}
             className="size-8"
           />
-          <h1 className="text-xl font-semibold">경기타임</h1>
+          <Link href="/">
+            <h1 className="select-none text-xl font-semibold">경기플러스</h1>
+          </Link>
         </div>
         <ul className="hidden w-3/5 items-center justify-center gap-4 text-sm sm:flex">
           {links.map((link) => link)}
@@ -56,6 +58,4 @@ const Nav = () => {
       </div>
     </nav>
   );
-};
-
-export default Nav;
+}

apps/time/src/widgets/time-table/api/endpoint.ts

@@ -0,0 +1,6 @@
+const TIMETABLE_ENDPOINT = {
+  lectureList: 'v1/lecture/retrieve',
+  majorList: 'v1/lecture/retrieve/major',
+};
+
+export default TIMETABLE_ENDPOINT;

apps/time/src/widgets/time-table/api/getLectureList.ts

@@ -0,0 +1,74 @@
+import { DayKor } from '@/shared/types';
+import { getAPIURL } from '@/shared/utils';
+import type {
+  DayCampus,
+  DayPeriod,
+  Grade,
+  LectureKey,
+  NightCampus,
+  NightPeriod,
+} from '@/widgets/time-table';
+import { TIMETABLE_ENDPOINT } from '@/widgets/time-table';
+
+export interface GetLectureListParams {
+  campus: (DayCampus | NightCampus)[];
+  type: LectureKey[];
+  grade: Grade[];
+  day: DayKor[];
+  time: (DayPeriod | NightPeriod)[];
+  major: string[];
+  lectureName: string;
+  cursor: number;
+  limit: number;
+}
+
+export interface GetLectureListResponseValue {
+  id: number;
+  campus: string;
+  category: string;
+  code: string;
+  credit: number;
+  grade: number;
+  groupName: string;
+  isExceeded: true;
+  major: string;
+  name: string;
+  professor: string;
+  room: string;
+  year: number;
+  semester: string;
+  time: string;
+  type: LectureKey;
+}
+
+export interface GetLectureListResponse {
+  success: boolean;
+  data: {
+    values: GetLectureListResponseValue[];
+  };
+  hasPrevious: boolean;
+  hasNext: boolean;
+}
+
+export async function getLectureList({
+  ...params
+}: GetLectureListParams): Promise<GetLectureListResponse> {
+  const apiURL = getAPIURL(TIMETABLE_ENDPOINT.lectureList);
+
+  Object.entries(params).forEach(([key, value]) => {
+    if (value) {
+      apiURL.searchParams.set(
+        key,
+        Array.isArray(value) ? value.join(',') : String(value),
+      );
+    }
+  });
+
+  const res = await fetch(apiURL);
+
+  if (!res.ok) {
+    throw new Error('강의 정보 불러오기에 실패했습니다.');
+  }
+
+  return res.json();
+}

apps/time/src/widgets/time-table/api/getMajorList.ts

@@ -0,0 +1,27 @@
+import { getAPIURL } from '@/shared/utils';
+import { TIMETABLE_ENDPOINT } from '@/widgets/time-table';
+
+export interface GetMajorListParams {
+  major: string;
+}
+
+export interface GetMajorListResponse {
+  success: boolean;
+  data: string[];
+}
+
+export async function getMajorList({
+  major,
+}: GetMajorListParams): Promise<GetMajorListResponse> {
+  const apiURL = getAPIURL(TIMETABLE_ENDPOINT.majorList);
+
+  apiURL.searchParams.set('major', major);
+
+  const res = await fetch(apiURL);
+
+  if (!res.ok) {
+    throw new Error('전공 리스트 불러오기에 실패했습니다.');
+  }
+
+  return res.json();
+}

apps/time/src/widgets/time-table/api/index.ts

@@ -0,0 +1,3 @@
+export { default as TIMETABLE_ENDPOINT } from './endpoint';
+export * from './getLectureList';
+export * from './getMajorList';

apps/time/src/widgets/time-table/index.ts

@@ -1,3 +1,4 @@
 export * from './ui';
 export * from './model';
 export * from './types';
+export * from './api';

apps/time/src/widgets/time-table/model/constants/period.ts

@@ -1,4 +1,4 @@
-const DAY_PERIOD = {
+export const DAY_PERIOD = {
   '1': {
     start: { hour: 9, minute: 0 },
     end: { hour: 9, minute: 50 },
@@ -91,7 +91,7 @@ const DAY_PERIOD = {
   },
 } as const;
 
-const NIGHT_PERIOD = {
+export const NIGHT_PERIOD = {
   '1': {
     start: { hour: 17, minute: 50 },
     end: { hour: 18, minute: 35 },
@@ -124,7 +124,7 @@ const NIGHT_PERIOD = {
   },
 } as const;
 
-const DAY_PERIOD_ARRAY = Object.entries(DAY_PERIOD).sort(
+export const DAY_PERIOD_ARRAY = Object.entries(DAY_PERIOD).sort(
   ([, periodA], [, periodB]) => {
     const timeA = periodA.start.hour * 60 + periodA.start.minute;
     const timeB = periodB.start.hour * 60 + periodB.start.minute;
@@ -133,7 +133,7 @@ const DAY_PERIOD_ARRAY = Object.entries(DAY_PERIOD).sort(
   },
 );
 
-const NIGHT_PERIOD_ARRAY = Object.entries(NIGHT_PERIOD).sort(
+export const NIGHT_PERIOD_ARRAY = Object.entries(NIGHT_PERIOD).sort(
   ([, periodA], [, periodB]) => {
     const timeA = periodA.start.hour * 60 + periodA.start.minute;
     const timeB = periodB.start.hour * 60 + periodB.start.minute;
@@ -142,18 +142,4 @@ const NIGHT_PERIOD_ARRAY = Object.entries(NIGHT_PERIOD).sort(
   },
 );
 
-const DAY_STATUS = {
-  day: '주간',
-  night: '야간',
-} as const;
-
-const SPECIAL_PERIOD = ['이러닝', '교외수업', '사회봉사'] as const;
-
-export {
-  DAY_PERIOD,
-  NIGHT_PERIOD,
-  SPECIAL_PERIOD,
-  DAY_PERIOD_ARRAY,
-  NIGHT_PERIOD_ARRAY,
-  DAY_STATUS,
-};
+export const SPECIAL_PERIOD = ['이러닝', '교외수업', '사회봉사'] as const;

apps/time/src/widgets/time-table/model/constants/region.ts

@@ -3,4 +3,20 @@ export const REGION = {
   campus2: '서울',
 } as const;
 
+export const DAY_STATUS = {
+  day: '주간',
+  night: '야간',
+} as const;
+
+export const CAMPUS_STATUS = {
+  day: [
+    `${REGION.campus1}${DAY_STATUS.day}`,
+    `${REGION.campus2}${DAY_STATUS.day}`,
+  ],
+  night: [
+    `${REGION.campus1}${DAY_STATUS.night}`,
+    `${REGION.campus2}${DAY_STATUS.night}`,
+  ],
+} as const;
+
 export const REGION_VALUE_ARRAY = Object.values(REGION);

apps/time/src/widgets/time-table/model/hooks/index.ts

@@ -1 +1,4 @@
+export { default as timeTableQueryKeys } from './timeTableQueryKeys';
 export { default as useTimeTableParams } from './useTimeTableParams';
+export { default as useMajorList } from './useMajorList';
+export { default as useLectureList } from './useLectureList';

apps/time/src/widgets/time-table/model/hooks/timeTableQueryKeys.ts

@@ -0,0 +1,8 @@
+import { GetLectureListParams, GetMajorListParams } from '@/widgets/time-table';
+
+const timeTableQueryKeys = {
+  getLectureList: (params: GetLectureListParams) => ['getLectureList', params],
+  getMajorList: (params: GetMajorListParams) => ['getMajorList', params],
+};
+
+export default timeTableQueryKeys;

apps/time/src/widgets/time-table/model/hooks/useLectureList.ts

@@ -0,0 +1,14 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import {
+  type GetLectureListParams,
+  getLectureList,
+  timeTableQueryKeys,
+} from '@/widgets/time-table';
+
+export default function useLectureList({ ...params }: GetLectureListParams) {
+  return useSuspenseQuery({
+    queryKey: timeTableQueryKeys.getLectureList(params),
+    queryFn: () => getLectureList(params),
+  });
+}

apps/time/src/widgets/time-table/model/hooks/useMajorList.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+
+import {
+  type GetMajorListParams,
+  getMajorList,
+  timeTableQueryKeys,
+} from '@/widgets/time-table';
+
+export default function useMajorList({ major }: GetMajorListParams) {
+  const { data } = useQuery({
+    queryKey: timeTableQueryKeys.getMajorList({ major }),
+    queryFn: () => getMajorList({ major }),
+    enabled: major.length > 0,
+  });
+
+  return data ? data.data : [];
+}

apps/time/src/widgets/time-table/types/index.ts

@@ -1,4 +1,3 @@
-export * from './day-status';
 export * from './grade';
 export * from './period';
 export * from './lecture';

apps/time/src/widgets/time-table/types/region.ts

@@ -1,3 +1,9 @@
-import { REGION } from '@/widgets/time-table';
+import { CAMPUS_STATUS, DAY_STATUS, REGION } from '@/widgets/time-table';
 
 export type Region = (typeof REGION)[keyof typeof REGION];
+
+export type DayStatus = keyof typeof DAY_STATUS;
+
+export type DayCampus = (typeof CAMPUS_STATUS.day)[number];
+
+export type NightCampus = (typeof CAMPUS_STATUS.night)[number];