diff --git a/src/features/map-certification/components/map-certification.tsx b/src/features/map-certification/components/map-certification.tsx index f237dae..ef0e426 100644 --- a/src/features/map-certification/components/map-certification.tsx +++ b/src/features/map-certification/components/map-certification.tsx @@ -5,13 +5,16 @@ import Gps from "@/asset/map/gps.svg?react"; import notContainTargetUrl from "@/asset/map/not-contain-target.svg?url"; import positionIconUrl from "@/asset/map/position.svg?url"; import { getDistance } from "@/utils/map"; -import { useMutation, useQuery } from "@tanstack/react-query"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { join, map, replace } from "es-toolkit/compat"; import { Circle, Map, MapMarker } from "react-kakao-maps-sdk"; import { useNavigate } from "react-router"; +import { useUserStore } from "@/stores/user"; import { generate_qo_getGoals, + generate_qo_getGoalsCheck, + generate_qo_getGoalsComplete, generate_qo_postGoalsAchieve } from "@/lib/react-query/queryOptions/goals"; import useUserLocation from "@/hooks/useUserLocation"; @@ -26,7 +29,10 @@ const DISTANCE_DIFFRENCE = 20; function MapCertification() { // Hooks + const { addPoint } = useUserStore(); const navigate = useNavigate(); + const client = useQueryClient(); + const { center, position, setCenterToMyPosition, updateCenterWhenMapMoved } = useUserLocation(); const { @@ -43,7 +49,16 @@ function MapCertification() { const { mutate, isPending } = useMutation({ ...generate_qo_postGoalsAchieve(1), onSuccess: (data) => { - /** @todo 홈 페이지에 사용도되는 데이터 쿼리 무효화 필요, 응답값으로 point 받아 성공 페이지로 전달 */ + const progressGoalKey = generate_qo_getGoalsCheck.DELETE_KEY(); + const completeGoalKey = generate_qo_getGoalsComplete.DELETE_KEY(); + + Promise.all([ + client.invalidateQueries({ queryKey: progressGoalKey }), + client.invalidateQueries({ queryKey: completeGoalKey }) + // client.invalidateQueries({ queryKey: ["home"] }) // 홈페이지 데이터 무효화 + ]); + + addPoint(data.point); navigate("/map/certification/success", { state: { name, point: data.point } diff --git a/src/features/map-search/components/map.tsx b/src/features/map-search/components/map.tsx index 73484d0..26d4a81 100644 --- a/src/features/map-search/components/map.tsx +++ b/src/features/map-search/components/map.tsx @@ -4,7 +4,7 @@ import containTargetUrl from "@/asset/map/contain-target.svg?url"; import Gps from "@/asset/map/gps.svg?react"; import positionIconUrl from "@/asset/map/position.svg?url"; import { getFormattedDistance } from "@/utils/map"; -import { map } from "es-toolkit/compat"; +import { map, slice } from "es-toolkit/compat"; import { Map, MapMarker } from "react-kakao-maps-sdk"; import useKakaoPlaces from "@/hooks/useKakaoMapService"; @@ -98,7 +98,7 @@ function KakaoMap() { lat: Number(y) }) ); - setPlacesData(data); + setPlacesData(slice(data, 0, 10)); }); }, [keyword, placesService, serviceStatus]); diff --git a/src/lib/react-query/queryOptions/goals.ts b/src/lib/react-query/queryOptions/goals.ts index 9ed6beb..2800583 100644 --- a/src/lib/react-query/queryOptions/goals.ts +++ b/src/lib/react-query/queryOptions/goals.ts @@ -33,21 +33,31 @@ export const generate_qo_postGoalsAchieve: GenerateQoPostGoalsAchieve = ( }; interface UseQueryGoalsCheckOptions - extends UseQueryOptions {} + extends UseQueryOptions { + DELETE_KEY?: [string]; +} type GenerateQoGetGoalsCheck = () => UseQueryGoalsCheckOptions; -export const generate_qo_getGoalsCheck: GenerateQoGetGoalsCheck = () => { - return { +export const generate_qo_getGoalsCheck = (() => { + const options: UseQueryGoalsCheckOptions = { queryKey: [GOALS_CHECK], queryFn: () => getGoalsCheck().then((data) => data) }; -}; + + return options; +}) as GenerateQoGetGoalsCheck & { DELETE_KEY: () => [string] }; + +generate_qo_getGoalsCheck.DELETE_KEY = () => [GOALS_CHECK]; interface UseQueryGoalsCompleteOptions extends UseQueryOptions {} type GenerateQoGetGoalsComplete = () => UseQueryGoalsCompleteOptions; -export const generate_qo_getGoalsComplete: GenerateQoGetGoalsComplete = () => { - return { +export const generate_qo_getGoalsComplete = (() => { + const options: UseQueryGoalsCompleteOptions = { queryKey: [GOALS_COMPLETE], queryFn: () => getGoalsComplete().then((data) => data) }; -}; + + return options; +}) as GenerateQoGetGoalsComplete & { DELETE_KEY: () => [string] }; + +generate_qo_getGoalsComplete.DELETE_KEY = () => [GOALS_COMPLETE]; diff --git a/src/stores/user.ts b/src/stores/user.ts index 4522342..58e8bb7 100644 --- a/src/stores/user.ts +++ b/src/stores/user.ts @@ -5,6 +5,7 @@ interface UserState { point: number; userId: string; setPoint: (point: number) => void; + addPoint: (addPoint: number) => void; setUserName: (userName: string) => void; } @@ -13,5 +14,7 @@ export const useUserStore = create((set) => ({ point: 100000, userId: "0", setPoint: (point) => set({ point }), + addPoint: (addPoint: number) => + set((state) => ({ point: state.point + addPoint })), setUserName: (userName) => set({ userName }) }));