bugfix menu tree dnd update

2021-11-19 17:09:08 +09:00
parent 5068dca753
commit d289bc883d
20 changed files with 726 additions and 656 deletions
--- a/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/api/board/dto/BoardListResponseDto.java
+++ b/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/api/board/dto/BoardListResponseDto.java
@@ -58,6 +58,11 @@ public class BoardListResponseDto implements Serializable {
     */
    private LocalDateTime createdDate;

+    /**
+     * 게시글이 있는지 여부
+     */
+    private Boolean isPosts;
+
    /**
     * 게시판 목록 응답 DTO 생성자
     *
@@ -66,10 +71,11 @@ public class BoardListResponseDto implements Serializable {
     * @param skinTypeCode     스킨 유형 코드
     */
    @QueryProjection
-    public BoardListResponseDto(Integer boardNo, String boardName, String skinTypeCode) {
+    public BoardListResponseDto(Integer boardNo, String boardName, String skinTypeCode, Boolean isPosts) {
        this.boardNo = boardNo;
        this.boardName = boardName;
        this.skinTypeCode = skinTypeCode;
+        this.isPosts = isPosts;
    }

    /**
@@ -82,12 +88,13 @@ public class BoardListResponseDto implements Serializable {
     * @param createdDate      생성 일시
     */
    @QueryProjection
-    public BoardListResponseDto(Integer boardNo, String boardName, String skinTypeCode, String skinTypeCodeName, LocalDateTime createdDate) {
+    public BoardListResponseDto(Integer boardNo, String boardName, String skinTypeCode, String skinTypeCodeName, LocalDateTime createdDate, Boolean isPosts) {
        this.boardNo = boardNo;
        this.boardName = boardName;
        this.skinTypeCode = skinTypeCode;
        this.skinTypeCodeName = skinTypeCodeName;
        this.createdDate = createdDate;
+        this.isPosts = isPosts;
    }

 }
--- a/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/api/posts/dto/PostsDeleteRequestDto.java
+++ b/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/api/posts/dto/PostsDeleteRequestDto.java
@@ -1,6 +1,7 @@
 package org.egovframe.cloud.boardservice.api.posts.dto;

 import lombok.Getter;
+import org.egovframe.cloud.boardservice.domain.board.Board;
 import org.egovframe.cloud.boardservice.domain.posts.Posts;
 import org.egovframe.cloud.boardservice.domain.posts.PostsId;

@@ -49,6 +50,9 @@ public class PostsDeleteRequestDto {
                        .boardNo(boardNo)
                        .postsNo(postsNo)
                        .build())
+                .board(Board.builder()
+                    .boardNo(boardNo)
+                    .build())
                .build();
    }

--- a/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/api/posts/dto/PostsSimpleResponseDto.java
+++ b/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/api/posts/dto/PostsSimpleResponseDto.java
@@ -1,6 +1,7 @@
 package org.egovframe.cloud.boardservice.api.posts.dto;

 import com.querydsl.core.annotations.QueryProjection;
+import java.time.LocalDate;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
 import org.egovframe.cloud.boardservice.api.board.dto.BoardResponseDto;
@@ -92,7 +93,8 @@ public class PostsSimpleResponseDto implements Serializable {
     */
    public PostsSimpleResponseDto setIsNew(BoardResponseDto boardResponseDto) {
        if (boardResponseDto.getNewDisplayDayCount() != null) {
-            this.isNew = createdDate.plusDays(boardResponseDto.getNewDisplayDayCount()).compareTo(LocalDateTime.now()) <= 0;
+            int compareTo = createdDate.toLocalDate().compareTo(LocalDate.now());
+            this.isNew = 0 <= compareTo && compareTo <= boardResponseDto.getNewDisplayDayCount();
        } else {
            this.isNew = false;
        }
--- a/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/domain/board/Board.java
+++ b/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/domain/board/Board.java
@@ -1,12 +1,17 @@
 package org.egovframe.cloud.boardservice.domain.board;

+import java.util.ArrayList;
+import java.util.List;
 import lombok.Builder;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
+import org.egovframe.cloud.boardservice.domain.posts.Posts;
 import org.egovframe.cloud.servlet.domain.BaseEntity;

 import javax.persistence.*;
 import java.math.BigDecimal;
+import org.hibernate.annotations.OnDelete;
+import org.hibernate.annotations.OnDeleteAction;

 /**
 * org.egovframe.cloud.boardservice.domain.board.Board
@@ -113,9 +118,9 @@ public class Board extends BaseEntity {
    /**
     * 게시물 엔티티
     */
-    /*@OneToMany(mappedBy = "board", fetch = FetchType.LAZY)
+    @OneToMany(mappedBy = "board", fetch = FetchType.LAZY)
    @OnDelete(action = OnDeleteAction.CASCADE)
-    private List<Posts> posts;*/
+    private List<Posts> posts = new ArrayList<>();

    /**
     * 빌더 패턴 클래스 생성자
--- a/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/domain/board/BoardRepositoryImpl.java
+++ b/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/domain/board/BoardRepositoryImpl.java
@@ -1,11 +1,14 @@
 package org.egovframe.cloud.boardservice.domain.board;

+import static com.querydsl.core.types.Projections.constructor;
+
 import com.google.common.base.CaseFormat;
 import com.querydsl.core.QueryResults;
 import com.querydsl.core.types.Order;
 import com.querydsl.core.types.OrderSpecifier;
 import com.querydsl.core.types.Path;
 import com.querydsl.core.types.dsl.BooleanExpression;
+import com.querydsl.core.types.dsl.CaseBuilder;
 import com.querydsl.core.types.dsl.Expressions;
 import com.querydsl.jpa.JPQLQuery;
 import com.querydsl.jpa.impl.JPAQueryFactory;
@@ -58,12 +61,16 @@ public class BoardRepositoryImpl implements BoardRepositoryCustom {
    @Override
 	public Page<BoardListResponseDto> findPage(RequestDto requestDto, Pageable pageable) {
        JPQLQuery<BoardListResponseDto> query = jpaQueryFactory
-                .select(new QBoardListResponseDto(
+                .select(constructor(BoardListResponseDto.class,
                        QBoard.board.boardNo,
                        QBoard.board.boardName,
                        QBoard.board.skinTypeCode,
                        Expressions.as(QCode.code.codeName, "skinTypeCodeName"),
-                        QBoard.board.createdDate
+                        QBoard.board.createdDate,
+                        new CaseBuilder()
+                            .when(QBoard.board.posts.size().gt(0))
+                            .then(Boolean.TRUE)
+                            .otherwise(Boolean.FALSE).as("isPosts")
                ))
                .from(QBoard.board)
                .leftJoin(QCode.code).on(QBoard.board.skinTypeCode.eq(QCode.code.codeId).and(QCode.code.parentCodeId.eq("skin_type_code")))
--- a/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/domain/posts/Posts.java
+++ b/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/domain/posts/Posts.java
@@ -128,7 +128,6 @@ public class Posts extends BaseEntity {
                 String postsContent, String postsAnswerContent, String attachmentCode,
                 Integer readCount, Boolean noticeAt, Integer deleteAt,
                 User creator, List<Comment> comments) {
-        this.board = board;
        this.postsId = postsId;
        this.postsTitle = postsTitle;
        this.postsContent = postsContent;
@@ -139,6 +138,17 @@ public class Posts extends BaseEntity {
        this.deleteAt = deleteAt;
        this.creator = creator;
        this.comments = comments == null ? null : new ArrayList<>(comments);
+        setBoard(board);
+    }
+
+    /**
+     * 연관관계 설정
+     *
+     * @param board
+     */
+    public void setBoard(Board board) {
+        this.board = board;
+        board.getPosts().add(this);
    }

    /**
--- a/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/service/posts/PostsService.java
+++ b/backend/board-service/src/main/java/org/egovframe/cloud/boardservice/service/posts/PostsService.java
@@ -1,23 +1,9 @@
 package org.egovframe.cloud.boardservice.service.posts;

-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.stream.Collectors;
 import lombok.RequiredArgsConstructor;
 import org.egovframe.cloud.boardservice.api.board.dto.BoardResponseDto;
-import org.egovframe.cloud.boardservice.api.posts.dto.PostsDeleteRequestDto;
-import org.egovframe.cloud.boardservice.api.posts.dto.PostsListResponseDto;
-import org.egovframe.cloud.boardservice.api.posts.dto.PostsResponseDto;
-import org.egovframe.cloud.boardservice.api.posts.dto.PostsSaveRequestDto;
-import org.egovframe.cloud.boardservice.api.posts.dto.PostsSimpleResponseDto;
-import org.egovframe.cloud.boardservice.api.posts.dto.PostsSimpleSaveRequestDto;
-import org.egovframe.cloud.boardservice.api.posts.dto.PostsUpdateRequestDto;
-import org.egovframe.cloud.boardservice.domain.posts.Posts;
-import org.egovframe.cloud.boardservice.domain.posts.PostsId;
-import org.egovframe.cloud.boardservice.domain.posts.PostsRead;
-import org.egovframe.cloud.boardservice.domain.posts.PostsReadRepository;
-import org.egovframe.cloud.boardservice.domain.posts.PostsRepository;
+import org.egovframe.cloud.boardservice.api.posts.dto.*;
+import org.egovframe.cloud.boardservice.domain.posts.*;
 import org.egovframe.cloud.boardservice.service.board.BoardService;
 import org.egovframe.cloud.common.dto.AttachmentEntityMessage;
 import org.egovframe.cloud.common.dto.RequestDto;
@@ -32,6 +18,11 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import org.springframework.util.StringUtils;

+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
 /**
 * org.egovframe.cloud.postsservice.service.posts.PostsService
 * <p>
@@ -111,7 +102,6 @@ public class PostsService extends AbstractService {
                board.setNewestPosts(posts.stream().map(post -> post.setIsNew(board))
                    .collect(Collectors.toList()));
            }
-
            data.put(board.getBoardNo(), board);
        }

--- a/backend/portal-service/src/main/java/org/egovframe/cloud/portalservice/api/menu/MenuApiController.java
+++ b/backend/portal-service/src/main/java/org/egovframe/cloud/portalservice/api/menu/MenuApiController.java
@@ -66,7 +66,7 @@ public class MenuApiController {
     */
    @GetMapping("/api/v1/menus/{menuId}")
    public MenuResponseDto findById(@PathVariable Long menuId) {
-        return menuService.findById(menuId);
+        return menuService.findMenuResponseDtoById(menuId);
    }

    /**
--- a/backend/portal-service/src/main/java/org/egovframe/cloud/portalservice/api/menu/dto/MenuTreeResponseDto.java
+++ b/backend/portal-service/src/main/java/org/egovframe/cloud/portalservice/api/menu/dto/MenuTreeResponseDto.java
@@ -1,5 +1,6 @@
 package org.egovframe.cloud.portalservice.api.menu.dto;

+import java.util.Comparator;
 import lombok.Builder;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
@@ -52,6 +53,9 @@ public class MenuTreeResponseDto {
        this.level = entity.getLevel();
        this.children = entity.getChildren().stream()
                .map(children -> new MenuTreeResponseDto(children))
+                .sorted(Comparator.comparing(MenuTreeResponseDto::getSortSeq))
                .collect(Collectors.toList());
+
    }
+
 }
--- a/backend/portal-service/src/main/java/org/egovframe/cloud/portalservice/domain/menu/Menu.java
+++ b/backend/portal-service/src/main/java/org/egovframe/cloud/portalservice/domain/menu/Menu.java
@@ -127,20 +127,9 @@ public class Menu extends BaseEntity {
    public Menu updateDnD(Menu parent, Integer sortSeq, Integer level) {
        this.sortSeq = sortSeq;
        this.level = level;
+
        if (parent == null) {
-            Menu oldParent = this.getParent();
-
-            if (oldParent == null) {
-                return this;
-            }
-
-            Menu old = oldParent.getChildren().stream().filter(item -> item.getId().equals(this.id)).findAny().orElse(null);
-            if (old != null) {
-                oldParent.getChildren().remove(old);
-            }
-            this.parent = null;
-
-            return this;
+            return updateOldParent();
        }

        if (parent.equals(this.parent)) {
@@ -149,7 +138,21 @@ public class Menu extends BaseEntity {

        this.parent = parent;
        parent.getChildren().add(this);
+        return this;
+    }

+    private Menu updateOldParent() {
+        Menu oldParent = this.getParent();
+
+        if (oldParent == null) {
+            return this;
+        }
+
+        Menu old = oldParent.getChildren().stream().filter(item -> item.getId().equals(this.id)).findAny().orElse(null);
+        if (old != null) {
+            oldParent.getChildren().remove(old);
+        }
+        this.parent = null;
        return this;
    }

--- a/backend/portal-service/src/main/java/org/egovframe/cloud/portalservice/service/menu/MenuService.java
+++ b/backend/portal-service/src/main/java/org/egovframe/cloud/portalservice/service/menu/MenuService.java
@@ -35,7 +35,7 @@ import java.util.List;
 */
@Slf4j
@RequiredArgsConstructor
-@Transactional(readOnly = true)
+@Transactional
@Service
 public class MenuService extends AbstractService {

@@ -48,6 +48,7 @@ public class MenuService extends AbstractService {
     * @param siteId
     * @return
     */
+    @Transactional(readOnly = true)
    public List<MenuTreeResponseDto> findTreeBySiteId(Long siteId) {
        return menuRepository.findTreeBySiteId(siteId);
    }
@@ -58,7 +59,8 @@ public class MenuService extends AbstractService {
     * @param menuId
     * @return
     */
-    public MenuResponseDto findById(Long menuId) {
+    @Transactional(readOnly = true)
+    public MenuResponseDto findMenuResponseDtoById(Long menuId) {
        return menuRepository.findByIdWithConnectName(menuId);
    }

@@ -68,7 +70,6 @@ public class MenuService extends AbstractService {
     * @param menuTreeRequestDto
     * @return
     */
-    @Transactional
    public MenuTreeResponseDto save(MenuTreeRequestDto menuTreeRequestDto) {
        Site site = siteRepository.findById(menuTreeRequestDto.getSiteId())
                .orElseThrow(() ->
@@ -77,9 +78,7 @@ public class MenuService extends AbstractService {
        Menu parent = null;

        if (menuTreeRequestDto.getParentId() != null) {
-            parent = menuRepository.findById(menuTreeRequestDto.getParentId())
-                    .orElseThrow(() ->
-                            new EntityNotFoundException(getMessage("valid.notexists.format", new Object[]{getMessage("menu")}) + " ID= " + menuTreeRequestDto.getParentId()));
+            parent = findById(menuTreeRequestDto.getParentId());
        }

        Menu menu = menuRepository.save(Menu.builder()
@@ -102,11 +101,8 @@ public class MenuService extends AbstractService {
     * @param name
     * @return
     */
-    @Transactional
    public MenuTreeResponseDto updateName(Long menuId, String name) throws EntityNotFoundException {
-        Menu menu = menuRepository.findById(menuId)
-                .orElseThrow(() ->
-                        new EntityNotFoundException(getMessage("valid.notexists.format", new Object[]{getMessage("menu")}) + " ID= " + menuId));
+        Menu menu = findById(menuId);

        menu.updateName(name);

@@ -121,11 +117,8 @@ public class MenuService extends AbstractService {
     * @param updateRequestDto
     * @return
     */
-    @Transactional
    public MenuResponseDto update(Long menuId, MenuUpdateRequestDto updateRequestDto) throws EntityNotFoundException, BusinessMessageException {
-        Menu menu = menuRepository.findById(menuId)
-                .orElseThrow(() ->
-                        new EntityNotFoundException(getMessage("valid.notexists.format", new Object[]{getMessage("menu")}) + " ID= " + menuId));
+        Menu menu = findById(menuId);

        //컨텐츠 or 게시판인 경우 connectId 필수
        if ("contents".equals(updateRequestDto.getMenuType()) || "board".equals(updateRequestDto.getMenuType())) {
@@ -153,11 +146,8 @@ public class MenuService extends AbstractService {
     *
     * @param menuId
     */
-    @Transactional
    public void delete(Long menuId) {
-        Menu menu = menuRepository.findById(menuId)
-                .orElseThrow(() ->
-                        new EntityNotFoundException(getMessage("valid.notexists.format", new Object[]{getMessage("menu")}) + " ID= " + menuId));
+        Menu menu = findById(menuId);
        menuRepository.delete(menu);
    }

@@ -170,10 +160,10 @@ public class MenuService extends AbstractService {
     * @param level
     */
    private void recursive(MenuDnDRequestDto dto, Menu parent, Integer sortSeq, Integer level) {
-        Menu menu = menuRepository.findById(dto.getMenuId())
-                .orElseThrow(() ->
-                        new EntityNotFoundException(getMessage("valid.notexists.format", new Object[]{getMessage("menu")}) + " ID= " + dto.getMenuId()));
+        Menu menu = findById(dto.getMenuId());
+
        menu.updateDnD(parent, sortSeq, level);
+
        if (dto.getChildren() == null || dto.getChildren().size() <= 0) {
            return;
        }
@@ -191,11 +181,21 @@ public class MenuService extends AbstractService {
     * @param menuDnDRequestDtoList
     * @return
     */
-    @Transactional
    public Long updateDnD(Long siteId, List<MenuDnDRequestDto> menuDnDRequestDtoList) {
        for (int i = 0; i < menuDnDRequestDtoList.size(); i++) {
-            recursive(menuDnDRequestDtoList.get(i), null, i+1, 1);
+            MenuDnDRequestDto requestDto = menuDnDRequestDtoList.get(i);
+            Menu parent = null;
+            if (requestDto.getParentId() != null) {
+                parent = findById(requestDto.getParentId());
+            }
+            recursive(requestDto, parent, requestDto.getSortSeq(), requestDto.getLevel());
        }
        return siteId;
    }
+
+    private Menu findById(Long id) {
+        return menuRepository.findById(id)
+            .orElseThrow(() ->
+                new EntityNotFoundException(getMessage("valid.notexists.format", new Object[]{getMessage("menu")}) + " ID= " + id));
+    }
 }
--- a/frontend/admin/src/components/DraggableTreeMenu/TreeJson.ts
+++ b/frontend/admin/src/components/DraggableTreeMenu/TreeJson.ts
@@ -0,0 +1,81 @@
+import {
+  ItemId,
+  TreeData,
+  TreeDestinationPosition,
+  TreeItem,
+  TreeSourcePosition,
+} from '@atlaskit/tree'
+import { IMenuTree } from '@service'
+import produce from 'immer'
+
+export class TreeJson {
+  private readonly treeJson: IMenuTree[]
+  private readonly treeData: Record<ItemId, TreeItem>
+  private readonly source: TreeSourcePosition
+  private readonly destination: TreeDestinationPosition
+
+  constructor(
+    tree: TreeData,
+    source: TreeSourcePosition,
+    destination: TreeDestinationPosition,
+  ) {
+    this.treeJson = []
+    this.treeData = tree.items
+    this.source = source
+    this.destination = destination
+  }
+
+  convert(): IMenuTree[] {
+    if (this.source.parentId === this.destination.parentId) {
+      if (this.source.parentId === '0') {
+        this.updateTopLevel()
+        return this.treeJson
+      }
+
+      this.update(this.source.parentId)
+      return this.treeJson
+    }
+
+    this.update(this.source.parentId)
+    this.update(this.destination.parentId)
+
+    return this.treeJson
+  }
+
+  private updateTopLevel() {
+    const children = this.treeData['0'].children
+
+    children.map((item, idx) => {
+      let toplevel = this.treeData[item]
+      this.treeJson.push(
+        produce(toplevel.data as IMenuTree, draft => {
+          draft.sortSeq = idx + 1
+        }),
+      )
+    })
+  }
+
+  private update(parentId: ItemId) {
+    let parent = this.treeData[parentId]
+
+    let children: IMenuTree[] = []
+
+    const menuId = parent.data?.menuId
+    parent.children.map((item, idx) => {
+      let data = this.treeData[item].data as IMenuTree
+      let child = produce(data, draft => {
+        draft.sortSeq = idx + 1
+        draft.parentId = menuId
+      })
+      children.push(child)
+    })
+
+    if (parent.data) {
+      this.treeJson.push(
+        produce(parent.data as IMenuTree, draft => {
+          draft.children = children
+        }),
+      )
+    }
+  }
+}
--- a/frontend/admin/src/components/DraggableTreeMenu/TreeUtils.ts
+++ b/frontend/admin/src/components/DraggableTreeMenu/TreeUtils.ts
@@ -1,4 +1,3 @@
-import { TreeData, TreeItem } from '@atlaskit/tree'
 import { IMenuTree } from '@service'
 import produce from 'immer'
 import DraggableTreeBuilder from './DraaggableTreeBuilder'
@@ -28,97 +27,6 @@ export const convertJsonToTreeData = (data: IMenuTree[]) => {
  return root.build()
 }

-/**
- * atlaskit flat tree data ->  hierarchy json data
- *
- * @param tree
- * @returns
- */
-export const convertTreeDataToJson = (tree: TreeData) => {
-  let newTreeItem: TreeItem[] = []
-
-  const arrTree = Object.values(tree.items)
-  const root = arrTree.shift()
-
-  root.children.map((itemId, index) => {
-    const data = arrTree.splice(
-      arrTree.findIndex(item => item.id === itemId),
-      1,
-    )
-    data.map(item => {
-      item.data = produce(item.data, draft => {
-        draft.sortSeq = index + 1
-        draft.parentId = null
-      })
-      newTreeItem.push(item)
-    })
-  })
-
-  const convert = (target: TreeItem[], source: TreeItem[]) => {
-    while (source.length > 0) {
-      const data = source.shift()
-
-      if (data.hasChildren) {
-        target.push(
-          produce(data, draft => {
-            draft.hasChildren = false
-          }),
-        )
-      }
-
-      const idx = target.findIndex(item => item.children.includes(data.id))
-
-      if (idx > -1) {
-        const parent = produce(target[idx].data as IMenuTree, draft => {
-          const childIdx = draft.children.findIndex(
-            i => i.menuId === data.data.menuId,
-          )
-
-          const child = produce(data.data as IMenuTree, childDraft => {
-            if (childIdx === -1) {
-              childDraft.sortSeq = draft.children.length + 1
-            }
-            childDraft.parentId = draft.menuId
-          })
-
-          if (childIdx > -1) {
-            draft.children[childIdx] = child
-          } else {
-            draft.children.push(child)
-          }
-        })
-
-        target[idx] = produce(target[idx], draft => {
-          draft.data = parent
-        })
-      }
-    }
-
-    return target
-  }
-
-  let target = newTreeItem.slice()
-  let source = arrTree.slice()
-
-  while (true) {
-    newTreeItem = convert(target, source).slice()
-
-    if (root.children.length === newTreeItem.length) {
-      break
-    }
-
-    target = newTreeItem.filter(item => root.children.includes(item.id))
-    source = newTreeItem.filter(item => !root.children.includes(item.id))
-  }
-
-  const newData: IMenuTree[] = []
-  newTreeItem.map(treeItem => {
-    newData.push(Object.assign(treeItem.data))
-  })
-
-  return newData
-}
-
 export interface IFindTree {
  item: any
  parent: any
--- a/frontend/admin/src/components/DraggableTreeMenu/index.tsx
+++ b/frontend/admin/src/components/DraggableTreeMenu/index.tsx
@@ -1,5 +1,3 @@
-import React, { useEffect, useState } from 'react'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import Tree, {
  ItemId,
  moveItemOnTree,
@@ -9,11 +7,14 @@ import Tree, {
  TreeDestinationPosition,
  TreeSourcePosition,
 } from '@atlaskit/tree'
-import { convertTreeDataToJson, convertJsonToTreeData } from './TreeUtils'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { IMenuTree } from '@service'
-import DraaggableTreeMenuItem from './DraaggableTreeMenuItem'
-import { useRecoilState, useRecoilValue } from 'recoil'
 import { draggableTreeExpandedAtom, draggableTreeSelectedAtom } from '@stores'
+import React, { useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import DraaggableTreeMenuItem from './DraaggableTreeMenuItem'
+import { TreeJson } from './TreeJson'
+import { convertJsonToTreeData } from './TreeUtils'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -126,8 +127,9 @@ function DraggableTreeMenu(props: DraggableTreeMenuProps) {

    const newTree = moveItemOnTree(tree, source, destination)

-    const convert = await convertTreeDataToJson(newTree)
-    handleTreeDnD(convert)
+    const treeJson = new TreeJson(newTree, source, destination)
+    const convertTree = treeJson.convert()
+    handleTreeDnD(convertTree)

    setTree(newTree)
  }
--- a/frontend/admin/src/components/EditForm/MenuEditForm.tsx
+++ b/frontend/admin/src/components/EditForm/MenuEditForm.tsx
@@ -91,12 +91,6 @@ const MenuEditForm = (props: MenuEditFormProps) => {
    menuTypes[0]?.codeId,
  )

-  useEffect(() => {
-    if (errors) {
-      console.log(errors)
-    }
-  }, [errors])
-
  const [connectIdState, setConnectIdState] = useState<IConnectId>({})

  const [dialogOpen, setDialogOpen] = useState<boolean>(false)
@@ -189,7 +183,6 @@ const MenuEditForm = (props: MenuEditFormProps) => {
  }

  const handleSaveBefore = (formData: IMenuInfoForm) => {
-    console.log('before ', formData)
    formData = produce(formData, draft => {
      draft.menuType = menuTypeState
      draft.menuTypeName = menuTypes.find(
--- a/frontend/admin/src/components/Layout/Bread.tsx
+++ b/frontend/admin/src/components/Layout/Bread.tsx
@@ -1,12 +1,12 @@
-import React, { useCallback } from 'react'
-import { useRouter } from 'next/router'
-import Typography from '@material-ui/core/Typography'
 import Breadcrumbs from '@material-ui/core/Breadcrumbs'
 import Link from '@material-ui/core/Link'
-import { Theme, makeStyles } from '@material-ui/core/styles'
-import { currentMenuStateAtom, flatMenusSelect } from '@stores'
-import { useRecoilValue } from 'recoil'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import Typography from '@material-ui/core/Typography'
+import { currentMenuStateAtom, ISideMenu, menuStateAtom } from '@stores'
+import { useRouter } from 'next/router'
+import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useRecoilValue } from 'recoil'

 const useStyles = makeStyles((theme: Theme) => ({
  root: {
@@ -17,10 +17,33 @@ const useStyles = makeStyles((theme: Theme) => ({
 const Bread: React.FC = () => {
  const classes = useStyles()
  const router = useRouter()
-  const flatMenus = useRecoilValue(flatMenusSelect)
+  const menus = useRecoilValue(menuStateAtom)
  const current = useRecoilValue(currentMenuStateAtom)
  const { i18n } = useTranslation()

+  const findParent = useCallback(
+    (menu: ISideMenu) => {
+      let parent: ISideMenu
+      const findItems = item => {
+        if (item.id === menu.parentId) {
+          parent = item
+        }
+
+        if (item.children) {
+          item.children.map(v => {
+            return findItems(v)
+          })
+        }
+      }
+
+      menus.map(item => {
+        findItems(item)
+      })
+      return parent
+    },
+    [menus, current],
+  )
+
  const hierarchy = useCallback(() => {
    if (!current) {
      return
@@ -35,21 +58,16 @@ const Bread: React.FC = () => {
    }

    let trees = []
-    const arr = flatMenus.slice(
-      0,
-      flatMenus.findIndex(item => item.id === current.id) + 1,
-    )
-
    trees.push(current)
-    arr.reverse().some(item => {
-      if (item.level < current.level) {
-        trees.push(item)
+    let findMenu = current
+    while (true) {
+      let parent = findParent(findMenu)
+      trees.push(parent)
+      findMenu = parent
+      if (parent.level === 1) {
+        break
      }
-
-      if (item.level === 1) {
-        return true
-      }
-    })
+    }

    let nodes = trees.reverse().map(item =>
      item.id === current.id ? (
--- a/frontend/admin/src/pages/board/[id].tsx
+++ b/frontend/admin/src/pages/board/[id].tsx
@@ -202,339 +202,338 @@ const BoardItem = ({
  return (
    <div className={classes.root}>
      <FormProvider {...methods}>
-        <form>
-          <Grid container spacing={1}>
-            <Grid item xs={12} sm={6}>
-              <Box boxShadow={1}>
-                <Controller
-                  name="boardName"
-                  control={control}
-                  rules={{ required: true, maxLength: 100 }}
-                  render={({ field }) => (
-                    <TextField
-                      autoFocus
-                      label={t('board.board_name')}
-                      name="boardName"
-                      required
-                      inputProps={{ maxLength: 100 }}
-                      id="outlined-full-width"
-                      placeholder={format(t('msg.placeholder.format'), [
-                        t('board.board_name'),
-                      ])}
-                      fullWidth
-                      variant="outlined"
-                      {...field}
-                    />
-                  )}
-                />
-                {errors.boardName && (
-                  <ValidationAlert
-                    fieldError={errors.boardName}
-                    target={[100]}
+        <Grid container spacing={1}>
+          <Grid item xs={12} sm={6}>
+            <Box boxShadow={1}>
+              <Controller
+                name="boardName"
+                control={control}
+                rules={{ required: true, maxLength: 100 }}
+                render={({ field }) => (
+                  <TextField
+                    autoFocus
                    label={t('board.board_name')}
+                    name="boardName"
+                    required
+                    inputProps={{ maxLength: 100 }}
+                    id="outlined-full-width"
+                    placeholder={format(t('msg.placeholder.format'), [
+                      t('board.board_name'),
+                    ])}
+                    fullWidth
+                    variant="outlined"
+                    {...field}
                  />
                )}
-              </Box>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <FormControl variant="outlined" className={classes.formControl}>
-                <InputLabel id="skinTypeCode-label" required>
-                  {t('board.skin_type_code')}
-                </InputLabel>
-                <Controller
-                  name="skinTypeCode"
-                  control={control}
-                  defaultValue={initData?.skinTypeCode}
-                  rules={{ required: true }}
-                  render={({ field }) => (
-                    <Select
-                      variant="outlined"
-                      name="skinTypeCode"
-                      required
-                      labelId="skinTypeCode-label"
-                      label={t('board.skin_type_code')}
-                      margin="dense"
-                      {...field}
-                    >
-                      {skinTypeCodeList.map(option => (
-                        <MenuItem key={option.codeId} value={option.codeId}>
-                          {option.codeName}
-                        </MenuItem>
-                      ))}
-                    </Select>
-                  )}
+                defaultValue={''}
+              />
+              {errors.boardName && (
+                <ValidationAlert
+                  fieldError={errors.boardName}
+                  target={[100]}
+                  label={t('board.board_name')}
                />
-              </FormControl>
-            </Grid>
-
-            <Grid item xs={12} sm={6}>
-              <Box boxShadow={1}>
-                <Controller
-                  name="titleDisplayLength"
-                  control={control}
-                  rules={{ required: true, min: 1, max: 99999 }}
-                  render={({ field }) => (
-                    <TextField
-                      label={t('board.title_display_length')}
-                      name="titleDisplayLength"
-                      required
-                      type="number"
-                      id="outlined-full-width"
-                      placeholder={format(t('msg.placeholder.format'), [
-                        t('board.title_display_length'),
-                      ])}
-                      fullWidth
-                      variant="outlined"
-                      {...field}
-                    />
-                  )}
-                />
-                {errors.titleDisplayLength && (
-                  <ValidationAlert
-                    fieldError={errors.titleDisplayLength}
-                    target={[1, 99999]}
-                    label={t('board.title_display_length')}
-                  />
-                )}
-              </Box>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <Box boxShadow={1}>
-                <Controller
-                  name="postDisplayCount"
-                  control={control}
-                  rules={{ required: true, min: 1, max: 99999 }}
-                  render={({ field }) => (
-                    <TextField
-                      label={t('board.post_display_count')}
-                      name="postDisplayCount"
-                      required
-                      type="number"
-                      id="outlined-full-width"
-                      placeholder={format(t('msg.placeholder.format'), [
-                        t('board.post_display_count'),
-                      ])}
-                      fullWidth
-                      variant="outlined"
-                      {...field}
-                    />
-                  )}
-                />
-                {errors.postDisplayCount && (
-                  <ValidationAlert
-                    fieldError={errors.postDisplayCount}
-                    target={[1, 99999]}
-                    label={t('board.post_display_count')}
-                  />
-                )}
-              </Box>
-            </Grid>
-
-            <Grid item xs={12} sm={6}>
-              <Box boxShadow={1}>
-                <Controller
-                  name="pageDisplayCount"
-                  control={control}
-                  rules={{ required: true, min: 1, max: 99999 }}
-                  render={({ field }) => (
-                    <TextField
-                      label={t('board.page_display_count')}
-                      name="pageDisplayCount"
-                      required
-                      type="number"
-                      id="outlined-full-width"
-                      placeholder={format(t('msg.placeholder.format'), [
-                        t('board.page_display_count'),
-                      ])}
-                      fullWidth
-                      variant="outlined"
-                      {...field}
-                    />
-                  )}
-                />
-                {errors.pageDisplayCount && (
-                  <ValidationAlert
-                    fieldError={errors.pageDisplayCount}
-                    target={[1, 99999]}
-                    label={t('board.page_display_count')}
-                  />
-                )}
-              </Box>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <Box boxShadow={1}>
-                <Controller
-                  name="newDisplayDayCount"
-                  control={control}
-                  rules={{ required: true, min: 1, max: 99999 }}
-                  render={({ field }) => (
-                    <TextField
-                      label={t('board.new_display_day_count')}
-                      name="newDisplayDayCount"
-                      required
-                      type="number"
-                      id="outlined-full-width"
-                      placeholder={format(t('msg.placeholder.format'), [
-                        t('board.new_display_day_count'),
-                      ])}
-                      fullWidth
-                      variant="outlined"
-                      {...field}
-                    />
-                  )}
-                />
-                {errors.newDisplayDayCount && (
-                  <ValidationAlert
-                    fieldError={errors.newDisplayDayCount}
-                    target={[1, 99999]}
-                    label={t('board.new_display_day_count')}
-                  />
-                )}
-              </Box>
-            </Grid>
-
-            <Grid item xs={12} sm={6}>
-              <Box boxShadow={1} className={classes.switchBox}>
-                <FormControlLabel
-                  label={t('board.editor_use_at')}
-                  labelPlacement="start"
-                  control={
-                    <Controller
-                      name="editorUseAt"
-                      control={control}
-                      render={({ field: { onChange, ref, value } }) =>
-                        getSwitch(onChange, ref, value)
-                      }
-                    />
-                  }
-                />
-              </Box>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <Box boxShadow={1} className={classes.switchBox}>
-                <FormControlLabel
-                  label={t('board.user_write_at')}
-                  labelPlacement="start"
-                  control={
-                    <Controller
-                      name="userWriteAt"
-                      control={control}
-                      render={({ field: { onChange, ref, value } }) =>
-                        getSwitch(onChange, ref, value)
-                      }
-                    />
-                  }
-                />
-              </Box>
-            </Grid>
-
-            <Grid item xs={12} sm={6}>
-              <Box boxShadow={1} className={classes.switchBox}>
-                <FormControlLabel
-                  label={t('board.upload_use_at')}
-                  labelPlacement="start"
-                  control={
-                    <Controller
-                      name="uploadUseAt"
-                      control={control}
-                      render={({ field: { onChange, ref, value } }) => (
-                        <Switch
-                          inputProps={{ 'aria-label': 'secondary checkbox' }}
-                          onClick={handleChangeUploadUseAt}
-                          onChange={onChange}
-                          inputRef={ref}
-                          checked={value}
-                        />
-                      )}
-                    />
-                  }
-                />
-              </Box>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <Box boxShadow={1} className={classes.switchBox}>
-                <FormControlLabel
-                  label={t('board.comment_use_at')}
-                  labelPlacement="start"
-                  control={
-                    <Controller
-                      name="commentUseAt"
-                      control={control}
-                      render={({ field: { onChange, ref, value } }) =>
-                        getSwitch(onChange, ref, value)
-                      }
-                    />
-                  }
-                />
-              </Box>
-            </Grid>
-
-            <Grid item xs={12} sm={6} hidden={!uploadUseAt}>
-              <Box boxShadow={1}>
-                <Controller
-                  name="uploadLimitCount"
-                  control={control}
-                  rules={{ required: uploadUseAt, min: 1, max: 99999 }}
-                  render={({ field }) => (
-                    <TextField
-                      label={t('board.upload_limit_count')}
-                      name="uploadLimitCount"
-                      type="number"
-                      id="outlined-full-width"
-                      placeholder={format(t('msg.placeholder.format'), [
-                        t('board.upload_limit_count'),
-                      ])}
-                      fullWidth
-                      variant="outlined"
-                      {...field}
-                    />
-                  )}
-                />
-                {errors.uploadLimitCount && (
-                  <ValidationAlert
-                    fieldError={errors.uploadLimitCount}
-                    target={[1, 99999]}
-                    label={t('board.upload_limit_count')}
-                  />
-                )}
-              </Box>
-            </Grid>
-            <Grid item xs={12} sm={6} hidden={!uploadUseAt}>
-              <Box boxShadow={1}>
-                <Controller
-                  name="uploadLimitSize"
-                  control={control}
-                  rules={{
-                    required: uploadUseAt,
-                    min: 1,
-                    max: 99999999999999999999,
-                  }}
-                  render={({ field }) => (
-                    <TextField
-                      label={t('board.upload_limit_size')}
-                      name="uploadLimitSize"
-                      type="number"
-                      id="outlined-full-width"
-                      placeholder={format(t('msg.placeholder.format'), [
-                        t('board.upload_limit_size'),
-                      ])}
-                      fullWidth
-                      variant="outlined"
-                      {...field}
-                    />
-                  )}
-                />
-                {errors.uploadLimitSize && (
-                  <ValidationAlert
-                    fieldError={errors.uploadLimitSize}
-                    target={[1, 99999]}
-                    label={t('board.upload_limit_size')}
-                  />
-                )}
-              </Box>
-            </Grid>
+              )}
+            </Box>
          </Grid>
-        </form>
+          <Grid item xs={12} sm={6}>
+            <FormControl variant="outlined" className={classes.formControl}>
+              <InputLabel id="skinTypeCode-label" required>
+                {t('board.skin_type_code')}
+              </InputLabel>
+              <Controller
+                name="skinTypeCode"
+                control={control}
+                defaultValue={initData?.skinTypeCode}
+                rules={{ required: true }}
+                render={({ field }) => (
+                  <Select
+                    variant="outlined"
+                    name="skinTypeCode"
+                    required
+                    labelId="skinTypeCode-label"
+                    label={t('board.skin_type_code')}
+                    margin="dense"
+                    {...field}
+                  >
+                    {skinTypeCodeList.map(option => (
+                      <MenuItem key={option.codeId} value={option.codeId}>
+                        {option.codeName}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                )}
+              />
+            </FormControl>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Box boxShadow={1}>
+              <Controller
+                name="titleDisplayLength"
+                control={control}
+                rules={{ required: true, min: 1, max: 99999 }}
+                render={({ field }) => (
+                  <TextField
+                    label={t('board.title_display_length')}
+                    name="titleDisplayLength"
+                    required
+                    type="number"
+                    id="outlined-full-width"
+                    placeholder={format(t('msg.placeholder.format'), [
+                      t('board.title_display_length'),
+                    ])}
+                    fullWidth
+                    variant="outlined"
+                    {...field}
+                  />
+                )}
+              />
+              {errors.titleDisplayLength && (
+                <ValidationAlert
+                  fieldError={errors.titleDisplayLength}
+                  target={[1, 99999]}
+                  label={t('board.title_display_length')}
+                />
+              )}
+            </Box>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <Box boxShadow={1}>
+              <Controller
+                name="postDisplayCount"
+                control={control}
+                rules={{ required: true, min: 1, max: 99999 }}
+                render={({ field }) => (
+                  <TextField
+                    label={t('board.post_display_count')}
+                    name="postDisplayCount"
+                    required
+                    type="number"
+                    id="outlined-full-width"
+                    placeholder={format(t('msg.placeholder.format'), [
+                      t('board.post_display_count'),
+                    ])}
+                    fullWidth
+                    variant="outlined"
+                    {...field}
+                  />
+                )}
+              />
+              {errors.postDisplayCount && (
+                <ValidationAlert
+                  fieldError={errors.postDisplayCount}
+                  target={[1, 99999]}
+                  label={t('board.post_display_count')}
+                />
+              )}
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Box boxShadow={1}>
+              <Controller
+                name="pageDisplayCount"
+                control={control}
+                rules={{ required: true, min: 1, max: 99999 }}
+                render={({ field }) => (
+                  <TextField
+                    label={t('board.page_display_count')}
+                    name="pageDisplayCount"
+                    required
+                    type="number"
+                    id="outlined-full-width"
+                    placeholder={format(t('msg.placeholder.format'), [
+                      t('board.page_display_count'),
+                    ])}
+                    fullWidth
+                    variant="outlined"
+                    {...field}
+                  />
+                )}
+              />
+              {errors.pageDisplayCount && (
+                <ValidationAlert
+                  fieldError={errors.pageDisplayCount}
+                  target={[1, 99999]}
+                  label={t('board.page_display_count')}
+                />
+              )}
+            </Box>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <Box boxShadow={1}>
+              <Controller
+                name="newDisplayDayCount"
+                control={control}
+                rules={{ required: true, min: 1, max: 99999 }}
+                render={({ field }) => (
+                  <TextField
+                    label={t('board.new_display_day_count')}
+                    name="newDisplayDayCount"
+                    required
+                    type="number"
+                    id="outlined-full-width"
+                    placeholder={format(t('msg.placeholder.format'), [
+                      t('board.new_display_day_count'),
+                    ])}
+                    fullWidth
+                    variant="outlined"
+                    {...field}
+                  />
+                )}
+              />
+              {errors.newDisplayDayCount && (
+                <ValidationAlert
+                  fieldError={errors.newDisplayDayCount}
+                  target={[1, 99999]}
+                  label={t('board.new_display_day_count')}
+                />
+              )}
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Box boxShadow={1} className={classes.switchBox}>
+              <FormControlLabel
+                label={t('board.editor_use_at')}
+                labelPlacement="start"
+                control={
+                  <Controller
+                    name="editorUseAt"
+                    control={control}
+                    render={({ field: { onChange, ref, value } }) =>
+                      getSwitch(onChange, ref, value)
+                    }
+                  />
+                }
+              />
+            </Box>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <Box boxShadow={1} className={classes.switchBox}>
+              <FormControlLabel
+                label={t('board.user_write_at')}
+                labelPlacement="start"
+                control={
+                  <Controller
+                    name="userWriteAt"
+                    control={control}
+                    render={({ field: { onChange, ref, value } }) =>
+                      getSwitch(onChange, ref, value)
+                    }
+                  />
+                }
+              />
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Box boxShadow={1} className={classes.switchBox}>
+              <FormControlLabel
+                label={t('board.upload_use_at')}
+                labelPlacement="start"
+                control={
+                  <Controller
+                    name="uploadUseAt"
+                    control={control}
+                    render={({ field: { onChange, ref, value } }) => (
+                      <Switch
+                        inputProps={{ 'aria-label': 'secondary checkbox' }}
+                        onClick={handleChangeUploadUseAt}
+                        onChange={onChange}
+                        inputRef={ref}
+                        checked={value}
+                      />
+                    )}
+                  />
+                }
+              />
+            </Box>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <Box boxShadow={1} className={classes.switchBox}>
+              <FormControlLabel
+                label={t('board.comment_use_at')}
+                labelPlacement="start"
+                control={
+                  <Controller
+                    name="commentUseAt"
+                    control={control}
+                    render={({ field: { onChange, ref, value } }) =>
+                      getSwitch(onChange, ref, value)
+                    }
+                  />
+                }
+              />
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} sm={6} hidden={!uploadUseAt}>
+            <Box boxShadow={1}>
+              <Controller
+                name="uploadLimitCount"
+                control={control}
+                rules={{ required: uploadUseAt, min: 1, max: 99999 }}
+                render={({ field }) => (
+                  <TextField
+                    label={t('board.upload_limit_count')}
+                    name="uploadLimitCount"
+                    type="number"
+                    id="outlined-full-width"
+                    placeholder={format(t('msg.placeholder.format'), [
+                      t('board.upload_limit_count'),
+                    ])}
+                    fullWidth
+                    variant="outlined"
+                    {...field}
+                  />
+                )}
+              />
+              {errors.uploadLimitCount && (
+                <ValidationAlert
+                  fieldError={errors.uploadLimitCount}
+                  target={[1, 99999]}
+                  label={t('board.upload_limit_count')}
+                />
+              )}
+            </Box>
+          </Grid>
+          <Grid item xs={12} sm={6} hidden={!uploadUseAt}>
+            <Box boxShadow={1}>
+              <Controller
+                name="uploadLimitSize"
+                control={control}
+                rules={{
+                  required: uploadUseAt,
+                  min: 1,
+                  max: 99999999999999999999,
+                }}
+                render={({ field }) => (
+                  <TextField
+                    label={t('board.upload_limit_size')}
+                    name="uploadLimitSize"
+                    type="number"
+                    id="outlined-full-width"
+                    placeholder={format(t('msg.placeholder.format'), [
+                      t('board.upload_limit_size'),
+                    ])}
+                    fullWidth
+                    variant="outlined"
+                    {...field}
+                  />
+                )}
+              />
+              {errors.uploadLimitSize && (
+                <ValidationAlert
+                  fieldError={errors.uploadLimitSize}
+                  target={[1, 99999]}
+                  label={t('board.upload_limit_size')}
+                />
+              )}
+            </Box>
+          </Grid>
+        </Grid>
      </FormProvider>
      <DetailButtons
        handleList={() => {
--- a/frontend/admin/src/pages/board/index.tsx
+++ b/frontend/admin/src/pages/board/index.tsx
@@ -1,9 +1,14 @@
-import React, { useCallback, useMemo } from 'react'
-import { AxiosError } from 'axios'
-import { NextPage } from 'next'
-import { useRouter } from 'next/router'
-import { TFunction, useTranslation } from 'next-i18next'
-
+import { CustomButtons, IButtonProps } from '@components/Buttons'
+import { ConfirmDialog } from '@components/Confirm'
+import { PopupProps } from '@components/DialogPopup'
+import Search, { IKeywordType } from '@components/Search'
+import CustomDataGrid from '@components/Table/CustomDataGrid'
+import { GRID_PAGE_SIZE } from '@constants'
+import usePage from '@hooks/usePage'
+import useSearchTypes from '@hooks/useSearchType'
+// 내부 컴포넌트 및 custom hook, etc...
+import { convertStringToDateFormat } from '@libs/date'
+import Button from '@material-ui/core/Button'
 // material-ui deps
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import {
@@ -12,28 +17,21 @@ import {
  GridValueFormatterParams,
  GridValueGetterParams,
 } from '@material-ui/data-grid'
-
-// 내부 컴포넌트 및 custom hook, etc...
-import { convertStringToDateFormat } from '@libs/date'
-import CustomDataGrid from '@components/Table/CustomDataGrid'
-import { CustomButtons, IButtonProps } from '@components/Buttons'
-import { Page, rownum } from '@utils'
-import Search, { IKeywordType } from '@components/Search'
-
-// 상태관리 recoil
-import { useRecoilValue, useSetRecoilState } from 'recoil'
+// api
+import { boardService } from '@service'
 import {
  conditionAtom,
  detailButtonsSnackAtom,
  errorStateSelector,
 } from '@stores'
-
-// api
-import { boardService } from '@service'
-import { PopupProps } from '@components/DialogPopup'
-import Button from '@material-ui/core/Button'
-import usePage from '@hooks/usePage'
-import { GRID_PAGE_SIZE } from '@constants'
+import { Page, rownum } from '@utils'
+import { AxiosError } from 'axios'
+import { NextPage } from 'next'
+import { TFunction, useTranslation } from 'next-i18next'
+import { useRouter } from 'next/router'
+import React, { useCallback, useMemo, useState } from 'react'
+// 상태관리 recoil
+import { useRecoilValue, useSetRecoilState } from 'recoil'

 // material-ui style
 const useStyles = makeStyles((theme: Theme) =>
@@ -133,12 +131,12 @@ const Board: NextPage<BoardProps> = props => {
  const setSuccessSnackBar = useSetRecoilState(detailButtonsSnackAtom)

  // 조회조건 select items
-  const searchTypes: IKeywordType[] = [
+  const searchTypes: IKeywordType[] = useSearchTypes([
    {
      key: 'boardName',
      label: t('board.board_name'),
    },
-  ]
+  ])

  /**
   * 상태관리 필요한 훅
@@ -150,6 +148,14 @@ const Board: NextPage<BoardProps> = props => {
  // 현 페이지내 필요한 hook
  const { page, setPageValue } = usePage(conditionKey)

+  const [deleteConfirmState, setDeleteConfirmState] = useState<{
+    open: boolean
+    boardNo: number
+  }>({
+    open: false,
+    boardNo: null,
+  })
+
  // 목록 데이터 조회 및 관리
  const { data, mutate } = boardService.search({
    keywordType: keywordState?.keywordType || 'boardName',
@@ -177,19 +183,17 @@ const Board: NextPage<BoardProps> = props => {
  // 삭제
  const handleDelete = useCallback(
    (row: any) => {
-      const { boardNo } = row
+      const { boardNo, isPosts } = row

-      setSuccessSnackBar('loading')
+      if (isPosts) {
+        setDeleteConfirmState({
+          open: true,
+          boardNo,
+        })
+        return
+      }

-      boardService.delete({
-        boardNo,
-        callback: () => {
-          setSuccessSnackBar('success')
-
-          mutate()
-        },
-        errorCallback,
-      })
+      deleteBoard(boardNo)
    },
    [errorCallback, mutate, setSuccessSnackBar],
  )
@@ -251,6 +255,36 @@ const Board: NextPage<BoardProps> = props => {
    route.push('board/-1')
  }

+  const handleConfirmClose = () => {
+    setDeleteConfirmState({
+      open: false,
+      boardNo: null,
+    })
+  }
+
+  const deleteBoard = (boardNo: number) => {
+    setSuccessSnackBar('loading')
+
+    boardService.delete({
+      boardNo,
+      callback: () => {
+        setSuccessSnackBar('success')
+
+        mutate()
+      },
+      errorCallback,
+    })
+  }
+
+  const handleConfirm = () => {
+    const { boardNo } = deleteConfirmState
+    deleteBoard(boardNo)
+    setDeleteConfirmState({
+      open: false,
+      boardNo: null,
+    })
+  }
+
  return (
    <div className={classes.root}>
      <Search
@@ -270,6 +304,12 @@ const Board: NextPage<BoardProps> = props => {
        onPageChange={handlePageChange}
        getRowId={r => r.boardNo}
      />
+      <ConfirmDialog
+        open={deleteConfirmState.open}
+        contentText={'게시물이 존재합니다. 삭제하시겠습니까?'}
+        handleClose={handleConfirmClose}
+        handleConfirm={handleConfirm}
+      />
    </div>
  )
 }
--- a/frontend/admin/src/pages/menu/index.tsx
+++ b/frontend/admin/src/pages/menu/index.tsx
@@ -166,7 +166,6 @@ const Menu = ({ sites, menuTypes }: MenuProps) => {
  }

  const handleSave = async (formData: IMenuInfoForm) => {
-    console.log(formData)
    setSuccessSnackBar('loading')
    try {
      const result = await menuService.update(treeSelected.menuId, formData)
--- a/frontend/admin/src/pages/posts/[board]/edit/[id].tsx
+++ b/frontend/admin/src/pages/posts/[board]/edit/[id].tsx
@@ -302,81 +302,119 @@ const PostsItem = ({ boardNo, postsNo, board, initData }: IPostsItemsProps) => {
  return (
    <div className={classes.root}>
      <FormProvider {...methods}>
-        <form>
-          <Grid container spacing={1}>
-            <Grid item xs={12} sm={12}>
+        <Grid container spacing={1}>
+          <Grid item xs={12} sm={12}>
+            <Box boxShadow={1}>
+              <Controller
+                name="postsTitle"
+                render={({ field }) => (
+                  <TextField
+                    autoFocus
+                    label={t('posts.posts_title')}
+                    name="postsTitle"
+                    required
+                    inputProps={{ maxLength: 100 }}
+                    id="outlined-full-width"
+                    placeholder={format(t('msg.placeholder.format'), [
+                      t('posts.posts_title'),
+                    ])}
+                    fullWidth
+                    variant="outlined"
+                    {...field}
+                  />
+                )}
+                control={control}
+                rules={{ required: true, maxLength: 100 }}
+              />
+              {errors.postsTitle && (
+                <ValidationAlert
+                  fieldError={errors.postsTitle}
+                  target={[100]}
+                  label={t('posts.posts_title')}
+                />
+              )}
+            </Box>
+          </Grid>
+          <Grid item xs={12} sm={12}>
+            <Box boxShadow={1} className={classes.switchBox}>
+              <FormControlLabel
+                label={t('posts.notice_at')}
+                labelPlacement="start"
+                control={
+                  <Controller
+                    name="noticeAt"
+                    control={control}
+                    render={({ field: { onChange, ref, value } }) => (
+                      <Switch
+                        inputProps={{ 'aria-label': 'secondary checkbox' }}
+                        onChange={onChange}
+                        inputRef={ref}
+                        checked={value}
+                      />
+                    )}
+                  />
+                }
+              />
+            </Box>
+          </Grid>
+          <Grid item xs={12} sm={12}>
+            {board.editorUseAt && (
+              <Editor contents={postsContent} setContents={setPostsContent} />
+            )}
+            {!board.editorUseAt && (
              <Box boxShadow={1}>
                <Controller
-                  name="postsTitle"
+                  name="postsContent"
+                  control={control}
+                  rules={{ required: true }}
                  render={({ field }) => (
                    <TextField
-                      autoFocus
-                      label={t('posts.posts_title')}
-                      name="postsTitle"
-                      required
-                      inputProps={{ maxLength: 100 }}
+                      label={t('posts.posts_content')}
+                      name="postsContent"
+                      multiline
+                      minRows={9.2}
                      id="outlined-full-width"
                      placeholder={format(t('msg.placeholder.format'), [
-                        t('posts.posts_title'),
+                        t('posts.posts_content'),
                      ])}
                      fullWidth
                      variant="outlined"
                      {...field}
                    />
                  )}
-                  control={control}
-                  rules={{ required: true, maxLength: 100 }}
                />
-                {errors.postsTitle && (
+                {errors.postsContent && (
                  <ValidationAlert
-                    fieldError={errors.postsTitle}
-                    target={[100]}
-                    label={t('posts.posts_title')}
+                    fieldError={errors.postsContent}
+                    label={t('posts.posts_content')}
                  />
                )}
              </Box>
-            </Grid>
-            <Grid item xs={12} sm={12}>
-              <Box boxShadow={1} className={classes.switchBox}>
-                <FormControlLabel
-                  label={t('posts.notice_at')}
-                  labelPlacement="start"
-                  control={
-                    <Controller
-                      name="noticeAt"
-                      control={control}
-                      render={({ field: { onChange, ref, value } }) => (
-                        <Switch
-                          inputProps={{ 'aria-label': 'secondary checkbox' }}
-                          onChange={onChange}
-                          inputRef={ref}
-                          checked={value}
-                        />
-                      )}
-                    />
-                  }
-                />
-              </Box>
-            </Grid>
+            )}
+          </Grid>
+          {(board.skinTypeCode === SKINT_TYPE_CODE_FAQ ||
+            board.skinTypeCode === SKINT_TYPE_CODE_QNA) && (
            <Grid item xs={12} sm={12}>
              {board.editorUseAt && (
-                <Editor contents={postsContent} setContents={setPostsContent} />
+                <Editor
+                  contents={postsAnswerContent}
+                  setContents={setPostsAnswerContent}
+                />
              )}
              {!board.editorUseAt && (
                <Box boxShadow={1}>
                  <Controller
-                    name="postsContent"
+                    name="postsAnswerContent"
                    control={control}
-                    rules={{ required: true }}
                    render={({ field }) => (
                      <TextField
-                        label={t('posts.posts_content')}
-                        name="postsContent"
+                        label={t('posts.posts_answer_content')}
+                        name="postsAnswerContent"
                        multiline
                        minRows={9.2}
                        id="outlined-full-width"
                        placeholder={format(t('msg.placeholder.format'), [
-                          t('posts.posts_content'),
+                          t('posts.posts_answer_content'),
                        ])}
                        fullWidth
                        variant="outlined"
@@ -384,68 +422,28 @@ const PostsItem = ({ boardNo, postsNo, board, initData }: IPostsItemsProps) => {
                      />
                    )}
                  />
-                  {errors.postsContent && (
-                    <ValidationAlert
-                      fieldError={errors.postsContent}
-                      label={t('posts.posts_content')}
-                    />
-                  )}
                </Box>
              )}
            </Grid>
-            {(board.skinTypeCode === SKINT_TYPE_CODE_FAQ ||
-              board.skinTypeCode === SKINT_TYPE_CODE_QNA) && (
-              <Grid item xs={12} sm={12}>
-                {board.editorUseAt && (
-                  <Editor
-                    contents={postsAnswerContent}
-                    setContents={setPostsAnswerContent}
-                  />
+          )}
+          {board.uploadUseAt && (
+            <Grid item xs={12} sm={12}>
+              <Box boxShadow={1}>
+                <Upload
+                  ref={uploadRef}
+                  multi
+                  uploadLimitCount={board.uploadLimitCount}
+                  uploadLimitSize={board.uploadLimitSize}
+                  attachmentCode={initData.attachmentCode}
+                  attachData={attachData}
+                />
+                {attachData && (
+                  <AttachList data={attachData} setData={setAttachData} />
                )}
-                {!board.editorUseAt && (
-                  <Box boxShadow={1}>
-                    <Controller
-                      name="postsAnswerContent"
-                      control={control}
-                      render={({ field }) => (
-                        <TextField
-                          label={t('posts.posts_answer_content')}
-                          name="postsAnswerContent"
-                          multiline
-                          minRows={9.2}
-                          id="outlined-full-width"
-                          placeholder={format(t('msg.placeholder.format'), [
-                            t('posts.posts_answer_content'),
-                          ])}
-                          fullWidth
-                          variant="outlined"
-                          {...field}
-                        />
-                      )}
-                    />
-                  </Box>
-                )}
-              </Grid>
-            )}
-            {board.uploadUseAt && (
-              <Grid item xs={12} sm={12}>
-                <Box boxShadow={1}>
-                  <Upload
-                    ref={uploadRef}
-                    multi
-                    uploadLimitCount={board.uploadLimitCount}
-                    uploadLimitSize={board.uploadLimitSize}
-                    attachmentCode={initData.attachmentCode}
-                    attachData={attachData}
-                  />
-                  {attachData && (
-                    <AttachList data={attachData} setData={setAttachData} />
-                  )}
-                </Box>
-              </Grid>
-            )}
-          </Grid>
-        </form>
+              </Box>
+            </Grid>
+          )}
+        </Grid>
      </FormProvider>
      <CustomButtons buttons={[saveButton, prevButton]} />
      <CustomAlert