specialsource-homepage-frontend/src/views/Main.vue

<template>
  <div class="homepage-wrapper">
    <nav class="auth-nav">
      <div class="nav-left">
        <span class="status-dot" :class="{ 'secure-mode': isLoggedIn }"></span>
        <span class="brand">SPECIALSOURCE.SYSTEM</span>
      </div>

      <div class="nav-menu">
        <button
            v-for="item in menuItems"
            :key="item.id"
            @click="changeMenu(item.id)"
            :class="['menu-btn', { active: activeMenu === item.id }]"
        >
          {{ item.name }}
        </button>
      </div>

      <div class="nav-right">
        <div v-if="!isLoggedIn" class="auth-group">
          <button @click="changeMenu('login')" :class="['nav-item', { 'active-auth': activeMenu === 'login' }]">LOGIN</button>
          <button @click="handleRegister" class="nav-item btn-reg">SIGN UP</button>
        </div>
        <div v-else class="auth-group">
          <span class="user-info">ACCESS GRANTED: ADMIN</span>
          <button @click="handleLogout" class="nav-item btn-logout">LOGOUT</button>
        </div>
      </div>
    </nav>

    <main class="content-area">
      <transition name="fade" mode="out-in">

        <div v-if="activeMenu === 'main'" class="sub-page main-page" key="main">
          <div class="ascii-container">
            <pre class="ascii-art" v-html="formattedAscii"></pre>
          </div>
        </div>

        <div v-else-if="activeMenu === 'youtube'" id="videos-container" key="youtube">
          <div
              v-for="(video, index) in videos"
              :key="video.id.videoId"
              class="video-card"
              :class="{ 'new-item': index === 0 }"
              @click="openVideo(video.id.videoId)"
          >
            <iframe
                :src="`https://www.youtube-nocookie.com/embed/${video.id.videoId}`"
                frameborder="0"
                allowfullscreen
            ></iframe>
            <h5 class="video-title">{{ video.snippet.title }}</h5>
          </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>
            <p class="login-gate-desc">WARNING: UNAUTHORIZED ACCESS IS STRICTLY PROHIBITED BY COMPLIANCE LAW.</p>

            <div class="login-form-form">
              <div class="login-input-group">
                <label class="login-label">ACCESS ID_</label>
                <input
                    v-model="loginId"
                    type="text"
                    class="login-input"
                    placeholder="ENTER ACCESS ID"
                    @keyup.enter="handleLoginSubmit"
                />
              </div>
              <div class="login-input-group">
                <label class="login-label">ACCESS KEY_</label>
                <input
                    v-model="loginPw"
                    type="password"
                    class="login-input"
                    placeholder="ENTER ENCRYPTION KEY"
                    @keyup.enter="handleLoginSubmit"
                />
              </div>
              <button @click="handleLoginSubmit" class="login-submit-btn">
                [ INITIALIZE DECRYPT & ACCESS ]
              </button>
            </div>
          </div>
        </div>

        <div v-else-if="activeMenu === 'project'" class="sub-page project-page" key="project">
          <h2 class="page-title">> EXECUTING PROJECTS_LOG.EXE</h2>
          <div class="project-grid">
            <div class="project-item" v-for="i in 3" :key="i">
              <div class="item-header">PROJ_00{{i}}</div>
              <p>스페셜소스 자동 배포 시스템 고도화 프로젝트 진행 중...</p>
              <div class="status">STATUS: COMPLETED</div>
            </div>
          </div>
        </div>

        <div v-else-if="activeMenu === 'about'" class="sub-page about-page" key="about">
          <h2 class="page-title">> ACCESSING CORE_IDENTITY.DAT</h2>
          <p class="about-text">
            스페셜소스는 2021년 설립된 기술 중심의 컴퍼니입니다.<br>
            우리는 인프라 자동화와 효율적인 배포 파이프라인을 구축하여<br>
            개발자가 비즈니스 로직에만 집중할 수 있는 환경을 만듭니다.
          </p>
        </div>

        <div v-else-if="activeMenu === 'contact'" class="sub-page contact-page" key="contact">
          <h2 class="page-title">> INITIALIZING ENCRYPTED_COMM.INK</h2>
          <div class="contact-form">
            <p>EMAIL: specialsource.company@gmail.com</p>
            <p>LOCATION: SEOUL, SOUTH KOREA</p>
          </div>
        </div>
      </transition>
    </main>

    <div class="crt-monitor-frame">
      <div class="monitor-header">
        <span class="monitor-title">📟 SECURE TERMINAL CONSOLE V3.2 [ROOT/{{ activeMenu.toUpperCase() }}]</span>
        <span class="monitor-status">ACTIVE</span>
      </div>
      <div class="crt-screen-overlay">
        <div ref="terminalRef" class="terminal-box"></div>
      </div>
    </div>

    <transition name="fade">
      <div v-if="isProcessing" class="tui-global-overlay">
        <TuiProgressBar :progress="overlayProgress" :status="overlayStatus" />
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import TuiProgressBar from '@/components/TuiProgressBar.vue';

