From 675eb9358725f3f7c2db0d3426c24474884cc43d Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 1 Apr 2025 10:52:24 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EC=9D=B8=EB=B3=B4=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/BoardMain.vue | 448 ++++++++++++++----------------
 1 file changed, 208 insertions(+), 240 deletions(-)

diff --git a/src/components/main/BoardMain.vue b/src/components/main/BoardMain.vue
index e5b772b..97ba7c8 100644
--- a/src/components/main/BoardMain.vue
+++ b/src/components/main/BoardMain.vue
@@ -1,267 +1,235 @@
 <template>
-    <div class="row" style="gap: 20px;">
-      <!-- 공지사항 카드 -->
-      <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
-        <div class="card text-center h-100">
-          <div class="card-header d-flex justify-content-between align-items-center">
-            <h3 class="mb-0">공지사항</h3>
-            <router-link :to="{ name: 'BoardList', query: { type: 'notices' } }" class="btn btn-sm btn-primary">
-              더보기
-            </router-link>
-          </div>
-          <div class="card-body p-0">
-            <table class="table mb-0">
-              <thead>
+<div class="row" style="gap: 20px;">
+    <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-content">
+        <!-- 모달 본문 -->
+        <div class="modal-bod mt-3">
+            <!-- 탭 버튼 영역 -->
+            <div class="btn-group mb-3" 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>
-                  <th class="text-center" style="width: 15%;">번호</th>
-                  <th class="text-center" style="width: 55%;">제목</th>
-                  <th class="text-center" style="width: 15%;">작성일</th>
-                  <th class="text-center" style="width: 15%;">조회수</th>
+                <!-- 익명게시판은 'nickname', 나머지는 'writer' -->
+                <th class="text-center" style="width: 20%;">
+                    {{ selectedBoard === 'anonymous' ? 'nickname' : 'writer' }}
+                </th>
+                <!-- 제목 헤더는 왼쪽 정렬 -->
+                <th class="text-start" style="width: 65%;">title</th>
+                <th class="text-center" style="width: 15%;">views</th>
                 </tr>
-              </thead>
-              <tbody>
+            </thead>
+            <tbody>
                 <tr
-                  v-for="(post, index) in noticeList"
-                  :key="post.id"
-                  @click="goDetail(post.id, 'notices')"
-                  style="cursor: pointer;"
+                v-for="post in currentList"
+                :key="post.id"
+                style="cursor: pointer;"
+                @click="goDetail(post.id, selectedBoard)"
                 >
-                  <td class="text-center">{{ index + 1 }}</td>
-                  <td>
-                    {{ post.title }}
-                    <span v-if="post.commentCount" class="text-danger ml-1">[{{ post.commentCount }}]</span>
-                    <span v-if="isNewPost(post.rawDate)" class="badge bg-warning text-dark ml-1">N</span>
-                  </td>
-                  <td class="text-center">{{ post.date }}</td>
-                  <td class="text-center">{{ post.views }}</td>
+                <td class="text-center">
+                    {{ selectedBoard === 'anonymous' ? post.nickname : post.author }}
+                </td>
+                <td class="text-start">
+                    <div>
+                    {{ truncateTitle(post.title) }}
+                    <span v-if="post.commentCount" class="text-danger ml-1">
+                        [{{ post.commentCount }}]
+                    </span>
+                    <i v-if="post.img" class="bi bi-image mx-1"></i>
+                    <i
+                    v-if="post.hasAttachment.length > 0"
+                    class="bi bi-paperclip ml-1"
+                    ></i>
+                    </div>
+                    <div class="text-muted small">
+                    {{ post.date }}
+                    </div>
+                </td>
+                <td class="text-center">{{ post.views }}</td>
                 </tr>
-                <tr v-if="noticeList.length === 0">
-                  <td colspan="4" class="text-center text-muted">게시물이 없습니다.</td>
+                <tr v-if="currentList.length === 0">
+                <td colspan="3" class="text-center text-muted">게시물이 없습니다.</td>
                 </tr>
-              </tbody>
+            </tbody>
             </table>
-          </div>
-          <div class="card-footer d-flex justify-content-end">
-            <router-link :to="{ name: 'BoardList', query: { type: 'notices' } }" class="btn btn-sm btn-primary">
-              더보기
-            </router-link>
-          </div>
         </div>
