[Improve] 레이아웃 개편

docs-front/assets/scss/common.scss

@@ -90,6 +90,20 @@ input:-webkit-autofill:active {
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'Pretendard-Medium';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Pretendard-SemiBold';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
 
 .v-application {
   font-family: "Pretendard-Regular", sans-serif !important;
@@ -104,6 +118,7 @@ input:-webkit-autofill:active {
     }
     max-width: 1920px !important;
   }
+
 }
 
 .v-navigation-drawer__content {
@@ -259,6 +274,9 @@ hr {
 .v-main {
   min-height: calc(100vh - 345px) !important;
   min-width: 320px;
+  width:100%;
+  position: relative;
+  margin: 0 auto;
 
   .v-main__wrap {
     min-height: 100% !important;
@@ -455,7 +473,7 @@ div:hover {
 }
 
 .snotifyToast__inner {
-  font-family: "Noto Sans KR", sans-serif !important;
+  font-family: "Pretendard-Regular", sans-serif !important;
   min-height: 50px !important;
   padding: 5px 17px 5px 48px !important;
 }
@@ -488,6 +506,10 @@ div:hover {
   min-width: 320px !important;
 }
 
+.font-weight-bold{
+  font-family: "Pretendard-SemiBold", sans-serif !important;
+}
+
 @media screen and (max-width: 1080px) {
   .guide-navigator {
     display: none !important;

docs-front/assets/scss/guide.scss

+@font-face {
+  font-family: 'Pretendard-Medium';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
 
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&display=swap');
 
 .guide-app {
   overflow-x: hidden;
@@ -14,19 +19,16 @@
   }
   .guide-wrap {
     height: 100%;
-    max-width: 1280px !important;
+    max-width: 960px !important;
     margin:0 auto;
     margin-bottom: 36px;
-    padding : 36px;
-    background-color: #fff !important;
+    padding : 12px;
     position: relative;
 
     .guide-wrap-header{
       width:100%;
-      min-height:120px;
-      padding:36px;
-      color:#fff;
-      background-color: #1E88E5;
+      min-height:80px;
+      padding:36px 12px;
 
       .view-count {
         position: absolute;
@@ -43,12 +45,14 @@
     }
   
     .guide-content{
-      margin-top: 30px;
-      margin-bottom: 60px;
+      padding: 24px 12px 120px 12px;
       width:100% !important;
 
+      h1, h2, h3, h4, h5, h6{
+        font-family: "Pretendard-SemiBold", sans-serif !important;
+      }
+
       h2{
-        font-weight: bold;
         border-bottom: 1px solid rgba(128,128,128,0.2);
         padding-top:12px;
         padding-bottom:12px;
@@ -77,20 +81,15 @@
     }
     
     .pagination {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      margin-bottom: 20px;
-      
-      hr {
-        min-width: 100%;
-      }
+      padding: 36px 12px;
       
       button {
         width: 45%;
         max-width: 300px;
       }
+      .v-btn{
+        border-radius: 1rem !important;
+      }
     }
   }
 
@@ -138,7 +137,6 @@
     right:0;
     top:90px;
     z-index: 1;
-    font-size: 13px !important;
     .guide-navigator-item{
       cursor: pointer;
       position: relative;
@@ -146,17 +144,18 @@
       line-height: 30px;
       .guide-navigator-item-selector{
         position: absolute;
-        height: 100%;
+        height: 20px;
+        top:calc(50% - 10px);
         width: 1px;
         left:-14px;
-        background-color: rgba(128,128,128,0.2);
+        background-color: #1E88E520;
         &.active{
           width: 2px;
           background-color: #1E88E5;
         }
       }
       .guide-navigator-item-text{
-        font-size: 13px !important;
+        font-size: 14px !important;
         &.active{
           color: #1E88E5;
           font-weight: bold;
@@ -167,23 +166,18 @@
 
   .topBtn {
     position: fixed;
-    bottom: 95px;
+    bottom: 24px;
     right: 24px;
     z-index: 9;
 
-    .mdi-chevron-up::before {
-      font-size: 2.9em;
-      font-weight: lighter;
-
-      /* 굵기조절x... */
+    .mdi-arrow-up::before {
+      font-size: 32px;
       text-align: center;
-      color: #777;
-      width: 60px;
-      height: 60px;
-      line-height: 60px;
-      background-color: #fff;
-      border-radius: 25px;
-      box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
+      width: 48px;
+      height: 48px;
+      line-height: 48px;
+      border-radius: 1.2rem;
+      border:1px solid rgba(0, 0, 0, 0.1);
     }
   }
   
@@ -191,36 +185,93 @@
     overflow-x: hidden;
     border-right:1px solid rgba(0,0,0,0.05) !important;
     
-    .v-list-item{
-      * {
-        font-size: 14px !important;
+    *{
+      font-family: "Pretendard-Medium", sans-serif !important;
+    }
+
+    .v-list-group__items{
+      .v-list-item{
+        padding-left: 16px !important;
+      }
+    }
+
+    .v-list-group__header{
+      border-radius: 0.75rem !important;
+
+      &::before{
+        border-radius: 0.75rem !important;
       }
-      &.active, &.v-list-item--active{
+      &::after{
+        border-radius: 0.75rem !important;
+      }
+      margin:2px 0;
+
+      &.v-list-item--active{
         *{
           font-weight: bold !important;
           color: #1E88E5;
         }
         background-color: rgba(128,128,128,0.07) !important;
+
+        position: relative;
+        &::after{
+          content: '';
+          position: absolute;
+          left:6px;
+          top:calc(50% - 9px);
+          height:18px;
+          min-height: 10px !important;
+          width:3px;
+          background-color: #1E88E5;
+          border-radius: 0.5rem;
+        }
       }
-      
-      .v-list-item__icon {
-        min-width: 14px !important;
-      }
-    }
     
-
-    .v-navigation-drawer__border {
-      display: none;
     }
+    .v-list-item{
+      margin:2px 0;
+      border-radius: 0.75rem !important;
+        * {
+          font-size: 14px !important;
+        }
+        &::before{
+          border-radius: 0.75rem !important;
+        }
+        &.active{
+          *{
+            font-weight: bold !important;
+            color: #1E88E5;
+          }
+          background-color: rgba(128,128,128,0.07) !important;
 
-    .modile-logo-wrap {
-      display: none;
-    }
+          position: relative;
+          &::after{
+            content: '';
+            position: absolute;
+            left:6px;
+            top:calc(50% - 9px);
+            height:18px;
+            min-height: 10px !important;
+            width:3px;
+            background-color: #1E88E5;
+            border-radius: 0.5rem;
+          }
+        }
+        
+      }
+      
+  
+      .v-navigation-drawer__border {
+        display: none;
+      }
+  
+      .modile-logo-wrap {
+        display: none;
+      }
   }
 
   //app-bar
   .app-bar-wrap {
-    background-color: #fff !important;
     //background-color: #1A237E !important;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -243,6 +294,10 @@
     .mobile-hide {
       display:inline-block;
     }
+
+    &.theme--light {
+      background-color: #fff !important;
+    }
   }
   
 }

docs-front/components/tree.vue

@@ -4,14 +4,12 @@
       v-for="(item, i) in items"
       :key="`guide-${item.title}-${i}`"
       :class="depth > 1 ? `ml-${depth*2}` : ''"
-      class="pa-0"
     >
       <v-list-item
         v-if="item.children.length === 0"
         @click="clickItemEvent(item)"
         :ripple="false"
-        :style="{'border-left': depth !== 1 && '1px solid rgba(0,0,0,0.15)'}"
-        :class="selectedItem === item ? 'active' : ''"
+        :class="selectedItem && selectedItem === item ? 'active' : ''"
       > 
         <v-list-item-title v-text="item.title" />
       </v-list-item>
@@ -21,8 +19,7 @@
         v-model="item.active"
         :ripple="false"
         :sub-group="depth > 1 ? true : false"
-        :class="selectedItem === item ? 'active' : ''"
-        :style="{'border-left': depth !== 1 && '1px solid rgba(0,0,0,0.15)'}"
+        :class="selectedItem && selectedItem === item ? 'active' : ''"
         prepend-icon=""
       >
         <template v-slot:appendIcon>
@@ -33,7 +30,6 @@
           <v-list-item-content
             v-if="item"
             @click="clickItemEvent(item)"
-            active-class="active"
           >
             <v-list-item-title v-text="item.title" />
           </v-list-item-content>
@@ -84,5 +80,7 @@ export default {
 <style lang="scss" scoped>
 .tree-container {
   width: 100%;
+
+ 
 }
 </style>
\ No newline at end of file

docs-front/i18n/messages/en.js

@@ -7,4 +7,5 @@ export default {
   "Github 리소스 보기": "View on Github",
   "이전 페이지": "Prev page",
   "다음 페이지": "Next page",
+  "브릿지 AI": "브릿지 AI",
 }
\ No newline at end of file

docs-front/i18n/messages/ko.js

@@ -7,4 +7,5 @@ export default {
   "Github 리소스 보기": "Github 리소스 보기",
   "이전 페이지": "이전 페이지",
   "다음 페이지": "다음 페이지",
+  "브릿지 AI": "브릿지 AI",
 }
\ No newline at end of file

docs-front/layouts/README.md

-# LAYOUTS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your Application Layouts.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

docs-front/layouts/default.vue

 <template>
   <v-app class="guide-app">
-    <div class="no-shadow">
 
-      <client-only>
-        <v-card class="guide-navigator" color="transparent" v-if="isShowNav()">
-          <v-icon small>mdi-text</v-icon>
-            {{$t('내용')}}
-
-            <v-card-text>
-              <v-row no-gutters
-                v-for="(item, i) in $store.state.guideNavigator"
-                :key="item.html"
-                @click="goGuideNav(item.position)"
-                class="guide-navigator-item"
+    <client-only>
+      <v-card class="guide-navigator" color="transparent" v-if="isShowNav()">
+        <v-icon dense class="mr-1">mdi-text</v-icon>
+          {{$t('내용')}}
+
+          <v-card-text>
+            <v-row no-gutters
+              v-for="(item, i) in $store.state.guideNavigator"
+              :key="item.html"
+              @click="goGuideNav(item.position)"
+              class="guide-navigator-item"
+            >
+              <span
+                class="guide-navigator-item-selector"
+                :class="{'active': currentNavIndex===i}"
               >
-                <span
-                  class="guide-navigator-item-selector"
-                  :class="{'active': currentNavIndex===i}"
-                >
-                </span>
-                <span class="guide-navigator-item-text" :class="{active : currentNavIndex === i}">{{item.html}}</span>
-              </v-row>
-            </v-card-text>
-          
-        </v-card>
+              </span>
+              <span class="guide-navigator-item-text" :class="{active : currentNavIndex === i}">{{item.html}}</span>
+            </v-row>
+          </v-card-text>
+        
+      </v-card>
 
-        <transition name="slide-fade">
-          <div class="topBtn" @click="goGuideNav(0)" v-if="!$store.state.editMode" >
-            <a>
-              <i><span class="mdi mdi-chevron-up"></span></i>
-            </a>
-          </div>
-          <!-- .topBtn(메인비주얼 벗어나면 나타남) end -->
-        </transition>
-      </client-only>
-    </div>
+      <transition name="slide-fade">
+        <div class="topBtn" @click="goGuideNav(0)" v-if="!$store.state.editMode" >
+          <a>
+            <i><span class="mdi mdi-arrow-up"></span></i>
+          </a>
+        </div>
+        <!-- .topBtn(메인비주얼 벗어나면 나타남) end -->
+      </transition>
+    </client-only>
 
     <v-navigation-drawer
       v-model="drawer"
@@ -51,18 +49,31 @@
             v-if="loadingPageList"
         ></v-skeleton-loader>
         
-        <v-list class="pa-0">
+        <v-list class="px-2">
           <v-list-item
             :ripple="false"
-            @click="[$router.push('/'), guideIndex.forEach((x)=>x.active = false)]"
-            active-class="active"
+            @click="[$router.push('/'), guideIndex.forEach((x)=>x.active = false), treeKey++]"
             :class="{active: $route.path === '/'}"
+            dense
           > 
-            <v-list-item-title>{{$t('홈')}}</v-list-item-title>
+            <v-list-item-title>
+              <div style="display:flex; flex-direction: row; align-items: center;">
+                <img class="mr-1"   src="/logo_v2/s01.png" cover height="20"/> 
+                {{$t('브릿지 AI')}}
+              </div>
+
+            </v-list-item-title>
           </v-list-item>
         </v-list>
-      
-        <v-list v-if="guideIndex && !loadingPageList">
+
+
+
+        <v-list-item-content class="mt-2 pb-0 grey--text mx-6 text-caption">
+          서비스 가이드
+        </v-list-item-content>
+        <v-list v-if="guideIndex && !loadingPageList" dense  class="px-2" 
+          :key="treeKey"
+        >
           <tree
             :items="guideIndex"
             :selectedItem="selectedIndex"
@@ -84,6 +95,18 @@
 
       </client-only>
 
+      <template v-slot:append>
+        <v-divider/>
+        <v-list-item dense href="http://www.vazilcompany.com" target="_blank" class="ma-2">
+          <v-list-item-content>
+            <v-row no-gutters align="center">
+                <v-img class="mr-2" src="/logo-a.svg" max-height="20" max-width="20" contain/>
+                Powered By <strong class="font-weight-bold ml-1">VAZIL</strong>
+            </v-row>
+          </v-list-item-content>
+        </v-list-item>
+      </template>
+
 
     </v-navigation-drawer>
     
@@ -95,9 +118,21 @@
     >
     <client-only>
       <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>
+        <div style="display:flex; flex-direction: row; align-items: center; cursor:pointer;"
+          @click="[$router.push('/'), guideIndex.forEach((x)=>x.active = false), treeKey++]"
+        >
+
+          <span  style="cursor:pointer;">
+            <img class="mt-1 mr-1" @click="$router.push('/')"  src="/logo_v2/s01.png" cover height="28"/>
+          </span>
+
+          <span class="font-weight-bold">
+            V R I D G E 
+            <strong class="ml-2">Docs</strong>
+          </span>
+        </div>
+
+
 
         <v-btn
           v-if="$store.state.editMode"
@@ -117,6 +152,13 @@
         
         <v-spacer/>
 
+        <v-btn href="https://app.vridgeai.com/" target="_blank" class="mx-6" text :ripple="false">
+          <span class="font-weight-bold">
+            🖥️ 서비스 이동
+          </span>
+          
+        </v-btn>
+
         <div class="search-container" v-show="showSearch">
           <v-text-field 
             v-model="keyword" 
@@ -149,17 +191,16 @@
           </div>
         </div>
           
-        <v-icon @click="showSearch = !showSearch" class="search-icon">{{showSearch ? 'mdi-close' : 'mdi-magnify'}}</v-icon>
-        <span @click="setLocale" class="locale-icon">
+        <span @click="setLocale" class="locale-icon mx-3">
           <span class="locale-icon__badge">{{$i18n.locale}}</span>
-          <v-icon class="ml-4 ">mdi-web</v-icon>
+          <v-icon >mdi-web</v-icon>
         </span>
 
         <v-app-bar-nav-icon class="mobile-show" v-if="!drawer" @click.stop="drawer = !drawer" />
       </v-row>
     </client-only>
 
-      <v-progress-linear absolute bottom :value="scrollPositionRate" height="1" background-color="#eee" color="primary" style="transition:none !important;" />
+      <v-progress-linear absolute bottom :value="scrollPositionRate" height="1" background-color="#999" background-opacity="0.3" color="primary" style="transition:none !important;" />
       
       <v-dialog v-model="editDialogPWActive" width="200">
         <v-form class="pa-5" @submit.prevent>
@@ -317,6 +358,7 @@ export default{
     loadingPageList: false,
     scrollPositionRate:0,
     showSearch:false,
+    treeKey:0,
     
     // 인덱스 관리
     editDialogActive: false,

docs-front/nuxt.config.js

@@ -2,7 +2,6 @@ import colors from 'vuetify/es5/util/colors'
 import i18nConfig from "./i18n/config";
 import locales from "./i18n/locales";
 
-
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
@@ -73,8 +72,8 @@ export default {
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
     customVariables: ['~/assets/variables.scss'],
-    heme: {
-      dark: true,
+    theme: {
+      dark: false,
       themes: {
         dark: {
           primary: colors.blue.darken2,
@@ -87,11 +86,6 @@ export default {
         }
       }
     },
-    defaultAssets: {
-      font: {
-        family: 'Noto Sans KR'
-      }
-    }
   },
 
   animejs: true,
@@ -122,6 +116,7 @@ export default {
 
   axios:{
     baseURL: (process.env.API_URL || 'https://docs.vridgeai.com') + '/api', // 개발 서버
+    browserBaseURL: (process.env.API_URL || 'https://docs.vridgeai.com') + '/api', // 개발 서버
   },
   
   healthCheck: {

docs-front/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@nuxtjs/axios": "^5.13.6",
         "@nuxtjs/markdownit": "^2.0.0",
+        "@nuxtjs/vuetify": "^1.11.3",
         "core-js": "^3.25.3",
         "markdown-it-attrs": "^4.1.6",
         "markdown-it-div": "^1.1.0",
@@ -21,13 +22,11 @@
         "vue-no-ssr": "^1.1.1",
         "vue-server-renderer": "^2.7.10",
         "vue-template-compiler": "^2.7.10",
-        "vuetify": "^2.6.10",
         "vuex": "^3.4.0",
         "vuex-persistedstate": "^4.1.0"
       },
       "devDependencies": {
         "@nuxtjs/svg": "^0.2.0",
-        "@nuxtjs/vuetify": "^1.12.3",
         "raw-loader": "^4.0.2"
       }
     },
@@ -3348,7 +3347,6 @@
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.3.tgz",
       "integrity": "sha512-6uVL3cfESMB00eVjJTNkyU4jvuPTGPn1yteo7lQTH6v+fxHcPaOgvzVYHIKSHIz1DecuOiB5c9b+YjsRP5+C8A==",
-      "dev": true,
       "dependencies": {
         "deepmerge": "^4.2.2",
         "sass": "~1.32.13",
@@ -4837,7 +4835,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
       "integrity": "sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==",
-      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -5814,7 +5811,6 @@
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/decache/-/decache-4.6.1.tgz",
       "integrity": "sha512-ohApBM8u9ygepJCjgBrEZSSxPjc0T/PJkD+uNyxXPkqudyUpdXpwJYp0VISm2WrPVzASU6DZyIi6BWdyw7uJ2Q==",
-      "dev": true,
       "dependencies": {
         "callsite": "^1.0.0"
       }
@@ -11976,7 +11972,6 @@
       "version": "1.32.13",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
       "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
-      "devOptional": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0"
       },
@@ -14574,7 +14569,6 @@
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.9.2.tgz",
       "integrity": "sha512-8PP2w7aAs/rjA+Izec6qY7sHVb75MNrGQrDOTZJ5IEnvl+NiFhVpU2iWdRDZ3eMS842cWxSWStvkr+KJJKy+Iw==",
-      "dev": true,
       "dependencies": {
         "acorn": "^8.4.1",
         "acorn-walk": "^8.2.0",
@@ -14606,7 +14600,6 @@
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
       "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -18207,7 +18200,6 @@
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.3.tgz",
       "integrity": "sha512-6uVL3cfESMB00eVjJTNkyU4jvuPTGPn1yteo7lQTH6v+fxHcPaOgvzVYHIKSHIz1DecuOiB5c9b+YjsRP5+C8A==",
-      "dev": true,
       "requires": {
         "deepmerge": "^4.2.2",
         "sass": "~1.32.13",
@@ -19376,8 +19368,7 @@
     "callsite": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
-      "integrity": "sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==",
-      "dev": true
+      "integrity": "sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ=="
     },
     "callsites": {
       "version": "3.1.0",
@@ -20102,7 +20093,6 @@
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/decache/-/decache-4.6.1.tgz",
       "integrity": "sha512-ohApBM8u9ygepJCjgBrEZSSxPjc0T/PJkD+uNyxXPkqudyUpdXpwJYp0VISm2WrPVzASU6DZyIi6BWdyw7uJ2Q==",
-      "dev": true,
       "requires": {
         "callsite": "^1.0.0"
       }
@@ -24593,7 +24583,6 @@
       "version": "1.32.13",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
       "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
-      "devOptional": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0"
       }
@@ -26589,7 +26578,6 @@
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.9.2.tgz",
       "integrity": "sha512-8PP2w7aAs/rjA+Izec6qY7sHVb75MNrGQrDOTZJ5IEnvl+NiFhVpU2iWdRDZ3eMS842cWxSWStvkr+KJJKy+Iw==",
-      "dev": true,
       "requires": {
         "acorn": "^8.4.1",
         "acorn-walk": "^8.2.0",
@@ -26601,8 +26589,7 @@
         "acorn": {
           "version": "8.8.2",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-          "dev": true
+          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
         }
       }
     },

docs-front/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/markdownit": "^2.0.0",
+    "@nuxtjs/vuetify": "^1.11.3",
     "core-js": "^3.25.3",
     "markdown-it-attrs": "^4.1.6",
     "markdown-it-div": "^1.1.0",
@@ -22,13 +23,11 @@
     "vue-no-ssr": "^1.1.1",
     "vue-server-renderer": "^2.7.10",
     "vue-template-compiler": "^2.7.10",
-    "vuetify": "^2.6.10",
     "vuex": "^3.4.0",
     "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@nuxtjs/svg": "^0.2.0",
-    "@nuxtjs/vuetify": "^1.12.3",
     "raw-loader": "^4.0.2"
   }
 }

docs-front/pages/_guide/index.vue

 <template>
   <div class="guide-wrap-container">
-    <v-container class="guide-wrap">
-      <v-row no-gutters align="center" class="guide-wrap-header">
-        <v-skeleton-loader
-            elevation="0"
-            type="text"
-            v-if="loading"
-            style="width:200px;  height:36px; padding-top:12px; padding-bottom:12px; margin-bottom:24px;"
-        ></v-skeleton-loader>
-        <v-skeleton-loader
-            elevation="0"
-            type="heading"
-            v-if="loading"
-            style="width:100%;"
-        ></v-skeleton-loader>
-        <span v-if="!loading && guide">
-          <span class="view-count">{{guide.view.toLocaleString()}} views</span>
-          <v-breadcrumbs
-            class="ma-0 px-0 py-2 "
-            :items="getBreadcrumbs()"
-          >
-            <template v-slot:divider>
-              <v-icon dark>mdi-chevron-right</v-icon>
-            </template>
+    <v-container class="guide-wrap" v-if="loading">
+      <v-row no-gutters align="center" justify="center" class="pa-8">
+        <v-progress-circular indeterminate color="primary"/>
+      </v-row>
+    </v-container>
 
-            <template v-slot:item= "{item}">
-              <span class="text--grey text--caption" style="cursor:pointer;" @click="openGuide(item.path)" >{{item.text}}</span>
-            </template>
-          
-          </v-breadcrumbs>
+    <v-container class="guide-wrap" v-else>
+      <v-row no-gutters align="center" class="guide-wrap-header">
+        <span v-if="guide">
+         
           <h1 v-text="guide.title" class="font-weight-bold"></h1>
         </span>
 
         <v-spacer/>
-        <span v-if="!loading && guide !== null">
-          <v-tooltip bottom transition="slide-y-transition">
-            <template v-slot:activator="{on, attrs}">
-              <v-btn dark v-on="on" v-bind="attrs" icon @click="openGithub(guide.contentKey)"><v-icon>mdi-github</v-icon></v-btn>
-            </template>
-            <span>
-              {{$t('Github 리소스 보기')}}
-            </span>
-          </v-tooltip>
-        </span>
       </v-row> 
 
-      <v-row class="guide-content pb-4" no-gutters>
-          <v-skeleton-loader
-            elevation="0"
-            class="my-4"
-            v-if="loading"
-            type="sentences, divider, image, paragraph , sentences, paragraph, sentences"
-            style="width:100%;"
-          ></v-skeleton-loader>
+      <v-row class="guide-content" no-gutters v-if="guide && guide.content">
+          <div v-html="$md.render(guide.content)"></div>
+      </v-row>
 
-          <!-- <div v-if="$store.state.editMode && guide">
-            <v-chip v-if="guide.keywordSet !== null" small label v-for="item in guide.keywordSet" :key="item" class="mr-1" close @click:close="removeKeyword(item)">
-              {{item}}
-            </v-chip>
-            <vridge-dialog
-              ref="keywordDialog"
-              title="키워드 추가"
-              @click-yes="addKeyword()"
-              :clickYesBtn="$t('create')"
-            >
-              <template v-slot:button>
-                <v-btn small elevation="0" @click="$refs.keywordDialog.dialog = true">추가</v-btn>
-              </template>
-              <template v-slot:content>
-                <v-text-field
-                  v-model="newKeyword"
-                  hide-details
-                  solo-inverted
-                >
-                </v-text-field>
-              </template>
-            </vridge-dialog>
-          </div> -->
-          
-          <div v-if="!loading && guide && guide.content"  v-html="$md.render(guide.content)"></div>
+      <v-row no-gutters>
+        <v-divider/>
       </v-row>
 
-      <v-row v-if="!loading" no-gutters class="px-6 pagination">
-        <v-divider class="my-3"/>
+      <v-row  no-gutters class="pagination">
         <v-btn
           v-if="guide !== null"
           :disabled="!guide.prevIndex"
-          class="primary--text"
           :style="guide.prevIndex ? '' : 'border: none;'"
           :ripple="false"
-          height="64"
+          height="80"
           text
           outlined
           @click="openGuide(guide.prevIndex)"
@@ -115,9 +56,8 @@
           v-if="guide !== null"
           :disabled="!guide.nextIndex"
           :style="guide.nextIndex ? '' : 'border: none;'"
-          class="primary--text"
           :ripple="false"
-          height="64"
+          height="80"
           text
           outlined
           @click="openGuide(guide.nextIndex)"

docs-front/pages/index.vue

@@ -29,6 +29,7 @@ export default {
   }),
   methods:{
     async getGuideIndex(){
+      console.log(this.$axios.defaults.baseURL)
       await this.$axios.get('/guide-index/all', {
         params:{
           locale: this.$i18n.locale

docs-front/static/logo-a.svg

+<?xml version="1.0" encoding="UTF-8"?><svg id="_레이어_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135.07 117.27"><defs><style>.cls-1{fill:#be1d2c;}</style></defs><g id="Layer_1"><path class="cls-1" d="m86.37,6.79S84.57,0,79.12,0h-2.55,0s-9.03,0-9.03,0h-9.03s0,0,0,0h-2.55c-5.45,0-7.25,6.78-7.25,6.78L0,117.27c14.52-16.31,35.19-15.97,35.19-15.97h2.03c5.53-.29,8-7.71,8-7.71l22.31-56.08,22.31,56.08s2.47,7.41,8,7.71h2.03s20.67-.33,35.19,15.97L86.37,6.79Z"/></g></svg>
\ No newline at end of file