Skip to content
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

Merged
merged 7 commits into from
Nov 8, 2024
Merged

[FE] 검색 기능 구현(#730) #741

merged 7 commits into from
Nov 8, 2024

Conversation

github-actions[bot]
Copy link
Contributor

@github-actions github-actions bot commented Nov 7, 2024

📓 스토리북 링크

바로가기

📌 관련 이슈

✨ PR 세부 내용

  • 검색결과가 없으면 에러모달로 검색결과가 없다는 메시지를 보여줘요
  • 검색결과가 있으면 검색된 방을 보여줘요
  • 만약 공백을 검색하면 모든 방을 보여줘요
384057044-d9e720e8-9e9e-470b-9945-85eff0e8e8f3.mov

@github-actions github-actions bot added the FE 프론트 개발 관련 작업 label Nov 7, 2024
@github-actions github-actions bot requested review from 00kang and chlwlstlf November 7, 2024 16:43
Copy link
Contributor

@chlwlstlf chlwlstlf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Enter키까지 구현해서 접근성까지 챙긴게 아주 좋습니다! UI적으로는 저 위치 괜찮다고 생각해요ㅎㅎ 수고하셨습니당

Comment on lines 3 to 19
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;
`;
Copy link
Contributor

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이 검정색으로 나온답니다😁

Comment on lines +79 to +89
{searchedRooms.length === 0 ? (
<RoomList
roomList={roomList}
hasNextPage={hasNextPage}
onLoadMore={onLoadMore}
isFetchingNextPage={isFetchingNextPage}
roomType={roomType}
/>
) : (
<RoomList roomList={searchedRooms} isFetchingNextPage={isLoading} roomType={roomType} />
)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

검색 결과가 없을 때도 처리를 해주었네요! 저도 원래 데이터를 그대로 보여주는 게 좋다고 생각합니다👍

Copy link
Member

@00kang 00kang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

드디어 검색 기능이 생기다니 !!
크게 남길 코멘트가 없어서 바로 어프루브 드려요~ 👍

@pp449 pp449 merged commit 0bf3b0f into develop Nov 8, 2024
3 checks passed
@pp449 pp449 deleted the feat/#730 branch November 8, 2024 01:50
@github-actions github-actions bot requested review from 00kang and chlwlstlf January 30, 2025 05:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FE 프론트 개발 관련 작업
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FE] 검색 기능 구현
3 participants