Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front

public/css/custom.css

@@ -210,9 +210,10 @@ opacity: 0.6; /* 흐려 보이게 */
 .profile-list {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 10px;
   padding: 0;
+  margin-left: 20px;
 }
 .profile-img {
   transition: all 0.2s ease-in-out;
@@ -399,9 +400,6 @@ opacity: 0.6; /* 흐려 보이게 */
   right: 1rem;
   z-index: 2;
   background-color: #fff !important;
-  border-radius: 0.5rem;
-  opacity: 1;
-  padding: 0.635rem;
   box-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.4);
   transition: all 0.23s ease 0.1s;
   transform: translate(23px, -25px);
@@ -413,4 +411,7 @@ opacity: 0.6; /* 흐려 보이게 */
   transform: translate(20px, -20px);
 }
 
+.end-project {
+  background-color: #ddd !important;
+}
 /* project list end */

src/layouts/NormalLayout.vue

@@ -56,18 +56,40 @@
         margin-right: 20%; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
     }
 
-    /* top bar 고정1 */
+    /* 탑바 범위조정 */
-    .layout-navbar-fixed .layout-navbar {
+    nav#layout-navbar {
-        position: relative;
-        top: 0;
-        right: auto;
         left: 0 !important;
-        width: 96% !important;
+        margin-right: 20%;
-        padding-top: 0 !important;
+        margin-left: 260px;
+        width: auto !important;
+        min-width: auto !important;
+        right: 24px !important;
+        left: 24px !important;
     }
 
-    /* top bar 고정2 */
+    /* 탑바 범위조정(1200px 이하) */
-    .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
+    @media (max-width: 1200px) {
-        padding-top: 0 !important;
+        nav#layout-navbar {
+            left: 0 !important;
+            margin-right: 20%;
+            margin-left: 0px;
+            width: auto !important;
+            min-width: auto !important;
+            right: 24px !important;
+            left: 24px !important;
+        }
+    }
+
+    /* 탑바 범위조정(992px 이하) */
+    @media (max-width: 992px) {
+        nav#layout-navbar {
+            left: 0 !important;
+            margin-right: 20%;
+            margin-left: 0px;
+            width: auto !important;
+            min-width: auto !important;
+            right: 24px !important;
+            left: 24px !important;
+        }
     }
 </style>

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 = () =>{