Modal 컴포넌트 사용법 + slot 사용법 + v-model 사용법 + $set 사용법 및 용도

pages/instructor/course/_id/manage.vue

@@ -12,6 +12,51 @@
             Save
           </button>
         </div>
+        <div class="full-page-takeover-header-button">
+          <Modal
+            openTitle="Favorite"
+            openBtnClass="button is-primary is-inverted is-medium is-outlined"
+            title="Make Course Hero"
+            @opened="applyCourseValues"
+            @submitted="() => {}">
+            <div>
+              <form>
+                <div class="field">
+                  <label class="label">Hero title</label>
+                  <span class="label-info">Suggested 64 Characters</span>
+                  <div class="control">
+                    <input
+                      v-model="courseHero.title"
+                      class="input is-medium"
+                      type="text"
+                      placeholder="Amazing course discount">
+                  </div>
+                </div>
+                <div class="field">
+                  <label class="label">Hero subtitle</label>
+                  <span class="label-info">Suggested 128 Characters</span>
+                  <input
+                    v-model="courseHero.subtitle"
+                    class="input is-medium"
+                    type="text"
+                    placeholder="Get all of the course for 9.99$">
+                </div>
+                <div class="field">
+                  <label class="label">Course image</label>
+                  <span class="label-info">Image in format 3 by 1 (720 x 240)</span>
+                  <input
+                    v-model="courseHero.image"
+                    class="input is-medium"
+                    type="text"
+                    placeholder="Some image in format 3 by 1 (720 x 240)">
+                  <figure class="image is-3by1">
+                    <img :src="courseHero.image">
+                  </figure>
+                </div>
+              </form>
+            </div>
+          </Modal>
+        </div>
       </template>
     </Header>
     <div class="course-manage">
@@ -82,6 +127,7 @@
 </template>
 
 <script>
+import Modal from '~/components/shared/Modal'
 import Header from '~/components/shared/Header'
 import TargetStudents from '~/components/instructor/TargetStudents'
 import LandingPage from '~/components/instructor/LandingPage'
@@ -97,12 +143,14 @@ export default {
     TargetStudents,
     LandingPage,
     Price,
-    Status
+    Status,
+    Modal
   },
   mixins: [MultiComponentMixin],
   data() {
     return {
       steps : ['TargetStudents', 'LandingPage', 'Price', 'Status'],
+      courseHero: {}
     }
   },
   async fetch({store, params}) {
@@ -123,6 +171,13 @@ export default {
     handleCourseUpdate({value, field}){
       this.$store.dispatch('instructor/course/updateCourseValue', {field, value})
     },
+    applyCourseValues() {
+      // !this.courseHero.title && this.$set(this.courseHero, 'title', this.course.title)
+      // !this.courseHero.subtitle && this.$set(this.courseHero, 'subtitle', this.course.subtitle)
+      this.$set(this.courseHero, 'title', this.course.title)
+      this.$set(this.courseHero, 'subtitle', this.course.subtitle)
+      this.$set(this.courseHero, 'image', this.course.image)
+    },
     async updateCourse() {
       try{
         await this.$store.dispatch('instructor/course/updateCourse')