Merge pull request #141 from osamhack2021/feature/front-common-compon…

…ents Feature/front common components
osamhack2021 · Oct 11, 2021 · 49b041b · 49b041b
2 parents 88790df + 734c475
commit 49b041b
Show file tree

Hide file tree

Showing 16 changed files with 135 additions and 292 deletions.
diff --git a/WEB/frontend/package-lock.json b/WEB/frontend/package-lock.json
diff --git a/WEB/frontend/src/App.js b/WEB/frontend/src/App.js
@@ -13,7 +13,6 @@ import LoginModal from './components/Modal/LoginModal';
 import RegisterModal from './components/Modal/RegisterModal';
 import PasswordResetModal from './components/Modal/PasswordResetModal';
 import InitInfo from './components/Modal/InitInfo';
-import FilterTable from './components/FilterTable';
 import Search from './components/Search';
 import DynamicRoutes from "./DynamicRoutes";
 

diff --git a/WEB/frontend/src/components/AutocompleteInSearch.js b/WEB/frontend/src/components/AutocompleteInSearch.js
@@ -1,33 +1,9 @@
 import React, { useEffect, useState, useRef } from "react";
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
-import { search, shapeData, sort } from "./searchTable";
-
-export default function AutocompleteInSearch({ tableData, options }){
-  const [searchState, setSearchState] = useState({
-    isActive: false,
-    query: null
-  });
 
+export default function AutocompleteInSearch(){
   const searchInputRef = useRef(null);
-
-  const handleSearchBtnClick = () => {
-    const searchInput = document.getElementById("search-query-input");
-    setSearchState((prevState) => {
-      return {
-        ...prevState,
-        query: searchInput.value
-      };
-    });
-
-    const formattedSearchResults = search(
-      shapeData(tableData, options.headers),
-      searchInput.value
-    );
-    setData(formattedSearchResults);
-  };
-
-  const [data, setData] = useState(shapeData(tableData, options.headers));
 
   return(    
     <Autocomplete

diff --git a/WEB/frontend/src/components/Dashboard/TrendsCard.js b/WEB/frontend/src/components/Dashboard/TrendsCard.js
@@ -14,6 +14,7 @@ import { DataGrid, useGridSlotComponentProps } from '@mui/x-data-grid';
 import moment from 'moment';
 import ProgressBar from '../Common/ProgressBar';
 import useFetch from '../../hooks/useFetch';
+import "../../css/pageStyle.css"
 
 const columns = [
   {

diff --git a/WEB/frontend/src/components/Dashboard/WordCloud.js b/WEB/frontend/src/components/Dashboard/WordCloud.js
@@ -17,7 +17,7 @@ const WordCloud = ({ options }) => {
   const { data, isPending, error } = useFetch(`/data/wordCloud.json`);
 
   return (
-    <Card style={{ height: '400px' }}>
+    <Card style={{ height: '400px', fontFamily: "Noto sans KR", fontSize: "2rem" }}>
       <CardHeader title="오늘의 키워드" />
       <Divider />
       {isPending ? (

diff --git a/WEB/frontend/src/components/DetectionStatus/AppliedFilter.js b/WEB/frontend/src/components/DetectionStatus/AppliedFilter.js
@@ -26,7 +26,7 @@ export default function AppliedFilter() {
         <Grid item>
           <Chip
             key={id}
-            sx={{ borderRadius: '5px' }}
+            sx={{ borderRadius: '5px', fontFamily: "Noto sans KR"}}
             label={data}
             onDelete={handleDelete(data)}
           />

diff --git a/WEB/frontend/src/components/DetectionStatus/FilterBar.js b/WEB/frontend/src/components/DetectionStatus/FilterBar.js
@@ -1,78 +1,79 @@
 import {
-  Box,
-  Button,
-  Card,
-  CardHeader,
-  CardContent,
-  Divider,
-  Stack,
-  Typography,
-} from '@mui/material';
-import FilterCheckbox from './FilterCheckbox';
-
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { filterListState } from '../../atoms/filterListState';
-import { searchListState } from '../../atoms/searchListState';
-
-export default function FilterBar() {
-  const filterList = useRecoilValue(filterListState);
-  const searchList = useRecoilValue(searchListState);
-
-  return (
-    <Card
-      sx={{ right: 0, marginTop: '38px', minHeight: '100%' }}
-      elevation={1}
-      spacing={3}
-    >
-      <CardHeader
-        action={
-          <Button style={{ fontSize: '10px', marginTop: '10px' }} size="small">
-            RESET
-          </Button>
-        }
-        titleTypographyProps={{ variant: 'body1' }}
-        title="FILTER"
-      />
-      <Divider />
-
-      {Object.entries(namedEntityMap).map(([filterLabel, filterCode]) => {
-        const filterTags = Object.entries(searchList.filterTags[filterCode]);
-        return (
-          <CardContent style={{ marginBottom: '16px' }}>
-            <Box className="filter_con">
-              <Stack
-                direction="row"
-                alignItems="center"
-                justifyContent="space-between"
-              >
-                <Typography>글에서 찾은 {filterLabel}</Typography>
-                <Typography>{filterTags.length}</Typography>
-              </Stack>
-              <Box>
-                {/* <FilterCheckbox count={10} hashtag="myHashtag" key="myHashtag" onToggle={toggleFilter} /> */}
-                {filterTags
-                  .sort(([_, a], [__, b]) => (a < b ? 1 : -1))
-                  .map(([hashtag, freq], i) => (
-                    <FilterCheckbox
-                      count={freq}
-                      hashtag={hashtag}
-                      key={hashtag}
-                      checked={filterList.includes(hashtag)}
-                    />
-                  ))}
-                <Button
-                  size="small"
-                  sx={{ float: 'right', marginRight: '-15px' }}
+    Box,
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    Divider,
+    Stack,
+    Typography,
+  } from '@mui/material';
+  import FilterCheckbox from './FilterCheckbox';
+
+  import { useRecoilState, useRecoilValue } from 'recoil';
+  import { filterListState } from '../../atoms/filterListState';
+  import { searchListState } from '../../atoms/searchListState';
+
+  export default function FilterBar() {
+    const filterList = useRecoilValue(filterListState);
+    const searchList = useRecoilValue(searchListState);
+
+    return (
+      <Card
+        sx={{ right: 0, marginTop: '38px', minHeight: '100%', marginRight: '5em' }}
+        elevation={1}
+        spacing={3}
+      >
+        <CardHeader
+          action={
+            <Button style={{ fontSize: '11px', fontWeight: '800', fontFamily: 'Noto sans KR', marginTop: '-20px', marginRight: '-8px', marginBottom: '-6px' }} size="small">
+              RESET
+            </Button>
+          }
+          titleTypographyProps={{ variant: 'body1' }}
+          title="FILTER"
+          sx={{ fontFamily: "Noto sans KR", fontSize: "1.5em", fontWeight: "600"}}
+        />
+        <Divider />
+
+        {Object.entries(namedEntityMap).map(([filterLabel, filterCode]) => {
+          const filterTags = Object.entries(searchList.filterTags[filterCode]);
+          return (
+            <CardContent style={{ marginBottom: '35px' }}>
+              <Box className="filter_con" sx={{lineHeight: "2.8"}}>
+                <Stack
+                  direction="row"
+                  alignItems="center"
+                  justifyContent="space-between"
                 >
-                  더보기
-                </Button>
+                  <Typography sx={{ fontFamily: "Noto sans KR", fontSize: "1.0rem" }}>글에서 찾은 {filterLabel}</Typography>
+                  <Typography sx={{ fontFamily: "Noto sans KR", fontSize: "1.0rem" }}>{filterTags.length}</Typography>
+                </Stack>
+                <Box>
+                  {/* <FilterCheckbox count={10} hashtag="myHashtag" key="myHashtag" onToggle={toggleFilter} /> */}
+                  {filterTags
+                    .sort(([_, a], [__, b]) => (a < b ? 1 : -1))
+                    .map(([hashtag, freq], i) => (
+                      <FilterCheckbox
+                        count={freq}
+                        hashtag={hashtag}
+                        key={hashtag}
+                        checked={filterList.includes(hashtag)}
+                      />
+                    ))}
+                  <Button
+                    size="small"
+                    sx={{ float: 'right', marginRight: '-15px', fontFamily: "Noto sans KR" }}
+                  >
+                    더보기
+                  </Button>
+                </Box>
               </Box>
-            </Box>
-          </CardContent>
-        );
-      })}
-    </Card>
-  );
-}
-
-const namedEntityMap = { 단체: 'ORG', 인물: 'CVL', 시간대: 'TIM' };
+            </CardContent>
+          );
+        })}
+      </Card>
+    );
+  }
+
+  const namedEntityMap = { 단체: 'ORG', 인물: 'CVL', 시간대: 'TIM' };
diff --git a/WEB/frontend/src/components/DetectionStatus/FilterTable.js b/WEB/frontend/src/components/DetectionStatus/FilterTable.js
diff --git a/WEB/frontend/src/components/DetectionStatus/SecretsTableRow.js b/WEB/frontend/src/components/DetectionStatus/SecretsTableRow.js
@@ -38,7 +38,7 @@ export default function SecretsTableRow(props) {
         onClick={() => showDetailModal(id)}
         style={{ cursor: 'pointer' }}
       >
-        <Typography style={{ fontWeight: 'bold' }} color="textPrimary">
+        <Typography sx={{fontFamily: "Noto sans KR"}} style={{ fontWeight: 'bold'}} color="textPrimary">
           {title}
         </Typography>
         <Typography color="textSecondary" variant="body2">