TIL - 2022.02.15

      const NavBox = styled.div`
        @media screen and (max-width: 500px) {
          #mb_menu {
          display: none;
          margin-right: 19px;
        }

        @media screen and (max-width: 500px) {
          width: 100%;
          padding-left: 23px;

          #ateam_logo {
            width: 91.8px;
            height: 12px;
          }
          #mb_menu {
            display: block;
          }
        }
      ` 
      const AnotherBox = styled(LogoBox)`
        justify-content: flex-end;
        padding-left: 0;
        padding-right: 40px;

        @media screen and (max-width: 500px) {
          display: none;
        }
      }
    `

Navigation.js

const Navigation = () => {
  const wrapperRef = useRef();
  const [modalOpen, setModalOpen] = useState(false);
  const openModal = () => {
    setModalOpen(true);
  };
  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });

  const handleClickOutside = (event) => {
    if (wrapperRef && !wrapperRef.current.contains(event.target)) {
      setModalOpen(false);
    }
  };

  return (
    <>
      <NavBox ref={wrapperRef}>
        {/* 데스크탑 네비게이션 */}
        <LogoBox>
          {/* 모바일 네비게이션 */}
          <MobileMenuBar id="mb_menu" onClick={openModal} />
          <AteamLogo id="ateam_logo" />
        </LogoBox>
        <AnotherBox>
          <BtnTwo>
            <NavIcon fill="#fff" />
            <NavText>A 가공 업체</NavText>
          </BtnTwo>
          <Line />
          <LogOutBtn>로그아웃</LogOutBtn>
        </AnotherBox>
      </NavBox>
      <MobileMenu open={modalOpen} />
    </>
  );
};

MobileMenu.js
const MobileMenu = (props) => {
  const { open } = props;
  return (
    <>
      <ModalBox className={open ? "openModal modal" : "modal"}>
        {open ? (
          <ModalBackground>
            <ModalContents>
              <ModalHead>
                <LogoBlue />
              </ModalHead>
              <ModalBody>
                <BtnTwo>
                  <NavIcon fill="#323D45" />
                  <NavText>A 가공 업체</NavText>
                </BtnTwo>
                <LogOutBtn>로그아웃</LogOutBtn>
              </ModalBody>
            </ModalContents>
          </ModalBackground>
        ) : null}
      </ModalBox>
    </>
  );
};

- 뒷배경 에니메이션

const ModalBackground = styled.div`
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(50, 61, 69, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;

  animation: fadeInBackground 0.35s;

  @keyframes fadeInBackground {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`;

- 좌측에서 우측으로 에니메이션

const ModalContents = styled.div`
  width: 75%;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
  animation: fadeInModal 0.45s;

  @keyframes fadeInModal {
    from {
      opacity: 0;
      margin-left: -600px;
    }
    to {
      opacity: 1;
      margin-left: 0;
    }
  }
`;