TIL - input 공용 컴포넌트 이벤트 처리 기능 추가

오늘 Input 컴포넌트에 드롭다운 기능과 텍스트 정렬 기능을 추가했습니다. 이를 통해 컴포넌트의 유연성과 재사용성을 크게 향상시켰습니다.

Input 컴포넌트 드롭다운 이벤트 처리 기능 추가

드롭다운 옵션에 개별적인 아이콘과 클릭 이벤트를 추가할 수 있도록 구현했습니다.

<Input
  label="드랍다운"
  icon={<Star />}
  isDropdown
  dropdownOptions={[
    {
      value: '테스트 1',
      icon: <Star />,
      onClick: () => console.log('테스트 1 clicked'),
    },
    {
      value: '테스트 2',
      icon: <Star />,
      onClick: () => console.log('테스트 2 clicked'),
    },
  ]}
/>;

주요 개선사항:

• 각 드롭다운 옵션에 고유한 아이콘 설정 가능
• 옵션별로 개별적인 클릭 이벤트 핸들러 지정 가능
• isDropdown prop을 통해 드롭다운 모드 활성화

텍스트 정렬 왼쪽 오른쪽 기능 추가

<Input
  icon={<FaBeer />}
  isDropdown
  dropdownOptions={[
    {
      value: '테스트 1',
      icon: <FaBeer />,
    },
    {
      value: '테스트 2',
      icon: <FaBeer />,
    },
  ]}
  textAlign={'right'} // left넣으면 왼쪽 정렬 됌
  label="텍스트 오른쪽 정렬"
/>;

주요 개선사항:

• textAlign prop을 통해 텍스트 정렬 방향 지정 가능 ('left' 또는 'right')
• 드롭다운 옵션과 함께 사용 가능