Location-based-target-authentication · Park-min-hyoung · Mar 2, 2025 · Feb 28, 2025 · Feb 28, 2025 · Mar 1, 2025
diff --git a/index.html b/index.html
@@ -1,23 +1,23 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link href="/dist/styles.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
-    />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Check Locatiion</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-    <script
-      type="text/javascript"
-      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_API%&libraries=services,clusterer"
-    ></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link href="/dist/styles.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
+    />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Check Locatiion</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_API%&libraries=services,clusterer"
+    ></script>
+  </body>
+</html>
diff --git a/src/features/auth/routes/GoogleCallback.tsx b/src/features/auth/routes/GoogleCallback.tsx
@@ -4,12 +4,15 @@ import { Spinner } from "@/components/ui/spinner";
 import { useCallback, useEffect, useState } from "react";
 
 import { postGoogleLogin } from "@/features/auth/api/auth";
+import { getPoint } from "@/features/reward/api/reward";
 import { useNavigate, useSearchParams } from "react-router";
 
 import { useAuthStore } from "@/stores/auth-store";
+import { useUserStore } from "@/stores/user";
 import { paths } from "@/config/paths";
 
 const GoogleCallback = (): JSX.Element | null => {
+  const { setUserName, setPoint } = useUserStore();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const setTokens = useAuthStore((state) => state.setTokens);
@@ -25,9 +28,13 @@ const GoogleCallback = (): JSX.Element | null => {
           throw new Error("구글 인증에 실패했습니다.");
         }
 
-        const { accessToken, refreshToken, userId } = response.data;
+        const { accessToken, refreshToken, username, userId } = response.data;
 
         setTokens(accessToken, refreshToken, userId);
+        setUserName(username);
+
+        const { totalPoints } = await getPoint({ pathParams: { userId } });
+        setPoint(totalPoints);
 
         navigate(paths.home.path);
       } catch (error) {
@@ -37,7 +44,7 @@ const GoogleCallback = (): JSX.Element | null => {
         setIsLoading(false);
       }
     },
