검색 결과 페이지 구현

[eeseung]

📑 이슈 번호

• close 검색 결과 페이지 구현 #63

🚧 구현 내용

검색 결과 페이지를 구현했습니다.

LinkHub-FE_search-page.mov

검색 결과 searchParams

• sort, category가 searchParams에 없으면 각각 첫 번째 요소가 active 됩니다.
• searchParams에 있으나 목록에 속한 값이 아니면 아무 요소도 active 되지 않습니다.
  • sort: recent, scrap
  • category: 전체, 엔터테인먼트•예술, 생활•노하우•쇼핑, 취미•여가•여행, 지식•이슈•커리어, 기타
• target은 지정된 값이 아니면 타이틀 외에는 아무 요소도 나오지 않습니다.
  • target: space, user

🚨 특이 사항

Dropdown 컴포넌트

• defaultIndex prop 추가했습니다.

interface DropdownProps {
  type: 'space' | 'link' | 'search' | 'user_edit' | 'user_invite' | 'tag'
  size?: 'large' | 'medium' | 'small'
  placement?: 'left' | 'right'
  defaultIndex?: number // 추가
  tags?: string[]
  onChange: (e: React.MouseEvent<HTMLButtonElement>) => void
}

CategoryList 컴포넌트

• defaultIndex 로직을 useCategoryList 훅 안으로 이동했습니다.

Input 컴포넌트

• 버튼이 type=submit으로 쓰이는 경우가 있어 buttonType을 추가했습니다. (스페이스 댓글 페이지, 검색 모달)

interface InputProps {
 label?: string
 type?: string
 placeholder?: string
 inputButton?: boolean
 buttonText?: string
 buttonType?: 'button' | 'submit' | 'reset' // 추가 (default: 'button')
 buttonColor?: 'green' | 'gray'
 validation?: string
 disabled?: boolean
 onButtonClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void
}

기타

• Dropdown, CategoryList 수정사항을 메인 페이지에 반영했습니다.
• User 인터페이스나 목데이터가 PR마다 변경되는 것 같아서 유저 목록은 추후 반영하도록 하겠습니다.
• 모바일 UX를 고려해서 메인 페이지 & 검색 결과 페이지 모두 router.replace로 했는데 혹시 다른 의견 있으시면 남겨주세요!
• TODO: CategoryList 목록도 영문을 추가해야 할 것 같습니다.

[bomi8489]

수고하셨습니당!! 👍🏻

[dudwns]

고생하셨습니다! 👍