Merge pull request soolsul#24 from soolsul/feature/nick/23

[Feat]: barList 조회 기능 구현
soonki-98 · Nov 21, 2022 · 2c443cb · 2c443cb
2 parents 2692cbe + 3a7d0eb
commit 2c443cb
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 22 deletions.
diff --git a/src/apis/bar.ts b/src/apis/bar.ts
@@ -0,0 +1,21 @@
+import { BarType } from '@lib/types';
+import { AxiosResponse } from 'axios';
+import APIS from './network';
+
+/**
+ * 로그인하기
+ * @param id 유저 아이디
+ * @param password 비밀번호
+ */
+export function getBarList(data: BarType.barSearchTyoe): Promise<{ code: string; data: any; message: string }> {
+  return new Promise((resolve, reject) => {
+    try {
+      (async () => {
+        const result: AxiosResponse<{ code: string; data: any; message: string }> = await APIS.bar.getBarList(data);
+        resolve(result.data);
+      })();
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -1,7 +1,9 @@
-import * as user from "./users";
+import * as user from './users';
+import * as bar from './bar';
 
 const apis = {
   user,
+  bar,
 };
 
 export default apis;
diff --git a/src/apis/network.ts b/src/apis/network.ts
@@ -1,7 +1,8 @@
-import axios, { AxiosInstance } from "axios";
-import { getToken } from "@lib/utils";
-import { InterceptorCallbackType } from "./type";
-import { LoginType } from "@lib/types/user";
+import axios, { AxiosInstance } from 'axios';
+import { getToken } from '@lib/utils';
+import { InterceptorCallbackType } from './type';
+import { LoginType } from '@lib/types/user';
+import { BarType } from '@lib/types';
 
 /**
  * REST API 관련 클래스
@@ -16,7 +17,7 @@ export class Network {
     this._instance = axios.create({
       baseURL,
       headers: {
-        "x-auth-token": this._token,
+        'x-auth-token': this._token,
       },
     });
   }
@@ -26,10 +27,17 @@ export class Network {
    */
   user = {
     login: async ({ id, password }: LoginType) => {
-      return this._instance.post("/login", { id, password });
+      return this._instance.post('/login', { id, password });
     },
   };
 
+  bar = {
+    getBarList: async ({ latitude, longitude, zoomLevel = 6, moodTag = '', drinkTag = '' }: BarType.barSearchTyoe) => {
+      return this._instance.get(
+        `/api/bars?latitude=${latitude}&longitude=${longitude}&level=${zoomLevel}&barMoodTagNames=${moodTag}&barAlcoholTagNames=${drinkTag}`
+      );
+    },
+  };
   /**
    * axios 인터셉터
    */
@@ -66,6 +74,9 @@ export class Network {
       return this._instance;
     }
   }
+  get instance() {
+    return this._instance;
+  }
 }
 /**
  * REST API 인스턴스

diff --git a/src/lib/types/bar.ts b/src/lib/types/bar.ts
@@ -0,0 +1,7 @@
+export interface barSearchTyoe {
+  latitude: number;
+  longitude: number;
+  zoomLevel?: number;
+  moodTag?: string;
+  drinkTag?: string;
+}
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
@@ -1,2 +1,3 @@
-export * as UserType from "./user";
-export * as CategoryType from "./Category";
+export * as UserType from './user';
+export * as CategoryType from './Category';
+export * as BarType from './bar';
diff --git a/src/pages/map/index.tsx b/src/pages/map/index.tsx
@@ -1,14 +1,16 @@
-import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
-import { Map, MapMarker } from "react-kakao-maps-sdk";
-import styled from "styled-components";
+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, SearchBar } from "@components/pages/map";
-import Property from "@lib/utils/Properties";
+import { BottomMenu } from '@components/common';
+import { CommonWrapper } from '@components/common/commonStyle';
+import { AddFeedButton, Error, SearchBar } from '@components/pages/map';
+import Property from '@lib/utils/Properties';
+import apis from '@apis/index';
 
 function MapPage() {
+  const [barList, setBarList] = useState<any[] | null>(null);
   const [location, setLocation] = useState<GeolocationPosition | null>(Property.userInfo.location);
 
   useEffect(() => {
@@ -17,29 +19,55 @@ function MapPage() {
     });
   }, []);
 
+  useEffect(() => {
+    if (!location) return;
+    (async () => {
+      const result = await apis.bar.getBarList({ latitude: 37.565214, longitude: 126.994546 });
+      setBarList(result.data.barList);
+    })();
+  }, [location]);
+
   if (!location) {
     return <Error />;
   } else {
     return (
       <CommonWrapper>
         <StyledMap
           center={{
-            lat: location.coords.latitude,
-            lng: location.coords.longitude,
+            lat: 37.565314,
+            lng: 126.992646,
+            // lat: location.coords.latitude,
+            // lng: location.coords.longitude,
           }}
         >
-          <span style={{ position: "fixed", top: "0", zIndex: "999", color: "#000" }}>
+          <span style={{ position: 'fixed', top: '0', zIndex: '999', color: '#000' }}>
             {location.coords.latitude} {location.coords.longitude}
           </span>
           <SearchBar />
+          {barList?.map((bar) => {
+            return (
+              <>
+                <MapMarker position={{ lat: bar.latitude as number, lng: bar.longitude as number }} />
+                <CustomOverlayMap position={{ lat: bar.latitude as number, lng: bar.longitude as number }}>
+                  <BarName>{bar.barName}</BarName>
+                </CustomOverlayMap>
+              </>
+            );
+          })}
           <MapMarker
             position={{
               lat: location.coords.latitude,
               lng: location.coords.longitude,
             }}
+          />
+          <CustomOverlayMap
+            position={{
+              lat: location.coords.latitude,
+              lng: location.coords.longitude,
+            }}
           >
-            <div style={{ color: "#000" }}>현위치</div>
-          </MapMarker>
+            <BarName>현위치</BarName>
+          </CustomOverlayMap>
           <AddFeedButton />
           <BottomMenu />
         </StyledMap>
@@ -54,3 +82,15 @@ const StyledMap = styled(Map)`
   height: 100%;
   width: 100%;
 `;
+
+const BarName = styled.div`
+  position: relative;
+  top: 20px;
+  display: flex;
+  justify-content: center;
+  padding: 3px 16px;
+  color: #000;
+  border: 1px solid #6c50cf;
+  border-radius: 16px;
+  background-color: #fff;
+`;