[CSS] input[type="radio"] 체크 모양으로 커스텀하기

마케팅 정보 수신 동의를 위해 라디오 버튼을 생성해야했다.
checked=true 일 때 체크 표시로 나타내는 게 요구사항이라 이를 위해 커스텀 했다.

import styles from './index.module.scss';
import { UserInfoProps } from '@/src/types/interface';

interface Props {
  userInfo: UserInfoProps;
  onInputChange: (field: string, value: string | boolean) => void;
}

const MarketingInfo = ({ userInfo, onInputChange }: Props) => {
  return (
    <div className={styles.marketingWrapper}>
      <div className={styles.marketingTitle}>
        <p>마케팅 정보 수신 동의</p>
        <span>이벤트, 특가, 혜택 등 유용한 정보를 알려드립니다.</span>
      </div>
      <div className={styles.marketingRadio}>
        <label className={styles.radioLabel}>
          <input
            type="radio"
            name="marketing"
            checked={userInfo.isAgreeMarketing}
            onChange={() => onInputChange('isAgreeMarketing', true)}
          />
          <span className={styles.customRadio}></span>
          수신
        </label>
        <label className={styles.radioLabel}>
          <input
            type="radio"
            name="marketing"
            checked={!userInfo.isAgreeMarketing}
            onChange={() => onInputChange('isAgreeMarketing', false)}
          />
          <span className={styles.customRadio}></span>
          비수신
        </label>
      </div>
    </div>
  );
};

export default MarketingInfo;

.marketingWrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.marketingTitle {
  display: flex;
  flex-direction: column;

  p,
  span {
    color: #4e5968;
  }

  p {
    margin: 8px 0;
  }
  span {
    font-size: 12px;
    margin-bottom: 15px;
  }
}

.marketingRadio {
  display: flex;
  gap: 40px;
}

.radioLabel {
  display: flex;
  align-items: flex-start;
  font-size: 12px;
  color: #404048;
  cursor: pointer;

  input {
    display: none;
  }

  .customRadio {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7ea;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
    position: relative;

    &::after {
      content: '\2714'; // 유니코드에서 체크 표시
      font-size: 9px;
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.2s ease;
    }
  }

  input:checked + .customRadio {
    background-color: #002fb4;
    border-color: #002fb4;

    &::after {
      transform: translate(-50%, -50%) scale(1);
    }
  }
}