인증 필요시 로그인 페이지 이동, 공통함수 설명 추가, 댓글 이미지 경로 변경(공통함수로), alert 을 토스트로 변경

src/common/axios-interceptor.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
-import { useRoute } from 'vue-router';
+import router from '@/router';
 import { useToastStore } from '@s/toastStore';
-import { useLoadingStore } from "@s/loadingStore";
+import { useLoadingStore } from '@s/loadingStore';
 
 const $api = axios.create({
     baseURL: import.meta.env.VITE_API_URL,
@@ -46,8 +46,8 @@ $api.interceptors.response.use(
     function (error) {
         const loadingStore = useLoadingStore();
         loadingStore.stopLoading();
-
         const toastStore = useToastStore();
+
         // 오류 응답 처리
         if (error.response) {
             switch (error.response.status) {
@@ -55,6 +55,7 @@ $api.interceptors.response.use(
                     if (!error.config.headers.isLogin) {
                         // toastStore.onToast('인증이 필요합니다.', 'e');
                     }
+                    router.push('/login');
                     break;
                 case 403:
                     toastStore.onToast('접근 권한이 없습니다.', 'e');

src/common/common.js

@@ -1,18 +1,20 @@
 /*
     작성자 : 공현지
     작성일 : 2025-01-17
-    수정자 :
+    수정자 : 박성용
-    수정일 :
+    수정일 : 2025-03-11
     설명   : 공통 스크립트
 */
 import Quill from 'quill';
 
 /*
-     *템플릿 사용법 : $common.변수
+    *템플릿 사용법 : $common.변수
-     *setup() 사용법 :
+    *setup() 사용법 :
-      const { appContext } = getCurrentInstance();
+        const { appContext } = getCurrentInstance();
-      const $common = appContext.config.globalProperties.$common;
+        const $common = appContext.config.globalProperties.$common;
-      $common.변수
+        or 
+        import { inject } from 'vue';         
+        const $common = inject('common');
 */
 const common = {
     // JSON 문자열로 Delta 타입을 변환
@@ -74,6 +76,12 @@ const common = {
         };
     },
 
+    /**
+     * 빈값 확인
+     *
+     * @param {} obj
+     * @returns
+     */
     isNotEmpty(obj) {
         if (obj === null || obj === undefined) return false;
         if (typeof obj === 'string' && obj.trim() === '') return false;
@@ -103,12 +111,25 @@ const common = {
     /**
      * 빈 값 확인
      *
-     * @param {ref} text ex) inNotValidInput(data.value);
+     * @param { ref } text ex) inNotValidInput(data.value);
      * @returns
      */
     isNotValidInput(text) {
         return text.trim().length === 0;
     },
+
+    /**
+     * 프로필 이미지 반환
+     *
+     * @param { String } profileImg
+     * @returns
+     */
+    getProfileImage(profileImg) {
+        let profileImgUrl = '/img/icons/icon.png'; // 기본 프로필 이미지 경로
+        const UserProfile = `${import.meta.env.VITE_SERVER}upload/img/profile/${profileImg}`;
+
+        return !profileImg || profileImg === '' ? profileImgUrl : UserProfile;
+    },
 };
 
 export default {

src/components/board/BoardProfile.vue

@@ -31,17 +31,11 @@
 </template>
 
 <script setup>
-    import { computed, defineProps, defineEmits } from 'vue';
+    import { computed, defineProps, defineEmits, inject } from 'vue';
     import DeleteButton from '../button/DeleteBtn.vue';
     import EditButton from '../button/EditBtn.vue';
     import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
-    // 기본 프로필 이미지 경로
-    const defaultProfile = '/img/icons/icon.png';
-
-    // 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
-    const baseUrl = import.meta.env.VITE_SERVER; // API 서버 URL
-
     // Props 정의
     const props = defineProps({
         comment: {
@@ -97,6 +91,7 @@
     });
 
     const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
+    const $common = inject('common');
 
     const isDeletedComment = computed(() => {
         return props.comment?.content === '삭제된 댓글입니다' && props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
@@ -123,6 +118,6 @@
 
     // 프로필 이미지 경로 설정
     const getProfileImage = profileImg => {
-        return profileImg && profileImg != '' ? `${baseUrl}upload/img/profile/${profileImg}` : defaultProfile;
+        return $common.getProfileImage(profileImg);
     };
 </script>

src/views/board/BoardView.vue

@@ -514,7 +514,7 @@
                 toggleCommentPassword(comment, 'edit');
             }
         } else {
-            alert('수정이 불가능합니다');
+            toastStore.onToast('수정에 실패하였습니다.', 'e');
         }
     };
 
@@ -644,7 +644,7 @@
                         passwordCommentAlert.value = '';
                         currentPasswordCommentId.value = null;
                     } else {
-                        alert('수정 취소를 실패했습니다.');
+                        toastStore.onToast('수정 취소를 실패하였습니다.', 'e');
                     }
                     //삭제
                 } else if (lastCommentClickedButton.value === 'delete') {
@@ -676,13 +676,15 @@
                     toastStore.onToast('게시물이 삭제되었습니다.');
                     router.push({ name: 'BoardList' });
                 } else {
-                    alert('삭제 실패: ' + response.data.message);
+                    //alert('삭제 실패: ' + response.data.message);
+                    toastStore.onToast('삭제 실패: ' + response.data.message, 'e');
                 }
             } catch (error) {
                 if (error.response) {
-                    alert(`삭제 실패: ${error.response.data.message || '서버 오류'}`);
+                    const errMsg = `삭제 실패: ${error.response.data.message || '서버 오류'}`;
+                    toastStore.onToast(errMsg, 'e');
                 } else {
-                    alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
+                    toastStore.onToast('네트워크 오류가 발생했습니다. 다시 시도해주세요.', 'e');
                 }
             }
         }
@@ -710,10 +712,10 @@
                     targetComment.isDeleted = true; // ✅ 삭제 상태를 추가
                 }
             } else {
-                alert('댓글 삭제에 실패했습니다.');
+                toastStore.onToast('댓글 삭제에 실패했습니다.', 'e');
             }
         } catch (error) {
-            alert('댓글 삭제 중 오류가 발생했습니다.');
+            toastStore.onToast('댓글 삭제 중 오류가 발생했습니다.', 'e');
         }
     };
 
@@ -732,13 +734,13 @@
                     targetComment.content = editedContent; // 댓글 내용 업데이트
                     targetComment.isEditTextarea = false; // 수정 모드 닫기
                 } else {
-                    alert('수정할 댓글을 찾을 수 없습니다.');
+                    toastStore.onToast('수정할 댓글을 찾을 수 없습니다.', 'e');
                 }
             } else {
-                alert('댓글 수정 실패했습니다.');
+                toastStore.onToast('댓글 수정 실패했습니다.', 'e');
             }
         } catch (error) {
-            alert('댓글 수정 중 오류 발생했습니다.');
+            toastStore.onToast('댓글 수정 중 오류가 발생하였습니다.', 'e');
         }
     };
 
@@ -749,7 +751,7 @@
         if (targetComment) {
             targetComment.isEditTextarea = false;
         } else {
-            alert('수정 취소를 실패했습니다.');
+            toastStore.onToast('수정 취소를 실패했습니다.', 'e');
         }
     };