Commit fa736edf authored by Gyeongho Park's avatar Gyeongho Park

[Improve] 레이아웃 개편

parent 33f01c18
...@@ -90,6 +90,20 @@ input:-webkit-autofill:active { ...@@ -90,6 +90,20 @@ input:-webkit-autofill:active {
font-style: normal; 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 { .v-application {
font-family: "Pretendard-Regular", sans-serif !important; font-family: "Pretendard-Regular", sans-serif !important;
...@@ -104,6 +118,7 @@ input:-webkit-autofill:active { ...@@ -104,6 +118,7 @@ input:-webkit-autofill:active {
} }
max-width: 1920px !important; max-width: 1920px !important;
} }
} }
.v-navigation-drawer__content { .v-navigation-drawer__content {
...@@ -259,6 +274,9 @@ hr { ...@@ -259,6 +274,9 @@ hr {
.v-main { .v-main {
min-height: calc(100vh - 345px) !important; min-height: calc(100vh - 345px) !important;
min-width: 320px; min-width: 320px;
width:100%;
position: relative;
margin: 0 auto;
.v-main__wrap { .v-main__wrap {
min-height: 100% !important; min-height: 100% !important;
...@@ -455,7 +473,7 @@ div:hover { ...@@ -455,7 +473,7 @@ div:hover {
} }
.snotifyToast__inner { .snotifyToast__inner {
font-family: "Noto Sans KR", sans-serif !important; font-family: "Pretendard-Regular", sans-serif !important;
min-height: 50px !important; min-height: 50px !important;
padding: 5px 17px 5px 48px !important; padding: 5px 17px 5px 48px !important;
} }
...@@ -488,6 +506,10 @@ div:hover { ...@@ -488,6 +506,10 @@ div:hover {
min-width: 320px !important; min-width: 320px !important;
} }
.font-weight-bold{
font-family: "Pretendard-SemiBold", sans-serif !important;
}
@media screen and (max-width: 1080px) { @media screen and (max-width: 1080px) {
.guide-navigator { .guide-navigator {
display: none !important; display: none !important;
......
@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 { .guide-app {
overflow-x: hidden; overflow-x: hidden;
...@@ -14,19 +19,16 @@ ...@@ -14,19 +19,16 @@
} }
.guide-wrap { .guide-wrap {
height: 100%; height: 100%;
max-width: 1280px !important; max-width: 960px !important;
margin:0 auto; margin:0 auto;
margin-bottom: 36px; margin-bottom: 36px;
padding : 36px; padding : 12px;
background-color: #fff !important;
position: relative; position: relative;
.guide-wrap-header{ .guide-wrap-header{
width:100%; width:100%;
min-height:120px; min-height:80px;
padding:36px; padding:36px 12px;
color:#fff;
background-color: #1E88E5;
.view-count { .view-count {
position: absolute; position: absolute;
...@@ -43,12 +45,14 @@ ...@@ -43,12 +45,14 @@
} }
.guide-content{ .guide-content{
margin-top: 30px; padding: 24px 12px 120px 12px;
margin-bottom: 60px;
width:100% !important; width:100% !important;
h1, h2, h3, h4, h5, h6{
font-family: "Pretendard-SemiBold", sans-serif !important;
}
h2{ h2{
font-weight: bold;
border-bottom: 1px solid rgba(128,128,128,0.2); border-bottom: 1px solid rgba(128,128,128,0.2);
padding-top:12px; padding-top:12px;
padding-bottom:12px; padding-bottom:12px;
...@@ -77,20 +81,15 @@ ...@@ -77,20 +81,15 @@
} }
.pagination { .pagination {
position: absolute; padding: 36px 12px;
bottom: 0;
left: 0;
width: 100%;
margin-bottom: 20px;
hr {
min-width: 100%;
}
button { button {
width: 45%; width: 45%;
max-width: 300px; max-width: 300px;
} }
.v-btn{
border-radius: 1rem !important;
}
} }
} }
...@@ -138,7 +137,6 @@ ...@@ -138,7 +137,6 @@
right:0; right:0;
top:90px; top:90px;
z-index: 1; z-index: 1;
font-size: 13px !important;
.guide-navigator-item{ .guide-navigator-item{
cursor: pointer; cursor: pointer;
position: relative; position: relative;
...@@ -146,17 +144,18 @@ ...@@ -146,17 +144,18 @@
line-height: 30px; line-height: 30px;
.guide-navigator-item-selector{ .guide-navigator-item-selector{
position: absolute; position: absolute;
height: 100%; height: 20px;
top:calc(50% - 10px);
width: 1px; width: 1px;
left:-14px; left:-14px;
background-color: rgba(128,128,128,0.2); background-color: #1E88E520;
&.active{ &.active{
width: 2px; width: 2px;
background-color: #1E88E5; background-color: #1E88E5;
} }
} }
.guide-navigator-item-text{ .guide-navigator-item-text{
font-size: 13px !important; font-size: 14px !important;
&.active{ &.active{
color: #1E88E5; color: #1E88E5;
font-weight: bold; font-weight: bold;
...@@ -167,23 +166,18 @@ ...@@ -167,23 +166,18 @@
.topBtn { .topBtn {
position: fixed; position: fixed;
bottom: 95px; bottom: 24px;
right: 24px; right: 24px;
z-index: 9; z-index: 9;
.mdi-chevron-up::before { .mdi-arrow-up::before {
font-size: 2.9em; font-size: 32px;
font-weight: lighter;
/* 굵기조절x... */
text-align: center; text-align: center;
color: #777; width: 48px;
width: 60px; height: 48px;
height: 60px; line-height: 48px;
line-height: 60px; border-radius: 1.2rem;
background-color: #fff; border:1px solid rgba(0, 0, 0, 0.1);
border-radius: 25px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
} }
} }
...@@ -191,36 +185,93 @@ ...@@ -191,36 +185,93 @@
overflow-x: hidden; overflow-x: hidden;
border-right:1px solid rgba(0,0,0,0.05) !important; border-right:1px solid rgba(0,0,0,0.05) !important;
.v-list-item{ *{
* { font-family: "Pretendard-Medium", sans-serif !important;
font-size: 14px !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; font-weight: bold !important;
color: #1E88E5; color: #1E88E5;
} }
background-color: rgba(128,128,128,0.07) !important; 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 { position: relative;
display: none; &::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
.app-bar-wrap { .app-bar-wrap {
background-color: #fff !important;
//background-color: #1A237E !important; //background-color: #1A237E !important;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
...@@ -243,6 +294,10 @@ ...@@ -243,6 +294,10 @@
.mobile-hide { .mobile-hide {
display:inline-block; display:inline-block;
} }
&.theme--light {
background-color: #fff !important;
}
} }
} }
......
...@@ -4,14 +4,12 @@ ...@@ -4,14 +4,12 @@
v-for="(item, i) in items" v-for="(item, i) in items"
:key="`guide-${item.title}-${i}`" :key="`guide-${item.title}-${i}`"
:class="depth > 1 ? `ml-${depth*2}` : ''" :class="depth > 1 ? `ml-${depth*2}` : ''"
class="pa-0"
> >
<v-list-item <v-list-item
v-if="item.children.length === 0" v-if="item.children.length === 0"
@click="clickItemEvent(item)" @click="clickItemEvent(item)"
:ripple="false" :ripple="false"
:style="{'border-left': depth !== 1 && '1px solid rgba(0,0,0,0.15)'}" :class="selectedItem && selectedItem === item ? 'active' : ''"
:class="selectedItem === item ? 'active' : ''"
> >
<v-list-item-title v-text="item.title" /> <v-list-item-title v-text="item.title" />
</v-list-item> </v-list-item>
...@@ -21,8 +19,7 @@ ...@@ -21,8 +19,7 @@
v-model="item.active" v-model="item.active"
:ripple="false" :ripple="false"
:sub-group="depth > 1 ? true : false" :sub-group="depth > 1 ? true : false"
:class="selectedItem === item ? 'active' : ''" :class="selectedItem && selectedItem === item ? 'active' : ''"
:style="{'border-left': depth !== 1 && '1px solid rgba(0,0,0,0.15)'}"
prepend-icon="" prepend-icon=""
> >
<template v-slot:appendIcon> <template v-slot:appendIcon>
...@@ -33,7 +30,6 @@ ...@@ -33,7 +30,6 @@
<v-list-item-content <v-list-item-content
v-if="item" v-if="item"
@click="clickItemEvent(item)" @click="clickItemEvent(item)"
active-class="active"
> >
<v-list-item-title v-text="item.title" /> <v-list-item-title v-text="item.title" />
</v-list-item-content> </v-list-item-content>
...@@ -84,5 +80,7 @@ export default { ...@@ -84,5 +80,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.tree-container { .tree-container {
width: 100%; width: 100%;
} }
</style> </style>
\ No newline at end of file
...@@ -7,4 +7,5 @@ export default { ...@@ -7,4 +7,5 @@ export default {
"Github 리소스 보기": "View on Github", "Github 리소스 보기": "View on Github",
"이전 페이지": "Prev page", "이전 페이지": "Prev page",
"다음 페이지": "Next page", "다음 페이지": "Next page",
"브릿지 AI": "브릿지 AI",
} }
\ No newline at end of file
...@@ -7,4 +7,5 @@ export default { ...@@ -7,4 +7,5 @@ export default {
"Github 리소스 보기": "Github 리소스 보기", "Github 리소스 보기": "Github 리소스 보기",
"이전 페이지": "이전 페이지", "이전 페이지": "이전 페이지",
"다음 페이지": "다음 페이지", "다음 페이지": "다음 페이지",
"브릿지 AI": "브릿지 AI",
} }
\ No newline at end of file
# 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).
<template> <template>
<v-app class="guide-app"> <v-app class="guide-app">
<div class="no-shadow">
<client-only> <client-only>
<v-card class="guide-navigator" color="transparent" v-if="isShowNav()"> <v-card class="guide-navigator" color="transparent" v-if="isShowNav()">
<v-icon small>mdi-text</v-icon> <v-icon dense class="mr-1">mdi-text</v-icon>
{{$t('내용')}} {{$t('내용')}}
<v-card-text> <v-card-text>
<v-row no-gutters <v-row no-gutters
v-for="(item, i) in $store.state.guideNavigator" v-for="(item, i) in $store.state.guideNavigator"
:key="item.html" :key="item.html"
@click="goGuideNav(item.position)" @click="goGuideNav(item.position)"
class="guide-navigator-item" class="guide-navigator-item"
>
<span
class="guide-navigator-item-selector"
:class="{'active': currentNavIndex===i}"
> >
<span </span>
class="guide-navigator-item-selector" <span class="guide-navigator-item-text" :class="{active : currentNavIndex === i}">{{item.html}}</span>
:class="{'active': currentNavIndex===i}" </v-row>
> </v-card-text>
</span>
<span class="guide-navigator-item-text" :class="{active : currentNavIndex === i}">{{item.html}}</span> </v-card>
</v-row>
</v-card-text>
</v-card>
<transition name="slide-fade"> <transition name="slide-fade">
<div class="topBtn" @click="goGuideNav(0)" v-if="!$store.state.editMode" > <div class="topBtn" @click="goGuideNav(0)" v-if="!$store.state.editMode" >
<a> <a>
<i><span class="mdi mdi-chevron-up"></span></i> <i><span class="mdi mdi-arrow-up"></span></i>
</a> </a>
</div> </div>
<!-- .topBtn(메인비주얼 벗어나면 나타남) end --> <!-- .topBtn(메인비주얼 벗어나면 나타남) end -->
</transition> </transition>
</client-only> </client-only>
</div>
<v-navigation-drawer <v-navigation-drawer
v-model="drawer" v-model="drawer"
...@@ -51,18 +49,31 @@ ...@@ -51,18 +49,31 @@
v-if="loadingPageList" v-if="loadingPageList"
></v-skeleton-loader> ></v-skeleton-loader>
<v-list class="pa-0"> <v-list class="px-2">
<v-list-item <v-list-item
:ripple="false" :ripple="false"
@click="[$router.push('/'), guideIndex.forEach((x)=>x.active = false)]" @click="[$router.push('/'), guideIndex.forEach((x)=>x.active = false), treeKey++]"
active-class="active"
:class="{active: $route.path === '/'}" :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-item>
</v-list> </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 <tree
:items="guideIndex" :items="guideIndex"
:selectedItem="selectedIndex" :selectedItem="selectedIndex"
...@@ -84,6 +95,18 @@ ...@@ -84,6 +95,18 @@
</client-only> </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> </v-navigation-drawer>
...@@ -95,9 +118,21 @@ ...@@ -95,9 +118,21 @@
> >
<client-only> <client-only>
<v-row no-gutters align="center"> <v-row no-gutters align="center">
<span style="cursor:pointer;" class="pa-2"> <div style="display:flex; flex-direction: row; align-items: center; cursor:pointer;"
<img @click="$router.push('/')" src="/logo_v2/01.png" cover height="28"/> @click="[$router.push('/'), guideIndex.forEach((x)=>x.active = false), treeKey++]"
</span> >
<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-btn
v-if="$store.state.editMode" v-if="$store.state.editMode"
...@@ -117,6 +152,13 @@ ...@@ -117,6 +152,13 @@
<v-spacer/> <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"> <div class="search-container" v-show="showSearch">
<v-text-field <v-text-field
v-model="keyword" v-model="keyword"
...@@ -149,17 +191,16 @@ ...@@ -149,17 +191,16 @@
</div> </div>
</div> </div>
<v-icon @click="showSearch = !showSearch" class="search-icon">{{showSearch ? 'mdi-close' : 'mdi-magnify'}}</v-icon> <span @click="setLocale" class="locale-icon mx-3">
<span @click="setLocale" class="locale-icon">
<span class="locale-icon__badge">{{$i18n.locale}}</span> <span class="locale-icon__badge">{{$i18n.locale}}</span>
<v-icon class="ml-4 ">mdi-web</v-icon> <v-icon >mdi-web</v-icon>
</span> </span>
<v-app-bar-nav-icon class="mobile-show" v-if="!drawer" @click.stop="drawer = !drawer" /> <v-app-bar-nav-icon class="mobile-show" v-if="!drawer" @click.stop="drawer = !drawer" />
</v-row> </v-row>
</client-only> </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-dialog v-model="editDialogPWActive" width="200">
<v-form class="pa-5" @submit.prevent> <v-form class="pa-5" @submit.prevent>
...@@ -317,6 +358,7 @@ export default{ ...@@ -317,6 +358,7 @@ export default{
loadingPageList: false, loadingPageList: false,
scrollPositionRate:0, scrollPositionRate:0,
showSearch:false, showSearch:false,
treeKey:0,
// 인덱스 관리 // 인덱스 관리
editDialogActive: false, editDialogActive: false,
......
...@@ -2,7 +2,6 @@ import colors from 'vuetify/es5/util/colors' ...@@ -2,7 +2,6 @@ import colors from 'vuetify/es5/util/colors'
import i18nConfig from "./i18n/config"; import i18nConfig from "./i18n/config";
import locales from "./i18n/locales"; import locales from "./i18n/locales";
export default { export default {
// Global page headers: https://go.nuxtjs.dev/config-head // Global page headers: https://go.nuxtjs.dev/config-head
head: { head: {
...@@ -73,8 +72,8 @@ export default { ...@@ -73,8 +72,8 @@ export default {
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: { vuetify: {
customVariables: ['~/assets/variables.scss'], customVariables: ['~/assets/variables.scss'],
heme: { theme: {
dark: true, dark: false,
themes: { themes: {
dark: { dark: {
primary: colors.blue.darken2, primary: colors.blue.darken2,
...@@ -87,11 +86,6 @@ export default { ...@@ -87,11 +86,6 @@ export default {
} }
} }
}, },
defaultAssets: {
font: {
family: 'Noto Sans KR'
}
}
}, },
animejs: true, animejs: true,
...@@ -122,6 +116,7 @@ export default { ...@@ -122,6 +116,7 @@ export default {
axios:{ axios:{
baseURL: (process.env.API_URL || 'https://docs.vridgeai.com') + '/api', // 개발 서버 baseURL: (process.env.API_URL || 'https://docs.vridgeai.com') + '/api', // 개발 서버
browserBaseURL: (process.env.API_URL || 'https://docs.vridgeai.com') + '/api', // 개발 서버
}, },
healthCheck: { healthCheck: {
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@nuxtjs/axios": "^5.13.6", "@nuxtjs/axios": "^5.13.6",
"@nuxtjs/markdownit": "^2.0.0", "@nuxtjs/markdownit": "^2.0.0",
"@nuxtjs/vuetify": "^1.11.3",
"core-js": "^3.25.3", "core-js": "^3.25.3",
"markdown-it-attrs": "^4.1.6", "markdown-it-attrs": "^4.1.6",
"markdown-it-div": "^1.1.0", "markdown-it-div": "^1.1.0",
...@@ -21,13 +22,11 @@ ...@@ -21,13 +22,11 @@
"vue-no-ssr": "^1.1.1", "vue-no-ssr": "^1.1.1",
"vue-server-renderer": "^2.7.10", "vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10", "vue-template-compiler": "^2.7.10",
"vuetify": "^2.6.10",
"vuex": "^3.4.0", "vuex": "^3.4.0",
"vuex-persistedstate": "^4.1.0" "vuex-persistedstate": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@nuxtjs/svg": "^0.2.0", "@nuxtjs/svg": "^0.2.0",
"@nuxtjs/vuetify": "^1.12.3",
"raw-loader": "^4.0.2" "raw-loader": "^4.0.2"
} }
}, },
...@@ -3348,7 +3347,6 @@ ...@@ -3348,7 +3347,6 @@
"version": "1.12.3", "version": "1.12.3",
"resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.3.tgz", "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.3.tgz",
"integrity": "sha512-6uVL3cfESMB00eVjJTNkyU4jvuPTGPn1yteo7lQTH6v+fxHcPaOgvzVYHIKSHIz1DecuOiB5c9b+YjsRP5+C8A==", "integrity": "sha512-6uVL3cfESMB00eVjJTNkyU4jvuPTGPn1yteo7lQTH6v+fxHcPaOgvzVYHIKSHIz1DecuOiB5c9b+YjsRP5+C8A==",
"dev": true,
"dependencies": { "dependencies": {
"deepmerge": "^4.2.2", "deepmerge": "^4.2.2",
"sass": "~1.32.13", "sass": "~1.32.13",
...@@ -4837,7 +4835,6 @@ ...@@ -4837,7 +4835,6 @@
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz", "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
"integrity": "sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==", "integrity": "sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==",
"dev": true,
"engines": { "engines": {
"node": "*" "node": "*"
} }
...@@ -5814,7 +5811,6 @@ ...@@ -5814,7 +5811,6 @@
"version": "4.6.1", "version": "4.6.1",
"resolved": "https://registry.npmjs.org/decache/-/decache-4.6.1.tgz", "resolved": "https://registry.npmjs.org/decache/-/decache-4.6.1.tgz",
"integrity": "sha512-ohApBM8u9ygepJCjgBrEZSSxPjc0T/PJkD+uNyxXPkqudyUpdXpwJYp0VISm2WrPVzASU6DZyIi6BWdyw7uJ2Q==", "integrity": "sha512-ohApBM8u9ygepJCjgBrEZSSxPjc0T/PJkD+uNyxXPkqudyUpdXpwJYp0VISm2WrPVzASU6DZyIi6BWdyw7uJ2Q==",
"dev": true,
"dependencies": { "dependencies": {
"callsite": "^1.0.0" "callsite": "^1.0.0"
} }
...@@ -11976,7 +11972,6 @@ ...@@ -11976,7 +11972,6 @@
"version": "1.32.13", "version": "1.32.13",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
"integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==", "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
"devOptional": true,
"dependencies": { "dependencies": {
"chokidar": ">=3.0.0 <4.0.0" "chokidar": ">=3.0.0 <4.0.0"
}, },
...@@ -14574,7 +14569,6 @@ ...@@ -14574,7 +14569,6 @@
"version": "1.9.2", "version": "1.9.2",
"resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.9.2.tgz", "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.9.2.tgz",
"integrity": "sha512-8PP2w7aAs/rjA+Izec6qY7sHVb75MNrGQrDOTZJ5IEnvl+NiFhVpU2iWdRDZ3eMS842cWxSWStvkr+KJJKy+Iw==", "integrity": "sha512-8PP2w7aAs/rjA+Izec6qY7sHVb75MNrGQrDOTZJ5IEnvl+NiFhVpU2iWdRDZ3eMS842cWxSWStvkr+KJJKy+Iw==",
"dev": true,
"dependencies": { "dependencies": {
"acorn": "^8.4.1", "acorn": "^8.4.1",
"acorn-walk": "^8.2.0", "acorn-walk": "^8.2.0",
...@@ -14606,7 +14600,6 @@ ...@@ -14606,7 +14600,6 @@
"version": "8.8.2", "version": "8.8.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
"dev": true,
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"
}, },
...@@ -18207,7 +18200,6 @@ ...@@ -18207,7 +18200,6 @@
"version": "1.12.3", "version": "1.12.3",
"resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.3.tgz", "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.3.tgz",
"integrity": "sha512-6uVL3cfESMB00eVjJTNkyU4jvuPTGPn1yteo7lQTH6v+fxHcPaOgvzVYHIKSHIz1DecuOiB5c9b+YjsRP5+C8A==", "integrity": "sha512-6uVL3cfESMB00eVjJTNkyU4jvuPTGPn1yteo7lQTH6v+fxHcPaOgvzVYHIKSHIz1DecuOiB5c9b+YjsRP5+C8A==",
"dev": true,
"requires": { "requires": {
"deepmerge": "^4.2.2", "deepmerge": "^4.2.2",
"sass": "~1.32.13", "sass": "~1.32.13",
...@@ -19376,8 +19368,7 @@ ...@@ -19376,8 +19368,7 @@
"callsite": { "callsite": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz", "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
"integrity": "sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==", "integrity": "sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ=="
"dev": true
}, },
"callsites": { "callsites": {
"version": "3.1.0", "version": "3.1.0",
...@@ -20102,7 +20093,6 @@ ...@@ -20102,7 +20093,6 @@
"version": "4.6.1", "version": "4.6.1",
"resolved": "https://registry.npmjs.org/decache/-/decache-4.6.1.tgz", "resolved": "https://registry.npmjs.org/decache/-/decache-4.6.1.tgz",
"integrity": "sha512-ohApBM8u9ygepJCjgBrEZSSxPjc0T/PJkD+uNyxXPkqudyUpdXpwJYp0VISm2WrPVzASU6DZyIi6BWdyw7uJ2Q==", "integrity": "sha512-ohApBM8u9ygepJCjgBrEZSSxPjc0T/PJkD+uNyxXPkqudyUpdXpwJYp0VISm2WrPVzASU6DZyIi6BWdyw7uJ2Q==",
"dev": true,
"requires": { "requires": {
"callsite": "^1.0.0" "callsite": "^1.0.0"
} }
...@@ -24593,7 +24583,6 @@ ...@@ -24593,7 +24583,6 @@
"version": "1.32.13", "version": "1.32.13",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
"integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==", "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
"devOptional": true,
"requires": { "requires": {
"chokidar": ">=3.0.0 <4.0.0" "chokidar": ">=3.0.0 <4.0.0"
} }
...@@ -26589,7 +26578,6 @@ ...@@ -26589,7 +26578,6 @@
"version": "1.9.2", "version": "1.9.2",
"resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.9.2.tgz", "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.9.2.tgz",
"integrity": "sha512-8PP2w7aAs/rjA+Izec6qY7sHVb75MNrGQrDOTZJ5IEnvl+NiFhVpU2iWdRDZ3eMS842cWxSWStvkr+KJJKy+Iw==", "integrity": "sha512-8PP2w7aAs/rjA+Izec6qY7sHVb75MNrGQrDOTZJ5IEnvl+NiFhVpU2iWdRDZ3eMS842cWxSWStvkr+KJJKy+Iw==",
"dev": true,
"requires": { "requires": {
"acorn": "^8.4.1", "acorn": "^8.4.1",
"acorn-walk": "^8.2.0", "acorn-walk": "^8.2.0",
...@@ -26601,8 +26589,7 @@ ...@@ -26601,8 +26589,7 @@
"acorn": { "acorn": {
"version": "8.8.2", "version": "8.8.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
"dev": true
} }
} }
}, },
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@nuxtjs/axios": "^5.13.6", "@nuxtjs/axios": "^5.13.6",
"@nuxtjs/markdownit": "^2.0.0", "@nuxtjs/markdownit": "^2.0.0",
"@nuxtjs/vuetify": "^1.11.3",
"core-js": "^3.25.3", "core-js": "^3.25.3",
"markdown-it-attrs": "^4.1.6", "markdown-it-attrs": "^4.1.6",
"markdown-it-div": "^1.1.0", "markdown-it-div": "^1.1.0",
...@@ -22,13 +23,11 @@ ...@@ -22,13 +23,11 @@
"vue-no-ssr": "^1.1.1", "vue-no-ssr": "^1.1.1",
"vue-server-renderer": "^2.7.10", "vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10", "vue-template-compiler": "^2.7.10",
"vuetify": "^2.6.10",
"vuex": "^3.4.0", "vuex": "^3.4.0",
"vuex-persistedstate": "^4.1.0" "vuex-persistedstate": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@nuxtjs/svg": "^0.2.0", "@nuxtjs/svg": "^0.2.0",
"@nuxtjs/vuetify": "^1.12.3",
"raw-loader": "^4.0.2" "raw-loader": "^4.0.2"
} }
} }
<template> <template>
<div class="guide-wrap-container"> <div class="guide-wrap-container">
<v-container class="guide-wrap"> <v-container class="guide-wrap" v-if="loading">
<v-row no-gutters align="center" class="guide-wrap-header"> <v-row no-gutters align="center" justify="center" class="pa-8">
<v-skeleton-loader <v-progress-circular indeterminate color="primary"/>
elevation="0" </v-row>
type="text" </v-container>
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>
<template v-slot:item= "{item}"> <v-container class="guide-wrap" v-else>
<span class="text--grey text--caption" style="cursor:pointer;" @click="openGuide(item.path)" >{{item.text}}</span> <v-row no-gutters align="center" class="guide-wrap-header">
</template> <span v-if="guide">
</v-breadcrumbs>
<h1 v-text="guide.title" class="font-weight-bold"></h1> <h1 v-text="guide.title" class="font-weight-bold"></h1>
</span> </span>
<v-spacer/> <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>
<v-row class="guide-content pb-4" no-gutters> <v-row class="guide-content" no-gutters v-if="guide && guide.content">
<v-skeleton-loader <div v-html="$md.render(guide.content)"></div>
elevation="0" </v-row>
class="my-4"
v-if="loading"
type="sentences, divider, image, paragraph , sentences, paragraph, sentences"
style="width:100%;"
></v-skeleton-loader>
<!-- <div v-if="$store.state.editMode && guide"> <v-row no-gutters>
<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)"> <v-divider/>
{{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> </v-row>
<v-row v-if="!loading" no-gutters class="px-6 pagination"> <v-row no-gutters class="pagination">
<v-divider class="my-3"/>
<v-btn <v-btn
v-if="guide !== null" v-if="guide !== null"
:disabled="!guide.prevIndex" :disabled="!guide.prevIndex"
class="primary--text"
:style="guide.prevIndex ? '' : 'border: none;'" :style="guide.prevIndex ? '' : 'border: none;'"
:ripple="false" :ripple="false"
height="64" height="80"
text text
outlined outlined
@click="openGuide(guide.prevIndex)" @click="openGuide(guide.prevIndex)"
...@@ -115,9 +56,8 @@ ...@@ -115,9 +56,8 @@
v-if="guide !== null" v-if="guide !== null"
:disabled="!guide.nextIndex" :disabled="!guide.nextIndex"
:style="guide.nextIndex ? '' : 'border: none;'" :style="guide.nextIndex ? '' : 'border: none;'"
class="primary--text"
:ripple="false" :ripple="false"
height="64" height="80"
text text
outlined outlined
@click="openGuide(guide.nextIndex)" @click="openGuide(guide.nextIndex)"
......
...@@ -29,6 +29,7 @@ export default { ...@@ -29,6 +29,7 @@ export default {
}), }),
methods:{ methods:{
async getGuideIndex(){ async getGuideIndex(){
console.log(this.$axios.defaults.baseURL)
await this.$axios.get('/guide-index/all', { await this.$axios.get('/guide-index/all', {
params:{ params:{
locale: this.$i18n.locale locale: this.$i18n.locale
......
<?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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment