diff --git a/src/assets/svg.js b/src/assets/svg.js index 9101a57..9a6d890 100644 --- a/src/assets/svg.js +++ b/src/assets/svg.js @@ -77,6 +77,44 @@ export const svgXml = { `, }, + marker: { + _1: ` + + + + + `, + _2: ` + + + + + `, + _3: ` + + + + +`, + _4: ` + + + + +`, + _5: ` + + + + +`, + _6: ` + + + + +`, + }, icon: { star: ` diff --git a/src/components/MapDart copy.js b/src/components/MapDart copy.js new file mode 100644 index 0000000..92ec988 --- /dev/null +++ b/src/components/MapDart copy.js @@ -0,0 +1,86 @@ +/* eslint-disable react-native/no-inline-styles */ +import React, {useState, useCallback, useEffect} from 'react'; +import {View, Text, SafeAreaView, ScrollView, StyleSheet} from 'react-native'; +import { + COLOR_WHITE, + COLOR_BACKGROUND, + COLOR_GRAY, + COLOR_PRIMARY, + COLOR_TEXT_BLACK, + COLOR_TEXT70GRAY, +} from '../assets/color'; +import AnimatedButton from './AnimationButton'; +import {useNavigation} from '@react-navigation/native'; +import MapView, {PROVIDER_GOOGLE, Marker} from 'react-native-maps'; +import {BlurView} from '@react-native-community/blur'; +import {SvgXml} from 'react-native-svg'; +import {svgXml} from '../assets/svg'; + +export default function MapDart(props) { + //TODO: 눌렀을 때 상세 페이지로 이동해야함 + const navigation = useNavigation(); + const {data, onPress} = props; + + return ( + { + onPress(data); + console.log('marker pressed', data.name); + }}> + + + + {data.name} + + + + + + {data.ratingAvg.toString()} + + + + + + + ); +} + +const styles = StyleSheet.create({ + triangle: { + width: 0, + height: 0, + borderStyle: 'solid', + borderRightWidth: 8, + borderTopWidth: 8, + borderRightColor: 'transparent', + borderTopColor: COLOR_PRIMARY, + }, + dart: { + padding: 3, + alignItems: 'center', + fontFamily: 'NanumSquareRoundR', + backgroundColor: COLOR_PRIMARY, + borderRadius: 8, + borderBottomLeftRadius: 0, + }, + dartText: { + fontSize: 12, + color: COLOR_WHITE, + maxWidth: 100, + }, +}); diff --git a/src/components/MapDart.js b/src/components/MapDart.js index 92ec988..8ae8d74 100644 --- a/src/components/MapDart.js +++ b/src/components/MapDart.js @@ -21,66 +21,48 @@ export default function MapDart(props) { const navigation = useNavigation(); const {data, onPress} = props; + const n = Math.floor(Math.random() * 6); + return ( { onPress(data); console.log('marker pressed', data.name); }}> - - - - {data.name} - + + {n === 0 ? ( + + ) : n === 1 ? ( + + ) : n === 2 ? ( + + ) : n === 3 ? ( + + ) : n === 4 ? ( + + ) : n === 5 ? ( + + ) : null} - - - - {data.ratingAvg.toString()} - - - - + + {data.name} + ); } const styles = StyleSheet.create({ - triangle: { - width: 0, - height: 0, - borderStyle: 'solid', - borderRightWidth: 8, - borderTopWidth: 8, - borderRightColor: 'transparent', - borderTopColor: COLOR_PRIMARY, - }, dart: { - padding: 3, alignItems: 'center', - fontFamily: 'NanumSquareRoundR', - backgroundColor: COLOR_PRIMARY, - borderRadius: 8, - borderBottomLeftRadius: 0, + justifyContent: 'center', }, dartText: { fontSize: 12, - color: COLOR_WHITE, - maxWidth: 100, + maxWidth: 50, + color: COLOR_TEXT_BLACK, + textAlign: 'center', }, });