feat: (#63) 유저 정보를 불러오는 패치 api 함수 구현 및 msw mocking 구현

frontend/__test__/api/user.test.ts

@@ -0,0 +1,11 @@
+import { getUserInfo, transformUserInfoResponse } from '@api/wus/userInfo';
+
+import { MOCK_USER_INFO } from '@mocks/mockData/user';
+
+describe('서버와 통신하여 유저의 정보를 불러올 수 있어야 한다.', () => {
+ test('유저의 정보를 불러온다', async () => {
+ const data = await getUserInfo();
+
+ expect(data).toEqual(transformUserInfoResponse(MOCK_USER_INFO));
+ });
+});

frontend/src/api/wus/userInfo.ts

@@ -0,0 +1,21 @@
+import { ServerUser, User } from '@type/user';
+
+import { getFetch } from '@utils/fetch';
+
+export const transformUserInfoResponse = (userInfo: ServerUser): User => {
+ const { nickname, postCount, userPoint, voteCount, badge } = userInfo;
+
+ return {
+ nickname,
+ postCount,
+ userPoint,
+ voteCount,
+ badge,
+ };
+};
+
+export const getUserInfo = async () => {
+ const userInfo = await getFetch<ServerUser>('/members/me');
+
+ return transformUserInfoResponse(userInfo);
+};

frontend/src/mocks/handlers.ts

@@ -1,7 +1,7 @@
 import { example } from './example/get';
-
 import { mockVoteResult } from './getVoteDetail';
 import { mockPost } from './post';
 import { mockVote } from './vote';
+import { mockUserInfo } from './wus/userInfo';
 
-export const handlers = [...example, ...mockPost, ...mockVoteResult, ...mockVote];
+export const handlers = [...example, ...mockPost, ...mockVoteResult, ...mockVote, ...mockUserInfo];

frontend/src/mocks/wus/userInfo.ts

@@ -0,0 +1,9 @@
+import { rest } from 'msw';
+
+import { MOCK_USER_INFO } from '@mocks/mockData/user';
+
+export const mockUserInfo = [
+ rest.get('/members/me', (req, res, ctx) => {
+ return res(ctx.status(200), ctx.json(MOCK_USER_INFO));
+ }),
+];

frontend/src/types/user.ts

@@ -5,3 +5,11 @@ export interface User {
  voteCount: number;
  badge?: string;
 }
+
+export interface ServerUser {
+ nickname: string;
+ userPoint: number;
+ postCount: number;
+ voteCount: number;
+ badge?: string;
+}