refactor: (#205) 서버에서 받은 게시글 목록을 클라이언트에서 사용하는 게시글 목록 명세로 변환

woowacourse-teams · Aug 3, 2023 · 623dd3d · 623dd3d
1 parent c5e02f9
commit 623dd3d
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 40 deletions.
diff --git a/frontend/__test__/api/postList.test.ts b/frontend/__test__/api/postList.test.ts
@@ -2,7 +2,7 @@ import { getPostList } from '@api/postList';
 
 import { POST_TYPE, SORTING, STATUS } from '@constants/post';
 
-import { MOCK_POST_LIST } from '@mocks/mockData/postList';
+import { MOCK_TRANSFORM_POST_LIST } from '@mocks/mockData/postList';
 
 describe('서버와 통신하여 전체 게시글 목록을 불러오는지 확인한다.', () => {
  test('게시글 목록의 개수는 10개씩 불러온다.', async () => {
@@ -36,7 +36,7 @@ describe('서버와 통신하여 전체 게시글 목록을 불러오는지 확
  }
  );
 
- expect(data.postList).toEqual(MOCK_POST_LIST);
+ expect(data.postList).toEqual(MOCK_TRANSFORM_POST_LIST);
  });
 
  test('게시글 페이지의 정보를 불러온다.', async () => {
@@ -70,7 +70,7 @@ describe('서버와 통신하여 전체 게시글 목록을 불러오는지 확
  }
  );
 
- expect(data.postList).toEqual(MOCK_POST_LIST);
+ expect(data.postList).toEqual(MOCK_TRANSFORM_POST_LIST);
  });
 
  test('내가 작성한 게시글 페이지의 정보를 불러온다.', async () => {
@@ -87,7 +87,7 @@ describe('서버와 통신하여 전체 게시글 목록을 불러오는지 확
  }
  );
 
- expect(data.postList).toEqual(MOCK_POST_LIST);
+ expect(data.postList).toEqual(MOCK_TRANSFORM_POST_LIST);
  });
 
  test('내가 투표한 게시글 페이지의 정보를 불러온다.', async () => {
@@ -104,7 +104,7 @@ describe('서버와 통신하여 전체 게시글 목록을 불러오는지 확
  }
  );
 
- expect(data.postList).toEqual(MOCK_POST_LIST);
+ expect(data.postList).toEqual(MOCK_TRANSFORM_POST_LIST);
  });
 
  test('내가 검색한 게시글 페이지의 정보를 불러온다.', async () => {
@@ -121,6 +121,6 @@ describe('서버와 통신하여 전체 게시글 목록을 불러오는지 확
  }
  );
 
- expect(data.postList).toEqual(MOCK_POST_LIST);
+ expect(data.postList).toEqual(MOCK_TRANSFORM_POST_LIST);
  });
 });
diff --git a/frontend/__test__/hooks/query/usePostList.test.tsx b/frontend/__test__/hooks/query/usePostList.test.tsx
@@ -7,7 +7,7 @@ import { usePostList } from '@hooks/query/usePostList';
 
 import { POST_TYPE, SORTING, STATUS } from '@constants/post';
 
-import { MOCK_POST_LIST } from '@mocks/mockData/postList';
+import { MOCK_TRANSFORM_POST_LIST } from '@mocks/mockData/postList';
 
 const queryClient = new QueryClient();
 
@@ -35,7 +35,9 @@ describe('usePostList 훅이 게시글 목록을 불러오는지 확인한다.',
  }
  );
 