const videos = ref([]);
const terminalRef = ref(null);
const termInstance = ref(null);

const loginId = ref('');
const loginPw = ref('');

const activeMenu = ref('main');
const authToken = ref(localStorage.getItem('token'));

const isProcessing = ref(false);
const overlayProgress = ref(0);
const overlayStatus = ref('');

const menuItems = [
  { id: 'main', name: 'HOME' },
  { id: 'youtube', name: 'YOUTUBE' },
  { id: 'project', name: 'PROJECT' },
  { id: 'about', name: 'ABOUT' },
  { id: 'contact', name: 'CONTACT' }
];

const isLoggedIn = computed(() => !!authToken.value);

// 🟢 [★변경] 원래 배너 문자열을 스크립트 단으로 격리
const rawAscii = `
███████╗██████╗ ███████╗ ██████╗██╗ █████╗ ██╗
██╔════╝██╔══██╗██╔════╝██╔════╝██║██╔══██╗██║
███████╗██████╔╝█████╗  ██║     ██║███████║██║
╚════██║██╔═══╝ ██╔══╝  ██║     ██║██╔══██║██║
███████║██║     ███████╗╚██████╗██║██║  ██║███████╗
╚══════╝╚═╝     ╚══════╝ ╚═════╝╚═╝╚═╝  ╚═╝╚══════╝
███████╗██████╗  ██╗   ██╗██████╗  ██████╗███████╗
██╔════╝██╔═══██╗██║   ██║██╔══██╗██╔════╝██╔════╝
███████╗██║   ██║██║   ██║██████╔╝██║     █████╗
╚════██║██║   ██║██║   ██║██╔══██╗██║     ██╔══╝
███████║╚██████╔╝╚██████╔╝██║  ██║╚██████╗███████╗
╚══════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝ ╚═════╝╚══════╝
 ██████╗ ██████╗ ███╗   ███╗██████╗  █████╗ ███╗   ██╗██╗   ██╗
██╔════╝██╔═══██╗████╗ ████║██╔══██╗██╔══██╗████╗  ██║╚██╗ ██╔╝
██║     ██║   ██║██╔████╔██║██████╔╝███████║██╔██╗ ██║ ╚████╔╝
██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██╔══██║██║╚██╗██║  ╚██╔╝
╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ██║  ██║██║ ╚████║   ██║
 ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝`;

// 🟢 [★추가] 유저님의 아이디어를 100% 수렴한 치트키 필터
// 공백(' ')을 동일한 물리 폭을 가진 블록 문자('█')로 바꾸고 클래스를 먹여 검은색 처리합니다.
const formattedAscii = computed(() => {
  return rawAscii.replace(/ /g, '<span class="bg-block">█</span>');
});

const changeMenu = (id) => {
  if (activeMenu.value === id) return;

  isProcessing.value = true;
  overlayProgress.value = 0;
  overlayStatus.value = `INITIALIZING ROUTE ACCESS: /${id.toUpperCase()}...`;

  if (termInstance.value) {
    termInstance.value.echo(`\n[[b;green;]>] NAVIGATING TO /${id.toUpperCase()}... INITIALIZING PIPELINE.`);
  }

  const interval = setInterval(() => {
    overlayProgress.value += 5;

    if (overlayProgress.value === 25) {
      overlayStatus.value = `ALLOCATING MEMORY BUFFER FOR VUE_COMPONENT...`;
    }
    if (overlayProgress.value === 55) {
      overlayStatus.value = `DECRYPTING INTERFACE LOGS & SECURE ASSETS...`;
    }
    if (overlayProgress.value === 85) {
      activeMenu.value = id;
      overlayStatus.value = `MOUNTING VIRTUAL DOM TREE... SUCCESS.`;
    }

    if (overlayProgress.value >= 100) {
      clearInterval(interval);

      if (termInstance.value) {
        termInstance.value.echo(`[[b;green;][SUCCESS]] COMPONENT LOADED PERFECTLY.`);
      }

      setTimeout(() => {
        isProcessing.value = false;
      }, 120);
    }
  }, 20);
};

