Merge pull request #58 from CAUCSE/fix/#57

[FIX] board API 검증 및 연동 (게시판 조회 + 생성, 수정, 삭제, 복구)

src/@types/board.d.ts

@@ -1,4 +1,12 @@
 declare namespace Board {
+  export interface Dto {
+    name: string;
+    description: string;
+    createRoleList: User.Role[];
+    category: string;
+    circleId: string;
+  }
+
   export interface Item {
     key: string;
     name: string;
@@ -14,16 +22,17 @@ declare namespace Board {
     board: Board[];
   }
 
-  export interface ResponseDto {
+  export interface ResponseDto extends Dto {
     id: string;
-    category: string;
-    name: string;
-
-    // TODO: 타입 일치 필요
-    writable?: boolean;
-    isDeleted?: boolean;
-    circleId?: string;
-    circleName?: string;
-    createRoleList?: string[];
+    writable: boolean;
+    isDeleted: boolean;
+    circleName: string;
   }
+
+  interface RequestDto extends Dto {}
+
+  export interface CreateRequestDto extends RequestDto {}
+
+  // TODO: 게시판 관리 구현 시 서버와 조정 필요
+  export interface UpdateRequestDto extends RequestDto {}
 }

src/mocks/data/board.ts

@@ -0,0 +1,46 @@
+export const boardList: Board.ResponseDto[] = [
+  {
+    id: '0',
+    name: 'board_name0',
+    description: 'board_description0',
+    createRoleList: ['ADMIN'],
+    category: 'APP_NOTICE0',
+    writable: true,
+    isDeleted: false,
+    circleId: '2c9faf078d44f2c8018d543251e20008',
+    circleName: '퍼주마',
+  },
+  {
+    id: '1',
+    name: 'board_name1',
+    description: 'board_description1',
+    createRoleList: ['ADMIN'],
+    category: 'APP_NOTICE1',
+    writable: true,
+    isDeleted: false,
+    circleId: '2c9faf078d44f2c8018d543251e20008',
+    circleName: '퍼주마',
+  },
+  {
+    id: '2',
+    name: 'board_name2',
+    description: 'board_description2',
+    createRoleList: ['ADMIN'],
+    category: 'APP_NOTICE2',
+    writable: true,
+    isDeleted: false,
+    circleId: '2c9faf078d44f2c8018d543251e20008',
+    circleName: '퍼주마',
+  },
+  {
+    id: '3',
+    name: 'board_name3',
+    description: 'board_description3',
+    createRoleList: ['ADMIN'],
+    category: 'APP_NOTICE3',
+    writable: true,
+    isDeleted: false,
+    circleId: '2c9faf078d44f2c8018d543251e20008',
+    circleName: '퍼주마',
+  },
+];

src/mocks/handlers/boardHandler.ts

@@ -1,6 +1,6 @@
 import { http, HttpResponse } from 'msw';
 
-import { boardList } from './data/board';
+import { boardList } from '../data/board';
 
 export const boardHandler = [
   http.get('/api/v1/boards', () => {

src/mocks/handlers/circleHandler.ts

@@ -1,6 +1,6 @@
 import { http, HttpResponse } from 'msw';
 
-import { circleBoardList, circleList } from './data/circle';
+import { circleBoardList, circleList } from '../data/circle';
 
 const getAllCircleHandler = () => {
   return HttpResponse.json<Circle.FindByIdDto[]>(circleList);

src/mocks/handlers/commentHandler.ts

@@ -1,7 +1,7 @@
 import { http, HttpResponse } from 'msw';
 
-import { commentList } from './data/comment';
-import { replyCommentList } from './data/replyComment';
+import { commentList } from '../data/comment';
+import { replyCommentList } from '../data/replyComment';
 
 const getCommentHandler = ({ request }: { request: Request }) => {
   const url = new URL(request.url);

src/mocks/handlers/historyHandler.ts

@@ -1,6 +1,6 @@
 import { HttpResponse, ResponseResolver, http } from 'msw';
 
-import { historyCommentList, historyPostList } from './data/history';
+import { historyCommentList, historyPostList } from '../data/history';
 
 const getHistoryCommentHandler: ResponseResolver = () => {
   return HttpResponse.json<User.FindCommentsResponseDto>(historyCommentList);

src/mocks/handlers/homeHandler.ts

@@ -1,7 +1,7 @@
 import { http, HttpResponse } from 'msw';
 
-import { boardList } from './data/board';
-import { contentList } from './data/post';
+import { boardList } from '../data/board';
+import { contentList } from '../data/post';
 
 const getHomePageHandler = () => {
   return HttpResponse.json<Home.GetHomePageResponseDto>([

src/mocks/handlers/lockerHandler.ts

@@ -1,6 +1,6 @@
 import { HttpResponse, ResponseResolver, http } from 'msw';
 
-import { lockerAllLocationsList, lockerLocationsList } from './data/locker';
+import { lockerAllLocationsList, lockerLocationsList } from '../data/locker';
 
 const getAllLocationHandler: ResponseResolver = () => {
   return HttpResponse.json<Locker.FindAllLocationResponseDto>(lockerAllLocationsList);

src/mocks/handlers/postHandler.ts

@@ -1,6 +1,6 @@
 import { http, HttpResponse } from 'msw';
-import { commentList } from './data/comment';
-import { contentList } from './data/post';
+import { commentList } from '../data/comment';
+import { contentList } from '../data/post';
 
 const getAllPostHandler = ({ request }: { request: Request }) => {
   const url = new URL(request.url);

src/mocks/handlers/settingHandler.ts

@@ -6,7 +6,7 @@ import {
   inactiveUsersList,
   admissionsUsersList,
   circleUsersList,
-} from './data/setting';
+} from '../data/setting';
 
 const getPrivilegedUsersListHandler: ResponseResolver = () => {
   return HttpResponse.json<User.FindPrivilegedUsersResponseDto>(privilegedUsersList);

src/pages/board/boardList/BoardListPageUiStore.ts

@@ -9,17 +9,35 @@ export class BoardListPageUiStore {
     makeAutoObservable(this, {}, { autoBind: true });
   }
 
+  // 생성한 게시판의 카테고리가 이미 있으면 그 카테고리 안에 넣고, 없으면 새로 생성
   *fetch(): Generator {
     const boards = (yield Repo.fetch()) as Model.Board[];
     this.boards = new Map();
 
     boards.forEach((board: Model.Board) => {
       const arr = this.boards.get(board.category);
-
       if (arr) arr.push(board);
       else this.boards.set(board.category, [board]);
     });
   }
+
+  // TODO: 게시판 관리 화면 구현 시 추가 검증 필요
+  *create(body: Board.CreateRequestDto): Generator {
+    const board = (yield Repo.create(body)) as Model.Board;
+    const arr = this.boards.get(board.category);
+    if (arr) arr.push(board);
+    else this.boards.set(board.category, [board]);
+  }
+
+  // TODO: 게시판 관리 화면 구현 시 추가 검증 필요
+  *edit(boardId: string, data: Board.UpdateRequestDto): Generator {
+    yield Repo.update(boardId, data);
+  }
+
+  // TODO: 게시판 관리 화면 구현 시 추가 검증 필요
+  *deleteBoard(boardId: string): Generator {
+    yield Repo.delete(boardId);
+  }
 }
 
 export const PageUiStoreImpl = new BoardListPageUiStore();

src/stores/repositories/BoardRepo.ts

@@ -1,5 +1,3 @@
-import axios from 'axios';
-
 import { BoardModel } from '../models/BoardModel';
 
 import { API } from '@/configs/axios';
@@ -8,10 +6,29 @@ class BoardRepo {
   URI = '/api/v1/boards';
 
   fetch = async (): Promise<Model.Board[]> => {
-    // const { data } = await API.get(this.URI);
-    const { data } = await axios.get<Board.ResponseDto[]>(this.URI); // MSW
+    const { data } = await API.get<Board.ResponseDto[]>(this.URI);
+
+    return data
+      .filter(content => content.isDeleted === false)
+      .map(({ id, category, name }) => new BoardModel(id, category, name));
+  };
+
+  create = async (body: Board.CreateRequestDto): Promise<BoardModel> => {
+    const { data } = await API.post<Board.ResponseDto>(this.URI, body);
+    const { id, category, name } = data;
+    return new BoardModel(id, category, name);
+  };
+
+  update = async (boardId: string, body: Board.UpdateRequestDto): Promise<void> => {
+    await API.put(`${this.URI}/${boardId}`, body);
+  };
+
+  delete = async (boardId: string): Promise<void> => {
+    await API.delete(`${this.URI}/${boardId}`);
+  };
 
-    return data.map(({ id, category, name }) => new BoardModel(id, category, name));
+  restore = async (boardId: string): Promise<void> => {
+    await API.put(`${this.URI}/${boardId}`);
   };
 }