기업협업을 진행하면서 공통컴포넌트를 제작을 해야 했고 나는 selectbox를 만들어야 했다.
처음에는 select태그와 option태그를 커스텀하려고 했다 하지만 option태그가 커스텀이 되지 않았다......
폭풍 구글링을 헸지만.... select 태그에 대한 커스텀이 나와있을 뿐 option태그는 나와 있지 않았다....
그래서 결국!! selectbox를 직접 만들기로 했다!!
위 사진은 option이 열리지 않았을 때이고
위 사진은 selectbox를 클릭해서 option이 열렸을 때이다.
export default function SelectBoxComponent(props: ISelectProps) {
const [isShow, setIsShow] = useState<boolean>(false);
const [value, setValue] = useState<string>("");
const onClickIsShowOption = () => {
if (props.disabled) return;
setIsShow(!isShow);
};
const onClickOptionValue = (e: MouseEvent<HTMLDivElement>) => {
setValue((e.target as HTMLDivElement).innerText);
setIsShow(false);
props.setState((e.target as HTMLDivElement).innerText);
};
return (
<s.Div style={{ width: props.width, height: props.height }}>
{/* selectBox */}
<s.Select
onClick={onClickIsShowOption}
isShow={isShow}
style={{
border: !props.disabled
? value !== ""
? "1px solid #6400FF"
: `1px solid ${props.borderColor}`
: "none",
background: !props.disabled
? value !== ""
? "#fff"
: props.backgroundColor || "#F7F9FB"
: "#F0F0F0",
}}
>
<s.InnerName
style={{
color:
value !== "" ? "#6400FF" : props.color ? props.color : "#C7C7C7",
opacity: value === "" && props.opacity && props.opacity,
}}
>
{value !== "" ? value : props.title}
</s.InnerName>
{!props.disabled && (
<s.InnerIcon>
{isShow ? (
<img
src="/select/userSelectUp.png"
style={{ width: "100%", height: "100%" }}
/>
) : (
<img
src="/select/userSelectDown.png"
style={{ width: "100%", height: "100%" }}
/>
)}
</s.InnerIcon>
)}
</s.Select>
{/* Option선택 부분 */}
{isShow && (
<s.OptionBox>
{props.arr.map((el: string) => (
<s.Option onClick={onClickOptionValue} key={uuidV4()}>
{el}
</s.Option>
))}
</s.OptionBox>
)}
</s.Div>
);
}
간단하게 기능만을 설명한다면 onClickIsShowOption를 통해서 selectbox를 선택을 했을 때 option 태그부분들이 열리게 설정을 해주었다.
option태그에서 하나의 선택지를 선택을 했을 때 onClickOptionValue 함수가 실행이 되면서 그 선택한 값을 가져온다. 그래서 props로 넘겨누는 setState함수에 넣어주면 이 selectbox 컴포넌트를 사용하고 있는 페이지에서 선택한 값을 활요할 수 있다.