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

feat: document search #306

Merged
merged 12 commits into from
Dec 11, 2024
Merged

feat: document search #306

merged 12 commits into from
Dec 11, 2024

Conversation

rabyeoljji
Copy link
Contributor

@rabyeoljji rabyeoljji commented Dec 10, 2024

개요

  • zod와 react-hook-form 을 이용해서 검색을 구현하고 싶었으나

  • 왜인지 해당 로직으로 submit시, local storage가 초기화되는 현상이 발생

    • (추측하기로는 새로고침 시에도 검색 결과를 유지하기 위해 searchParams로 키워드를 세팅하고 있는데 경로를 이동하면서 컴포넌트가 다시 마운트되고, react-hook-form의 초기화 로직이 실행되는 과정에서 로컬 스토리지의 값이 뭔가 꼬인 것으로 추측...)
    • (아니면 zod/react-hook-form에 대한 이해가 부족해서 코드를 잘못 작성해서 그런 것일수도 있음)
  • 우선 해당 도구를 이용한 유효성 검사가 필수적인 부분은 아니라 판단되어 (빈 검색어만 필터링) 없이 구현

(+ 추가 고민 지점)

  • 브라우저 뒤로가기 처리가 따로 필요할 것인지 (이전 검색어가 아닌 이전 depth로?)

세부 내용

관련 링크

@rabyeoljji rabyeoljji self-assigned this Dec 10, 2024
@rabyeoljji rabyeoljji requested a review from jw-r December 10, 2024 07:38
Copy link
Member

@jw-r jw-r left a comment

Choose a reason for hiding this comment

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

LGTM!!
일전에 겪으셨던 문제는 제가 추후에 리펙토링하면서 다시 시도해보겠습니다👍

setIsSearchFocused(false)
return
} else {
router.push('/document')
Copy link
Member

Choose a reason for hiding this comment

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

router.back이 아닌 document로 보내는 이유가 있을까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

router.back이 아닌 document로 보내는 이유가 있을까요?

앗 안그래도 저도 통합검색 구현하면서 잘못된 부분들이 좀 있길래 수정했는데ㅎㅎ 이 부분도 정우님 말씀처럼 router.back으로 통합검색 쪽에서 수정했습니다!

>
<div tabIndex={-1} className="relative grow">
<header className="flex-center relative right-1/2 z-20 h-[56px] w-full max-w-mobile grow translate-x-1/2 bg-background-base-01 px-[16px] text-subtitle2-medium">
<form onSubmit={onSubmit} tabIndex={-1} className="relative grow">
<Input
Copy link
Member

Choose a reason for hiding this comment

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

autoFocus 속성이 들어가도 좋을 것 같아용!

@@ -22,7 +25,8 @@ const SearchItem = ({
lastItem,
}: Props) => {
return (
<div
<Link
href={documentId ? '/document/' + documentId : '#'}
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
href={documentId ? '/document/' + documentId : '#'}
href={documentId ? `/document/${documentId}` : '#'}

Comment on lines +33 to +35
const searchResults = [...(data?.documents ?? []), ...(data?.quizzes ?? [])] as Partial<
Document.SearchedDocument & Document.SearchedQuiz
>[]
Copy link
Member

Choose a reason for hiding this comment

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

우왕 검색 결과를 이렇게 통합하니까 좋네요👍

Copy link
Contributor Author

Choose a reason for hiding this comment

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

우왕 검색 결과를 이렇게 통합하니까 좋네요👍

생각할수록 엄청난 구조입니다... 퀴즈 결과와 문서 결과를 화면에 같은 양식으로 보여줘야 하는...😂

…t-search

# Conflicts:
#	src/types/schema.d.ts
@rabyeoljji rabyeoljji merged commit 6738307 into develop Dec 11, 2024
1 of 5 checks passed
rabyeoljji added a commit to rabyeoljji/pick-toss-next that referenced this pull request Dec 11, 2024
* feat: document-search

* fix: merge

* feat: use-recent-searches hook

* fix: 스토리지에 저장되는 데이터 구조 간단하게 수정

* fix: localstorage

* refactor: markdown processor

* fix: api 변경 + usePreviousPath hook 수정
@rabyeoljji rabyeoljji deleted the feat-search branch December 11, 2024 08:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants