From 1de0c882dd1163b2a7c467b7a0e72f89c3aa1a9f Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 4 Feb 2025 15:56:08 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B3=B4=EB=93=9C=EB=A6=AC=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=B3=B4=EB=93=9C=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=9B=90=EB=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                         |  17 ++
 package.json                              |   1 +
 src/components/list/BoardCard.vue         | 210 ++++++++--------
 src/components/list/BoardCardList.vue     |   8 +-
 src/views/board/BoardList.vue             | 288 ++++++++++++++--------
 src/views/vacation/VacationManagement.vue | 274 ++++++++++----------
 6 files changed, 461 insertions(+), 337 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7a47e84..b6cefde 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@vueup/vue-quill": "^1.2.0",
         "axios": "^1.7.9",
         "bootstrap": "^5.3.3",
+        "bootstrap-icons": "^1.11.3",
         "dayjs": "^1.11.13",
         "dompurify": "^3.2.3",
         "flatpickr": "^4.6.13",
@@ -1890,6 +1891,22 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 823ef27..866adaa 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@vueup/vue-quill": "^1.2.0",
     "axios": "^1.7.9",
     "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.3",
     "flatpickr": "^4.6.13",
diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue
index fe0eecc..1ddac0f 100644
--- a/src/components/list/BoardCard.vue
+++ b/src/components/list/BoardCard.vue
@@ -1,124 +1,142 @@
 <template>
