selectbox 공통컴포넌트

selectbox

기업협업을 진행하면서 공통컴포넌트를 제작을 해야 했고 나는 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 컴포넌트를 사용하고 있는 페이지에서 선택한 값을 활요할 수 있다.