Add guideline button

frontend/components/containers/GuidelineButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <base-modal
+    text="Show guideline"
+  >
+    <template v-if="currentProject" v-slot="slotProps">
+      <guideline-card
+        :guideline-text="currentProject.guideline"
+        @close="slotProps.close"
+      />
+    </template>
+  </base-modal>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import BaseModal from '@/components/molecules/BaseModal'
+import GuidelineCard from '@/components/organisms/GuidelineCard'
+
+export default {
+  components: {
+    BaseModal,
+    GuidelineCard
+  },
+
+  computed: {
+    ...mapGetters('projects', ['currentProject'])
+  },
+
+  created() {
+    this.setCurrentProject(this.$route.params.id)
+  },
+
+  methods: {
+    ...mapActions('projects', ['setCurrentProject'])
+  }
+}
+</script>

frontend/components/organisms/GuidelineCard.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-card>
+    <v-card-title
+      class="headline grey lighten-2"
+      primary-title
+    >
+      Annotation Guideline
+    </v-card-title>
+
+    <v-card-text>
+      <viewer
+        :value="guidelineText"
+      />
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import 'tui-editor/dist/tui-editor-contents.css'
+import 'highlight.js/styles/github.css'
+import { Viewer } from '@toast-ui/vue-editor'
+
+export default {
+  components: {
+    Viewer
+  },
+
+  props: {
+    guidelineText: {
+      type: String,
+      default: '',
+      required: true
+    }
+  }
+}
+</script>

frontend/pages/projects/_id/annotation/index.vue

@@ -9,6 +9,11 @@
       <v-container fluid fill-height>
         <v-layout justify-center>
           <v-flex>
+            <v-card color="transparent elevation-0">
+              <v-card-title>
+                <guideline-button />
+              </v-card-title>
+            </v-card>
             <v-card>
               <v-card-text class="title">
                 <entity-item-box />
@@ -26,6 +31,7 @@
 import EntityItemBox from '~/components/containers/EntityItemBox'
 import SideBarLabeling from '~/components/organisms/SideBarLabeling'
 import Paginator from '~/components/containers/Paginator'
+import GuidelineButton from '@/components/containers/GuidelineButton'
 
 export default {
   layout: 'annotation',
@@ -33,7 +39,8 @@ export default {
   components: {
     EntityItemBox,
     SideBarLabeling,
-    Paginator
+    Paginator,
+    GuidelineButton
   },
 
   data() {

frontend/store/projects.js

@@ -10,6 +10,9 @@ export const state = () => ({
 export const getters = {
   isProjectSelected(state) {
     return state.selected.length > 0
+  },
+  currentProject(state) {
+    return state.current
   }
 }