20일차(Ul 태그로 Select 구현)

(styled-component를 사용해서 태그명이 다를 수 있음)

function SelectWrapper() {
  // isOpen이 true이면 토글이 열리고 false이면 토글이 닫힘을 표현하기 위한 state
  const [isOpen, setIsOpen] = useState(false);
  // 밑의 보기 중에서 특정한 하나가 선택되면 상태를 바꾸기 위한 state
  const [selectedOption, setSelectedOption] = useState("자바");

  // 버튼을 눌렀을 때 isOpen을 반대 값으로 바꿔주는 함수
  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  // 밑의 option 중 하나를 골랐을 때 선택한 option으로 바꿔주는 함수
  const handleOptionClick = (option) => {
    setSelectedOption(option);
    setIsOpen(false);
  };

  return (
    <StSelectDiv>
      <h1>Select</h1>
      <DropdownContainer>
        <SelectedOption onClick={toggleDropdown}>
          {selectedOption}
          <p>👇</p>
        </SelectedOption>
        // isOpen이 true이면 <Select/>가 열림 //
        {isOpen && <Select handleOptionClick={handleOptionClick} />}
      </DropdownContainer>
    </StSelectDiv>
  );
}

export default SelectWrapper;