fix : main banner modify

src/style.css

@@ -22,6 +22,11 @@ body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color:
 .theme-selector,
 .nav-stats,
 .server-badge,
+.board-card,
+.rail-item,
+.board-login-btn,
+.board-load-more,
+.post-detail-close,
 .terminal,
 .terminal span {
   font-family: 'JetBrains Mono', monospace !important;
@@ -254,6 +259,100 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
 .about-text { line-height: 2; color: var(--tui-dim);}
 .contact-form { line-height: 2; color: var(--tui-dim);}
 
+/* --- 게시판 (BOARD) --- */
+.board-layout { display: grid; grid-template-columns: 168px 1fr; gap: 18px; align-items: start; }
+.board-rail { display: flex; flex-direction: column; gap: 6px; }
+.rail-item {
+  display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 7px 10px;
+  border: 1px solid var(--tui-border); color: var(--tui-dim); background: rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+}
+.rail-item.active { color: var(--tui-color); border-color: var(--tui-color); box-shadow: 0 0 8px var(--tui-border) inset; }
+.rail-item b { font-weight: 600; }
+
+.board-feed { display: flex; flex-direction: column; gap: 10px; }
+.board-status {
+  color: var(--tui-dim); font-size: 13px; padding: 30px 0; text-align: center;
+  display: flex; flex-direction: column; align-items: center; gap: 12px;
+}
+.board-login-btn {
+  background: none; border: 1px solid var(--tui-color); color: var(--tui-color);
+  padding: 7px 18px; font-size: 12px; font-weight: bold; cursor: pointer; transition: 0.3s;
+}
+.board-login-btn:hover { background: var(--tui-color); color: #000; box-shadow: 0 0 10px var(--tui-color); }
+.board-load-more {
+  padding: 10px; border: 1px dashed var(--tui-border); background: none; color: var(--tui-dim);
+  cursor: pointer; font-size: 12px;
+}
+.board-load-more:hover { color: var(--tui-color); border-color: var(--tui-color); }
+.board-load-more:disabled { opacity: 0.5; cursor: default; }
+.board-card {
+  display: flex; gap: 12px; padding: 10px; border: 1px solid var(--tui-border); background: #080808;
+  cursor: pointer; text-align: left; width: 100%; color: inherit;
+}
+.board-card:hover { border-color: var(--tui-color); box-shadow: 0 0 10px var(--tui-border); }
+.board-thumb { width: 64px; height: 48px; flex-shrink: 0; object-fit: cover; border: 1px solid #151515; background: #050505; }
+.board-thumb-empty { background: repeating-linear-gradient(45deg, #0c0c0c, #0c0c0c 4px, #050505 4px, #050505 8px); }
+.board-card-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
+.board-tag { font-size: 9.5px; font-weight: bold; padding: 2px 6px; letter-spacing: 0.04em; border: 1px solid var(--tui-color); color: var(--tui-color); align-self: flex-start; }
+.board-card-title { font-size: 13px; color: var(--tui-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.board-card:hover .board-card-title { color: var(--tui-color); }
+.board-card-meta { font-size: 10.5px; color: var(--tui-dim); display: flex; gap: 10px; }
+
+/* --- 게시글 상세 (TuiPostDetail.vue) --- */
+.tui-post-detail {
+  background-color: #000000 !important;
+  color: var(--tui-color) !important;
+  font-family: 'JetBrains Mono', monospace !important;
+  padding: 26px 26px 0 !important;
+  border-radius: 4px !important;
+  border: 1px solid var(--tui-color) !important;
+  box-shadow: 0 0 15px var(--tui-border) !important;
+  width: 100%;
+  max-width: 820px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+.post-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
+.post-detail-eyebrow { font-size: 10px; letter-spacing: 0.12em; color: var(--tui-dim); margin-bottom: 8px; }
+.post-detail-title { margin: 0; font-size: 16px; line-height: 1.5; color: var(--tui-color); font-weight: 700; text-shadow: 0 0 8px var(--tui-glow); }
+.post-detail-close {
+  background: none; border: 1px solid var(--tui-border); color: var(--tui-dim);
+  width: 28px; height: 28px; flex-shrink: 0; cursor: pointer; font-size: 14px;
+}
+.post-detail-close:hover { border-color: var(--tui-color); color: var(--tui-color); }
+.post-detail-meta {
+  font-size: 11px; color: var(--tui-dim); display: flex; gap: 12px; flex-wrap: wrap;
+  margin: 12px 0 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--tui-border);
+}
+.post-detail-text { font-size: 13px; line-height: 1.85; color: #ffffff; margin: 0 0 18px; }
+.post-detail-text p { margin: 0 0 12px; }
+.post-detail-text p:last-child { margin-bottom: 0; }
+.post-detail-text a { color: var(--tui-color); text-decoration: underline; }
+.post-detail-text b, .post-detail-text strong { color: var(--tui-color); font-weight: 700; }
+.post-detail-text img { max-width: 100%; height: auto; display: block; margin: 12px 0; border: 1px solid #151515; }
+.post-detail-text blockquote {
+  margin: 12px 0; padding: 8px 14px; border-left: 2px solid var(--tui-border); color: var(--tui-dim);
+}
+.post-detail-text ul, .post-detail-text ol { margin: 0 0 12px; padding-left: 22px; }
+.post-detail-text li { margin-bottom: 4px; }
+.post-detail-text h1, .post-detail-text h2, .post-detail-text h3,
+.post-detail-text h4, .post-detail-text h5, .post-detail-text h6 {
+  color: var(--tui-color); margin: 16px 0 8px; font-size: 14px;
+}
+.post-detail-text table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; }
+.post-detail-text td, .post-detail-text th { border: 1px solid var(--tui-border); padding: 6px 8px; }
+
+.post-detail-foot {
+  position: sticky; bottom: 0; z-index: 1;
+  margin: 18px -26px 0; padding: 14px 26px 20px;
+  background: #000; border-top: 1px solid var(--tui-border);
+  display: flex; justify-content: flex-end;
+}
+.post-detail-foot a { font-size: 11.5px; color: var(--tui-color); text-decoration: none; border: 1px solid var(--tui-color); padding: 7px 14px; }
+.post-detail-foot a:hover { background: var(--tui-color); color: #000; }
+
 /* 애니메이션 트랜지션 */
 .fade-enter-active, .fade-leave-active { transition: opacity 0.25s ease; }
 .fade-enter-from, .fade-leave-to { opacity: 0; }
@@ -424,6 +523,7 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
 @media screen and (max-width: 1100px) {
   #videos-container { grid-template-columns: repeat(2, 1fr); }
   .project-grid { grid-template-columns: repeat(2, 1fr); }
+  .board-layout { grid-template-columns: 130px 1fr; }
 }
 
 @media screen and (max-width: 650px) {
@@ -431,6 +531,10 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
   .content-area { padding: 10px; }
   #videos-container { grid-template-columns: 1fr; padding: 10px; }
   .project-grid { grid-template-columns: 1fr; }
+  .board-layout { grid-template-columns: 1fr; }
+  .board-rail { flex-direction: row; flex-wrap: wrap; }
+  .tui-post-detail { max-width: 92vw !important; padding: 16px 16px 0 !important; }
+  .post-detail-foot { margin: 18px -16px 0; padding: 12px 16px 16px; }
 
   /* 2. 네비게이션바 줄바꿈 허용 (화면 밖으로 넘어가지 않게 방어) */
   .auth-nav {

src/views/Main.vue

@@ -111,6 +111,78 @@
           </div>
         </div>
 
+        <div v-else-if="activeMenu === 'board'" class="sub-page board-page" key="board">
+          <h2 class="page-title">> EXECUTING COMMUNITY_FEED.EXE</h2>
+
+          <div class="board-layout">
+            <div class="board-rail">
+              <button
+                  class="rail-item"
+                  :class="{ active: activeBoardKey === '' }"
+                  @click="selectBoardSource('')"
+              >
+                <span>ALL</span>
+              </button>
+              <button
+                  v-for="src in boardSources"
+                  :key="src.boardKey"
+                  class="rail-item"
+                  :class="{ active: activeBoardKey === src.boardKey }"
+                  @click="selectBoardSource(src.boardKey)"
+              >
+                <span>{{ src.siteName }} · {{ src.boardName }}</span>
+              </button>
+            </div>
+
+            <div class="board-feed">
+              <div v-if="board.error === 'auth'" class="board-status">
+                로그인이 필요한 기능입니다.
+                <button class="board-login-btn" @click="changeMenu('login')">LOGIN</button>
+              </div>
+              <div v-else-if="board.loading && board.posts.length === 0" class="board-status">SYNCING BOARD DATA...</div>
+              <div v-else-if="board.error" class="board-status">FAILED TO LOAD BOARD DATA.</div>
+              <div v-else-if="board.posts.length === 0" class="board-status">NO POSTS FOUND.</div>
+              <template v-else>
+                <button
+                    v-for="post in board.posts"
+                    :key="post.id"
+                    class="board-card"
+                    @click="openPostDetail(post)"
+                >
+                  <img
+                      v-if="post.images[0]"
+                      :src="post.images[0]"
+                      referrerpolicy="no-referrer"
+                      loading="lazy"
+                      class="board-thumb"
+                      @error="$event.target.style.visibility = 'hidden'"
+                  />
+                  <div v-else class="board-thumb board-thumb-empty"></div>
+                  <div class="board-card-body">
+                    <div class="board-card-top">
+                      <span class="board-tag">{{ post.sourceLabel }}</span>
+                    </div>
+                    <div class="board-card-title">{{ post.title }}</div>
+                    <div class="board-card-meta">
+                      <span v-if="post.createdAt">{{ post.createdAt }}</span>
+                      <span v-if="post.views !== null">조회 {{ post.views }}</span>
+                      <span v-if="post.likes !== null">추천 {{ post.likes }}</span>
+                    </div>
+                  </div>
+                </button>
+                <button
+                    v-if="board.hasMore"
+                    class="board-load-more"
+                    :disabled="board.loading"
+                    @click="loadMoreBoardPosts"
+                >
+                  {{ board.loading ? 'LOADING...' : '더 보기' }}
+                </button>
+              </template>
+            </div>
+          </div>
+        </div>
+
         <div v-else-if="activeMenu === 'login'" class="sub-page login-page" key="login">
           <div class="login-terminal-frame">
             <h2 class="login-gate-title">> SECURE_AUTHENTICATION_GATEWAY.EXE</h2>
@@ -196,6 +268,12 @@
       </div>
     </transition>
 
+    <transition name="fade">
+      <div v-if="postDetail.show" class="tui-global-overlay" @click.self="closePostDetail">
+        <TuiPostDetail :post="postDetail.post" @close="closePostDetail" />
+      </div>
+    </transition>
+
     <transition name="fade">
       <div v-if="isBooting" class="boot-log-screen">
         <div class="boot-log-box">
@@ -212,6 +290,7 @@ import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
 import axios from 'axios';
 import TuiProgressBar from '@/components/TuiProgressBar.vue';
 import TuiAlert from '@/components/TuiAlert.vue';
+import TuiPostDetail from '@/components/TuiPostDetail.vue';
 
 const videos = ref([]);
 const terminalRef = ref(null);
@@ -258,6 +337,9 @@ const BOOT_SEQUENCE = [
   '[SUCCESS] BOOT SEQUENCE COMPLETE.'
 ];
 
+const BOOT_LOG_STORAGE_KEY = 'lastBootLogTimestamp';
+const BOOT_LOG_INTERVAL_MS = 60 * 60 * 1000;
+
 const runBootSequence = () => {
   let i = 0;
   const pushLine = () => {
@@ -274,6 +356,15 @@ const runBootSequence = () => {
   pushLine();
 };
 
+const shouldShowBootLog = () => {
+  const lastShown = Number(localStorage.getItem(BOOT_LOG_STORAGE_KEY));
+  return !lastShown || Date.now() - lastShown >= BOOT_LOG_INTERVAL_MS;
+};
+
+const markBootLogShown = () => {
+  localStorage.setItem(BOOT_LOG_STORAGE_KEY, String(Date.now()));
+};
+
 const systemAlert = ref({ show: false, message: '' });
 const showSystemAlert = (message) => {
   systemAlert.value = { show: true, message };
@@ -353,9 +444,121 @@ const fetchWeatherData = async () => {
   }
 };
 
+const BOARD_PAGE_SIZE = 20;
+
+const board = ref({ loading: false, error: null, loaded: false, posts: [], page: 0, hasMore: false });
+const boardSources = ref([]);
+const activeBoardKey = ref('');
+const postDetail = ref({ show: false, post: null });
+
+const boardAuthHeaders = () => ({ Authorization: `Bearer ${authToken.value}` });
+
+const mapScrapedPost = (row) => ({
+  id: row.id,
+  source: row.boardKey,
+  sourceLabel: `${row.siteName} · ${row.boardName}`,
+  title: row.title || '(제목 없음)',
+  url: row.link || null,
+  author: row.author || '',
+  createdAt: row.postedAt || '',
+  views: row.viewCount ?? null,
+  likes: row.likeCount ?? null,
+  content: row.content || '',
+  images: Array.isArray(row.imageUrls) ? row.imageUrls : []
+});
+
+const fetchBoardMeta = async () => {
+  try {
+    const apiBaseUrl = import.meta.env.VITE_API_URL || '';
+    const res = await axios.get(`${apiBaseUrl}/api/scraped-posts/boards`, {
+      withCredentials: true,
+      headers: boardAuthHeaders()
+    });
+    boardSources.value = res.data || [];
+  } catch (err) {
+    console.error("게시판 목록 로드 실패:", err);
+  }
+};
+
+const fetchBoardPosts = async (reset) => {
+  if (reset) {
+    board.value.page = 0;
+    board.value.posts = [];
+  }
+  board.value.loading = true;
+  board.value.error = null;
+  try {
+    const apiBaseUrl = import.meta.env.VITE_API_URL || '';
+    const res = await axios.get(`${apiBaseUrl}/api/scraped-posts`, {
+      params: {
+        board: activeBoardKey.value || undefined,
+        page: board.value.page,
+        size: BOARD_PAGE_SIZE
+      },
+      withCredentials: true,
+      headers: boardAuthHeaders()
+    });
+    const rows = (res.data && res.data.content) || [];
+    const mapped = rows.map(mapScrapedPost);
+    board.value.posts = reset ? mapped : board.value.posts.concat(mapped);
+    board.value.hasMore = res.data.last === false;
+    board.value.loaded = true;
+  } catch (err) {
+    console.error("게시판 데이터 로드 실패:", err);
+    board.value.error = err?.response?.status === 401 || err?.response?.status === 403 ? 'auth' : 'network';
+  } finally {
+    board.value.loading = false;
+  }
+};
+
+const selectBoardSource = (boardKey) => {
+  if (activeBoardKey.value === boardKey) return;
+  activeBoardKey.value = boardKey;
+  fetchBoardPosts(true);
+};
+
+const loadMoreBoardPosts = () => {
+  board.value.page += 1;
+  fetchBoardPosts(false);
+};
+
+const openPostDetail = async (post) => {
+  postDetail.value = { show: true, post };
+
+  try {
+    const apiBaseUrl = import.meta.env.VITE_API_URL || '';
+    await axios.post(`${apiBaseUrl}/api/scraped-posts/${post.id}/view`, null, {
+      withCredentials: true,
+      headers: boardAuthHeaders()
+    });
+    board.value.posts = board.value.posts.filter((p) => p.id !== post.id);
+  } catch (err) {
+    console.error("게시물 조회 처리 실패:", err);
+  }
+};
+
+const closePostDetail = () => {
+  postDetail.value.show = false;
+};
+
+watch(activeMenu, (id) => {
+  if (id !== 'board') return;
+
+  if (!authToken.value) {
+    board.value.error = 'auth';
+    return;
+  }
+
+  if (!board.value.loaded && !board.value.loading) {
+    fetchBoardMeta();
+    fetchBoardPosts(true);
+  }
+});
+
 const menuItems = [
   { id: 'main', name: 'HOME' },
   { id: 'youtube', name: 'YOUTUBE' },
+  { id: 'board', name: 'BOARD' },
   // { id: 'project', name: 'PROJECT' },
   { id: 'about', name: 'ABOUT' },
   { id: 'contact', name: 'CONTACT' }
@@ -574,7 +777,12 @@ const handleLoginSubmit = async () => {
 };
 
 onMounted(() => {
-  runBootSequence();
+  if (shouldShowBootLog()) {
+    runBootSequence();
+    markBootLogShown();
+  } else {
+    isBooting.value = false;
+  }
 
   fetchVideos();
   fetchAnalyticsData();