hotfix: qa2 반영

packages/react-native/package.json

@@ -40,6 +40,7 @@
     "react-native-gesture-handler": "^2.17.1",
     "react-native-image-picker": "^7.1.2",
     "react-native-linear-gradient": "^2.8.3",
+    "react-native-mail": "^6.1.1",
     "react-native-pager-view": "^6.3.3",
     "react-native-permissions": "^4.1.5",
     "react-native-reanimated": "^3.14.0",

packages/react-native/src/apis/queries/detail/useAroundSpotQuery.ts

@@ -12,7 +12,7 @@ interface UseAroundSpotQueryParams {
 interface AroundSpotResponse {
   attraction: SpotResponse[];
   restaurant: SpotResponse[];
-  accomodation: SpotResponse[];
+  accommodation: SpotResponse[];
 }
 
 export default function useAroundSpotQuery({

packages/react-native/src/components/common/Card.tsx

@@ -1,16 +1,24 @@
-import { Alert, ImageBackground, TouchableOpacity, View } from 'react-native';
+import { useState } from 'react';
+import { ImageBackground, TouchableOpacity, View } from 'react-native';
 import HeartIcon from '@assets/HeartIcon';
 import { useNavigation } from '@react-navigation/native';
 import { Font } from 'design-system';
 import { SpotCardData } from '@/types/spot';
 import { StackNavigation } from '@/types/navigation';
 import { getDisplayRegion } from '@/utils/getDisplayRegionName';
+import useSpotLikeMutation from '@/apis/mutations/useSpotLikeMutation';
+import MutationLoadingModal from './MutationLoadingModal';
 
 interface CardProps {
   data: SpotCardData;
   size?: number;
 }
 
+interface CardLike {
+  likeCount: number;
+  isLiked: boolean;
+}
+
 function Default({ data, size = 260 }: CardProps) {
   const {
     isLiked,
@@ -23,14 +31,41 @@ function Default({ data, size = 260 }: CardProps) {
     id,
     workId,
   } = data;
+
+  const [cardLike, setCardLike] = useState<CardLike>({
+    isLiked,
+    likeCount,
+  });
   const navigation = useNavigation<StackNavigation<'Home/Search'>>();
+  const { like, isLikePending, isCancelLikePending, cancelLike } =
+    useSpotLikeMutation({ contentId });
+
+  const handleClickLike = () => {
+    if (cardLike.isLiked) {
+      setCardLike((prev) => ({
+        isLiked: !prev.isLiked,
+        likeCount: prev.likeCount - 1,
+      }));
+      cancelLike({ id });
+      return;
+    }
+
+    setCardLike((prev) => ({
+      isLiked: !prev.isLiked,
+      likeCount: prev.likeCount + 1,
+    }));
+    like({ id });
+  };
 
   return (
     <ImageBackground
       source={{ uri: posterUrl }}
       className="rounded-2xl overflow-hidden bg-SPOT-black"
       style={{ width: size, aspectRatio: 3 / 4 }}
     >
+      <MutationLoadingModal
+        isSubmiting={isLikePending || isCancelLikePending}
+      />
       <TouchableOpacity
         className="flex-1 justify-end bg-black/40"
         onPress={() =>
@@ -41,17 +76,16 @@ function Default({ data, size = 260 }: CardProps) {
         <View className="flex-row justify-end items-center">
           <TouchableOpacity
             className="flex-row items-center p-2"
-            // FIXME: 실제 좋아요 기능 추가
-            onPress={() => Alert.alert('좋아요', `${id}`)}
+            onPress={handleClickLike}
           >
             <HeartIcon
               width={15}
               height={15}
-              color={isLiked ? 'red' : 'white'}
+              color={cardLike.isLiked ? 'red' : 'white'}
             />
             <View className="ml-1">
               <Font type="body3" color="white">
-                {likeCount}
+                {cardLike.likeCount}
               </Font>
             </View>
           </TouchableOpacity>

packages/react-native/src/components/common/SpotDetailBottomSheet.tsx

@@ -20,7 +20,7 @@ export default function SpotDetailBottomSheet({
   const { data } = useSpotDetailQuery({ id: selectedDetailSpotId });
   return (
     <BottomSheet
-      snapPoints={['90%']}
+      snapPoints={['100%']}
       handleClose={onClose}
       isShow={Boolean(selectedDetailSpotId)}
     >

packages/react-native/src/constants/EMAIL_CONTENTS.ts

@@ -0,0 +1,26 @@
+const EMAIL_CONTENTS = {
+  BUG: {
+    title: '[버그 신고] SPOT!에 문의하기',
+    body: `
+    문제 발생 일시: 
+
+    상세 내용:
+
+    문제 상황 이미지 및 영상 : 
+
+    * 상황에 대한 자세한 설명이 작성되어 있지 않은 경우 문제 해결 및 답변이 어려운 점 참고 부탁드립니다.
+    * 문의 관련 스크린샷 또는 녹화본을 첨부하시면 빠른 문제확인 및 해결이 가능합니다.`,
+  },
+
+  NORMAL: {
+    title: '[일반 문의] SPOT!에 문의하기',
+    body: `
+    문의할 내용: 
+
+    관련 이미지 및 영상 : 
+
+    * 문의 관련 스크린샷 또는 녹화본을 첨부하시면 빠른 문제확인 및 해결이 가능합니다.`,
+  },
+} as const;
+
+export default EMAIL_CONTENTS;

packages/react-native/src/hooks/useSortByStartDate.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+type orderType = 'ascending' | 'descending';
+
+interface ObjectWithStartDate {
+  startDate: string;
+}
+
+interface UseSortParams<T extends ObjectWithStartDate[]> {
+  defaultData: T;
+}
+
+export default function useSortByStartDate<T extends ObjectWithStartDate[]>({
+  defaultData,
+}: UseSortParams<T>) {
+  const [data, setData] = useState<T>(defaultData);
+  const [order, setOrder] = useState<orderType>();
+
+  const sort = (type: orderType) => {
+    setData((prev) => {
+      const sortedData = [...prev].sort((a, b) => {
+        return type === 'ascending'
+          ? new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
+          : new Date(b.startDate).getTime() - new Date(a.startDate).getTime();
+      });
+      return sortedData as T;
+    });
+  };
+
+  const toggleSortOrder = (type?: orderType) => {
+    if (!type) {
+      setOrder((prev) => (prev === 'descending' ? 'ascending' : 'descending'));
+      return;
+    }
+
+    setOrder(type);
+  };
+
+  useEffect(() => {
+    setData(defaultData);
+    if (order) {
+      sort(order);
+    }
+  }, [order, defaultData]);
+
+  return { data, order, toggleSortOrder };
+}

packages/react-native/src/pages/Detail.tsx

@@ -1,6 +1,8 @@
 import { Font } from 'design-system';
 import { ImageBackground, TouchableOpacity, View } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
+import { useHeaderHeight } from '@react-navigation/elements';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { StackNavigation, StackRouteProps } from '@/types/navigation';
 import withSuspense from '@/components/HOC/withSuspense';
 import DetailTabNavigator from '@/routes/DetailTabNavigator';
@@ -10,6 +12,7 @@ import useDetailQuery from '@/apis/queries/detail/useDetailQuery';
 import useSpotLikeMutation from '@/apis/mutations/useSpotLikeMutation';
 import MutationLoadingModal from '@/components/common/MutationLoadingModal';
 import { getDisplayRegion } from '@/utils/getDisplayRegionName';
+import Header from '@/components/common/Header';
 
 const Detail = withSuspense(() => {
   const route = useRoute<StackRouteProps<'Home/Detail'>>();
@@ -21,28 +24,32 @@ const Detail = withSuspense(() => {
     useSpotLikeMutation({ contentId: paramsContentId });
 
   const {
-    image,
     title,
     longitude,
     latitude,
     contentId,
     addr1,
     addr2,
     overview,
-    posterUrl,
     likeCount,
     isLiked,
     city,
     region,
     dist,
     contentTypeId,
+    image,
+    posterUrl,
   } = data;
 
+  const headerHeight = useHeaderHeight();
+  const insets = useSafeAreaInsets();
+
+  const defaultPaddingTop =
+    headerHeight - insets.top > 0 ? headerHeight - insets.top : 0;
+
   const handleAddPlan = () => {
     navigation.navigate('Home/AddSpot', {
       spots: [
-        // TODO: useDetailQuery 반환타입과 호환되지 않음
-        // 추후 api응답 변경시 재변경 빌표
         {
           contentId: Number(contentId),
           title,
@@ -64,13 +71,22 @@ const Detail = withSuspense(() => {
       <MutationLoadingModal
         isSubmiting={isCancelLikePending || isLikePending}
       />
-      <ImageBackground
-        className="h-[200px]"
-        source={{ uri: image ?? posterUrl }}
+      <Header />
+      {(image || posterUrl) && (
+        <ImageBackground
+          className="h-[200px]"
+          source={{ uri: image || posterUrl }}
+        >
+          <View className="flex-1 justify-end bg-black/20" />
+        </ImageBackground>
+      )}
+
+      <View
+        className="flex-1 bg-[#100F0F] p-4 pb-0"
+        style={{
+          paddingTop: !image && !posterUrl ? defaultPaddingTop : 16,
+        }}
       >
-        <View className="flex-1 justify-end bg-black/20" />
-      </ImageBackground>
-      <View className="flex-1 bg-[#100F0F] p-4 pb-0">
         <View>
           <Font type="mainTitle" color="white">
             {title}

packages/react-native/src/pages/Detail/DetailSpot.tsx

@@ -91,7 +91,7 @@ export default withSuspense(function DetailSpot() {
             />
             <CardSlider
               title="숙소"
-              data={data.accomodation}
+              data={data.accommodation}
               renderItem={({ item }) => (
                 <AroundCard
                   data={item}

packages/react-native/src/pages/Maps/Records.tsx

@@ -16,28 +16,28 @@ import useRecordsQuery, {
 } from '@/apis/queries/records/useRecordsQuery';
 import withSuspense from '@/components/HOC/withSuspense';
 import useRecordMutation from '@/apis/mutations/useRecordMutation';
+import useSortByStartDate from '@/hooks/useSortByStartDate';
 
 interface RecordsProps {
   navigation: StackNavigation<'Maps/Record'>;
 }
 
 export default withSuspense(function Records({ navigation }: RecordsProps) {
-  const [showBottomSheet, toggleBottomSheet] = useToggle();
-  const [selectedRecord, setSelectedRecord] = useState<RecordResponse>();
-  const sort = () => {
-    // TODO: 실제 구현 필요(현재 UI없음)
-  };
-
   const route = useRoute<StackRouteProps<'Maps/Record'>>();
-
   const { data: recordsData } = useRecordsQuery({
     location: route.params.location,
   });
+  const { data, toggleSortOrder } = useSortByStartDate({
+    defaultData: recordsData,
+  });
 
   const { deleteMutate } = useRecordMutation({
     location: route.params.location,
   });
 
+  const [showBottomSheet, toggleBottomSheet] = useToggle();
+  const [selectedRecord, setSelectedRecord] = useState<RecordResponse>();
+
   const handleOpenOption = (selectedCardData: RecordResponse) => {
     setSelectedRecord(selectedCardData);
     toggleBottomSheet(true);
@@ -50,7 +50,10 @@ export default withSuspense(function Records({ navigation }: RecordsProps) {
       <BackGroundGradient withoutScroll={isEmpty}>
         <Header
           RightActionButton={
-            <TouchableOpacity onPress={sort} className="px-4">
+            <TouchableOpacity
+              onPress={() => toggleSortOrder()}
+              className="px-4"
+            >
               <SortIcon />
             </TouchableOpacity>
           }
@@ -73,10 +76,7 @@ export default withSuspense(function Records({ navigation }: RecordsProps) {
               paddingRight: LOG_PADDING_X,
             }}
           >
-            <RecordCardList
-              cards={recordsData}
-              handleOpenOptions={handleOpenOption}
-            />
+            <RecordCardList cards={data} handleOpenOptions={handleOpenOption} />
           </View>
         )}
       </BackGroundGradient>

packages/react-native/src/pages/MyPage.tsx

@@ -3,7 +3,7 @@
 import BackGroundGradient from '@/layouts/BackGroundGradient';
 import Rank from '@/components/mypage/Rank';
 import EditButton from '@/components/common/EditButton';
 import MyPageTabNavigator from '@/routes/MyPageTabNavigator';
 import useProfileQuery from '@/apis/queries/useProfileQuery';
 import { StackNavigation } from '@/types/navigation';
 import CogWheelIcon from '@/assets/CogWheelIcon';
@@ -52,9 +52,9 @@
         >
           <CogWheelIcon />
         </TouchableOpacity>
-        <View className="flex-1">
+        {/* <View className="flex-1">
           <MyPageTabNavigator />
-        </View>
+        </View> */}
       </View>
     </BackGroundGradient>
   );