[MOD] 가이드 홈 페이지 스타일 정리

- 좌측에 nav bar가 없을 경우에만 메인 섹션에 목차 로드

docs-front/components/tree.vue

 <template>
-  <div>
+  <div class="tree-container">
     <div
       v-for="(item, i) in items"
       :key="`guide-${item.title}-${i}`"
@@ -80,3 +80,9 @@ export default {
   },
 } 
 </script>
+
+<style lang="scss" scoped>
+.tree-container {
+  width: 100%;
+}
+</style>
\ No newline at end of file

docs-front/pages/index.vue

 <template>
   <div class="guide-wrap-container">
-
     <v-container class="guide-wrap">
       <v-row no-gutters align="center" justify="center" class="guide-wrap-header">
         <h1 class="font-weight-bold">서비스 가이드</h1>
       </v-row>
 
       <v-row no-gutters class="guide-content">
-        <v-col cols="12" align="center" justify="center" class="mt-8">
-        브릿지 AI 플랫폼에서 제공하는 서비스를 사용하는 방법을 설명합니다.
+        <v-col cols="12" align="center" justify="center" class="ma-auto">
+          <img src="/logo_v2/s01.png" cover />
+          <p>AI를 손쉽게 개발할 수 있는 플랫폼,<br>브릿지 사용 방법을 소개합니다.</p>
+          <v-list v-if="guideIndex" class="d-md-flex d-lg-none">
+            <tree
+              :items="guideIndex"
+              @clickItemEvent="openGuide"
+            />
+          </v-list>
         </v-col>
-         <v-card style="width:100%;" flat color="transparent" class="px-4">
-           <v-divider class="my-12"/>
-            <v-col cols="12" class="my-4"><h3 class="font-weight-bold">목차</h3></v-col>
-            <v-treeview :items="guideIndex" item-text="title">
-
-              <template v-slot:label="{ item }">
-                <a @click="openGuide(item)">{{item.title}}</a>
-              </template>
-            </v-treeview>
-          </v-card>
       </v-row>
-
-        
   </v-container>
   </div>
-  
 </template>
 
 <script>
 export default {
   layout:'guide',
   data:() => ({
-    guideIndex: []
+    guideIndex: [],
   }),
   methods:{
-    getGuideIndex() {
-      this.$store.state.guideId = null
-      this.$store.commit('setGuide', {guideId:null, flag:false})
-      this.$axios.get('http://localhost:5000/test/index')
+    async getGuideIndex(){
+      await this.$axios.get('http://localhost:5000/guide-index/all')
       .then(res => {
-        this.guideIndex = res.data
+        this.getIndexTree(JSON.parse(JSON.stringify(res.data)));
       })
       .catch(err => {
         console.log(err)
       })
     },
+    getIndexTree(unclassifiedList){
+      let indexTree = []
+     
+      // depth 1 리스트 생성
+      unclassifiedList.forEach(el => {
+        if(el.depth === 1){
+          indexTree.push(el)
+          delete unclassifiedList[unclassifiedList.indexOf(el)] 
+        }
+      })
 
-    openGuide(guide) {
-      this.$router.push('/' + this.parsingContentTitle(guide))
-      this.$store.commit('setGuide', {guideId:guide.id, flag:true})
-      this.$store.state.guideId = guide.id
+      // depth 2 이상인 인덱스들 트리구조 생성
+      this.setTreeChild(indexTree, unclassifiedList)
+      
+      this.guideIndex = JSON.parse(JSON.stringify(indexTree))
     },
-
-    parsingContentTitle(content) {
-      let keyArray = content.contentKey.replace('.md','').split('/')
-      let titleKey = ''
-      if(keyArray[0] !== keyArray[1]) {
-        for(let i = 0; i < keyArray.length - 1; i++) {
-          titleKey += keyArray[i] + '_'
+    setTreeChild(targetList, unclassifiedList){
+      targetList.forEach(el => {
+        el.children = []
+        
+        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(el.children.length > 0){
+          this.setTreeChild(el.children, unclassifiedList)
         }
-        titleKey += content.title
-      } else {
-        titleKey =  content.title
-      }
-      return titleKey
+      })
+    },
+    openGuide(guide) {
+      this.$router.push('/' + guide.id)
     },
-    
   },
   mounted(){
     this.getGuideIndex()
-      
   },
   watch:{
   }
+}
+</script>
 
+<style lang="scss" scoped>
+.guide-content {
+  .v-list {
+    max-width: 400px;
+    text-align: left;
+    margin-top: 20px !important;
+  }
 }
-</script>
\ No newline at end of file
+</style>
\ No newline at end of file