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

docs-front/layouts/default.vue

@@ -93,45 +93,44 @@
       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"/>
+          <img @click="$router.push('/')"  src="/logo_v2/01.png" cover height="28"/>
         </span>
 
         <v-spacer/>
 
-        <v-text-field 
-          v-show="showSearch"
-          v-model="keyword" 
-          :maxlength="50" 
-          solo 
-          dense 
-          single-line
-          rounded
-          class="ma-2 search-input"
-          hide-details 
-          label="검색" 
-        />
+        <div class="search-container" v-show="showSearch">
+          <v-text-field 
+            v-model="keyword" 
+            :maxlength="50" 
+            solo 
+            dense 
+            single-line
+            rounded
+            class="ma-2 search-input"
+            hide-details 
+            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)"
-              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-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), showSearch = false"
+                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>
         </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,49 +516,96 @@ export default{
 </script>
 
 <style lang="scss">
-.search-input {
-  border:1px solid #eee;
-  border-radius: 28px 28px 0 0;
-  max-width:240px;
+html.search-on {
+  @media screen and (max-width: 600px) {
+    overflow: hidden !important;
+  
+    .topBtn {
+      display: none;
+    }
+  }
 }
 
-.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;
+.search-container {
+  .search-input {
+    border:1px solid #eee;
+    border-radius: 28px 28px 0 0;
+    max-width:240px;
+  }
   
-  .v-list {
-    .path {
-      position: absolute;
-      top: 4px;
-      font-size: 0.8rem;
-      width: 90%;
-      overflow: hidden;
-      text-overflow: ellipsis;
+  .search-result {
+    width: 240px;
+    height: 300px;
+    padding: 10px;
+    background-color: white;
+    z-index: 9;
+    position: absolute;
+    top: 48px;
+    right: 96px;
+    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;
     }
   }
   
-  > span {
-    display: inline-block;
-    text-align: center;
-    width: 100%;
-    line-height: 250px;
-    opacity: 0.75;
+  
+  @media screen and (min-width: 1264px) {
+    .search-result {
+      right: 48px;
+    }
   }
-}
 
-@media screen and (max-width: 1263px) {
-  .search-result {
-    right: 96px;
+  @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