회원 API, MSW 구현 (#84)

* feat: member 도메인 데이터 추가

Co-authored-by: Chan Lee <[email protected]>

* feat: res, req 타입 정의

Co-authored-by: Chan Lee <[email protected]>

* feat: member 관련 api 정의

Co-authored-by: Chan Lee <[email protected]>

* fix: request 타입 추가

* feat: msw handler

Co-authored-by: Chan Lee <[email protected]>

* feat: member 관련 query, mutation

* refactor: member 관련 handler

* chore: api 주석 삭제

---------

Co-authored-by: Chan Lee <[email protected]>

Author: 1g2g

src/api/member/getConfirmedGames.ts

@@ -0,0 +1,17 @@
+import { axiosInstance } from '@api/axiosInstance';
+
+import {
+  GetConfiremdGamesRequest,
+  GetConfiremdGamesResponse,
+} from '@type/api/member';
+
+export const getConfirmedGames = async ({
+  memberId,
+}: GetConfiremdGamesRequest) => {
+  const { data } = await axiosInstance.get<GetConfiremdGamesResponse>(
+    `/members/${memberId}/confirmed-games`,
+    {}
+  );
+
+  return data;
+};

src/api/member/getCreatedGames.ts

@@ -0,0 +1,15 @@
+import { axiosInstance } from '@api/axiosInstance';
+
+import {
+  GetCreatedGamesRequest,
+  GetCreatedGamesResponse,
+} from '@type/api/member';
+
+export const getCreatedGames = async ({ memberId }: GetCreatedGamesRequest) => {
+  const { data } = await axiosInstance.get<GetCreatedGamesResponse>(
+    `/members/${memberId}/created-games`,
+    {}
+  );
+
+  return data;
+};

src/api/member/getLogin.ts

@@ -0,0 +1,17 @@
+import { axiosInstance } from '@api/axiosInstance';
+
+import { GetLoginRequest, GetLoginResponse } from '@type/api/member';
+
+export const getLogin = async ({
+  oauthProvider,
+  authCode,
+}: GetLoginRequest) => {
+  const { data } = await axiosInstance.get<GetLoginResponse>(
+    `/auth/login/${oauthProvider}`,
+    {
+      params: { authCode },
+    }
+  );
+
+  return data;
+};

src/api/member/getMemberProfile.ts

@@ -0,0 +1,17 @@
+import { axiosInstance } from '@api/axiosInstance';
+
+import {
+  GetMemberProfileRequest,
+  GetMemberProfileResponse,
+} from '@type/api/member';
+
+export const getMemberProfile = async ({
+  memberId,
+}: GetMemberProfileRequest) => {
+  const { data } = await axiosInstance.get<GetMemberProfileResponse>(
+    `/members/${memberId}`,
+    {}
+  );
+
+  return data;
+};

src/api/member/postRefreshAccessToken.ts

@@ -0,0 +1,10 @@
+import { axiosInstance } from '@api/axiosInstance';
+
+import { PostRefreshAccessTokenResponse } from '@type/api/member';
+
+export const postRefreshAccessToken = async () => {
+  const { data } =
+    await axiosInstance.post<PostRefreshAccessTokenResponse>('/auth/refresh');
+
+  return data;
+};

src/api/member/postRegistration.ts

@@ -0,0 +1,17 @@
+import { axiosInstance } from '@api/axiosInstance';
+
+import {
+  PostRegistrationRequest,
+  PostRegistrationResponse,
+} from '@type/api/member';
+
+export const postRegistration = async (payload: PostRegistrationRequest) => {
+  const { data } = await axiosInstance.post<PostRegistrationResponse>(
+    '/members',
+    {
+      data: payload,
+    }
+  );
+
+  return data;
+};

src/hooks/mutations/useRefreshAccessTokenMutation.ts

@@ -0,0 +1,16 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { postRefreshAccessToken } from '@api/member/postRefreshAccessToken';
+
+export const useRefreshAccessTokenMutation = () => {
+  const mutation = useMutation({
+    mutationFn: postRefreshAccessToken,
+    onSuccess: ({ accessToken }) => {
+      console.log('useRefreshAccessTokenMutation Success!');
+      localStorage.setItem('ACCESS_TOKEN', accessToken);
+    },
+    onError: () => console.log('useRefreshAccessTokenMutation Error!'),
+  });
+
+  return mutation;
+};

src/hooks/mutations/useRegistrationMutation.ts

@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { postRegistration } from '@api/member/postRegistration';
+
+export const useRegistrationMutation = () => {
+  const mutation = useMutation({
+    mutationFn: postRegistration,
+    onSuccess: (data) => {
+      console.log('useRegistrationMutation Success!');
+      // TODO : 쿠키와 사용자 정보에 대한 처리 필요
+      localStorage.setItem('LOGIN_INFO', JSON.stringify(data));
+    },
+    onError: () => {
+      console.log('useRegistrationMutation Error!');
+    },
+  });
+
+  return mutation;
+};

src/hooks/queries/useConfirmGamesQuery.ts

@@ -0,0 +1,14 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getConfirmedGames } from '@api/member/getConfirmedGames';
+
+import { GetConfiremdGamesRequest } from '@type/api/member';
+
+export const useConfirmGamesQuery = ({
+  memberId,
+}: GetConfiremdGamesRequest) => {
+  return useSuspenseQuery({
+    queryKey: ['confirmed-games', memberId],
+    queryFn: () => getConfirmedGames({ memberId }),
+  });
+};

src/hooks/queries/useCreatedGamesQuery.ts

@@ -0,0 +1,12 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getCreatedGames } from '@api/member/getCreatedGames';
+
+import { GetCreatedGamesRequest } from '@type/api/member';
+
+export const useCreatedGamesQuery = ({ memberId }: GetCreatedGamesRequest) => {
+  return useSuspenseQuery({
+    queryKey: ['created-games', memberId],
+    queryFn: () => getCreatedGames({ memberId }),
+  });
+};