-      </div>
-
-      <!-- 자유게시판 카드 -->
-      <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
-        <div class="card text-center h-100">
-          <div class="card-header d-flex justify-content-between align-items-center">
-            <h3 class="mb-0">자유게시판</h3>
-            <router-link :to="{ name: 'BoardList', query: { type: 'general' } }" class="btn btn-sm btn-primary">
-              더보기
+        <!-- 모달 푸터: 더보기 버튼 오른쪽 정렬 -->
+        <div class="modal-foote d-flex">
+            <router-link
+            :to="{ name: 'BoardList', query: { type: selectedBoard } }"
+            class="btn btn-primary ms-auto"
+            >
+            more
             </router-link>
-          </div>
-          <div class="card-body p-0">
-            <table class="table mb-0">
-              <thead>
-                <tr>
-                  <th class="text-center" style="width: 15%;">번호</th>
-                  <th class="text-center" style="width: 55%;">제목</th>
-                  <th class="text-center" style="width: 15%;">작성일</th>
-                  <th class="text-center" style="width: 15%;">조회수</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr
-                  v-for="(post, index) in freeList"
-                  :key="post.id"
-                  @click="goDetail(post.id, 'general')"
-                  style="cursor: pointer;"
-                >
-                  <td class="text-center">{{ index + 1 }}</td>
-                  <td>
-                    {{ post.title }}
-                    <span v-if="post.commentCount" class="text-danger ml-1">[{{ post.commentCount }}]</span>
-                    <span v-if="isNewPost(post.rawDate)" class="badge bg-warning text-dark ml-1">N</span>
-                  </td>
-                  <td class="text-center">{{ post.date }}</td>
-                  <td class="text-center">{{ post.views }}</td>
-                </tr>
-                <tr v-if="freeList.length === 0">
-                  <td colspan="4" class="text-center text-muted">게시물이 없습니다.</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div class="card-footer d-flex justify-content-end">
-            <router-link :to="{ name: 'BoardList', query: { type: 'general' } }" class="btn btn-sm btn-primary">
-              더보기
-            </router-link>
-          </div>
         </div>
-      </div>
-
-      <!-- 익명게시판 카드 -->
-      <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
-        <div class="card text-center h-100">
-          <div class="card-header d-flex justify-content-between align-items-center">
-            <h3 class="mb-0">익명게시판</h3>
-            <router-link :to="{ name: 'BoardList', query: { type: 'anonymous' } }" class="btn btn-sm btn-primary">
-              더보기
-            </router-link>
-          </div>
-          <div class="card-body p-0">
-            <table class="table mb-0">
-              <thead>
-                <tr>
-                  <th class="text-center" style="width: 15%;">번호</th>
-                  <th class="text-center" style="width: 55%;">제목</th>
-                  <th class="text-center" style="width: 15%;">작성일</th>
-                  <th class="text-center" style="width: 15%;">조회수</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr
-                  v-for="(post, index) in anonymousList"
-                  :key="post.id"
-                  @click="goDetail(post.id, 'anonymous')"
-                  style="cursor: pointer;"
-                >
-                  <td class="text-center">{{ index + 1 }}</td>
-                  <td>
-                    {{ post.title }}
-                    <span v-if="post.commentCount" class="text-danger ml-1">[{{ post.commentCount }}]</span>
-                    <span v-if="isNewPost(post.rawDate)" class="badge bg-warning text-dark ml-1">N</span>
-                  </td>
-                  <td class="text-center">{{ post.date }}</td>
-                  <td class="text-center">{{ post.views }}</td>
-                </tr>
-                <tr v-if="anonymousList.length === 0">
-                  <td colspan="4" class="text-center text-muted">게시물이 없습니다.</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div class="card-footer d-flex justify-content-end">
-            <router-link :to="{ name: 'BoardList', query: { type: 'anonymous' } }" class="btn btn-sm btn-primary">
-              더보기
-            </router-link>
-          </div>
         </div>
-      </div>
     </div>
-  </template>
+    </div>
+</div>
+</template>
 
-  <script setup>
-  import { ref, onMounted } 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';
+<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);
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
 
-  const router = useRouter();
+const router = useRouter();
 
-  // 미리보기 데이터 저장
-  const noticeList = ref([]);
-  const freeList = ref([]);
-  const anonymousList = ref([]);
+// 모달이 항상 보이도록 초기값 true
+const isModalOpen = ref(true);
 
