diff --git a/src/components/common/BottomMenu.tsx b/src/components/common/BottomMenu.tsx index 36381a0..b554f10 100644 --- a/src/components/common/BottomMenu.tsx +++ b/src/components/common/BottomMenu.tsx @@ -1,8 +1,8 @@ -import { CategoryType } from "@lib/types"; -import dynamic from "next/dynamic"; -import React from "react"; -import styled from "styled-components"; -import Category from "../pages/map/Category"; +import { CategoryType } from '@lib/types'; +import dynamic from 'next/dynamic'; +import React from 'react'; +import styled from 'styled-components'; +import Category from '../pages/map/Category'; function BottomMenu() { return ( diff --git a/src/components/pages/map/index.ts b/src/components/pages/map/index.ts index 56b6b77..d59e590 100644 --- a/src/components/pages/map/index.ts +++ b/src/components/pages/map/index.ts @@ -1,5 +1,5 @@ export { default as SearchBar } from './SearchBar'; export { default as Error } from './Error'; export { default as Category } from './Category'; -export { default as AddFeedButton } from './AddFeedButton'; +export { default as CurrentLocationButton } from './CurrentLocationButton'; export { default as Header } from './Header'; diff --git a/src/pages/map/index.tsx b/src/pages/map/index.tsx index b551cae..69c8d60 100644 --- a/src/pages/map/index.tsx +++ b/src/pages/map/index.tsx @@ -2,44 +2,37 @@ import dynamic from 'next/dynamic'; import { useEffect, useState } from 'react'; import { CustomOverlayMap, Map, MapMarker } from 'react-kakao-maps-sdk'; import styled from 'styled-components'; - import { BottomMenu } from '@components/common'; import { CommonWrapper } from '@components/common/commonStyle'; -import { AddFeedButton, Error, Header } from '@components/pages/map'; -import Property from '@lib/utils/Properties'; +import { CurrentLocationButton, Error, Header } from '@components/pages/map'; import apis from '@apis/index'; +import Property from '@lib/utils/Properties'; function MapPage() { const [barList, setBarList] = useState(null); - const [location, setLocation] = useState(Property.userInfo.location); + const [center, setCenter] = useState<{ lat: number; lng: number }>({ lat: 37.565314, lng: 126.992646 }); + const [myLocation, setMyLocation] = useState(Property.userInfo.location); useEffect(() => { window.navigator.geolocation.watchPosition((position) => { - setLocation(position); + setMyLocation(position); }); }, []); useEffect(() => { - if (!location) return; + if (!center) return; (async () => { const result = await apis.bar.getBarList({ latitude: 37.565214, longitude: 126.994546 }); setBarList(result.data.barList); })(); - }, [location]); + }, [center]); - if (!location) { + if (!center || !myLocation) { return ; } else { return ( - +
{barList?.map((bar) => { return ( @@ -51,21 +44,24 @@ function MapPage() { ); })} - + ν˜„μœ„μΉ˜ - + { + window.navigator.geolocation.getCurrentPosition((position) => { + Property.setUserLocation(position); + setMyLocation(position); + setCenter({ lat: position.coords.latitude, lng: position.coords.longitude }); + }); + }} + />