드롭다운메뉴바 구현 코드

NarBar.js

import React, { useState } from 'react';
import { Drawer, Button, Avatar  } from 'antd';
import './Sections/Navbar.scss';
import { Col, Row } from 'antd';
import axios from 'axios';
import { Link, useNavigate } from 'react-router-dom';
import { useSelector } from "react-redux";
import Log from './Sections/Log';
import Footer from '../LandingPage/Sections/Footer';

function NavBar({children}) {
  const user = useSelector(state => state.user)
  
  const [open, setOpen] = useState(false)
  const handleMouseHover = () => {
    setOpen(prev => !prev);
  }

  return (
    <>
      <header>
        <div className="inner">
          <a href="/" className="logo">
            <img src="./images/logo.svg" alt="DREAMTOGETHER" />
          </a>

          <ul className='main'>
            <li className='item' 
            onMouseEnter={handleMouseHover}
            onMouseLeave={handleMouseHover}
            >
              <div className='itemName'><Link to="/project/all">드림프로젝트</Link></div>
              {open && 
              <div className='itemContents'>
                <div className={open?'dropdownContentsOn':'dropdownContentsMenuOff'}>
                  <div className='dropdownContentsMenu'>

                  <Row className="Rowheight" gutter={[24, 24]} >
                    <Col className="Colborder" span={8} >
                      <div className='ColborderInner'>
                        웹사이트 제작
                        <div>리액트</div>
                      </div>
                      <div className='ColborderInner'>
                        웹사이트 제작
                      </div>
                    </Col>
                    <Col className="Colborder" span={8} >
                    <div className='ColborderInner'>
                      앱 제작
                    </div>
                    </Col>
                    <Col span={8} >
                    <div className='ColborderInner'>
                      기타
                    </div>
                    </Col>
                  </Row>

                  </div>
                </div>
              </div>
              }

            </li>
            <li className='item'>
              <div className='itemName'><Link to="/dreamee/all">드림이들</Link></div>
            </li>
            {/* <li className='item'>
              <div className='itemName'><Link to="/metoring">멘토링</Link></div>
            </li> */}
            {/* <li className='item'>
              <div className='itemName'><Link to="/community">고민&막힌코드공유</Link></div>
            </li> */}
            <li className='item'>
              {user.userData &&
              <div className='itemName'><Link to={{pathname: `/mypage/mypostproject/${user.userData._id}`}}>마이페이지</Link></div>
              }
              </li>
          </ul>
            <Log />
        </div>
      </header>
      <div>{children}</div>
      <Footer />
    </>
  )
}

export default NavBar

scss

header{
  background-color: rgb(255,255,255);
  .inner{
    height: 72px;
    position: relative;
  }
  .logo{

    height: 58px;
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;


    img{
      display: block;
    }
  }
  .main{
    position: absolute;
    bottom: 0;
    left: 180px;
    z-index: 1;
    display: flex;

    .item{
      transition: all 0.3s;

      &:hover{
        .itemName{
          color: red;
        }
      }

      .itemName{
        padding: 20px 23px;
        font-size: 14.5px;
        font-weight: 800;
        cursor: pointer;

        a{
          color: #333 ;
          &:hover{
            color: red;
          }
        }
      }
      .itemContents{
        width: 100%;
        position: fixed;
        left: 0;
        background-color: white;
       
        .dropdownContentsOff{
          opacity: 0;
          transition: opacity .5s;
          border: 1px solid rgb(241,241,241);
          box-shadow: rgb(0 0 0 / 8%) 0px 26px 22.4165px;

          .dropdownContentsMenu{
            width: 872px;
            margin: 0 auto;
            height: 250px;
            
          }
        }

        .dropdownContentsOn{
          opacity: 1;
          transition: opacity .5s;

          border: 1px solid rgb(241,241,241);
          box-shadow: rgb(0 0 0 / 8%) 0px 26px 22.4165px;
          .dropdownContentsMenu{
            width: 872px;
            margin: 0 auto;
            height: 250px;
            
            
          }
        }

      }
    }
  }
}
.Rowheight{
  height: 100%;
}

.Colborder{
  border-right: 1px solid #eaeaea;
  
}
.ColborderInner{
  padding: 30px;
  font-size: 12px;
}

Log.js

import axios from 'axios';
import React from 'react'
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import styled from "styled-components";

function Log() {
    const user = useSelector(state => state.user)

    const navigate = useNavigate();

    const onLogoutHandler = () => {
        axios.get(`/api/users/logout`)
        .then(response => {
          if(response.data.success){
            navigate('/login');
          }else{
            alert('로그아웃실패')
          }
        })
      }

    const onLoginHandler = () => {
        navigate('/login');
    }
    if (user.userData && !user.userData.isAuth) {
        return (
            <LoginorOut onClick={onLoginHandler}>로그인</LoginorOut>
          )
    }else{
        return (
            <LoginorOut onClick={onLogoutHandler}>로그아웃</LoginorOut>
          )
    }

}

export default Log
const LoginorOut = styled.div`
    height: 48px;
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
  
    border-radius: 50px;
    color: white;
    padding: 14px 21px;
    border: none;
    background: rgb(232, 52, 78);
    font-size: 14px;
    font-weight: 700;
  
    cursor: pointer;
`