JavaScript에서 div로 custom select 태그 생성하기

SelectBox2.js

import { useEffect, useState } from "react";
import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
import Dropdown from "./Dropdown";


function SelectBox2() {
    let [list, setList] = useState(false);

    //1. .select를 누르면 active className을 추가/제거해주는 함수 생성
    function toggleSelectBox(selectBox) {
        selectBox.classList.toggle('active')
    }
    //2. .select click event에 toggleSelectBox 추가 
    const selectBoxElements = document.querySelectorAll('.select');
    //4. 이벤트 핸들링 콜백 함수 수정
    selectBoxElements.forEach(selectBoxElement => {
        selectBoxElement.addEventListener('click', function(e){ // 클릭시 옆에 있는 함수 실행됨
            const targetElement = e.target;
            const isOptionElement = targetElement.classList.contains('option'); //클릭된 targetElement의 option 클래스 유무 확인
            if(isOptionElement) {
                //클릭한 element가 option class에 해당되어 true인 경우 
                selectOption(targetElement); //selectOption 함수가 실행되며, 
            }
            toggleSelectBox(selectBoxElement);
        });
    });
    //3. .option을 선택하면 해당 값을 선택하는 함수 작성 
    function selectOption(optionElement){
        const selectBox = optionElement.closest('.select'); //앨리먼트에 가장 가까운 선택자 가져옴, 자기자신도 포함됨
        const selectedElement = selectBox.querySelector('.selected-value'); //'.selected-value' class가진 요소를 찾음
        selectedElement.textContent = optionElement.textContent; //targetElement의 textContent를 가져와서 selectedElement의 textContent값에 넣어줌 
        //결국 '.selected-value'에는 选择程度에서 선택한 값 , 선택된 값에서 새롭게 선택된 값이 들어감
    }

    return (
        <div className="select">
            <div className="selected" onClick={()=>{setList(!list)}}>
                <div className="selected-value">选择程度</div>
                <span className="icon"><BiDownArrow size={20}/></span>
           </div>
                <ul>
                    <li className='option'>1 级</li>
                    <li className='option'>2 级</li>
                    <li className='option'>3 级</li>
                    <li className='option'>4 级</li>
                    <li className='option'>5 级</li>
                    <li className='option'>6 级</li>
                    <li className='option'>7 级</li>
                    <li className='option'>8 级</li>
                    <li className='option'>9 级</li>
                    <li className='option'>10 级</li>
                </ul>
        </div>
    )
}

export default SelectBox2;

App.css

/* selectBox css */

/* 1. select 스타일 추가하기 */


/* selectBox css */

/* 1. select 스타일 추가하기 */
.select {
  /* 전체를 담는 박스 */
  position: relative;
  display: inline-block;
  width: 120px;
  /* height: 35px; */
  border: 2px solid #245E7E;
  cursor: pointer;
}
.select .selected {
  display: flex;
  justify-content: space-between;
  padding: 8px 5px;
}
.select .selected .selected_value {
  max-width: 90px;
}
.icon {
  position: absolute;
  top: 7px;
  left: 93px;
  color: #245E7E;
}
.select ul {
  list-style-type: none;
  padding-left: 0px;
  position: absolute;
  width: 120px;
  border: 2px solid #245E7E;
  border-top: none;
  margin: 1px 0 0 -2px; /* position이 absolute이므로 왼쪽 마진을 음수로 넣어서 위의 selected와 칸 맞추기*/
  cursor: pointer;
  background-color: #245E7E;
  color: white;
}
.select ul li {
  padding: 5px 15px 5px;
  border-bottom: 1px dashed white;
}
.select ul li:last-child{
  /* 마지막 줄의 밑 테두리 없애기 */
  border-bottom: none;
}
.select ul li:hover {
  /* 마우스 올려놨을 때 배경색 */
  background: #3DA58E;
}
/* 2. custom select 기능 구현 */
.select ul { 
  /* 닫혀있는 상태 */
  visibility: hidden;
}
.select:active ul {
  /* 열려있는 상태 */
  visibility: visible;
}

참고 링크:
https://cocoder16.tistory.com/52