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

검색 기능 구현 #490

Merged
merged 8 commits into from
Oct 5, 2023
Merged

검색 기능 구현 #490

merged 8 commits into from
Oct 5, 2023

Conversation

solo5star
Copy link
Member

#️⃣ 연관된 이슈

close #489

📝 작업 내용

yozm-cafe-search

위 이미지는 모킹된 데이터를 기반으로 동작하고 있습니다

  • 검색 기능 구현
  • 검색 페이지 구현
  • 3가지 필드를 기준으로 검색 가능(카페 이름, 카페 주소, 카페 메뉴 명)
  • 네비게이션 바 리뉴얼 및 검색 페이지 이동 버튼 추가

💬 리뷰 요구사항

  • 검색 API 연동 테스트가 선행되어야 합니다.

@solo5star solo5star added 카테고리:기능🛠️ 만들어줘잉 FE 될 때까지 한다잉 우선순위:🟡보통 급하진 않지만, 필요한 작업입니다. FE:검색 화면 검색 화면과 관련된 이슈입니다 labels Sep 26, 2023
@solo5star solo5star self-assigned this Sep 26, 2023
@solo5star solo5star marked this pull request as ready for review September 27, 2023 04:53
@solo5star solo5star linked an issue Sep 27, 2023 that may be closed by this pull request
4 tasks
Copy link
Collaborator

@jeongwusi jeongwusi left a comment

Choose a reason for hiding this comment

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

검색 기능 구현하시느라 고생하셨습니다~! 확인 한번만 해주십셩

if (Object.keys(sanitizedSearchParams).length === 0) {
return Promise.resolve([]);
}
return this.fetchJson<SearchedCafe[]>(`/cafes/search?${new URLSearchParams(sanitizedSearchParams).toString()}`);
Copy link
Collaborator

Choose a reason for hiding this comment

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

new URLSearchParams에 대한 설명 잘 들었습니다~~

스크린샷 2023-09-29 오후 2 49 21

Copy link
Member Author

Choose a reason for hiding this comment

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

굿~ 좋습니다


const [isDetailEnabled, setIsDetailEnabled] = useState(false);

const query = useDeferredValue(isDetailEnabled ? { searchName, searchAddress, searchMenu } : { searchName });
Copy link
Collaborator

Choose a reason for hiding this comment

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

오홍...! useDeferredValue()를 이용하셨군요 👍🏻👍🏻👍🏻

Copy link
Member Author

Choose a reason for hiding this comment

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

네 맞습니다~! useDeferredValue를 사용하면 fallback을 보여주는 대신 이전의 렌더를 보여주기 때문에 끊김이 없는 것처럼 보여 사용자 경험에 좋은 영향을 줄 수 있습니다

font-size: ${({ theme }) => theme.fontSize['2xl']};
`;

const FormGroup = styled.fieldset`
Copy link
Collaborator

Choose a reason for hiding this comment

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

시맨틱 태그도 야무지게 사용을 하셨군요!

Copy link
Member Author

Choose a reason for hiding this comment

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

그럼요~^^

if (Object.keys(sanitizedSearchParams).length === 0) {
return Promise.resolve([]);
}
return this.fetchJson<SearchedCafe[]>(`/cafes/search?${new URLSearchParams(sanitizedSearchParams).toString()}`);
Copy link
Collaborator

Choose a reason for hiding this comment

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

근데 메서드 POST인데 { method: 'POST' } 이거 필요 없나용?

Copy link
Member Author

Choose a reason for hiding this comment

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

어떤게 POST라는 걸까용? 서버 측에선 GET으로 구현되어 있기 때문에 GET 을 사용하였습니당


return useSuspenseQuery<SearchedCafe[]>({
queryKey: ['searchCafes', query],
retry: false,
Copy link
Collaborator

Choose a reason for hiding this comment

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

retry는 왜 fasle로 하셨나용?

Copy link
Member Author

Choose a reason for hiding this comment

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

검색 결과 조회는 타이핑마다 일어나기 때문에 빈번히 요청합니다. 여기서 이전 타이핑의 조회 결과는 필요없기 때문에 굳이 retry로 가져올 필요는 없기 때문입니다~!

Copy link
Collaborator

@jeongwusi jeongwusi left a comment

Choose a reason for hiding this comment

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

나이스 코드~ 고생고생^^

@solo5star solo5star merged commit c444478 into dev Oct 5, 2023
1 check failed
@solo5star solo5star deleted the feat/489-search branch October 5, 2023 06:09
@solo5star solo5star restored the feat/489-search branch October 5, 2023 06:09
@solo5star solo5star mentioned this pull request Oct 5, 2023
@solo5star solo5star deleted the feat/489-search branch October 5, 2023 06:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FE 될 때까지 한다잉 FE:검색 화면 검색 화면과 관련된 이슈입니다 우선순위:🟡보통 급하진 않지만, 필요한 작업입니다. 카테고리:기능🛠️ 만들어줘잉
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

검색 기능 추가
2 participants