[ADD] 가이드 페이지네이션 개선, 반응형 적용

docs-front/assets/scss/guide.scss

@@ -9,22 +9,19 @@
     font-weight: 400;
   }
   .guide-wrap-container{
+    height: 100%;
     padding-right: 240px;
   }
   .guide-wrap {
-    min-height: 90vh !important;
+    height: 100%;
     max-width: 1280px !important;
     margin:0 auto;
-    margin-top:36px;
     margin-bottom: 36px;
     padding : 36px;
     background-color: #fff !important;
     position: relative;
 
     .guide-wrap-header{
-      position: absolute;
-      top:0;
-      left:0;
       width:100%;
       min-height:120px;
       padding:36px;
@@ -46,7 +43,8 @@
     }
   
     .guide-content{
-      margin-top:130px;
+      margin-top: 30px;
+      margin-bottom: 60px;
       width:100% !important;
 
       h2{
@@ -56,16 +54,16 @@
         padding-bottom:12px;
         margin-top:48px;
         margin-bottom:24px;
+        
+        &:nth-child(1) {
+          margin-top: 20px;
+        }
       }
 
       img{
         max-width: 100% !important;
         display: block;
         margin:0 auto !important;
-        
-        
-        
-        
       }
       > div{
         width:100%;
@@ -77,8 +75,23 @@
         margin-bottom:6px;
       }
     }
-  
     
+    .pagination {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      margin-bottom: 20px;
+      
+      hr {
+        min-width: 100%;
+      }
+      
+      button {
+        width: 45%;
+        max-width: 300px;
+      }
+    }
   }
 
   @media screen and (max-width: 1080px){

docs-front/pages/_guide/index.vue

@@ -45,7 +45,7 @@
         </span>
       </v-row> 
 
-      <v-row class="guide-content pb-16" no-gutters>
+      <v-row class="guide-content pb-4" no-gutters>
           <v-skeleton-loader
             elevation="0"
             class="my-4"
@@ -78,58 +78,67 @@
             </vridge-dialog>
           </div> -->
           
-          <div v-if="!loading && guide && guide.content"  v-html="$md.render(guide.content)" style="padding-bottom:200px;"></div>
+          <div v-if="!loading && guide && guide.content"  v-html="$md.render(guide.content)"></div>
       </v-row>
 
-      <v-divider class="my-8"/>
-      
-      <v-row no-gutters align="center">
-        <v-btn class="primary--text" :ripple="false" height="64" text outlined @click="openGuide(guide.prevGuide)" v-if="guide !== null && guide.prevGuide">
-          <v-row no-gutters align="center">
-            <v-col class="mr-8">
+      <v-row v-if="!loading" no-gutters class="px-6 pagination">
+        <v-divider class="my-3"/>
+        <v-btn
+          v-if="guide !== null"
+          :disabled="!guide.prevIndex"
+          class="primary--text"
+          :style="guide.prevIndex ? '' : 'border: none;'"
+          :ripple="false"
+          height="64"
+          text
+          outlined
+          @click="openGuide(guide.prevIndex)"
+        >
+          <v-row v-if="guide.prevIndex" no-gutters align="center">
+            <v-col cols="2" sm="1">
               <v-icon left>mdi-chevron-left</v-icon>
             </v-col>
-            <v-col align="end" justify="end"> 
-              <span class="grey--text">이전 페이지</span> <br/>
-              <span style="font-size:1.1rem;font-weight:bold;">
-                {{guide.prevGuide.title}} 
+            <v-col cols="10" sm="11" align="end"> 
+              <span :style="`color: ${$vuetify.breakpoint.xsOnly ? '#1976d2' : 'grey'}`">이전 페이지</span>
+              <span class="d-none d-sm-flex flex-column" style="font-size:1.1rem; font-weight:bold;">
+                {{guide.prevIndex.title}} 
               </span>
             </v-col>
-            
+          </v-row>
+          <v-row v-else no-gutters align="center">
           </v-row>
         </v-btn>
 
-        <v-skeleton-loader
-          v-else-if="guide === null"
-            elevation="0"
-            type="button"
-          ></v-skeleton-loader>
-
         <v-spacer/>
 
-        <v-btn class="primary--text" :ripple="false" height="64" text outlined @click="openGuide(guide.nextGuide)" v-if="guide !== null && guide.nextGuide">
-          
-          <v-row no-gutters align="center">
-            <v-col align="start" justify="start"> 
-              <span class="grey--text">다음 페이지</span> <br/>
-              <span style="font-size:1.1rem;font-weight:bold;">
-                {{ guide.nextGuide.title}} 
+        <v-btn
+          v-if="guide !== null"
+          :disabled="!guide.nextIndex"
+          :style="guide.nextIndex ? '' : 'border: none;'"
+          class="primary--text"
+          :ripple="false"
+          height="64"
+          text
+          outlined
+          @click="openGuide(guide.nextIndex)"
+        >
+          <v-row v-if="guide.nextIndex" no-gutters align="center">
+            <v-col cols="10" sm="11" align="start"> 
+              <span :style="`color: ${$vuetify.breakpoint.xsOnly ? '#1976d2' : 'grey'}`">다음 페이지</span>
+              <span class="d-none d-sm-flex flex-column" style="font-size:1.1rem;font-weight:bold;">
+                {{ guide.nextIndex.title}} 
               </span>
             </v-col>
-            <v-col class="ml-8">
+            <v-col cols="2" sm="1">
               <v-icon right>mdi-chevron-right</v-icon>
             </v-col>
           </v-row>
+          <v-row v-else no-gutters align="center">
+          </v-row>
         </v-btn>
-        <v-skeleton-loader
-          v-else-if="guide === null"
-            elevation="0"
-            type="button"
-          ></v-skeleton-loader>
       </v-row>
     </v-container>
   </div>
-  
 </template>
 
 <script>