2024.04.12 TIL #채팅내용_검색

📌 Task TODOLIST

- [x] 검색창을 열지 말지 결정하는 searchMode 상태 생성

- [x] 검색기능 input창 + 검색 버튼 + 위/아래 버튼 생성

- [x] 스크롤 중인지 여부에 따라서 absolute 값 주기

- [x] 현재 보이는 메세지들 중 원하는 검색어 검색 시 일치하는 결과 배열 생성

- [x] 위/아래 버튼 누를 시 검색횟수 기반으로 up/down count state 생성

- [x] 해당요소 찾아서 스크롤

- [x] 색 칠하기(강조처리)

- [x] 유효성 검사

- [x] 검색종료 시 이전까지 검색하던 거 모두 clear

---

✨ 개발 내용

1. 검색창을 열지 말지 결정하는 searchMode 상태 생성

2. 검색기능 input창 + 검색 버튼 + 위/아래 버튼 생성

3. 스크롤 중인지 여부에 따라서 absolute 값 주기

import { useMsgsQuery } from '@/hooks/useQueries/useChattingQuery';
import { chatStore } from '@/store/chatStore';
import { useEffect, useState } from 'react';
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
import { FaX } from 'react-icons/fa6';
import { IoIosSearch } from 'react-icons/io';

const ChatSearch = ({ isScrollTop }: { isScrollTop: boolean }) => {
  const { searchMode, chatRoomId, setSearchMode } = chatStore((state) => state);
  const [searchWord, setSearchWord] = useState('');

  return (
    <>
      {searchMode ? (
        <div className={`${isScrollTop ? 'w-full' : 'absolute z-50 w-[90%]'} flex items-center gap-2`}>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              handleSearch();
            }}
            className="flex w-full gap-2 relative items-center"
          >
            <div className="absolute ml-[10px] flex items-center gap-[6px] text-[#A1A1AA]">
              {searchWord ? null : (
                <>
                  <IoIosSearch />
                </>
              )}
            </div>

            <input
              value={searchWord}
              onChange={(e) => setSearchWord(e.target.value)}
              className="h-[40px] w-full p-[8px] border-2 border-[#D4D4D8] rounded-md focus:outline-none"
              placeholder="     채팅내용 검색하기"
              autoFocus
            ></input>
            <div className="absolute right-3">{doneSearchDivs?.length ? `(${doneSearchDivs?.length})` : ''}</div>
          </form>

          <div className="flex gap-2">
            <div className="flex flex-col justify-center items-center">
              <button onClick={handleSearchUp}>
                <FaChevronUp />
              </button>
              <button onClick={handleSearchDown}>
                <FaChevronDown />
              </button>
            </div>
            <button onClick={stopSearch}>
              <FaX />
            </button>
          </div>
        </div>
      ) : null}
    </>
  );
};

export default ChatSearch;

 

4. 현재 보이는 메세지들 중 원하는 검색어 검색 시 일치하는 결과 배열 생성

5. 위/아래 버튼 누를 시 검색횟수 기반으로 up/down count state 생성

6. 해당요소 찾아서 스크롤

7. 색 칠하기(강조처리)

