fix: 멤버 검색 이후 프로필로 들어가지지 않는 오류 수정

[pepperdad]

🤫 쉿, 나한테만 말해줘요. 이슈넘버

• close fix: 멤버 페이지 멤버 검색 이후 프로필로 들어가지지 않는 오류 수정 #1622

🧐 어떤 것을 변경했어요~?

🤔 그렇다면, 어떻게 구현했어요~?

handleSearchSubmit 함수에 blur() 추가 및 debounce 적용

❤️‍🔥 당신이 생각하는 PR포인트, 내겐 매력포인트.

검색 이후 blur되는 부분은 mds의 SearchField 컴포넌트에서 적용되어야 할 부분,,,? 같긴 한데 일단 저희 쪽에서 blur처리 하도록 수정했습니다!
debounce는 검색 이후 마지막 한글이 추가되서 queryString에 들어가서 Enter처리가 추가로 되지 않도록 적용했습니다.

📸 스크린샷, 없으면 이것 참,, 섭섭한데요?

[문제 상황]
input에 focus가 되어있을 시, 멤버 프로필 상세 페이지로 리다이렉트가 되지 않았습니다.
https://github.com/user-attachments/assets/e2e5c0a6-be18-4be4-b492-427d1fe59af9

[blur() 추가 및 debounce 미적용시]
https://github.com/user-attachments/assets/b9884957-ed24-4346-b188-14afccc46d10

[blur() 추가 및 debounce 적용 후]
https://github.com/user-attachments/assets/7ebec28a-5bf4-4b39-81bb-7cf4079ed1c6

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[github-actions]

✨✨ 스토리북으로 확인하기 ✨✨

• Build
• Preview

[github-actions]

🚀 프리뷰 배포 확인하기 🚀

https://48801620.sopt-internal-dev.pages.dev

[simeunseo]

input focus가 문제 원인이었군요~ 정확한 파악 및 해결 해주셔서 너무 감사합니다..
추가로 debounce 작업까지 🚀👍 근데 제가 테스트해봤을 땐 마지막 글자가 한번더 입력되는 일이 한번도 없었어서... 정확히 어떤 상황에서 발생하는 건지 궁금하네요

[simeunseo]

document.activeElement 배워갑니다! 이부분은 확실히 mds에 요청해야할거같아요!

[pepperdad]

@simeunseo

const handleSearchSubmit = (searchQuery: string) => {
    addQueryParamsToUrl({ search: searchQuery });
    logSubmitEvent('searchMember', { content: searchQuery });

    if (document.activeElement instanceof HTMLElement) {
      document.activeElement.blur();
    }
  };

혹시 handleSearchSubmit 함수 위 코드로 변경하고 한글로 아무거나 검색해볼래!??? 나만 그랬던 건가?

[simeunseo]

@pepperdad
앗 도영 미안해요 blur 처리 전 기존 코드에서 해당 문제가 발생했다는 걸로 잘못 이해를 했어요!!
근데 blur 처리를 추가했더니 해당 문제가 발생했다는 거군요
확인했습니다 ..👍👍👍👍