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

검색 기능 페이지 구현 #21

Merged
merged 34 commits into from
Jan 5, 2024
Merged

검색 기능 페이지 구현 #21

merged 34 commits into from
Jan 5, 2024

Conversation

coggiee
Copy link
Collaborator

@coggiee coggiee commented Jan 4, 2024

관련 이슈


작업 내용

2024-01-04.10.46.40.mov
  • 검색을 할 수 있습니다.
  • 사용자 또는 전체(사용자 & 포스트) 필터를 통해 검색할 수 있습니다.
  • 검색 결과가 없을 경우, 특정 문구가 보여집니다.
  • 전체 검색 시, 사용자는 가로 슬라이드 형식으로 보여집니다.
  • 사용자 검색 시, 사용자는 세로 형식으로 보여집니다.

특이 사항

  • router 처리는 진행하지 않았습니다.
    • e.g. 포스트 클릭, 사용자 클릭

리뷰 요구사항 (선택)

  • 리뷰 중점 사항: 예외처리가 되지 않은 부분이 있을까요? 컨벤션이 적절하게 지켜졌나요?
  • 추가 검토 사항: 코드, 디자인, 구현 방식 등에 대한 추가적인 검토가 필요한 사항이 있나요?
  • 논의가 필요한 부분: 코드 리뷰 중 논의가 필요해 보이는 부분은 무엇인가요?

- 사용자 검색과 전체 검색으로 나누어서 구현했습니다.
- 입력한 keyword에 따라 전체 검색을 수행합니다.
- 아직 필터를 적용하지 않았습니다.
- 예외처리로 error 메시지를 추가했습니다.
- 검색바 밑에, error 메시지가 나타납니다.
- validate 함수의 리턴 타입을 수정했습니다.
- 전체 or 사용자 필터를 선택할 수 있습니다.
- 선택한 필터에 맞는 데이터를 받아옵니다.
- 선택되지 않은 필터 아이템과 구분할 수 있도록, 선택된 필터 아이템의 배경색과 텍스트 색상을 수정했습니다.
- `all`은 전체 검색을 의미합니다.
- title에 [object FormData]가 들어있는 경우를 발견했습니다.
- 임시 해결로 임의의 string을 설정했습니다.
- 전체 검색 결과 섹션에서 포스트 섹션에 Grid를 설정했습니다.
- 각 컴포넌트의 이름을 명시적으로 수정하여 가독성을 개선했습니다.
- 검색 결과가 없을 시, 특정 문구를 보여줍니다.
- 프로필 이미지가 없는 경우, 디폴트 사용자 이미지를 보여줍니다.
- 썸네일이 없다면, 디폴트 이미지를 보여줍니다.
- 사용자 필터를 선택했을 때도 동일하게 분기 처리되도록 수정했습니다.
- 검색 페이지에 최초 진입 시, 검색 결과가 없다는 문구가 렌더링되지 않도록 수정했습니다.
@coggiee coggiee self-assigned this Jan 4, 2024
@coggiee coggiee added the feature 기능 개발 label Jan 4, 2024
@coggiee coggiee linked an issue Jan 4, 2024 that may be closed by this pull request
3 tasks
@coggiee coggiee changed the title Feature/search 검색 기능 페이지 구현 Jan 4, 2024
src/pages/search/components/FilteredList.tsx Outdated Show resolved Hide resolved
src/pages/search/index.tsx Show resolved Hide resolved
@coggiee coggiee merged commit 2179a25 into develop Jan 5, 2024
Comment on lines +34 to +63
users?.map(({ image, fullName, email }) => (
<FilteredUser
image={image}
fullName={fullName}
email={email}
/>
))}
{type === 'all' && (
<>
<HorizontalSlide>
{users?.map(({ image, fullName, email }) => (
<FilteredUser
image={image}
fullName={fullName}
email={email}
isHidden
/>
))}
</HorizontalSlide>
{users!.length > 0 ||
(posts!.length > 0 && (
<GridPostSection>
{posts?.map(({ image, title, comments, likes }) => (
<FilteredPost
thumbnail={image}
title={title}
commentsNum={comments.length}
likesNum={likes.length}
/>
))}
Copy link
Contributor

@Yoonkyoungme Yoonkyoungme Jan 5, 2024

Choose a reason for hiding this comment

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

P3
users?.map 및 posts?.map에서 컴포넌트에 고유한 key 값을 사용하면 좋을 것 같아요!

@coggiee coggiee deleted the feature/search branch January 15, 2024 00:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature 기능 개발
Projects
None yet
Development

Successfully merging this pull request may close these issues.

검색 기능 구현
4 participants