NavBar Logo 수정 질문!

안녕하세요 강사님! 다름이 아니라 알려주신대로 image 를 import 하여 NavBar.js 파일에서 사용해보려고 했는데 , 다음과 같이 사용했을 때 로고가 제대로 삽입되지 않고 페이지에 오류가 발생하는데 css 부분의 문제인것 같습니다. NavBar.js 파일의 가장 div 인 menu 의 style 을 이것저것 건드려보았을때 position:'fixed' 를 position:'statie' 등으로 변경하면 이미지가 때때로 나올때도 있지만, 어떻게 기존 강의영상 처럼 Movieapp이라고 적힌 로고를 그곳에 삽입 할 수 있는지 도저히 모르겠어서 질문드립니다 ㅠㅠ NavBar.js 파일 소스와 깃헙 주소 모두 첨부드리니 답변주시면 감사하겠습니다!!

https://github.com/OHYUNBEOM/React-Node_ver2

import React, { useState } from 'react';
import LeftMenu from './Sections/LeftMenu';
import RightMenu from './Sections/RightMenu';
import { Drawer, Button, Icon } from 'antd';
import './Sections/Navbar.css';
import mainlogo from '../../../assets/images/mainlogo.png';

function NavBar() {
  const [visible, setVisible] = useState(false)

  const showDrawer = () => {
    setVisible(true)
  };

  const onClose = () => {
    setVisible(false)
  };

  return (
    <nav className="menu" style={{ position: 'fixed', zIndex: 5, width: '100%' }}>
      <div className="menu__logo">
        <a href="/">
            <img src={mainlogo}/>
        </a>
      </div>
      <div className="menu__container">
        <div className="menu_left">
          <LeftMenu mode="horizontal" />
        </div>
        <div className="menu_rigth">
          <RightMenu mode="horizontal" />
        </div>
        <Button
          className="menu__mobile-button"
          type="primary"
          onClick={showDrawer}
        >
          <Icon type="align-right" />
        </Button>
        <Drawer
          title="Basic Drawer"
          placement="right"
          className="menu_drawer"
          closable={false}
          onClose={onClose}
          visible={visible}
        >
          <LeftMenu mode="inline" />
          <RightMenu mode="inline" />
        </Drawer>
      </div>
    </nav>
  )
}

export default NavBar

인프런 커뮤니티 질문&답변