From cd20feb580ce040fa95b2adb51e27ba20fb2877b Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Fri, 17 Jan 2025 15:14:34 +0900
Subject: [PATCH] =?UTF-8?q?=ED=80=BC=EC=97=90=EB=94=94=ED=84=B0=20,?=
 =?UTF-8?q?=EA=B3=B5=ED=86=B5=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/common.js              | 24 ++++++++++++++++++------
 src/components/editor/QEditor.vue | 15 +++++++++++++--
 src/main.js                       |  2 +-
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/common/common.js b/src/common/common.js
index 23daaba..e761219 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -7,11 +7,16 @@
 */
 import Quill from 'quill';
 
-
-// script 사용법 ->  this.$common.변수  
-// 템플릿 사용법  ->  $common.변수  
+/*
+     *템플릿 사용법 : $common.변수  
+     *setup() 사용법 :
+      const { appContext } = getCurrentInstance();
+      const $common = appContext.config.globalProperties.$common; 
+      $common.변수  
+*/
 const common = {
-   contentToHtml(content) {
+   // JSON 문자열로 Delta 타입을 변환
+  contentToHtml(content) {
     try {
       if (content.startsWith('{') || content.startsWith('[')) {
         // Delta 형식으로 변환
@@ -25,9 +30,16 @@ const common = {
       console.error('콘텐츠 변환 오류:', error);
       return content; // 오류 발생 시 원본 반환
     }
-  }
+  },
+  // Delta 타입을 JSON 문자열로 변환
+  deltaAsJson(content) {
+      if (content && content.ops) {
+        return JSON.stringify(content.ops); // Delta 객체에서 ops 속성만 JSON 문자열로 변환
+      }
+      console.error('잘못된 Delta 객체:', content);
+      return null; // Delta 객체가 아니거나 ops가 없을 경우 null 반환
+    }
 
-  
 }
 
 export default {
diff --git a/src/components/editor/QEditor.vue b/src/components/editor/QEditor.vue
index bec32f3..5caca78 100644
--- a/src/components/editor/QEditor.vue
+++ b/src/components/editor/QEditor.vue
@@ -46,15 +46,27 @@
         </div>
         <!-- 에디터가 표시될 div -->
         <div ref="editor"></div>
+
+        <!-- Alert 메시지 표시 -->
+        <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">내용을 확인해주세요.</div>   
     </div>
 </template>
 
 <script setup>
 import Quill from 'quill';
 import 'quill/dist/quill.snow.css';
-import { onMounted, ref, watch, defineEmits } from 'vue';
+import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
 import $api from '@api';
 
+// props로 title과 isAlert를 받습니다.
+const props = defineProps({
+    isAlert: {
+        value:true,
+        type: Boolean,
+        default: false,
+    },
+});
+
 const editor = ref(null);
 const font = ref('nanum-gothic');
 const fontSize = ref('16px');
@@ -163,7 +175,6 @@ onMounted(() => {
         });
     }
 });
-
 </script>
 
 <style>
diff --git a/src/main.js b/src/main.js
index 0d92aff..05f6a5c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,7 @@ import router from '@/router'
 import dayjs from '@p/dayjs'
 import ToastModal from '@c/modal/ToastModal.vue';
 import common from '@/common/common.js'
-
+   
 const pinia = createPinia()
 pinia.use(piniaPersist)