diff --git a/frontend/pages/projects/_id/guideline/index.vue b/frontend/pages/projects/_id/guideline/index.vue
index 3958d3e1..d912c107 100644
--- a/frontend/pages/projects/_id/guideline/index.vue
+++ b/frontend/pages/projects/_id/guideline/index.vue
@@ -1,7 +1,6 @@
 <template>
   <editor
-    v-if="current"
-    v-model="editorText"
+    v-model="project.guideline"
     preview-style="vertical"
     height="inherit"
     :options="editorOptions"
@@ -9,52 +8,48 @@
 </template>
 
 <script>
+import _ from 'lodash'
 import 'tui-editor/dist/tui-editor.css'
 import 'tui-editor/dist/tui-editor-contents.css'
 import 'codemirror/lib/codemirror.css'
 import { Editor } from '@toast-ui/vue-editor'
-import { mapState, mapActions } from 'vuex'
 import '@/assets/style/editor.css'
 
 export default {
   layout: 'project',
+
   components: {
     Editor
   },
+
   data() {
     return {
       editorOptions: {
         language: this.$t('toastui.localeCode')
-      }
+      },
+      project: {}
     }
   },
-  validate({ params }) {
-    return /^\d+$/.test(params.id)
-  },
 
-  computed: {
-    ...mapState('projects', ['current']),
-
-    editorText: {
-      get() {
-        return this.current.guideline
-      },
-      set(value) {
-        const data = {
-          projectId: this.$route.params.id,
-          guideline: value
-        }
-        this.updateCurrentProject(data)
-      }
+  watch: {
+    'project.guideline'() {
+      this.updateProject()
     }
   },
 
   async created() {
-    await this.setCurrentProject(this.$route.params.id)
+    const projectId = this.$route.params.id
+    this.project = await this.$services.project.findById(projectId)
   },
 
   methods: {
-    ...mapActions('projects', ['setCurrentProject', 'updateCurrentProject'])
+    updateProject: _.debounce(function() {
+      this.$services.project.update(this.project)
+    }, 1000)
+  },
+
+  validate({ params }) {
+    return /^\d+$/.test(params.id)
   }
 }
 </script>