하이퍼링크 추가

Author: Hyochang098

sciq-fe/node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, defineEmits, defineProps } from 'vue';
+import 'quill/dist/quill.snow.css';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: '내용을 입력하세요'
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const editorContainer = ref<HTMLElement | null>(null);
+let quill: any = null;
+
+onMounted(async () => {
+  if (typeof window !== 'undefined' && editorContainer.value) {
+    const Quill = (await import('quill')).default;
+    
+    // 에디터 초기화
+    quill = new Quill(editorContainer.value, {
+      theme: 'snow',
+      placeholder: props.placeholder,
+      modules: {
+        toolbar: [
+          ['bold', 'italic', 'underline', 'strike'],
+          ['blockquote', 'code-block'],
+          [{ 'header': 1 }, { 'header': 2 }],
+          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+          [{ 'script': 'sub' }, { 'script': 'super' }],
+          [{ 'indent': '-1' }, { 'indent': '+1' }],
+          [{ 'direction': 'rtl' }],
+          [{ 'size': ['small', false, 'large', 'huge'] }],
+          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+          [{ 'color': [] }, { 'background': [] }],
+          [{ 'font': [] }],
+          [{ 'align': [] }],
+          ['clean'],
+          ['link', 'image']
+        ]
+      }
+    });
+
+    // 초기값 설정
+    if (props.modelValue) {
+      quill.root.innerHTML = props.modelValue;
+    }
+
+    // 에디터 변경 이벤트 감시
+    quill.on('text-change', () => {
+      emit('update:modelValue', quill.root.innerHTML);
+    });
+  }
+});
+
+// 외부에서 값이 변경될 경우 에디터에 반영
+watch(() => props.modelValue, (newVal) => {
+  if (quill && newVal !== quill.root.innerHTML) {
+    quill.root.innerHTML = newVal;
+  }
+});
+</script>
+
+<template>
+  <div class="rich-text-editor">
+    <div ref="editorContainer" class="editor-container"></div>
+  </div>
+</template>
+
+<style scoped>
+.rich-text-editor {
+  width: 100%;
+}
+
+.editor-container {
+  height: 300px;
+  overflow-y: auto;
+  border-radius: 4px;
+}
+
+:deep(.ql-toolbar) {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  background-color: #f8f9fa;
+}
+
+:deep(.ql-container) {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+:deep(.ql-editor) {
+  min-height: 250px;
+}
+</style> 

sciq-fe/src/components/editor/RichTextEditor.vue

@@ -55,13 +55,9 @@
         </div>
       </div>
 
-      <div class="content" v-if="!isEditing" v-html="question.content"></div>
+      <div class="content" v-if="!isEditing" v-html="formatContentWithLinks(question.content)"></div>
       <div v-else class="edit-form">
-        <textarea
-          v-model="editContent"
-          class="edit-content"
-          placeholder="내용을 입력하세요"
-        ></textarea>
+        <RichTextEditor v-model="editContent" placeholder="내용을 입력하세요" />
         <div class="char-count">{{ editContent.length }}/1000</div>
       </div>
 
@@ -155,6 +151,7 @@ import { questionService } from '@/api/questionService'
 import { authService } from '@/api/authService'
 import type { Question, Comment, CommentCreateRequest, CommentUpdateRequest } from '@/types/board'
 import { ScienceDisciplineType } from '@/types/board'
+import RichTextEditor from '@/components/editor/RichTextEditor.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -573,6 +570,19 @@ const deleteComment = async (commentId: number) => {
   }
 }
 
+// URL을 자동으로 하이퍼링크로 변환하는 함수
+const formatContentWithLinks = (content: string) => {
+  if (!content) return '';
+  
+  // URL 패턴 정규식
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+  
+  // URL을 하이퍼링크 태그로 변환
+  return content.replace(urlRegex, (url) => {
+    return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
+  });
+};
+
 onMounted(() => {
   fetchQuestion()
 })

sciq-fe/src/pages/Board/BoardDetail.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { postService } from '@/api/postService'
+import RichTextEditor from '@/components/editor/RichTextEditor.vue'
 
 const router = useRouter()
 const title = ref('')
@@ -59,8 +60,8 @@ const validateForm = () => {
   }
 
   // 내용 유효성 검사 (1000자 제한)
-  if (contentLength > 1000) {
-    contentError.value = '내용은 1000자 이하로 입력해주세요.'
+  if (!content.value.trim()) {
+    contentError.value = '내용을 입력해주세요.'
     isValid = false
   } else {
     contentError.value = ''
@@ -139,16 +140,9 @@ const handleCancel = () => {
     </div>
 
     <div class="form-group">
-      <textarea 
-        v-model="content" 
-        @input="checkContentLength"
-        placeholder="내용을 입력하세요"
-        class="content-input"
-        :class="{ 'error': contentError }"
-      ></textarea>
+      <RichTextEditor v-model="content" placeholder="내용을 입력하세요" />
       <div class="char-count">
         <div class="count-info">
-          <span>{{ content.length }}/1000</span>
           <span v-if="contentError" class="error-message">{{ contentError }}</span>
         </div>
       </div>