Merge pull request #8 from MARU-EGG/Admin-file-upload-component

[Admin] 어드민 파일세팅 페이지 구현

src/hooks/useForm.ts

@@ -0,0 +1,28 @@
+import { llm_axiosInstance } from '../utils/axios';
+
+export const useForm = (type: string, category: string, html_file: File) => {
+  const formdata = new FormData();
+  formdata.append('type', type);
+  formdata.append('category', category);
+  formdata.append('html_file', html_file);
+
+  const uploadData = async () => {
+    console.log(formdata.get('type'));
+    console.log(formdata.get('category'));
+    console.log(formdata.get('html_file'));
+    try {
+      const response = await llm_axiosInstance.post('/upload_html/', formdata, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      console.log('Upload successful', response.data);
+      return response.data;
+    } catch (error) {
+      console.error('Upload Error', error);
+      throw error;
+    }
+  };
+
+  return uploadData;
+};

src/routes/admin-routes.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import Login from '../ui/pages/admin/login';
+import PrivateRoute from './private-route';
+import FileList from '../ui/pages/admin/file-list';
+import AdminLayout from '../ui/components/molecule/admin/Layout/admin-layout';
+
+const AdminRoutes: React.FC = () => {
+  const token = sessionStorage.getItem('Authorization');
+  return (
+    <Routes>
+      <Route path="/login" element={<Login />} />
+      <Route path="/" element={<PrivateRoute component={<AdminLayout />} authenticated={token} />}>
+        <Route path="setting/file" element={<FileList />} />
+      </Route>
+    </Routes>
+  );
+};
+
+export default AdminRoutes;

src/routes/AppRoutes.tsx → src/routes/app-routes.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
-import AdminRoutes from './AdminRoutes';
+import AdminRoutes from './admin-routes';
 import PageTest from '../ui/pages/page-test';
 
 const AppRoutes: React.FC = () => {

src/routes/private-route.tsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import { Navigate } from 'react-router-dom';
+
+export interface PrivateRouteProps {
+  authenticated: string | null;
+  component: React.ReactElement;
+}
+
+const PrivateRoute = ({ authenticated, component }: PrivateRouteProps) => {
+  return authenticated ? component : <Navigate to="/login"></Navigate>;
+};
+
+export default PrivateRoute;

src/ui/components/molecule/admin/Uploader.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { InboxOutlined } from '@ant-design/icons';
+import { Upload, UploadFile, UploadProps } from 'antd';
+
+const { Dragger } = Upload;
+
+interface UploaderProps {
+  fileList: UploadFile<File>[];
+  setFileList: React.Dispatch<React.SetStateAction<UploadFile<File>[]>>;
+}
+
+const Uploader: React.FC<UploaderProps> = ({ fileList, setFileList }) => {
+  const props: UploadProps = {
+    onRemove: (file) => {
+      const index = fileList.indexOf(file);
+      const newFileList = fileList.slice();
+      newFileList.splice(index, 1);
+      setFileList(newFileList);
+    },
+    beforeUpload: (file) => {
+      setFileList([...fileList, { ...file, originFileObj: file }]);
+
+      return false;
+    },
+
+    showUploadList: {
+      showPreviewIcon: true,
+      showRemoveIcon: true,
+    },
+    fileList,
+  };
+
+  return (
+    <div className="w-full">
+      <Dragger className="w-full" maxCount={1} {...props}>
+        <p className="text-blue-600 text-6xl">
+          <InboxOutlined />
+        </p>
+        <p className="text-xl">파일을 드래그해주세요</p>
+      </Dragger>
+    </div>
+  );
+};
+
+export default Uploader;

src/ui/pages/admin/file-list.tsx

@@ -0,0 +1,85 @@
+import { Button, Divider, Select } from 'antd';
+import React, { useState } from 'react';
+import { UploadFile } from 'antd/es/upload/interface';
+import Uploader from '../../components/molecule/admin/uploader';
+import { useForm } from '../../../hooks/useForm';
+
+const FileList: React.FC = () => {
+  const [category, setCategory] = useState('모집요강');
+  const [type, setType] = useState('수시');
+  const [uploading, setUploading] = useState(false);
+  const [fileList, setFileList] = useState<UploadFile<File>[]>([]);
+
+  const handleTypeChange = (value: string) => {
+    setType(value);
+  };
+
+  const handleCategoryChange = (value: string) => {
+    setCategory(value);
+  };
+
+  const handleUpload = async () => {
+    setUploading(true);
+    try {
+      if (fileList.length > 0) {
+        const file = fileList[0].originFileObj as File; // 여기서 실제 File 객체를 가져옵니다.
+        const uploadData = useForm(type, category, file);
+        await uploadData();
+        console.log('success');
+      }
+    } catch (error) {
+      console.error('Upload failed', error);
+    }
+    setUploading(false);
+  };
+
+  return (
+    <div className="w-full">
+      <Divider orientation="left">챗봇 관리 파일 리스트</Divider>
+      <div className="mx-8">
+        <div className="my-5">
+          <div className="mt-2">
+            전형방법:
+            <Select
+              defaultValue="수시"
+              className="ml-2 w-40"
+              onChange={handleTypeChange}
+              options={[
+                { value: '수시', label: '수시' },
+                { value: '정시', label: '정시' },
+                { value: '편입학', label: '편입학' },
+              ]}
+            />
+          </div>
+          <div className="mt-2">
+            카테고리:
+            <Select
+              defaultValue="모집요강"
+              className="ml-2 w-40"
+              onChange={handleCategoryChange}
+              options={[
+                { value: '모집요강', label: '모집요강' },
+                { value: '입시결과', label: '입시결과' },
+                { value: '기출문제', label: '기출문제' },
+                { value: '대학생활', label: '대학생활' },
+                { value: '면접/실기', label: '면접/실기' },
+              ]}
+            />
+          </div>
+        </div>
+        <Uploader setFileList={setFileList} fileList={fileList} />
+        <Button
+          type="primary"
+          className="mt-4"
+          onClick={handleUpload}
+          disabled={fileList.length === 0}
+          loading={uploading}
+        >
+          {uploading ? 'Uploading' : 'Start Upload'}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default FileList;

src/utils/axios.ts

@@ -0,0 +1,13 @@
+import axios from 'axios';
+
+export const llm_axiosInstance = axios.create({
+  baseURL: process.env.REACT_APP_LLM_SERVER_API_ADDRESS,
+  timeout: 10000,
+  withCredentials: false,
+});
+
+export const server_axiosInstance = axios.create({
+  baseURL: process.env.REACT_APP_SPRING_SERVER_API_ADDRESS,
+  timeout: 1000,
+  withCredentials: false,
+});