[FE] Filter Menu Ui

FE/package.json

@@ -38,6 +38,7 @@
     "@babel/runtime-corejs3": "^7.10.2",
     "@material-ui/core": "^4.10.2",
     "@material-ui/icons": "^4.9.1",
+    "material-ui-popup-state": "^1.5.4",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

FE/src/App.js

@@ -1,14 +1,19 @@
 import React from "react";
 
 import Header from "./components/common/Header";
+import Navigation from "./components/Issues/Navigation/Navigation";
 
 import GlobalStyle from "./style/GlobalStyle";
+import Container from "@material-ui/core/Container";
 
 const App = () => {
   return (
     <>
       <GlobalStyle />
       <Header />
+      <Container maxWidth="lg">
+        <Navigation />
+      </Container>
     </>
   );
 };

FE/src/components/Issues/Navigation/Filter/Filter.jsx

@@ -1,7 +1,13 @@
 import React from "react";
 
+import Menu from "./Menu";
+
 const Filter = () => {
-  return <div />;
+  return (
+    <div>
+      <Menu></Menu>
+    </div>
+  );
 };
 
 export default Filter;

FE/src/components/Issues/Navigation/Filter/Menu.jsx

@@ -1,7 +1,77 @@
 import React from "react";
 
+import MenuList from "../../../common/MenuList";
+
+import Button from "@material-ui/core/Button";
+import Popover from "@material-ui/core/Popover";
+import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
+import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
+import { makeStyles } from "@material-ui/core/styles";
+import grey from "@material-ui/core/colors/grey";
+
+const mockArr = ["Filter lssues", "Open issues", "Close issues"];
+const MENU_LIST_TITLE = "Filter lssues";
+
 const Menu = () => {
-  return <div />;
+  const menuList = mockArr.map((text, i) => <MenuList text={text} key={text + i} />);
+
+  return (
+    <>
+      <PopoverPopupState menuList={menuList} />
+    </>
+  );
 };
 
+const PopoverPopupState = ({ menuList }) => {
+  const classes = useStyles();
+
+  return (
+    <PopupState variant="popover" popupId="demo-popup-popover">
+      {(popupState) => (
+        <div>
+          <Button
+            className={classes.button}
+            variant="contained"
+            color="default"
+            size="small"
+            {...bindTrigger(popupState)}
+          >
+            <span className={classes.filterText}>Filters</span>
+            <span>
+              <ArrowDropDownIcon className={classes.downIcon} />
+            </span>
+          </Button>
+          <Popover
+            {...bindPopover(popupState)}
+            anchorOrigin={{
+              vertical: "bottom",
+              horizontal: "center",
+            }}
+            transformOrigin={{
+              vertical: "top",
+              horizontal: "center",
+            }}
+          >
+            <MenuList title={MENU_LIST_TITLE} />
+            {menuList}
+          </Popover>
+        </div>
+      )}
+    </PopupState>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  button: {
+    border: "1px solid" + grey[400],
+  },
+  filterText: {
+    fontSize: 13,
+    fontWeight: "bold",
+  },
+  downIcon: {
+    verticalAlign: "middle",
+  },
+}));
+
 export default Menu;

FE/src/components/Issues/Navigation/Navigation.jsx

@@ -1,7 +1,15 @@
 import React from "react";
 
+import Filter from "./Filter/Filter";
+
+import Box from "@material-ui/core/Box";
+
 const Navigation = () => {
-  return <div />;
+  return (
+    <Box component="nav" mt={6} mb={5}>
+      <Filter />
+    </Box>
+  );
 };
 
 export default Navigation;

FE/src/components/common/Header.jsx

@@ -20,7 +20,6 @@ const HeaderWrap = styled.header`
   width: 100%;
   height: 55px;
   background-color: #24292e;
-  padding: 0 16px;
   line-height: 55px;
 `;
 

FE/src/components/common/MenuList.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import { makeStyles } from "@material-ui/core/styles";
+import grey from "@material-ui/core/colors/grey";
+
+const MenuList = ({ text, title }) => {
+  const classes = useStyles();
+
+  const boxClassName = title ? classes.titleBox : classes.popupBox;
+  const boxText = title ? title : text;
+  const boxFontWeight = title ? "bold" : "none";
+
+  return (
+    <Box py={1} px={2} className={boxClassName}>
+      <Typography style={{ fontSize: "13px", fontWeight: boxFontWeight }}>{boxText}</Typography>
+    </Box>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  popupBox: {
+    width: 250,
+    cursor: "pointer",
+    borderTop: "1px solid" + grey[300],
+    "&:hover": {
+      backgroundColor: grey[200],
+    },
+  },
+  titleBox: {
+    backgroundColor: grey[200],
+  },
+}));
+
+export default MenuList;
+
+// 사용 용도는 두 가지가 있습니다
+// 1. title로써 상단에 사용
+// 2. menuList로써 hover와 마우스 클릭이 되는 list로 사용
+// title로 사용 시 : props로 title을 사용하고 title에 들어갈 text를 넣어주면 됩니다.
+// (예) <MenuList title="Filter lssues" />
+//menuList로 사용 시 : props로 text를 사용하고 list에 들어갈 text를 넣어주면 됩니다.
+// (예) <MenuList text="Open issues" />

FE/src/style/GlobalStyle.jsx

@@ -5,7 +5,7 @@ const GlobalStyle = createGlobalStyle`
   ${reset}
 
   * {
-    font-size: 1rem;
+    font-size: 14px;
   }
 
   html, body {