From fb88e248f894c117816d3ef8d0ee72deda76dc77 Mon Sep 17 00:00:00 2001
From: ckx6954 <ckx6954@local-host.co.kr>
Date: Tue, 17 Dec 2024 09:55:52 +0900
Subject: [PATCH] =?UTF-8?q?editor=20emit=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/utils.js                 |  7 +++++++
 src/components/editor/TEditor.vue   | 18 +++++++++++++-----
 src/components/input/FormInput.vue  |  4 ++--
 src/components/input/FormSelect.vue |  5 ++---
 src/views/board/BoardWrite.vue      |  9 +++++----
 5 files changed, 29 insertions(+), 14 deletions(-)
 create mode 100644 src/common/utils.js

diff --git a/src/common/utils.js b/src/common/utils.js
new file mode 100644
index 0000000..1dd59e1
--- /dev/null
+++ b/src/common/utils.js
@@ -0,0 +1,7 @@
+export const wait = timeToDelay => new Promise(resolve => setTimeout(resolve, timeToDelay));
+
+export const isEmpty = (value) => {
+    if (value == "" || value == null || value == undefined || (value != null && typeof value == "object" && !Object.keys(value).length))
+        return true;
+    return false;
+}
diff --git a/src/components/editor/TEditor.vue b/src/components/editor/TEditor.vue
index 7099e8c..8210fc8 100644
--- a/src/components/editor/TEditor.vue
+++ b/src/components/editor/TEditor.vue
@@ -1,11 +1,15 @@
 <template>
-    <Editor :api-key="editorKey" :init="init" />
+    <Editor v-model="content"
+    :api-key="editorKey" :init="init" />
 </template>
 
 <script setup>
 import Editor from '@tinymce/tinymce-vue';
-import { nextTick, onBeforeUnmount, onMounted, reactive } from 'vue';
+import { reactive, ref, watch, watchEffect } from 'vue';
+import { wait } from '@/common/utils';
 
+const emit = defineEmits(['update:data']);
+const content = ref('');
 const editorKey = '71nhna4fusscfsf8qvo9cg3ul4uydwt346izxa6ra6zwjsz7';
 const init = reactive({
     menubar: false,
@@ -94,12 +98,14 @@ const init = reactive({
             styles: { 'text-align': 'justify' },
         },
     },
-
     setup(editor) {
         editor.on('init', async () => {
             //가상돔 로딩 기다리기
             await wait(500);
             const targetElement = document.querySelector('[aria-label="Insert/edit code sample"]');
+
+            //editor.notificationManager  <-- editor 경고문 띄우는 용도
+
             targetElement.addEventListener('click', async () => {
                 // 클릭 후 기다리기
                 await wait(200);
@@ -139,15 +145,17 @@ const init = reactive({
                 }
             });
         });
+
     },
 });
 
-const wait = timeToDelay => new Promise(resolve => setTimeout(resolve, timeToDelay));
+watchEffect(() =>{
+    emit('update:data', content.value)
+})
 
 // emit 이랑 file 처리해야됨 ~
 </script>
 
 
 <style scoped>
-
 </style>
diff --git a/src/components/input/FormInput.vue b/src/components/input/FormInput.vue
index 0965533..2be1c33 100644
--- a/src/components/input/FormInput.vue
+++ b/src/components/input/FormInput.vue
@@ -52,14 +52,14 @@ const prop = defineProps({
     },
 });
 
-const emits = defineEmits(['inputVal'])
+const emits = defineEmits(['update:data'])
 
 const updateInput = function (event) {
     //Type Number 일때 maxlength 적용 안됨 방지
     if (event.target.value.length > prop.maxlength) {
         event.target.value = event.target.value.slice(0, prop.maxlength);
     }
-    emits('inputVal', event.target.value);
+    emits('update:data', event.target.value);
 };
 </script>
 
diff --git a/src/components/input/FormSelect.vue b/src/components/input/FormSelect.vue
index 95635fe..56a314e 100644
--- a/src/components/input/FormSelect.vue
+++ b/src/components/input/FormSelect.vue
@@ -43,14 +43,13 @@ const prop = defineProps({
     },
 });
 
-const emit = defineEmits(['selectVal'])
+const emit = defineEmits(['update:data'])
 const selectData = ref(prop.value);
 
 watchEffect(() => {
-    emit('selectVal',selectData);
+    emit('update:data',selectData);
 })
 
-
 </script>
 
 <style>
diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue
index 042e267..78542b4 100644
--- a/src/views/board/BoardWrite.vue
+++ b/src/views/board/BoardWrite.vue
@@ -9,11 +9,11 @@
 
             <div class="col-xl-12">
                 <div class="card-body">
-                    <FormInput title="제목" name="title" :is-essential="true" @input-val="title = $event" />
+                    <FormInput title="제목" name="title" :is-essential="true" @update:data="title = $event" />
 
-                    <FormSelect title="카테고리" name="cate" :is-essential="true" :data="categoryList" @select-val="category = $event" />
+                    <FormSelect title="카테고리" name="cate" :is-essential="true" :data="categoryList" @update:data="category = $event" />
 
-                    <FormInput title="비밀번호" name="pw" type="password" :is-essential="true" @input-val="password = $event" />
+                    <FormInput title="비밀번호" name="pw" type="password" :is-essential="true" @update:data="password = $event" />
 
                     <FormFile />
 
@@ -23,7 +23,7 @@
                             <span class="text-red">*</span>
                         </label>
                         <div class="col-md-12">
-                            <TEditor />
+                            <TEditor @update:data="content = $event"/>
                         </div>
                     </div>
 
@@ -49,6 +49,7 @@ const categoryList = ['자유', '임시', '공지사항'];
 const title = ref('');
 const password = ref('');
 const category = ref('');
+const content = ref('');
 </script>
 
 <style>