로그인 + authentication 리팩토링

src/App.tsx

@@ -8,10 +8,11 @@ import Main from './pages/Main';
 import NoticeDetail from './pages/NoticeDetail';
 import NoticeUpdate from './pages/NoticeUpdate';
 import NoticeWrite from './pages/NoticeWrite';
-
+import { AuthorizationProvider } from './providers/Authentication.tsx';
 const App = () => {
   return (
     <BrowserRouter>
+    <AuthorizationProvider>
       <Routes>
         <Route path="/" element={<LoginAPi />} />
         <Route path="/Main" element={<Main />} />
@@ -20,6 +21,7 @@ const App = () => {
         <Route path="/Update" element={<NoticeUpdate />} />
         <Route path="/Write" element={<NoticeWrite />} />
       </Routes>
+      </AuthorizationProvider>
     </BrowserRouter>
   );
 };

src/api/login.ts

@@ -1,7 +1,6 @@
 import apiAxios from './apiAxios';
-import { setCookie, getCookie } from '../utils/Cookies';
+import { setCookie } from '../utils/Cookies';
 import { useNavigate } from 'react-router-dom';
-import CustomRouter from '../utils/Routers';
 
 export interface LoginDataType {
   loginId: string;
@@ -18,6 +17,7 @@ const LoginAPi = () => {
         console.log(r.data);
         setCookie('member', r.data.UserCount);
         navigate('/main');
+        window.location.reload();
       })
       .catch(e => {
         e.response.data, alert('아이디 또는 비밀번호를 다시 입력해주세요');
@@ -28,19 +28,3 @@ const LoginAPi = () => {
 };
 
 export default LoginAPi;
-
-// export const login = async (loginData: LoginDataType) => {
-//   const navigation = CustomRouter();
-
-//   await apiAxios
-//     .post('/v2/admin/login', loginData)
-//     .then(r => {
-//       setCookie('Accesstoken', r.data.AccessToken);
-//       console.log(r.data);
-//       setCookie('member', r.data.UserCount);
-//     })
-
-//     .catch(e => {
-//       e.response.data, alert('아이디 또는 비밀번호를 다시 입력해주세요');
-//     });
-// };

src/providers/Authentication.tsx

@@ -0,0 +1,22 @@
+import { getCookie } from '../utils/Cookies';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { ReactNode, useEffect } from 'react';
+
+interface AuthenticationProviderProps {
+  children: ReactNode;
+}
+
+export const AuthorizationProvider = ({
+  children,
+}: AuthenticationProviderProps) => {
+  const navigate = useNavigate();
+  const token = getCookie('Accesstoken');
+
+
+  useEffect(() => {
+    if (!token) {
+      navigate('/');
+    }
+  }, [token]);
+  return <>{children}</>;
+};

src/utils/Cookies.ts

@@ -1,9 +1,40 @@
 import { Cookies } from 'react-cookie';
+
+/* eslint-disable */
+
+export interface CookieGetOptions {
+  doNotParse?: boolean;
+  doNotUpdate?: boolean;
+}
+export interface CookieSetOptions {
+  path?: string;
+  expires?: Date;
+  maxAge?: number;
+  domain?: string;
+  secure?: boolean;
+  httpOnly?: boolean;
+  sameSite?: boolean | 'none' | 'lax' | 'strict';
+}
+export interface CookieChangeOptions {
+  name: string;
+  value?: any;
+  options?: CookieSetOptions;
+}
+
 const cookies = new Cookies();
 
-export const setCookie = (name: string, value: string, option?: any) => {
-  return cookies.set(name, value, { ...option });
+export const setCookie = (
+  name: string,
+  value: string,
+  options?: CookieSetOptions
+) => {
+  return cookies.set(name, value, { ...options });
 };
-export const getCookie = (name: string) => {
-  return cookies.get(name);
+
+export const getCookie = (name: string, options?: CookieGetOptions) => {
+  return cookies.get(name, options);
+};
+
+export const removeCookie = (name: string, options?: CookieSetOptions) => {
+  return cookies.remove(name, options);
 };