TIL

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

RRWW 2024. 8. 1. 22:32

오늘 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을 통해 드롭다운 모드 활성화

image

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

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

주요 개선사항:

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

image