Merge branch 'main' into wordDict

2025-02-06 09:25:59 +09:00 · 2025-02-06 09:25:59 +09:00 · c95a2ae80b
commit c95a2ae80b
parent 69b5216963 4329d9febd
9 changed files with 540 additions and 380 deletions
--- 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",
--- 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",
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@ -7,16 +7,13 @@
            <div class="me-2">
                <h6 class="mb-0">{{ profileName }}</h6>
                <div class="profile-detail">
-                    <span>2024.12.10 10:46</span>
+                    <span>{{ date }}</span>
                    <template v-if="showDetail">
-                        <span>
+                        <span class="ms-2">
                            <i class="fa-regular fa-eye"></i> {{ views }}
                        </span>
                        <span>
-                            <i class="fa-regular fa-thumbs-up"></i> {{ likes }}
-                        </span>
-                        <span>
-                            <i class="fa-regular fa-thumbs-down"></i> {{ dislikes }}
+                            <i class="bx bx-comment"></i> {{ comments }}
                        </span>
                    </template>
                </div>
@ -45,6 +42,7 @@
 </template>

 <script setup>
+import { computed, defineProps } from 'vue';
 import { useRouter } from 'vue-router';
 import axios from '@api';
 import DeleteButton from '../button/DeleteBtn.vue';
@ -72,17 +70,17 @@ const props = defineProps({
        type: Boolean,
        default: false,
    },
+    date: {
+        type: String,
+        required: true,
+    },
    views: {
        type: Number,
        default: 0,
    },
-    likes: {
+    comments: {
        type: Number,
-        default: null,
-    },
-    dislikes: {
-        type: Number,
-        default: null,
+        default: 0,
    },
    isChild: {
        type: Boolean,
--- a/src/components/button/BoardRecommendBtn.vue
+++ b/src/components/button/BoardRecommendBtn.vue
@ -62,27 +62,28 @@ watch(() => props.dislikeCount, (newVal) => {
 });

 const handleLike = () => {
-    likeClicked.value = !likeClicked.value;
-    likeCount.value += likeClicked.value ? 1 : -1;
+    // console.log('adadasd')
+    // likeClicked.value = !likeClicked.value;
+    // likeCount.value += likeClicked.value ? 1 : -1;
    emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
-    if(likeClicked.value === true){
-        if(dislikeClicked.value ===  true) {
-            dislikeClicked.value = false;
-            dislikeCount.value += -1
-        }
-    }
+    // if(likeClicked.value === true){
+    //     if(dislikeClicked.value ===  true) {
+    //         dislikeClicked.value = false;
+    //         dislikeCount.value += -1
+    //     }
+    // }
 };

 const handleDislike = () => {
-    dislikeClicked.value = !dislikeClicked.value;
-    dislikeCount.value += dislikeClicked.value ? 1 : -1;
+    // dislikeClicked.value = !dislikeClicked.value;
+    // dislikeCount.value += dislikeClicked.value ? 1 : -1;
    emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
-    if(dislikeClicked.value === true){
-        if(likeClicked.value ===  true) {
-            likeClicked.value = false;
-            likeCount.value += -1
-        }
-    }
+    // if(dislikeClicked.value === true){
+    //     if(likeClicked.value ===  true) {
+    //         likeClicked.value = false;
+    //         likeCount.value += -1
+    //     }
+    // }
 };

 </script>
--- 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>
--- 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>

--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@ -2,57 +2,98 @@
    <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>
+                    <!-- 공지사항 -->
+                    <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.img" class="bi bi-image me-1"></i>
+                                <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.img" class="bi bi-image me-1"></i>
+                            <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 +103,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,11 +145,22 @@ 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);
 };

 // 정렬 변경 핸들러
@ -107,71 +168,78 @@ 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) {
+            console.log(data)
+            const totalPosts = data.data.total; // 전체 게시물 개수 받아오기 (API가 제공해야 함)
+
+            generalList.value = data.data.list.map((post, index) => ({
+                id: totalPosts - ((page - 1) * selectedSize.value) - index,
+                title: post.title,
+                author: post.author || '익명',
+                date: formatDate(post.date), // 날짜 변환 적용
+                views: post.cnt || 0,
+                hasAttachment: post.hasAttachment || false,
+                img: post.firstImageUrl || null
+            }));
+
+            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,
+                img: post.firstImageUrl || null
+            }));
+        }
+    } catch (error) {
+        console.error("데이터 오류:", error);
    }
 };

