-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Feat/#63 보드게임 카페 찾기 기능 구현
Showing
12 changed files
with
333 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
import Map from '@/containers/map/Map'; | ||
import GeoLocation from '@/containers/map/GeoLocation'; | ||
|
||
const page = () => { | ||
return <Map />; | ||
return <GeoLocation />; | ||
}; | ||
|
||
export default page; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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]; // 지도 레벨을 반경으로 매핑한 값 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<div className="flex justify-center items-center h-[calc(100vh-50px)] text-primary"> | ||
<LoaderCircleIcon className="animate-spin size-9" /> | ||
</div> | ||
); | ||
} | ||
|
||
return <Map location={location} />; | ||
}; | ||
|
||
export default GeoLocation; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<div | ||
className={cn( | ||
'absolute top-4 left-1/2 -ml-[68px] z-10 transition-all', | ||
show || isPending ? 'visible' : 'hidden', | ||
)} | ||
> | ||
<Button | ||
className="border border-gray-300 text-primary font-bold bg-white rounded-3xl px-3 py-0 text-sm shadow-md" | ||
onClick={onClick} | ||
> | ||
{isPending ? ( | ||
<LoaderCircleIcon className="animate-spin size-4 mr-1" /> | ||
) : ( | ||
<RotateCcwIcon className="size-4 mr-1" /> | ||
)} | ||
현 지도에서 검색 | ||
</Button> | ||
</div> | ||
); | ||
}; | ||
|
||
export default ReloadButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<Cafe[]>({ | ||
queryKey: ['cafe'], | ||
queryFn: () => getBoardCafes({ x, y, radius }), | ||
staleTime: 0, | ||
gcTime: 0, | ||
retry: 0, | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters