[AI Filter] 09. 4주차 월요일

1. 네비게이션바 생성

상단 네비게이션바를 생성했다. Home, Introduction, TechDemos를 클릭하면 해당 페이지로 이동한다.

근데 문제가 있다! 각 버튼 위에 hover 했을 때 메뉴를 뜨게 하고싶은데 anchorEl설정이 잘 안되는지 자꾸 유효하지 않은 HTML Element라고 뜬다 이부분은 내일 해결해야겠다.

아래는 지금까지 짠 코드다

import { useState, MouseEvent } from "react";
import { styled } from "@mui/material/styles";
import { Box, Stack, Button, AppBar, Toolbar, Menu, MenuItem } from "@mui/material";
import { Link as RouterLink, useLocation, matchPath } from "react-router-dom";
import logo from "../../Assets/Image/logo.png";

function NavBar() {
  const APPBAR_MOBILE = 64;
  const APPBAR_DESKTOP = 84;
  const location = useLocation();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleOpen = (event: MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
    console.log(event.currentTarget)
    console.log(anchorEl)
  }

  const handleClose = () => {
    setAnchorEl(null);
  }

  const routes = [
    { path: "/", name: "Home" },
    {
      path: "/Introduction",
      name: "Introduction",
      children: [
        { path: "", name: "Introduction" },
        { path: "QuickStart", name: "QuickStart" },
      ],
    },
    {
      path: "/TechDemos",
      name: "TechDemos",
      children: [
        { path: "ImageFilter", name: "ImageFilter" },
        { path: "WebcamFilter", name: "WebcamFilter" },
      ],
    },
  ];
  const RootStyle = styled(AppBar)(({ theme }) => ({
    boxShadow: "none",
    backdropFilter: "blur(6px)",
    WebkitBackdropFilter: "blur(6px)",
    backgroundColor: "#031214",
  }));

  const ToolbarStyle = styled(Toolbar)(({ theme }) => ({
    minHeight: APPBAR_MOBILE,
    [theme.breakpoints.up("lg")]: {
      minHeight: APPBAR_DESKTOP,
      padding: theme.spacing(0, 3),
    },
  }));
  return (
    <RootStyle>
      <ToolbarStyle>
        <Box sx={{ px: 2, py: 1, pr: 4 }}>
          <RouterLink to="/">
            <Box component="img" src={logo} sx={{ height: 60 }}></Box>
          </RouterLink>
        </Box>

        <Stack direction="row" alignItems="center" spacing={{ xs: 0.5, sm: 6.5 }} sx={{ mr: 10 }}>
          {routes.map((route) => {
            const isCurrentPath = matchPath(location.pathname, route.path);
            const fontColor = isCurrentPath ? "#CEF3FF" : "#F2FFFF";
            const fontWeight = isCurrentPath ? "600" : "200";
            return (
              <span key={route.name}>
                <Button
                id="basic-button"
                  aria-controls={open ? 'basic-menu' : undefined}
                  aria-haspopup="true"
                  aria-expanded={open ? 'true' : undefined}
                  onMouseOver={handleOpen}
                  to={route.path}
                  size="large"
                  sx={{ fontFamily: "Pretendard-Regular", color: fontColor, fontWeight }}
                  component={RouterLink}
                >
                  {route.name}
                </Button>
                <Menu
                  id="basic-menu"
                  anchorEl={anchorEl}
                  open={open}
                  onClose={handleClose}
                  MenuListProps={{
                    'aria-labelledby': 'basic-button',
                    onMouseLeave: handleClose,
                  }}

                >
                  <MenuItem onClick={handleClose}>Profile</MenuItem>
                  <MenuItem onClick={handleClose}>My account</MenuItem>
                  <MenuItem onClick={handleClose}>Logout</MenuItem>
                </Menu>
              </span>
            );
          })}
        </Stack>
      </ToolbarStyle>
    </RootStyle>
  );
}

export default NavBar;

2. 책구입

올해 한달에 한권씩 책 읽자고 한 다짐은 온데간데 없고 아직 한권도 안읽었다.. 그래서 이번에 Yes24 중고서점에 가서 손원평 작가님의 프리즘 책을 구매했다. 이번달이 얼마 안남았지만 열심히 읽어보려고 한다.

3. 🌷튤립 개화🌷

2월 26일에 사서 화분에 구근 3개를 심고, 1개는 수경재배 했다. 수경재배한 튤립이 벌써 개화했다!!! 요즘 튤립이 너무 예뻐보여서 여기저기 튤립 이미지를 쓰고 튤립 이모티콘 쓰는중인데 내가 키운 튤립이라 그런지 세상 제일 이뻐보여...