feat: 홈 화면 내 주변 SPOT 영역 추가

packages/react-native/src/apis/queries/home/useHomeSpotQuery.ts

@@ -3,6 +3,7 @@ import { ServerResponse } from '@/types/response';
 import useAuthAxios from '../../useAuthAxios';
 import { SpotCardData } from '@/types/spot';
 import QUERY_KEYS from '@/constants/QUERY_KEYS';
+import { MILLISECONDS } from '@/constants/MILLISECONDS';
 
 export default function useHomeSpotQuery() {
   const authAxios = useAuthAxios();
@@ -17,5 +18,6 @@ export default function useHomeSpotQuery() {
   return useSuspenseQuery({
     queryKey: [QUERY_KEYS.HOME],
     queryFn: getHomeSpot,
+    staleTime: 10 * MILLISECONDS.ONE_MINUTE,
   });
 }

packages/react-native/src/apis/queries/home/useNearbySoptQuery.ts

@@ -0,0 +1,29 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import useAuthAxios from '@/apis/useAuthAxios';
+import useLocation from '@/hooks/useLocation';
+import { ServerResponse } from '@/types/response';
+import { MySpotResponse } from '../mypage/useMySpotsQuery';
+import QUERY_KEYS from '@/constants/QUERY_KEYS';
+import { MILLISECONDS } from '@/constants/MILLISECONDS';
+
+export default function useNeearbySpotQuery() {
+  const authAxios = useAuthAxios();
+  const location = useLocation();
+
+  const getNearbySpot = async () => {
+    const res = await location;
+    if (!res || !res.latitude || !res.longitude) return [];
+
+    const response = await authAxios.get<ServerResponse<MySpotResponse[]>>(
+      `/api/spot/nearby?latitude=${res.latitude}&longitude=${res.longitude}`,
+    );
+
+    return response.data.result;
+  };
+
+  return useSuspenseQuery({
+    queryKey: [QUERY_KEYS.NEARBY_SPOT, location],
+    queryFn: getNearbySpot,
+    staleTime: 10 * MILLISECONDS.ONE_MINUTE,
+  });
+}

packages/react-native/src/apis/queries/quiz/useQuizzesQuery.ts

@@ -3,11 +3,7 @@ import useAuthAxios from '@/apis/useAuthAxios';
 import { City, Region } from '@/constants/CITY';
 import { ServerResponse } from '@/types/response';
 import QUERY_KEYS from '@/constants/QUERY_KEYS';
-
-export interface Location {
-  latitude?: number;
-  longitude?: number;
-}
+import useLocation from '@/hooks/useLocation';
 
 export interface QuizzesResponse {
   quizId: number;
@@ -19,27 +15,23 @@ export interface QuizzesResponse {
   filterImage: string;
 }
 
-interface UseQuizzesQueryParams {
-  location?: Location;
-}
-
-export default function useQuizzesQuery({ location }: UseQuizzesQueryParams) {
+export default function useQuizzesQuery() {
   const authAxios = useAuthAxios();
+  const location = useLocation();
+
+  const getQuizzes = async () => {
+    const res = await location;
+    if (!res || !res.latitude || !res.longitude) return [];
 
-  const getQuizzes = async (locations: Location) => {
     const result = await authAxios.get<ServerResponse<QuizzesResponse[]>>(
-      `/api/spot?longitude=${locations.longitude}&latitude=${locations.latitude}`,
+      `/api/spot?longitude=${res.longitude}&latitude=${res.latitude}`,
     );
+
     return result.data.result;
   };
+
   return useSuspenseQuery({
     queryKey: [QUERY_KEYS.QUIZZES, location],
-    queryFn: () => {
-      if (!location?.latitude || !location.longitude) {
-        return null;
-      }
-
-      return getQuizzes(location);
-    },
+    queryFn: getQuizzes,
   });
 }

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

@@ -8,9 +8,10 @@ import { StackNavigation } from '@/types/navigation';
 import { getDisplayRegion } from '@/utils/getDisplayRegionName';
 import useSpotLikeMutation from '@/apis/mutations/useSpotLikeMutation';
 import MutationLoadingModal from './MutationLoadingModal';
+import { MySpotResponse } from '@/apis/queries/mypage/useMySpotsQuery';
 
 interface CardProps {
-  data: SpotCardData;
+  data: SpotCardData | MySpotResponse;
   size?: number;
 }
 

packages/react-native/src/components/home/contents/PopularSpot.tsx

@@ -18,7 +18,7 @@ const CONTENTS: PopularSpotContent[] = [
     content:
       "구룡포 일본인 가옥거리는 '동백꽃 필 무렵'의 주요 촬영지 중 하나로, 드라 마의 포스터에도 등장한 바로 그 장소입니다. 이곳에는 주인공 동백이가 운영하던 까멜리아도 자리하고 있어, 드라마 속 장면들이 현실에서 그대로 펼쳐지는 듯한 분위기를 자아냅니다. 좁은 골목길과 고즈넉한 건물들이 어우러져 동백이의 일상과 따뜻한 사랑 이야기가 그려졌던 공간의 감성을 고스란히 느낄 수 있으며, 동백이의 삶 이 우리 눈앞에 펼쳐지는 듯한 특별한 경험을 할 수 있습니다.",
     image: require('../../../assets/home/dongbaek.png'),
-    imageType: 'poster',
+    imageType: 'wide',
   },
   {
     title: '도깨비',

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

@@ -0,0 +1,6 @@
+export const MILLISECONDS = {
+  ONE_SECOND: 1_000,
+  ONE_MINUTE: 60_000,
+  ONE_HOUR: 3_600_000,
+  ONE_DAY: 86_400_000,
+} as const;

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

@@ -18,6 +18,7 @@ const QUERY_KEYS = {
   MY_LEVEL: 'myLevel',
   BADGE_HISTORY: 'badgeHistory',
   SCHEDULES: 'schedules',
+  NEARBY_SPOT: 'nearbySpot',
 };
 
 export default QUERY_KEYS;

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

@@ -0,0 +1,22 @@
+import useGeolocation from './useGeolocation';
+
+export interface Location {
+  latitude?: number;
+  longitude?: number;
+}
+
+export default function useLocation() {
+  const { getGeolocation } = useGeolocation();
+
+  const fetchLocation = async (): Promise<Location | undefined> => {
+    const res = await getGeolocation();
+    if (!res) return undefined;
+
+    return {
+      latitude: res.coords.latitude,
+      longitude: res.coords.longitude,
+    };
+  };
+
+  return fetchLocation(); // Promise 반환
+}

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

@@ -1,29 +1,12 @@
-import { useEffect, useState } from 'react';
 import QuizLoading from '@components/gamification/QuizLoading';
 import QuizSlider from '@components/gamification/QuizSlider';
 import withSuspense from '@/components/HOC/withSuspense';
-import useGeolocation from '@/hooks/useGeolocation';
-import useQuizzesQuery, { Location } from '@/apis/queries/quiz/useQuizzesQuery';
+import useQuizzesQuery from '@/apis/queries/quiz/useQuizzesQuery';
 import NoQuiz from '@/components/gamification/NoQuiz';
 
 export default withSuspense(
   function Gamification() {
-    const { getGeolocation } = useGeolocation();
-    const [location, setLocation] = useState<Location>();
-    const { data } = useQuizzesQuery({ location });
-
-    useEffect(() => {
-      getGeolocation().then((res) => {
-        setLocation({
-          latitude: res?.coords.latitude,
-          longitude: res?.coords.longitude,
-        });
-      });
-    }, []);
-
-    if (!location?.latitude || !location.longitude) {
-      return <QuizLoading />;
-    }
+    const { data } = useQuizzesQuery();
 
     if (!data || data?.length === 0) {
       return <NoQuiz />;

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

@@ -11,13 +11,15 @@ import withSuspense from '@/components/HOC/withSuspense';
 import useHomeSpotQuery from '@/apis/queries/home/useHomeSpotQuery';
 import SPOTLogo from '@/assets/SPOTLogo';
 import HOME_CONTENTS from '@/constants/HOME_CONTENTS';
+import useNeearbySpotQuery from '@/apis/queries/home/useNearbySoptQuery';
 
 interface HomeScreenProps {
   navigation: StackNavigation<'Home/Main'>;
 }
 
 export default withSuspense(function Home({ navigation }: HomeScreenProps) {
   const { profile } = useProfileQuery();
+  const { data: nearbySpots } = useNeearbySpotQuery();
   const { data: homeSpots } = useHomeSpotQuery();
 
   return (
@@ -51,6 +53,15 @@ export default withSuspense(function Home({ navigation }: HomeScreenProps) {
             renderItem={({ item }) => <Card data={item} size={180} />}
           />
         </View>
+        {nearbySpots.length > 0 && (
+          <View>
+            <CardSlider
+              title="내 주변 SPOT!"
+              data={nearbySpots}
+              renderItem={({ item }) => <Card data={item} size={180} />}
+            />
+          </View>
+        )}
         <View>
           <CardSlider
             title="이 여행지는 어때요?"