From 0e6a004018d02d01ba9c6503c9a43c5ec93dc5e8 Mon Sep 17 00:00:00 2001 From: yubin Date: Wed, 24 Jul 2024 14:00:26 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Feat:=20=EC=A7=80=EB=8F=84=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=93=B1=EB=A1=9D,?= =?UTF-8?q?=20LEVEL=5FTO=5FRADIUS=20=EC=83=81=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/map.ts | 1 + src/containers/map/Map.tsx | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/constants/map.ts b/src/constants/map.ts index 67c8dee..2b72f9d 100644 --- a/src/constants/map.ts +++ b/src/constants/map.ts @@ -1,3 +1,4 @@ export const MAP_INITIAL_RADIUS = 300; // 지도 초기 반경 값(임의)) export const MAP_MAX_LEVEL = 8; // 지도 줌아웃 최대 레벨 값 export const MAP_INITIAL_LEVEL = 3; // 지도 초기 레벨 값 +export const LEVEL_TO_RADIUS = [0, 70, 150, 300, 600, 1300, 2700, 5500, 12000]; // 지도 레벨을 반경으로 매핑한 값 diff --git a/src/containers/map/Map.tsx b/src/containers/map/Map.tsx index 147c4e6..07efac1 100644 --- a/src/containers/map/Map.tsx +++ b/src/containers/map/Map.tsx @@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from 'react'; import { cn } from '@/utils/tailwind'; import { Cafe } from '@/types/map'; import { + LEVEL_TO_RADIUS, MAP_INITIAL_LEVEL, MAP_INITIAL_RADIUS, MAP_MAX_LEVEL, @@ -64,10 +65,10 @@ const Map = () => { const mapRef = useRef(null); const mapObjectRef = useRef(null); + const radiusRef = useRef(MAP_INITIAL_RADIUS); const [showInfo, setShowInfo] = useState(false); const [cafeInfo, setCafeInfo] = useState(null); - const [radius, setRadius] = useState(MAP_INITIAL_RADIUS); const { location, error } = useGeoLocation(geolocationOptions); @@ -99,8 +100,13 @@ const Map = () => { // 지도 확대/축소 이벤트 등록 window.kakao.maps.event.addListener(map, 'zoom_changed', () => { const level = map.getLevel(); - const radiusValue = [0, 70, 150, 300, 600, 1300, 2700, 5500, 12000]; - setRadius(radiusValue[level]); + radiusRef.current = LEVEL_TO_RADIUS[level]; + }); + + // 지도 이동(드래그) 이벤트 등록 + window.kakao.maps.event.addListener(map, 'dragend', () => { + const centerPoint = map.getCenter(); + console.log(centerPoint.getLat(), centerPoint.getLng()); }); // 현재 위치 마커 생성 From 4ce14aa046ed51b8800fca2e3bdfb1c6e3b51c07 Mon Sep 17 00:00:00 2001 From: yubin Date: Wed, 24 Jul 2024 14:20:33 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Feat:=20=EB=B3=B4=EB=93=9C=EA=B2=8C?= =?UTF-8?q?=EC=9E=84=20=EC=B9=B4=ED=8E=98=20=EC=B0=BE=EA=B8=B0=20Mock=20AP?= =?UTF-8?q?I=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/boardCafes/index.ts | 67 +++++++++++++++++++++++++++++++++++ src/mocks/handlers.ts | 2 ++ 2 files changed, 69 insertions(+) create mode 100644 src/mocks/boardCafes/index.ts diff --git a/src/mocks/boardCafes/index.ts b/src/mocks/boardCafes/index.ts new file mode 100644 index 0000000..6c7f416 --- /dev/null +++ b/src/mocks/boardCafes/index.ts @@ -0,0 +1,67 @@ +import { API_BASE_URL } from '@/constants/env'; +import { http, HttpResponse } from 'msw'; + +export const boardCafes = http.get( + `${API_BASE_URL}/api/boardCafes`, + ({ request }) => { + const url = new URL(request.url); + const x = url.searchParams.get('x'); + const y = url.searchParams.get('y'); + const radius = url.searchParams.get('radius'); + + if (radius === '12000') { + return HttpResponse.json( + { + status: 'success', + data: { + cafes: [ + { + address_name: '서울 종로구 내수동 73', + distance: '1867', + id: '841664157', + phone: '070-8627-1688', + place_name: '보드게임101 광화문점 24시간 무인카페', + place_url: 'http://place.map.kakao.com/841664157', + road_address_name: '서울 종로구 새문안로3길 23', + x: '126.972438244896', + y: '37.5725658604431', + }, + + { + address_name: '서울 종로구 관철동 19-11', + distance: '2613', + id: '621777615', + phone: '070-4247-4562', + place_name: '보드게임카페 주사위왕국', + place_url: 'http://place.map.kakao.com/621777615', + road_address_name: '서울 종로구 우정국로2길 42', + x: '126.985386588519', + y: '37.5694300068762', + }, + { + address_name: '서울 종로구 관철동 13-1', + distance: '2677', + id: '2055835737', + phone: '02-733-3799', + place_name: '레드버튼 종로점', + place_url: 'http://place.map.kakao.com/2055835737', + road_address_name: '서울 종로구 삼일대로19길 15', + x: '126.986720016475', + y: '37.569449085306', + }, + ], + }, + message: '보드 게임 카페 조회를 성공하였습니다.', + }, + { status: 200 }, + ); + } + + return HttpResponse.json( + { status: 'error', data: null, message: '올바른 요청이 아닙니다.' }, + { status: 404 }, + ); + }, +); + +export const boardCafeHandlers = [boardCafes]; diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index 38fa03f..969cbb7 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -1,4 +1,5 @@ import { authHandlers } from './auth'; +import { boardCafeHandlers } from './boardCafes'; import { articleHandlers } from './gatherArticles'; import { locationHandlers } from './locations'; import { radiusHandlers } from './radius'; @@ -8,4 +9,5 @@ export const handlers = [ ...articleHandlers, ...locationHandlers, ...radiusHandlers, + ...boardCafeHandlers, ]; From 33f569bcb30a5ea930918d75f6e7b78ed4982276 Mon Sep 17 00:00:00 2001 From: yubin Date: Wed, 24 Jul 2024 15:03:33 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Design:=20=ED=98=84=20=EC=A7=80=EB=8F=84?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EA=B2=80=EC=83=89=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/map/Map.tsx | 14 ++++++++++++-- src/containers/map/ReloadButton.tsx | 28 ++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 2 deletions(-) create mode 100644 src/containers/map/ReloadButton.tsx diff --git a/src/containers/map/Map.tsx b/src/containers/map/Map.tsx index 07efac1..1dcb006 100644 --- a/src/containers/map/Map.tsx +++ b/src/containers/map/Map.tsx @@ -12,6 +12,7 @@ import { MAP_MAX_LEVEL, } from '@/constants/map'; import MapInfo from './MapInfo'; +import ReloadButton from './ReloadButton'; declare global { interface Window { @@ -69,6 +70,11 @@ const Map = () => { const [showInfo, setShowInfo] = useState(false); const [cafeInfo, setCafeInfo] = useState(null); + const [showReloadButton, setShowReloadButton] = useState(false); + + const onReloadButtonClick = () => { + setShowReloadButton(false); + }; const { location, error } = useGeoLocation(geolocationOptions); @@ -99,6 +105,7 @@ const Map = () => { // 지도 확대/축소 이벤트 등록 window.kakao.maps.event.addListener(map, 'zoom_changed', () => { + setShowReloadButton(true); const level = map.getLevel(); radiusRef.current = LEVEL_TO_RADIUS[level]; }); @@ -107,6 +114,7 @@ const Map = () => { window.kakao.maps.event.addListener(map, 'dragend', () => { const centerPoint = map.getCenter(); console.log(centerPoint.getLat(), centerPoint.getLng()); + setShowReloadButton(true); }); // 현재 위치 마커 생성 @@ -143,6 +151,7 @@ const Map = () => { return function () { setShowInfo(true); setCafeInfo(cafe); + setShowReloadButton(false); }; } @@ -179,7 +188,7 @@ const Map = () => { } return ( - <> +
{ showInfo ? 'h-[calc(100vh-300px)]' : 'h-[calc(100vh-50px)]', )} /> + - +
); }; diff --git a/src/containers/map/ReloadButton.tsx b/src/containers/map/ReloadButton.tsx new file mode 100644 index 0000000..4ce68a2 --- /dev/null +++ b/src/containers/map/ReloadButton.tsx @@ -0,0 +1,28 @@ +import { Button } from '@/components/ui/button'; +import { cn } from '@/utils/tailwind'; +import { RotateCcwIcon } from 'lucide-react'; + +interface Props { + show: boolean; + onClick: () => void; +} + +const ReloadButton = ({ show, onClick }: Props) => { + return ( +
+ +
+ ); +}; + +export default ReloadButton; From 8b7b33ce984075af1507e07f301d9e2926a35a0d Mon Sep 17 00:00:00 2001 From: yubin Date: Wed, 24 Jul 2024 15:04:55 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Design:=20=ED=98=84=20=EC=A7=80=EB=8F=84?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EA=B2=80=EC=83=89=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/map/ReloadButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/map/ReloadButton.tsx b/src/containers/map/ReloadButton.tsx index 4ce68a2..f2d5959 100644 --- a/src/containers/map/ReloadButton.tsx +++ b/src/containers/map/ReloadButton.tsx @@ -11,7 +11,7 @@ const ReloadButton = ({ show, onClick }: Props) => { return (
From bacff315ef9902c819078bc767b654181f74694a Mon Sep 17 00:00:00 2001 From: yubin Date: Wed, 24 Jul 2024 17:59:56 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Feat:=20=EB=B3=B4=EB=93=9C=EA=B2=8C?= =?UTF-8?q?=EC=9E=84=20=EC=B9=B4=ED=8E=98=20=EC=B0=BE=EA=B8=B0=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(without-nav)/map/page.tsx | 4 +- src/containers/map/GeoLocation.tsx | 33 +++++ src/containers/map/Map.tsx | 182 +++++++++++++--------------- src/containers/map/MapInfo.tsx | 11 +- src/containers/map/ReloadButton.tsx | 14 ++- src/hooks/useGeoLocation.ts | 8 +- src/hooks/useMap.ts | 21 ++++ src/mocks/boardCafes/index.ts | 47 +++++++ src/services/map.ts | 15 +++ src/types/map.ts | 15 +-- 10 files changed, 224 insertions(+), 126 deletions(-) create mode 100644 src/containers/map/GeoLocation.tsx create mode 100644 src/hooks/useMap.ts create mode 100644 src/services/map.ts diff --git a/src/app/(without-nav)/map/page.tsx b/src/app/(without-nav)/map/page.tsx index 2acaba2..9b6fdb8 100644 --- a/src/app/(without-nav)/map/page.tsx +++ b/src/app/(without-nav)/map/page.tsx @@ -1,7 +1,7 @@ -import Map from '@/containers/map/Map'; +import GeoLocation from '@/containers/map/GeoLocation'; const page = () => { - return ; + return ; }; export default page; diff --git a/src/containers/map/GeoLocation.tsx b/src/containers/map/GeoLocation.tsx new file mode 100644 index 0000000..b0fc266 --- /dev/null +++ b/src/containers/map/GeoLocation.tsx @@ -0,0 +1,33 @@ +'use client'; + +import useGeoLocation from '@/hooks/useGeoLocation'; +import { LoaderCircleIcon } from 'lucide-react'; +import Map from './Map'; + +declare global { + interface Window { + kakao: any; + } +} + +const geolocationOptions = { + enableHighAccuracy: true, + timeout: 1000 * 10, + maximumAge: 1000 * 3600 * 24, +}; + +const GeoLocation = () => { + const { location, error } = useGeoLocation(geolocationOptions); + + if (!location || error) { + return ( +
+ +
+ ); + } + + return ; +}; + +export default GeoLocation; diff --git a/src/containers/map/Map.tsx b/src/containers/map/Map.tsx index 1dcb006..ae084c9 100644 --- a/src/containers/map/Map.tsx +++ b/src/containers/map/Map.tsx @@ -1,16 +1,16 @@ 'use client'; import { KAKAO_APP_KEY } from '@/constants/env'; -import useGeoLocation from '@/hooks/useGeoLocation'; import { useEffect, useRef, useState } from 'react'; import { cn } from '@/utils/tailwind'; -import { Cafe } from '@/types/map'; +import { Cafe, Location } from '@/types/map'; import { LEVEL_TO_RADIUS, MAP_INITIAL_LEVEL, MAP_INITIAL_RADIUS, MAP_MAX_LEVEL, } from '@/constants/map'; +import { useGetBoardCafes } from '@/hooks/useMap'; import MapInfo from './MapInfo'; import ReloadButton from './ReloadButton'; @@ -20,63 +20,41 @@ declare global { } } -const geolocationOptions = { - enableHighAccuracy: true, - timeout: 1000 * 10, - maximumAge: 1000 * 3600 * 24, -}; - -const Map = () => { - const cafes = [ - { - addressName: '서울 종로구 내수동 73', - distance: '1867', - id: '841664157', - phone: '070-8627-1688', - placeName: '보드게임101 광화문점 24시간 무인카페', - placeUrl: 'http://place.map.kakao.com/841664157', - roadAddressName: '서울 종로구 새문안로3길 23', - x: '126.972438244896', - y: '37.5725658604431', - }, - - { - addressName: '서울 종로구 관철동 19-11', - distance: '2613', - id: '621777615', - phone: '070-4247-4562', - placeName: '보드게임카페 주사위왕국', - placeUrl: 'http://place.map.kakao.com/621777615', - roadAddressName: '서울 종로구 우정국로2길 42', - x: '126.985386588519', - y: '37.5694300068762', - }, - { - addressName: '서울 종로구 관철동 13-1', - distance: '2677', - id: '2055835737', - phone: '02-733-3799', - placeName: '레드버튼 종로점', - placeUrl: 'http://place.map.kakao.com/2055835737', - roadAddressName: '서울 종로구 삼일대로19길 15', - x: '126.986720016475', - y: '37.569449085306', - }, - ]; - +const Map = ({ location }: { location: Location }) => { const mapRef = useRef(null); - const mapObjectRef = useRef(null); - const radiusRef = useRef(MAP_INITIAL_RADIUS); + const markersRef = useRef([]); // 마커들을 저장하는 배열 + + const [mapObject, setMapObject] = useState(null); + const [radius, setRadius] = useState(MAP_INITIAL_RADIUS); + const [center, setCenter] = useState<{ x: number; y: number }>({ + x: location.latitude, + y: location.longitude, + }); + + const { + data: cafes, + isPending, + isError, + refetch, + } = useGetBoardCafes({ + x: center.x, + y: center.y, + radius, + }); const [showInfo, setShowInfo] = useState(false); const [cafeInfo, setCafeInfo] = useState(null); const [showReloadButton, setShowReloadButton] = useState(false); const onReloadButtonClick = () => { + // 보드게임 카페 조회 요청 + refetch(); setShowReloadButton(false); - }; - const { location, error } = useGeoLocation(geolocationOptions); + if (isError) { + console.log('error'); + } + }; useEffect(() => { const script = document.createElement('script'); @@ -86,17 +64,19 @@ const Map = () => { script.onload = () => { window.kakao.maps.load(() => { + setCenter({ x: location.latitude, y: location.latitude }); + const container = mapRef.current; const options = { center: new window.kakao.maps.LatLng( - location?.latitude, - location?.longitude, + location.latitude, + location.longitude, ), level: MAP_INITIAL_LEVEL, maxLevel: MAP_MAX_LEVEL, }; const map = new window.kakao.maps.Map(container, options); - mapObjectRef.current = map; + setMapObject(map); // 지도 클릭 이벤트 등록 window.kakao.maps.event.addListener(map, 'click', () => { @@ -107,13 +87,16 @@ const Map = () => { window.kakao.maps.event.addListener(map, 'zoom_changed', () => { setShowReloadButton(true); const level = map.getLevel(); - radiusRef.current = LEVEL_TO_RADIUS[level]; + setRadius(LEVEL_TO_RADIUS[level]); }); // 지도 이동(드래그) 이벤트 등록 window.kakao.maps.event.addListener(map, 'dragend', () => { const centerPoint = map.getCenter(); - console.log(centerPoint.getLat(), centerPoint.getLng()); + setCenter({ + x: centerPoint.getLat(), + y: centerPoint.getLng(), + }); setShowReloadButton(true); }); @@ -125,8 +108,8 @@ const Map = () => { ); const currentMarkerPosition = new window.kakao.maps.LatLng( - location?.latitude, - location?.longitude, + location.latitude, + location.longitude, ); const currentMarker = new window.kakao.maps.Marker({ @@ -135,57 +118,56 @@ const Map = () => { }); currentMarker.setMap(map); - - // 주변 보드게임 카페 마커 설정 - cafes.forEach((cafe) => { - const markerPosition = new window.kakao.maps.LatLng(cafe.y, cafe.x); - - const marker = new window.kakao.maps.Marker({ - map, - position: markerPosition, - clickable: true, // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정 - }); - - // 상세 정보를 표시하는 클로저를 만드는 함수 - function makeClickListener() { - return function () { - setShowInfo(true); - setCafeInfo(cafe); - setShowReloadButton(false); - }; - } - - // 마커에 click 이벤트 등록 - // 이벤트 리스너로는 클로저를 만들어 등록합니다 - // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다 - window.kakao.maps.event.addListener( - marker, - 'click', - makeClickListener(), - ); - }); }); }; return () => { document.head.removeChild(script); }; - }, [location]); + }, [location.latitude, location.longitude]); useEffect(() => { - if (mapObjectRef.current && cafeInfo) { - mapObjectRef.current.relayout(); + if (cafes && mapObject) { + console.log('cafes useEffect'); + // 기존 마커들을 지도에서 제거 + markersRef.current.forEach((marker) => marker.setMap(null)); + markersRef.current = []; + + // 새로운 마커들을 지도에 추가 + cafes.forEach((cafe) => { + const markerPosition = new window.kakao.maps.LatLng(cafe.y, cafe.x); + + const marker = new window.kakao.maps.Marker({ + map: mapObject, + position: markerPosition, + clickable: true, // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정 + }); - const moveLatLon = new window.kakao.maps.LatLng(cafeInfo.y, cafeInfo.x); + // 상세 정보를 표시하는 클로저를 만드는 함수 + function makeClickListener() { + return function () { + setShowInfo(true); + setCafeInfo(cafe); + setShowReloadButton(false); + + const moveLatLon = new window.kakao.maps.LatLng(cafe.y, cafe.x); + mapObject.panTo(moveLatLon); // 지도 중심을 부드럽게 이동한다. + }; + } + + // 마커에 click 이벤트 등록 + // 이벤트 리스너로는 클로저를 만들어 등록합니다 + // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다 + window.kakao.maps.event.addListener( + marker, + 'click', + makeClickListener(), + ); - mapObjectRef.current.setLevel(3, { anchor: moveLatLon, animate: true }); // 지도 레벨을 3으로 설정한다. - mapObjectRef.current.panTo(moveLatLon); // 지도 중심을 부드럽게 이동한다. + markersRef.current.push(marker); // 마커를 배열에 저장 + }); } - }, [showInfo, cafeInfo]); - - if (error) { - return
위치 정보를 허용해주세요.
; - } + }, [cafes, mapObject]); return (
@@ -196,7 +178,11 @@ const Map = () => { showInfo ? 'h-[calc(100vh-300px)]' : 'h-[calc(100vh-50px)]', )} /> - +
); diff --git a/src/containers/map/MapInfo.tsx b/src/containers/map/MapInfo.tsx index 2ff7e71..690d13f 100644 --- a/src/containers/map/MapInfo.tsx +++ b/src/containers/map/MapInfo.tsx @@ -6,16 +6,17 @@ import Link from 'next/link'; const MapInfo = ({ cafe }: { cafe: Cafe | null }) => { if (cafe === null) return null; - const { phone, placeName, placeUrl, roadAddressName } = cafe; + // eslint-disable-next-line @typescript-eslint/naming-convention + const { phone, place_name, place_url, road_address_name } = cafe; return (
-

{placeName}

+

{place_name}

- {roadAddressName} + {road_address_name}
@@ -23,8 +24,8 @@ const MapInfo = ({ cafe }: { cafe: Cafe | null }) => {
- - {placeUrl} + + {place_url}
diff --git a/src/containers/map/ReloadButton.tsx b/src/containers/map/ReloadButton.tsx index f2d5959..896262b 100644 --- a/src/containers/map/ReloadButton.tsx +++ b/src/containers/map/ReloadButton.tsx @@ -1,25 +1,31 @@ import { Button } from '@/components/ui/button'; import { cn } from '@/utils/tailwind'; -import { RotateCcwIcon } from 'lucide-react'; +import { LoaderCircleIcon, RotateCcwIcon } from 'lucide-react'; interface Props { show: boolean; onClick: () => void; + isPending: boolean; } -const ReloadButton = ({ show, onClick }: Props) => { +const ReloadButton = ({ show, onClick, isPending }: Props) => { return (
); diff --git a/src/hooks/useGeoLocation.ts b/src/hooks/useGeoLocation.ts index e943473..c34d43e 100644 --- a/src/hooks/useGeoLocation.ts +++ b/src/hooks/useGeoLocation.ts @@ -1,14 +1,10 @@ 'use client'; +import { Location } from '@/types/map'; import { useEffect, useState } from 'react'; -interface ILocation { - latitude: number; - longitude: number; -} - const useGeoLocation = (options = {}) => { - const [location, setLocation] = useState(); + const [location, setLocation] = useState(); const [error, setError] = useState(''); const handleSuccess = (pos: GeolocationPosition) => { diff --git a/src/hooks/useMap.ts b/src/hooks/useMap.ts new file mode 100644 index 0000000..30dafd6 --- /dev/null +++ b/src/hooks/useMap.ts @@ -0,0 +1,21 @@ +import { getBoardCafes } from '@/services/map'; +import { Cafe } from '@/types/map'; +import { useQuery } from '@tanstack/react-query'; + +export const useGetBoardCafes = ({ + x, + y, + radius, +}: { + x: number; + y: number; + radius: number; +}) => { + return useQuery({ + queryKey: ['cafe'], + queryFn: () => getBoardCafes({ x, y, radius }), + staleTime: 0, + gcTime: 0, + retry: 0, + }); +}; diff --git a/src/mocks/boardCafes/index.ts b/src/mocks/boardCafes/index.ts index 6c7f416..4610639 100644 --- a/src/mocks/boardCafes/index.ts +++ b/src/mocks/boardCafes/index.ts @@ -57,6 +57,53 @@ export const boardCafes = http.get( ); } + if (radius === '300') { + return HttpResponse.json( + { + status: 'success', + data: { + cafes: [ + { + address_name: '서울 종로구 관철동 13-1', + distance: '2677', + id: '2055835737', + phone: '02-733-3799', + place_name: '레드버튼 종로점', + place_url: 'http://place.map.kakao.com/2055835737', + road_address_name: '서울 종로구 삼일대로19길 15', + x: '127.07840761344235', + y: '37.569449085306', + }, + { + address_name: '서울 종로구 관철동 13-1', + distance: '2677', + id: '2055835737', + phone: '02-733-3799', + place_name: '레드버튼 종로점', + place_url: 'http://place.map.kakao.com/2055835737', + road_address_name: '서울 종로구 삼일대로19길 15', + x: '127.0786123396573', + y: '37.622066776269925', + }, + { + address_name: '서울 종로구 관철동 13-1', + distance: '2677', + id: '2055835737', + phone: '02-733-3799', + place_name: '레드버튼 종로점', + place_url: 'http://place.map.kakao.com/2055835737', + road_address_name: '서울 종로구 삼일대로19길 15', + x: '127.07787884529003', + y: '37.61931024105776', + }, + ], + }, + message: '보드 게임 카페 조회를 성공하였습니다.', + }, + { status: 200 }, + ); + } + return HttpResponse.json( { status: 'error', data: null, message: '올바른 요청이 아닙니다.' }, { status: 404 }, diff --git a/src/services/map.ts b/src/services/map.ts new file mode 100644 index 0000000..3b1b50a --- /dev/null +++ b/src/services/map.ts @@ -0,0 +1,15 @@ +import api from '@/services'; + +/** 보드게임 카페 조회 API */ +export const getBoardCafes = ({ + x, + y, + radius, +}: { + x: number; + y: number; + radius: number; +}) => + api + .get(`/api/boardCafes`, { params: { x, y, radius } }) + .then((response) => response.data.data.cafes); diff --git a/src/types/map.ts b/src/types/map.ts index 5a8538b..5c340a0 100644 --- a/src/types/map.ts +++ b/src/types/map.ts @@ -1,4 +1,4 @@ -export interface CafeResponse { +export interface Cafe { address_name: string; distance: string; id: string; @@ -10,14 +10,7 @@ export interface CafeResponse { y: string; } -export interface Cafe { - addressName: string; - distance: string; - id: string; - phone: string; - placeName: string; - placeUrl: string; - roadAddressName: string; - x: string; - y: string; +export interface Location { + latitude: number; + longitude: number; }