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

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

* test: (#63) 유저 정보 테스트 코드 추가

* refactor: (#63) 코드 가독성을 위해 타입 이름 변경

---------

Co-authored-by: chsua <113416448+chsua@users.noreply.github.com>

frontend/__test__/api/user.test.ts

@@ -0,0 +1,19 @@
+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));
+ });
+
+ test('클라이언트에서 사용하는 유저 정보 API 명세가 [nickname, postCount, userPoint, userPoint, badge]으로 존재해야한다', async () => {
+ const data = await getUserInfo();
+
+ const userInfoKeys = Object.keys(data);
+
+ expect(userInfoKeys).toEqual(['nickname', 'postCount', 'userPoint', 'voteCount', 'badge']);
+ });
+});

frontend/src/api/wus/userInfo.ts

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

frontend/src/mocks/handlers.ts

@@ -2,6 +2,7 @@ import { example } from './example/get';
 import { mockVoteResult } from './getVoteDetail';
 import { mockPost } from './post';
 import { mockVote } from './vote';
+import { mockUserInfo } from './wus/userInfo';
 import { postListHandlers } from './wus/post';
 
 export const handlers = [
@@ -10,4 +11,5 @@ export const handlers = [
  ...mockVoteResult,
  ...mockVote,
  ...postListHandlers,
+ ...mockUserInfo,
 ];

frontend/src/mocks/mockData/user.ts

@@ -1,6 +1,6 @@
-import { User } from '@type/user';
+import { UserInfoResponse } from '@type/user';
 
-export const MOCK_USER_INFO: User = {
+export const MOCK_USER_INFO: UserInfoResponse = {
  nickname: '우아한 코끼리',
  postCount: 4,
  voteCount: 128,

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 UserInfoResponse {
+ nickname: string;
+ userPoint: number;
+ postCount: number;
+ voteCount: number;
+ badge?: string;
+}