Merge pull request #23 from MARU-EGG/admin-questions-answer-table

[Admin] Refactor: all admin page

package.json

@@ -19,6 +19,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.3.1",
+    "react-cookie": "^7.2.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",

src/api/admin-check-question-answer.ts

@@ -0,0 +1,24 @@
+import { server_axiosInstance } from '../utils/axios';
+import { getCookie } from '../utils/cookies';
+
+interface AdminCheckQuestionAnswerProps {
+  questionId: number;
+  check: boolean;
+}
+export async function AdminCheckQuestionAnswer({ questionId, check }: AdminCheckQuestionAnswerProps) {
+  const data = {
+    questionId,
+    check,
+  };
+  try {
+    const response = await server_axiosInstance.post('/api/admin/questions/check', JSON.stringify(data), {
+      headers: {
+        Authorization: `Bearer ${getCookie('accessToken')}`,
+        'Content-Type': 'application/json',
+      },
+    });
+    return response.data;
+  } catch (error: any) {
+    throw new Error('checked failed');
+  }
+}

src/api/admin-edit-answer.ts

@@ -0,0 +1,22 @@
+import { server_axiosInstance } from '../utils/axios';
+import { getCookie } from '../utils/cookies';
+
+export async function AdminEditAnswer(id: number, content: string): Promise<any> {
+  const data = {
+    id,
+    content,
+  };
+
+  try {
+    const response = await server_axiosInstance.post('/api/admin/answers', JSON.stringify(data), {
+      headers: {
+        Authorization: `Bearer ${getCookie('accessToken')}`,
+        'Content-Type': 'application/json',
+      },
+    });
+    console.log(response.data);
+    return response.data;
+  } catch (error: any) {
+    throw new Error('Post Failed');
+  }
+}

src/api/admin-login.ts

@@ -1,34 +1,30 @@
-import axios from 'axios';
-import useSWR, { mutate } from 'swr';
+import { server_axiosInstance } from '../utils/axios';
+import { getCookie, removeCookie, setCookie } from '../utils/cookies';
 
