1. 알아야 할 내용

---

• 부모 요소를 position: relative, 자식 요소를 position: absolute로 주어야 한다.

2.전체 코드

---

// App.js
import styled from "styled-components";
import { useState } from "react";
import { GoTriangleDown } from "react-icons/go";

const HeaderContainer = styled.header`
  display: flex;
  align-items: center;
  height: 70px;
  margin: 0 20px 0 20px;
  justify-content: space-between;

  .buttonArea {
    display: flex;
    align-items: center;
    position: relative;

    > a {
      text-decoration: none;
    }

    > .dropdown {
      font-size: 15px;
      font-weight: 400;
      width: 150px;
      padding: 3px 12px 3px 12px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.19), 0 10px 10px rgba(0, 0, 0, 0.1);
      background-color: white;
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 55px;
      right: -20px;
      list-style: none;

      > a {
        text-decoration: none;
        color: black;
        margin: 10px 0px;
      }

      > li {
        margin: 10px 0px;
      }
    }
  }
`;

const Logo = styled.div`
  font-weight: 700;
  font-size: 20px;
`;

const ProfileButton = styled.div`
  display: flex;
  align-items: center;

  > .triangleDown {
    color: #787f84;
  }
`;

const Profile = styled.div`
  width: 40px;
  height: 40px;
  margin: 0 10px 0 10px;
  background-color: lightgray;
  border-radius: 50%;
  position: relative;
`;

function LoginHeader() {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  const openDropdown = () => {
    setIsOpen(!isOpen);
  };

  return (
    <HeaderContainer>
      <Logo>제목</Logo>
      <div className='buttonArea'>
        <ProfileButton onClick={openDropdown}>
          <Profile />
          <GoTriangleDown className='triangleDown' size={14} />
        </ProfileButton>
        {isOpen ? (
          <ul className='dropdown'>
            <li>마이페이지</li>
            <li>로그아웃</li>
          </ul>
        ) : null}
      </div>
    </HeaderContainer>
  );
}

export default LoginHeader;

참고

• 드롭다운 외부 클릭 시 드롭다운 닫기