[Styled-components] Input type="radio" css 주기

radio

type="radio" 는 checkbox 와 비슷하지만
checkbox 는 여러개를 중복 선택하지만
radio 는 여러 항목중 한개를 선택할 수 있는 type 이다.

checkbox 처럼 체크박스 모양으로 보여지는데
display:none 으로 가리고
label, span 으로 버튼 모양의 선택지로 나타낼 수 있다.

const LevelCheckLabel = styled.label`
  width: 40px;
  height: 40px;
  float: left;
  margin-left: 5px;
`;
const LevelCheckSpan = styled.span`
  font-size: 18px;
  width: 36px;
  height: 36px;
  background: ${(props) =>
    props.children === '상'
      ? '#0DF0AC'
      : props.children === '중'
      ? '#89F9D7'
      : '#CBFFEF'};
  border-radius: 50%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: black;
`;

const LevelCheckRadio = styled.input.attrs({ type: 'radio' })`
  &:checked {
    display: inline-block;
    background: none;
    text-align: center;
    display: none;
  }
  &:checked + ${LevelCheckSpan} {
    scale: 1.1;
  }
  display: none;
`;

styled-components 로 만들어 보았다.
checkRadio 는 보여지는 것은 싹다 none 처리하고
체크 되었을 때만 특정 색으로 변하거나 scale을 주어 선택 된 것을 확인시켜준다.