[TIW] Admin Layout

<page-heder>
  <page-title :title="pageTitle" />
  <breadcrumbs />
  <page-nav />
</page-heder>

• AdminLayout
  • PageHeader
    • PageTitle
    • Breadcrumbs
    • PageNav

• PageHeader 는 페이지 상단 공통 영역에서 필요한 컴포넌트 조립용 wrapper 용도기 때문에 slot 역할만 하고 끝.
• PageTitle 은 title 값만 props 로 내려주고 끝.

---

재료

• json data (3depth 트리 구조)
• 현재 페이지 라우트 URL

변수

• node : object 객체
• tree : node[] (전체 트리)
• routes : node[] (경로 배열)
• siblings : node[] (형제 노드 배열)

로직

• 해당 페이지의 라우트 URL 값을 API에서 내려준 메뉴 트리 json data 내 각각의 노드 객체와 비교해 해당 페이지 노드 객체를 찾는다. ➡ getTreeNodeUrl
• 해당 메뉴에서 루트로 이어지는 경로 배열을 얻기 위해 트리 내에서 상위로 올라갈 때는 parentId 를 이용한다. ➡ getRoutes
• 메뉴 클릭 시 링크 시킬 URL을 얻기 위해서는 해당 노드 객체의 첫번째 자식을 통해 하위로 내려간다. ➡ getRouterLink
• PageNav 의 탭 또는 Breadcrumbs 의 드롭다운 컴포넌트에 필요한 형제 노드 배열을 얻기 위해, 해당 페이지 노드의 parentId 가 있을 경우는 부모의 자식 목록을 찾고, 없을 경우는 가장 상위 배열을 반환한다. ➡ getSiblings

---

Functions

1. getTreeNodeUrl ( url: string, tree ) => node

• 라우트 URL 값으로 tree 내 해당 노드 객체 검색

2. getTreeNodeId ( id: number, tree ) => node

• node 의 id 값으로 tree 내 해당 노드 객체 검색

3. getRoutes ( node, tree ) => route

• node 의 parentId 값을 타고 올라가 경로 배열 출력

4. getSiblings ( node ) => node[]

• 해당 node 의 형제 노드를 배열로 출력

5. getRouterLink ( node ) => string

• node 의 첫번째 자식을 타고 내려가 URL 출력

---

PageNav 에서 필요한것

• 경로 배열
• 경로 배열 내 노드의 형제 배열과 링크

Breadcrumbs 에서 필요한것

• 해당 페이지 노드 레벨이 2depth 이상이라면 2depth 배열과 링크
• 해당 페이지 노드 레벨이 3depth 이상이라면 3depth 배열과 링크

남은 과제

• 여러 컴포넌트에 동일한 함수가 중복 생성되어 리팩토링 필요
  • e.g. props.routes vs state.menuRoutes props 이슈
• GNB Sidemenu 컴포넌트도 재가공 필요