feat: api 모듈화 (#23)

- axios를 설치했습니다.
- axios 인스턴스를 생성했습니다.
- authAPI는 로그인 구현과 함께 수정하겠습니다.

src/apis/api/course.ts

@@ -0,0 +1,10 @@
+import {baseAPI} from '../utils/instance';
+
+export const getCourseList = async (body: object) => {
+  try {
+    const {data} = await baseAPI.get('/schedules/search', body);
+    return data;
+  } catch (error) {
+    console.log('get course list fail: ', error);
+  }
+};

src/apis/utils/instance.ts

@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+const baseURL = import.meta.env.VITE_BASE_URL;
+
+export const baseAPI = axios.create({
+  baseURL: baseURL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+});
+
+// 토큰 받아오는 작업 필요
+export const authAPI = axios.create({
+  baseURL: baseURL,
+  headers: {
+    // Authorization: `Bearer ${token}`,
+  },
+  withCredentials: true,
+});

src/pages/index/Home.tsx

@@ -31,7 +31,7 @@ const Box = styled.div`
 `;
 
 const Main = styled.div`
-  width: 100%;
+  width: calc(100% - 23rem);
 `;
 
 const Article = styled.div`

src/styles/GlobalStyle.tsx

@@ -54,7 +54,7 @@ const GlobalStyle = createGlobalStyle`
     }
     thead {
         position: sticky;
-        top: 0;
+        top: -1px;
     }
 `;
 

tsconfig.app.json

@@ -23,14 +23,15 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
+    "baseUrl": "./src",
     "paths": {
-      "@components/*": ["src/components/*"],
-      "@pages/*": ["src/pages/*"],
-      "@assets/*": ["src/assets/*"],
-      "@store/*": ["src/store/*"],
-      "@plugins/*": ["src/plugins/*"],
-      "@/*": ["./src/*"]
+      "@/*": ["./*"],
+      "@components/*": ["components/*"],
+      "@pages/*": ["pages/*"],
+      "@assets/*": ["assets/*"],
+      "@store/*": ["store/*"],
+      "@plugins/*": ["plugins/*"],
+      "@apis/*": ["apis/*"]
     },
     "allowSyntheticDefaultImports": true
   },

vite.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite';
+import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
-import { resolve } from 'node:path';
+import {resolve} from 'node:path';
 import svgr from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
@@ -12,7 +12,7 @@ export default defineConfig({
   resolve: {
     alias: [
       {
-        find: '@src',
+        find: '@',
         replacement: resolve(__dirname, './src'),
       },
       {
@@ -35,6 +35,10 @@ export default defineConfig({
         find: '@plugins',
         replacement: resolve(__dirname, './src/plugins'),
       },
+      {
+        find: '@apis',
+        replacement: resolve(__dirname, './src/apis'),
+      },
     ],
   },
 });