-    <div class="card mb-3 shadow-sm fixed-card" style="width: 18rem; height: 17rem">
-      <!-- 이미지가 있을 경우 card-img-top으로 표시 -->
-      <img
-        v-if="img"
-        :src="img"
-        class="card-img-top"
-        alt="이미지"
-        style="object-fit: cover; height: 100px;"
-      />
-      <div class="card-body">
-        <!-- 카테고리 태그 (존재할 경우) -->
-        <h6 v-if="category" class="badge rounded-pill bg-primary text-white mb-2">
-          {{ category }}
-        </h6>
-        <!-- 제목과 첨부파일 아이콘 -->
-        <h5 class="card-title">
-          {{ title }}
-          <span class="text-muted" v-if="attachment">
-            <i class="fa-solid fa-paperclip"></i>
-          </span>
-        </h5>
-        <!-- 본문 -->
-        <p class="card-text limit-two-lines">{{ content }}</p>
-        <!-- 날짜 및 조회수, 좋아요, 댓글 -->
-        <p class="card-text">
-          <small class="text-muted">{{ formattedDate }}</small>
-          <div class="d-flex mt-2 mt-sm-0">
-            <span class="text-muted me-3">
-              <i class="fa-regular fa-eye"></i> {{ views || 0 }}
-            </span>
-            <span class="text-muted me-3" v-if="comments !== null">
-              <i class="bx bx-comment"></i> {{ comments }}
-            </span>
-            <span class="text-muted me-3" v-if="likes != null">
-              <i class="bx bx-like"></i> {{ likes }}
-            </span>
-            <span class="text-muted me-3" v-if="dislikes != null">
-              <i class="bx bx-dislike"></i> {{ dislikes }}
-            </span>
-          </div>
-        </p>
-      </div>
+    <div class="card mb-3 shadow-sm">
+        <div class="row g-0">
+            <!-- 이미지 섹션 -->
+            <div v-if="img" class="col-sm-2">
+                <img
+                    :src="img"
+                    alt="이미지"
+                    class="img-fluid rounded-start"
+                    style="object-fit: cover; height: 100%; width: 100%;"
+                />
+            </div>
+            <!-- 게시물 내용 섹션 -->
+            <div :class="contentColClass">
+                <div class="card-body">
+                    <!-- 태그 -->
+                    <h6 class="badge rounded-pill bg-primary text-white mb-2">
+                        {{ category }}
+                    </h6>
+                    <!-- 제목 -->
+                    <h5 class="card-title">
+                        {{ title }}
+                        <span class="text-muted me-3" v-if="attachment">
+                            <i class="fa-solid fa-paperclip"></i>
+                        </span>
+                    </h5>
+                    <!-- 본문 -->
+                    <div class="card-text str_wrap my-5">{{ content }}</div>
+                    <!-- 날짜 -->
+                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start">
+                        <small class="text-muted">{{ formattedDate }}</small>
+                        <!-- 조회수, 좋아요, 댓글 -->
+                        <div class="d-flex mt-2 mt-sm-0">
+                            <span class="text-muted me-3">
+                                <i class="fa-regular fa-eye"></i> {{ views || 0 }}
+                            </span>
+                            <span class="text-muted me-3" v-if="likes != null">
+                                <i class="bx bx-like"></i> {{ likes }}
+                            </span>
+                            <span class="text-muted" v-if="comments !== null">
+                                <i class="bx bx-comment"></i> {{ comments }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-  </template>
+</template>
 
-  <script setup>
-  import { computed } from 'vue';
-  import { defineProps } from 'vue';
+<script setup>
+import { computed } from 'vue';
+import { defineProps } from 'vue';
 
-  const props = defineProps({
+// Props 정의
+const props = defineProps({
     img: {
-      type: String,
-      default: null,
+        type: String,
+        default: null,
     },
     category: {
-      type: String,
-      required: false,
+        type: String,
+        required: false,
     },
     title: {
-      type: String,
-      required: true,
+        type: String,
+        required: true,
     },
     content: {
-      type: String,
-      required: true,
+        type: String,
+        required: true,
     },
     date: {
-      type: String,
-      required: true,
+        type: String,
+        required: true,
     },
     views: {
-      type: Number,
-      default: 0,
+        type: Number,
+        default: 0,
     },
     likes: {
-      type: Number,
-      default: null,
-    },
-    dislikes: {
-      type: Number,
-      default: null,
+        type: Number,
+        default: null,
     },
     comments: {
-      type: Number,
-      default: null,
+        type: Number,
+        default: null,
     },
     attachment: {
-      type: Boolean,
-      default: false,
+        type: Boolean,
+        default: false,
     }
-  });
+});
 
-  const formattedDate = computed(() => {
-    const dateObj = new Date(props.date);
-    return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
-  });
-  </script>
+// computed 속성
+const contentColClass = computed(() => {
+    return props.img ? 'col-sm-10 col-12' : 'col-sm-12';
+});
 
-  <style scoped>
-  .card {
+// formattedDate을 computed로 정의
+const formattedDate = computed(() => {
+    const date = new Date(props.date);
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
+        date.getDate()
+    ).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(
+        date.getMinutes()
+    ).padStart(2, "0")}`;
+});
+</script>
+
+<style>
+/* 카드 스타일 */
+.card {
     border: 1px solid #e6e6e6;
     border-radius: 8px;
     transition: transform 0.2s ease-in-out;
-  }
-
-  .card:hover {
-    transform: scale(1.02);
-  }
-
-  /* card-img-top의 모서리 둥글게 처리 */
-  .card-img-top {
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-  }
-
-  /* 내용 텍스트를 두 줄로 제한 */
-.limit-two-lines {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
 }
-  </style>
+
+.card:hover {
+    transform: scale(1.02);
+}
+
+/* 텍스트 줄임 표시 */
+.str_wrap {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+/* 이미지 스타일 */
+.img-fluid {
+    border-radius: 8px 0 0 8px;
+}
+
+/* 태그 배지 스타일 */
+.badge {
+    font-size: 0.8rem;
+    padding: 5px 10px;
+}
+</style>
diff --git a/src/components/list/BoardCardList.vue b/src/components/list/BoardCardList.vue
index 430a73d..5b3c29a 100644
--- a/src/components/list/BoardCardList.vue
+++ b/src/components/list/BoardCardList.vue
@@ -1,10 +1,9 @@
 <template>
-     <div class="container my-4">
-        <div class="row">
+    <div class="mt-4">
         <div v-if="posts.length === 0" class="text-center">
             <p class="text-muted mt-4">게시물이 없습니다.</p>
         </div>
-        <div class="col-md-3 mb-4 d-flex justify-content-center" v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
+        <div v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
             <BoardCard
                 :img="post.img || null"
                 :category="post.category || ''"
@@ -12,14 +11,11 @@
                 :content="post.content"
                 :date="post.date"
                 :views="post.views || 0"
-                :likes="post.likes"
-                :dislikes="post.dislikes"
                 v-bind="getBoardCardProps(post)"
                 :attachment="post.attachment || false"
                 @click="() => goDetail(post.id)"
                 />
         </div>
-        </div>
     </div>
 </template>
 
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 89eb2e8..1b528c5 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -2,57 +2,96 @@
     <div class="container flex-grow-1 container-p-y">
         <div class="row mb-4">
             <!-- 검색창 -->
-            <div class="container col-11 px-10 ">
+            <div class="container col-8 px-3">
                 <search-bar @update:data="search" />
             </div>
             <!-- 새 글쓰기 -->
-            <div class="container col-1 px-12 py-2">
+            <div class="container col-2 px-12 py-2">
                 <router-link to="/board/write">
                     <WriteButton />
                 </router-link>
             </div>
-        </div>
 
         <div class="row g-3">
-                <!-- 셀렉트 박스 -->
-                <div class="col-12 col-md-auto">
-                    <select class="form-select" v-model="selectedOrder" @change="handleSortChange">
-                        <option value="date">최신날짜</option>
-                        <option value="views">조회수</option>
-                    </select>
-                </div>
+            <!-- 셀렉트 박스 -->
+            <div class="col-12 col-md-auto">
+                <select class="form-select" v-model="selectedOrder" @change="handleSortChange">
+                    <option value="date">최신날짜</option>
+                    <option value="views">조회수</option>
+                </select>
             </div>
-
-        <!-- 공지사항 리스트 -->
-        <div v-if="pagination.currentPage === 1" class="mb-8">
-            <div class="row">
-                <BoardCardList :posts="noticeList" @click="goDetail" />
+            <!-- 공지 접기 기능 -->
+            <div class="container col-1 px-0 py-2">
+                <label>
+                    <input type="checkbox" v-model="showNotices" /> 공지 숨기기
+                </label>
+            </div>
+            <!-- 리스트 갯수 선택 -->
+            <div class="container col-1 px-0 py-2">
+                <select class="form-select" v-model="selectedSize" @change="handleSizeChange">
+                    <option value="10">10개씩</option>
+                    <option value="20">20개씩</option>
+                    <option value="30">30개씩</option>
+                    <option value="50">50개씩</option>
+                </select>
             </div>
         </div>
-
-        <!-- 일반 리스트 -->
-        <div>
-            <div class="row">
-                <BoardCardList :posts="generalList" @click="goDetail" />
-            </div>
+        </div>
+        <br>
+        <!-- 게시판 -->
+        <div class="table-responsive">
+            <table class="table table-bordered">
+                <thead class="table-light">
+                    <tr>
+                        <th style="width: 8%;">번호</th>
+                        <th style="width: 50%;">제목</th>
+                        <th style="width: 15%;">작성자</th>
+                        <th style="width: 12%;">작성일</th>
+                        <th style="width: 10%;">조회수</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <!-- 공지사항 (첫 페이지에서만 표시, showNotices가 false일 때만 보임) -->
+                    <template v-if="pagination.currentPage === 1 && !showNotices">
+                        <tr v-for="(notice, index) in noticeList"
+                            :key="'notice-' + index"
+                            class="notice-row clickable-row"
+                            @click="goDetail(notice.id)">
+                            <td>공지</td>
+                            <td>
+                                📌 {{ notice.title }}
+                                <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
+                                <span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 new-badge">N</span>
+                            </td>
+                            <td>{{ notice.author }}</td>
+                            <td>{{ notice.date }}</td>
+                            <td>{{ notice.views }}</td>
+                        </tr>
+                    </template>
+                    <!-- 일반 게시물 -->
+                    <tr v-for="(post, index) in generalList"
+                        :key="'post-' + index"
+                        class="general-row clickable-row"
+                        @click="goDetail(post.id)">
+                        <td>{{ post.id }}</td>
+                        <td>
+                            {{ post.title }}
+                            <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
+                            <span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 new-badge">N</span>
+                        </td>
+                        <td>{{ post.author }}</td>
+                        <td>{{ post.date }}</td>
+                        <td>{{ post.views }}</td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
 
         <!-- 페이지네이션 -->
         <div class="row g-3">
             <div class="mt-8">
                 <Pagination
-                    :currentPage="pagination.currentPage"
-                    :pages="pagination.pages"
-                    :prePage="pagination.prePage"
-                    :nextPage="pagination.nextPage"
-                    :isFirstPage="pagination.isFirstPage"
-                    :isLastPage="pagination.isLastPage"
-                    :hasPreviousPage="pagination.hasPreviousPage"
-                    :hasNextPage="pagination.hasNextPage"
-                    :navigatePages="pagination.navigatePages"
-                    :navigatepageNums="pagination.navigatepageNums"
-                    :navigateFirstPage="pagination.navigateFirstPage"
-                    :navigateLastPage="pagination.navigateLastPage"
+                    v-bind="pagination"
                     @update:currentPage="handlePageChange"
                 />
             </div>
@@ -62,19 +101,28 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue';
-import BoardCardList from '@/components/list/BoardCardList.vue';
 import Pagination from '@c/pagination/Pagination.vue';
 import SearchBar from '@c/search/SearchBar.vue';
 import router from '@/router';
 import WriteButton from '@c/button/WriteBtn.vue';
 import axios from '@api';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import isYesterday from 'dayjs/plugin/isYesterday';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+
+
+dayjs.extend(isToday); // 오늘 날짜 판별 플러그인 추가
+dayjs.extend(isYesterday);
 
 // 데이터 초기화
 const generalList = ref([]);
 const noticeList = ref([]);
 const searchText = ref('');
 const selectedOrder = ref('date');
-const sortDirection = ref('desc');
+const selectedSize = ref(10);
+const showNotices = ref(false);
+
 const pagination = ref({
     currentPage: 1,
     pages: 1,
@@ -95,83 +143,96 @@ const goDetail = (id) => {
     router.push({ name: 'BoardDetail', params: { id } });
 };
 
-// 검색 처리
+// 날짜 포맷 변환 함수 (오늘이면 HH:mm, 아니면 YYYY-MM-DD)
+const formatDate = (dateString) => {
+    const date = dayjs(dateString);
+    return date.isToday() ? date.format('HH:mm') : date.format('YYYY-MM-DD');
+};
+
+// 새로 올라온 게시물 여부 판단 (오늘 또는 어제 작성된 경우)
+const isNewPost = (dateString) => {
+    const date = dayjs(dateString);
+    return date.isToday() || date.isYesterday();
+};
+
+// 검색 처리 (검색 시 첫 페이지부터 조회)
 const search = (e) => {
     searchText.value = e.trim();
     fetchGeneralPosts(1);
-    fetchNoticePosts(searchText.value);
 };
 
-// 정렬 변경 핸들러
+// 정렬 변경 핸들러 (첫 페이지부터 정렬)
 const handleSortChange = () => {
     fetchGeneralPosts(1);
 };
 
-// 게시물 데이터 로드(일반)
+// 리스트 개수 변경 핸들러
+const handleSizeChange = () => {
+    fetchGeneralPosts(1);
+};
+
+// 일반 게시물 데이터 로드
 const fetchGeneralPosts = async (page = 1) => {
-    const response = await axios.get("board/general", {
-        params: {
-            page: page,
-            orderBy: selectedOrder.value,
-            sortDirection: sortDirection.value,
-            searchKeyword: searchText.value
+    try {
+        const { data } = await axios.get("board/general", {
+            params: {
+                page,
+                size: selectedSize.value,
+                orderBy: selectedOrder.value,
+                searchKeyword: searchText.value
+            }
+        });
+
+        if (data?.data) {
+            generalList.value = data.data.list.map(post => ({
+                id: post.id,
+                title: post.title,
+                author: post.author || '익명',
+                date: formatDate(post.date), // 날짜 변환 적용
+                views: post.cnt || 0,
+                hasAttachment: post.hasAttachment || false
+            }));
+
+            pagination.value = {
+                ...pagination.value,
+                currentPage: data.data.pageNum,
+                pages: data.data.pages,
+                prePage: data.data.prePage,
+                nextPage: data.data.nextPage,
+                isFirstPage: data.data.isFirstPage,
+                isLastPage: data.data.isLastPage,
+                hasPreviousPage: data.data.hasPreviousPage,
+                hasNextPage: data.data.hasNextPage,
+                navigatePages: data.data.navigatePages,
+                navigatepageNums: data.data.navigatepageNums,
+                navigateFirstPage: data.data.navigateFirstPage,
+                navigateLastPage: data.data.navigateLastPage
+            };
         }
-    });
-
-    if (response.data && response.data.data) {
-        const data = response.data.data;
-        // 게시물 리스트 업데이트
-        generalList.value = data.list.map((post, index) => ({
-            ...post,
-            id: post.id || index,
-            img: post.firstImageUrl || null,
-            views: post.cnt || 0,
-            likes: post.likeCount != null ? post.dislikeCount : null,
-            dislikes: post.dislikeCount != null ? post.likeCount : null,
-            comments: post.commentCount != null ? post.commentCount : null,
-            attachment: post.hasAttachment || false,
-            content: post.plainContent || '',
-        }));
-
-        // 페이지네이션 정보 업데이트
-        pagination.value = {
-            currentPage: data.pageNum,
-            pages: data.pages,
-            prePage: data.prePage,
-            nextPage: data.nextPage,
-            isFirstPage: data.isFirstPage,
-            isLastPage: data.isLastPage,
-            hasPreviousPage: data.hasPreviousPage,
-            hasNextPage: data.hasNextPage,
-            navigatePages: data.navigatePages,
-            navigatepageNums: data.navigatepageNums,
-            navigateFirstPage: data.navigateFirstPage,
-            navigateLastPage: data.navigateLastPage
-        };
-    } else {
-        console.error("데이터 오류:", response.data);
+    } catch (error) {
+        console.error("데이터 오류:", error);
     }
 };
 
-// 게시물 데이터 로드(공지사항)
+// 공지사항 데이터 로드
 const fetchNoticePosts = async () => {
-    const response = await axios.get("board/notices", {
-        params: {
-            searchKeyword: searchText.value
-        }
-    });
+    try {
+        const { data } = await axios.get("board/notices", {
+            params: { searchKeyword: searchText.value }
+        });
 
-    if (response.data && response.data.data && Array.isArray(response.data.data)) {
-        noticeList.value = response.data.data.map((post, index) => ({
-            ...post,
-            id: post.id || index,
-            img: post.firstImageUrl || null,
-            views: post.cnt || 0,
-            attachment: post.hasAttachment || false,
-            content: post.plainContent || '',
-        }));
-    } else {
-        console.error("데이터 오류:", response.data);
+        if (data?.data) {
+            noticeList.value = data.data.map(post => ({
+                id: post.id,
+                title: post.title,
+                author: post.author || '관리자',
+                date: formatDate(post.date), // 날짜 변환 적용
+                views: post.cnt || 0,
+                hasAttachment: post.hasAttachment || false
+            }));
+        }
+    } catch (error) {
+        console.error("데이터 오류:", error);
     }
 };
 
@@ -184,7 +245,40 @@ const handlePageChange = (page) => {
 
 // 데이터 로드
 onMounted(() => {
-    fetchGeneralPosts();
     fetchNoticePosts();
+    fetchGeneralPosts();
 });
 </script>
+
+<style scoped>
+/* 공지사항 스타일 */
+.notice-row {
+    background-color: #f8f9fa;
+}
+
+.notice-row td {
+    color: #DC3545 !important;
+}
+
+/* 일반 게시물 스타일 */
+.general-row {
+    background-color: white;
+    color: black;
+}
+
+/* 행 전체 클릭 가능 */
+.clickable-row {
+    cursor: pointer;
+}
+.clickable-row:hover {
+    background-color: #f1f1f1;
+}
+
+/* 새 글 아이콘 크기 조정 */
+.new-badge {
+    font-size: 0.65rem; /* 원래 크기의 약 절반 */
+    padding: 0.2em 0.4em; /* 배지 크기 조정 */
+    vertical-align: middle; /* 텍스트 정렬 */
+}
+
+</style>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index df74285..fae4aa9 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -1,75 +1,63 @@
 <template>
     <div class="vacation-management">
-        <div class="container-xxl flex-grow-1 container-p-y">
-            <!-- 저장 버튼 -->
-            <div class="save-button-container">
-                <button class="btn btn-success" @click="addVacationRequests">✔ 저장</button>
-            </div>
-            <!-- 캘린더 -->
-            <div class="card app-calendar-wrapper">
-                <div class="row g-0">
-                    <div class="col app-calendar-content">
-                        <div class="card shadow-none border-0">
-                            <div class="card-body pb-0">
-                                <full-calendar
-                                    ref="fullCalendarRef"
-                                    :events="calendarEvents"
-                                    :options="calendarOptions"
-                                    defaultView="dayGridMonth"
-                                    class="flatpickr-calendar-only"
-                                />
-                            </div>
-                        </div>
-                        <!-- 오전/오후 반차 버튼 -->
-                        <div class="half-day-buttons">
-                            <button
-                                class="btn btn-info"
-                                :class="{ active: halfDayType === 'AM' }"
-                                @click="toggleHalfDay('AM')"
-                            >
-                                ☀️ 오전반차
-                            </button>
-                            <button
-                                class="btn btn-warning"
-                                :class="{ active: halfDayType === 'PM' }"
-                                @click="toggleHalfDay('PM')"
-                            >
-                                🌙 오후반차
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
+      <div class="container-xxl flex-grow-1 container-p-y">
+        <div class="save-button-container">
+          <button class="btn btn-success" @click="addVacationRequests">✔ 저장</button>
         </div>
+        <div class="card app-calendar-wrapper">
+          <div class="row g-0">
+            <div class="col app-calendar-content">
+              <div class="card shadow-none border-0">
+                <div class="card-body pb-0">
+                  <full-calendar
+                    ref="fullCalendarRef"
+                    :options="calendarOptions"
+                    class="flatpickr-calendar-only"
+                  />
+                </div>
+              </div>
+              <div class="half-day-buttons">
+                <button class="btn btn-info" :class="{ active: halfDayType === 'AM' }" @click="toggleHalfDay('AM')">
+                  오전반차
+                </button>
+                <button class="btn btn-warning" :class="{ active: halfDayType === 'PM' }" @click="toggleHalfDay('PM')">
+                  오후반차
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-</template>
+  </template>
 
 <script setup>
-import FullCalendar from '@fullcalendar/vue3';
-import dayGridPlugin from '@fullcalendar/daygrid';
-import interactionPlugin from '@fullcalendar/interaction';
-import 'flatpickr/dist/flatpickr.min.css';
-import '@/assets/css/app-calendar.css';
-import { reactive, ref, onMounted } from 'vue';
-import axios from '@api'; // Axios 추가
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import "flatpickr/dist/flatpickr.min.css";
+import "@/assets/css/app-calendar.css";
+import { reactive, ref, onMounted } from "vue";
+import axios from "@api";
 
 const fullCalendarRef = ref(null);
-const calendarEvents = ref([]);
+const calendarEvents = ref([]); // FullCalendar의 이벤트 리스트
 const selectedDates = ref(new Map());
 const halfDayType = ref(null);
 const employeeId = ref(1);
 
 const calendarOptions = reactive({
     plugins: [dayGridPlugin, interactionPlugin],
-    initialView: 'dayGridMonth',
+    initialView: "dayGridMonth",
     headerToolbar: {
-        left: 'today',
-        center: 'title',
-        right: 'prev,next',
+        left: "today",
+        center: "title",
+        right: "prev,next",
     },
-    locale: 'ko',
+    locale: "ko",
     selectable: true,
     dateClick: handleDateClick,
+    events: calendarEvents, // 이벤트 리스트를 직접 반영
 });
 
 /**
@@ -77,25 +65,12 @@ const calendarOptions = reactive({
  */
 function handleDateClick(info) {
     const date = info.dateStr;
-    const dayElement = info.dayEl;
-
     if (!selectedDates.value.has(date)) {
-        const type = halfDayType.value ? (halfDayType.value === 'AM' ? 'D' : 'N') : 'F';
+        const type = halfDayType.value ? (halfDayType.value === "AM" ? "D" : "N") : "F";
         selectedDates.value.set(date, type);
-
-        if (type === 'D') {
-            dayElement.style.backgroundImage = 'linear-gradient(to bottom, #ade3ff 50%, transparent 50%)';
-        } else if (type === 'N') {
-            dayElement.style.backgroundImage = 'linear-gradient(to top, #ade3ff 50%, transparent 50%)';
-        } else {
-            dayElement.style.backgroundColor = '#ade3ff';
-        }
     } else {
         selectedDates.value.delete(date);
-        dayElement.style.backgroundColor = '';
-        dayElement.style.backgroundImage = '';
     }
-
     halfDayType.value = null;
 }
 
@@ -106,72 +81,60 @@ function toggleHalfDay(type) {
     halfDayType.value = halfDayType.value === type ? null : type;
 }
 
+/**
+ * 백엔드에서 휴가 데이터를 가져와 FullCalendar에 반영
+ */
 async function fetchVacationData() {
     try {
-        const response = await axios.get('vacation/list');
-        if (response.data.status === 'OK') {
+        const response = await axios.get("vacation/list");
+
+        if (response.data.status === "OK") {
             const vacationList = response.data.data;
+            console.log("📌 백엔드 응답 데이터:", vacationList);
 
-            // 사원별로 날짜를 그룹화
-            const employeeVacations = new Map();
+            if (!Array.isArray(vacationList)) {
+                throw new Error("vacationList is not an array.");
+            }
 
-            vacationList.forEach(({ employeeId, date, type }) => {
-                if (!employeeVacations.has(employeeId)) {
-                    employeeVacations.set(employeeId, []);
+            // 이벤트 리스트 변환
+            const events = vacationList.map((vac) => {
+                let dateStr = vac.LOCVACUDT.split("T")[0];
+                let className = "fc-daygrid-event";
+
+                let title = "연차";
+                if (vac.LOCVACTYP === "D") {
+                    title = "오전반차";
+                    className += " half-day-am";
+                } else if (vac.LOCVACTYP === "N") {
+                    title = "오후반차";
+                    className += " half-day-pm";
+                } else if (vac.LOCVACTYP === "F") {
+                    title = "연차";
+                    className += " full-day";
                 }
-                employeeVacations.get(employeeId).push({ date, type });
-            });
 
-            // 연속된 날짜 그룹화 및 스타일 적용
-            employeeVacations.forEach((dates, employeeId) => {
-                const sortedDates = dates.map(d => new Date(d.date)).sort((a, b) => a - b);
-                const color = getColorByEmployeeId(employeeId); // 사원별 색상 함수
+                return {
+                    title,
+                    start: dateStr,
+                    backgroundColor: getColorByEmployeeId(vac.MEMBERSEQ),
+                    classNames: [className],
+                };
+            }).filter((event) => event !== null);
 
-                let previousDate = null;
-
-                sortedDates.forEach(currentDate => {
-                    const dateStr = currentDate.toISOString().split('T')[0];
-                    const dayElement = document.querySelector(`[data-date="${dateStr}"]`);
-
-                    if (dayElement) {
-                        if (
-                            previousDate &&
-                            currentDate - previousDate === 86400000 // 하루 차이인지 확인
-                        ) {
-                            // 연속된 날짜 스타일 설정
-                            dayElement.style.backgroundColor = color;
-                        } else {
-                            // 새로운 시작점
-                            dayElement.style.backgroundColor = color;
-                            dayElement.style.borderLeft = `3px solid ${color}`;
-                        }
-                        previousDate = currentDate;
-                    }
-                });
-            });
+            console.log("📌 변환된 이벤트:", events);
+            calendarEvents.value = events; // FullCalendar 이벤트 업데이트
         }
     } catch (error) {
-        console.error('Error fetching vacation data:', error);
+        console.error("Error fetching vacation data:", error);
     }
 }
 
-/**
- * 사원 ID별 색상 반환 함수
- */
-function getColorByEmployeeId(employeeId) {
-    const colors = ['#ade3ff', '#ffade3', '#ade3ad', '#ffadad'];
-    return colors[employeeId % colors.length];
-}
-
-// 데이터 불러오기 호출
-fetchVacationData();
-
 /**
  * 휴가 요청 추가
  */
 async function addVacationRequests() {
     if (selectedDates.value.size === 0) {
-        alert('휴가를 선택해주세요.');
+        alert("휴가를 선택해주세요.");
         return;
     }
 
@@ -182,50 +145,41 @@ async function addVacationRequests() {
     }));
 
     try {
-        const response = await axios.post('vacation', vacationRequests);
+        const response = await axios.post("vacation", vacationRequests);
 
-        if (response.data && response.data.status === 'OK') {
-            alert('휴가가 저장되었습니다.');
-
-            const newEvents = vacationRequests.map(req => ({
-                title: req.type === 'D' ? '오전반차' : req.type === 'N' ? '오후반차' : '종일 휴가',
-                start: req.date,
-                allDay: true,
-            }));
-
-            calendarEvents.value = [...calendarEvents.value, ...newEvents];
+        if (response.data && response.data.status === "OK") {
+            alert("휴가가 저장되었습니다.");
+            fetchVacationData(); // 휴가 저장 후 데이터 다시 불러오기
             selectedDates.value.clear();
-            resetCalendarStyles();
         } else {
-            alert('휴가 저장 중 오류가 발생했습니다.');
+            alert("휴가 저장 중 오류가 발생했습니다.");
         }
     } catch (error) {
         console.error(error);
-        alert('휴가 저장에 실패했습니다.');
+        alert("휴가 저장에 실패했습니다.");
     }
 }
 
 /**
- * 초기화
+ * 사원 ID별 색상 반환
  */
-function resetCalendarStyles() {
-    const calendarElements = document.querySelectorAll('.fc-daygrid-day');
-    calendarElements.forEach(element => {
-        element.style.backgroundColor = '';
-        element.style.backgroundImage = '';
-    });
+function getColorByEmployeeId(employeeId) {
+    const colors = ["#ade3ff", "#ffade3", "#ade3ad", "#ffadad"];
+    return colors[employeeId % colors.length];
 }
 
+// 데이터 불러오기 호출
 onMounted(() => {
     fetchVacationData();
 });
 </script>
 
-<style scoped>
+<style>
 .vacation-management {
     padding: 20px;
 }
 
+/* 버튼 스타일 */
 .half-day-buttons {
     display: flex;
     justify-content: center;
@@ -236,4 +190,48 @@ onMounted(() => {
 .half-day-buttons .btn.active {
     border: 2px solid black;
 }
+
+/* FullCalendar 이벤트 스타일 */
+.fc-daygrid-event {
+    position: absolute !important;
+    height: 20px !important; /* 실선 두께 */
+    width: 90% !important;
+    left: 5% !important;
+    margin: 2px 0 !important;
+    padding: 0 !important;
+    border-radius: 2px !important;
+    background-color: inherit !important;
+    border: none !important; /* 기본 FullCalendar 테두리 제거 */
+}
+
+/* 여러 이벤트가 같은 날짜에 있을 때 정렬 */
+.fc-daygrid-event-harness {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 3px;
+}
+
+/* 오전반차(왼쪽부터 중앙까지) */
+.fc-daygrid-event.half-day-am {
+    width: 45% !important;
+    left: 0% !important;
+    background-color: #ffdd57 !important; /* 노란색 */
+}
+
+/* 오후반차(오른쪽부터 중앙까지) */
+.fc-daygrid-event.half-day-pm {
+    width: 45% !important;
+    left: auto !important;
+    right: 0% !important;
+    background-color: #57a5ff !important; /* 파란색 */
+}
+
+/* 연차 (전체 너비) */
+.fc-daygrid-event.full-day {
+    width: 100% !important;
+    left: 0 !important;
+    background-color: #ff85a2 !important; /* 연한 빨강 */
+}
 </style>