From 876b3d485bfe99093cb4aae980bcfff5fbfe2256 Mon Sep 17 00:00:00 2001
From: soonki-98 <alstnsrl98@gmail.com>
Date: Sun, 27 Nov 2022 16:24:40 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=A7=80=EB=8F=84=20=EC=9B=80?=
 =?UTF-8?q?=EC=A7=81=EC=9D=BC=EB=95=8C=EB=A7=88=EB=8B=A4=20center=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95=20#32?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/bar.ts                        |  7 +++++--
 src/components/pages/map/Error.tsx     | 10 +++++-----
 src/components/pages/map/Header.tsx    |  4 ++--
 src/components/pages/map/SearchBar.tsx |  9 ++++++++-
 src/pages/map/index.tsx                | 27 ++++++++++++++++++--------
 5 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/apis/bar.ts b/src/apis/bar.ts
index 7d73616..0d117c5 100644
--- 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
index c6aa96e..370d829 100644
--- 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
index f152616..9f37968 100644
--- 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
index d49ef65..4a51ff4 100644
--- 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
index 69c8d60..d6361ad 100644
--- 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 });
               });
             }}
           />