Feat : 로그인 통신

- 사용자의 이메일, 비밀번호를 입력받고 토큰을 발급받는다.
related to #31

frontend/src/apis/BaseUrl.ts

@@ -1,3 +1,13 @@
 import axios from 'axios';
 
-export default axios.create({ baseURL: 'https://api.doit-toeic.xyz' });
+export default axios.create({
+  baseURL: 'https://api.doit-toeic.xyz',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export const httpClientForCredentials = axios.create({
+  baseURL: 'https://api.doit-toeic.xyz',
+  withCredentials: true,
+});

frontend/src/apis/auth/FetchLogIn.ts

@@ -0,0 +1,50 @@
+import { httpClientForCredentials } from '../BaseUrl';
+import { LoginData } from '../../types/LoginData';
+import { AxiosError, AxiosResponse } from 'axios';
+
+export const onLogInSuccess = async (response: AxiosResponse) => {
+  const { accessToken, expiresIn } = await response.data.data;
+
+  httpClientForCredentials.defaults.headers.common['Authorization'] =
+    `Bearer ${accessToken}`;
+
+  const currentTime = new Date(Date.now());
+  const tokenExpirationTime = new Date(Date.now() + expiresIn * 1000);
+  const refreshTime = tokenExpirationTime.getTime() - currentTime.getTime();
+  console.log('accessToken', response.data.message);
+
+  setTimeout(() => {
+    FetchRefreshToken();
+  }, refreshTime);
+};
+
+export const FetchRefreshToken = async () => {
+  try {
+    const res = await httpClientForCredentials.get('/auth/refresh');
+
+    if (res.status === 200) {
+      onLogInSuccess(res);
+      console.log('refresh', res.data.message);
+    }
+  } catch (err) {
+    const axiosError = err as AxiosError;
+    if (axiosError.response?.status === 401) {
+      alert('로그인 해주세요');
+    }
+
+    throw new Error();
+  }
+};
+
+export const FetchLogIn = async (data: LoginData) => {
+  try {
+    const response = await httpClientForCredentials.post('/auth/login', data);
+
+    if (response.status === 200) {
+      onLogInSuccess(response);
+    }
+  } catch (err) {
+    console.log('로그인 에러 발생', err);
+    throw new Error();
+  }
+};

frontend/src/apis/auth/FetchRegister.ts

@@ -0,0 +1,16 @@
+import { RegisterData } from '../../types/RegisterData';
+import url from '../BaseUrl';
+
+export const FetchRegister = async (register: RegisterData) => {
+  const data = { email: register.email, password: register.password };
+
+  try {
+    const res = await url.post('/auth/register', data);
+    if (res.status === 201) {
+      alert('회원가입이 완료되었습니다.이메일을 확인해주세요!!');
+    }
+  } catch (error) {
+    alert('회원가입이 실패하였습니다.');
+    throw new Error();
+  }
+};

frontend/src/components/common/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonCSS } from '../../style/components/common/ButtonCSS';
 import { useNavigate } from 'react-router-dom';
-import { ButtonProps } from '../../types/ButtonPtops';
+import { ButtonProps } from '../../types/ButtonProps';
 
 function Button({
   children,

frontend/src/components/login/LoginForm.tsx

@@ -1,37 +1,39 @@
 import React from 'react';
 import { LoginFormCSS } from '../../style/components/login/LoginFormCSS';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { FormData } from '../../types/LoginData';
+import { LoginData } from '../../types/LoginData';
 import SubmitBtn from '../common/SubmitBtn';
+import { FetchLogIn } from '../../apis/auth/FetchLogIn';
 
 function LoginForm() {
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<FormData>();
+  } = useForm<LoginData>();
 
-  const onSubmit: SubmitHandler<FormData> = (data) => {
-    console.log(data);
+  const onsubmit: SubmitHandler<LoginData> = (data) => {
+    FetchLogIn(data);
   };
 
   return (
     <>
-      <LoginFormCSS onSubmit={handleSubmit(onSubmit)}>
+      <LoginFormCSS onSubmit={handleSubmit(onsubmit)}>
         <fieldset>
           <label>ID</label>
           <input
             id="id"
             spellCheck={false}
-            {...register('username', { required: true })}
+            {...register('email', { required: true })}
           />
         </fieldset>
-        {errors.username && <span>아이디를 작성해주세요!</span>}
+        {errors.email && <span>아이디를 작성해주세요!</span>}
 
         <fieldset>
           <label>PW</label>
           <input
             id="password"
+            type="password"
             spellCheck={false}
             {...register('password', { required: true })}
           />

frontend/src/components/register/RegisterForm.tsx

@@ -3,7 +3,7 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import { RegisterData } from '../../types/RegisterData';
 import Agreement from './Agreement';
 import SubmitBtn from '../common/SubmitBtn';
-import { FetchRegister } from '../../apis/FetchRegister';
+import { FetchRegister } from '../../apis/auth/FetchRegister';
 import { useNavigate } from 'react-router-dom';
 
 function RegisterForm() {

frontend/src/style/components/common/ButtonCSS.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { ButtonProps } from '../../../types/ButtonPtops';
+import { ButtonProps } from '../../../types/ButtonProps';
 import { media } from '../../mediaQuery';
 
 export const ButtonCSS = styled.button<ButtonProps>`

frontend/src/types/LoginData.ts

@@ -1,4 +1,4 @@
-export type FormData = {
-  username: string;
+export type LoginData = {
+  email: string;
   password: string;
 };