Merge remote-tracking branch 'origin/main' into board-list

src/App.vue

@@ -2,6 +2,7 @@
     <component :is="layout">
         <template #content>
             <router-view></router-view>
+            <ToastModal /> 
         </template>
     </component>
 </template>
@@ -10,6 +11,7 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import NormalLayout from './layouts/NormalLayout.vue';
 import NoLayout from './layouts/NoLayout.vue';
+import ToastModal from '@c/modal/ToastModal.vue'; 
 
 const route = useRoute();
 

src/components/editor/QEditor.vue

@@ -79,7 +79,6 @@ onMounted(() => {
             syntax: true,
         },
     });
-
     quillInstance.format('font', font.value);
     quillInstance.format('size', fontSize.value);
 
@@ -91,15 +90,12 @@ onMounted(() => {
         quillInstance.format('font', font.value);
         quillInstance.format('size', fontSize.value);
     });
-
+    // 이미지 업로드 
-    // 이미지 업로드 및 삭제 감지 로직
-    // 아직 서버에 실험 안해봄 ***********처리부탁***********
     let imageUrls = new Set();
 
     quillInstance.getModule('toolbar').addHandler('image', () => {
         selectLocalImage();
     });
-
     quillInstance.on('text-change', (delta, oldDelta, source) => {
         emit('update:data', quillInstance.root.innerHTML);
         delta.ops.forEach(op => {
@@ -112,7 +108,7 @@ onMounted(() => {
         });
     });
 
-    function selectLocalImage() {
+    async function selectLocalImage() {
         const input = document.createElement('input');
         input.setAttribute('type', 'file');
         input.setAttribute('accept', 'image/*');
@@ -121,24 +117,33 @@ onMounted(() => {
         input.onchange = () => {
             const file = input.files[0];
             if (file) {
-                const reader = new FileReader();
+                const formData = new FormData();
-                reader.onload = async (e) => {
+                formData.append('file', file);
-                    const range = quillInstance.getSelection();
-                    const base64Image = e.target.result;
 
-                    try {
+                uploadImageToServer(formData).then(serverImageUrl => {
-                        const serverImageUrl = await uploadImageToServer(base64Image);
+                    const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
-                        quillInstance.insertEmbed(range.index, 'image', serverImageUrl);
+                    const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
-                        imageUrls.add(serverImageUrl);
+
-                    } catch (error) {
+                    const range = quillInstance.getSelection();
-                        console.error('이미지 업로드 중 오류 발생:', error);
+                    quillInstance.insertEmbed(range.index, 'image', fullImageUrl);
-                    }
+
-                };
+                    imageUrls.add(fullImageUrl);
-                reader.readAsDataURL(file);
+                }).catch(e => {
+                    toastStore.onToast('잠시후 다시 시도해주세요.', 'e');               
+                });
             }
         };
     }
-
+    async function uploadImageToServer(formData) {
+        try {
+            const response = await $api.post('img/upload', formData, { isFormData: true });
+            const imageUrl = response.data.data;  
+            return imageUrl;  
+        } catch (error) {
+            toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
+            throw error;
+        }
+    }
 
     function checkForDeletedImages() {
         const editorImages = document.querySelectorAll('#editor img');
@@ -147,33 +152,9 @@ onMounted(() => {
         imageUrls.forEach(url => {
             if (!currentImages.has(url)) {
                 imageUrls.delete(url);
-                removeImageFromServer(url);
             }
         });
     }
-
-    async function uploadImageToServer(base64Image) {
-        try {
-            const response = await $api.post('/img/upload', {
-                image: base64Image,
-            });
-            return response.data.url; // 서버에서 반환한 이미지 URL
-        } catch (error) {
-            console.error('서버 업로드 중 오류 발생:', error);
-            throw error;
-        }
-    }
-
-    async function removeImageFromServer(imageUrl) {
-        try {
-            await $api.delete('/img/delete', {
-                data: { url: imageUrl },
-            });
-            console.log(`서버에서 이미지 삭제: ${imageUrl}`);
-        } catch (error) {
-            console.error('서버 이미지 삭제 중 오류 발생:', error);
-        }
-    }
 });
 
 </script>
@@ -185,4 +166,4 @@ onMounted(() => {
     min-height: 300px;
     font-family: 'Nanum Gothic', sans-serif;
 }
-</style>
+</style>

src/components/modal/ToastModal.vue

@@ -0,0 +1,58 @@
+<template>
+  <div 
+    v-if="toastStore.toastModal" 
+    :class="['bs-toast toast m-2 fade show', toastClass]" 
+    role="alert"
+    aria-live="assertive"
+    aria-atomic="true"
+  >
+    <div class="toast-header">
+      <i class="bx bx-bell me-2"></i>
+      <div class="me-auto fw-semibold">알림</div>
+      <button 
+        type="button" 
+        class="btn-close" 
+        aria-label="Close" 
+        @click="offToast"
+      ></button>
+    </div>
+    <div class="toast-body">
+      {{ toastStore.toastMsg }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useToastStore } from '@s/toastStore';
+import { computed } from 'vue';
+const toastStore = useToastStore();
+
+const offToast = () => {
+  toastStore.offToast();  // 상태 변경으로 토스트 숨기기
+};
+
+const toastClass = computed(() => {
+  return toastStore.toastType === 'e' ? 'bg-danger' : 'bg-success'; // 에러일 경우 red, 정상일 경우 blue
+});
+</script>
+
+<style scoped>
+.bs-toast {
+  position: fixed;
+  bottom: 20px; /* 화면 하단에 위치 */
+  right: 20px; /* 오른쪽에 위치 */
+  z-index: 2000; /* 충분히 높은 값으로 설정 */
+  max-width: 300px; /* 최대 너비 제한 */
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
+}
+
+.bg-primary {
+  background-color: #007bff !important; /* 성공 색상 */
+}
+
+.bg-danger {
+  background-color: #ff3e1d !important; /* 에러 색상 */
+}
+</style>

src/main.js

@@ -4,6 +4,7 @@ import piniaPersist from 'pinia-plugin-persist'
 import App from './App.vue'
 import router from '@/router'
 import dayjs from '@p/dayjs'
+import ToastModal from '@c/modal/ToastModal.vue';
 
 const pinia = createPinia()
 pinia.use(piniaPersist)
@@ -12,9 +13,9 @@ const app = createApp(App)
 app.use(router)
     .use(pinia)
     .use(dayjs)
+    .component('ToastModal',ToastModal)
     .mount('#app')
 
-
 if (import.meta.env.MODE === "prod") {
     const console = window.console || {};
     console.log = function no_console() { }; // console log 막기

src/stores/toastStore.js

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia';
+
+export const useToastStore = defineStore('toastStore', {
+  state: () => ({
+    toastModal: false,
+    toastMsg: '',
+    time: 2000, 
+    toastType: 's',
+  }),
+  actions: {
+    onToast(msg = '', type = 's', time = 2000) {
+      this.toastModal = true;
+      this.toastMsg = msg;
+      this.toastType = type; 
+      this.time = time; 
+
+      // 시간이 지난 후 토스트 숨기기
+      setTimeout(() => {
+        this.offToast();
+      }, this.time);
+    },
+    offToast() {
+      this.toastModal = false;
+      this.toastMsg = '';
+      this.toastType = 's';
+    },
+  },
+});