[AI Filter] 10. 4주차 수요일

1. 네비게이션바 메뉴 연결

문제 1

지난번에 해결해야할 문제로 남겨뒀던 메뉴문제를 해결했다. anchorEl이 설정되지 않는 문제였는데 이 문제는 3개의 메뉴가 1개의 anchorEl을 공유해서 생긴 문제였다. 따라서 NavBar에 있는 버튼들을 컴포넌트로 분리해 각 컴포넌트에 menu를 달아주는 방식으로 변경해였다.

문제 2

menu를 다는것은 성공했다. 하지만 material-ui의 menu가 활성화되면 뒤에 backdrop이 생겨 버튼이 클릭되지 않는 문제가 생겼다.

위 사진의 빨간줄로 표시된 버튼 모두가 클릭가능해야했다. 하지만 menu를 이용하면 메뉴속의 버튼은 클릭이 되는데 메뉴 밖의 버튼이 클릭이 안됐다. 다른 컴포넌트를 이용해야할 것 같아서 찾아보니 popper라는 컴포넌트가 눈에 보였다. popper 컴포넌트에서 눈에 들어온 설명은 다음과 같다

Clicking away does not hide the Popper component.

이 말은 popper 컴포넌트 밖의 클릭 이벤트를 처리하기 위해 다른 backdrop이 없을거라는 생각으로 이어졌고 실제로 해당 컴포넌트는 그랬다. 대신 컴포넌트를 닫을때는 다른 방식으로 처리해주어야했지만 popper를 이용해서 세 버튼 모두를 클릭하게 할 수 있었다

import { useState, MouseEvent } from "react";
import { Link as RouterLink, useLocation, matchPath } from "react-router-dom";
import { Button, Popper, MenuItem, Fade, Paper } from "@mui/material";

interface NavBarBtnProps {
  route: routeProps;
}

interface routeProps {
  path: string;
  name: string;
  children: Array<routeChildrenProps>;
}

interface routeChildrenProps {
  path: string;
  name: string;
}

function NavBarBtn({ route }: NavBarBtnProps) {
  const location = useLocation();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleOpen = (event: MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
  const isCurrentPath = matchPath(location.pathname, route.path);
  const fontColor = isCurrentPath ? "#CEF3FF" : "#F2FFFF";
  const fontWeight = isCurrentPath ? "600" : "200";
  return (
    <span key={route.name} onMouseOver={handleOpen} onMouseLeave={handleClose}>
      <Button
        id={`${route.name}-btn`}
        to={route.path}
        size="large"
        sx={{ fontFamily: "Pretendard-Regular", color: fontColor, fontWeight }}
        component={RouterLink}
      >
        {route.name}
      </Button>
      {route.children.length > 0 ? (
        <Popper placement="bottom" disablePortal anchorEl={anchorEl} open={open}>
          <Paper>
            {route.children.map((child) => {
              return (
                <MenuItem key={child.name} to={`${route.path}/${child.path}`} component={RouterLink}>
                  {child.name}
                </MenuItem>
              );
            })}
          </Paper>
        </Popper>
      ) : null}
    </span>
  );
}

export default NavBarBtn;

2. Before & After

Super Resolution을 적용하기 전과 후를 비교하는 페이지가 필요하다. 기존의 방식은 가운데 버튼을 드래그해 좌 우로 움직일 수 있는 방식이었지만 조금 느린듯하여 마우스를 따라가게끔 하는 방식도 하나 추가로 구현했다. 내일 프론트 코드를 합치며 어떤 방식이 더 나은지 토론해봐야겠다.

마우스 위치로 움직이는 코드

  const handleMove = (event: MouseEvent<HTMLDivElement>) => {
    setImgWidth(event.clientX);
  };
  <PageDiv onClick={handleClick} onMouseMove={handleMove}>
    <div
      style={{
        width: imgWidth,
          maxWidth: "99.5vw",
            height: "100%",
              overflow: "hidden",
                borderRight: "solid 1px white",
                  transitionProperty: "all",
                    transitionDuration: "0.5s",
      }}
      >
      <Box
        component="img"
        src={beforeImage}
        sx={{ width: "99.5vw", height: "100%", objectFit: "cover", objectPosition: "left top" }}
        ></Box>
    </div>
    <IconButton sx={buttonStyle}>
      <ArrowLeftIcon sx={{ color: "#F2FFFF" }} />
      <ArrowRightIcon sx={{ color: "#F2FFFF" }} />
    </IconButton>
  </PageDiv>

드래그로 움직이는 코드

  const handleDrag = (event: DragEvent<HTMLButtonElement>) => {
    setImgWidth(event.clientX);
  };
  <PageDiv onClick={handleClick}>
    <div style={{ width: imgWidth, maxWidth: "99.5vw", height: "100%", overflow: "hidden", borderRight: "solid 1px white" }}>
      <Box
        component="img"
        src={beforeImage}
        sx={{ width: "99.5vw", height: "100%", objectFit: "cover", objectPosition: "left top" }}
        ></Box>
    </div>
    <IconButton draggable="true" onDrag={handleDrag} onDragEnd={handleDrag} className="home-before-after-btn" sx={buttonStyle}>
      <ArrowLeftIcon />
      <ArrowRightIcon />
    </IconButton>
  </PageDiv>