✨ Feat: 로그인 api 연결 (#54)

src/Router.tsx

@@ -2,8 +2,6 @@ import { GoormLoader } from '@goorm-dev/gds-components';
 import { Suspense, lazy } from 'react';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import Layout from './components/layout/Layout';
-import SignUp from './pages/updatePW/UpdatePW';
-
 const About = lazy(() => import('./pages/about/About'));
 const Project = lazy(() => import('./pages/project/Project'));
 const Recruit = lazy(() => import('./pages/recruit/Recruit'));
@@ -13,6 +11,7 @@ const Information = lazy(() => import('./pages/information/Information'));
 const MyPage = lazy(() => import('./pages/myPage/MyPage'));
 const UpdatePW = lazy(() => import('./pages/updatePW/UpdatePW'));
 const IdeaList = lazy(() => import('./pages/hackathon/IdeaList/IdeaList'));
+const SignUp = lazy(() => import('./pages/signUp/SignUp'));
 
 const IdeaCreate = lazy(() => import('./pages/hackathon/IdeaCreate/IdeaCreate'));
 

src/api/instance.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const instance = axios.create({
-  baseURL: process.env.REACT_APP_BASE_URL,
+  baseURL: import.meta.env.VITE_APP_BASE_URL,
   headers: { 'Content-Type': 'application/json' },
   withCredentials: true,
 });

src/components/signUp/SignUpCard.tsx

@@ -1,10 +1,14 @@
 import styles from './signUpCard.module.scss';
-import { WarningIcon } from '@goorm-dev/gds-icons';
+import { WarningIcon } from '@goorm-dev/vapor-icons';
 import { Text, Input, Button, Alert } from '@goorm-dev/vapor-components';
 import { ChangeEvent, useState } from 'react';
 import Logo from '../../assets/images/goormthon_univ_BI-Bk.png';
+import { loginAPI } from '../../api/auth';
+import { useNavigate } from 'react-router-dom';
 
 export default function SignUpCard() {
+  const navigate = useNavigate();
+
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -23,6 +27,15 @@ export default function SignUpCard() {
   };
 
   const handleLogin = async () => {
+    try {
+      const response = await loginAPI(email, password);
+      console.log(response);
+
+      navigate('/');
+    } catch (error) {
+      console.error('로그인 실패', error);
+    }
+
     if (!email && !password) {
       setErrorMessage('이메일을 입력해주세요');
       return;
@@ -53,7 +66,7 @@ export default function SignUpCard() {
           로그인
         </Button>
         {errorMessage && (
-          <Alert color="danger" leftIcon={WarningIcon}>
+          <Alert color="danger" leftIcon={WarningIcon} className={styles.alignCenter}>
             {errorMessage}
           </Alert>
         )}

src/components/signUp/signUpCard.module.scss

@@ -37,3 +37,7 @@
   width: 16rem;
   margin-bottom: var(--space-600);
 }
+
+.alignCenter {
+  text-align: left;
+}