-interface LoginResponse {
-  token: string;
-  user: {
-    email: string;
+export async function AdminLogin(email: string, password: string) {
+  const data = {
+    email,
+    password,
   };
-}
 
-const fetcher = (url: string) => axios.get(url).then((res) => res.data);
+  try {
+    if (getCookie('accessToken')) {
+      removeCookie('accessToken');
+      removeCookie('refreshToken');
+    }
 
-export async function login(email: string, password: string): Promise<LoginResponse> {
-  const response = await axios.post<LoginResponse>('경로변경넣어야됌', { email, password }, { withCredentials: true });
-  return response.data;
-}
+    const response = await server_axiosInstance.post('/api/auth/sign-in', data);
+    const accessToken: string = response.headers['authorization'];
+    const refreshToken: string = response.headers['authorization-refresh'];
 
-export function useUser() {
-  const { data, error } = useSWR<LoginResponse>('경로넣어야행', fetcher);
-  return {
-    user: data,
-    isLoading: !error && !data,
-    isError: error,
-  };
+    setCookie('accessToken', accessToken.split(' ')[1], { path: '/admin', secure: true, sameSite: 'lax' });
+    setCookie('refreshToken', refreshToken.split(' ')[1], { path: '/admin', secure: true, sameSite: 'lax' });
+  } catch (error: any) {
+    throw new Error('Login Failed - Server network failed');
+  }
 }
 
-export async function handleLogin(email: string, password: string): Promise<void> {
-  try {
-    const userData = await login(email, password);
-    mutate('경로헤헿콩', userData, false);
-  } catch (err: any) {
-    throw new Error(err.message);
-  }
+export function AdminLogout() {
+  removeCookie('accessToken', { path: '/admin', secure: true, sameSite: 'lax' });
+  removeCookie('refreshToken', { path: '/admin', secure: true, sameSite: 'lax' });
 }

src/api/admin-question-check.ts

@@ -0,0 +1,20 @@
+import { server_axiosInstance } from '../utils/axios';
+
+interface AdminQuestionCheckProps {
+  type: string;
+  category?: string;
+}
+
+export async function adminQuestionCheck({ type, category }: AdminQuestionCheckProps) {
+  try {
+    const response = await server_axiosInstance.get('/api/questions', {
+      params: {
+        type,
+        category,
+      },
+    });
+    return response.data;
+  } catch (error: any) {
+    throw new Error(`Upload failed: ${error.message}`);
+  }
+}

src/api/admin-retrieve-file.ts

@@ -0,0 +1,20 @@
+import { llm_axiosInstance } from '../utils/axios';
+
+interface AdminRetrieveFileProps {
+  type?: string;
+  category?: string;
+}
+
+export async function adminRetrieveFile({ type, category }: AdminRetrieveFileProps) {
+  try {
+    const response = await llm_axiosInstance.get('/retrieve_documents_by_type_and_category', {
+      params: {
+        type,
+        category,
+      },
+    });
+    return response.data;
+  } catch (error: any) {
+    throw new Error(`Upload failed: ${error.message}`);
+  }
+}

src/index.tsx

@@ -3,9 +3,14 @@ import App from './App';
 import ReactDOM from 'react-dom/client';
 import reportWebVitals from './reportWebVitals';
 import './index.css';
+import { CookiesProvider } from 'react-cookie';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(<App />);
+root.render(
+  <CookiesProvider>
+    <App />
+  </CookiesProvider>,
+);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/routes/admin-routes.tsx

@@ -3,16 +3,17 @@ import { Route, Routes } from 'react-router-dom';
 import PrivateRoute from './private-route';
 import FileList from '../ui/pages/admin/file-list';
 import Login from '../ui/pages/admin/login';
-import QuestionCheck from '../ui/pages/admin/question-check';
 import AdminLayout from '../ui/components/admin/Layout/admin-layout';
-
+import { getCookie } from '../utils/cookies';
+import QuestionCheck from '../ui/pages/admin/question-check';
 const AdminRoutes: React.FC = () => {
-  const token = sessionStorage.getItem('Authorization');
+  const token = getCookie('accessToken');
   return (
     <Routes>
       <Route path="/login" element={<Login />} />
       <Route path="/" element={<PrivateRoute component={<AdminLayout />} authenticated={token} />}>
         <Route path="setting/file" element={<FileList />} />
+        <Route path="question/list" element={<QuestionCheck />} />
       </Route>
     </Routes>
   );

src/routes/app-routes.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import AdminRoutes from './admin-routes';
-import PageTest from '../ui/pages/page-test';
 import MaruEgg from '../ui/pages/maru-egg';
 
 const AppRoutes: React.FC = () => {
   return (
     <Routes>
       <Route path="/" element={<MaruEgg />} />
       <Route path="/admin/*" element={<AdminRoutes />} />
-      <Route path="/test/*" element={<PageTest />} />
     </Routes>
   );
 };

src/routes/private-route.tsx

@@ -7,7 +7,7 @@ export interface PrivateRouteProps {
 }
 
 const PrivateRoute = ({ authenticated, component }: PrivateRouteProps) => {
-  return authenticated ? component : <Navigate to="/login"></Navigate>;
+  return authenticated ? component : <Navigate to="/admin/login"></Navigate>;
 };
 
 export default PrivateRoute;

src/ui/components/admin/Layout/admin-layout.tsx

@@ -1,19 +1,27 @@
 import React, { useEffect, useState } from 'react';
-import { Breadcrumb, Layout, Menu } from 'antd';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Breadcrumb, Button, Layout, Menu } from 'antd';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import SlideMenu from '../slide-menu/slide-menu';
 import { Header } from 'antd/es/layout/layout';
+import { AdminLogout } from '../../../../api/admin-login';
+import { removeCookie } from '../../../../utils/cookies';
 
 const { Sider, Content, Footer } = Layout;
 
 const AdminLayout: React.FC = () => {
   const { pathname } = useLocation();
+  const navigate = useNavigate();
   useEffect(() => {
     pathname.split('/').map((a, i) => {
       console.log(pathname.split('/')[i]);
     });
   });
 
+  const handleLogout = () => {
+    AdminLogout();
+    navigate('/admin/login');
+  };
+
   const breadcrumpItem1 = pathname.split('/')[1];
   const breadcrumpItem2 = pathname.split('/')[2];
 
@@ -24,8 +32,11 @@ const AdminLayout: React.FC = () => {
         <SlideMenu />
       </Sider>
       <Layout className="site-layout">
-        <Header className="flex items-center bg-[#DFF4FF]">
+        <Header className="flex items-center justify-between bg-white">
           <Breadcrumb separator=">" items={breadcrumpItems} className="pl-2 text-lg text-black" />
+          <Button type="primary" onClick={handleLogout}>
+            로그아웃
+          </Button>
         </Header>
         <Content style={{ margin: '16px 0' }}>
           <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>