마이페이지 리팩토링

[Parkchanyoung0710]

사용자 선택 및 상태 선택 드롭다운 컴포넌트 구현 UserDropdown, StatusDropdow

태스크 카드(TaskCard) 작성 및 수정 시, 담당자(User) 와 상태(Status) 를 드롭다운 UI로 직관적이고 유연하게 선택할 수 있도록 설계

• 사용자 지정형 드롭다운 컴포넌트를 직접 구현하여 select 요소보다 풍부한 사용자 경험(UX) 제공
• 유저 선택 드롭다운은 검색 모드와 선택 모드를 모두 지원해야 하며, 상태 선택 드롭다운은 컬럼 리스트 기반으로 현재 상태를 명확히 표현해야 함

💡 공통적으로 고민한 점

• 사용자 정의 드롭다운에서의 접근성 (키보드 탐색, 외부 클릭 닫기 등)
• 선택된 항목을 직관적으로 표시하고, 드롭다운 옵션 중 선택된 항목을 강조하거나 체크 표시하기 위한 시각적 설계
• 다수의 항목이 있는 경우 드롭다운 내 스크롤 이동과 포커스 관리를 어떻게 처리할지
• 조건부 UI 렌더링 및 스타일링 관리: 모드나 상태에 따라 아이콘, 텍스트, 입력창 유무가 달라짐

🔧 구현 및 해결 방식

• UserDropdown
  • mode를 기준으로 search (입력+필터링) / select (단순 리스트) 두 모드를 분기 처리
  • 검색 기반 필터링, 실시간 inputValue 감지, 키보드 내비게이션(↑↓, Enter) 구현
  • 프로필 이미지가 없는 경우 Badge 컴포넌트를 대체로 사용해 예외 처리
• StatusDropdown
  • 컬럼 리스트 기반 드롭다운으로 상태를 선택
  • 현재 포커스된 옵션은 scrollIntoView로 자동 스크롤
  • keydown, mousedown 이벤트를 사용해 드롭다운 열림/닫힘과 키보드 제어 처리
  • 선택된 상태는 check.svg 아이콘으로 강조