Merge pull request #64 from boostcamp-2020/develop

1.0.0 version 최종
boostcamp-2020 · Dec 21, 2020 · cb8a839 · cb8a839
2 parents 0f7323a + cc20bf6
commit cb8a839
Show file tree

Hide file tree

Showing 33 changed files with 773 additions and 441 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,67 @@
-readme
+# Acent Admin 
+
+![Acent](https://user-images.githubusercontent.com/52685325/102728089-1ce1fa00-436d-11eb-86b3-cfa0197e6870.PNG)
+
+[Acent](http://101.101.208.107/) 프로젝트의  admin 사이트입니다.  
+
+## Acent 
+
+- Acent는 웹 개발자 팀이 오류를 발견하고, 분류하고, 분석할 수 있도록 돕는 모니터링 시스템입니다. 
+- 서비스에 로그인하여 프로젝트를 생성하고, 코드를 이식하는 것으로 사용 가능합니다. 
+
+**Admin**
+
+- 프로젝트 단위로 이슈 관리 
+- 프로젝트 초대 및 담당자 설정 
+- 에러의 내용 및 발생 환경 모니터링 
+- 에러의 종류 및 프로젝트 상황의 시각화 
+- 새로운 이슈와 초대에 대한 알림 
+
+**Repository**
+
+- [Acent Server](https://github.com/boostcamp-2020/Project11-C-Web-FE-Performance-Monitoring-Server)
+- [Acent SDK](https://github.com/boostcamp-2020/Project11-C-Web-FE-Performance-Monitoring-SDK)
+- [Acent Wiki](https://github.com/boostcamp-2020/Project11-C-Web-FE-Performance-Monitoring-Server/wiki)
+
+## 실행 방법
+
+### Acent 사이트 사용자
+
+1. Acent 사이트에 접속합니다. [link](http://101.101.208.107/)
+2. 회원 가입, 프로젝트 생성 후 가이드에 따라 Acent 모듈을 설치합니다. 
+3. 에러가 발생함에 따라 알림을 받고, 에러의 정보를 확인할 수 있게 됩니다. 
+
+### Local 환경에서 설치 후 사용
+
+#### yarn을 이용한 설치 및 실행 
+
+yarn을 이용해 패키지 관리를 했기 때문에, yarn 사용을 권장합니다. 
+
+```bash
+yarn install 
+
+# dev 환경 실행
+yarn run dev 
+
+# 빌드 파일 생성
+yarn run build
+```
+
+#### .env 
+
+`.env` 파일을 추가해주세요. `SERVER_URL`은 사용하실 서버의 주소를 적으시면 됩니다. 
+
+```bash
+API_URL=SERVER_URL
+```
+
+#### server
+
+Local 환경에서 설치 후 실행시 server도 운영이 되어야 정상적인 동작을 확인할 수 있습니다. 해당 repository에가서 설치 후 실행해주세요. [Link](https://github.com/boostcamp-2020/Project11-C-Web-FE-Performance-Monitoring-Server)
+
+## Member
+
+| ![](https://avatars2.githubusercontent.com/u/45379812?s=460&v=4) | ![](https://avatars0.githubusercontent.com/u/22471977?s=460&v=4) | ![](https://avatars3.githubusercontent.com/u/37804777?s=460&u=088956f4c1a3613536ddb54dac7492b469a12ca9&v=4) | ![](https://avatars3.githubusercontent.com/u/52685325?s=460&u=a56a2d9019115082b13847ca8162879e85117932&v=4) |
+| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| 권오민 [@ohmink](https://github.com/ohmink)                  | 신동민 [@NukeStorm](https://github.com/NukeStorm)            | 유현우 [@puba5](https://github.com/puba5)                    | 하지수 [@JeesooHaa](https://github.com/JeesooHaa)            |
+
diff --git a/babel.config.js b/babel.config.js
@@ -1,11 +1,19 @@
-module.exports = {
-  presets: [
-    '@babel/preset-react',
+module.exports = api => {
+  api.cache(true);
+
+  const presets = [
     [
       '@babel/preset-env',
-      {
-        targets: { chrome: 55, esmodules: true },
-      },
+      { targets: { ie: '11' }, useBuiltIns: 'usage', corejs: '3' },
     ],
-  ],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ];
+  const plugins = [
+    'react-hot-loader/babel',
+    '@babel/plugin-transform-classes',
+    '@babel/plugin-transform-arrow-functions',
+  ];
+
+  return { presets, plugins };
 };
diff --git a/conf/conf.d/default.conf b/conf/conf.d/default.conf
@@ -6,6 +6,16 @@ upstream node_proxy {
 
 
 server {
+
+    gzip on;
+    gzip_static on;
+    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_proxied any;
+    gzip_vary on;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k;
+    gzip_http_version 1.1;
+
     listen 80;
     location / {
 

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "dev": "webpack-dev-server --open --mode development",
-    "build": "webpack --progress --mode production",
+    "build": "NODE_ENV=production webpack --progress --mode production",
     "prettier": "prettier --write --config ./.prettierrc \"./src/**/*.{ts,tsx,jsx}\"",
     "lint": "eslint \"./src/**/*.{ts,tsx,jsx}\"",
     "lint:fix": "eslint --fix \"./src**/*.{ts,tsx,jsx}\""
@@ -17,15 +17,23 @@
     "@babel/cli": "^7.1.0",
     "@babel/core": "^7.12.3",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-decorators": "^7.12.1",
+    "@babel/plugin-transform-arrow-functions": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
+    "@babel/preset-modules": "^0.1.4",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
+    "@babel/runtime-corejs3": "^7.12.5",
     "@sentry/react": "^5.27.4",
     "@sentry/tracing": "^5.27.4",
     "@svgr/webpack": "^5.5.0",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
-    "babel-loader": "^8.2.1",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-import": "^1.13.3",
     "clean-webpack-plugin": "^3.0.0",
+    "compression-webpack-plugin": "^7.1.0",
     "css-loader": "^5.0.1",
     "dotenv": "^8.2.0",
     "eslint": "^7.13.0",
@@ -38,12 +46,16 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "prettier": "^2.1.2",
     "process": "^0.11.10",
     "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.0.3",
     "ts-loader": "^8.0.11",
     "typescript": "^4.1.2",
+    "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^5.4.0",
+    "webpack-bundle-analyzer": "^4.3.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
   },
@@ -59,13 +71,23 @@
     "axios": "^0.21.0",
     "billboard.js": "^2.2.0-next.2",
     "clsx": "^1.1.1",
+    "core-js": "^3.8.1",
     "cors": "^2.8.5",
     "moment": "^2.29.1",
     "react": "^17.0.1",
+    "react-app-polyfill": "^2.0.0",
     "react-dom": "^17.0.1",
+    "react-hot-loader": "^4.13.0",
     "react-router-dom": "^5.2.0",
     "react-syntax-highlighter": "^15.4.3",
+    "regenerator-runtime": "^0.13.7",
     "styled-components": "^5.2.1",
     "victory": "^35.4.3"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all",
+    "ie 11"
+  ]
 }
diff --git a/public/index.html b/public/index.html
@@ -2,17 +2,18 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <base href="/">
+    <base href="/" />
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Acent</title>
   </head>
 
   <body>
     <div id="root"></div>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <script src="../dist/bundle.js"></script>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,6 +16,8 @@ import { makeStyles } from '@material-ui/core/styles';
 import DocsPage from '@pages/DocsPage';
 import Tutorial from '@pages/Tutorial';
 import PositionProvider from './context/PositionProvider';
+import IssuesProvider from './context/IssuesProvider';
+import UserProvider from './context/UserProvider';
 
 const useStyles = makeStyles(theme => ({
   appBar: {
@@ -33,23 +35,31 @@ const App: React.FC = () => {
         <Header />
       </AppBar>
       <Route path="/" component={Login} exact />
-      <PositionProvider>
-        <Route path="/projects" component={Projects} exact />
-        <Switch>
-          <Route path="/usage/:platform" component={Usage} exact />
-          <Route path="/projects/new" component={ProjectNew} exact />
-          <Route path="/projects/issues/:projectId" component={Issues} exact />
-          <Route
-            path="/projects/issues/detail/:issueId"
-            component={IssueDetail}
-            exact
-          />
-          <Route path="/projects/:projectId/stats" component={Stats} exact />
-        </Switch>
-        <Route path="/alerts" component={Alerts} exact />
-      </PositionProvider>
-      <Route path="/docs" component={DocsPage} exact />
-      <Route path="/tutorial" component={Tutorial} exact />
+      <UserProvider>
+        <PositionProvider>
+          <IssuesProvider>
+            <Route path="/projects" component={Projects} exact />
+
+            <Route path="/usage/:platform" component={Usage} exact />
+            <Route path="/projects/new" component={ProjectNew} exact />
+            <Route
+              path="/projects/issues/:projectId"
+              component={Issues}
+              exact
+            />
+            <Route
+              path="/projects/issues/detail/:issueId"
+              component={IssueDetail}
+              exact
+            />
+            <Route path="/projects/:projectId/stats" component={Stats} exact />
+
+            <Route path="/alerts" component={Alerts} exact />
+          </IssuesProvider>
+        </PositionProvider>
+        <Route path="/docs" component={DocsPage} exact />
+        <Route path="/tutorial" component={Tutorial} exact />
+      </UserProvider>
     </>
   );
 };

diff --git a/src/components/Issues/MainContainer.tsx b/src/components/Issues/MainContainer.tsx
@@ -8,6 +8,7 @@ import Filter from './issue/Filter';
 import TableColumn from './issue/TableColumn';
 import ResolveProvider from '../../context/ResolveProvider';
 import NoticeEmpty from '../common/NoticeEmpty';
+import { IssuesStateContext } from '../../context/IssuesProvider';
 
 const useStyles = makeStyles(theme => ({
   backdrop: {
@@ -21,63 +22,12 @@ const useStyles = makeStyles(theme => ({
 
 const MainContainer = ({ projectId }) => {
   const classes = useStyles();
-  const [open, setOpen] = React.useState(true);
-
-  const [issues, setIssues] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const getIssues = async () => {
-      try {
-        setError(null);
-        setIssues(null);
-
-        setLoading(true);
-        const response: any = await axios.get(
-          `${process.env.API_URL}/issue/project/${projectId}`,
-          {
-            withCredentials: true,
-          }
-        );
-
-        const checkBoxState: boolean[] = new Array(response.data.length + 1);
-        checkBoxState.fill(false);
-        setIssues(response.data);
-      } catch (e) {
-        setError(e);
-      }
-      setLoading(false);
-    };
-
-    getIssues();
-  }, []);
-
-  if (loading) {
-    return (
-      <div>
-        <Backdrop className={classes.backdrop} open={open}>
-          <CircularProgress color="inherit" />
-        </Backdrop>
-      </div>
-    );
-  }
-  if (error) return <div>에러가 발생했습니다</div>;
-  if (!issues) return null;
-  if (issues.length === 0) {
-    return (
-      <div className={classes.MainCotainer}>
-        <Filter eventNum={issues.length} projectId={projectId} />
-        <NoticeEmpty type="issues" />
-      </div>
-    );
-  }
 
   return (
     <div className={classes.MainCotainer}>
-      <Filter eventNum={issues.length} projectId={projectId} />
+      <Filter projectId={projectId} />
       <ResolveProvider>
-        <TableColumn issues={issues} />
+        <TableColumn />
       </ResolveProvider>
     </div>
   );