From 1ec9922cb614a2f62cb99186a9cb4cca5f34cba6 Mon Sep 17 00:00:00 2001 From: Park-min-hyoung Date: Sat, 1 Mar 2025 09:34:15 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=9D=B8=EC=A6=9D=EC=99=84?= =?UTF-8?q?=EB=A3=8C=EC=8B=9C=20=ED=8F=AC=EC=9D=B8=ED=8A=B8=20=EB=B0=8F=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=97=85=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/map-certification.tsx | 19 +++++++++++++-- src/lib/react-query/queryOptions/goals.ts | 24 +++++++++++++------ src/stores/user.ts | 5 +++- 3 files changed, 38 insertions(+), 10 deletions(-) diff --git a/src/features/map-certification/components/map-certification.tsx b/src/features/map-certification/components/map-certification.tsx index 2a1ef6d..a0f4ef0 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/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 eaf2f56..3cdb660 100644 --- a/src/stores/user.ts +++ b/src/stores/user.ts @@ -4,10 +4,13 @@ interface UserState { userName: string; point: number; setPoint: (point: number) => void; + addPoint: (addPoint: number) => void; } export const useUserStore = create((set) => ({ userName: "park", point: 100000, - setPoint: (point) => set({ point }) + setPoint: (point) => set({ point }), + addPoint: (addPoint: number) => + set((state) => ({ point: state.point + addPoint })) })); From dfd7e00065fc6f821bdf68f1ac9eb568353e4044 Mon Sep 17 00:00:00 2001 From: Park-min-hyoung Date: Sat, 1 Mar 2025 09:41:04 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=9E=A5=EC=86=8C=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EA=B0=80=20=EC=B5=9C?= =?UTF-8?q?=EB=8C=80=2010=EA=B0=9C=EB=A7=8C=20=EB=B3=B4=EC=9D=B4=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/map-search/components/map.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/map-search/components/map.tsx b/src/features/map-search/components/map.tsx index 3d98057..9d65f3a 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]);