diff --git a/packages/react-native/src/components/common/BadgeModal.tsx b/packages/react-native/src/components/common/BadgeModal.tsx new file mode 100644 index 00000000..c068f2b0 --- /dev/null +++ b/packages/react-native/src/components/common/BadgeModal.tsx @@ -0,0 +1,40 @@ +import { PropsWithChildren } from 'react'; +import { Modal, TouchableOpacity, View } from 'react-native'; +import { Font } from 'design-system'; +import CancelIcon from '@/assets/CancelIcon'; + +interface BadgeModalProps { + visible: boolean; + headerTitle?: string; + handleClose: () => void; +} + +export default function BadgeModal({ + visible, + headerTitle, + handleClose, + children, +}: PropsWithChildren) { + return ( + + + + + {headerTitle && ( + + {headerTitle} + + )} + + + + + {children} + + + + ); +} diff --git a/packages/react-native/src/components/gamification/QuizSlider.tsx b/packages/react-native/src/components/gamification/QuizSlider.tsx index a36594e3..249dadec 100644 --- a/packages/react-native/src/components/gamification/QuizSlider.tsx +++ b/packages/react-native/src/components/gamification/QuizSlider.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { Dimensions, View, ViewToken } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; +import { Font } from 'design-system'; import { QuizzesResponse } from '@/apis/queries/quiz/useQuizzesQuery'; import Header from '@/components/common/Header'; import BackGroundGradient from '@/layouts/BackGroundGradient'; @@ -26,7 +27,7 @@ export default function QuizSlider({ quizListData }: QuizSliderProps) { return (
- + + + + + 촬영지에 해당하는 퀴즈가 없는 경우 + + + 지역 퀴즈로 대체됩니다! + + + ); diff --git a/packages/react-native/src/components/maps/RecordPostForm.tsx b/packages/react-native/src/components/maps/RecordPostForm.tsx index d9206815..e714eb1b 100644 --- a/packages/react-native/src/components/maps/RecordPostForm.tsx +++ b/packages/react-native/src/components/maps/RecordPostForm.tsx @@ -2,21 +2,27 @@ import { useState } from 'react'; import { Asset } from 'react-native-image-picker'; import { Alert, View } from 'react-native'; import { Button, Font } from 'design-system'; -import { useNavigation, useRoute } from '@react-navigation/native'; +import { useRoute } from '@react-navigation/native'; import RecordFormTitle from './RecordFormTitle'; import RecordFormDatePicker from './RecordFormDatePickers'; import CalendarIcon from '@/assets/CalendarIcon'; -import { StackNavigation, StackRouteProps } from '@/types/navigation'; +import { StackRouteProps } from '@/types/navigation'; import useRecordFormState from '@/hooks/useRecordFormState'; import useGallery from '@/hooks/useGallery'; import useRecordMutation from '@/apis/mutations/useRecordMutation'; import RecordFormDescription from './RecordFormDescription'; import RecordFormCitySelect from './RecordFormCitySelect'; -import { REGION_MAPPER } from '@/constants/CITY'; +import { Region, REGION_MAPPER } from '@/constants/CITY'; import ImageSelect from '../common/ImageSelect'; import MutationLoadingModal from '../common/MutationLoadingModal'; -export default function RecordPostForm() { +interface RecordPostFormProps { + setRecordModalInfo: React.Dispatch>; +} + +export default function RecordPostForm({ + setRecordModalInfo, +}: RecordPostFormProps) { const { description, title, @@ -29,7 +35,6 @@ export default function RecordPostForm() { } = useRecordFormState(); const { params } = useRoute>(); - const navigate = useNavigation>(); const [imageAssets, setImageAssets] = useState(); const { getPhoto } = useGallery(); @@ -84,9 +89,7 @@ export default function RecordPostForm() { images: imageAssets, }); - navigate.navigate('Maps/Record', { - location: params.location, - }); + setRecordModalInfo(REGION_MAPPER[params.location]); }; return ( <> diff --git a/packages/react-native/src/components/mypage/MySpotBlock.tsx b/packages/react-native/src/components/mypage/MySpotBlock.tsx index 9049b59c..9bede81b 100644 --- a/packages/react-native/src/components/mypage/MySpotBlock.tsx +++ b/packages/react-native/src/components/mypage/MySpotBlock.tsx @@ -88,9 +88,11 @@ export default function MySpotBlock({ mySpot, width, gap }: MySpotBlockProps) { className="flex-1 justify-end bg-black/40" onPress={handleClick} > - - - + {!posterUrl && ( + + + + )} (); + const region = + typeof recordModalInfo !== 'undefined' && + REVERSE_REGION_MAPPER[recordModalInfo]; + const navigate = useNavigation>(); + const { params } = useRoute>(); + + const closeModal = () => { + setRecordModalInfo(undefined); + navigate.navigate('Maps/Record', { + location: params.location, + }); + }; + return (
- + + {typeof recordModalInfo !== 'undefined' && ( + + + + {region} + + + + + 배지를 1개 획득했습니다. + + + + + + + )} ); }