안녕하세요:) 오늘은 거대한 컴포넌트를 복합 컴포넌트 패턴으로 리팩토링한 경험을 공유하고자 합니다.문제상황해결 과정을 설명하기 전에 어떤 문제점이 있었는지 살펴보겠습니다. 제가 리팩토링한 컴포넌트는 Input이었는데요.우리는 더 나은 사용자 경험을 제공하기 위해 input에 정해진 패턴의 값만 입력할 수 있는 기능을 구현합니다. 특히 카드번호나 휴대폰 번호와 같은 숫자 입력 시 자동으로 하이픈(-)이 삽입되도록 하는 경우가 많습니다. 이러한 기능을 편리하게 제공하면서도 공통된 스타일과 로직(clear 버튼 등)을 적용하기 위해 Input 컴포넌트는 점점 더 복잡해졌습니다.interface InputProps { type: 'text' | 'number' | 'pattern', value: T ..