[STYLE] 검색 섹션 반응형 적용

docs-front/layouts/default.vue

@@ -93,16 +93,14 @@
       clipped-left
     >
       <v-row no-gutters align="center">
-        
-
         <span  style="cursor:pointer;" class="pa-2">
           <img @click="$router.push('/')"  src="/logo_v2/01.png" cover height="28"/>
         </span>
 
         <v-spacer/>
 
+        <div class="search-container" v-show="showSearch">
           <v-text-field 
-          v-show="showSearch"
             v-model="keyword" 
             :maxlength="50" 
             solo 
@@ -114,14 +112,12 @@
             label="검색" 
           />
           
-        <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)"
+                @click="openGuide(item), showSearch = false"
                 class="pt-2"
                 dense
               >
@@ -131,6 +127,9 @@
             </v-list>
             <span v-else>Search Result</span>
           </div>
+        </div>
+          
+        <v-icon @click="showSearch = !showSearch" class="header-icon">{{showSearch ? 'mdi-close' : 'mdi-magnify'}}</v-icon>
 
         <!-- <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" />
@@ -463,11 +462,12 @@ export default{
       return this.$store.state.guideNavigator
     },
     clickOutsideEvent(e){
+      const searchContainer = document.querySelector('.search-container')
       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 =>
+      const isClickInside = [searchContainer, searchInput, searchResult, searchBtn].some(item =>
         item.contains(e.target)
       )
       
@@ -502,10 +502,12 @@ export default{
     showSearch(val){
       if(val){
         this.$nextTick(()=>{
+          document.getElementsByTagName('html')[0].classList.add('search-on')
           document.querySelector('.search-input input').focus()
           window.addEventListener('click', this.clickOutsideEvent);
         })
       } else {
+        document.getElementsByTagName('html')[0].classList.remove('search-on')
         window.removeEventListener('click', this.clickOutsideEvent);
       }
     }
@@ -514,21 +516,32 @@ export default{
 </script>
 
 <style lang="scss">
-.search-input {
+html.search-on {
+  @media screen and (max-width: 600px) {
+    overflow: hidden !important;
+  
+    .topBtn {
+      display: none;
+    }
+  }
+}
+
+.search-container {
+  .search-input {
     border:1px solid #eee;
     border-radius: 28px 28px 0 0;
     max-width:240px;
-}
+  }
   
-.search-result {
+  .search-result {
     width: 240px;
     height: 300px;
     padding: 10px;
     background-color: white;
     z-index: 9;
     position: absolute;
-  right: 48px;
-  top: 52px;
+    top: 48px;
+    right: 96px;
     border: 1px solid rgb(238, 238, 238);
     border-top: none;
     border-radius: 0 0 28px 28px;
@@ -552,11 +565,47 @@ export default{
       line-height: 250px;
       opacity: 0.75;
     }
-}
+  }
   
-@media screen and (max-width: 1263px) {
+  
+  @media screen and (min-width: 1264px) {
     .search-result {
-    right: 96px;
+      right: 48px;
+    }
+  }
+
+  @media screen and (min-width: 960px) {
+    .search-result {
+      top: 52px;
+    }
+  }
+  
+  @media screen and (max-width: 600px) {
+    position: absolute;
+    top: 54px;
+    left: 0;
+    background: white;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 9;
+
+    .search-input {
+      height: 40px;
+      max-height: 40px;
+      margin-top: 20% !important;
+      border-radius: 28px;
+    }
+    
+    .search-result {
+      position: static;
+      border: none;
+      width: 300px;
+      margin-top: 20px;
+      height: 400px;
+    }
   }
 }
 </style>
\ No newline at end of file