-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FE] 검색 기능 구현(#730) #741
[FE] 검색 기능 구현(#730) #741
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Enter키까지 구현해서 접근성까지 챙긴게 아주 좋습니다! UI적으로는 저 위치 괜찮다고 생각해요ㅎㅎ 수고하셨습니당
export const SearchBarContainer = styled.div` | ||
position: relative; | ||
width: 100%; | ||
height: 100%; | ||
height: 40px; | ||
`; | ||
|
||
export const SearchBar = styled.input` | ||
width: 100%; | ||
height: 100%; | ||
padding: 0.6rem 3rem 0.6rem 0.6rem; | ||
|
||
font: ${({ theme }) => theme.TEXT.small}; | ||
|
||
border: 1px solid ${({ theme }) => theme.COLOR.grey1}; | ||
border-radius: 6px; | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분이 padding과 height 말고는 Input 컴포넌트와 굉장히 유사하더라고요! 사실 height는 없어도 되는 속성이라 padding-right: 3rem
만 추가면 Input 컴포넌트를 그대로 써도 괜찮을 것 같다고 생각합니다!
outline-color: ${({ theme }) => theme.COLOR.black};
를 추가하면 focus 시 outline이 검정색으로 나온답니다😁
{searchedRooms.length === 0 ? ( | ||
<RoomList | ||
roomList={roomList} | ||
hasNextPage={hasNextPage} | ||
onLoadMore={onLoadMore} | ||
isFetchingNextPage={isFetchingNextPage} | ||
roomType={roomType} | ||
/> | ||
) : ( | ||
<RoomList roomList={searchedRooms} isFetchingNextPage={isLoading} roomType={roomType} /> | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
검색 결과가 없을 때도 처리를 해주었네요! 저도 원래 데이터를 그대로 보여주는 게 좋다고 생각합니다👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
드디어 검색 기능이 생기다니 !!
크게 남길 코멘트가 없어서 바로 어프루브 드려요~ 👍
📓 스토리북 링크
바로가기
📌 관련 이슈
✨ PR 세부 내용
384057044-d9e720e8-9e9e-470b-9945-85eff0e8e8f3.mov