[EC-70] FE/feat: 리프레시 토큰 API 연동 (#58)

* [EC-70] chore: WIP

* [EC-70] feat: accessToken 재발급 API 연동

* [EC-70] feat: 인증 예외 경로 추가

- /api/auth/refresh

* [EC-70] chore: 주석 정리

* [EC-70] chore: 코드 정리

Author: devyejin

api/src/main/java/org/example/educheck/global/security/config/SecurityConfig.java

@@ -35,7 +35,7 @@ public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
                 .sessionManagement(session -> session
                         .sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                 .authorizeHttpRequests(auth -> auth
-                                .requestMatchers("/api/auth/login", "/api/auth/signup").permitAll()
+                                .requestMatchers("/api/auth/login", "/api/auth/signup", "/api/auth/refresh").permitAll()
                                 .anyRequest().authenticated()
                         // TODO: 인증 엔드포인트 수정
                 )

client/src/App.jsx

@@ -1,16 +1,37 @@
-import React from "react";
-import { RouterProvider } from "react-router-dom";
-import router from "./router";
-
-import { Provider } from 'react-redux';
-import store from './store/store';
+import React, { useEffect } from 'react';
+import { RouterProvider } from 'react-router-dom';
+import router from './router';
+import { authApi } from './api/authApi';
+import { login } from './store/slices/authSlice';
+import { useDispatch } from 'react-redux';
+import { setRole } from './store/slices/sideBarItemSlice';
 
 export default function App() {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const fetchRefreshToken = async () => {
+      try {
+        const response = await authApi.reissue();
+        const accessToken = response.headers?.authorization ?? '';
+        dispatch(
+          login({
+            ...response.data.data,
+            accessToken: accessToken,
+          }),
+          setRole(response.data.data),
+        );
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchRefreshToken();
+  }, []);
+
   return (
     <>
-      <Provider store={store}>
-        <RouterProvider router={router}></RouterProvider>
-      </Provider>
+      <RouterProvider router={router}></RouterProvider>
     </>
   );
-}
+}

client/src/api/authApi.js

@@ -19,7 +19,7 @@ export const authApi = {
 
   reissue: async () => {
     const response = await apiInstance.post(
-      '/auth/reissue',
+      '/auth/refresh',
       {},
       {
         withCredentials: true,

client/src/main.jsx

@@ -2,9 +2,13 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx';
 import './css/index.css';
+import { Provider } from 'react-redux';
+import store from './store/store.js';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </StrictMode>,
-)
+);

client/src/pages/login/Login.jsx

@@ -19,11 +19,14 @@ export default function Login() {
     password: '',
   });
   const [isLoginButtonEnable, setIsLoginButtonEnable] = useState(false);
+  
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
   const handleInputChange = (event) => {
+    const { name, value } = event.target;
     setInputData((prev) => ({
       ...prev,
-      [event.target.name]: event.target.value,
+      [name]: value,
     }));
   };