[ADD] 가이드 목차 관리 - 비밀번호 확인 후 접근 가능하도록 수정

docs-front/layouts/default.vue

@@ -120,7 +120,7 @@
         <div class="search-container" v-show="showSearch">
           <v-text-field 
             v-model="keyword" 
-            @keydown.enter="editOn"
+            @keydown.enter="loadPWDialog"
             :maxlength="50" 
             solo 
             dense 
@@ -161,8 +161,22 @@
 
       <v-progress-linear absolute bottom :value="scrollPositionRate" height="1" background-color="#eee" color="primary" style="transition:none !important;" />
       
+      <v-dialog v-model="editDialogPWActive" width="200">
+        <v-form class="pa-5" @submit.prevent>
+          <span>비밀번호를 입력하세요.</span>
+          <v-text-field
+            id="editModePWInput"
+            v-model="editDialogPW"
+            type="password"
+            autofocus
+            @keydown.enter="checkEditModePW"
+          />
+        </v-form>  
+      </v-dialog>
+      
       <v-dialog
         v-model="editDialogActive"
+        content-class="edit-dialog"
       >
         <div class="edit-dialog-container">
           <h2 class="pa-4 text-center">인덱스 관리</h2>
@@ -306,6 +320,8 @@ export default{
     
     // 인덱스 관리
     editDialogActive: false,
+    editDialogPWActive: false,
+    editDialogPW: '',
     editModeList: [],
     editModeRemainList: [],
     editFormMethod: '',
@@ -405,10 +421,19 @@ export default{
         }
       })
     }, 
-    editOn(){
+    loadPWDialog(){
       if(this.keyword === '열려라 문'){
+        this.editDialogPWActive = true
+      }
+    },
+    checkEditModePW(){
+      if(this.editDialogPW === 'vaz1l-9633!'){
+        this.editDialogPWActive = false
         this.editDialogActive = true
         this.$store.commit('setEditMode', true)
+        this.editDialogPW = ''
+      } else {
+        alert('비밀번호가 일치하지 않습니다.')
       }
     },
     setEditTarget(item){
@@ -626,58 +651,61 @@ export default{
 }
 
 .v-dialog {
-  width: 70vw !important; 
-  height: 80vh;
   background-color: white;
   
-  .edit-dialog-container{
-    height: 100%;
-    position: relative;
+  &.edit-dialog {
+    width: 70vw !important; 
+    height: 80vh;
     
-    .close-btn {
-      font-size: 26px;
-      position: absolute;
-      top: 20px;
-      right: 20px;
-    }
-    .col {
-      .v-subheader {
-        font-size: 1rem;
-      }
+    .edit-dialog-container{
+      height: 100%;
+      position: relative;
       
-      .v-list {
-        height: calc(100% - 48px);
-        background-color: rgba(0, 0, 0, 0.034);
-        border-radius: 10px;
-        overflow: auto;
-                
-        .v-list-item {
-          &.active, &.v-list-item--active{
-            *{
-              font-weight: bold !important;
-              color: #1E88E5;
+      .close-btn {
+        font-size: 26px;
+        position: absolute;
+        top: 20px;
+        right: 20px;
+      }
+      .col {
+        .v-subheader {
+          font-size: 1rem;
+        }
+        
+        .v-list {
+          height: calc(100% - 48px);
+          background-color: rgba(0, 0, 0, 0.034);
+          border-radius: 10px;
+          overflow: auto;
+                  
+          .v-list-item {
+            &.active, &.v-list-item--active{
+              *{
+                font-weight: bold !important;
+                color: #1E88E5;
+              }
+              background-color: rgba(128,128,128,0.07) !important;
             }
-            background-color: rgba(128,128,128,0.07) !important;
           }
         }
-      }
 
-      &:nth-child(2) {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
+        &:nth-child(2) {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          
+          .v-list {
+            height: calc(100% - 48px);
+          }
+        }
         
-        .v-list {
+        .v-form {
           height: calc(100% - 48px);
+          background-color: rgba(0, 0, 0, 0.034);
+          border-radius: 10px;
+          overflow: auto;
         }
       }
-      
-      .v-form {
-        height: calc(100% - 48px);
-        background-color: rgba(0, 0, 0, 0.034);
-        border-radius: 10px;
-        overflow: auto;
-      }
     }
   }
 }