Merge pull request #15 from TEAM-Hearus/develop

Chore: mockAPI 연결 및 환경변수 설정 배포 테스트

.github/workflows/firebase-hosting-merge.yml

@@ -6,6 +6,8 @@ on:
   push:
     branches:
       - main
+env:
+  VITE_MOCK_API: ${{ secrets.VITE_MOCK_API }}
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest

.github/workflows/firebase-hosting-pull-request.yml

@@ -7,6 +7,8 @@ permissions:
   checks: write
   contents: read
   pull-requests: write
+env:
+  VITE_MOCK_API: ${{ secrets.VITE_MOCK_API }}
 jobs:
   build_and_preview:
     if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}

.gitignore

@@ -12,6 +12,9 @@ dist
 dist-ssr
 *.local
 
+.env
+
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package.json

@@ -10,12 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.50.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.0",
     "styled-reset": "^4.5.2"
   },
   "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.50.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",

src/App.tsx

@@ -1,12 +1,17 @@
 import { Reset } from 'styled-reset';
 import Router from './pages';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+const queryClient = new QueryClient();
 
 function App() {
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
       <Reset />
       <Router />
-    </>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   );
 }
 

src/apis/index.ts

@@ -0,0 +1,3 @@
+const mockAPI_URL: string = import.meta.env.VITE_MOCK_API;
+
+export default mockAPI_URL;

src/apis/schedule.ts

@@ -0,0 +1,26 @@
+import mockAPI_URL from '.';
+import { IScheduleElement } from '../constants/schedule';
+
+interface IGetScheduleResponse {
+  status: string;
+  msg: string;
+  object: {
+    id: number;
+    scheduleElements: IScheduleElement[];
+    name: string;
+    userId: string | null;
+  };
+  success: boolean;
+}
+
+export const getSchedule = async (
+  name: string,
+): Promise<IScheduleElement[]> => {
+  try {
+    const res = await fetch(`${mockAPI_URL}/schedule/getSchedule?name=${name}`);
+    const data: IGetScheduleResponse = await res.json();
+    return data.object['scheduleElements'];
+  } catch (error) {
+    throw error;
+  }
+};

src/pages/Main/TimeTable/WeeklyTimeTable/WeeklyTimeTable.tsx

@@ -1,9 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
 import TimeTableItem from '../../../../components/common/TimeTableItem/TimeTableItem';
-import { TIMELIST, scheduleElements } from '../../../../constants/schedule';
+import { IScheduleElement, TIMELIST } from '../../../../constants/schedule';
 import styles from './WeeklyTimeTable.module.scss';
+import { getSchedule } from '../../../../apis/schedule';
+
+const name = '건국대학교 3-1학기'; // 임시 지정
 
 const WeeklyTimeTable = () => {
   const daysOfWeek = ['일', '월', '화', '수', '목', '금', '토'];
+  const { data } = useQuery<IScheduleElement[], Error>({
+    queryKey: ['schedule', name],
+    queryFn: () => getSchedule(name),
+  });
   return (
     <div className={styles.table}>
       <div className={styles.dayOfWeekRow}>
@@ -19,7 +27,7 @@ const WeeklyTimeTable = () => {
           <span className={styles.time}>{time}</span>
         </div>
       ))}
-      {scheduleElements.map((schedule) => (
+      {data?.map((schedule) => (
         <TimeTableItem key={schedule.id} {...schedule} />
       ))}
     </div>