- await waitFor(() => expect(result.current.data?.pages[0].postList).toEqual(MOCK_POST_LIST));
+ await waitFor(() =>
+ expect(result.current.data?.pages[0].postList).toEqual(MOCK_TRANSFORM_POST_LIST)
+ );
  });
 
  test('카테고리별 게시글 목록을 불러온다.', async () => {
@@ -57,7 +59,9 @@ describe('usePostList 훅이 게시글 목록을 불러오는지 확인한다.',
  }
  );
 
- await waitFor(() => expect(result.current.data?.pages[0].postList).toEqual(MOCK_POST_LIST));
+ await waitFor(() =>
+ expect(result.current.data?.pages[0].postList).toEqual(MOCK_TRANSFORM_POST_LIST)
+ );
  });
 
  test('내가 작성한 게시글 목록을 불러온다.', async () => {
@@ -79,7 +83,9 @@ describe('usePostList 훅이 게시글 목록을 불러오는지 확인한다.',
  }
  );
 
- await waitFor(() => expect(result.current.data?.pages[0].postList).toEqual(MOCK_POST_LIST));
+ await waitFor(() =>
+ expect(result.current.data?.pages[0].postList).toEqual(MOCK_TRANSFORM_POST_LIST)
+ );
  });
 
  test('내가 투표한 게시글 목록을 불러온다.', async () => {
@@ -101,7 +107,9 @@ describe('usePostList 훅이 게시글 목록을 불러오는지 확인한다.',
  }
  );
 
- await waitFor(() => expect(result.current.data?.pages[0].postList).toEqual(MOCK_POST_LIST));
+ await waitFor(() =>
+ expect(result.current.data?.pages[0].postList).toEqual(MOCK_TRANSFORM_POST_LIST)
+ );
  });
 
  test('내가 검색한 게시글 목록을 불러온다.', async () => {
@@ -123,6 +131,8 @@ describe('usePostList 훅이 게시글 목록을 불러오는지 확인한다.',
  }
  );
 
- await waitFor(() => expect(result.current.data?.pages[0].postList).toEqual(MOCK_POST_LIST));
+ await waitFor(() =>
+ expect(result.current.data?.pages[0].postList).toEqual(MOCK_TRANSFORM_POST_LIST)
+ );
  });
 });
