[FEATURE] [공통 컴포넌트] Radio

[KingNono1030]

📝 작업 설명

• 수행해야 할 작업에 대해 간략히 설명해주세요.

공통 컴포넌트인 input 중 radio 버튼으로 입력을 제어하는 컴포넌트 개발

components
└── common
    └── input
        ├── Radio.tsx

🎯 목표 및 필요성

• 이 작업을 수행해야 하는 이유와 목표를 설명해주세요.

브라우저의 기본 radio 버튼의 스타일링을 초기화하고, input이 아닌 label, span 등의 요소의 조합으로
커스텀 라디오 버튼을 만들 수 있습니다.
�

📅 예상 마일스톤

• 완료해야 할 예상 마일스톤 또는 기한을 적어주세요.

예상 소요 시간: 1일

🔍 상세 작업 내용

작업에 대한 구체적인 내용을 작성해주세요. 필요한 경우 작업 단계를 나눠서 적어주세요.

• 커스텀 라디오 스타일링 추가
• controller 컴포넌트 사용 -> 라디오 버튼 구현

<Controller
        name="option"
        control={control}
        rules={{ required: true }}
        render={({ field }) => (
          {options.map(option => 
            <label className="custom-radio">
              <input
                type="radio"
                value={option.value}
                checked={field.value === option.value}
                onChange={field.onChange}
                style={{ display: 'none' }} // 기본 input 숨기기
              />
              <span className="radio-circle" /> option.label
            </label>
          )}
        )}
      />

📌 참고 사항

• 관련 자료나 참고할 레퍼런스가 있다면 추가해주세요.
• Dev for Dev 컴포넌트 분석 (common) #36

예상 Props

• MUI radio group 디자인