Merge pull request #35 from BOBpossible/feat/#18_Map

Feat/#18 map

react-native.config.js

@@ -1,10 +1,10 @@
 module.exports = {
   assets: ['./src/assets/fonts'],
-  dependencies: {
-    'react-native-vector-icons': {
-      platforms: {
-        ios: null,
-      },
-    },
-  },
+  // dependencies: {
+  //   'react-native-vector-icons': {
+  //     platforms: {
+  //       ios: null,
+  //     },
+  //   },
+  // },
 };

src/components/MapStoreBottomSheet.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import type {FC} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import FastImage from 'react-native-fast-image';
+
+export type MapStoreBottomSheetProps = {
+  storeName: string;
+  storeCategory: string;
+  point: number;
+  distance: number;
+  image: {uri: string};
+};
+
+const convertDistance = (distance: number) => {
+  if (distance >= 1000) {
+    return `${distance / 1000}km`;
+  } else {
+    return `${distance}m`;
+  }
+};
+
+export const MapStoreBottomSheet: FC<MapStoreBottomSheetProps> = ({
+  storeName,
+  storeCategory,
+  point,
+  distance,
+  image,
+}) => {
+  return (
+    <View>
+      <FastImage source={image} style={{height: 220}} />
+      <View style={[styles.storeInfoWrap]}>
+        <View style={[styles.flexRow, {justifyContent: 'space-between', marginBottom: 8}]}>
+          <View
+            style={{
+              backgroundColor: '#6C69FF',
+              paddingHorizontal: 6,
+              paddingVertical: 4,
+              borderRadius: 10,
+            }}
+          >
+            <Text style={[styles.storePoint]}>{point} P</Text>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              position: 'absolute',
+              top: 3,
+              right: 3,
+            }}
+          >
+            <Text style={[styles.storeInfo]}>가게정보</Text>
+            <Icon name="chevron-right" size={22} />
+          </View>
+        </View>
+        <View style={[styles.flexRow, {marginBottom: 4}]}>
+          <Text style={[styles.storeName]}>{storeName}</Text>
+          <Text style={[styles.storeDistance]}>{convertDistance(distance)}</Text>
+        </View>
+        <View style={[styles.flexRow]}>
+          <Text style={[styles.storeCategory]}>{storeCategory}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  storeInfoWrap: {
+    marginBottom: 8,
+    backgroundColor: '#FFFFFF',
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 12,
+    paddingBottom: 12,
+  },
+  flexRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rowSeperate: {
+    marginBottom: 11,
+  },
+  storeName: {
+    fontFamily: 'Pretendard-SemiBold',
+    fontSize: 16,
+    lineHeight: 16,
+    fontWeight: '600',
+    color: '#000000',
+  },
+  storeCategory: {
+    fontFamily: 'Pretendard-Light',
+    fontSize: 14,
+    fontWeight: '300',
+    color: '#7D7D7D',
+  },
+  storePoint: {
+    fontFamily: 'Pretendard-SemiBold',
+    fontSize: 12,
+    color: '#FFFFFF',
+  },
+  storeInfo: {
+    fontFamily: 'Pretendard-Light',
+    fontSize: 14,
+    lineHeight: 22,
+    color: '#616161',
+  },
+  storeDistance: {
+    marginLeft: 8,
+    fontFamily: 'Pretendard-Light',
+    fontSize: 16,
+    fontWeight: '300',
+    color: '#7D7D7D',
+  },
+  storeTime: {
+    fontFamily: 'Pretendard-Light',
+    fontSize: 14,
+    fontWeight: '300',
+    color: '#F33F3F',
+  },
+  storeRate: {
+    fontFamily: 'Pretendard-Light',
+    fontSize: 14,
+    fontWeight: '300',
+    color: '#000000',
+    marginLeft: 4,
+  },
+  storeAddress: {fontFamily: 'Pretendard-Light', fontSize: 14, fontWeight: '300', color: '#7D7D7D'},
+  rateMargin: {marginLeft: 8},
+});

src/modal/MapWebview.tsx

@@ -1,15 +1,25 @@
 import React, {useState} from 'react';
 import {StyleSheet, View, ActivityIndicator} from 'react-native';
 import WebView, {WebViewMessageEvent} from 'react-native-webview';
