Input Radio 버튼 스타일

css는.. 멀고도 깊다고 느끼게 해준 라디오 버튼 스타일 적용이였다.
input radio button을 label로 감싸고 span에 스타일을 적용시켜줬고
해당 버튼을 누르면 목데이터에 적용한 id값을 받아오게 했다.

JSX

function HostRadioCom(props) {
  const [checkedInputs, setCheckedInputs] = useState([]);

  const changeRadio = e => {
    if (e.target.checked) {
      setCheckedInputs(e.target.id);
    }
  };

  return (
    <>
      <FormCheckBoxList>
        <Label>
          <FormCheckLeft
            type="radio"
            {...props}
            id={props.id}
            name="radioButton"
            onChange={changeRadio}
            value={checkedInputs}
          />
          <FormCheckText>{props.name}</FormCheckText>
        </Label>
      </FormCheckBoxList>
    </>
  );
}

export default HostRadioCom;

styled-components

const FormCheckText = styled.span`
  font-size: 18px;
  width: 110px;
  height: 35px;
  background: #e6e6e6;
  border-radius: 50px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #777;
`;

const FormCheckLeft = styled.input.attrs({ type: 'radio' })`
  &:checked {
    display: inline-block;
    background: none;
    padding: 0px 10px;
    text-align: center;
    height: 35px;
    line-height: 33px;
    font-weight: 500;
    display: none;
  }
  &:checked + ${FormCheckText} {
    background: #e4794d;
    color: #fff;
  }
  display: none;
`;

input radio button을 label로 감싸고 span에 스타일을 적용시켜줬다. styled-component도 처음이라 스타일 적용시키는 방법에서만 애를 엄청 먹었다. input,image같은 자식을 가지지 못하는 속성들에게 계속 자식을 주는 멍청한 짓도 하면서🥲 그리고 input에 checked 속성을 주고 거기다 boolean을 사용하면 되겠지라는 생각과 조건문을 사용하지 않고 바로 e.target.checked, e.target.id 사용해 onChange를 주니 엉망+엉망으로 버튼도 없어지고 값도 들어 오지 않는 결과가 나타났다 😅 checked에 함수를 사용해서 되는 방법이 있을 것 같아서 (지금은 실패했지만) 더 공부해서 다시 시도해봐야겠다.