[Map] 메인 페이지 지도 구현, 메인 페이지 지도 기능 추가

src/api/search/entity.ts → src/api/shop/entity.ts

@@ -1,3 +1,21 @@
+export interface FilterShopsParams {
+  options_friend: 0 | 1;
+  options_nearby: 0 | 1;
+  options_scrap: 0 | 1;
+  location?: Coords;
+}
+
+export interface FilterShopsResponse {
+  geometry: {
+    location: Coords;
+  };
+  name: string;
+  photo: null | string[];
+  placeId: string;
+}
+
+export type FilterShopsListResponse = FilterShopsResponse[];
+
 export interface FetchTrendingsResponse {
   trendings: string[]
 }
@@ -30,6 +48,6 @@ export interface Shop {
 }
 
 export interface Coords {
-  latitude: number,
-  longitude: number
+  lat: number | undefined;
+  lng: number | undefined;
 }

src/api/shop/index.ts

@@ -0,0 +1,19 @@
+import {
+  Coords, FetchShopsResponse, FetchTrendingsResponse, FilterShopsParams,
+  FilterShopsListResponse, ShopsParams,
+} from './entity';
+import shopApi from './shopApiClient';
+
+export const fetchTrendings = () => shopApi.get<FetchTrendingsResponse>('/trending');
+
+export const fetchShop = (shopId: string) => shopApi.get(`/shop?place_id=${shopId}`);
+
+export const fetchShops = (params: ShopsParams) => shopApi.post<FetchShopsResponse>(`/shops?keyword=${params.keyword}`, {
+  lat: params.location?.lat,
+  lng: params.location?.lng,
+});
+
+export const getfilterShops = (params: FilterShopsParams, location: Coords) => shopApi.post<FilterShopsListResponse>(`/shops/maps?options_friend=${params.options_friend}&options_nearby=${params.options_nearby}&options_scrap=${params.options_scrap}`, {
+  lat: location.lat,
+  lng: location.lng,
+});

src/api/search/searchApiClient.ts → src/api/shop/shopApiClient.ts

@@ -1,12 +1,12 @@
 import axios from 'axios';
 import { API_PATH } from 'config/constants';
 
-const searchApi = axios.create({
+const shopApi = axios.create({
   baseURL: `${API_PATH}`,
   timeout: 2000,
 });
 
-searchApi.interceptors.request.use(
+shopApi.interceptors.request.use(
   (config) => {
     const accessToken = sessionStorage.getItem('accessToken');
     // eslint-disable-next-line no-param-reassign
@@ -15,4 +15,4 @@ searchApi.interceptors.request.use(
   },
 );
 
-export default searchApi;
+export default shopApi;

src/components/common/BottomNavigation/BottomNavigation.module.scss

@@ -6,6 +6,7 @@
   left: 0;
   width: 100%;
   height: 80px;
+  background-color: #ffffff;
 }
 
 .tab {

src/components/common/BottomNavigation/index.tsx

@@ -1,30 +1,30 @@
-import { ReactComponent as HomeIcon } from 'assets/svg/common/home.svg';
-import { ReactComponent as WriteIcon } from 'assets/svg/common/write.svg';
-import { ReactComponent as MyPageIcon } from 'assets/svg/common/my-page.svg';
 import { Link, useLocation } from 'react-router-dom';
 import cn from 'utils/ts/classNames';
+import { useAuth } from 'store/auth';
 import styles from './BottomNavigation.module.scss';
-
-const NAV_TABS = [
-  {
-    pathname: '/',
-    icon: HomeIcon,
-    text: '홈',
-  },
-  {
-    pathname: '/search',
-    icon: WriteIcon,
-    text: '글쓰기',
-  },
-  {
-    pathname: '/profile',
-    icon: MyPageIcon,
-    text: '마이페이지',
-  },
-];
+import SpriteSvg from '../SpriteSvg';
 
 export default function BottomNavigation(): JSX.Element {
   const { pathname } = useLocation();
+  const auth = useAuth();
+
+  const NAV_TABS = [
+    {
+      pathname: '/',
+      icon: 'home',
+      text: '홈',
+    },
+    {
+      pathname: '/post',
+      icon: 'write',
+      text: '글쓰기',
+    },
+    {
+      pathname: auth ? '/profile' : '/login',
+      icon: 'my-page',
+      text: '마이페이지',
+    },
+  ];
 
   return (
     <nav className={styles['bottom-navigation']}>
@@ -38,7 +38,9 @@ export default function BottomNavigation(): JSX.Element {
             })}
           >
             <Link className={styles.tab__link} to={tab.pathname}>
-              <tab.icon className={styles.tab__icon} aria-hidden />
+              <div className={styles.tab__icon}>
+                <SpriteSvg id={`${tab.icon}`} />
+              </div>
               <div className={styles.tab__text}>{tab.text}</div>
             </Link>
           </li>