[REFACTOR] index tree 생성 함수 리팩토링 & 미사용 코드 정리

docs-front/layouts/default.vue

@@ -284,11 +284,6 @@ export default{
     guideIndex:[],
     selectedIndex:null,
     loadingPageList: false,
-    targetParentId: null,
-    createGuideTitle : '',
-    createGuideContentKey :'',
-    listGroup:null,
-    call:0,
     scrollPositionRate:0,
     showSearch:false,
     
@@ -316,15 +311,6 @@ export default{
     logoEvent(){
       this.openIndex()
     },
-    
-
-    isActiveMenu(id) {
-      if(this.$route.path !== '/' && id === this.$store.state.guideId) {
-        return true
-      }
-      return false
-    },
-
         // 가이드 페이지 이동
     openGuide(guide) {
       this.selectedIndex = guide
@@ -336,33 +322,8 @@ export default{
 
       await this.$axios.get('/test/index')
       .then(res => {
-        this.rawIndexList = JSON.parse(JSON.stringify(res.data));
-        let unclassifiedList = JSON.parse(JSON.stringify(res.data));
-        this.guideIndex = []
-        
-        // 최상위 목차(depth==1) 추출(path에 슬래시 갯수가 1개)
-        unclassifiedList.forEach(e => {
-          if(e.path.split('/').length === 2)
-            this.guideIndex.push(e)
-        });
-        
-        this.guideIndex.forEach(parentEl => {
-          parentEl.children = []
-          
-          // depth==2 추출
-          unclassifiedList.forEach(rawEl => {
-            if(rawEl.path !== parentEl.path && rawEl.path.includes(parentEl.path)){
-              parentEl.children.push(rawEl)
-            }
-          })
-          
-          // depth==3 이하 추출
-          if(parentEl.children.length > 0){
-            this.setChildren(parentEl.children, parentEl.path.split('/').length)
-          }
-        })
-        
-        this.guideIndex = this.removeEmpty(this.guideIndex)
+        this.rawIndexList = res.data;
+        this.getIndexTree(JSON.parse(JSON.stringify(res.data)));
       })
       .catch(err => {
         console.log(err)
@@ -370,81 +331,41 @@ export default{
       
       this.activeNav()
       this.loadingPageList = false
-      this.createEditModeList()
-      // this.activeGuideTreeIndex(this.guideIndex)
     },
+    getIndexTree(unclassifiedList){
+      let indexTree = []
      
-    setChildren(group, parentDepth){
-      group.forEach(g => {
-        if(g.path.split('/').length !== parentDepth + 1) return;
-        
-        g.children = []
-        group.forEach(e => {
-          if(e.path.includes(g.path) && e.path !== g.path){
-            g.children.push(e)
-            delete group[group.indexOf(e)]
-          }
-        })
-        
-        if(g.children.length > 0){
-          this.setChildren(g.children, g.path.split('/').length)
+      // depth 1 리스트 생성
+      unclassifiedList.forEach(el => {
+        if(el.depth === 1){
+          indexTree.push(el)
+          delete unclassifiedList[unclassifiedList.indexOf(el)] 
         }
       })
-    },
-    
-    removeEmpty(item){
-      let noEmptyItem = []
-      
-      item.forEach(e =>{
-        if(e) noEmptyItem.push(e)
-      })
 
-      noEmptyItem.forEach(e => {
-        if(e.children.length > 0){
-          e.children = this.removeEmpty(e.children)
-        }
-      })
+      // depth 2 이상인 인덱스들 트리구조 생성
+      this.setTreeChild(indexTree, unclassifiedList)
       
-      return noEmptyItem
+      this.guideIndex = JSON.parse(JSON.stringify(indexTree))
+      this.editModeList = JSON.parse(JSON.stringify(indexTree))
+      this.editModeRemainList = unclassifiedList.filter(el => el) // empty 값 삭제
     },
+    setTreeChild(targetList, unclassifiedList){
+      targetList.forEach(el => {
+        el.children = []
         
-    // 로드된 페이지 index를 찾아서 활성화함
-    activeGuideTreeIndex(items) {
-      let isFound = false
-      
-      items.forEach(g => {
-        if(g.id === this.$route.params.guide){
-          g.active = true
-          isFound = true
+        unclassifiedList.forEach(ucsfEl => {
+          if(ucsfEl.path.indexOf(el.path) > -1 && ucsfEl.depth === el.depth + 1){
+            el.children.push(ucsfEl)
+            delete unclassifiedList[unclassifiedList.indexOf(ucsfEl)]
           }
         })
         
-      if(isFound) return true
-      else {
-        items.forEach(g => {
-          if(this.activeGuideTreeIndex(g.children)){
-            g.active = true
+        if(el.children.length > 0){
+          this.setEditModeChildren(el.children, unclassifiedList)
         }
       })
-      }
-    },
-
-    // 재귀 호출로 트리 구조의 자식들 메뉴를 활성화
-    activeGuideTreeIndexRecursive(guide, parent, grandParent) {
-      if(guide.id === this.$store.state.guideId) {
-        guide.active = true
-        parent.active = true
-        grandParent.active = true
-        return
-      }
-      if(guide.children) {
-        for(let i = 0; i < guide.children.length; i++) {
-          this.activeGuideTreeIndexRecursive(guide.children[i], guide, parent)
-        }
-      }
-      
     }, 
-
     editOn(){
       if(this.keyword === '열려라 문'){
         this.editDialogActive = true
@@ -456,30 +377,19 @@ export default{
       this.editModeList = []
       this.editModeRemainList = []
       
-      // depth 이상치 확인
-      unclassifiedList.forEach(index => {
-        if(!index.depth || index.depth < 1){
-          this.editModeRemainList.push(index)
-          delete unclassifiedList[unclassifiedList.indexOf(index)]
-        }
-      })
-      unclassifiedList = unclassifiedList.filter(el => el) // empty 값 삭제
-      
       // depth 1 리스트 생성
       unclassifiedList.forEach(index => {
         if(index.depth === 1){
           this.editModeList.push(index)
-          delete unclassifiedList[unclassifiedList.indexOf(index)] // empty 처리
+          delete unclassifiedList[unclassifiedList.indexOf(index)] 
         }
       })
-      unclassifiedList = unclassifiedList.filter(el => el) // empty 값 삭제
-
 
       // depth 2 이상인 인덱스들 트리구조 생성
       this.setEditModeChildren(this.editModeList, unclassifiedList)
-      unclassifiedList = unclassifiedList.filter(el => el) // empty 값 삭제
       
-      this.editModeRemainList.push(...unclassifiedList)
+      unclassifiedList = unclassifiedList.filter(el => el) // empty 값 삭제
+      this.editModeRemainList = unclassifiedList
     },
     setEditModeChildren(targetList, unclassifiedList){
       targetList.forEach(el => {
@@ -659,9 +569,6 @@ export default{
     '$store.state.guideNavigator'() {
       this.navPositionList = this.$store.state.guideNavigator.map((nav) => nav.position)
     },
-    '$store.state.guideTreeFlag'() {
-      this.activeGuideTreeIndex()
-    },
     showSearch(val){
       if(val){
         this.$nextTick(()=>{