-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* refactor: 음식점 API 타입 지정 (#134) Co-authored-by: Minjae Kim <[email protected]> Co-authored-by: 황준승 <[email protected]> * fix: Map 컴포넌트 위경도 뒤바뀜 오류 수정 (#134) * refactor: 음식점 카드 컴포넌트 API명세에 맞게 수정 (#134) * refactor: 불필요한 export 제거 (#134) Co-authored-by: Minjae Kim <[email protected]> Co-authored-by: 황준승 <[email protected]> * refactor: handler 타입 지정 (#134) Co-authored-by: Minjae Kim <[email protected]> Co-authored-by: 황준승 <[email protected]> * feat: 메인페이지 UI구현 (#134) Co-authored-by: Minjae Kim <[email protected]> Co-authored-by: 황준승 <[email protected]> * style: 위경도 타입 파일로 분리 (#134) Co-authored-by: Minjae Kim <[email protected]> Co-authored-by: 황준승 <[email protected]> * feat: 음식점 카드 클릭시 메인좌표 이동 기능 구현 (#134) Co-authored-by: Minjae Kim <[email protected]> Co-authored-by: 황준승 <[email protected]> * design: footer 문구 수정 (#138) Co-authored-by: Minjae Kim <[email protected]> Co-authored-by: 황준승 <[email protected]> * feat: 음식점 클릭시 마커 구분 (#134) * refactor: 메인페이지 scroll 개선 및 footer 추가 (#134) * feat: 맵 모달 구현 (#134) * refactor: MainPage 파일 제거 * refactor: MainPage 파일 복구 (#134) * feat: 데이터 생성 (#134) * refactor: search bar 파일 제거 (#134) * feat: 음식점 카드 클릭시 기능 구현 (#134) * feat: 지도 모달 안의 컨텐츠 구성 (#134) * refactor: 메인페이지 디자인 수정 및 음식점 개수 동기화 (#134) * design: 모달 내 폰트사이즈 수정 (#134) * refactor: 지도 2중 생성 오류 처리 및 훅 분리 (#134) 지도 생성 로직 분리 * feat: 지도 마커 클릭시 음식점 정보 확인 기능 구현 (#134) * refactor: 불필요한 코드 삭제 (#134) * fix: 이미지 import 오류 해결 (#134) * fix: lint 오류 해결 (#134) * refactor: 카카오 지도 코드 제거 (#151) * chore: 구글 지도 환경 설정 (#151) react-wrapper 라이브러리 설치 * feat: 구글 지도 기본 화면 구현 (#151) * feat: property명 구글 api에 맞게 수정 (#151) latitude -> lat, longitude-> lng * feat: 지도에 레스토랑 마커 구현 (#151) * feat: 레스토랑 카드 클릭 시 해당 좌표로 지도 이동 (#151) * feat: 마커 클릭 시 해당 좌표로 지도 이동 및 모달 슬라이드업 구현 (#151) * feat: 지도 언어 한국어로 설정 (#151) * feat: 지도 컴포넌트 스토리북 구현 (#151) * fix: 변수명 오류 수정 (#151) * feat: 전제조회 비동기 구현 (#151) * fix: lint error 수정 (#151) --------- Co-authored-by: Minjae Kim <[email protected]> Co-authored-by: 황준승 <[email protected]>
- Loading branch information
1 parent
c500324
commit f330973
Showing
17 changed files
with
181 additions
and
5,598 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
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
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,4 +1,4 @@ | ||
| export interface Coordinate { | ||
| longitude: number; | ||
| latitude: number; | ||
| lng: number; | ||
| lat: number; | ||
| } |
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,4 +1,4 @@ | ||
| import type { RestaurantData } from './api.types'; | ||
|
|
||
| export type Restaurant = Omit<RestaurantData, 'celebs'>; | ||
| export type RestaurantModalInfo = Omit<Restaurant, 'latitude' | 'longitude'>; | ||
| export type RestaurantModalInfo = Omit<Restaurant, 'lat' | 'lng'>; |
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,12 @@ | ||
| import { Wrapper } from '@googlemaps/react-wrapper'; | ||
| import MainPage from './pages/MainPage'; | ||
|
|
||
| function App() { | ||
| return <MainPage />; | ||
| return ( | ||
| <Wrapper apiKey={process.env.GOOGLE_MAP_API_KEY} language="ko"> | ||
| <MainPage /> | ||
| </Wrapper> | ||
| ); | ||
| } | ||
|
|
||
| export default App; |
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 |
|---|---|---|
| @@ -1,77 +1,29 @@ | ||
| /* eslint-disable react-hooks/exhaustive-deps */ | ||
| /* eslint-disable no-new */ | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
|
|
||
| import { useEffect, useRef, useState } from 'react'; | ||
| import { useRef } from 'react'; | ||
| import { styled } from 'styled-components'; | ||
| import { RestaurantData } from '~/@types/api.types'; | ||
| import useDrawMap from './hooks/useDrawMap'; | ||
| import useMarker from './hooks/useMarker'; | ||
| import { Coordinate } from '~/@types/map.types'; | ||
| import useCreateMap from './hooks/useCreateMap'; | ||
|
|
||
| interface MapProps { | ||
| width: string; | ||
| height: string; | ||
| level: number; | ||
| mainPosition: Coordinate; | ||
| markers: Coordinate[]; | ||
| markerClickEvent: (position: Coordinate) => void; | ||
| center: google.maps.LatLngLiteral; | ||
| zoom: number; | ||
| size: { width: string; height: string }; | ||
| restaurants: RestaurantData[]; | ||
| clickMarker: ({ lat, lng }: Coordinate) => void; | ||
| } | ||
|
|
||
| function Map({ width, height, level, mainPosition, markers, markerClickEvent }: MapProps) { | ||
| const container = useRef(); | ||
| const { kakaoMap } = useCreateMap({ mainPosition, level, container }); | ||
| const { latitude, longitude } = mainPosition; | ||
| const [currentMarker, setCurrentMarker] = useState(null); | ||
|
|
||
| const kakaoMakers = markers.map(marker => { | ||
| const position = new window.kakao.maps.LatLng(marker.latitude, marker.longitude); | ||
| const imageSize = new window.kakao.maps.Size(24, 35); | ||
| const imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png'; | ||
| const markerImage = new window.kakao.maps.MarkerImage(imageSrc, imageSize); | ||
|
|
||
| return new window.kakao.maps.Marker({ | ||
| map: kakaoMap, | ||
| position, | ||
| image: markerImage, | ||
| }); | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (!kakaoMap) return; | ||
|
|
||
| kakaoMakers.forEach(marker => { | ||
| const markerLatitude = Number(marker.getPosition().getLat().toFixed(7)); | ||
| const markerLongitude = Number(marker.getPosition().getLng().toFixed(7)); | ||
|
|
||
| marker.setMap(kakaoMap); | ||
| marker.setZIndex(1); | ||
|
|
||
| window.kakao.maps.event.addListener(marker, 'click', () => { | ||
| markerClickEvent({ latitude: markerLatitude, longitude: markerLongitude }); | ||
| }); | ||
| }); | ||
| }, [kakaoMap]); | ||
| function Map({ center, zoom, size, restaurants, clickMarker }: MapProps) { | ||
| const googleMapRef = useRef(); | ||
| const { googleMap } = useDrawMap({ mapRef: googleMapRef, center, zoom }); | ||
| useMarker({ map: googleMap, restaurants, clickMarker }); | ||
|
|
||
| useEffect(() => { | ||
| if (!kakaoMap) return; | ||
| if (currentMarker) currentMarker.setMap(null); | ||
| // 이동할 위도 경도 위치를 생성합니다 | ||
| const position = new window.kakao.maps.LatLng(latitude, longitude); | ||
|
|
||
| // 지도 중심을 이동 시킵니다 | ||
| kakaoMap.setCenter(position); | ||
|
|
||
| // 마커를 생성합니다 | ||
| const newMarker = new window.kakao.maps.Marker({ | ||
| map: kakaoMap, | ||
| position, | ||
| }); | ||
|
|
||
| newMarker.setMap(kakaoMap); | ||
| newMarker.setZIndex(2); | ||
|
|
||
| setCurrentMarker(newMarker); | ||
| }, [mainPosition]); | ||
|
|
||
| return <div ref={container} style={{ width, height }} />; | ||
| return <StyledMap ref={googleMapRef} size={size} id="map" />; | ||
| } | ||
|
|
||
| export default Map; | ||
|
|
||
| const StyledMap = styled.div<{ size: { width: string; height: string } }>` | ||
| width: ${({ size }) => size.width}; | ||
| height: ${({ size }) => size.height}; | ||
| `; |
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,29 @@ | ||
| /* eslint-disable react-hooks/exhaustive-deps */ | ||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| interface UseDrawMapProps { | ||
| mapRef: React.MutableRefObject<HTMLDivElement>; | ||
| center: google.maps.LatLngLiteral; | ||
| zoom: number; | ||
| } | ||
|
|
||
| const useDrawMap = ({ mapRef, center, zoom }: UseDrawMapProps) => { | ||
| const [googleMap, setGoogleMap] = useState<google.maps.Map>(null); | ||
|
|
||
| // center를 중심으로 지도 그리기 로직 | ||
| useEffect(() => { | ||
| const newMap = new window.google.maps.Map(mapRef.current, { center, zoom }); | ||
|
|
||
| setGoogleMap(newMap); | ||
| }, [mapRef]); | ||
|
|
||
| useEffect(() => { | ||
| if (!googleMap) return; | ||
|
|
||
| googleMap.panTo(center); | ||
| }, [center]); | ||
|
|
||
| return { googleMap }; | ||
| }; | ||
|
|
||
| export default useDrawMap; |
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,39 @@ | ||
| /* eslint-disable react-hooks/exhaustive-deps */ | ||
| import { useEffect, useState } from 'react'; | ||
| import { RestaurantData } from '~/@types/api.types'; | ||
| import { Coordinate } from '~/@types/map.types'; | ||
|
|
||
| interface UseMarkerProps { | ||
| map: google.maps.Map; | ||
| restaurants: RestaurantData[]; | ||
| clickMarker: ({ lat, lng }: Coordinate) => void; | ||
| } | ||
|
|
||
| const useMarker = ({ map, restaurants, clickMarker }: UseMarkerProps) => { | ||
| const [markers, setMarkers] = useState([]); | ||
| // 마커를 지도에 표시하는 로직 | ||
| useEffect(() => { | ||
| if (!map) return; | ||
|
|
||
| const newMarkers = restaurants.map(restaurant => { | ||
| const { lat, lng } = restaurant; | ||
| const newMarker = new window.google.maps.Marker({ | ||
| position: { lat, lng }, | ||
| map, | ||
| }); | ||
| newMarker.setMap(map); | ||
|
|
||
| newMarker.addListener('click', () => { | ||
| clickMarker({ lat, lng }); | ||
| }); | ||
|
|
||
| return newMarker; | ||
| }); | ||
|
|
||
| setMarkers(newMarkers); | ||
| }, [map, restaurants]); | ||
|
|
||
| return { markers }; | ||
| }; | ||
|
|
||
| export default useMarker; |
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
Oops, something went wrong.