검색 모달 컴포넌트 구현

[eeseung]

📑 이슈 번호

• close 검색 모달 구현 #57

🚧 구현 내용

검색 모달 컴포넌트를 구현했습니다.

SearchModal

LinkHub-FE_search-modal-component.mov

🚨 특이 사항

Tab 컴포넌트

• sticky로 고정될 때 다른 컴포넌트와 겹치는 경우가 있어서 z-index 추가했습니다.

---

📍 @bomi8489 @dudwns 아래는 드롭다운 관련 수정 사항입니다! 확인 부탁드립니다.

DropdownOptions

const DROPDOWN_OPTIONS = {
  space: { 최신순: 'recent', 즐겨찾기순: 'scrap' },
  link: { 최신순: 'recent', 좋아요순: 'favorite' },
  search: { 스페이스: 'space', 유저: 'user' },
  user_edit: { '편집 혀용': 'edit', '읽기 허용': 'view', 제거: 'remove' },
  user_invite: { '편집 허용': 'eidt', '읽기 허용': 'view' },
} as const

• 드롭다운 옵션이 한글로 쓰이지만 데이터를 넘겨주려면 영문이 필요해 type: [옵션_한글]에서 type: {옵션_한글: 옵션_영문}으로 수정했습니다.
• Dropdown의 type은 기존과 동일한 방식으로 넘겨주시면 됩니다.

DropdownItemsProps

interface DropdownItemProps {
  label: string
  value?: string // 추가
  active?: boolean
  border?: boolean
  danger?: boolean
  disabled?: boolean
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
}

• Dropdown에서 value를 영문으로 따로 전달받기 위해 추가했습니다.
• DropdownItem 버튼의 value는 전달받은 value(없으면 label)로 지정했습니다.

[bomi8489]

수고하셨습니당!

[bomi8489]

편집 혀용..?

[eeseung]

앗 수정했습니다! 🙈

[dudwns]

고생하셨습니다!