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

Feat/#18 map

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
 };

ios/BOB_FrontEnd/Info.plist

@@ -46,22 +46,10 @@
 	<string/>
 	<key>UIAppFonts</key>
 	<array>
-		<string>AntDesign.ttf</string>
-		<string>Entypo.ttf</string>
-		<string>EvilIcons.ttf</string>
-		<string>Feather.ttf</string>
-		<string>FontAwesome.ttf</string>
-		<string>FontAwesome5_Brands.ttf</string>
-		<string>FontAwesome5_Regular.ttf</string>
-		<string>FontAwesome5_Solid.ttf</string>
-		<string>Fontisto.ttf</string>
-		<string>Foundation.ttf</string>
-		<string>Ionicons.ttf</string>
-		<string>MaterialCommunityIcons.ttf</string>
-		<string>MaterialIcons.ttf</string>
-		<string>Octicons.ttf</string>
-		<string>SimpleLineIcons.ttf</string>
-		<string>Zocial.ttf</string>
+		<string>Pretendard-Light.ttf</string>
+		<string>Pretendard-Medium.ttf</string>
+		<string>Pretendard-Regular.ttf</string>
+		<string>Pretendard-SemiBold.ttf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>

ios/Podfile

@@ -23,7 +23,6 @@ target 'BOB_FrontEnd' do
 
 
 
-  pod 'RNSVG', :path => '../node_modules/react-native-svg'
 
   target 'BOB_FrontEndTests' do
     inherit! :complete

ios/Podfile.lock

@@ -653,6 +653,6 @@ SPEC CHECKSUMS:
   Yoga: 99652481fcd320aefa4a7ef90095b95acd181952
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 4f1ed2707ec7ac1aef5bf2c3f1ce9f2e0a5ffdc4
+PODFILE CHECKSUM: 3347aca6995c1d9e150cc743dead7887841f27cc
 
 COCOAPODS: 1.11.3

