로딩페이지(게시판 상세,투표리스트)

src/views/LoadingPage.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="loading-container">
+      <div class="spinner">
+        🐰
+      </div>
+      <p class="loading-text">잠시만 기다려 주세요...</p>
+    </div>
+  </template>
+
+  <script setup>
+  </script>
+
+  <style scoped>
+  /* 로딩 컨테이너 */
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #f9f9f9;
+  }
+
+  /* 빙글빙글 돌아가는 스피너 */
+  .spinner {
+    font-size: 50px;
+    animation: spin 1.2s linear infinite;
+  }
+
+  /* 로딩 텍스트 */
+  .loading-text {
+    margin-top: 10px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #555;
+    font-family: "Comic Sans MS", "Arial", sans-serif;
+  }
+
+  /* 회전 애니메이션 */
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  </style>

src/views/board/BoardView.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
-        <div class="row">
+        <LoadingSpinner v-if="isLoading" />
+        <div v-else class="row">
             <div class="col">
                 <div class="card">
                     <!-- 프로필 헤더 -->
@@ -122,7 +123,7 @@
 </template>
 
 <script setup>
-    import BoardCommentArea from '@/components/board/BoardCommentArea.vue';
+    import BoardCommentArea from '@c/board/BoardCommentArea.vue';
     import BoardProfile from '@c/board/BoardProfile.vue';
     import BoardCommentList from '@c/board/BoardCommentList.vue';
     import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
@@ -131,7 +132,8 @@
     import { useRoute, useRouter } from 'vue-router';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
     import axios from '@api';
-
+    import LoadingSpinner from "@v/LoadingPage.vue";
+    const isLoading = ref(true);
     // 게시물 데이터 상태
     const profileName = ref('');
     const boardTitle = ref('제목 없음');
@@ -225,6 +227,7 @@
     // 게시물 상세 데이터 불러오기
     const fetchBoardDetails = async () => {
         try {
+            isLoading.value = true;
             const response = await axios.get(`board/${currentBoardId.value}`);
             const data = response.data.data;
 
@@ -242,6 +245,8 @@
             attachments.value = data.attachments || [];
         } catch (error) {
             alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
+        } finally {
+            isLoading.value = false;
         }
     };
 

src/views/voteboard/voteBoardList.vue

@@ -1,6 +1,7 @@
 <template>
 <div class="container-xxl flex-grow-1 container-p-y">
-    <div class="row g-3">
+    <LoadingSpinner v-if="isLoading" />
+    <div v-else class="row g-3">
     <div class="mt-8">
         <!-- 투표 작성  -->
         <WriteBtn @click="voteWrite"  />
@@ -51,6 +52,8 @@ import Quill from 'quill';
 import WriteBtn from '@c/button/WriteBtn.vue';
 import voteList from '@c/voteboard/voteCardList.vue';
 import { useRouter } from 'vue-router';
+import LoadingSpinner from "@v/LoadingPage.vue";
+const isLoading = ref(true);
 
 const toastStore = useToastStore();
 const category = ref('0');
@@ -78,6 +81,7 @@ const changeCheck = () =>{
 }
 //투표목록
 const getvoteList = async () => {
+    isLoading.value = true;
     const response = await $api.get('vote/getVoteList',{
         params:
         {
@@ -89,6 +93,7 @@ const getvoteList = async () => {
     if (response.data.status === "OK") {
         PageData.value = response.data.data;
         voteListCardData.value = response.data.data.list;
+        isLoading.value = false;
     }
 };
 const selectHandler = () =>{