-    [navigate, setTokens]
+    [navigate, setTokens, setUserName, setPoint]
   );
 
   useEffect(() => {

diff --git a/src/features/auth/routes/KakaoCallback.tsx b/src/features/auth/routes/KakaoCallback.tsx
@@ -4,12 +4,15 @@ import { Spinner } from "@/components/ui/spinner";
 import { useCallback, useEffect, useState } from "react";
 
 import { postKakaoLogin } from "@/features/auth/api/auth";
+import { getPoint } from "@/features/reward/api/reward";
 import { useNavigate, useSearchParams } from "react-router";
 
 import { useAuthStore } from "@/stores/auth-store";
+import { useUserStore } from "@/stores/user";
 import { paths } from "@/config/paths";
 
 const KakaoCallback = (): JSX.Element | null => {
+  const { setUserName, setPoint } = useUserStore();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const setTokens = useAuthStore((state) => state.setTokens);
@@ -27,9 +30,13 @@ const KakaoCallback = (): JSX.Element | null => {
           throw new Error("카카오 인증에 실패했습니다.");
         }
 
-        const { accessToken, refreshToken, userId } = response.data;
+        const { accessToken, refreshToken, username, userId } = response.data;
 
         setTokens(accessToken, refreshToken, userId);
+        setUserName(username);
+
+        const { totalPoints } = await getPoint({ pathParams: { userId } });
+        setPoint(totalPoints);
 
         navigate(paths.home.path);
       } catch (error) {
@@ -39,7 +46,7 @@ const KakaoCallback = (): JSX.Element | null => {
         setIsLoading(false);
       }
     },
-    [navigate, setTokens]
+    [navigate, setTokens, setUserName, setPoint]
   );
 
   useEffect(() => {

diff --git a/src/features/reward/api/path.ts b/src/features/reward/api/path.ts
@@ -2,5 +2,7 @@ import { generatePathByBase, genreateBasePath } from "@/lib/axios/utils";
 
 export const BASE_PATH = genreateBasePath("points", "v1");
 
-export const POINT_DEDUC = (socialId) =>
-  generatePathByBase(BASE_PATH, socialId, "deduc");
+export const POINTS = (userId: string) => generatePathByBase(BASE_PATH, userId);
+
+export const POINT_DEDUC = (userId: string) =>
+  generatePathByBase(BASE_PATH, userId, "deduc");
diff --git a/src/features/reward/api/reward.ts b/src/features/reward/api/reward.ts
@@ -1,10 +1,17 @@
 import type { R } from "@/types/common";
-import { POST } from "@/lib/axios";
+import { GET, POST } from "@/lib/axios";
 import type { RoOnlyPathParamsType } from "@/lib/axios/utils";
-import { POINT_DEDUC } from "./path";
+import type { Point } from "../types";
+import { POINT_DEDUC, POINTS } from "./path";
 
 export function postRewards({
-  pathParams: { socialId }
-}: RoOnlyPathParamsType<{ socialId: number }>): R<{ point: number }> {
-  return POST({ url: POINT_DEDUC(socialId) });
+  pathParams: { userId }
+}: RoOnlyPathParamsType<{ userId: string }>): R<{ point: number }> {
+  return POST({ url: POINT_DEDUC(userId) });
+}
+
+export function getPoint({
+  pathParams: { userId }
+}: RoOnlyPathParamsType<{ userId: string }>): R<Point> {
+  return GET({ url: POINTS(userId) });
 }
diff --git a/src/features/reward/components/reward.tsx b/src/features/reward/components/reward.tsx
@@ -10,10 +10,10 @@ import { generateCoupons } from "./index.const";
 import SuccessToast from "./success-toast";
 
 export default function Reward() {
-  const { point, setPoint } = useUserStore();
+  const { point, setPoint, userId } = useUserStore();
 
   const { mutate, isPending } = useMutation({
-    ...generate_qo_postRewards(1),
+    ...generate_qo_postRewards(userId),
     onSuccess: (data) => {
       setPoint(data.point);
       toast(<SuccessToast />, {

diff --git a/src/features/reward/types/index.ts b/src/features/reward/types/index.ts
@@ -0,0 +1,5 @@
+export interface Point {
+  userId: number;
+  socialId: string;
+  totalPoints: number;
+}
diff --git a/src/lib/axios/index.ts b/src/lib/axios/index.ts
@@ -1,4 +1,5 @@
 import { postRefreshAccessToken } from "@/features/auth/api/auth";
+import { getPoint } from "@/features/reward/api/reward";
 import type {
   AxiosRequestConfig,
   AxiosResponse,
@@ -10,6 +11,7 @@ import { get, isArray } from "es-toolkit/compat";
 
 import { Nullable } from "@/types/common";
 import { useAuthStore } from "@/stores/auth-store";
+import { useUserStore } from "@/stores/user";
 import { ENDPOINT_URL, MEDIUM_REQUEST_TIMEOUT } from "@/config/envs";
 import { paths } from "@/config/paths";
 import { generateQueryParams } from "@/lib/axios/utils";
@@ -58,6 +60,12 @@ export const handleTokenExpiration = async (
 
     axios.defaults.headers.common["Authorization"] =
       `Bearer ${response.data.accessToken}`;
+
+    const { totalPoints } = await getPoint({
+      pathParams: { userId: response.data.userId }
+    });
+    useUserStore.setState({ point: totalPoints });
+
     return axios.request(config);
   } catch (error) {
     window.location.href = paths.auth.login.path;

diff --git a/src/lib/react-query/queryOptions/reward.ts b/src/lib/react-query/queryOptions/reward.ts
@@ -4,9 +4,9 @@ import { AxiosError } from "axios";
 
 interface UseMutationRewardsOptions
   extends UseMutationOptions<{ point: number }, AxiosError, void, unknown> {}
-type GenerateQoPostRewards = (id: number) => UseMutationRewardsOptions;
-export const generate_qo_postRewards: GenerateQoPostRewards = (socialId) => {
+type GenerateQoPostRewards = (userId: string) => UseMutationRewardsOptions;
+export const generate_qo_postRewards: GenerateQoPostRewards = (userId) => {
   return {
-    mutationFn: () => postRewards({ pathParams: { socialId } })
+    mutationFn: () => postRewards({ pathParams: { userId } })
   };
 };
diff --git a/src/stores/user.ts b/src/stores/user.ts
@@ -3,11 +3,15 @@ import { create } from "zustand";
 interface UserState {
   userName: string;
   point: number;
+  userId: string;
   setPoint: (point: number) => void;
+  setUserName: (userName: string) => void;
 }
 
 export const useUserStore = create<UserState>((set) => ({
   userName: "park",
   point: 100000,
-  setPoint: (point) => set({ point })
+  userId: "0",
+  setPoint: (point) => set({ point }),
+  setUserName: (userName) => set({ userName })
 }));
diff --git a/src/testing/mocks/handlers/browser.ts b/src/testing/mocks/handlers/browser.ts
@@ -35,7 +35,7 @@ export const handlers = [
 
     return HttpResponse.json({ message: "success" });
   }),
-  http.post(`${ENDPOINT_URL}${POINT_DEDUC(1)}`, async () => {
+  http.post(`${ENDPOINT_URL}${POINT_DEDUC("1")}`, async () => {
     await delay(500);
 
     return HttpResponse.json({ point: 10000 });