[feat/map-certificaiton-update] 목표 인증 메뉴 보완 (#24)

* feat: 인증완료시 포인트 및 데이터 업데이트

* feat: 장소 검색 리스트가 최대 10개만 보이도록 수정

Author: Park-min-hyoung

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 }

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]);
 

src/lib/react-query/queryOptions/goals.ts

@@ -33,21 +33,31 @@ export const generate_qo_postGoalsAchieve: GenerateQoPostGoalsAchieve = (
 };
 
 interface UseQueryGoalsCheckOptions
-  extends UseQueryOptions<ProgressGoal[], AxiosError, ProgressGoal[]> {}
+  extends UseQueryOptions<ProgressGoal[], AxiosError, ProgressGoal[]> {
+  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<CompleteGoal[], AxiosError, CompleteGoal[]> {}
 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];

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<UserState>((set) => ({
   point: 100000,
   userId: "0",
   setPoint: (point) => set({ point }),
+  addPoint: (addPoint: number) =>
+    set((state) => ({ point: state.point + addPoint })),
   setUserName: (userName) => set({ userName })
 }));