fix: marker size glitch in production

src/app/(protected)/signup/new-service-spot/index.tsx

@@ -29,6 +29,7 @@ import { Alert, StyleSheet, ToastAndroid } from 'react-native'
 import { driversApi } from '@/apis/drivers'
 import { Coordinate } from '@/apis/service-spots/type'
 import { DRIVER_INFO_QUERY_KEY, useDriverInfo } from '@/hooks/useDriverInfo'
+import CustomMarkerImage from '@/components/map/CustomMarkerImage'
 
 type Params = {
   region: string
@@ -173,7 +174,9 @@ const AddAddress = () => {
             rotateEnabled={false}
             scrollEnabled={false}
           >
-            <Marker coordinate={parsedRegion} />
+            <Marker coordinate={parsedRegion}>
+              <CustomMarkerImage color="orange" />
+            </Marker>
           </MapView>
         ) : (
           <TouchableOpacity style={styles.mapCard} onPress={openMapPicker}>

src/components/JobOfferModal.tsx

@@ -6,6 +6,7 @@ import { mapUtil } from '@/utils/map'
 import Waypoint from './Waypoint'
 import { DriveRequestSession, DriveRequestSessionStatus } from '@/sockets/drive-request/type'
 import { commonUtil } from '@/utils/common'
+import CustomMarkerImage from './map/CustomMarkerImage'
 
 type Props = {
   driveRequest: DriveRequestSession | null
@@ -49,8 +50,9 @@ export default function JobOfferModal({ driveRequest, onAccepted, onRejected }:
               latitude: driveRequest.origin?.location.lat!,
               longitude: driveRequest.origin?.location.lng!,
             }}
-            image={require('../../assets/map_marker_blue.png')}
-          />
+          >
+            <CustomMarkerImage color="blue" />
+          </Marker>
           {points.length > 0 && (
             <Polyline coordinates={points} strokeWidth={3} strokeColor="#7C89FF" />
           )}
@@ -59,8 +61,9 @@ export default function JobOfferModal({ driveRequest, onAccepted, onRejected }:
               latitude: driveRequest.destination?.location.lat!,
               longitude: driveRequest.destination?.location.lng!,
             }}
-            image={require('../../assets/map_marker_red.png')}
-          />
+          >
+            <CustomMarkerImage color="red" />
+          </Marker>
         </MapView>
         <View absB absL bg-white padding-25 gap-20 style={styles.footer}>
           <View>

src/components/map/CustomMarkerImage.tsx

@@ -0,0 +1,24 @@
+import { useMemo } from 'react'
+import { Image } from 'react-native-ui-lib'
+
+type CustomMarkerColor = 'blue' | 'red' | 'orange'
+type Props = {
+  color: CustomMarkerColor
+}
+
+export default function CustomMarkerImage({ color }: Props) {
+  const colorAsset = useMemo(() => getMarkerAsset(color), [color])
+
+  return <Image style={{ width: 40, height: 40 }} resizeMode="contain" source={colorAsset} />
+}
+
+function getMarkerAsset(color: CustomMarkerColor) {
+  switch (color) {
+    case 'blue':
+      return require('../../../assets/map_marker_blue.png')
+    case 'red':
+      return require('../../../assets/map_marker_red.png')
+    case 'orange':
+      return require('../../../assets/map_marker_orange.png')
+  }
+}