From fb26f6d701529308d6c2b8996a2506cc1e8b6b69 Mon Sep 17 00:00:00 2001
From: ckx6954 <ckx6954@local-host.co.kr>
Date: Tue, 17 Dec 2024 09:09:56 +0900
Subject: [PATCH] =?UTF-8?q?write=20=EC=88=98=EC=A0=95=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                   |  46 ---------
 src/components/editor/QEditor.vue   |  69 -------------
 src/components/editor/TEditor.vue   | 153 ++++++++++++++++++++++++++++
 src/components/input/FormInput.vue  |  20 +++-
 src/components/input/FormSelect.vue |  50 +++++++--
 src/router/index.js                 |  69 ++++++-------
 src/views/ErrorPage.vue             |  13 +++
 src/views/board/BoardWrite.vue      |  43 ++++----
 src/views/board/TheBoard.vue        |   7 ++
 9 files changed, 282 insertions(+), 188 deletions(-)
 delete mode 100644 src/components/editor/QEditor.vue
 create mode 100644 src/components/editor/TEditor.vue
 create mode 100644 src/views/ErrorPage.vue

diff --git a/package-lock.json b/package-lock.json
index b51eb4f..f2ff486 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2701,12 +2701,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/eventemitter3": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
-      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
-      "license": "MIT"
-    },
     "node_modules/execa": {
       "version": "9.5.2",
       "resolved": "https://registry.npmjs.org/execa/-/execa-9.5.2.tgz",
@@ -3732,12 +3726,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/parchment": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
-      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3997,20 +3985,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/quill": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
-      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "clone": "^2.1.1",
-        "deep-equal": "^1.0.1",
-        "eventemitter3": "^2.0.3",
-        "extend": "^3.0.2",
-        "parchment": "^1.1.4",
-        "quill-delta": "^3.6.2"
-      }
-    },
     "node_modules/quill-delta": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-4.2.2.tgz",
@@ -4028,26 +4002,6 @@
       "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
       "license": "Apache-2.0"
     },