8. 유효성 검사

  const [doneSearchDivs, setDoneSearchdivs] = useState<(HTMLElement | null)[]>();
  const [searchCount, setSearchCount] = useState(0);
  const [upDownCount, setUpDownCount] = useState(0);
 
 const handleSearch = () => {
    if (searchWord) {
      const filteredIds =
        messages &&
        messages
          .filter((m) => m.message?.includes(searchWord))
          .map((messages) => messages.message_id)
          .reverse();
      const idsDivs = filteredIds?.map((id) => {
        return document.getElementById(`${messages?.find((m) => m.message_id === id)?.message_id}`);
      });
      setDoneSearchdivs(idsDivs);

      if (idsDivs && searchCount < idsDivs.length) {
        if (searchCount > 0) idsDivs[searchCount - 1]!.style.backgroundColor = '';
        const theDiv = idsDivs[searchCount];
        if (theDiv) {
          theDiv.style.backgroundColor! = '#E4D4F4';
          theDiv.style.borderRadius = '5px';
          theDiv.scrollIntoView({ block: 'center' });
          setSearchCount((prev) => prev + 1);
          setUpDownCount((prev) => prev + 1);
          // upDownCount는 지금까지 search한 것을 기반으로 되어야 하니까 여기에 종속되어서 +
        }
      } else {
        alert('더 이상 찾을 내용이 없습니다.');
      }
    } else {
      alert('검색어를 입력해주세요');
    }
  };

  const handleSearchUp = () => {
    if (doneSearchDivs && upDownCount < doneSearchDivs.length) {
      if (upDownCount > 0) doneSearchDivs[upDownCount - 1]!.style.backgroundColor = '';
      const theDiv = doneSearchDivs[upDownCount];
      if (theDiv) {
        theDiv.style.backgroundColor! = '#E4D4F4';
        theDiv.style.borderRadius = '5px';
        theDiv.scrollIntoView({ block: 'center' });
      }
      setUpDownCount((prev) => prev + 1);
    }
  };

  const handleSearchDown = () => {
    if (doneSearchDivs && 1 < upDownCount) {
      if (upDownCount <= doneSearchDivs.length) doneSearchDivs[upDownCount - 1]!.style.backgroundColor = '';
      const theDiv = doneSearchDivs[upDownCount - 2];
      if (theDiv) {
        theDiv.style.backgroundColor! = '#E4D4F4';
        theDiv.style.borderRadius = '5px';
        theDiv.scrollIntoView({ block: 'center' });
      }
      setUpDownCount((prev) => prev - 1);
    }
  };

  const clearColor = () => {
    doneSearchDivs?.forEach((div) => {
      if (div) div.style.backgroundColor = '';
    });
  };

 

9. 검색종료 시 이전까지 검색하던 거 모두 clear

const stopSearch = () => {
    setSearchMode();
    setSearchCount(0);
    setSearchWord('');
    clearColor();
    setDoneSearchdivs([]);
    setUpDownCount(0);
  };

  useEffect(() => {
    if (!searchWord) {
      setSearchCount(0);
      setUpDownCount(0);
      clearColor();
      setDoneSearchdivs([]);
    }
  }, [searchWord]);

🚨  TroubleShotting 

1. 분명히 값이 있는지 확인했음에도 null인 것 같다는 오류가 나왔다.

 

=> 변수에 할당해서 확인해줬더니 해결되었다.

 

 

2. 채팅검색 결과를 up & down 할 때, 다음 결과를 focus 하면 이전 결과 강조처리가 계속 남아있었다.

=> 다음 결과로 focus 되면 이전 결과의 backgroundColor 스타일을 "" 빈 값으로 변경해주었다.

 

3. upDownCount가 끝도 없이 올라가고, 내려가는 이슈 발생

=> upDownCount는 doneSearchDivs(= 검색결과)의 length에 따라 적을 때만 up, 1보다 클 때만 down할 수 있도록 조건을 추가함

 

 📸 스크린샷

검색하기(가장 최신의 "3" 강조처리)	위로 올리면, 그 전의 "3" 강조처리

📚 레퍼런스

scrollIntoView()
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
https://mosei.tistory.com/entry/Javascript-div-%EC%9A%94%EC%86%8C%EC%9D%98-top%EC%8B%9C%EC%9E%91-%EC%9C%84%EC%B9%98-%EC%95%8C%EC%95%84%EB%82%B4%EA%B8%B0

[Javascript] div 요소의 top(시작) 위치 알아내기

https://github.com/Team-MeetGo/MeetGO/pull/105

황인정 - [feat]: 채팅방 내 검색기능 by 2njeong · Pull Request #105 · Team-MeetGo/MeetGO

https://github.com/Team-MeetGo/MeetGO/pull/205

황인정 - [fix]: 채팅 검색 기능 수정 + 로비 참여중 방 스타일 수정 by 2njeong · Pull Request #205 · Team-M