selectbox 공통컴포넌트

sang hyeok Lee·2022년 6월 12일
0

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 컴포넌트를 사용하고 있는 페이지에서 선택한 값을 활요할 수 있다.

profile
개발자 되기

0개의 댓글