diff --git a/index.html b/index.html index 3fb0a43..f0c162c 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,23 @@ - - - - - - - - - - Check Locatiion - - -
- - - - + + + + + + + + + + Check Locatiion + + +
+ + + + diff --git a/src/features/auth/routes/GoogleCallback.tsx b/src/features/auth/routes/GoogleCallback.tsx index 70f278c..0d7a8ac 100644 --- 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 index b71bae7..f9d9fdd 100644 --- 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 index e8b2618..487cbeb 100644 --- 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 index 93d9ef5..492af7b 100644 --- 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 { + return GET({ url: POINTS(userId) }); } diff --git a/src/features/reward/components/reward.tsx b/src/features/reward/components/reward.tsx index 88963cc..c6c7b63 100644 --- 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(, { diff --git a/src/features/reward/types/index.ts b/src/features/reward/types/index.ts new file mode 100644 index 0000000..88aefb7 --- /dev/null +++ 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 index 88894d4..f7f0857 100644 --- 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 index 5c9b23c..f2e6bf7 100644 --- 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 index eaf2f56..4522342 100644 --- 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((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 index a676037..454e61f 100644 --- 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 });