-  // 날짜 포맷: 오늘이면 HH:mm, 아니면 YYYY-MM-DD
-  const formatDate = dateString => {
-    const date = dayjs(dateString);
-    return date.isToday() ? date.format('HH:mm') : date.format('YYYY-MM-DD');
-  };
+// 현재 선택된 게시판 타입: 'notices', 'general', 'anonymous'
+const selectedBoard = ref('notices');
 
-  // 새 게시물 여부: 오늘 또는 어제 작성
-  const isNewPost = dateString => {
-    const date = dayjs(dateString);
-    return date.isToday() || date.isYesterday();
-  };
+// 각 게시판 미리보기 데이터 배열
+const noticeList = ref([]);
+const freeList = ref([]);
+const anonymousList = ref([]);
 
-  // 공지사항 데이터 로드 (최대 5개)
-  const fetchNoticePosts = async () => {
-    try {
-      const { data } = await axios.get('board/notices', { params: { size: 5 } });
-      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,
-          hasAttachment: post.hasAttachment,
-          img: post.firstImageUrl || null,
-        }));
-      }
-    } catch (error) {
-      console.error(error);
+// 선택된 게시판에 따른 미리보기 목록 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 > 10 ? title.slice(0, 10) + '...' : title;
+};
+
+// 공지사항 데이터 로드 (최대 5개)
+const fetchNoticePosts = async () => {
+try {
+    const { data } = await axios.get('board/notices', { params: { size: 5 } });
+    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) {
+    console.error(error);
+}
+};
 
-  // board/general 게시물 로드 후 자유게시판과 익명게시판으로 분리 (최대 10개 조회 후 각각 최대 5개씩)
-  const fetchGeneralPosts = async () => {
-    try {
-      const { data } = await axios.get('board/general', { params: { size: 10 } });
-      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),
-              rawDate: post.date,
-              views: post.cnt || 0,
-              commentCount: post.commentCount,
-              hasAttachment: post.hasAttachment,
-              img: post.firstImageUrl || null,
-            });
-          } else {
-            freePosts.push({
-              id: post.id,
-              title: post.title,
-              date: formatDate(post.date),
-              rawDate: post.date,
-              views: post.cnt || 0,
-              commentCount: post.commentCount,
-              hasAttachment: post.hasAttachment,
-              img: post.firstImageUrl || null,
-              author: post.author || '익명',
-            });
-          }
+// board/general 게시글 로드 후 자유게시판과 익명게시판으로 분리 (최대 10개 조회 → 각각 최대 5개)
+const fetchGeneralPosts = async () => {
+try {
+    const { data } = await axios.get('board/general', { params: { size: 10 } });
+    console.log(data.data.list)
+    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, // 첨부파일 유무
         });
-        freeList.value = freePosts.slice(0, 5);
-        anonymousList.value = anonymousPosts.slice(0, 5);
-      }
-    } catch (error) {
-      console.error(error);
+        } 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, 5);
+    anonymousList.value = anonymousPosts.slice(0, 5);
     }
-  };
+} catch (error) {
+    console.error(error);
+}
+};
 
-  // 상세 페이지 이동 (게시판 타입 전달)
-  const goDetail = (id, boardType) => {
-    router.push({ name: 'BoardDetail', params: { id, type: boardType } });
-  };
+// 탭 변경 함수
+const changeBoard = type => {
+selectedBoard.value = type;
+};
 
-  onMounted(() => {
-    fetchNoticePosts();
-    fetchGeneralPosts();
-  });
-  </script>
+// 상세 페이지 이동 (게시판 타입 전달)
+const goDetail = (id, boardType) => {
+router.push({ name: 'BoardDetail', params: { id, type: boardType } });
+};
 
-  <style scoped>
-  .table {
-    margin-bottom: 0;
-  }
-  .badge {
-    font-size: 0.75rem;
-    padding: 0.25em 0.5em;
-  }
-  .ml-1 {
-    margin-left: 0.25rem;
-  }
-  </style>
+// 모달이 열릴 때 데이터 로드
+fetchNoticePosts();
+fetchGeneralPosts();
+</script>
+
+<style scoped>
+.table > :not(caption) > * > * {
+padding: 0 !important;
+}
+.badge {
+font-size: 0.75rem;
+padding: 0.25em 0.5em;
+}
+.ml-1 {
+margin-left: 0.25rem;
+}
+</style>