diff --git a/frontend/package.json b/frontend/package.json
index da9160d0..34a16410 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "chart.js": "^2.9.3",
     "codemirror": "^5.55.0",
     "js-cookie": "^2.2.1",
+    "lodash": "^4.17.21",
     "nuxt": "^2.11.0",
     "nuxt-i18n": "^6.13.12",
     "papaparse": "^5.2.0",
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>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8ea6367d..d98efa06 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -7935,6 +7935,11 @@ lodash@^4.17.20:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loglevel@^1.6.2:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"