[React/JS/CSS] 볼륨있는 라디오버튼 만들기

리액트 로직으로 만들려다가 CSS로 구현하는걸로 도피했는데 그마저도 영혼의 맞다이 깠어서 기록함

React

// 상위 컴포넌트
<div className="sizes" onClick={initSelection}>
  {sizes.map((el, i) => (
  <ProductSize key={i} currSize={el} />
  ))}
</div>

// 하위 컴포넌트
import React from 'react';
import './ProductSize.scss';

export default function ProductSize({ currSize }) {
  return (
    <div className="productSize">
      <input type="radio" name="size" id={currSize} />
      <label for={currSize}>{currSize}</label>
    </div>
  );
}

SCSS

div.productSize {
  position: relative;
  font-size: 13px;

  input[type='radio'] {
    position: absolute;
    display: inline-block;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 5px;
    background: black;
  }

  label {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 5px;
  }

  input[type='radio']:checked + label {
    background: #ccc;
  }
}