[Feat] Meeting_001,002,003,004 회의 리스트, 회의 상세 조회, 회의 생성, 회의 수정 페이지 [#56]

frontend/src/common/component/Editor/QuillEditor.vue

@@ -0,0 +1,79 @@
+<script setup>
+import {onMounted, ref} from "vue";
+import Quill from "quill";
+import 'quill/dist/quill.bubble.css';
+
+const editor = ref(null);
+
+onMounted(() => {
+  if (editor.value) {
+    new Quill(editor.value, {
+      theme: 'bubble',
+      placeholder: '내용을 입력하세요...',
+      modules: {
+        toolbar: {
+          container: [
+            [{ 'header': [1, 2, false] }],
+            ['bold', 'italic', 'underline'],
+            ['image', 'code-block'],
+            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+            [{ 'script': 'sub'}, { 'script': 'super' }],
+            [{ 'indent': '-1'}, { 'indent': '+1' }],
+            [{ 'direction': 'rtl' }],
+            [{ 'color': [] }, { 'background': [] }],
+            [{ 'align': [] }],
+            ['clean']
+          ],
+          handlers: {
+            'image': function() {
+              const range = this.quill.getSelection();
+              const value = prompt('Enter image URL');
+              if (value) {
+                this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+});
+</script>
+
+<template>
+  <!-- Quill 에디터 섹션 -->
+  <div class="editor-section">
+        <span class="column">
+          <i class="quill-editings column-icon"></i>
+          글 작성하기
+        </span>
+    <div ref="editor" class="content-editor"></div>
+  </div>
+</template>
+
+<style scoped>
+.editor-section {
+  margin-top: 30px;
+}
+
+.quill-editings {
+  background-image: url("@/assets/icon/boardIcon/quillEditor.svg");
+}
+
+
+.ql-editor {
+  min-height: 200px;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #28303F;
+}
+
+.ql-tooltip {
+  z-index: 1000;
+}
+
+.ql-container {
+  position: relative;
+  overflow: visible;
+}
+</style>

frontend/src/common/component/SearchComponent.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { defineProps } from 'vue';
+defineProps({
+  link: String,
+});
+
+</script>
+
+<template>
+  <div class="toolbar">
+    <div class="filter-search">
+      <!-- 필터 드롭다운 -->
+<!--      <div class="filter">-->
+<!--        <button class="filter-button">-->
+<!--          Filter-->
+<!--          <span class="dropdown-icon">▼</span>-->
+<!--        </button>-->
+<!--      </div>-->
+
+      <!-- 검색창 -->
+      <div class="search">
+        <input type="text" class="search-input" placeholder="Search..." />
+        <span class="search-icon">🔍</span>
+      </div>
+    </div>
+
+    <!-- Create 버튼 -->
+    <router-link :to=link class="create-button">
+      <span class="create-icon">+</span> Create
+    </router-link>
+  </div>
+</template>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 8px;
+  //box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05);
+}
+
+.filter-search {
+  display: flex;
+  align-items: center;
+}
+
+.filter-button {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background-color: #f8f8f8;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.dropdown-icon {
+  margin-left: 5px;
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  //margin-left: 10px;
+  position: relative;
+}
+
+.search-input {
+  padding: 8px 8px 8px 30px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  outline: none;
+  width: 200px;
+  background-color: #f8f8f8;
+}
+
+.search-icon {
+  position: absolute;
+  margin-left: 10px;
+}
+
+.create-button {
+  text-decoration: none;
+  background-color: #e0e8ff;
+  color: #666daf;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+
+.create-icon {
+  margin-right: 5px;
+}
+</style>