src/components/MapReviewToggleButton.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import type {FC} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+type MapReviewToggleButtonProps = {
+  toggleReview: () => void;
+  togglePhoto: () => void;
+  isReview: boolean;
+};
+
+export const MapReviewToggleButton: FC<MapReviewToggleButtonProps> = ({
+  toggleReview,
+  togglePhoto,
+  isReview,
+}) => {
+  return (
+    <View style={[styles.ToggleWrap]}>
+      <TouchableOpacity onPress={togglePhoto}>
+        <View style={[isReview ? styles.toggleButtonWrapOff : styles.toggleButtonWrapOn]}>
+          <Text style={[isReview ? styles.toggleTextOff : styles.toggleTextOn]}>리뷰사진</Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={toggleReview}>
+        <View
+          style={[
+            isReview ? styles.toggleButtonWrapOn : styles.toggleButtonWrapOff,
+            {marginLeft: 34},
+          ]}
+        >
+          <Text style={[isReview ? styles.toggleTextOn : styles.toggleTextOff]}>리뷰 100</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  ToggleWrap: {
+    height: 50,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  toggleButtonWrapOn: {
+    height: '100%',
+    width: 76,
+    borderBottomColor: '#6C69FF',
+    borderBottomWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  toggleButtonWrapOff: {
+    height: '100%',
+    width: 76,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  toggleTextOff: {
+    fontFamily: 'Pretendard-Light',
+    fontSize: 16,
+  },
+  toggleTextOn: {
+    fontFamily: 'Pretendard-SemiBold',
+    fontSize: 16,
+  },
+});

src/components/MapStoreInfo.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import type {FC} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+export type MapStoreInfoProps = {
+  storeName: string;
+  storeCategory: string;
+  storeTime: string;
+  storeRate: number;
+  storeAddress: string;
+};
+
+export const MapStoreInfo: FC<MapStoreInfoProps> = ({
+  storeName,
+  storeCategory,
+  storeTime,
+  storeRate,
+  storeAddress,
+}) => {
+  return (
+    <View style={[styles.storeInfoWrap]}>
+      <View style={[styles.flexRow, styles.rowSeperate]}>
+        <Text style={[styles.storeName]}>{storeName}</Text>
+        <Text style={[styles.storeCategory]}>{storeCategory}</Text>
+      </View>
+      <View style={[styles.flexRow, styles.rowSeperate]}>
+        <Text style={[styles.storeTime]}>{storeTime}</Text>
+        <View style={[styles.flexRow, styles.rateMargin]}>
+          <Icon name="star" size={14} color={'#6C69FF'} />
+          <Text style={[styles.storeRate]}>{storeRate}</Text>
+        </View>
+      </View>
+      <View style={[styles.flexRow]}>
+        <Text style={[styles.storeAddress]}>{storeAddress}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  storeInfoWrap: {
+    marginBottom: 8,
+    backgroundColor: '#FFFFFF',
+    paddingLeft: 21,
+    paddingTop: 18,
+    paddingBottom: 18,
+  },
+  flexRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rowSeperate: {
+    marginBottom: 11,
+  },
+  storeName: {
+    fontFamily: 'Pretendard-SemiBold',
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#000000',
+  },
+  storeCategory: {
+    marginLeft: 8,
+    fontFamily: 'Pretendard-Light',
+    fontSize: 14,
+    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/components/MapStoreReview.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import type {FC} from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+type MapStoreReviewProps = {
+  images: {uri: string}[] | [];
+  name: string;
+  date: string;
+  rate: number;
+  review: string;
+};
+
+export const MapStoreReview: FC<MapStoreReviewProps> = ({images, name, date, rate, review}) => {
+  const renderedImage = (imagedata: {uri: string}[]) => {
+    return (
+      <View style={[styles.reviewRow3]}>
+        {imagedata.map((item) => {
+          return (
+            <View style={[styles.reviewImageWrap]}>
+              <Image source={{uri: item.uri}} style={{width: 80, height: 80}} />
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+  return (
+    <View style={[styles.reviewWrap]}>
+      <View style={[styles.reviewRow1]}>
+        <Text>{name}</Text>
+        <Text>{date}</Text>
+      </View>
+      <View style={[styles.reviewRow2]}>
+        <Icon name="star" size={18} color={'#6C69FF'} />
+        <Text style={[styles.reviewRate]}>{rate}</Text>
+      </View>
+      <View style={[styles.reviewRow3]}>
+        <Text style={[styles.reviewText]}>{review}</Text>
+      </View>
+      {renderedImage(images)}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  reviewListWrap: {
+    backgroundColor: '#FFFFFF',
+    height: '100%',
+  },
+  reviewWrap: {
+    borderBottomColor: '#EDEDED',
+    borderBottomWidth: 1,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 24,
+    paddingTop: 24,
+  },
+  reviewRow1: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  reviewRow2: {flexDirection: 'row', alignItems: 'center', marginTop: 10},
+  reviewRow3: {flexDirection: 'row', alignItems: 'center', marginTop: 8},
+  reviewImageWrap: {marginRight: 8},
+  reviewText: {
+    fontFamily: 'Pretendard-Light',
+    fontSize: 16,
+    lineHeight: 24,
+    color: '#000000',
+  },
+  reviewRate: {
+    fontFamily: 'Pretendard-Light',
+    fontSize: 16,
+    marginLeft: 4,
+  },
+});

src/components/MapStoreReviewList.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import {FlatList} from 'react-native-gesture-handler';
+import {MapStoreReview} from './MapStoreReview';
+
+const dummyReviews = [
+  {
+    name: '박성호',
+    date: '2022-06-16',
+    rate: 3,
+    images: [
+      {uri: 'https://source.unsplash.com/1024x768/?tree'},
+      {uri: 'https://source.unsplash.com/1024x768/?girl'},
+      {uri: 'https://source.unsplash.com/1024x768/?boy'},
+    ],
+    review:
+      '너무 맛있어요! 최고! 포인트도 낭낭하니 많아요~~~ 추천추천 미션밥파서블 덕분에 인생폈다',
+  },
+  {
+    name: '이아영',
+    date: '2022-06-14',
+    rate: 3,
+    images: [{uri: 'https://source.unsplash.com/1024x768/?tree'}],
+    review:
+      '너무 맛있어요! 최고! 너무 맛있어요! 최고!너무 맛있어요! 최고!너무 맛있어요! 최고!너무 맛있어요! 최고!',
+  },
+  {
+    name: '이예진',
+    date: '2022-06-13',
+    rate: 3,
+    images: [
+      {uri: 'https://source.unsplash.com/1024x768/?girl'},
+      {uri: 'https://source.unsplash.com/1024x768/?boy'},
+    ],
+    review: '너무 맛있어요! 최고!',
+  },
+  {
+    name: '박승민',
+    date: '2022-06-12',
+    rate: 3,
+    images: [],
+    review: '너무 맛있어요! 최고!',
+  },
+  {
+    name: '김진범',
+    date: '2022-06-10',
+    rate: 3,
+    images: [
+      {uri: 'https://source.unsplash.com/1024x768/?tree'},
+      {uri: 'https://source.unsplash.com/1024x768/?girl'},
+      {uri: 'https://source.unsplash.com/1024x768/?boy'},
+    ],
+    review: '너무 맛있어요! 최고!',
+  },
+];
+
+export const MapStoreReviewList = () => {
+  return (
+    <View style={[styles.reviewListWrap]}>
+      <FlatList
+        data={dummyReviews}
+        renderItem={({item}) => {
+          return (
+            <MapStoreReview
+              name={item.name}
+              date={item.date}
+              rate={item.rate}
+              review={item.review}
+              images={item.images}
+            />
+          );
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  reviewListWrap: {
+    backgroundColor: '#FFFFFF',
+    flex: 1,
+  },
+});