[React] Custom Component - 셀렉트박스(SelectBox)

/* OptionBox 보이기 하기! */
.dp { 
    max-height : 100px;
    transition: all 0.3s ease;
}

/* OptionBox 안 보이기 하기! */
.dp-none {
    max-height : 0px;
    transition: all 0.3s ease;
}

#selectBox {
    border : 1px solid #d9d9d9; 
    height : 43px; 
    border-radius: 4px; 
    display: flex;
    background-color: #fff;
    cursor: pointer;
}

#selectBox > div {
    min-width : 99px; 
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 41px;
    margin-left: 10px;
    margin-right: 7px;
}

#selectBox > span {
    line-height: 45px; 
    margin-right: 7px;
}

#optionBox > ul{
    overflow:overlay; 
    list-style: none; 
    background-color: #fff; 
    position: relative; 
    padding-inline-start: 0px; 
    border-radius: 4px;
    z-index: 100;
    cursor: pointer;
    border : 1px solid #d9d9d9;
    /* top: 40px; 
    left: 9px;  */
}

#optionBox li {
    padding: 5px 12px; 
    margin: 6px 0px;
}

/* OptionBox에안 예쁜 스크롤 감추기*/
::-webkit-scrollbar {
    width: 10px;
}

위의 소스는 CSS입니다 :)

import React, { useEffect, useState } from 'react'
import './SelectBox.css'
const SelectBox = props => {
    const { width, height, placeholder, data, onChange } = props;
    
    const openSelectBox = (event) => {
        let target = event.currentTarget.nextElementSibling.children[0].classList;
        if(target.contains("dp-none")){
            target.remove("dp-none")
            target.add("dp")
        }else {
            target.remove("dp")
            target.add("dp-none")
        }
    }
    
    const chooseOption = (event) => {
        let targetValue = event.currentTarget.dataset.key
        let targetLabel = event.currentTarget.innerHTML
        
        event.currentTarget.parentElement.parentElement.previousElementSibling.childNodes[0].childNodes[0].innerText = targetLabel;
        
        event.currentTarget.parentElement.classList.remove("dp")
        event.currentTarget.parentElement.classList.add("dp-none")
        
        onChange(targetValue);
    }
    
    return (
        <div style={{position : 'fixed', top : '-1px', left : '440px'}}>
            <div id="selectBox" style={{ width: width != '' ? width : 'auto', height : height != '' ? height : 'auto' }} onClick={(e) => openSelectBox(e)}>
                <div>
                    <span>{placeholder}</span>
                </div>
                <span>
                    <svg viewBox="64 64 896 896" focusable="false" className="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                        <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z">
                        </path>
                    </svg>
                </span>
            </div>
            <div id="optionBox">
                <ul className="dp-none" style={{ width: width}}>
                    {data.map(item => (
                        <li onClick={(e) => chooseOption(e)} data-key={item.value}>{item.label}</li>
                    ))}
                </ul>
            </div>
        </div>
    )
}
 
export default SelectBox
 

위의 소스는 JS입니다.

<SelectBox width="139px" placeholder="컨테이너 종류" data={tempData} onChange={(e) => {
    props.data.containerKd = e;
    return props
}} />

사용하실때는 이렇게 사용하시면 됩니다.