diff --git a/frontend/src/api/post.ts b/frontend/src/api/post.ts
@@ -1,4 +1,4 @@
-import { PostInfo } from '@type/post';
+import { PostInfo, PostInfoResponse } from '@type/post';
 
 import {
  getFetch,
@@ -11,6 +11,33 @@ import {
 
 const BASE_URL = process.env.VOTOGETHER_BASE_URL;
 
+export const transformPostResponse = (post: PostInfoResponse): PostInfo => {
+ return {
+ category: post.categories.map(category => ({ id: category.id, name: category.name })),
+ content: post.content,
+ endTime: post.deadline,
+ imageUrl: post.imageUrl,
+ postId: post.postId,
+ startTime: post.createdAt,
+ title: post.title,
+ voteInfo: {
+ allPeopleCount: post.voteInfo.totalVoteCount,
+ selectedOptionId: post.voteInfo.selectedOptionId,
+ options: post.voteInfo.options.map(option => ({
+ id: option.optionId,
+ text: option.content,
+ peopleCount: option.voteCount,
+ percent: option.votePercent,
+ imageUrl: option.imageUrl,
+ })),
+ },
+ writer: {
+ id: post.writer.id,
+ nickname: post.writer.nickname,
+ },
+ };
+};
+
 export const votePost = async (postId: number, optionId: number) => {
  return await postFetch(`${BASE_URL}/posts/${postId}/options/${optionId}`, '');
 };
@@ -27,7 +54,9 @@ export const changeVotedOption = async (postId: number, optionData: OptionData)
 };
 
 export const getPost = async (postId: number): Promise<PostInfo> => {
- return await getFetch<PostInfo>(`${BASE_URL}/posts/${postId}`);
+ const post = await getFetch<PostInfoResponse>(`${BASE_URL}/posts/${postId}`);
+
+ return transformPostResponse(post);
 };
 
 export const createPost = async (newPost: FormData) => {

diff --git a/frontend/src/api/postList.ts b/frontend/src/api/postList.ts
@@ -1,4 +1,4 @@
-import { PostInfo, PostListByOptionalOption, PostListByRequiredOption } from '@type/post';
+import { PostInfoResponse, PostListByOptionalOption, PostListByRequiredOption } from '@type/post';
 
 import {
  REQUEST_STATUS_OPTION,
@@ -10,6 +10,8 @@ import {
 
 import { getFetch } from '@utils/fetch';
 
+import { transformPostResponse } from './post';
+
 const BASE_URL = process.env.VOTOGETHER_BASE_URL;
 
 export const makePostListUrl = (
@@ -44,10 +46,10 @@ export const getPostList = async (
 
  const postListUrl = makePostListUrl(requiredOption, optionalOption);
 
- const postList = await getFetch<PostInfo[]>(postListUrl);
+ const postList = await getFetch<PostInfoResponse[]>(postListUrl);
 
  return {
  pageNumber,
- postList,
+ postList: postList.map(post => transformPostResponse(post)),
  };
 };
diff --git a/frontend/src/mocks/mockData/postList.ts b/frontend/src/mocks/mockData/postList.ts
@@ -1,8 +1,10 @@
-import { PostInfo } from '@type/post';
+import { PostInfo, PostInfoResponse } from '@type/post';
 
-export const MOCK_POST_LIST: PostInfo[] = [];
+import { transformPostResponse } from '@api/post';
 
-const getMockPost = () => ({
+export const MOCK_POST_LIST: PostInfoResponse[] = [];
+
+const getMockPost = (): PostInfoResponse => ({
  postId: Math.floor(Math.random() * 100000),
  title:
  '어느 곳에서 정보를 찾아야 할지도 막막한 사람들을 위한, 심심풀이로 나의 취향과 남의 취향을 비교해보고 싶은 사람들을 위한 프로젝트',
@@ -13,7 +15,7 @@ const getMockPost = () => ({
  content:
  '이는 사람들에게 재미와 정보, 두 가지를 줄 수 있습니다. 사람들은 MBTI, 밸런스게임처럼 나와 같은 사람들을 찾고, 나와 다른 사람들과 비교하는 것을 즐깁니다. 이를 컨텐츠화하여 보다 빠르게 질문하고 답변하며, 사람들의 반응을 확인할 수 있다면 사람들은 충분한 즐거움을 느낄 것입니다. 또한 20대가 많은 대학가에 창업을 하고 싶지만 20대의 의견을 모르겠을 때, 확실한 답은 아닐지라도 어느 정도의 가이드를 줄 수 있을 것입니다. 질문자에게 제공되는 성별/나이대별 투표 결과 정보는 질문자가 하고자 하는 의사결정의 근거가 될 수 있을 것입니다.',
  imageUrl: '',
- category: [
+ categories: [
  {
  id: 1,
  name: '개발',
@@ -27,39 +29,40 @@ const getMockPost = () => ({
  name: '상담',
  },
  ],
- startTime: '2023-07-12 12:40',
- endTime: '2023-07-13 18:40',
+ createdAt: '2023-07-12 12:40',
+ deadline: '2023-07-13 18:40',
  voteInfo: {
  selectedOptionId: 9,
- allPeopleCount: 123,
+ totalVoteCount: 123,
  options: [
  {
- id: 6,
- text: '당선',
- peopleCount: 30,
- percent: 30,
+ optionId: 6,
+ content: '당선',
+ voteCount: 30,
+ votePercent: 30,
  imageUrl: '',
  },
  {
- id: 7,
- text: 'votogether',
- peopleCount: 40,
- percent: 40,
+ optionId: 7,
+ content: 'votogether',
+ voteCount: 40,
+ votePercent: 40,
  imageUrl: '',
  },
  {
- id: 8,
- text: '인스타그램, 블라인드와 같은 SNS의 형식을 차용합니다. 누군가는 글을 쓰고, 누군가는 반응합니다. 다만, 댓글은 없습니다. 투표로 자신의 의견을 표현하고 이를 사람들에게 보여줍니다.',
- peopleCount: 20,
+ optionId: 8,
+ content:
+ '인스타그램, 블라인드와 같은 SNS의 형식을 차용합니다. 누군가는 글을 쓰고, 누군가는 반응합니다. 다만, 댓글은 없습니다. 투표로 자신의 의견을 표현하고 이를 사람들에게 보여줍니다.',
+ voteCount: 20,
  imageUrl: '',
- percent: 20,
+ votePercent: 20,
  },
  {
- id: 9,
- text: 'fun from choice, 오늘도 즐거운 한 표 ',
+ optionId: 9,
+ content: 'fun from choice, 오늘도 즐거운 한 표 ',
  imageUrl: 'https://source.unsplash.com/random',
- peopleCount: 10,
- percent: 10,
+ voteCount: 10,
+ votePercent: 10,
  },
  ],
  },
@@ -68,3 +71,7 @@ const getMockPost = () => ({
 for (let index = 0; index < 10; index += 1) {
  MOCK_POST_LIST.push(getMockPost());
 }
+
+export const MOCK_TRANSFORM_POST_LIST: PostInfo[] = MOCK_POST_LIST.map(POST =>
+ transformPostResponse(POST)
+);