merge: badge modal 추가 및 record추가시 뱃지 모달 추가 (#108)

TRIP-SPOT · Oct 14, 2024 · a412e40 · a412e40
2 parents 9cfa6d3 + 109d6d2
commit a412e40
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 13 deletions.
diff --git a/packages/react-native/src/components/common/BadgeModal.tsx 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<BadgeModalProps>) {
+  return (
+    <Modal visible={visible} transparent animationType="fade">
+      <View className="flex-1 justify-center text-center px-8">
+        <View className="p-4 bg-[#191919] rounded-xl">
+          <View className="justify-center flex-row">
+            {headerTitle && (
+              <Font type="body1" color="white">
+                {headerTitle}
+              </Font>
+            )}
+            <TouchableOpacity
+              onPress={handleClose}
+              className="absolute right-0"
+            >
+              <CancelIcon />
+            </TouchableOpacity>
+          </View>
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+}
diff --git 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 (
     <BackGroundGradient withoutScroll>
       <Header title={quizListData[currentIndex].workName} />
-      <View className="flex-1 justify-center">
+      <View className="flex-1 justify-evenly">
         <View className="justify-center items-center gap-2">
           <FlatList
             horizontal
@@ -59,6 +60,16 @@ export default function QuizSlider({ quizListData }: QuizSliderProps) {
             ))}
           </View>
         </View>
+        <View className="items-center ">
+          <View className="bg-Button-gray rounded-lg px-4 py-2 items-center">
+            <Font color="white" type="body3">
+              촬영지에 해당하는 퀴즈가 없는 경우
+            </Font>
+            <Font color="white" type="body3">
+              지역 퀴즈로 대체됩니다!
+            </Font>
+          </View>
+        </View>
       </View>
     </BackGroundGradient>
   );

diff --git 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<React.SetStateAction<Region | undefined>>;
+}
+
+export default function RecordPostForm({
+  setRecordModalInfo,
+}: RecordPostFormProps) {
   const {
     description,
     title,
@@ -29,7 +35,6 @@ export default function RecordPostForm() {
   } = useRecordFormState();
 
   const { params } = useRoute<StackRouteProps<'Maps/PostRecord'>>();
-  const navigate = useNavigation<StackNavigation<'Maps/Record'>>();
   const [imageAssets, setImageAssets] = useState<Asset[]>();
 
   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
@@ -88,9 +88,11 @@ export default function MySpotBlock({ mySpot, width, gap }: MySpotBlockProps) {
         className="flex-1 justify-end bg-black/40"
         onPress={handleClick}
       >
-        <View className="items-center">
-          <SPOTLogo width={120} color="black" />
-        </View>
+        {!posterUrl && (
+          <View className="items-center">
+            <SPOTLogo width={120} color="black" />
+          </View>
+        )}
         <View className="flex-row justify-end items-center">
           <TouchableOpacity
             className="flex-row items-center p-2"

diff --git a/packages/react-native/src/pages/Maps/PostRecord.tsx b/packages/react-native/src/pages/Maps/PostRecord.tsx
@@ -1,15 +1,57 @@
+import { useState } from 'react';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { View } from 'react-native';
+import { Font } from 'design-system';
 import Header from '@/components/common/Header';
 import BackGroundGradient from '@/layouts/BackGroundGradient';
 import { RecordFormProvider } from '@/hooks/useRecordFormState';
 import RecordPostForm from '@/components/maps/RecordPostForm';
+import { BADGE_MAPPER, Region, REVERSE_REGION_MAPPER } from '@/constants/CITY';
+import Badge from '@/components/common/Badge';
+import { StackNavigation, StackRouteProps } from '@/types/navigation';
+import BadgeModal from '@/components/common/BadgeModal';
 
 export default function PostRecord() {
+  const [recordModalInfo, setRecordModalInfo] = useState<Region>();
+  const region =
+    typeof recordModalInfo !== 'undefined' &&
+    REVERSE_REGION_MAPPER[recordModalInfo];
+  const navigate = useNavigation<StackNavigation<'Maps/Record'>>();
+  const { params } = useRoute<StackRouteProps<'Maps/PostRecord'>>();
+
+  const closeModal = () => {
+    setRecordModalInfo(undefined);
+    navigate.navigate('Maps/Record', {
+      location: params.location,
+    });
+  };
+
   return (
     <BackGroundGradient>
       <Header title="로그 등록" />
       <RecordFormProvider>
-        <RecordPostForm />
+        <RecordPostForm setRecordModalInfo={setRecordModalInfo} />
       </RecordFormProvider>
+      {typeof recordModalInfo !== 'undefined' && (
+        <BadgeModal
+          visible={typeof recordModalInfo !== 'undefined'}
+          handleClose={closeModal}
+        >
+          <View className="justify-center gap-2 flex-row items-center flex mt-6">
+            <Font.Bold type="title1" color="white">
+              {region}
+            </Font.Bold>
+          </View>
+          <View className="justify-center items-center">
+            <Font type="body1" color="white">
+              배지를 1개 획득했습니다.
+            </Font>
+            <View className="p-4">
+              <Badge preventFade location={BADGE_MAPPER[recordModalInfo]} />
+            </View>
+          </View>
+        </BadgeModal>
+      )}
     </BackGroundGradient>
   );
 }