const triggerOverlayProcess = (durationMs, initialMsg) => {
  isProcessing.value = true;
  overlayProgress.value = 0;
  overlayStatus.value = initialMsg;

  const steps = 20;
  const stepTime = durationMs / steps;

  const interval = setInterval(() => {
    if (overlayProgress.value >= 100) {
      clearInterval(interval);
      setTimeout(() => {
        isProcessing.value = false;
      }, 150);
      return;
    }
    overlayProgress.value += (100 / steps);
  }, stepTime);
};

const apiKey = 'AIzaSyD51LHwqoY8spjq6rsY_RlhBXzb96j7D6o';
const channelId = 'UC8L92ju0V88s6TcmLPb8Bkg';
const maxResults = 8;
const apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${channelId}&maxResults=${maxResults}&order=date&type=video&key=${apiKey}`;

const fetchVideos = async () => {
  try {
    const res = await axios.get(apiUrl);
    videos.value = res.data.items || [];
  } catch (err) { console.error("유튜브 로드 실패:", err); }
};

const openVideo = (id) => window.open(`https://www.youtube.com/watch?v=${id}`);
const handleRegister = () => alert("회원가입은 현재 관리자 승인제로 운영됩니다.");

const handleLogout = () => {
  localStorage.removeItem('token');
  authToken.value = null;
  activeMenu.value = 'main';
  if (termInstance.value) {
    termInstance.value.echo(`\n[[b;red;][ALERT]] SESSION TERMINATED. USER LOGGED OUT.`);
  }
};

const handleLoginSubmit = async () => {
  if (!loginId.value || !loginPw.value) {
    alert("아이디와 비밀번호를 모두 입력해 주세요.");
    return;
  }

  isProcessing.value = true;
  overlayProgress.value = 10;
  overlayStatus.value = 'Transmitting encryption keys to gateway...';

  if (termInstance.value) {
    termInstance.value.echo(`\n[SYS] INITIALIZING SECURITY GATEWAY CONNECTION...`);
    termInstance.value.echo(`[SYS] TRANSMITTING CREDENTIALS [USER: ${loginId.value}]`);
  }

  try {
    const apiBaseUrl = import.meta.env.VITE_API_URL || '';

    overlayProgress.value = 40;
    overlayStatus.value = 'Validating query signature against PostgreSQL DB...';

    const response = await axios.post(`${apiBaseUrl}/api/login`, {
      username: loginId.value,
      password: loginPw.value
    }, {
      withCredentials: true
    });

    if (response.data && response.data.token) {
      overlayProgress.value = 85;
      overlayStatus.value = 'Access Granted. Generating JWT Session token...';

      localStorage.setItem('token', response.data.token);
      authToken.value = response.data.token;

      if (termInstance.value) {
        termInstance.value.echo(`[[b;green;][SUCCESS]] ACCESS GRANTED. CREDENTIALS VERIFIED.`);
      }

      overlayProgress.value = 100;
      overlayStatus.value = 'Session injection complete.';

      setTimeout(() => {
        isProcessing.value = false;
        loginId.value = '';
        loginPw.value = '';
        activeMenu.value = 'main';
      }, 400);
    }
  } catch (error) {
    console.error("로그인 실패:", error);
    isProcessing.value = false;

    if (termInstance.value) {
      termInstance.value.echo(`[[b;red;][CRITICAL ERROR]] ACCESS DENIED! INVALID ACCESS KEY.`);
    }
    alert("인증에 실패했습니다. 액세스 키를 확인하세요.");
  }
};

onMounted(() => {
  fetchVideos();

  const globaljQuery = window.$;
  if (globaljQuery && terminalRef.value) {
    termInstance.value = globaljQuery(terminalRef.value).terminal({
      'hello': function () { this.echo('Hello, Welcome to Specialsource.company'); },
      'help': function () {
        this.echo(`- hello          : Say hello\n- specialsource  : Core info\n- email          : Contact\n- clear          : Clear console`);
      },
      'specialsource': function () { this.echo('SPECIALSOURCE Established 2021.01.'); },
      'email': function () { this.echo('specialsource.company@gmail.com'); },
    }, {
      greetings: `[SYSTEM V3.2] INTERFACE ONLINE. TYPE 'help' FOR COMMANDS.`,
      prompt: 'admin@specialsource:~$ '
    });
  }
});
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap');

