bugfix menu tree dnd update

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;
     }
 
 }

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();
     }
 

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;
         }

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<>();
 
     /**
      * 빌더 패턴 클래스 생성자

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")))

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);
     }
 
     /**

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.*;
-import org.egovframe.cloud.boardservice.api.posts.dto.PostsListResponseDto;
+import org.egovframe.cloud.boardservice.domain.posts.*;
-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.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);
         }
 

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);
     }
 
     /**

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());
+
     }
+
 }

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();
+            return updateOldParent();
-
-            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;
         }
 
         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;
     }
 

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())
+            parent = findById(menuTreeRequestDto.getParentId());
-                    .orElseThrow(() ->
-                            new EntityNotFoundException(getMessage("valid.notexists.format", new Object[]{getMessage("menu")}) + " ID= " + 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)
+        Menu menu = findById(menuId);
-                .orElseThrow(() ->
-                        new EntityNotFoundException(getMessage("valid.notexists.format", new Object[]{getMessage("menu")}) + " ID= " + 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)
+        Menu menu = findById(menuId);
-                .orElseThrow(() ->
-                        new EntityNotFoundException(getMessage("valid.notexists.format", new Object[]{getMessage("menu")}) + " ID= " + 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)
+        Menu menu = findById(menuId);
-                .orElseThrow(() ->
-                        new EntityNotFoundException(getMessage("valid.notexists.format", new Object[]{getMessage("menu")}) + " ID= " + 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())
+        Menu menu = findById(dto.getMenuId());
-                .orElseThrow(() ->
+
-                        new EntityNotFoundException(getMessage("valid.notexists.format", new Object[]{getMessage("menu")}) + " ID= " + 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));
+    }
 }

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
+        }),
+      )
+    }
+  }
+}

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

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)
+    const treeJson = new TreeJson(newTree, source, destination)
-    handleTreeDnD(convert)
+    const convertTree = treeJson.convert()
+    handleTreeDnD(convertTree)
 
     setTree(newTree)
   }

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(

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 { makeStyles, Theme } from '@material-ui/core/styles'
-import { currentMenuStateAtom, flatMenusSelect } from '@stores'
+import Typography from '@material-ui/core/Typography'
-import { useRecoilValue } from 'recoil'
+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 => {
+    let findMenu = current
-      if (item.level < current.level) {
+    while (true) {
-        trees.push(item)
+      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 ? (

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 container spacing={1}>
+          <Grid item xs={12} sm={6}>
-            <Grid item xs={12} sm={6}>
+            <Box boxShadow={1}>
-              <Box boxShadow={1}>
+              <Controller
-                <Controller
+                name="boardName"
-                  name="boardName"
+                control={control}
-                  control={control}
+                rules={{ required: true, maxLength: 100 }}
-                  rules={{ required: true, maxLength: 100 }}
+                render={({ field }) => (
-                  render={({ field }) => (
+                  <TextField
-                    <TextField
+                    autoFocus
-                      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]}
                     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>
+                defaultValue={''}
-            </Grid>
+              />
-            <Grid item xs={12} sm={6}>
+              {errors.boardName && (
-              <FormControl variant="outlined" className={classes.formControl}>
+                <ValidationAlert
-                <InputLabel id="skinTypeCode-label" required>
+                  fieldError={errors.boardName}
-                  {t('board.skin_type_code')}
+                  target={[100]}
-                </InputLabel>
+                  label={t('board.board_name')}
-                <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>
+            </Box>
-
-            <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>
-        </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={() => {

frontend/admin/src/pages/board/index.tsx

@@ -1,9 +1,14 @@
-import React, { useCallback, useMemo } from 'react'
+import { CustomButtons, IButtonProps } from '@components/Buttons'
-import { AxiosError } from 'axios'
+import { ConfirmDialog } from '@components/Confirm'
-import { NextPage } from 'next'
+import { PopupProps } from '@components/DialogPopup'
-import { useRouter } from 'next/router'
+import Search, { IKeywordType } from '@components/Search'
-import { TFunction, useTranslation } from 'next-i18next'
+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'
-
+// api
-// 내부 컴포넌트 및 custom hook, etc...
+import { boardService } from '@service'
-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'
 import {
   conditionAtom,
   detailButtonsSnackAtom,
   errorStateSelector,
 } from '@stores'
-
+import { Page, rownum } from '@utils'
-// api
+import { AxiosError } from 'axios'
-import { boardService } from '@service'
+import { NextPage } from 'next'
-import { PopupProps } from '@components/DialogPopup'
+import { TFunction, useTranslation } from 'next-i18next'
-import Button from '@material-ui/core/Button'
+import { useRouter } from 'next/router'
-import usePage from '@hooks/usePage'
+import React, { useCallback, useMemo, useState } from 'react'
-import { GRID_PAGE_SIZE } from '@constants'
+// 상태관리 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({
+      deleteBoard(boardNo)
-        boardNo,
-        callback: () => {
-          setSuccessSnackBar('success')
-
-          mutate()
-        },
-        errorCallback,
-      })
     },
     [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>
   )
 }

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)

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 container spacing={1}>
+          <Grid item xs={12} sm={12}>
-            <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_content')}
-                      label={t('posts.posts_title')}
+                      name="postsContent"
-                      name="postsTitle"
+                      multiline
-                      required
+                      minRows={9.2}
-                      inputProps={{ maxLength: 100 }}
                       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}
+                    fieldError={errors.postsContent}
-                    target={[100]}
+                    label={t('posts.posts_content')}
-                    label={t('posts.posts_title')}
                   />
                 )}
               </Box>
-            </Grid>
+            )}
-            <Grid item xs={12} sm={12}>
+          </Grid>
-              <Box boxShadow={1} className={classes.switchBox}>
+          {(board.skinTypeCode === SKINT_TYPE_CODE_FAQ ||
-                <FormControlLabel
+            board.skinTypeCode === SKINT_TYPE_CODE_QNA) && (
-                  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} />
+                <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')}
+                        label={t('posts.posts_answer_content')}
-                        name="postsContent"
+                        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) && (
+          {board.uploadUseAt && (
-              <Grid item xs={12} sm={12}>
+            <Grid item xs={12} sm={12}>
-                {board.editorUseAt && (
+              <Box boxShadow={1}>
-                  <Editor
+                <Upload
-                    contents={postsAnswerContent}
+                  ref={uploadRef}
-                    setContents={setPostsAnswerContent}
+                  multi
-                  />
+                  uploadLimitCount={board.uploadLimitCount}
+                  uploadLimitSize={board.uploadLimitSize}
+                  attachmentCode={initData.attachmentCode}
+                  attachData={attachData}
+                />
+                {attachData && (
+                  <AttachList data={attachData} setData={setAttachData} />
                 )}
-                {!board.editorUseAt && (
+              </Box>
-                  <Box boxShadow={1}>
+            </Grid>
-                    <Controller
+          )}
-                      name="postsAnswerContent"
+        </Grid>
-                      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>
       </FormProvider>
       <CustomButtons buttons={[saveButton, prevButton]} />
       <CustomAlert