🗺️ 거리 기반 게시글 검색

prisma와 Next.js기반으로 작성했습니다.

Geolocation API를 이용해서 사용자가 허용하면 현재 디바이스의 위도/경도 값을 얻어냅니다.
해당 위도와 경도를 게시글 테이블의 컬럼에 추가하고 게시글을 불러올 때 위도/경도, 사용자가 선택한 거리를 계산해서 선택한 거리내부에 존재하는 게시글만 불러오도록 만들었습니다.

만약 사용자가 허용하지 않을 경우에는 작성하는 게시글이 위치 기반 검색에서 제외되도록 설계했습니다.

🙂 위도/경도 얻는 훅

useCoords() hook 참고

😌 위도/경도 컬럼 추가

model Post {
  # 아래 두 개 추가
  latitude  Float?
  longitude Float?
  
  # ... 나머지 생략
}

😯 거리 기반 검색

요청 API -> /api/posts?latitude&longitude&distance&page&offset
query string을 이용해서 위도, 경도, 거리, 페이지, 개수 값을 전송합니다.

1. 프론트

input[type="range"]를 이용해서 1~100KM를 선택하고 onChange()이벤트를 이용해서 값이 변경한다면 다시 검색하도록 요청합니다.
단, 너무 많은 요청이 발생하기 때문에 디바운스를 적용해서 연속적인 요청중 가장 마지막 요청만 수행하도록 설계했습니다.

• 전체 코드의 일부분 ( 전체 코드 참고 )

// 2022/04/13 - 검색할 거리 - by 1-blue
const [distance, setDistance] = useState(10);
// 2022/04/23 - 디바운싱 - by 1-blue
const [debounce, setDebounce] = useState(false);
// 2022/04/23 - timerId - by 1-blue
const timerId = useRef<any>(null);
// 2022/03/28 - 거리 조절 - by 1-blue
const onChangeDistance = useCallback(
  (e: React.FormEvent<HTMLInputElement>) => {
    if (!debounce) {
      clearTimeout(timerId.current);
      timerId.current = setTimeout(() => {
        setDebounce(true);
      }, 300);
    }
    setDistance(+e.currentTarget.value);
  },
  [debounce, setDebounce]
);

<input
  type="range"
  min={1}
  value={distance}
  onChange={onChangeDistance}
  className="w-full py-4 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:rounded-md"
/>

// usePagination()은 useSWR()을 커스터마이징한 것임
// 위에서 input을 변경해서 "debounce"가 true가 되는 순간 현재 적용한 거리를 기반으로 요청하게 됩니다.

// 2022/04/13 - 검색 조건에 의해 검색된 게시글들 - by 1-blue
const [{ data: searchedPost, isValidating }, { page, setPage }, { offset }] =
usePagination<IPostResponse>(
  +condition === SEARCH_CONDITION.AROUND &&
    latitude &&
    longitude &&
    debounce
    ? `/api/posts?latitude=${latitude}&longitude=${longitude}&distance=${distance}`
    : null,
  {}
);

2. 백엔드

• /api/posts/index.ts

// 나머지 생략하고 핵심 로직만 추가했습니다.
const page = +req.query.page - 1;
const offset = +req.query.offset;

let where = {};
// 인근 게시글 검색 시 실행
if (req.query.distance) {
  // 거리, 위도, 경도 숫자값으로 가져오기
  const distance = +req.query.distance;
  const parsedLatitude = parseFloat(req.query.latitude.toString());
  const parsedLongitue = parseFloat(req.query.longitude.toString());

  // 1KM 근사치가 0.008
  // 반경 "distance"KM 내에서 작성한 게시글을 검색하는 조건
  where = {
    latitude: {
      gte: parsedLatitude - 0.008 * distance,
      lte: parsedLatitude + 0.008 * distance,
    },
    longitude: {
      gte: parsedLongitue - 0.008 * distance,
      lte: parsedLongitue + 0.008 * distance,
    },
  };
}

// 아래 부분은 나중에 Promise.all()을 이용해서 값을 추출함
const postsPromise = prisma.post.findMany({
  take: offset,
  skip: page * offset,
  where,
  include: {
    user: {
      select: {
        name: true,
      },
    },
    _count: {
      select: {
        answers: true,
        recommendations: true,
      },
    },
  },
  orderBy: [
    {
      createdAt: "desc",
    },
  ],
});

📽️ 구현

• 디바운스 미적용
  

• 디바운스 적용