From 2c70cd762d4d24c42f1121997d759b3fbdf262f0 Mon Sep 17 00:00:00 2001 From: yungblud Date: Wed, 18 Dec 2024 10:42:39 +0900 Subject: [PATCH 1/8] feat(billets-app): :art: modified designs --- .../concert-list-item/concert-list-item.tsx | 45 ++++++++++++------- .../concert/ui/concert-list/concert-list.tsx | 2 +- .../concert-subscribe-button.tsx | 23 +++++++--- apps/billets-app/src/ui/tab-bar/tab-bar.tsx | 2 +- 4 files changed, 50 insertions(+), 22 deletions(-) diff --git a/apps/billets-app/src/features/concert/ui/concert-list-item/concert-list-item.tsx b/apps/billets-app/src/features/concert/ui/concert-list-item/concert-list-item.tsx index 6cc819ef..70b266f5 100644 --- a/apps/billets-app/src/features/concert/ui/concert-list-item/concert-list-item.tsx +++ b/apps/billets-app/src/features/concert/ui/concert-list-item/concert-list-item.tsx @@ -46,6 +46,7 @@ export const ConcertListItem = ({ styles.concertListItem, { width: size === 'small' ? 140 : '100%', + padding: size === 'small' ? 0 : 12, }, ]} > @@ -54,7 +55,8 @@ export const ConcertListItem = ({ style={[ styles.concertThumbnail, { - height: size === 'small' ? 120 : 250, + borderBottomLeftRadius: size === 'small' ? 0 : 8, + borderBottomRightRadius: size === 'small' ? 0 : 8, }, ]} > @@ -64,14 +66,24 @@ export const ConcertListItem = ({ )} - + @@ -83,6 +95,7 @@ export const ConcertListItem = ({ styles.concertFormattedDate, { fontSize: size === 'small' ? 12 : 14, + marginTop: size === 'small' ? 4 : 8, }, ]} > @@ -110,24 +123,27 @@ export const ConcertListItem = ({ const styles = StyleSheet.create({ concertListItem: { width: '100%', - backgroundColor: palettes.white, - marginBottom: 12, + backgroundColor: 'transparent', + marginBottom: 16, borderRadius: 8, borderWidth: 1.5, - borderColor: colors.oc.black.value, + borderColor: colors.oc.cyan[8].value, }, concertThumbnail: { width: '100%', - height: 250, + aspectRatio: 1 / 1, backgroundColor: colors.oc.white.value, - borderTopLeftRadius: 8, - borderTopRightRadius: 8, - borderBottomColor: colors.oc.black.value, - borderBottomWidth: 1.5, + borderRadius: 8, + }, + concertTitle: { fontWeight: 'bold', color: colors.oc.black.value }, + concertFormattedDate: { + fontSize: 14, + color: colors.oc.cyan['9'].value, + }, + concertVenue: { + color: colors.oc.gray[7].value, + fontSize: 14, }, - concertTitle: { fontWeight: 'bold', fontSize: 18, color: colors.oc.black.value }, - concertFormattedDate: { marginTop: 8, fontSize: 14, color: colors.oc.black.value }, - concertVenue: { marginTop: 8, color: colors.oc.black.value, fontSize: 14 }, concertListContentContainer: { paddingHorizontal: 12, marginTop: 12, @@ -149,7 +165,6 @@ const styles = StyleSheet.create({ bottom: { flexDirection: 'row', alignItems: 'center', - padding: 12, }, subscribeBtnWrapper: { position: 'absolute', right: 12, bottom: 12 }, }) diff --git a/apps/billets-app/src/features/concert/ui/concert-list/concert-list.tsx b/apps/billets-app/src/features/concert/ui/concert-list/concert-list.tsx index f21f64c5..b4f1fc05 100644 --- a/apps/billets-app/src/features/concert/ui/concert-list/concert-list.tsx +++ b/apps/billets-app/src/features/concert/ui/concert-list/concert-list.tsx @@ -104,7 +104,7 @@ export const ConcertList = forwardRef(({ onPressItem const styles = StyleSheet.create({ concertListContentContainer: { - paddingHorizontal: 12, + paddingHorizontal: 16, marginTop: 12, paddingBottom: 24, flexGrow: 1, diff --git a/apps/billets-app/src/features/subscribe/ui/concert-subscribe-button/concert-subscribe-button.tsx b/apps/billets-app/src/features/subscribe/ui/concert-subscribe-button/concert-subscribe-button.tsx index f87308c6..c7f57c09 100644 --- a/apps/billets-app/src/features/subscribe/ui/concert-subscribe-button/concert-subscribe-button.tsx +++ b/apps/billets-app/src/features/subscribe/ui/concert-subscribe-button/concert-subscribe-button.tsx @@ -1,5 +1,6 @@ -import { Button } from '@coldsurfers/ocean-road/native' -import { StyleProp, ViewStyle } from 'react-native' +import { colors } from '@coldsurfers/ocean-road' +import { IconButton } from '@coldsurfers/ocean-road/native' +import { StyleProp, StyleSheet, ViewStyle } from 'react-native' export const ConcertSubscribeButton = ({ onPress, @@ -11,8 +12,20 @@ export const ConcertSubscribeButton = ({ style?: StyleProp }) => { return ( - + ) } + +const styles = StyleSheet.create({ + bgColor: { + backgroundColor: colors.oc.gray[4].value, + }, +}) diff --git a/apps/billets-app/src/ui/tab-bar/tab-bar.tsx b/apps/billets-app/src/ui/tab-bar/tab-bar.tsx index aa88d321..d16527fb 100644 --- a/apps/billets-app/src/ui/tab-bar/tab-bar.tsx +++ b/apps/billets-app/src/ui/tab-bar/tab-bar.tsx @@ -107,7 +107,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', paddingTop: 10, - backgroundColor: '#6F8EA3', + backgroundColor: colors.oc.cyan[8].value, }, tabBarButton: { flex: 1, From 6edbb0e95f388b33b278720f2ab6bdcc09c6dbac Mon Sep 17 00:00:00 2001 From: yungblud Date: Wed, 18 Dec 2024 10:42:48 +0900 Subject: [PATCH 2/8] refactor(billets-app): :sparkles: useCallback --- .../src/screens/home-screen/home-screen.tsx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/apps/billets-app/src/screens/home-screen/home-screen.tsx b/apps/billets-app/src/screens/home-screen/home-screen.tsx index da28117b..59b30cdb 100644 --- a/apps/billets-app/src/screens/home-screen/home-screen.tsx +++ b/apps/billets-app/src/screens/home-screen/home-screen.tsx @@ -1,4 +1,5 @@ import { CurrentLocationTracker, LocationSelector, LocationSelectorModal, useToggleSubscribeConcert } from '@/features' +import { ConcertListItemT } from '@/features/concert/ui/concert-list/concert-list.types' import { AnimatePresence } from '@/ui' import { useScrollToTop } from '@react-navigation/native' import { useCallback, useRef, useState } from 'react' @@ -56,6 +57,20 @@ export const HomeScreen = () => { useScrollToTop(listRef) + const onPressSubscribe = useCallback( + ( + item: ConcertListItemT, + options: { + isSubscribed: boolean + }, + ) => + onPressSubscribeConcertListItem({ + isSubscribed: options.isSubscribed, + concertId: item.id, + }), + [onPressSubscribeConcertListItem], + ) + return ( {latitude === null && longitude === null && } @@ -63,12 +78,7 @@ export const HomeScreen = () => { onPressConcertListItem(item.id)} - onPressSubscribe={(item, { isSubscribed }) => - onPressSubscribeConcertListItem({ - isSubscribed, - concertId: item.id, - }) - } + onPressSubscribe={onPressSubscribe} /> {locationModalVisible && ( From f3913c606b1e2f772dcec877d3a2d5f65a8ac9de Mon Sep 17 00:00:00 2001 From: yungblud Date: Wed, 18 Dec 2024 10:43:02 +0900 Subject: [PATCH 3/8] feat(ocean-road): :art: modified icon button, text --- .../ocean-road/src/native/icon-button/icon-button.tsx | 10 +++++++++- .../src/native/icon-button/icon-button.types.ts | 5 ++++- packages/ocean-road/src/native/text/text.tsx | 7 +++++-- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/ocean-road/src/native/icon-button/icon-button.tsx b/packages/ocean-road/src/native/icon-button/icon-button.tsx index c69881de..607f0d9e 100644 --- a/packages/ocean-road/src/native/icon-button/icon-button.tsx +++ b/packages/ocean-road/src/native/icon-button/icon-button.tsx @@ -10,6 +10,9 @@ export const IconButton = ({ theme = 'transparent', size = 'md', style, + color, + strokeWidth, + fill, ...otherProps }: IconButtonProps) => { const TargetIcon = Icons[icon] @@ -19,7 +22,12 @@ export const IconButton = ({ style={[getIconButtonSizeStyles(size), getIconButtonBackgroundStyles(theme), style]} onPress={onPress} > - + ) } diff --git a/packages/ocean-road/src/native/icon-button/icon-button.types.ts b/packages/ocean-road/src/native/icon-button/icon-button.types.ts index 3ac5b9d2..551acb60 100644 --- a/packages/ocean-road/src/native/icon-button/icon-button.types.ts +++ b/packages/ocean-road/src/native/icon-button/icon-button.types.ts @@ -1,11 +1,14 @@ import { icons } from 'lucide-react-native' -import { TouchableOpacityProps } from 'react-native' +import { ColorValue, TouchableOpacityProps } from 'react-native' import { ButtonTheme } from '../../button' export interface IconButtonProps extends TouchableOpacityProps { icon: keyof typeof icons size?: IconButtonSize theme?: ButtonTheme + color?: ColorValue + strokeWidth?: number + fill?: ColorValue } export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' diff --git a/packages/ocean-road/src/native/text/text.tsx b/packages/ocean-road/src/native/text/text.tsx index 5ca45bc1..9177cbc5 100644 --- a/packages/ocean-road/src/native/text/text.tsx +++ b/packages/ocean-road/src/native/text/text.tsx @@ -11,9 +11,12 @@ export const Text = ({ children, weight = 'regular', style, ...others }: TextPro bold: styles.bold, } const flattenedStyles = StyleSheet.flatten(style) - const lineHeight = (flattenedStyles?.fontSize ?? 0) * 1.5 + const lineHeight = (flattenedStyles?.fontSize ?? 0) * 1.25 return ( - + {children} ) From f7cca5c8cc0fea010805fea4daa36def5eef1070 Mon Sep 17 00:00:00 2001 From: yungblud Date: Wed, 18 Dec 2024 10:43:48 +0900 Subject: [PATCH 4/8] feat(billets-app): :package: v1.6.1 --- apps/billets-app/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/billets-app/package.json b/apps/billets-app/package.json index d035c45b..0093ff33 100644 --- a/apps/billets-app/package.json +++ b/apps/billets-app/package.json @@ -1,6 +1,6 @@ { "name": "@coldsurfers/billets-app", - "version": "1.6.0", + "version": "1.6.1", "private": true, "scripts": { "android": "react-native run-android", From 9b00d2448293429fb2000095d67212910a8292a5 Mon Sep 17 00:00:00 2001 From: yungblud Date: Thu, 19 Dec 2024 10:18:45 +0900 Subject: [PATCH 5/8] refactor(billets-app): :sparkles: added @/types path config --- apps/billets-app/babel.config.js | 1 + apps/billets-app/tsconfig.json | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/billets-app/babel.config.js b/apps/billets-app/babel.config.js index c02c4bbb..8ef9a79e 100644 --- a/apps/billets-app/babel.config.js +++ b/apps/billets-app/babel.config.js @@ -14,6 +14,7 @@ module.exports = { '@/lib': './src/lib', '@/ui': './src/ui', '@/features': './src/features', + '@/types': './src/types', }, }, ], diff --git a/apps/billets-app/tsconfig.json b/apps/billets-app/tsconfig.json index fdf8c112..7de5c37e 100644 --- a/apps/billets-app/tsconfig.json +++ b/apps/billets-app/tsconfig.json @@ -17,7 +17,9 @@ "@/ui": ["./src/ui"], "@/ui/*": ["./src/ui/*"], "@/features": ["./src/features"], - "@/features/*": ["./src/features/*"] + "@/features/*": ["./src/features/*"], + "@/types": ["./src/types"], + "@/types/*": ["./src/types/*"] } } } From e98adc8c4a04635d203a3d91ae0109ac07f8debf Mon Sep 17 00:00:00 2001 From: yungblud Date: Thu, 19 Dec 2024 10:19:07 +0900 Subject: [PATCH 6/8] refactor(billets-app): :sparkles: modified locations of current user location store --- .../concert/ui/concert-list/concert-list.tsx | 2 +- .../current-location-tracker.tsx | 2 +- apps/billets-app/src/features/location/index.ts | 1 + .../src/features/location/stores/index.ts | 1 + .../stores/user-current-location-store/index.ts | 2 ++ .../user-curent-location-store.ts} | 15 ++------------- .../user-current-location-store.types.ts | 12 ++++++++++++ .../location-selector-modal.tsx | 2 +- .../map/ui/concert-map-view/concert-map-view.tsx | 2 +- .../src/lib/storage/current-location-storage.ts | 2 +- .../src/screens/home-screen/home-screen.tsx | 9 +++++++-- .../location-selection-screen.tsx | 2 +- .../src/screens/search-screen/search-screen.tsx | 3 +-- .../common-back-icon-button.tsx | 2 +- 14 files changed, 33 insertions(+), 24 deletions(-) create mode 100644 apps/billets-app/src/features/location/stores/index.ts create mode 100644 apps/billets-app/src/features/location/stores/user-current-location-store/index.ts rename apps/billets-app/src/{lib/stores/userCurrentLocationStore.ts => features/location/stores/user-current-location-store/user-curent-location-store.ts} (53%) create mode 100644 apps/billets-app/src/features/location/stores/user-current-location-store/user-current-location-store.types.ts diff --git a/apps/billets-app/src/features/concert/ui/concert-list/concert-list.tsx b/apps/billets-app/src/features/concert/ui/concert-list/concert-list.tsx index b4f1fc05..f156bd8b 100644 --- a/apps/billets-app/src/features/concert/ui/concert-list/concert-list.tsx +++ b/apps/billets-app/src/features/concert/ui/concert-list/concert-list.tsx @@ -1,5 +1,5 @@ +import { useUserCurrentLocationStore } from '@/features/location/stores' import useConcertListQuery from '@/lib/react-query/queries/useConcertListQuery' -import { useUserCurrentLocationStore } from '@/lib/stores/userCurrentLocationStore' import { CommonListEmpty } from '@/ui' import { format } from 'date-fns' import { forwardRef, useCallback, useMemo, useState } from 'react' diff --git a/apps/billets-app/src/features/location/current-location-tracker/current-location-tracker.tsx b/apps/billets-app/src/features/location/current-location-tracker/current-location-tracker.tsx index 2bf9245c..7a114743 100644 --- a/apps/billets-app/src/features/location/current-location-tracker/current-location-tracker.tsx +++ b/apps/billets-app/src/features/location/current-location-tracker/current-location-tracker.tsx @@ -2,7 +2,7 @@ import { permissionsUtils } from '@/features/permissions/permissions.utils' import { useCallback, useEffect } from 'react' import { AppState } from 'react-native' import geolocationUtils from '../../../lib/geolocationUtils' -import { useUserCurrentLocationStore } from '../../../lib/stores/userCurrentLocationStore' +import { useUserCurrentLocationStore } from '../stores' export const CurrentLocationTracker = () => { const setUserCurrentLocation = useUserCurrentLocationStore((state) => state.setUserCurrentLocation) diff --git a/apps/billets-app/src/features/location/index.ts b/apps/billets-app/src/features/location/index.ts index 03cb3607..d1d31d6d 100644 --- a/apps/billets-app/src/features/location/index.ts +++ b/apps/billets-app/src/features/location/index.ts @@ -1,2 +1,3 @@ export * from './current-location-tracker' +export * from './stores' export * from './ui' diff --git a/apps/billets-app/src/features/location/stores/index.ts b/apps/billets-app/src/features/location/stores/index.ts new file mode 100644 index 00000000..ab97769c --- /dev/null +++ b/apps/billets-app/src/features/location/stores/index.ts @@ -0,0 +1 @@ +export * from './user-current-location-store' diff --git a/apps/billets-app/src/features/location/stores/user-current-location-store/index.ts b/apps/billets-app/src/features/location/stores/user-current-location-store/index.ts new file mode 100644 index 00000000..07779067 --- /dev/null +++ b/apps/billets-app/src/features/location/stores/user-current-location-store/index.ts @@ -0,0 +1,2 @@ +export * from './user-curent-location-store' +export * from './user-current-location-store.types' diff --git a/apps/billets-app/src/lib/stores/userCurrentLocationStore.ts b/apps/billets-app/src/features/location/stores/user-current-location-store/user-curent-location-store.ts similarity index 53% rename from apps/billets-app/src/lib/stores/userCurrentLocationStore.ts rename to apps/billets-app/src/features/location/stores/user-current-location-store/user-curent-location-store.ts index 3b803741..45460a93 100644 --- a/apps/billets-app/src/lib/stores/userCurrentLocationStore.ts +++ b/apps/billets-app/src/features/location/stores/user-current-location-store/user-curent-location-store.ts @@ -1,18 +1,7 @@ +import { currentLocationStorage } from '@/lib/storage' import { create } from 'zustand' import { persist } from 'zustand/middleware' -import { LatLng } from '../../types/LatLng' -import { currentLocationStorage } from '../storage/current-location-storage' - -export interface UserCurrentLocationStoreState { - latitude: number | null - longitude: number | null -} - -export interface UserCurrentLocationStoreAction { - setUserCurrentLocation: (payload: LatLng) => void -} - -export type UserCurrentLocationStore = UserCurrentLocationStoreState & UserCurrentLocationStoreAction +import { UserCurrentLocationStore } from './user-current-location-store.types' export const useUserCurrentLocationStore = create()( persist( diff --git a/apps/billets-app/src/features/location/stores/user-current-location-store/user-current-location-store.types.ts b/apps/billets-app/src/features/location/stores/user-current-location-store/user-current-location-store.types.ts new file mode 100644 index 00000000..99334ddf --- /dev/null +++ b/apps/billets-app/src/features/location/stores/user-current-location-store/user-current-location-store.types.ts @@ -0,0 +1,12 @@ +import { LatLng } from '@/types/LatLng' + +export interface UserCurrentLocationStoreState { + latitude: number | null + longitude: number | null +} + +export interface UserCurrentLocationStoreAction { + setUserCurrentLocation: (payload: LatLng) => void +} + +export type UserCurrentLocationStore = UserCurrentLocationStoreState & UserCurrentLocationStoreAction diff --git a/apps/billets-app/src/features/location/ui/location-selector-modal/location-selector-modal.tsx b/apps/billets-app/src/features/location/ui/location-selector-modal/location-selector-modal.tsx index 1f30a9e6..34ac386c 100644 --- a/apps/billets-app/src/features/location/ui/location-selector-modal/location-selector-modal.tsx +++ b/apps/billets-app/src/features/location/ui/location-selector-modal/location-selector-modal.tsx @@ -4,8 +4,8 @@ import { StyleSheet, View } from 'react-native' import commonStyles from '../../../../lib/common-styles' import geolocationUtils from '../../../../lib/geolocationUtils' import palettes from '../../../../lib/palettes' -import { useUserCurrentLocationStore } from '../../../../lib/stores/userCurrentLocationStore' import { useHomeScreenNavigation } from '../../../../screens/home-screen/home-screen.hooks' +import { useUserCurrentLocationStore } from '../../stores' export const LocationSelectorModal = ({ visible, diff --git a/apps/billets-app/src/features/map/ui/concert-map-view/concert-map-view.tsx b/apps/billets-app/src/features/map/ui/concert-map-view/concert-map-view.tsx index 1f573d60..48c893db 100644 --- a/apps/billets-app/src/features/map/ui/concert-map-view/concert-map-view.tsx +++ b/apps/billets-app/src/features/map/ui/concert-map-view/concert-map-view.tsx @@ -1,4 +1,4 @@ -import { useUserCurrentLocationStore } from '@/lib/stores/userCurrentLocationStore' +import { useUserCurrentLocationStore } from '@/features/location' import { memo, useCallback, useEffect, useMemo } from 'react' import { StyleSheet } from 'react-native' import MapView, { Camera, Region } from 'react-native-maps' diff --git a/apps/billets-app/src/lib/storage/current-location-storage.ts b/apps/billets-app/src/lib/storage/current-location-storage.ts index 83b9d66c..77e1dc97 100644 --- a/apps/billets-app/src/lib/storage/current-location-storage.ts +++ b/apps/billets-app/src/lib/storage/current-location-storage.ts @@ -1,5 +1,5 @@ +import { UserCurrentLocationStore } from '@/features/location/stores' import { PersistStorage } from 'zustand/middleware' -import { UserCurrentLocationStore } from '../stores/userCurrentLocationStore' import { mmkvKeys } from './constants' import { mmkvInstance } from './mmkvInstance' diff --git a/apps/billets-app/src/screens/home-screen/home-screen.tsx b/apps/billets-app/src/screens/home-screen/home-screen.tsx index 59b30cdb..74312866 100644 --- a/apps/billets-app/src/screens/home-screen/home-screen.tsx +++ b/apps/billets-app/src/screens/home-screen/home-screen.tsx @@ -1,4 +1,10 @@ -import { CurrentLocationTracker, LocationSelector, LocationSelectorModal, useToggleSubscribeConcert } from '@/features' +import { + CurrentLocationTracker, + LocationSelector, + LocationSelectorModal, + useToggleSubscribeConcert, + useUserCurrentLocationStore, +} from '@/features' import { ConcertListItemT } from '@/features/concert/ui/concert-list/concert-list.types' import { AnimatePresence } from '@/ui' import { useScrollToTop } from '@react-navigation/native' @@ -9,7 +15,6 @@ import { useShallow } from 'zustand/shallow' import { ConcertList } from '../../features/concert' import palettes from '../../lib/palettes' import useGetMeQuery from '../../lib/react-query/queries/useGetMeQuery' -import { useUserCurrentLocationStore } from '../../lib/stores/userCurrentLocationStore' import { useHomeScreenNavigation } from './home-screen.hooks' export const HomeScreen = () => { diff --git a/apps/billets-app/src/screens/location-selection-screen/location-selection-screen.tsx b/apps/billets-app/src/screens/location-selection-screen/location-selection-screen.tsx index c82909cd..a8884ca9 100644 --- a/apps/billets-app/src/screens/location-selection-screen/location-selection-screen.tsx +++ b/apps/billets-app/src/screens/location-selection-screen/location-selection-screen.tsx @@ -1,9 +1,9 @@ +import { useUserCurrentLocationStore } from '@/features/location/stores' import { Text, TextInput } from '@coldsurfers/ocean-road/native' import { useCallback, useMemo, useState } from 'react' import { SectionList, SectionListData, StyleSheet, TouchableOpacity, View } from 'react-native' import { SafeAreaView } from 'react-native-safe-area-context' import palettes from '../../lib/palettes' -import { useUserCurrentLocationStore } from '../../lib/stores/userCurrentLocationStore' import { LatLng } from '../../types/LatLng' import { useLocationSelectionScreenNavigation } from './location-selection-screen.hooks' diff --git a/apps/billets-app/src/screens/search-screen/search-screen.tsx b/apps/billets-app/src/screens/search-screen/search-screen.tsx index 1c532e3b..1c088953 100644 --- a/apps/billets-app/src/screens/search-screen/search-screen.tsx +++ b/apps/billets-app/src/screens/search-screen/search-screen.tsx @@ -1,4 +1,4 @@ -import { ConcertMapView, mapPointSchema } from '@/features' +import { ConcertMapView, mapPointSchema, useUserCurrentLocationStore } from '@/features' import { getViewMode, SearchStoreLocationConcert, SearchStoreSnapIndex, useSearchStore } from '@/features/search/store' import { FULLY_EXPANDED_SNAP_INDEX } from '@/features/search/store/search-store.constants' import { SearchBottomList } from '@/features/search/ui' @@ -14,7 +14,6 @@ import { Keyboard, KeyboardAvoidingView, KeyboardAvoidingViewProps, Platform, St import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated' import { z } from 'zod' import { useShallow } from 'zustand/shallow' -import { useUserCurrentLocationStore } from '../../lib/stores/userCurrentLocationStore' const AnimatedButton = Animated.createAnimatedComponent(Button) diff --git a/apps/billets-app/src/ui/common-back-icon-button/common-back-icon-button.tsx b/apps/billets-app/src/ui/common-back-icon-button/common-back-icon-button.tsx index 01756eb6..32f673ba 100644 --- a/apps/billets-app/src/ui/common-back-icon-button/common-back-icon-button.tsx +++ b/apps/billets-app/src/ui/common-back-icon-button/common-back-icon-button.tsx @@ -6,7 +6,7 @@ const BASE_TOP = 40 export const CommonBackIconButton = ({ onPress, top }: { onPress?: () => void; top?: number }) => { return ( Date: Thu, 19 Dec 2024 10:29:58 +0900 Subject: [PATCH 7/8] feat(billets-app): :zap: simplified bottom tab bar hide feature --- .../features/search/store/search-store.utils.ts | 2 +- apps/billets-app/src/lib/stores/index.ts | 1 + apps/billets-app/src/lib/stores/ui-store/index.ts | 1 + .../src/lib/stores/ui-store/ui-store.ts | 13 +++++++++++++ .../src/screens/search-screen/search-screen.tsx | 15 +++++++++++++-- apps/billets-app/src/ui/tab-bar/tab-bar.tsx | 15 ++++++++++++--- 6 files changed, 41 insertions(+), 6 deletions(-) create mode 100644 apps/billets-app/src/lib/stores/index.ts create mode 100644 apps/billets-app/src/lib/stores/ui-store/index.ts create mode 100644 apps/billets-app/src/lib/stores/ui-store/ui-store.ts diff --git a/apps/billets-app/src/features/search/store/search-store.utils.ts b/apps/billets-app/src/features/search/store/search-store.utils.ts index 55972ba6..523996c2 100644 --- a/apps/billets-app/src/features/search/store/search-store.utils.ts +++ b/apps/billets-app/src/features/search/store/search-store.utils.ts @@ -10,7 +10,7 @@ export const getSearchFilterUIValue = (filter: SearchStoreLocationFilterType) => } export const getViewMode = (snapIndex: SearchStoreSnapIndex) => { - if (snapIndex === FULLY_EXPANDED_SNAP_INDEX) { + if (snapIndex >= FULLY_EXPANDED_SNAP_INDEX) { return 'list' } return 'map' diff --git a/apps/billets-app/src/lib/stores/index.ts b/apps/billets-app/src/lib/stores/index.ts new file mode 100644 index 00000000..21ccff79 --- /dev/null +++ b/apps/billets-app/src/lib/stores/index.ts @@ -0,0 +1 @@ +export * from './ui-store' diff --git a/apps/billets-app/src/lib/stores/ui-store/index.ts b/apps/billets-app/src/lib/stores/ui-store/index.ts new file mode 100644 index 00000000..21ccff79 --- /dev/null +++ b/apps/billets-app/src/lib/stores/ui-store/index.ts @@ -0,0 +1 @@ +export * from './ui-store' diff --git a/apps/billets-app/src/lib/stores/ui-store/ui-store.ts b/apps/billets-app/src/lib/stores/ui-store/ui-store.ts new file mode 100644 index 00000000..4d37ea15 --- /dev/null +++ b/apps/billets-app/src/lib/stores/ui-store/ui-store.ts @@ -0,0 +1,13 @@ +import { create } from 'zustand' + +export type UIStore = { + bottomTabBarVisible: boolean + showBottomTabBar: () => void + hideBottomTabBar: () => void +} + +export const useUIStore = create((set) => ({ + bottomTabBarVisible: true, + showBottomTabBar: () => set({ bottomTabBarVisible: true }), + hideBottomTabBar: () => set({ bottomTabBarVisible: false }), +})) diff --git a/apps/billets-app/src/screens/search-screen/search-screen.tsx b/apps/billets-app/src/screens/search-screen/search-screen.tsx index 1c088953..dedf9b89 100644 --- a/apps/billets-app/src/screens/search-screen/search-screen.tsx +++ b/apps/billets-app/src/screens/search-screen/search-screen.tsx @@ -3,6 +3,7 @@ import { getViewMode, SearchStoreLocationConcert, SearchStoreSnapIndex, useSearc import { FULLY_EXPANDED_SNAP_INDEX } from '@/features/search/store/search-store.constants' import { SearchBottomList } from '@/features/search/ui' import commonStyles from '@/lib/common-styles' +import { useUIStore } from '@/lib/stores' import { CommonScreenLayout, NAVIGATION_HEADER_HEIGHT } from '@/ui' import { colors } from '@coldsurfers/ocean-road' import { Button, Text } from '@coldsurfers/ocean-road/native' @@ -62,6 +63,13 @@ export const SearchScreen = () => { })), ) + const { hideBottomTabBar, showBottomTabBar } = useUIStore( + useShallow((state) => ({ + hideBottomTabBar: state.hideBottomTabBar, + showBottomTabBar: state.showBottomTabBar, + })), + ) + const [pointsLength, setPointsLength] = useState(0) const debouncedSearchKeyword = useDebounce(searchKeyword, 350) @@ -108,7 +116,8 @@ export const SearchScreen = () => { setSnapIndex(0) setSelectedLocationFilter('map-location') setViewMode('map') - }, [setSelectedLocationFilter, setSnapIndex, setViewMode]) + hideBottomTabBar() + }, [hideBottomTabBar, setSelectedLocationFilter, setSnapIndex, setViewMode]) const floatingBtnOpacityStyle = useAnimatedStyle(() => ({ opacity: bottomBtnOpacityValue.value, bottom: bottomBtnBottomValue.value, @@ -121,11 +130,13 @@ export const SearchScreen = () => { if (viewMode === 'map') { setSelectedLocationFilter('map-location') setViewMode(viewMode) + hideBottomTabBar() } else { setViewMode('list') + showBottomTabBar() } }, - [setSelectedLocationFilter, setSnapIndex, setViewMode], + [hideBottomTabBar, setSelectedLocationFilter, setSnapIndex, setViewMode, showBottomTabBar], ) const onChangeVisiblePoints = useCallback((points: z.TypeOf[]) => { diff --git a/apps/billets-app/src/ui/tab-bar/tab-bar.tsx b/apps/billets-app/src/ui/tab-bar/tab-bar.tsx index d16527fb..c4bf78ed 100644 --- a/apps/billets-app/src/ui/tab-bar/tab-bar.tsx +++ b/apps/billets-app/src/ui/tab-bar/tab-bar.tsx @@ -1,21 +1,26 @@ import { zodNavigation } from '@/lib' +import { useUIStore } from '@/lib/stores/ui-store' import { colors } from '@coldsurfers/ocean-road' import { Text } from '@coldsurfers/ocean-road/native' import { BottomTabBarProps } from '@react-navigation/bottom-tabs' import { House, Search, Smile } from 'lucide-react-native' -import React, { useEffect, useRef } from 'react' +import React, { memo, useEffect, useRef } from 'react' import { Animated, StyleSheet, TouchableOpacity } from 'react-native' import { useSafeAreaInsets } from 'react-native-safe-area-context' +import { useShallow } from 'zustand/shallow' import palettes from '../../lib/palettes' interface Props extends BottomTabBarProps { hidden?: boolean } -export const TabBar = (props: Props) => { +export const TabBar = memo((props: Props) => { const { navigation, state, descriptors, hidden } = props const hiddenAnimationValue = useRef(new Animated.Value(0)).current const { bottom: bottomInset } = useSafeAreaInsets() + const { bottomTabBarVisible } = useUIStore( + useShallow((state) => ({ bottomTabBarVisible: state.bottomTabBarVisible })), + ) useEffect(() => { Animated.timing(hiddenAnimationValue, { @@ -25,6 +30,10 @@ export const TabBar = (props: Props) => { }).start() }, [hidden, hiddenAnimationValue]) + if (!bottomTabBarVisible) { + return null + } + return ( { })} ) -} +}) const styles = StyleSheet.create({ tabBar: { From c5f8ce6b9f4f57c5c932893495ea9c3ab4e4b93f Mon Sep 17 00:00:00 2001 From: yungblud Date: Thu, 19 Dec 2024 10:32:13 +0900 Subject: [PATCH 8/8] refactor(billets-app): :art: guide box --- apps/billets-app/src/screens/search-screen/search-screen.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/billets-app/src/screens/search-screen/search-screen.tsx b/apps/billets-app/src/screens/search-screen/search-screen.tsx index dedf9b89..0f64b2ed 100644 --- a/apps/billets-app/src/screens/search-screen/search-screen.tsx +++ b/apps/billets-app/src/screens/search-screen/search-screen.tsx @@ -179,7 +179,7 @@ export const SearchScreen = () => { locationConcerts={locationConcerts} /> ) : ( - + 이 지역의 공연 수 {pointsLength}개 @@ -242,6 +242,7 @@ const styles = StyleSheet.create({ borderTopRightRadius: 8, ...commonStyles.topShadowBox, }, + guideBox: { flex: 1, backgroundColor: colors.oc.gray[1].value, paddingHorizontal: 14 }, guideFont: { fontSize: 16, },