+import StoreModal from './StoreModal';
 
 export const MapWebview = () => {
   const [isLoadingMap, setIsLoadingMap] = useState(true);
-  const onClickPin = (event: WebViewMessageEvent) => {
-    console.log(event.nativeEvent.data);
+  const [storeId, setStoreId] = useState(0);
+  const [storeModal, setStoreModal] = useState(false);
+  const onClickPin = async (event: WebViewMessageEvent) => {
+    await setStoreId(parseInt(event.nativeEvent.data, 10));
+    setStoreModal(true);
+    //console.log(event.nativeEvent.data);
   };
 
   return (
     <View style={[styles.webviewWrap]}>
+      <StoreModal
+        storeId={storeId}
+        visible={storeModal}
+        closeStoreModal={() => setStoreModal(false)}
+      />
       <WebView
         source={{uri: 'https://bobplace.netlify.app/'}}
         onMessage={(event) => {

src/nav/MainNavigator.tsx

@@ -14,7 +14,7 @@ import {MapNavigator} from './MapNavigator';
 type TabBarIconProps = {focused: boolean; color: string; size: number};
 
 const icons: Record<string, string[]> = {
-  Main: ['home', 'home-outline'],
+  HomeNavigator: ['home', 'home-outline'],
   Mission: ['food', 'food-outline'],
   MapNavigator: ['map-search', 'map-search-outline'],
   MyNavigator: ['account-settings', 'account-settings-outline'],
@@ -42,7 +42,7 @@ const Tab = createBottomTabNavigator();
 export const MainNavigator = () => {
   return (
     <Tab.Navigator screenOptions={screenOptions} initialRouteName="Main">
-      <Tab.Screen name="Main" component={HomeNavigator} options={{tabBarLabel: '홈'}} />
+      <Tab.Screen name="HomeNavigator" component={HomeNavigator} options={{tabBarLabel: '홈'}} />
       <Tab.Screen name="Mission" component={Mission} options={{tabBarLabel: '미션'}} />
       <Tab.Screen name="MapNavigator" component={MapNavigator} options={{tabBarLabel: '검색'}} />
       <Tab.Screen

src/screens/Map.tsx

@@ -1,42 +1,38 @@
 import React, {useEffect, useState} from 'react';
-import {
-  View,
-  StyleSheet,
-  Text,
-  Dimensions,
-  TouchableOpacity,
-  ActivityIndicator,
-} from 'react-native';
+import {View, StyleSheet, Text, Dimensions, TouchableOpacity} from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import BottomSheet, {BottomSheetFlatList, BottomSheetView} from '@gorhom/bottom-sheet';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import AddressSearchModal from '../modal/AddressSearchModal';
 import StoreModal from '../modal/StoreModal';
-import {WebView} from 'react-native-webview';
 import {MapWebview} from '../modal/MapWebview';
+import {MapStoreBottomSheet} from '../components/MapStoreBottomSheet';
 import {DesignSystem} from '../assets/DesignSystem';
 
 const dummyMission = [
   {
+    storeId: 0,
     name: '반이학생마라탕',
+    distance: 1000,
     category: '중식당',
-    day: 7,
-    minCost: 10000,
     point: 500,
+    image: {uri: 'https://source.unsplash.com/1024x768/?food'},
   },
   {
+    storeId: 0,
     name: '반이학생마라탕',
+    distance: 1000,
     category: '중식당',
-    day: 7,
-    minCost: 10000,
     point: 500,
+    image: {uri: 'https://source.unsplash.com/1024x768/?food'},
   },
   {
+    storeId: 0,
     name: '반이학생마라탕',
+    distance: 1000,
     category: '중식당',
-    day: 7,
-    minCost: 10000,
     point: 500,
+    image: {uri: 'https://source.unsplash.com/1024x768/?food'},
   },
 ];
 
@@ -78,11 +74,17 @@ const Map = () => {
           showsVerticalScrollIndicator={false}
           data={dummyMission}
           renderItem={({item, index}) => (
-            <TouchableOpacity onPress={() => openRestaurantModal(1)} key={index}>
-              <View style={{width: '100%', height: 300, backgroundColor: 'lightgrey'}}></View>
+            <TouchableOpacity onPress={() => openRestaurantModal(item.storeId)} key={index}>
+              <MapStoreBottomSheet
+                storeName={item.name}
+                storeCategory={item.category}
+                point={item.point}
+                distance={item.distance}
+                image={item.image}
+              />
             </TouchableOpacity>
           )}
-          ItemSeparatorComponent={() => <View style={{margin: 16}} />}
+          ItemSeparatorComponent={() => <View style={{marginTop: 4}} />}
         />
       </BottomSheet>
     </SafeAreaView>