-    "node_modules/quill/node_modules/fast-diff": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
-      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/quill/node_modules/quill-delta": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
-      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
-      "license": "MIT",
-      "dependencies": {
-        "deep-equal": "^1.0.1",
-        "extend": "^3.0.2",
-        "fast-diff": "1.1.2"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
diff --git a/src/components/editor/QEditor.vue b/src/components/editor/QEditor.vue
deleted file mode 100644
index 83368e6..0000000
--- a/src/components/editor/QEditor.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <Editor :api-key="editorKey" :init="init" />
-</template>
-
-<script setup>
-import Editor from '@tinymce/tinymce-vue';
-import { reactive } from 'vue';
-
-const editorKey = '71nhna4fusscfsf8qvo9cg3ul4uydwt346izxa6ra6zwjsz7';
-const init = reactive({
-    toolbar_mode: 'sliding',
-    plugins: [
-        // Core editing features
-        'anchor',
-        'autolink',
-        'charmap',
-        'codesample',
-        'emoticons',
-        'image',
-        'link',
-        'lists',
-        'media',
-        'searchreplace',
-        'table',
-        'visualblocks',
-        'wordcount',
-        // Your account includes a free trial of TinyMCE premium features
-        // Try the most popular premium features until Dec 30, 2024:
-        'checklist',
-        'mediaembed',
-        'casechange',
-        'export',
-        'formatpainter',
-        'pageembed',
-        'a11ychecker',
-        'tinymcespellchecker',
-        'permanentpen',
-        'powerpaste',
-        'advtable',
-        'advcode',
-        'editimage',
-        'advtemplate',
-        'ai',
-        'mentions',
-        'tinycomments',
-        'tableofcontents',
-        'footnotes',
-        'mergetags',
-        'autocorrect',
-        'typography',
-        'inlinecss',
-    ],
-    toolbar:
-        'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
-    tinycomments_mode: 'embedded',
-    tinycomments_author: 'Author name',
-    mergetags_list: [
-        { value: 'First.Name', title: 'First Name' },
-        { value: 'Email', title: 'Email' },
-    ],
-    ai_request: (request, respondWith) => respondWith.string(() => Promise.reject('See docs to implement AI Assistant')),
-});
-</script>
-
-<style>
-.tox-statusbar{
-    display: none !important;
-}
-</style>
diff --git a/src/components/editor/TEditor.vue b/src/components/editor/TEditor.vue
new file mode 100644
index 0000000..7099e8c
--- /dev/null
+++ b/src/components/editor/TEditor.vue
@@ -0,0 +1,153 @@
+<template>
+    <Editor :api-key="editorKey" :init="init" />
+</template>
+
+<script setup>
+import Editor from '@tinymce/tinymce-vue';
+import { nextTick, onBeforeUnmount, onMounted, reactive } from 'vue';
+
+const editorKey = '71nhna4fusscfsf8qvo9cg3ul4uydwt346izxa6ra6zwjsz7';
+const init = reactive({
+    menubar: false,
+    toolbar_mode: 'sliding',
+    selector: 'textarea',
+    plugins: [
+        'code',
+        'anchor',
+        'autolink',
+        'charmap',
+        'codesample',
+        'emoticons',
+        'image',
+        'link',
+        'lists',
+        'media',
+        'searchreplace',
+        'table',
+        'visualblocks',
+        'wordcount',
+    ],
+
+    //하단바 설정
+    statusbar: false,
+
+    //code sample 세팅
+    codesample_content_css: 'pre { white-space: pre-wrap; word-wrap: break-word; }',
+    tabsize: 4,
+    tabfocus: false,
+    tabnavigation: false,
+
+    //메뉴바 시작
+    toolbar: [
+        'undo redo | fontfamily fontsize | blockquote h1 h2 h3 h4 h5 h6 | bold italic underline alignleft aligncenter alignright alignjustify indent outdent',
+        'checklist numlist bullist | link image table | codesample emoticons code',
+    ],
+
+    style_format_merge: true,
+    formats: {
+        blockquote: {
+            block: 'blockquote',
+            styles: { 'font-style': 'italic', 'border-left': '4px solid #ccc', 'padding-left': '10px' },
+        },
+        paragraph: {
+            block: 'p',
+            styles: { 'margin-bottom': '1em', 'font-size': '1em' },
+        },
+        heading1: {
+            block: 'h1',
+            styles: { 'font-size': '2em', 'font-weight': 'bold', 'margin-top': '1em', 'margin-bottom': '0.5em' },
+        },
+        heading2: {
+            block: 'h2',
+            styles: { 'font-size': '1.75em', 'font-weight': 'bold', 'margin-top': '1em', 'margin-bottom': '0.5em' },
+        },
+        heading3: {
+            block: 'h3',
+            styles: { 'font-size': '1.5em', 'font-weight': 'bold', 'margin-top': '1em', 'margin-bottom': '0.5em' },
+        },
+        heading4: {
+            block: 'h4',
+            styles: { 'font-size': '1.25em', 'font-weight': 'bold', 'margin-top': '1em', 'margin-bottom': '0.5em' },
+        },
+        heading5: {
+            block: 'h5',
+            styles: { 'font-size': '1em', 'font-weight': 'bold', 'margin-top': '1em', 'margin-bottom': '0.5em' },
+        },
+        heading6: {
+            block: 'h6',
+            styles: { 'font-size': '0.875em', 'font-weight': 'bold', 'margin-top': '1em', 'margin-bottom': '0.5em' },
+        },
+        alignleft: {
+            selector: 'p,h1,h2,h3,h4,h5,h6,div',
+            styles: { 'text-align': 'left' },
+        },
+        aligncenter: {
+            selector: 'p,h1,h2,h3,h4,h5,h6,div',
+            styles: { 'text-align': 'center' },
+        },
+        alignright: {
+            selector: 'p,h1,h2,h3,h4,h5,h6,div',
+            styles: { 'text-align': 'right' },
+        },
+        alignjustify: {
+            selector: 'p,h1,h2,h3,h4,h5,h6,div',
+            styles: { 'text-align': 'justify' },
+        },
+    },
+
+    setup(editor) {
+        editor.on('init', async () => {
+            //가상돔 로딩 기다리기
+            await wait(500);
+            const targetElement = document.querySelector('[aria-label="Insert/edit code sample"]');
+            targetElement.addEventListener('click', async () => {
+                // 클릭 후 기다리기
+                await wait(200);
+                const textEle = document.querySelector('.tox-textarea-wrap');
+                const textarea = textEle.querySelector('textarea');
+
+                if (textarea) {
+                    // tab 키 이벤트 처리 함수 등록
+                    const handleTabKey = event => {
+                        if (event.key === 'Tab') {
+                            event.preventDefault(); // 기본 탭 동작(포커스 이동) 막기
+
+                            // 커서 위치 가져오기
+                            const start = textarea.selectionStart;
+                            const end = textarea.selectionEnd;
+
+                            // 현재 텍스트에서 공백 4칸 추가
+                            const text = textarea.value;
+                            textarea.value = text.substring(0, start) + '    ' + text.substring(end);
+
+                            const newCursorPos = start + 4;
+
+                            // 포커스를 설정하고 커서 위치를 업데이트
+                            setTimeout(() => {
+                                textarea.focus(); // 포커스 설정
+                                // 커서 위치를 다시 설정
+                                textarea.selectionStart = textarea.selectionEnd = newCursorPos;
+                            }, 0);
+                        }
+                    };
+
+                    // 이미 이벤트 리스너가 등록되어 있다면 제거하여 중복 등록을 방지
+                    textarea.removeEventListener('keydown', handleTabKey);
+
+                    // keydown 이벤트 리스너 추가
+                    textarea.addEventListener('keydown', handleTabKey);
+                }
+            });
+        });
+    },
+});
+
+const wait = timeToDelay => new Promise(resolve => setTimeout(resolve, timeToDelay));
+
+// emit 이랑 file 처리해야됨 ~
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/input/FormInput.vue b/src/components/input/FormInput.vue
index bbc4af4..0965533 100644
--- a/src/components/input/FormInput.vue
+++ b/src/components/input/FormInput.vue
@@ -1,11 +1,17 @@
 <template>
     <div class="mb-4 row">
-        <label for="html5-text-input" class="col-md-2 col-form-label">
-            {{ $props.title }}
-            <span :class="$props.isEssential ? 'text-red' : 'none'">*</span>
+        <label :for="name" class="col-md-2 col-form-label">
+            {{ title }}
+            <span :class="isEssential ? 'text-red' : 'none'">*</span>
         </label>
         <div class="col-md-10">
-            <input class="form-control" :type="$props.type" @input="updateInput" :value="$props.value" :maxLength="$props.maxlength" />
+            <input :id="name"
+                class="form-control"
+                :type="type"
+                @input="updateInput"
+                :value="value"
+                :maxLength="maxlength"
+                :placeholder="title" />
         </div>
     </div>
 </template>
@@ -19,6 +25,11 @@ const prop = defineProps({
         default: '라벨',
         required: true,
     },
+    name: {
+        type: String,
+        default: 'nameplz',
+        required: true,
+    },
     isEssential: {
         type: Boolean,
         default: false,
@@ -44,7 +55,6 @@ const prop = defineProps({
 const emits = defineEmits(['inputVal'])
 
 const updateInput = function (event) {
-
     //Type Number 일때 maxlength 적용 안됨 방지
     if (event.target.value.length > prop.maxlength) {
         event.target.value = event.target.value.slice(0, prop.maxlength);
diff --git a/src/components/input/FormSelect.vue b/src/components/input/FormSelect.vue
index 763027b..95635fe 100644
--- a/src/components/input/FormSelect.vue
+++ b/src/components/input/FormSelect.vue
@@ -1,20 +1,56 @@
 <template>
     <div class="mb-4 row">
-        <label for="html5-email-input" class="col-md-2 col-form-label">
-            카테고리
-            <span class="text-red">*</span>
+        <label for="input-ss" class="col-md-2 col-form-label">
+            {{ title }}
+            <span :class="isEssential ? 'text-red' : 'none'">*</span>
         </label>
         <div class="col-md-10">
-            <select class="form-select" id="exampleFormControlSelect1" aria-label="Default select example">
-                <option selected value="1">자유</option>
-                <option value="1">임시</option>
-                <option value="2">공지</option>
+            <select class="form-select" id="input-ss" v-model="selectData">
+                <option v-for="(item , i) in data" :key="item" :value="i" :selected = 'value == i' >{{ item }}</option>
             </select>
         </div>
     </div>
 </template>
 
 <script setup>
+import { ref, watchEffect } from 'vue';
+
+const prop = defineProps({
+    title: {
+        type: String,
+        default: '라벨',
+        required: true,
+    },
+    name: {
+        type: String,
+        default: 'nameplz',
+        required: true,
+    },
+    isEssential: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    data: {
+        type: Array,
+        default: [],
+        required: true,
+    },
+    value: {
+        type: String,
+        default: '0',
+        require: false,
+    },
+});
+
+const emit = defineEmits(['selectVal'])
+const selectData = ref(prop.value);
+
+watchEffect(() => {
+    emit('selectVal',selectData);
+})
+
+
 </script>
 
 <style>
diff --git a/src/router/index.js b/src/router/index.js
index 8784110..6c6e81b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,47 +3,38 @@ import BoardWrite from '@v/board/BoardWrite.vue';
 
 // 초기 렌더링 속도를 위해 지연 로딩 사용
 const routes = [
-  {
-    path: '/',
-    component: () => import('@v/MainView.vue'),
-    // meta: { requiresAuth: true }
-  },
-  {
-    path: '/board',
-    component: () => import('@v/board/TheBoard.vue'),
-    children : [
-        {
-            path : '',
-            component : () => import('@v/board/BoardList.vue')
-        },
-        {
-            path : 'write',
-            component : () => import('@v/board/BoardWrite.vue')
-        },
-        {
-            path : 'get/:id',
-            component : () => import('@v/board/BoardView.vue')
-        }
-    ]
-  },
-  // {
-  //   path: "/login",
-  //   component: () => import('@v/Login.vue'),
-  //   // meta: { requiresAuth: false }
-  // },
-  // {
-  //   path : "/error/:code",
-  //   component: () => import('@v/ErrorPage.vue'),
-  // },
-  {
-    // path: '/:anything(.*)',
-    // component: () => import('@v/MainView.vue'),
-  },
-]
+    {
+        path: '/',
+        component: () => import('@v/MainView.vue'),
+        // meta: { requiresAuth: true }
+    },
+    {
+        path: '/board',
+        component: () => import('@v/board/TheBoard.vue'),
+        children: [
+            {
+                path: '',
+                component: () => import('@v/board/BoardList.vue')
+            },
+            {
+                path: 'write',
+                component: () => import('@v/board/BoardWrite.vue')
+            },
+            {
+                path: 'get/:id',
+                component: () => import('@v/board/BoardView.vue')
+            }
+        ]
+    },
+    {
+        path: "/:anything(.*)",
+        component: () => import('@v/ErrorPage.vue'),
+    }
+];
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: routes,
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: routes,
 })
 
 export default router
diff --git a/src/views/ErrorPage.vue b/src/views/ErrorPage.vue
new file mode 100644
index 0000000..0892542
--- /dev/null
+++ b/src/views/ErrorPage.vue
@@ -0,0 +1,13 @@
+<template>
+    Error
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue
index d97ea5e..042e267 100644
--- a/src/views/board/BoardWrite.vue
+++ b/src/views/board/BoardWrite.vue
@@ -7,33 +7,29 @@
                 </div>
             </div>
 
-            <div class="col-xl-6">
-                <!-- HTML5 Inputs -->
-                <div class="card mb-6">
-                    <div class="card-body">
-                        <FormInput title="제목" :is-essential="true" @input-val="title = $event"/>
+            <div class="col-xl-12">
+                <div class="card-body">
+                    <FormInput title="제목" name="title" :is-essential="true" @input-val="title = $event" />
 
-                        <FormSelect/>
+                    <FormSelect title="카테고리" name="cate" :is-essential="true" :data="categoryList" @select-val="category = $event" />
 
-                        <FormInput title="비밀번호" type="password" :is-essential="true" @input-val="password = $event"/>
+                    <FormInput title="비밀번호" name="pw" type="password" :is-essential="true" @input-val="password = $event" />
 
-                        <FormFile />
+                    <FormFile />
 
-                        <div class="mb-4">
-                            <label for="html5-tel-input" class="col-md-2 col-form-label">
-                                내용
-                                <span class="text-red">*</span>
-                            </label>
-                            <div class="col-md-12">
-                                <QEditor />
-                            </div>
-                        </div>
-
-                        <div class="mb-4 d-flex justify-content-end">
-                            <button type="button" class="btn btn-info right">목록</button>
-                            <button type="button" class="btn btn-primary ms-1">작성</button>
+                    <div class="mb-4">
+                        <label for="html5-tel-input" class="col-md-2 col-form-label">
+                            내용
+                            <span class="text-red">*</span>
+                        </label>
+                        <div class="col-md-12">
+                            <TEditor />
                         </div>
+                    </div>
 
+                    <div class="mb-4 d-flex justify-content-end">
+                        <button type="button" class="btn btn-info right">목록</button>
+                        <button type="button" class="btn btn-primary ms-1">작성</button>
                     </div>
                 </div>
             </div>
@@ -42,14 +38,17 @@
 </template>
 
 <script setup>
-import QEditor from '@c/editor/QEditor.vue';
+import TEditor from '@c/editor/TEditor.vue';
 import FormInput from '@c/input/FormInput.vue';
 import FormSelect from '@c/input/FormSelect.vue';
 import FormFile from '@c/input/FormFile.vue';
 import { ref } from 'vue';
 
+const categoryList = ['자유', '임시', '공지사항'];
+
 const title = ref('');
 const password = ref('');
+const category = ref('');
 </script>
 
 <style>
diff --git a/src/views/board/TheBoard.vue b/src/views/board/TheBoard.vue
index efacaa2..b2ae62f 100644
--- a/src/views/board/TheBoard.vue
+++ b/src/views/board/TheBoard.vue
@@ -1,3 +1,10 @@
 <template>
     <RouterView />
 </template>
+<script>
+export default {
+    name : 'board',
+    inheritAttrs : false,
+}
+</script>
+