#4 - 앱 바 컴포넌트 생성 및 메뉴 구성

client/components/organisms/MenuBar.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import {AppBar, Box, Toolbar, IconButton, Typography, Menu, Container, Button, Tooltip, MenuItem} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import PetsIcon from '@mui/icons-material/Pets';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+
+const pages = ['통합저장소', '태그', '병합하기'];
+const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
+
+const MenuBar = () => {
+  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
+  const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
+
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget);
+  };
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <AppBar position="static">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <PetsIcon sx={{display: {xs: 'none', md: 'flex'}, mr: 1}}/>
+          <Typography
+            variant="h6"
+            noWrap
+            component="a"
+            href="/"
+            sx={{
+              mr: 2,
+              display: {xs: 'none', md: 'flex'},
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            MergeDoc
+          </Typography>
+
+          <Box sx={{flexGrow: 1, display: {xs: 'flex', md: 'none'}}}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon/>
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left',
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: {xs: 'block', md: 'none'},
+              }}
+            >
+              {pages.map((page) => (
+                <MenuItem key={page} onClick={handleCloseNavMenu}>
+                  <Typography textAlign="center">{page}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+          <PetsIcon sx={{display: {xs: 'flex', md: 'none'}, mr: 1}}/>
+          <Typography
+            variant="h5"
+            noWrap
+            component="a"
+            href=""
+            sx={{
+              mr: 2,
+              display: {xs: 'flex', md: 'none'},
+              flexGrow: 1,
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            MergeDoc
+          </Typography>
+          <Box sx={{flexGrow: 1, display: {xs: 'none', md: 'flex'}}}>
+            {pages.map((page) => (
+              <Button
+                key={page}
+                onClick={handleCloseNavMenu}
+                sx={{my: 2, color: 'white', display: 'block'}}
+              >
+                {page}
+              </Button>
+            ))}
+          </Box>
+
+          <Box sx={{flexGrow: 0}}>
+            <Tooltip title="Open settings">
+              <IconButton onClick={handleOpenUserMenu} sx={{p: 0}} color="inherit">
+                <AccountCircle/>
+              </IconButton>
+            </Tooltip>
+            <Menu
+              sx={{mt: '45px'}}
+              id="menu-appbar"
+              anchorEl={anchorElUser}
+              anchorOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              open={Boolean(anchorElUser)}
+              onClose={handleCloseUserMenu}
+            >
+              {settings.map((setting) => (
+                <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                  <Typography textAlign="center">{setting}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};
+export default MenuBar;

client/pages/index.tsx

@@ -2,22 +2,20 @@ import type { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import styles from "../styles/Home.module.css";
-import { Button } from "@mui/material";
+import MenuBar from "../components/organisms/MenuBar";
 
 const Home: NextPage = () => {
   return (
-    <div className={styles.container}>
+    <div>
       <Head>
         <title>Create Next App</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
+      <MenuBar/>
       <main className={styles.main}>
         <h1 className={styles.title}>Last test for Jenkins + next.js !</h1>
-
-        <Button variant="contained">button color test</Button>
-
         <p className={styles.description}>
           Get started by editing{" "}
           <code className={styles.code}>pages/index.tsx</code>