feat : geolocation 기준 distance 렌더링 구현 (#36)

Author: sbyeol3

src/atoms/geolocation.ts

@@ -0,0 +1,9 @@
+import { atom } from 'recoil';
+
+export const GeolocationAtom = atom({
+  key: 'geolocation',
+  default: {
+    latitude: 37.555,
+    longitude: 126.91,
+  },
+});

src/components/PlaceSearch/PlaceSearchList.tsx

@@ -12,8 +12,12 @@ const PlaceSearchList: FC<IPlaceSearchListProps> = (props) => {
   const { places } = props;
   return (
     <List>
-      {places.map(({ id, place_name }) => (
-        <PlaceSearchListItem key={id} placeName={place_name} />
+      {places.map(({ id, place_name, distance }) => (
+        <PlaceSearchListItem
+          key={id}
+          placeName={place_name}
+          distance={distance}
+        />
       ))}
     </List>
   );

src/components/PlaceSearch/PlaceSearchListItem.tsx

@@ -2,13 +2,15 @@ import React, { FC } from 'react';
 import styled from 'styled-components';
 import { useStoryState } from '@/atoms/storyState';
 import { useHistory } from 'react-router-dom';
+import { getFormattedDistance } from '@/utils/formatter';
 
 interface IPlaceSearchListItem {
   placeName: string;
+  distance: string;
 }
 
 const PlaceSearchListItem: FC<IPlaceSearchListItem> = (props) => {
-  const { placeName } = props;
+  const { placeName, distance } = props;
   const { setStoryState } = useStoryState();
   const history = useHistory();
 
@@ -20,7 +22,7 @@ const PlaceSearchListItem: FC<IPlaceSearchListItem> = (props) => {
   return (
     <ListItem onClick={onClickPlaceItem}>
       <strong>{placeName}</strong>
-      <span>940m</span>
+      <span>{getFormattedDistance(distance)}</span>
     </ListItem>
   );
 };

src/components/PlaceSearch/index.tsx

@@ -1,5 +1,6 @@
-/* global kakao */
 import React, { useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
+import { GeolocationAtom } from '@/atoms/geolocation';
 import Layout from '@/components/Layout';
 import SearchHeader from '@/components/SearchHeader';
 import SearchInput from '@/components/SearchInput';
@@ -16,15 +17,30 @@ declare global {
 
 const PlaceSearch = () => {
   const [placeList, setPlaceList] = useState<IPlace[]>([]);
+  const [geolocation, setGeolocation] = useRecoilState(GeolocationAtom);
   const { value, onChangeValue } = useInput();
 
   const searchPlaceCb = (data: IPlace[], status: string) => {
     if (status === 'OK') setPlaceList(data);
   };
 
+  const getSearchOption = () => ({
+    x: geolocation.longitude,
+    y: geolocation.latitude,
+  });
+
+  useEffect(() => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(({ coords }) => {
+        const { latitude, longitude } = coords;
+        setGeolocation({ latitude, longitude });
+      });
+    }
+  }, [setGeolocation]);
+
   useEffect(() => {
     const ps = new window.kakao.maps.services.Places();
-    ps.keywordSearch(value, searchPlaceCb);
+    if (value.trim()) ps.keywordSearch(value, searchPlaceCb, getSearchOption());
   }, [value]);
 
   return (