[Improve] 스타일 개선

docs-front/assets/scss/common.scss

@@ -104,6 +104,13 @@ input:-webkit-autofill:active {
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'Pretendard-Bold';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
 
 .v-application {
   font-family: "Pretendard-Regular", sans-serif !important;
@@ -507,7 +514,8 @@ div:hover {
 }
 
 .font-weight-bold{
-  font-family: "Pretendard-SemiBold", sans-serif !important;
+  font-family: "Pretendard-Bold", sans-serif !important;
+  font-weight: bold;
 }
 
 @media screen and (max-width: 1080px) {
@@ -787,4 +795,9 @@ div:hover {
 
 .opacity-8 {
   opacity: 0.8;
+}
+.opacity-7 {
+  opacity: 0.7;
+}.opacity-6 {
+  opacity: 0.6;
 }
\ No newline at end of file

docs-front/assets/scss/guide.scss

@@ -13,9 +13,14 @@
     -webkit-font-smoothing: antialiased;
     font-weight: 400;
   }
+  h1, h2, h3{
+    font-family: "Pretendard-Bold", sans-serif !important;
+  }
+  h4, h5, h6{
+    font-family: "Pretendard-SemiBold", sans-serif !important;
+  }
   .guide-wrap-container{
     height: 100%;
-    padding-right: 240px;
   }
   .guide-wrap {
     height: 100%;
@@ -48,9 +53,7 @@
       padding: 24px 12px 120px 12px;
       width:100% !important;
 
-      h1, h2, h3, h4, h5, h6{
-        font-family: "Pretendard-SemiBold", sans-serif !important;
-      }
+      
 
       h2{
         border-bottom: 1px solid rgba(128,128,128,0.2);
@@ -133,9 +136,7 @@
     min-width:230px;
     min-height: 200px;
     height:calc(100vh - 15vh);
-    position:fixed !important;
-    right:0;
-    top:90px;
+    top:0px;
     z-index: 1;
     .guide-navigator-item{
       cursor: pointer;
@@ -171,7 +172,7 @@
     z-index: 9;
 
     .mdi-arrow-up::before {
-      font-size: 32px;
+      font-size: 21px;
       text-align: center;
       width: 48px;
       height: 48px;
@@ -259,6 +260,12 @@
         }
         
       }
+
+      .v-list--dense {
+        .v-list-item{
+          min-height: 34px !important;
+        }
+      }
       
   
       .v-navigation-drawer__border {
@@ -279,6 +286,7 @@
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    border-top: 1px solid #99999930 !important;
     .logout-btn-wrap {
       position: relative;
       align-items: center;

docs-front/i18n/messages/en.js

@@ -7,5 +7,52 @@ export default {
   "Github 리소스 보기": "View on Github",
   "이전 페이지": "Prev page",
   "다음 페이지": "Next page",
-  "브릿지 AI": "브릿지 AI",
+  "브릿지 AI": "VRIDGE AI",
+  "organization" : "organization",
+  "dashboard" : "dashboard",
+  "project" : "project",
+  "overview" : "overview",
+  "getting_started" : "getting started",
+  "sign_in_and_sign_up" : "sign in and sign up",
+  "dataset" : "dataset",
+  "label_class" : "label class",
+  "labeling_tools" : "labeling tools",
+  "labeling_tools_image" : "labeling tools image",
+  "interface" : "interface",
+  "labeling_tools_csv" : "labeling tools csv",
+  "ai_modeling" : "ai modeling",
+  "image_type" : "image type",
+  "pre_settings" : "pre settings",
+  "csv_type" : "csv type",
+  "ai_deploying" : "ai deploying",
+  "deploying_webpoint" : "deploying webpoint",
+  "web_points" : "web points",
+  "inference_server" : "inference server",
+  "model_test" : "model test",
+  "edge_points" : "edge points",
+  "create_edge_point" : "create edge point",
+  "member_management" : "member management",
+  "quest_and_answer" : "quest and answer",
+  "resources" : "resources",
+  "image_dataset" : "image dataset",
+  "csv_classification" : "csv classification",
+  "monitoring" : "monitoring",
+  "deploying_edgepoint" : "deploying edgepoint",
+  "rest_api" : "rest api",
+  "delete_edge_point" : "delete edge point",
+  "segs" : "segs",
+  "gggg" : "gggg",
+  "key_management" : "key management",
+  "usage_statistics" : "usage statistics",
+  "settings" : "settings",
+  "csv_dataset" : "csv dataset",
+  "image_object_detection" : "image object detection",
+  "training_result" : "training result",
+  "deploying_usage_statistics" : "deploying usage statistics",
+  "my_settings" : "my settings",
+  "payments" : "payments",
+  "image_segmentation" : "image segmentation",
+  "notification" : "notification",
+  "users_theme" : "users theme",
+  "project_management" : "project management",
 }
\ No newline at end of file

docs-front/i18n/messages/ko.js

@@ -8,4 +8,51 @@ export default {
   "이전 페이지": "이전 페이지",
   "다음 페이지": "다음 페이지",
   "브릿지 AI": "브릿지 AI",
+  "organization" : "조직",
+  "dashboard" : "대시보드",
+  "project" : "프로젝트",
+  "overview" : "개요",
+  "getting_started" : "시작하기",
+  "sign_in_and_sign_up" : "로그인 및 가입",
+  "dataset" : "데이터셋",
+  "label_class" : "레이블 클래스",
+  "labeling_tools" : "레이블링 도구",
+  "labeling_tools_image" : "레이블링 도구 이미지",
+  "interface" : "인터페이스",
+  "labeling_tools_csv" : "레이블링 도구 CSV",
+  "ai_modeling" : "AI 모델링",
+  "image_type" : "이미지 유형",
+  "pre_settings" : "사전 설정",
+  "csv_type" : "CSV 유형",
+  "ai_deploying" : "AI 배포",
+  "deploying_webpoint" : "웹포인트 배포",
+  "web_points" : "웹 포인트",
+  "inference_server" : "추론 서버",
+  "model_test" : "모델 테스트",
+  "edge_points" : "엣지 포인트",
+  "create_edge_point" : "엣지 포인트 생성",
+  "member_management" : "회원 관리",
+  "quest_and_answer" : "질문과 답변",
+  "resources" : "자원",
+  "image_dataset" : "이미지 데이터셋",
+  "csv_classification" : "CSV 분류",
+  "monitoring" : "모니터링",
+  "deploying_edgepoint" : "엣지포인트 배포",
+  "rest_api" : "REST API",
+  "delete_edge_point" : "엣지 포인트 삭제",
+  "segs" : "구분",
+  "gggg" : "gggg(미번역)",
+  "key_management" : "키 관리",
+  "usage_statistics" : "사용 통계",
+  "settings" : "설정",
+  "csv_dataset" : "CSV 데이터셋",
+  "image_object_detection" : "이미지 객체 감지",
+  "training_result" : "훈련 결과",
+  "deploying_usage_statistics" : "사용 통계 배포",
+  "my_settings" : "내 설정",
+  "payments" : "결제",
+  "image_segmentation" : "이미지 분할",
+  "notification" : "알림",
+  "users_theme" : "사용자 테마",
+  "project_management" : "프로젝트 관리",
 }
\ No newline at end of file

docs-front/layouts/default.vue

@@ -2,27 +2,30 @@
   <v-app class="guide-app">
 
     <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}"
+      <v-navigation-drawer  v-if="isShowNav()" clipped  right app style="margin-top:20px;">
+        <v-card class="guide-navigator" color="transparent">
+          <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>
-              <span class="guide-navigator-item-text" :class="{active : currentNavIndex === i}">{{item.html}}</span>
-            </v-row>
-          </v-card-text>
-        
-      </v-card>
+                <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>
+      </v-navigation-drawer>
+      
 
       <transition name="slide-fade">
         <div class="topBtn" @click="goGuideNav(0)" v-if="!$store.state.editMode" >
@@ -42,17 +45,12 @@
       clipped
     >
       <client-only>
-        <v-skeleton-loader
-            elevation="0"
-            type="card-heading ,list-item, list-item-three-line, list-item, list-item, list-item,list-item,list-item"
-            style="width:100%;"
-            v-if="loadingPageList"
-        ></v-skeleton-loader>
+
         
-        <v-list class="px-2">
+        <v-list class="px-2" dense>
           <v-list-item
             :ripple="false"
-            @click="[$router.push('/'), guideIndex.forEach((x)=>x.active = false), treeKey++]"
+            @click="[$router.push('/'), guideIndex.forEach((x)=>x.active = false), selectedIndex = null, treeKey++]"
             :class="{active: $route.path === '/'}"
             dense
           > 
@@ -66,14 +64,21 @@
           </v-list-item>
         </v-list>
 
+        <v-divider/>
 
-
-        <v-list-item-content class="mt-2 pb-0 grey--text mx-6 text-caption">
-          서비스 가이드
-        </v-list-item-content>
+        <v-skeleton-loader
+            elevation="0"
+            type="list-item, list-item, list-item, list-item,list-item,list-item"
+            style="width:100%;"
+            v-if="loadingPageList"
+        ></v-skeleton-loader>
+        
         <v-list v-if="guideIndex && !loadingPageList" dense  class="px-2" 
           :key="treeKey"
         >
+          <v-list-item-content class="mx-4 pb-0 grey--text text-caption">
+            서비스 가이드
+          </v-list-item-content>
           <tree
             :items="guideIndex"
             :selectedItem="selectedIndex"
@@ -98,11 +103,19 @@
       <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-icon class="mr-4">
+            <v-img src="/logo-a.svg" max-height="20" max-width="20" contain/>
+          </v-list-item-icon>
+          <v-list-item-content >
+            <v-list-item-action-text>
+              <v-row no-gutters align="center" >
+                <span style="font-size: 12px !important;">
+                  Powered By
+                </span> 
+                <strong class="font-weight-bold ml-2" style="font-size:12px !important; letter-spacing: 1px;">© VAZIL</strong>
+              </v-row>
+            </v-list-item-action-text>
+
           </v-list-item-content>
         </v-list-item>
       </template>
@@ -115,6 +128,11 @@
       flat
       class="app-bar-wrap"
       clipped-left
+      clipped-right
+      fixed
+      dark
+      dense
+      style="z-index:20;"
     >
     <client-only>
       <v-row no-gutters align="center">
@@ -123,12 +141,12 @@
         >
 
           <span  style="cursor:pointer;">
-            <img class="mt-1 mr-1" @click="$router.push('/')"  src="/logo_v2/s01.png" cover height="28"/>
+            <img class="mt-1" @click="$router.push('/')"  src="/logo_v2/s01.png" cover height="28"/>
           </span>
 
-          <span class="font-weight-bold">
+          <span>
             V R I D G E 
-            <strong class="ml-2">Docs</strong>
+            <strong class="ml-2 font-weight-bold">Docs</strong>
           </span>
         </div>
 
@@ -200,7 +218,6 @@
       </v-row>
     </client-only>
 
-      <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>
@@ -326,6 +343,28 @@
       </v-dialog>
     </v-app-bar>
 
+    <v-app-bar
+      app
+      flat
+      clipped-left
+      clipped-right
+      dense
+      style="top:48px;"
+      class="app-bar-wrap"
+    >
+
+      <v-row no-gutters align="center" style="font-size:1rem !important;">
+        
+        <span>🏠 {{ $t('홈')}}</span>
+
+        <span v-for="item in paths" class="ml-2">
+          <v-icon small>mdi-chevron-right</v-icon>
+          {{ $t(item) }}
+        </span>
+      </v-row>
+      <v-progress-linear absolute bottom :value="scrollPositionRate" height="1" background-color="#999" background-opacity="0.3" color="primary" style="transition:none !important;" />
+    </v-app-bar>
+
     <v-main>
       <client-only>
         <Nuxt/>
@@ -347,6 +386,7 @@ export default{
   },
   data:() => ({
     //스크롤 헤더 트래커
+    paths:[],
     navPositionList: [],
     currentNavIndex: 0,
     keyword:'',
@@ -655,10 +695,18 @@ export default{
     },
     '$store.state.guideNavigator'() {
       this.navPositionList = this.$store.state.guideNavigator.map((nav) => nav.position)
+      this.scrollPositionRate = 0
     },
     '$route.params.guide'() {
       this.activeNav()
     },
+    '$store.state.path'() {
+      this.paths = []
+      for(let p of this.$store.state.path.split('/')) {
+        if(p)
+          this.paths.push(p)
+      }
+    },
     showSearch(val){
       if(val){
         this.$nextTick(()=>{
@@ -685,9 +733,9 @@ export default{
       position: absolute;
       right: 20px;
       top: -6px;
-      font-size: 0.75rem;
+      font-size: 0.65rem;
       text-transform: uppercase;
-      font-weight: 700;
+      font-weight: 400;
     }
   }
 }

docs-front/pages/_guide/index.vue

@@ -91,6 +91,7 @@ export default {
   }),
   methods:{
     async getGuide(id){
+      this.$store.commit('setPath', '')
       this.loading = true
       await this.$axios.get('/guide-index',{
         params:{
@@ -99,6 +100,7 @@ export default {
       })
       .then(res=>{
         this.guide = res.data
+        this.$store.commit('setPath', this.guide.path)
       })
       .catch(err=>{
         console.log(err)
@@ -127,24 +129,6 @@ export default {
       })
     },
 
-    getBreadcrumbs(){
-      let items = []
-      let paths = this.guide.path.substring(0, this.guide.path.length-1).split('/')
-      let pathTemp = ''
-      
-      for(let i = 0; i < paths.length; i++) {
-        pathTemp += paths[i]
-        let item = {
-          text: paths[i],
-          paths: pathTemp
-        }
-        pathTemp += '_'
-
-        items.push(item)
-      }
-      
-      return items
-    },
 
 
     

docs-front/pages/index.vue

 <template>
   <div class="guide-wrap-container">
     <v-container class="guide-wrap">
-      <v-row no-gutters align="center" justify="center" class="guide-wrap-header">
+      <v-row no-gutters align="center" class="guide-wrap-header">
         <h1 class="font-weight-bold">{{$t('서비스 가이드')}}</h1>
       </v-row>
 
       <v-row no-gutters class="guide-content">
-        <v-col cols="12" align="center" justify="center" class="ma-auto">
-          <img src="/logo_v2/s01.png" cover />
+        <v-col cols="12" justify="center" class="ma-auto">
           <p v-html="$t('메인 페이지 설명글')"></p>
-          <v-list v-if="guideIndex" class="d-md-flex d-lg-none">
+
+          <v-btn
+           href="https://github.com/vazilcompany/vridge-docs"
+           target="_blank"
+           large
+           :elevation="0"
+           color="primary"
+           class="font-weight-bold"
+          >
+            <v-icon left>mdi-github</v-icon>
+            깃헙에서 문서보기
+          </v-btn>
+          <v-list v-if="guideIndex">
             <tree
               :items="guideIndex"
               @clickItemEvent="openGuide"
             />
           </v-list>
+
+          
         </v-col>
       </v-row>
   </v-container>
@@ -29,7 +42,6 @@ export default {
   }),
   methods:{
     async getGuideIndex(){
-      console.log(this.$axios.defaults.baseURL)
       await this.$axios.get('/guide-index/all', {
         params:{
           locale: this.$i18n.locale
@@ -53,10 +65,13 @@ export default {
         }
       })
 
+      console.log(indexTree)
+
       // depth 2 이상인 인덱스들 트리구조 생성
       this.setTreeChild(indexTree, unclassifiedList)
-      
+
       this.guideIndex = JSON.parse(JSON.stringify(indexTree))
+
     },
     setTreeChild(targetList, unclassifiedList){
       targetList.forEach(el => {

docs-front/store/index.js

@@ -10,7 +10,8 @@ const store = () => new Vuex.Store({
     editMode:false,
     guideId: null,
     guideNavigator: [],
-    theme:false
+    theme:false,
+    path: ''
   },
   mutations:{
     setEditMode: (state, val) => {
@@ -28,6 +29,9 @@ const store = () => new Vuex.Store({
     setTheme: (state, theme) => {
       state.theme = theme
     },
+    setPath: (state, path) => {
+      state.path = path
+    }
   },
   actions:{