[Feat] 지도 움직일때마다 center 위치 수정 #32

soolsul · Nov 27, 2022 · 876b3d4 · 876b3d4
1 parent 564ab81
commit 876b3d4
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 18 deletions.
diff --git a/src/apis/bar.ts b/src/apis/bar.ts
@@ -4,8 +4,11 @@ import APIS from './network';
 
 /**
  * 로그인하기
- * @param id 유저 아이디
- * @param password 비밀번호
+ * @param latitude
+ * @param longitude
+ * @param zoomLevel
+ * @param moodTag
+ * @param drinkTag
  */
 export function getBarList(data: BarType.barSearchTyoe): Promise<{ code: string; data: any; message: string }> {
   return new Promise((resolve, reject) => {

diff --git a/src/components/pages/map/Error.tsx b/src/components/pages/map/Error.tsx
@@ -1,8 +1,8 @@
-import { Spinner } from "@components/Loader";
-import Property from "@lib/utils/Properties";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import styled from "styled-components";
+import { Spinner } from '@components/Loader';
+import Property from '@lib/utils/Properties';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import styled from 'styled-components';
 
 function Error() {
   const router = useRouter();

diff --git a/src/components/pages/map/Header.tsx b/src/components/pages/map/Header.tsx
@@ -1,12 +1,12 @@
 import Image from 'next/image';
 import styled from 'styled-components';
-import SearchBar from './SearchBar';
+// import SearchBar from './SearchBar';
 import filterImg from '../../../assets/icons/filter.svg';
 
 function Header() {
   return (
     <Wrapper>
-      <SearchBar />
+      {/* <SearchBar /> */}
       <FilterWrapper>
         <div className="filterIcon">
           <Image src={filterImg} />

diff --git a/src/components/pages/map/SearchBar.tsx b/src/components/pages/map/SearchBar.tsx
@@ -1,19 +1,26 @@
 import { Box } from '@components/common';
 import { TextInput } from '@components/Input';
 import Image from 'next/image';
+import { useRouter } from 'next/router';
 import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 import searchIcon from '../../../assets/icons/search.svg';
 
 function SearchBar() {
   const [searchValue, setSearchValue] = useState('');
+  const router = useRouter();
 
   const handleChangeSearchValue = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue(e.target.value);
   };
 
+  const handleSubmit = (e: React.FocusEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    router.push(`/map/search?value=${searchValue}`);
+  };
+
   return (
-    <Wrapper>
+    <Wrapper onSubmit={handleSubmit}>
       <LogoBox position="left">
         <Image src={searchIcon} />
       </LogoBox>

diff --git a/src/pages/map/index.tsx b/src/pages/map/index.tsx
@@ -10,7 +10,7 @@ import Property from '@lib/utils/Properties';
 
 function MapPage() {
   const [barList, setBarList] = useState<any[] | null>(null);
-  const [center, setCenter] = useState<{ lat: number; lng: number }>({ lat: 37.565314, lng: 126.992646 });
+  const [mapInfo, setMapInfo] = useState<{ lat: number; lng: number }>({ lat: 37.565314, lng: 126.992646 });
   const [myLocation, setMyLocation] = useState<GeolocationPosition | null>(Property.userInfo.location);
 
   useEffect(() => {
@@ -20,19 +20,25 @@ function MapPage() {
   }, []);
 
   useEffect(() => {
-    if (!center) return;
     (async () => {
-      const result = await apis.bar.getBarList({ latitude: 37.565214, longitude: 126.994546 });
+      const result = await apis.bar.getBarList({ latitude: 37.565314, longitude: 126.992646 });
       setBarList(result.data.barList);
     })();
-  }, [center]);
+  }, []);
 
-  if (!center || !myLocation) {
+  if (!mapInfo || !myLocation) {
     return <Error />;
   } else {
     return (
       <CommonWrapper>
-        <StyledMap center={{ ...center }}>
+        <StyledMap
+          center={{ ...mapInfo }}
+          onBoundsChanged={(map: any) => {
+            const center = map.getCenter();
+            const [lat, lng] = [center.getLat(), center.getLng()];
+            setMapInfo({ ...mapInfo, lat, lng });
+          }}
+        >
           <Header />
           {barList?.map((bar) => {
             return (
@@ -44,7 +50,12 @@ function MapPage() {
               </>
             );
           })}
-          <MapMarker position={{ ...center }} />
+          <MapMarker
+            position={{
+              lat: myLocation.coords.latitude,
+              lng: myLocation.coords.longitude,
+            }}
+          />
           <CustomOverlayMap
             position={{
               lat: myLocation.coords.latitude,
@@ -58,7 +69,7 @@ function MapPage() {
               window.navigator.geolocation.getCurrentPosition((position) => {
                 Property.setUserLocation(position);
                 setMyLocation(position);
-                setCenter({ lat: position.coords.latitude, lng: position.coords.longitude });
+                setMapInfo({ ...mapInfo, lat: position.coords.latitude, lng: position.coords.longitude });
               });
             }}
           />