회원 닉네임 수정, 회원 탈퇴 fetch 함수 구현 및 MSW 코드 작성

frontend/__test__/api/user.test.ts

@@ -1,4 +1,9 @@
-import { getUserInfo, transformUserInfoResponse } from '@api/wus/userInfo';
+import {
+ cancelMembership,
+ getUserInfo,
+ modifyNickname,
+ transformUserInfoResponse,
+} from '@api/wus/userInfo';
 
 import { MOCK_USER_INFO } from '@mocks/mockData/user';
 
@@ -16,4 +21,16 @@ describe('서버와 통신하여 유저의 정보를 불러올 수 있어야 한
 
  expect(userInfoKeys).toEqual(['nickname', 'postCount', 'userPoint', 'voteCount', 'badge']);
  });
+
+ test('유저의 닉네임을 수정한다', async () => {
+ await modifyNickname('wood');
+
+ expect(MOCK_USER_INFO.nickname).toBe('wood');
+ });
+
+ test('유저가 회원 탈퇴를 한다', async () => {
+ await cancelMembership();
+
+ expect(MOCK_USER_INFO.nickname).toBe('cancel');
+ });
 });

frontend/src/api/wus/userInfo.ts

@@ -1,6 +1,6 @@
-import type { UserInfoResponse, User } from '@type/user';
+import type { UserInfoResponse, User, ModifyNicknameRequest } from '@type/user';
 
-import { getFetch } from '@utils/fetch';
+import { deleteFetch, getFetch, patchFetch } from '@utils/fetch';
 
 export const transformUserInfoResponse = (userInfo: UserInfoResponse): User => {
  const { nickname, postCount, userPoint, voteCount, badge } = userInfo;
@@ -19,3 +19,11 @@ export const getUserInfo = async () => {
 
  return transformUserInfoResponse(userInfo);
 };
+
+export const modifyNickname = async (nickname: string) => {
+ await patchFetch<ModifyNicknameRequest>('/members/me/nickname', { nickname });
+};
+
+export const cancelMembership = async () => {
+ await deleteFetch('/members/me/delete');
+};

frontend/src/mocks/wus/userInfo.ts

@@ -6,4 +6,16 @@ export const mockUserInfo = [
  rest.get('/members/me', (req, res, ctx) => {
  return res(ctx.status(200), ctx.json(MOCK_USER_INFO));
  }),
+
+ rest.patch('/members/me/nickname', (req, res, ctx) => {
+ MOCK_USER_INFO.nickname = 'wood';
+
+ return res(ctx.status(200), ctx.json({ ok: true }));
+ }),
+
+ rest.delete('/members/me/delete', (req, res, ctx) => {
+ MOCK_USER_INFO.nickname = 'cancel';
+
+ return res(ctx.status(204));
+ }),
 ];

frontend/src/types/user.ts

@@ -13,3 +13,7 @@ export interface UserInfoResponse {
  voteCount: number;
  badge?: string;
 }
+
+export interface ModifyNicknameRequest {
+ nickname: string;
+}

frontend/src/utils/fetch.ts

@@ -55,17 +55,20 @@ export const putFetch = async <T, R>(url: string, body: T): Promise<R | void> =>
  return data;
 };
 
-export const patchFetch = async (url: string) => {
+export const patchFetch = async <T>(url: string, body: T) => {
  const response = await fetch(url, {
  method: 'PATCH',
  headers,
+ body: JSON.stringify(body),
  });
 
  const data = await response.json();
 
  if (!response.ok) {
  throw new Error(data.message);
  }
+
+ return response;
 };
 
 export const deleteFetch = async (url: string) => {
@@ -74,11 +77,7 @@ export const deleteFetch = async (url: string) => {
  headers,
  });
 
- const data = await response.json();
-
- if (!response.ok) {
- throw new Error(data.message);
- }
+ return response;
 };
 
 export const multiPostFetch = async (url: string, body: FormData) => {