[feat] 공통 인터페이스 구현 (#63)

* feat: DB 구조와 API docs를 참고한 공통 인터페이스 구현 및 적용 * refactor: PostCommentRequest 구현 * feat: api 스펙 변경에 맞춘 네이밍 변경 * feat: 프로필 사진 없을 때 기본 이미지 사용
YAPP-Github · Jan 26, 2023 · 96aabdb · 96aabdb
1 parent c4d077e
commit 96aabdb
Show file tree

Hide file tree

Showing 32 changed files with 238 additions and 319 deletions.
diff --git a/__mocks__/apis/handlers/comment.ts b/__mocks__/apis/handlers/comment.ts
@@ -1,9 +1,11 @@
 import { ResponseComposition, RestContext, RestRequest, rest } from 'msw';
 
 import { COMMENTS } from '@mocks/data/comment';
+import { MEMBER } from '@mocks/data/member';
 
-import { Comment, GetCommentsResponseData, PostCommentResponsData } from '@src/apis';
+import { GetCommentsResponse, PostCommentRequest, PostCommentResponse } from '@src/apis';
 import { BASE_URL } from '@src/configs/axios';
+import Comment from '@src/types/Comment';
 
 const comments = COMMENTS;
 
@@ -20,7 +22,7 @@ const getComments = (req: RestRequest, res: ResponseComposition, ctx: RestContex
 
   return res(
     ctx.status(200),
-    ctx.json<GetCommentsResponseData>({
+    ctx.json<GetCommentsResponse>({
       code: 'SUCCESS',
       message: '성공',
       data: responseData,
@@ -30,19 +32,13 @@ const getComments = (req: RestRequest, res: ResponseComposition, ctx: RestContex
   );
 };
 
-const createComment = (req: RestRequest<Comment['commentContent']>, res: ResponseComposition, ctx: RestContext) => {
-  const commentContent = req.body;
+const createComment = (req: RestRequest<PostCommentRequest>, res: ResponseComposition, ctx: RestContext) => {
+  const contents = req.body;
 
-  const comment = {
+  const comment: Comment = {
     commentId: Math.floor(Math.random() * 100),
-    member: {
-      id: 3,
-      name: 'MemberC',
-      profileImage: null,
-      jobCategory: 'product_manager',
-      workingYears: 1,
-    },
-    commentContent,
+    member: MEMBER,
+    contents,
     likeAmount: 0,
     liked: false,
   };
@@ -51,7 +47,7 @@ const createComment = (req: RestRequest<Comment['commentContent']>, res: Respons
 
   return res(
     ctx.status(201),
-    ctx.json<PostCommentResponsData>({
+    ctx.json<PostCommentResponse>({
       code: 'SUCCESS',
       message: '성공',
       data: comment,

diff --git a/__mocks__/apis/handlers/topic.ts b/__mocks__/apis/handlers/topic.ts
@@ -2,8 +2,9 @@ import { ResponseComposition, RestContext, RestRequest, rest } from 'msw';
 
 import { TOPIC } from '@mocks/data/topic';
 
-import { BaseResponse, Topic } from '@src/apis/';
+import { BaseResponse } from '@src/apis/';
 import { BASE_URL } from '@src/configs/axios';
+import Topic from '@src/types/Topic';
 
 const getTopic = (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
   return res(

diff --git a/__mocks__/data/comment.ts b/__mocks__/data/comment.ts
@@ -1,134 +1,79 @@
-import { Comment } from '@src/apis';
+import { MEMBER, MEMBER_DESIGNER, MEMBER_PM } from '@mocks/data/member';
+
+import Comment from '@src/types/Comment';
+
+export const COMMENT: Comment = {
+  commentId: 30,
+  member: MEMBER,
+  contents: 'Comment 10',
+  likeAmount: 30,
+  liked: false,
+};
+
+export const COMMENT_LIKED: Comment = {
+  commentId: 30,
+  member: MEMBER,
+  contents: 'Comment 10',
+  likeAmount: 30,
+  liked: true,
+};
 
 export const COMMENTS: Comment[] = [
+  COMMENT,
   {
-    commentId: 30,
-    member: {
-      id: 3,
-      name: 'MemberC',
-      profileImage: null,
-      jobCategory: 'product_manager',
-      workingYears: 1,
-    },
-    commentContent: 'Comment 10',
-    likeAmount: 30,
-    liked: false,
-  },
-  {
+    ...COMMENT,
     commentId: 29,
-    member: {
-      id: 2,
-      name: 'MemberB',
-      profileImage: null,
-      jobCategory: 'Designer',
-      workingYears: 5,
-    },
-    commentContent: 'Comment 10',
+    member: MEMBER_DESIGNER,
+    contents: 'Comment 10',
     likeAmount: 29,
-    liked: false,
   },
   {
+    ...COMMENT,
     commentId: 28,
-    member: {
-      id: 1,
-      name: 'MemberA',
-      profileImage: null,
-      jobCategory: 'developer',
-      workingYears: 3,
-    },
-    commentContent: 'Comment 10',
+    member: MEMBER_PM,
+    contents: 'Comment 10',
     likeAmount: 28,
-    liked: false,
   },
   {
+    ...COMMENT,
     commentId: 27,
-    member: {
-      id: 3,
-      name: 'MemberC',
-      profileImage: null,
-      jobCategory: 'product_manager',
-      workingYears: 1,
-    },
-    commentContent: 'Comment 9',
+    contents: 'Comment 9',
     likeAmount: 27,
-    liked: false,
   },
   {
+    ...COMMENT,
     commentId: 26,
-    member: {
-      id: 2,
-      name: 'MemberB',
-      profileImage: null,
-      jobCategory: 'Designer',
-      workingYears: 5,
-    },
-    commentContent: 'Comment 9',
+    contents: 'Comment 9',
     likeAmount: 26,
-    liked: false,
   },
   {
+    ...COMMENT,
     commentId: 25,
-    member: {
-      id: 1,
-      name: 'MemberA',
-      profileImage: null,
-      jobCategory: 'developer',
-      workingYears: 3,
-    },
-    commentContent: 'Comment 9',
+    contents: 'Comment 9',
     likeAmount: 25,
-    liked: false,
   },
   {
+    ...COMMENT,
     commentId: 24,
-    member: {
-      id: 3,
-      name: 'MemberC',
-      profileImage: null,
-      jobCategory: 'product_manager',
-      workingYears: 1,
-    },
-    commentContent: 'Comment 8',
+    contents: 'Comment 8',
     likeAmount: 24,
-    liked: false,
   },
   {
+    ...COMMENT,
     commentId: 23,
-    member: {
-      id: 2,
-      name: 'MemberB',
-      profileImage: null,
-      jobCategory: 'Designer',
-      workingYears: 5,
-    },
-    commentContent: 'Comment 8',
+    contents: 'Comment 8',
     likeAmount: 23,
-    liked: false,
   },
   {
+    ...COMMENT,
     commentId: 22,
-    member: {
-      id: 1,
-      name: 'MemberA',
-      profileImage: null,
-      jobCategory: 'developer',
-      workingYears: 3,
-    },
-    commentContent: 'Comment 8',
+    contents: 'Comment 8',
     likeAmount: 22,
-    liked: false,
   },
   {
+    ...COMMENT,
     commentId: 21,
-    member: {
-      id: 3,
-      name: 'MemberC',
-      profileImage: null,
-      jobCategory: 'product_manager',
-      workingYears: 1,
-    },
-    commentContent: 'Comment 7',
+    contents: 'Comment 7',
     likeAmount: 21,
-    liked: false,
   },
 ];
diff --git a/__mocks__/data/member.ts b/__mocks__/data/member.ts
@@ -1,9 +1,25 @@
-import { Member } from '@src/apis';
+import Member from '@src/types/Member';
 
 export const MEMBER: Member = {
-  id: 4,
-  name: 'MemberA',
+  memberId: 4,
+  nickname: 'Developer',
   profileImage: null,
   jobCategory: 'developer',
   workingYears: 3,
 };
+
+export const MEMBER_DESIGNER: Member = {
+  memberId: 2,
+  nickname: 'Designer',
+  profileImage: null,
+  jobCategory: 'designer',
+  workingYears: 5,
+};
+
+export const MEMBER_PM: Member = {
+  memberId: 2,
+  nickname: 'PM',
+  profileImage: null,
+  jobCategory: 'product_manager',
+  workingYears: 5,
+};
diff --git a/__mocks__/data/topic.ts b/__mocks__/data/topic.ts
@@ -1,37 +1,27 @@
-import { Topic } from '@src/apis';
+import { MEMBER } from '@mocks/data/member';
+import { VOTE_OPTIONS } from '@mocks/data/voteOption';
+
+import Topic from '@src/types/Topic';
 
 export const TOPIC: Topic = {
   topicId: 1,
   title: 'Vote1',
   contents: 'Content1',
-  member: {
-    id: 4,
-    name: 'MemberA',
-    profileImage: null,
-    jobCategory: 'developer',
-    workingYears: 3,
-  },
+  member: MEMBER,
   commentAmount: 2,
   voteAmount: 0,
   liked: false,
-  likedAmount: 0,
+  likeAmount: 0,
   tags: [],
-  voteOptions: [
-    {
-      id: 1,
-      text: 'Content1 OptionA',
-      voteOptionImageFilename: null,
-      codeBlock: null,
-      voted: false,
-      votedAmount: 1,
-    },
-    {
-      id: 2,
-      text: 'Content1 OptionB',
-      voteOptionImageFilename: null,
-      codeBlock: null,
-      voted: false,
-      votedAmount: 1,
-    },
-  ],
+  voteOptions: VOTE_OPTIONS,
 };
+
+export const TOPICS: Topic[] = [
+  { ...TOPIC },
+  { ...TOPIC, topicId: 1, title: '두번째' },
+  { ...TOPIC, topicId: 2, title: '세번째' },
+  { ...TOPIC, topicId: 3, title: '네번째' },
+  { ...TOPIC, topicId: 4, title: '다섯번째' },
+  { ...TOPIC, topicId: 5, title: '여섯번째' },
+  { ...TOPIC, topicId: 6, title: '일곱번째' },
+];
diff --git a/__mocks__/data/topics.ts b/__mocks__/data/topics.ts
diff --git a/__mocks__/data/voteOption.ts b/__mocks__/data/voteOption.ts
@@ -0,0 +1,18 @@
+import VoteOption from '@src/types/VoteOption';
+
+export const VOTE_OPTION: VoteOption = {
+  voteOptionId: 1,
+  text: 'Content1 OptionA',
+  image: null,
+  codeBlock: null,
+  voted: false,
+  voteAmount: 1,
+};
+
+export const VOTE_OPTION2: VoteOption = {
+  ...VOTE_OPTION,
+  voteOptionId: 2,
+  text: 'Content1 OptionB',
+};
+
+export const VOTE_OPTIONS: VoteOption[] = [VOTE_OPTION, VOTE_OPTION2];