@ -184,7 +252,39 @@ 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>
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@ -9,8 +9,8 @@
                            :boardId="currentBoardId"
                            :profileName="profileName"
                            :views="views"
-                            :likes="likes"
-                            :dislikes="dislikes"
+                            :comments="comments"
+                            :date="formattedBoardDate"
                            class="pb-6 border-bottom"
                        />
                    </div>
@ -49,8 +49,8 @@
                                :bigBtn="true"
                                :boardId="currentBoardId"
                                :commentId="null"
-                                :likeCount="currentLikeCount"
-                                :dislikeCount="currentDislikeCount"
+                                :likeCount="likes"
+                                :dislikeCount="dislikes"
                                @updateReaction="handleUpdateReaction"
                            />
                        </div>
@ -63,7 +63,7 @@
                        </ul> -->

                        <!-- 댓글 영역 -->
-                        <BoardComentArea :comments="comments" />
+                        <BoardComentArea />

                        <!-- 수정 버튼 -->
                        <!-- <button class="btn btn-primary" @click="goToEditPage">
@ -87,7 +87,7 @@ import BoardProfile from '@c/board/BoardProfile.vue';
 import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardRecommendBtn from '@/components/button/BoardRecommendBtn.vue';
 import Pagination from '@/components/pagination/Pagination.vue';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';

@ -95,11 +95,14 @@ import axios from '@api';
 const profileName = ref('익명 사용자');
 const boardTitle = ref('제목 없음');
 const boardContent = ref('');
-const comments = ref([]);
 const attachments = ref([]);
+const date = ref('');
 const views = ref(0);
 const likes = ref(0);
 const dislikes = ref(0);
+const likeClicked = ref(false);
+const dislikeClicked = ref(false);
+const comments = ref(0);
 const attachment = ref(false);

 // 라우트에서 ID 가져오기
@ -119,38 +122,66 @@ const fetchBoardDetails = async () => {
        const data = response.data.data;

        // API 응답 데이터 반영
-        const boardDetail = data.boardDetail || {};
-        // console.log('boardDetail:', boardDetail);
+        // const boardDetail = data.boardDetail || {};
+
+        // console.log('API Response:', response.data);

        profileName.value = data.author || '익명 사용자';
        boardTitle.value = data.title || '제목 없음';
        boardContent.value = data.content || '';
+        date.value = data.date || '';
        views.value = data.cnt || 0;
        likes.value = data.likeCount || 0;
        dislikes.value = data.dislikeCount || 0;
        attachment.value = data.hasAttachment || null;
-
-        attachments.value = data.attachments || [];
-        comments.value = data.comments || [];
+        comments.value = data.commentCount || 0;
+        
    } catch (error) {
        alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
    }
 };

-const currentLikeCount = ref(10);
-const currentDislikeCount = ref(2);
-
 // 좋아요, 싫어요
 const handleUpdateReaction = async ({ type, boardId, commentId }) => {
    try {
-        const cmtId = commentId !== null ? commentId : 0;
+        //이거 왜 한건지 찾아보자
+        const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, { type });

-        const response = await axios.post(`/board/${boardId}/${cmtId}/reaction`, { type });
+        // console.log('API 응답:', response.data);
+        // console.log(commentId)
+
+        if (response.data.code === 200) {
+            if (type === 'like') {
+                likeClicked.value = !likeClicked.value;
+                likes.value += likeClicked.value ? 1 : -1;
+            } else if (type === 'dislike') {
+                dislikeClicked.value = !dislikeClicked.value;
+                dislikes.value += dislikeClicked.value ? 1 : -1;
+            }
+        } else {
+            alert('반응 업데이트 실패');
+        }
+        // likes.value = response.data.likeCount;
+        // dislikes.value = response.data.dislikeCount;
+
+        // if (type === 'like') {
+        //     likeClicked.value = !likeClicked.value;
+        //     console.log('aaaa' ,response.data)
+
+        // } else if (type === 'dislike') {
+        //     console.log('싫어')
+        // }
    } catch (error) {
        alert('반응을 업데이트하는 중 오류 발생');
    }
 };

+// 날짜
+const formattedBoardDate = computed(() => {
+    const dateObj = new Date(date.value);
+    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')}`;
+});
+
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(() => {
    fetchBoardDetails();
--- 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>