검색 페이지 구현

[froggy1014]

PR 타입 ( 하나 이상의 PR 타입을 선택해주세요 )

• 기능 추가
• 버그 수정
• 의존성, 환경 변수, 빌드 관련 코드 업데이트
• 기타 사소한 수정

변경 사항

1. 검색 히스토리는 로컬스토리지에 저장하고, 커스텀 훅을 만들어서 사용해봤습니다.

2. 디자인이 아래와 같아서 query라는 쿼리 스트링 유무에 따라 조건부적으로 렌더링하게 했습니다.

그런데 이게 맞는 접근인지 모르겠습니다 ㅎㅎ...

const SearchFestival = () => {
  const [query, setQuery] = useQueryState("query", { shallow: true });
  const { data, isLoading } = useGetSearchFestival(query ?? "", 300);
  const { set } = useSearchHistory();

  useEffect(() => {
    if (isString(query) && !isEmpty(query)) {
      set(query);
    }
  }, [data]);

  if (isLoading) {
    return (
      <div className="flex h-[400px] w-full items-center justify-center">
        <ProgressCircle className="size-[100px]" />
      </div>
    );
  }

  if (query?.length === 0) {   //here
    return null;
  }

  if (data?.length === 0) {
    return (
      <div className="flex h-[400px] w-full items-center justify-center">
        <SearchFestivalFallback />
      </div>
    );
  }

  return (
    <div className="flex w-full flex-col gap-[4px] rounded-[8px] p-[12px]">
      {data?.map((festival) => {
        return (
          <FestivalSearchTile key={festival.festivalId} festival={festival} />
        );
      })}
    </div>
  );
};

3. 검색하는 useQuery를 커스텀훅안에 debounce 붙여서 구현했습니다.

import { keepPreviousData, useQuery } from "@tanstack/react-query";
import debounce from "lodash/debounce";
import { useEffect, useState } from "react";

import { getSearchFestival } from "@/apis/festivals/searchFestival/searchFestival";
import { SearchFestivalKeys } from "@/apis/festivals/searchFestival/searchFestivalKeys";

export const useGetSearchFestival = (query: string, delay: number = 500) => {
  const [debouncedQuery, setDebouncedQuery] = useState(query);

  useEffect(() => {
    const handler = debounce(() => {
      setDebouncedQuery(query);
    }, delay);

    handler();

    return () => {
      handler.cancel();
    };
  }, [query, delay]);

  const { data, error, isLoading } = useQuery({
    queryKey: SearchFestivalKeys.list({ query: debouncedQuery ?? "" }),
    queryFn: () => getSearchFestival({ query: debouncedQuery ?? "" }),
    enabled: !!debouncedQuery,
    placeholderData: keepPreviousData,
  });

  return { data, error, isLoading };
};

코드 리뷰시 참고 사항

pnpm install && pnpm run build:mock

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fiesta	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 21, 2024 5:12pm

[Zero-1016]

고생하셨습니다 :)

[Zero-1016]

P5

data?.length === 0를 isDataListEmpty와 같이 변수로 관리해서 조건문에 넣으면 가독성이 더 좋을 것 같습니다!
query?.length === 0는 isQueryEmpty로 선언해도 될 것 같아요

[Zero-1016]

P5

목데이터 반복문으로 만드는게 좋아보입니다. 쓸모없는 코드이지만 코드가 길어지네요!

[Zero-1016]

검색 히스토리에 관하여

로컬 스토리지에 저장하는 것 괜찮은 선택일까?

로컬 스토리지에 데이터를 저장하는 것은 다소 신중해야 할 부분입니다. 서버 컴포넌트에서 접근할 수 없고, 정보가 탈취될 위험도 있습니다.

만약 다음과 같은 상황이 아니라면 로컬 스토리지 사용이 가능할 수 있습니다.

1. 특정 사람의 개인정보 유출의 경우
2. 서버 컴포넌트에서도 접근이 필요한 경우

이와 별개로, 로컬 스토리지를 사용해 데이터를 관리하는 것이 적절한지 고민해보는 것도 좋겠습니다.

1. 상태로 관리할 수는 없을까?
2. 휘발되어도 상관없는 데이터이지 않을까?

정민님께서 어떤 방식을 선택하시든 각각의 방식에 이유가 있다고 생각합니다. 충분히 좋은 접근으로 여겨집니다!

+) 추가로, 해당 서비스에 대해 개인적으로 생각한 연결 기능이 있습니다.

로그인을 하지 않은 상태에서는 로컬 스토리지에 관리를 하지만 로그인을 한 상태에서는 서버에 저장하는 것도 좋아 보입니다!

로그인을 한다면 검색을 했던 데이터가 서버에 전송이 될 수도 있겠네요, 비로그인 장바구니와 같이요.

최근 방문한 축제 정보 같은 것도 추가할 수 있을 것 같습니다.

[punchdrunkard]

@Zero-1016

로컬스토리지에 저장한건 그냥 백엔드가 만들어드릴 시간이 없어서 그랬던거에요 제가 미안합니다.......

[Zero-1016]

@Zero-1016

로컬스토리지에 저장한건 그냥 백엔드가 만들어드릴 시간이 없어서 그랬던거에요 제가 미안합니다.......

화이팅...! 😥

[froggy1014]

검색 히스토리에 관하여

로컬 스토리지에 저장하는 것 괜찮은 선택일까?

로컬 스토리지에 데이터를 저장하는 것은 다소 신중해야 할 부분입니다. 서버 컴포넌트에서 접근할 수 없고, 정보가 탈취될 위험도 있습니다.

만약 다음과 같은 상황이 아니라면 로컬 스토리지 사용이 가능할 수 있습니다.

1. 특정 사람의 개인정보 유출의 경우
2. 서버 컴포넌트에서도 접근이 필요한 경우

이와 별개로, 로컬 스토리지를 사용해 데이터를 관리하는 것이 적절한지 고민해보는 것도 좋겠습니다.

1. 상태로 관리할 수는 없을까?
2. 휘발되어도 상관없는 데이터이지 않을까?

정민님께서 어떤 방식을 선택하시든 각각의 방식에 이유가 있다고 생각합니다. 충분히 좋은 접근으로 여겨집니다!

+) 추가로, 해당 서비스에 대해 개인적으로 생각한 연결 기능이 있습니다.

로그인을 하지 않은 상태에서는 로컬 스토리지에 관리를 하지만 로그인을 한 상태에서는 서버에 저장하는 것도 좋아 보입니다!

로그인을 한다면 검색을 했던 데이터가 서버에 전송이 될 수도 있겠네요, 비로그인 장바구니와 같이요.

최근 방문한 축제 정보 같은 것도 추가할 수 있을 것 같습니다.

감사합니다.

일단은 사용하지 않을 조건 ( 보안, 서버컴포넌트 ) 등의 조건은 없었어서 일단은 로컬 스토리지에서 진행을 했었어용.

말씀하신 연결 기능도 좋은 것 같습니다 - !

항상 디테일 잡아주셔서 감사해영 > _ 0

[punchdrunkard]

오타인것같습니다! parameter