[NextJs] input type='radio', peer( peer-checked, tailwindcss)

input type='radio', peer( peer)

peer

peer 은 자신의 바로 다음에 올 태그에 효과를 부여한다.
input type="radio" 를 사용할 때

input 의 체크버튼을 숨기기 위해 label 태그로 input, span 을 묶어준다.

이 때, input 에 className 에 peer 을 주어
바로 다음 태그인 span 의 className 에 peer-checked: 로 효과를 주어
radio 가 check 상태일 경우의 css 를 적용 시킨다.

<div className="flex bg-slate-300 mt-2 p-2 w-[90%] justify-around">
          <label className="w-[60px] h-[50px] p-1 bg-slate-300">
            <input
              type="radio"
              name="type"
              onChange={onChangeValue}
              className="hidden peer"
            />
            <span className="w-full h-full bg-white rounded-md flex items-center justify-center text-center peer-checked:bg-slate-500 peer-checked:rounded-md">
              첫번째
            </span>
          </label>
          <label className="w-[60px] h-[50px] p-1 bg-slate-300">
            <input
              type="radio"
              name="type"
              onChange={onChangeValue}
              className="hidden peer"
            />
            <span className="w-full h-full bg-white rounded-md flex items-center justify-center text-center peer-checked:bg-slate-500 peer-checked:rounded-md">
              두번째
            </span>
          </label>
</div>