localhost-front/src/components/main/BoardMain.vue

<template>
<div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
    <div class="card text-center h-100">
        <!-- 더보기 버튼 -->
        <div class="modal-foote d-flex">
            <router-link
            :to="{ name: 'BoardList', query: { type: selectedBoard } }"
            class="btn btn-primary mr-1 pe-1 ps-1 ms-auto my-auto h-50"
            >
            more
            </router-link>
        </div>
        <div class="card-body">
        <!-- 모달 본문 -->
        <div class="modal-bod">
            <!-- 탭 버튼 영역 -->
            <div class="btn-group mb-5" role="group">
                <button
                    type="button"
                    class="btn"
                    :class="selectedBoard === 'notices' ? 'btn-primary' : 'btn-outline-primary'"
                    @click="changeBoard('notices')"
                >
                    공지
                </button>
                <button
                    type="button"
                    class="btn"
                    :class="selectedBoard === 'general' ? 'btn-primary' : 'btn-outline-primary'"
                    @click="changeBoard('general')"
                >
                    자유
                </button>
                <button
                    type="button"
                    class="btn"
                    :class="selectedBoard === 'anonymous' ? 'btn-primary' : 'btn-outline-primary'"
                    @click="changeBoard('anonymous')"
                >
                    익명
                </button>
                </div>
                <!-- 게시글 미리보기 테이블 -->
                <table class="table">
                <thead>
                    <tr>
                    <!-- 익명게시판은 'nickname', 나머지는 'writer' -->
                    <th class="text-center" style="width: 20%;">
                        {{ selectedBoard === 'anonymous' ? '닉네임' : '작성자' }}
                    </th>
                    <th class="text-center" style="width: 65%;">제목</th>
                </tr>
                </thead>
                <tbody>
                    <tr
                    v-for="post in currentList"
                    :key="post.id"
                    style="cursor: pointer;"
                    @click="goDetail(post.id, selectedBoard)"
                    >
                    <td class="text-center small">
                        {{ selectedBoard === 'anonymous' ? post.nickname : post.author }}
                    </td>
                    <td class="text-start fs-6">
                        <div class="ms-2">
                        {{ truncateTitle(post.title) }}
                        <span v-if="post.commentCount" class="text-danger ml-1 small">
                            [{{ post.commentCount }}]
                        </span>
                        <i v-if="post.img" class="bi bi-image mx-1 small"></i>
                        <i
                        v-if="post.hasAttachment.length > 0"
                        class="bi bi-paperclip ml-1 small"
                        ></i>

                        <div class="text-muted small small">
                        {{ post.date }}
                        <span class="ms-1">
                        <i class="fa-regular fa-eye small me-1"></i>{{post.views}}
                        </span>
                        </div>
                    </div>
                    </td>
                    </tr>
                    <tr v-if="currentList.length === 0">
                    <td colspan="3" class="text-center text-muted">게시물이 없습니다.</td>
                    </tr>
                </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
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 router = useRouter();

// 모달이 항상 보이도록 초기값 true
const isModalOpen = ref(true);

// 현재 선택된 게시판 타입: 'notices', 'general', 'anonymous'
const selectedBoard = ref('notices');

// 각 게시판 미리보기 데이터 배열
const noticeList = ref([]);
const freeList = ref([]);
const anonymousList = ref([]);

// 선택된 게시판에 따른 미리보기 목록 computed
const currentList = computed(() => {
if (selectedBoard.value === 'notices') return noticeList.value;
if (selectedBoard.value === 'general') return freeList.value;
if (selectedBoard.value === 'anonymous') return anonymousList.value;
return [];
});

// 날짜 포맷 함수: 오늘이면 HH:mm, 아니면 YYYY-MM-DD
const formatDate = dateString => {
const date = dayjs(dateString);
return date.isToday() ? date.format('HH:mm') : date.format('YYYY-MM-DD');
};

// 제목이 14글자 넘어가면 ... 처리하는 함수
const truncateTitle = title => {
return title.length > 7 ? title.slice(0, 7) + '...' : title;
};

// 공지사항 데이터 로드 (최대 5개)
const fetchNoticePosts = async () => {
try {
    const { data } = await axios.get('board/notices', { params: { size: 8 } });
    if (data?.data) {
    noticeList.value = data.data.map(post => ({
        id: post.id,
        title: post.title,
        date: formatDate(post.date),
        rawDate: post.date,
        views: post.cnt || 0,
        commentCount: post.commentCount,
        img: post.firstImageUrl,
        author: post.author || '관리자',
        nickname: post.nickname || '관리자',
        hasAttachment: post.hasAttachment, // 첨부파일 유무
    }));
    }
} catch (error) {
}
};

// board/general 게시글 로드 후 자유게시판과 익명게시판으로 분리 (최대 10개 조회 → 각각 최대 5개)
const fetchGeneralPosts = async () => {
try {
    const { data } = await axios.get('board/general', { params: { size: 16 } });
    if (data?.data && data.data.list) {
    const freePosts = [];
    const anonymousPosts = [];
    data.data.list.forEach(post => {
        if (post.nickname) {
        // 닉네임이 있으면 익명게시판 데이터
        anonymousPosts.push({
            id: post.id,
            title: post.title,
            date: formatDate(post.date),
            img: post.firstImageUrl,
            rawDate: post.date,
            views: post.cnt || 0,
            commentCount: post.commentCount,
            nickname: post.nickname,
            hasAttachment: post.hasAttachment, // 첨부파일 유무
        });
        } else {
        // 닉네임이 없으면 자유게시판 데이터
        freePosts.push({
            id: post.id,
            title: post.title,
            date: formatDate(post.date),
            rawDate: post.date,
            views: post.cnt || 0,
            img: post.firstImageUrl,
            commentCount: post.commentCount,
            author: post.author || '익명',
            hasAttachment: post.hasAttachment, // 첨부파일 유무
        });
        }
    });
    freeList.value = freePosts.slice(0, 8);
    anonymousList.value = anonymousPosts.slice(0, 8);
    }
} catch (error) {
    console.error(error);
}
};

// 탭 변경 함수
const changeBoard = type => {
selectedBoard.value = type;
};

// 상세 페이지 이동 (게시판 타입 전달)
const goDetail = (id, boardType) => {
router.push({ name: 'BoardDetail', params: { id }, query: { type: boardType } });
};

// 모달이 열릴 때 데이터 로드
fetchNoticePosts();
fetchGeneralPosts();
</script>

<style scoped>
.table > :not(caption) > * > * {
padding: 0 !important;
}
</style>