회원 닉네임 수정, 회원 탈퇴 react-query를 이용한 커스텀훅 구현 (#192)

* feat: (#187) 유저가 닉네임을 변경하는 커스텀 훅 구현

* feat: (#187) 유저 회원 탈퇴 기능 커스텀 훅 구현

* feat: (#187) 닉네임 변경 부분 낙관적 업데이트 적용

* refactor: (#187) 닉네임 변경에 실패했을 경우 console.error 코드 추가

* refactor: (#187) 회원 탈퇴를 cancel에서 withdrawal로 변경

* refactor: (#187) dev 브런치 머지 후 파일 경로 재설정

frontend/__test__/api/user.test.ts

@@ -1,5 +1,5 @@
 import {
- cancelMembership,
+ withdrawalMembership,
  getUserInfo,
  modifyNickname,
  transformUserInfoResponse,
@@ -29,7 +29,7 @@ describe('서버와 통신하여 유저의 정보를 불러올 수 있어야 한
  });
 
  test('유저가 회원 탈퇴를 한다', async () => {
- await cancelMembership();
+ await withdrawalMembership();
 
  expect(MOCK_USER_INFO.nickname).toBe('cancel');
  });

frontend/__test__/hooks/query/useCancelMembership.test.tsx

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useWithdrawalMembership } from '@hooks/query/user/useWithdrawalMembership';
+
+import { MOCK_USER_INFO } from '@mocks/mockData/user';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+ <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('useWithdrawalMembership 훅이 회원 탈퇴를 하는지 확인한다', () => {
+ test('유저가 회원 탈퇴를 한다', async () => {
+ const { result } = renderHook(() => useWithdrawalMembership(), {
+ wrapper,
+ });
+
+ const { mutate } = result.current;
+
+ await waitFor(async () => {
+ mutate();
+
+ expect(MOCK_USER_INFO.nickname).toBe('cancel');
+ });
+ });
+});

frontend/__test__/hooks/query/useModifyUser.test.tsx

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useModifyUser } from '@hooks/query/user/useModifyUser';
+
+import { MOCK_USER_INFO } from '@mocks/mockData/user';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+ <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('useModifyUser 훅이 닉네임을 변경하는 지 확인한다', () => {
+ test('유저가 닉네임을 변경한다', async () => {
+ const { result } = renderHook(() => useModifyUser(), {
+ wrapper,
+ });
+
+ const { mutate } = result.current;
+
+ await waitFor(async () => {
+ mutate('wood');
+
+ expect(MOCK_USER_INFO.nickname).toBe('wood');
+ });
+ });
+});

frontend/src/api/userInfo.ts

@@ -26,6 +26,6 @@ export const modifyNickname = async (nickname: string) => {
  await patchFetch<ModifyNicknameRequest>(`${BASE_URL}/members/me/nickname`, { nickname });
 };
 
-export const cancelMembership = async () => {
+export const withdrawalMembership = async () => {
  await deleteFetch(`${BASE_URL}/members/me/delete`);
 };

frontend/src/hooks/query/user/useModifyUser.ts

@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { modifyNickname } from '@api/userInfo';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useModifyUser = () => {
+ const queryClient = useQueryClient();
+ const { mutate, isLoading } = useMutation({
+ mutationFn: (nickname: string) => modifyNickname(nickname),
+ onMutate: async newNickname => {
+ await queryClient.cancelQueries({ queryKey: [QUERY_KEY.USER_INFO] });
+ const previousNickname = queryClient.getQueryData([QUERY_KEY.USER_INFO]);
+ queryClient.setQueryData([QUERY_KEY.USER_INFO], newNickname);
+
+ return { previousNickname, newNickname };
+ },
+ onError: (error, __, context) => {
+ queryClient.setQueryData([QUERY_KEY.USER_INFO], context?.previousNickname);
+ window.console.error('닉네임 변경에 실패했습니다.');
+ },
+ onSettled: () => {
+ queryClient.invalidateQueries({ queryKey: [QUERY_KEY.USER_INFO] });
+ },
+ });
+
+ return { mutate, isLoading };
+};

frontend/src/hooks/query/user/useWithdrawalMembership.ts

@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { withdrawalMembership } from '@api/userInfo';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useWithdrawalMembership = () => {
+ const queryClient = useQueryClient();
+ const { mutate, isLoading } = useMutation({
+ mutationFn: () => withdrawalMembership(),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: [QUERY_KEY.USER_INFO] });
+ },
+ onError: () => {
+ window.console.error('회원 탈퇴에 실패했습니다.');
+ },
+ });
+
+ return { mutate, isLoading };
+};