[ADD] 가이드 title 검색 기능 추가

docs-front/layouts/default.vue

@@ -102,20 +102,35 @@
         <v-spacer/>
 
         <v-text-field 
-          v-if="showSearch"
+          v-show="showSearch"
           v-model="keyword" 
           :maxlength="50" 
-            v-on:keyup.enter="search" 
           solo 
           dense 
           single-line
           rounded
-            class="ma-2" 
+          class="ma-2 search-input"
           hide-details 
           label="검색" 
-            style="border:1px solid #eee;max-width:240px;">
-          </v-text-field>
-        <v-icon @click="showSearch = !showSearch">{{showSearch ? 'mdi-close' : 'mdi-magnify'}}</v-icon>
+        />
+          
+        <v-icon @click="showSearch = !showSearch" class="header-icon">{{showSearch ? 'mdi-close' : 'mdi-magnify'}}</v-icon>
+        
+        <div v-show="showSearch" class="search-result">
+          <v-list v-if="searchedList.length > 0">
+            <v-list-item
+              v-for="(item, index) in searchedList"
+              :key="index"
+              @click="openGuide(item)"
+              class="pt-2"
+              dense
+            >
+              <span class="path">{{item.path.substring(0, item.path.length-1)}}</span>
+              <span v-html="paintColor(item.title)"></span>
+            </v-list-item>
+          </v-list>
+          <span v-else>Search Result</span>
+        </div>
         
         <!-- <v-btn @click="$store.state.editMode = !$store.state.editMode" elevation="0">편집</v-btn> -->
         <v-app-bar-nav-icon class="mobile-show" v-if="!drawer" @click.stop="drawer = !drawer" />
@@ -191,6 +206,7 @@ export default{
     drawer:true,
     guideTitle:'',
     clipped: false,
+    rawIndexList:[],
     guideIndex:[],
     loadingPageList: false,
     targetParentId: null,
@@ -201,7 +217,14 @@ export default{
     scrollPositionRate:0,
     showSearch:false,
   }),
-
+  computed: {
+    searchedList() {
+      if(this.rawIndexList.length === 0 || this.keyword === '')
+        return []
+      else 
+        return this.rawIndexList.filter(e => e.title.indexOf(this.keyword) > -1)
+    },
+  },
   methods:{
     openIndex() {
       let route = this.$router.resolve({path: '/'});
@@ -247,10 +270,10 @@ export default{
 
       await this.$axios.get('http://localhost:5000/test/index')
       .then(res => {
-        const rawIndexList = res.data
+        this.rawIndexList = res.data
         
         // 최상위 목차(depth==1) 추출(path에 슬래시 갯수가 1개)
-        rawIndexList.forEach(e => {
+        this.rawIndexList.forEach(e => {
           if(e.path.split('/').length === 2)
             this.guideIndex.push(e)
         });
@@ -259,7 +282,7 @@ export default{
           parentEl.children = []
           
           // depth==2 추출
-          rawIndexList.forEach(rawEl => {
+          this.rawIndexList.forEach(rawEl => {
             if(rawEl.path !== parentEl.path && rawEl.path.includes(parentEl.path)){
               parentEl.children.push(rawEl)
             }
@@ -438,12 +461,30 @@ export default{
 
     isShowNav() {
       return this.$store.state.guideNavigator
-    }
+    },
+    clickOutsideEvent(e){
+      const searchInput = document.querySelector('.search-input')
+      const searchResult = document.querySelector('.search-result')
+      const searchBtn = document.querySelector('.header-icon')
+      
+      const isClickInside = [searchInput, searchResult, searchBtn].some(item =>
+        item.contains(e.target)
+      )
       
+      if(!isClickInside)
+        this.showSearch = false
+    },
+    paintColor(text){
+      const container = document.createElement('div')
+      const coloredText = document.createElement('span')
+      container.appendChild(coloredText)
+      coloredText.innerHTML = this.keyword
+      coloredText.style.color = '#1e88e5'
+      return text.replaceAll(this.keyword, container.innerHTML)
+    }
   },
   mounted(){
     this.getGuideIndex()
-    
     window.addEventListener("scroll", this.scrollEvent);
   },
 
@@ -457,8 +498,65 @@ export default{
     },
     '$store.state.guideTreeFlag'() {
       this.activeGuideTreeIndex()
-        
+    },
+    showSearch(val){
+      if(val){
+        this.$nextTick(()=>{
+          document.querySelector('.search-input input').focus()
+          window.addEventListener('click', this.clickOutsideEvent);
+        })
+      } else {
+        window.removeEventListener('click', this.clickOutsideEvent);
+      }
     }
   },
 }
 </script>
+
+<style lang="scss">
+.search-input {
+  border:1px solid #eee;
+  border-radius: 28px 28px 0 0;
+  max-width:240px;
+}
+
+.search-result {
+  width: 240px;
+  height: 300px;
+  padding: 10px;
+  background-color: white;
+  z-index: 9;
+  position: absolute;
+  right: 48px;
+  top: 52px;
+  border: 1px solid rgb(238, 238, 238);
+  border-top: none;
+  border-radius: 0 0 28px 28px;
+  overflow: auto;
+  
+  .v-list {
+    .path {
+      position: absolute;
+      top: 4px;
+      font-size: 0.8rem;
+      width: 90%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  
+  > span {
+    display: inline-block;
+    text-align: center;
+    width: 100%;
+    line-height: 250px;
+    opacity: 0.75;
+  }
+}
+
+@media screen and (max-width: 1263px) {
+  .search-result {
+    right: 96px;
+  }
+}
+</style>
\ No newline at end of file