-
{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
new file mode 100644
index 0000000..896262b
--- /dev/null
+++ b/src/containers/map/ReloadButton.tsx
@@ -0,0 +1,34 @@
+import { Button } from '@/components/ui/button';
+import { cn } from '@/utils/tailwind';
+import { LoaderCircleIcon, RotateCcwIcon } from 'lucide-react';
+
+interface Props {
+ show: boolean;
+ onClick: () => void;
+ isPending: boolean;
+}
+
+const ReloadButton = ({ show, onClick, isPending }: Props) => {
+ return (
+
+
+
+ );
+};
+
+export default ReloadButton;
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
new file mode 100644
index 0000000..4610639
--- /dev/null
+++ b/src/mocks/boardCafes/index.ts
@@ -0,0 +1,114 @@
+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 },
+ );
+ }
+
+ 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 },
+ );
+ },
+);
+
+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,
];
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;
}