.homepage-wrapper,
.menu-btn,
.nav-item,
.terminal-box,
.tui-global-overlay,
.login-terminal-frame,
.project-item,
.about-text,
.contact-form,
:deep(.terminal),
:deep(.terminal span) {
  font-family: 'JetBrains Mono', monospace !important;
}
</style>

<style scoped>
.homepage-wrapper {
  background-color: #050505;
  color: #00ff00;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- GNB --- */
.auth-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background: #000;
  border-bottom: 1px solid rgba(0, 255, 0, 0.2);
}
.nav-menu { display: flex; gap: 20px; }
.menu-btn {
  background: none; border: none; color: #008800;
  font-size: 16px; cursor: pointer;
  transition: 0.3s;
}
.menu-btn:hover, .menu-btn.active { color: #00ff00; text-shadow: 0 0 10px #00ff00; }

.auth-group { display: flex; align-items: center; }

.nav-item {
  color: #00ff00 !important;
  text-decoration: none;
  background: none;
  border: 1px solid #00ff00 !important;
  padding: 6px 18px;
  margin-left: 10px;
  cursor: pointer;
  font-size: 13px;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
  transition: 0.3s;
}
.nav-item:hover, .nav-item.active-auth {
  background: rgba(0, 255, 0, 0.2) !important;
  color: #00ff00 !important;
  box-shadow: 0 0 10px #00ff00;
}
.user-info { color: #008800 !important; font-size: 12px; margin-right: 15px; letter-spacing: 1px;}
.status-dot { width: 8px; height: 8px; background: #ff3b3b; border-radius: 50%; box-shadow: 0 0 8px #ff3b3b; transition: 0.5s; }
.status-dot.secure-mode { background: #00ff00; box-shadow: 0 0 8px #00ff00; }

/* --- 컨텐츠 영역 --- */
.content-area {
  flex: 1; padding: 20px; min-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sub-page { max-width: 1000px; margin: 0 auto; padding-top: 15px; width: 100%; }
.page-title { border-bottom: 1px solid #113311; padding-bottom: 10px; margin-bottom: 20px; color: #00ff00;}

/* 메인 홈 아스키 전광판 레이아웃 */
.main-page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: relative;
}

.tui-global-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
}

.ascii-container {
  width: 100%;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
.ascii-art {
  font-weight: bold;
  white-space: pre;
  display: block;
  margin: 0 auto;
  width: max-content;

  color: #00ff00 !important;
  font-size: 14px;
  line-height: 1.2;
  border: none;
  background: transparent;
  transform-origin: center;
  opacity: 1;

  animation: once-cyber-glitch-wobble 2.5s linear 1 forwards !important;
}

/* 🟢 [★추가] 공백 치환용 백그라운드 클로킹 블록 CSS */
:deep(.bg-block) {
  color: #050505 !important;       /* 홈페이지 본체 배경색인 완벽한 검은색(#050505) 처리 */
  text-shadow: none !important;    /* 부모 글리치 레이어의 빛 번짐(Glow) 차단 */
}

/* 📺 유튜브 그리드 레이아웃 */
#videos-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 10px 20px;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.video-card {
  width: 100%;
  background: #000;
  padding: 10px;
  border: 1px solid #113311;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}
.video-card:hover { border-color: #00ff00; box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); }
.video-title { color: #00aa00; margin-top: 10px; font-size: 14px; height: 40px; overflow: hidden; font-family: sans-serif; }
iframe { width: 100%; height: 180px; border-radius: 4px; }

/* 보안 로그인 프레임 */
.login-terminal-frame {
  max-width: 550px; margin: 40px auto;
  border: 1px dashed #00ff00; padding: 35px;
  background: #020a02; box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
}
.login-gate-title { color: #00ff00; font-size: 20px; margin-bottom: 10px; font-weight: bold;}
.login-gate-desc { color: #008800; font-size: 12px; margin-bottom: 30px; line-height: 1.4; }
.login-form-form { display: flex; flex-direction: column; gap: 20px; }
.login-input-group { display: flex; align-items: center; border-bottom: 1px solid #005500; padding-bottom: 5px; }
.login-label { width: 120px; color: #00ff00; font-weight: bold; font-size: 14px; }
.login-input {
  flex: 1; background: none; border: none; color: #00ff00;
  font-size: 15px; outline: none;
}
.login-submit-btn {
  margin-top: 15px; background: none; border: 1px solid #00ff00;
  color: #00ff00; padding: 12px;
  font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.3s;
}
.login-submit-btn:hover { background: #00ff00; color: #000; box-shadow: 0 0 15px #00ff00; }

/* 프로젝트 리스트 */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.project-item { border: 1px solid #113311; padding: 15px; background: #080808; }
.item-header { font-weight: bold; margin-bottom: 10px; color: #00ff00; }
.about-text { line-height: 2; color: #00cc00;}
.contact-form { line-height: 2; color: #00cc00;}

/* 애니메이션 트랜지션 */
.fade-enter-active, .fade-leave-active { transition: opacity 0.25s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* 하단 CRT 터미널 */
.crt-monitor-frame {
  height: 300px; margin: 10px 40px 30px;
  border: 2px solid #1a1a1a; background: #0a0a0a; overflow: hidden;
}
.monitor-header { background: #151515; padding: 5px 15px; color: #555; display: flex; justify-content: space-between; font-size: 12px;}
.monitor-status { color: #00aa00; animation: blink 2s infinite; }
.crt-screen-overlay { position: relative; height: calc(100% - 30px); background: #020802; }
.crt-screen-overlay::before {
  content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2; background-size: 100% 4px, 6px 100%; pointer-events: none;
}
.terminal-box { width: 100%; height: 100%; padding: 10px; }

:deep(.terminal), :deep(.terminal span) {
  --color: #33ff33 !important;
  text-shadow: 0 0 5px rgba(51, 255, 51, 0.6) !important;
}

/* 📱 반응형 분기점 */
@media screen and (max-width: 1100px) {
  #videos-container { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 650px) {
  #videos-container { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .auth-nav { flex-direction: column; gap: 12px; padding: 15px 20px; }

  /* 쾌적한 모바일 가로 스크롤 뷰 복구 */
  .ascii-container {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 20px 10px;
    display: block;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .ascii-art {
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: pre !important;
    word-break: keep-all !important;
    width: max-content !important;
    margin: 0 !important;

    /* 모바일 크롬의 텍스트 오토-사이징 부스팅 버그 영구 무력화 */
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
    max-height: 999999px !important;
  }
}
@keyframes blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* 일회성 사이버 글리치 키프레임 */
@keyframes once-cyber-glitch-wobble {
  0%, 25% { transform: translate(0) scale(1) skewX(0deg); color: #00ff00 !important; text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important; opacity: 1; }
  26% { transform: translate(-3px, 1.5px) scale(1.02); color: #ffffff !important; text-shadow: 2px 0 #ff0000, -2px 0 #0000ff !important; }
  27% { transform: translate(3px, -1.5px) skewX(-2deg); color: #00ff00 !important; }
  28% { transform: translate(-5px, 0) skewX(10deg); color: #ff00ff !important; text-shadow: -3px 0 magenta, 3px 0 cyan;}
  29% { transform: translate(5px, 0) skewX(-10deg); color: #00ffff !important; text-shadow: 3px 0 magenta, -3px 0 cyan;}
  30% { transform: translate(0); color: #00ff00 !important; text-shadow: 0 0 15px rgba(0, 255, 0, 1) !important;}
  31%, 50% { transform: translate(0); color: #00ff00 !important; text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important;}
  51% { transform: scale(1.05) skewY(1deg); color: #ffffff !important; opacity: 0.05; }
  53% { opacity: 1; transform: translate(0); color: #00ffff !important; text-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.8) !important; }
  90% { transform: translate(-2px, 1px); text-shadow: 2px 0 red, -2px 0 blue;}
  92% { transform: translate(2px, -1px); text-shadow: -2px 0 red, 2px 0 blue;}
  95% { transform: translate(0); color: #00ffff !important; text-shadow: 0 0 20px #00ffff !important;}
  100% { transform: translate(0) scale(1) skewX(0deg); color: #00ffff !important; text-shadow: 0 0 15px #00ffff, 0 0 30px rgba(0, 255, 255, 0.7) !important; opacity: 1; }
}
</style>