ClustProject · 0-wook · Oct 30, 2023 · Oct 10, 2023 · Oct 20, 2023 · Oct 30, 2023
diff --git a/README.md b/README.md
@@ -2,26 +2,69 @@
 
 [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)
 
-![https://img.shields.io/github/workflow/status/wise-pangnem/WSAutoMLMainWeb/build](https://img.shields.io/github/workflow/status/wise-pangnem/WSAutoMLMainWeb/build)
+![https://img.shields.io/github/workflow/status/wise-pangnem/WSAutoMLMainWeb/build](https://img.shields.io/github/workflow/status/0-wook/WSAutoMLMainWeb/build)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=wise-pangnem_AutoMLMainWeb&metric=coverage)](https://sonarcloud.io/summary/new_code?id=wise-pangnem_AutoMLMainWeb)
 
 ### 소개
 
-AutoML은 날씨, 교통 관련 오픈 데이터를 제공하는 오픈 데이터 웹 플랫폼입니다.
+---
 
-### 사진
+WS-AutoML은 클라우드 기반의 시계열 데이터 활용을 위한 오픈 데이터 제공 및 모델 학습·활용 서비스를 제공하는 통합 데이터 관리 플랫폼입니다.
 
-어드민 서비스 메인 페이지
-![admin-service-main-page.png](images/admin-service-main-page.png)
+- 관리자 서비스 메인 페이지
+  ![admin-service-main.png](images/admin-service-main.png)
 
-사용자 서비스 메인 페이지
-![user-service-main-page.png](images/user-service-main-page.png)
+- 사용자 서비스 메인 페이지
+  ![user-service-main.png](images/user-service-main.png)
+
+### 주요 기능
+
+---
+
+- **관리자**
+
+  1. 메타데이터 관리
+
+  - 메타데이터 리스트
+    ![admin-service-metadata-management.png](images/admin-service-metadata-management.png)
+  - 메타데이터 업로드
+    ![admin-service-metadata-upload.png](images/admin-service-metadata-upload.png)
+
+  2. 사용자 권한 관리
+     ![admin-service-user-management.png](images/admin-service-user-management.png)
+
+- **사용자**
+
+  1. 메타데이터 검색 및 조회
+     ![user-service-search.png](images/user-service-search.png)
+
+     ![user-service-search-detail.png](images/user-service-search-detail.png)
+
+  - 조회한 데이터 미리보기 및 파일 다운로드 가능
+
+  2. 사용자별 모델 운용(모델 학습, 모델 활용)
+
+  - 모델 학습
+
+    - 사용할 데이터셋 선택
+      ![user-service-model-learning-data-input.png](images/user-service-model-learning-data-input.png)
+    - 데이터 탐색 및 목표 변수 선택
+      ![user-service-model-learning-data-navigation.png](images/user-service-model-learning-data-navigation.png)
+    - 특징 중요도에 따른 사용 변수 선택
+      ![user-service-model-learning-feature-selection.png](images/user-service-model-learning-feature-selection.png)
+    - 알고리즘 선택 및 파라미터 설정 후 모델 생성
+      ![user-service-model-learning-select-algorithm.png](images/user-service-model-learning-select-algorithm.png)
+
+  - 모델 운영
+    ![user-service-model-operation.png](images/user-service-model-operation.png)
 
 ### 주요 기술
 
+---
+
 웹
 
-- React, Material UI
+- React, Material UI, Ant Design
 
 서버
 
@@ -40,4 +83,6 @@ AutoML은 날씨, 교통 관련 오픈 데이터를 제공하는 오픈 데이
 
 ### 기타
 
+---
+
 - [문서 목록](./docs)
diff --git a/app/admin-web/package-lock.json b/app/admin-web/package-lock.json
diff --git a/app/admin-web/package.json b/app/admin-web/package.json
@@ -11,9 +11,7 @@
     "@mui/x-data-grid": "^5.12.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
-    "cors": "^2.8.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-google-button": "^0.7.2",

diff --git a/app/admin-web/src/App.js b/app/admin-web/src/App.js
@@ -9,47 +9,31 @@ import LoginPage from "./pages/LoginPage";
 import HomePage from "./pages/HomePage";
 import { AuthProvider } from "./components/authentication/AuthContext";
 import PrivateRoute from "./components/authentication/PrivateRoute";
+import AdminRoute from "./components/authentication/AdminRoute";
 
 function PageTemplate() {
   return (
-    <PaperBase>
-      <Routes>
-        {/* PaperBase에서 props.children으로 들어간다. */}
-        <Route
-          path='/Home'
-          element={
-            <PrivateRoute>
-              <HomePage />
-            </PrivateRoute>
-          }
-        />
-        <Route
-          path='/metadata/*'
-          element={
-            <PrivateRoute>
-              <MetaDataPage />
-            </PrivateRoute>
-          }
-        />
-        <Route
-          path='/user/*'
-          element={
-            <PrivateRoute>
-              <UserPage />
-            </PrivateRoute>
-          }
-        />
-        <Route
-          path='/user-management/*'
-          element={
-            <PrivateRoute>
-              <UserPage />
-            </PrivateRoute>
-          }
-        />
-        <Route path='*' element={<NotFound />} />
-      </Routes>
-    </PaperBase>
+    <PrivateRoute>
+      <PaperBase>
+        <Routes>
+          {/* PaperBase에서 props.children으로 들어간다. */}
+          <Route path='/Home' element={<HomePage />} />
+          <Route path='/metadata/*' element={<MetaDataPage />} />
+          <Route path='/user/*' element={<UserPage />} />
+
+          <Route
+            path='/user-management/*'
+            element={
+              <AdminRoute>
+                <UserPage />
+              </AdminRoute>
+            }
+          />
+
+          <Route path='*' element={<NotFound />} />
+        </Routes>
+      </PaperBase>
+    </PrivateRoute>
   );
 }
 

diff --git a/app/admin-web/src/components/authentication/AdminRoute.jsx b/app/admin-web/src/components/authentication/AdminRoute.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+import { useAuth } from "./AuthContext";
+import Forbidden from "../../error/Forbidden";
+
+function AdminRoute({ children }) {
+  const { user } = useAuth();
+  return user.role === "ADMIN" ? children : <Forbidden />;
+}
+
+export default AdminRoute;
diff --git a/app/admin-web/src/components/authentication/PrivateRoute.jsx b/app/admin-web/src/components/authentication/PrivateRoute.jsx
@@ -1,11 +1,11 @@
 import React from "react";
 
-import { Navigate } from "react-router-dom";
 import { useAuth } from "./AuthContext";
+import Forbidden from "../../error/Forbidden";
 
 function PrivateRoute({ children }) {
   const { user } = useAuth();
-  return user ? children : <Navigate to='/' />;
+  return user ? children : <Forbidden />;
 }
 
 export default PrivateRoute;
diff --git a/app/admin-web/src/error/Forbidden.jsx b/app/admin-web/src/error/Forbidden.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import "../style.css";
+
+function Forbidden() {
+  return (
+    <div id='notfound'>
+      <div className='notfound'>
+        <div className='notfound-404'>
+          <h2>
+            403 - 허가되지 않은 사용자입니다. <br /> 관리자에게 문의하세요.
+          </h2>
+        </div>
+        <a href='/'>뒤로가기</a>
+      </div>
+    </div>
+  );
+}
+
+export default Forbidden;
diff --git a/app/admin-web/src/style.css b/app/admin-web/src/style.css
@@ -0,0 +1,94 @@
+* {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+}
+
+#notfound {
+    position: relative;
+    height: 100vh;
+}
+
+#notfound .notfound {
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.notfound {
+    max-width: 520px;
+    width: 100%;
+    line-height: 1.4;
+    text-align: center;
+}
+
+.notfound .notfound-404 {
+    position: relative;
+    height: 200px;
+    margin: 0px auto 20px;
+    z-index: -1;
+}
+
+.notfound .notfound-404 h2 {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 28px;
+    font-weight: 400;
+    text-transform: uppercase;
+    color: #211b19;
+    background: #fff;
+    padding: 10px 5px;
+    margin: auto;
+    display: inline-block;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    right: 0;
+}
+
+.notfound a {
+    font-family: 'Montserrat', sans-serif;
+    display: inline-block;
+    font-weight: 700;
+    text-decoration: none;
+    color: #fff;
+    background: #3f51b5;
+    text-transform: uppercase;
+    padding: 13px 23px;
+    font-size: 18px;
+    -webkit-transition: 0.2s all;
+    transition: 0.2s all;
+}
+
+.notfound a:hover {
+    color: white;
+    background: #7986cb;
+}
+
+@media only screen and (max-width: 767px) {
+    .notfound .notfound-404 h1 {
+        font-size: 148px;
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .notfound .notfound-404 {
+        height: 148px;
+        margin: 0px auto 10px;
+    }
+
+    .notfound .notfound-404 h2 {
+        font-size: 16px;
+    }
+
+    .notfound a {
+        padding: 7px 15px;
+        font-size: 14px;
+    }
+}