feat: 사용자가 예약 기능을 아직 안 써본 경우 온보딩 힌트 표시

inu-appcenter · Oct 3, 2021 · 362d974 · 362d974
1 parent 8ef71fb
commit 362d974
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 7 deletions.
diff --git a/src/presentation/features/booking/History/NoBookingsView.tsx b/src/presentation/features/booking/History/NoBookingsView.tsx
@@ -21,18 +21,70 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import React from 'react';
 import colors from '../../../res/colors';
 import palette from '../../../res/palette';
-import {Text, View} from 'react-native';
+import {Button} from 'react-native-paper';
+import CardView from '../../../components/CardView';
+import useStores from '../../../hooks/useStores';
+import {StyleSheet, Text, View} from 'react-native';
 
 export default function NoBookingsView() {
+  const {bookingStore} = useStores();
+
+  const onboardingHint = (
+    <CardView style={styles.hintContainer}>
+      <Text style={styles.hintTitle}>새로운 예약 기능에 대해 알려 드릴까요?</Text>
+      <Button
+        mode="contained"
+        style={styles.hintButton}
+        color={colors.textSecondary}
+        onPress={() => bookingStore.showOnboardingOnce()}>
+        알아보기
+      </Button>
+    </CardView>
+  );
+
   return (
     <View style={[palette.centeringContainer, palette.whiteBackground]}>
-      <View style={{...palette.centeringContainer, margin: 21, paddingBottom: 128}}>
+      <View style={styles.emptyViewContainer}>
         <Icon name="ticket-confirmation" size={112} color={colors.textTertiary} />
-        <Text style={{...palette.textSubHeader, marginTop: 24}}>😉 예약 내역을 여기에서 볼 수 있어요</Text>
-        <Text style={{...palette.textSecondary, textAlign: 'center', marginTop: 16}}>
-          오른쪽 아래 버튼을 눌러서 새로운 예약을 만들어보세요 :)
-        </Text>
+        <Text style={styles.emptyViewTitle}>😉 예약 내역을 여기에서 볼 수 있어요</Text>
+        <Text style={styles.emptyViewBody}>오른쪽 아래 버튼을 눌러서 새로운 예약을 만들어보세요 :)</Text>
+
+        {!bookingStore.usedToBookingFeature && onboardingHint}
       </View>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  emptyViewContainer: {
+    ...palette.centeringContainer,
+    margin: 21,
+    paddingBottom: 128,
+  },
+  emptyViewTitle: {
+    ...palette.textSubHeader,
+    marginTop: 24,
+  },
+  emptyViewBody: {
+    ...palette.textSecondary,
+    textAlign: 'center',
+    marginTop: 16,
+  },
+
+  hintContainer: {
+    position: 'absolute',
+    padding: 16,
+    bottom: 64,
+    left: 0,
+    right: 0,
+  },
+  hintTitle: {
+    ...palette.textSecondary,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  hintButton: {
+    marginTop: 16,
+    alignSelf: 'center',
+  },
+});
diff --git a/src/presentation/features/booking/History/index.tsx b/src/presentation/features/booking/History/index.tsx
@@ -20,8 +20,8 @@
 import {FAB} from 'react-native-paper';
 import useApi from '../../../hooks/useApi';
 import palette from '../../../res/palette';
-import {observer} from 'mobx-react';
 import useStores from '../../../hooks/useStores';
+import {observer} from 'mobx-react';
 import BookingItem from './BookingItem';
 import handleApiError from '../../../../common/utils/handleApiError';
 import NoBookingsView from './NoBookingsView';