Fix/dart

meokgu-skku · May 29, 2024 · 71368e5 · 71368e5
1 parent adf698f
commit 71368e5
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 42 deletions.
diff --git a/src/assets/svg.js b/src/assets/svg.js
diff --git a/src/components/MapDart copy.js 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 (
+    <Marker
+      coordinate={{latitude: data.latitude, longitude: data.longitude}}
+      anchor={{x: 0, y: 1}}
+      onPress={() => {
+        onPress(data);
+        console.log('marker pressed', data.name);
+      }}>
+      <View>
+        <View style={styles.dart}>
+          <Text style={styles.dartText} numberOfLines={1}>
+            {data.name}
+          </Text>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'center',
+            }}>
+            <SvgXml xml={svgXml.icon.star} width="15" height="15" />
+            <Text
+              style={{
+                fontSize: 12,
+                color: COLOR_WHITE,
+                fontWeight: 'bold',
+                alignSelf: 'center',
+                marginLeft: 3,
+                marginTop: -1,
+              }}>
+              {data.ratingAvg.toString()}
+            </Text>
+          </View>
+        </View>
+        <View style={styles.triangle} />
+      </View>
+    </Marker>
+  );
+}
+
+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
@@ -21,66 +21,48 @@ export default function MapDart(props) {
   const navigation = useNavigation();
   const {data, onPress} = props;
 
+  const n = Math.floor(Math.random() * 6);
+
   return (
     <Marker
       coordinate={{latitude: data.latitude, longitude: data.longitude}}
-      anchor={{x: 0, y: 1}}
+      anchor={{x: 0.5, y: 0}}
       onPress={() => {
         onPress(data);
         console.log('marker pressed', data.name);
       }}>
-      <View>
-        <View style={styles.dart}>
-          <Text style={styles.dartText} numberOfLines={1}>
-            {data.name}
-          </Text>
+      <View style={styles.dart}>
+        {n === 0 ? (
+          <SvgXml xml={svgXml.marker._1} width="20" height="20" />
+        ) : n === 1 ? (
+          <SvgXml xml={svgXml.marker._2} width="20" height="20" />
+        ) : n === 2 ? (
+          <SvgXml xml={svgXml.marker._3} width="20" height="20" />
+        ) : n === 3 ? (
+          <SvgXml xml={svgXml.marker._4} width="20" height="20" />
+        ) : n === 4 ? (
+          <SvgXml xml={svgXml.marker._5} width="20" height="20" />
+        ) : n === 5 ? (
+          <SvgXml xml={svgXml.marker._6} width="20" height="20" />
+        ) : null}
 
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'center',
-            }}>
-            <SvgXml xml={svgXml.icon.star} width="15" height="15" />
-            <Text
-              style={{
-                fontSize: 12,
-                color: COLOR_WHITE,
-                fontWeight: 'bold',
-                alignSelf: 'center',
-                marginLeft: 3,
-                marginTop: -1,
-              }}>
-              {data.ratingAvg.toString()}
-            </Text>
-          </View>
-        </View>
-        <View style={styles.triangle} />
+        <Text style={styles.dartText} numberOfLines={2}>
+          {data.name}
+        </Text>
       </View>
     </Marker>
   );
 }
 
 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',
   },
 });