ui component

react-hook-form 에서 control 을 안쓰겠다고 고집스럽게 힘들게 register 작업을 다해놓고 커스덤 컴포넌트들을 만들다보니 짜즈응이 나서 결국 를 쓰는 방식으로 리팩토링 하는 중인데왜죠..? 이해는 안가는데 그냥..그런갑다 해야지 1. 반복문을 사용한 코드 (예제에서 사용한 방식)반복문을 사용하면 코드가 더 동적으로 변할 수 있으며, 여러 개의 체크박스를 간단하게 렌더링const interestsCheckOptions = [ { id: 'sports', label: 'Sports', value: 'sports' }, { id: 'music', label: 'Music', value: 'music' }, { id: 'art', label: 'Art', value: 'art' },..

아이콘 Toggle 버튼이 아이콘만 다르고 구동방식이 동일하기때문에 리팩토링하여 공통 인터페이스와 로직을 공유하고 아이콘을 사용자 정의. 아이콘에 필요한 props(예: "켜짐" 및 "꺼짐" 상태의 아이콘 이름)를 허용하는 일반적인 ToggleButton 구성 요소를 만들면 코드 중복을 피하고 로직을 일관되게 유지할 수 있다.Step 1: 공유 인터페이스 및 구성 요소 만들기먼저 모든 공유 속성을 포함하는 공통 인터페이스 ToggleButtonProps를 정의하고 두 아이콘 이름(activeIcon 및 inactiveIcon)에 대한 props를 추가합니다.import { Icon } from "@/components/common/Icon";import { useEffect, useState } fro..