From 9581c89f28aea6cf7df91808c20c8287a43d6e02 Mon Sep 17 00:00:00 2001
From: "sungjin.choi" <headporter81@gmail.com>
Date: Fri, 29 May 2026 00:44:37 +0900
Subject: [PATCH] fix : main banner modify

---
 src/components/TuiProgressBar.vue | 382 +++++-------------------------
 1 file changed, 65 insertions(+), 317 deletions(-)

diff --git a/src/components/TuiProgressBar.vue b/src/components/TuiProgressBar.vue
index 0f727d4..ec8a798 100644
--- a/src/components/TuiProgressBar.vue
+++ b/src/components/TuiProgressBar.vue
@@ -3,35 +3,31 @@ import { computed } from 'vue';
 
 // [Props 정의]
 const props = defineProps({
-  // 현재 진행 값
   progress: {
     type: Number,
     required: true,
     default: 0
   },
-  // 총량
   total: {
     type: Number,
     default: 100
   },
-  // 하단에 표시할 상태 메시지
   status: {
     type: String,
     default: 'Initializing...'
   },
-  // 막대의 총 글자 길이
   barLength: {
     type: Number,
     default: 30
   },
-  // 로그인한 유저 ID (Main.vue로부터 유기적 동기화)
+  // 로그인 유저 연동 ID 기능은 안전하게 유지
   username: {
     type: String,
     default: 'anonymous'
   }
 });
 
-// [핵심 로직: Computed로 실시간 계산]
+// [진행률 및 바 문자열 계산식]
 const percentage = computed(() => {
   if (props.total <= 0) return 0;
   const percent = (props.progress / props.total) * 100;
@@ -70,328 +66,80 @@ const barString = computed(() => {
   </div>
 </template>
 
-<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,
-.theme-selector,
-:deep(.terminal),
-:deep(.terminal span) {
-  font-family: 'JetBrains Mono', monospace !important;
-}
-
-/* 🌟 [테마 컬러 변수 마스터 선언] */
-.theme-green {
-  --tui-color: #00ff00;
-  --tui-dim: #008800;
-  --tui-glow: rgba(0, 255, 0, 0.6);
-  --tui-border: rgba(0, 255, 0, 0.2);
-}
-.theme-amber {
-  --tui-color: #ffb000;
-  --tui-dim: #aa6600;
-  --tui-glow: rgba(255, 176, 0, 0.6);
-  --tui-border: rgba(255, 176, 0, 0.2);
-}
-.theme-vga {
-  --tui-color: #e2e8f0;
-  --tui-dim: #718096;
-  --tui-glow: rgba(226, 232, 240, 0.4);
-  --tui-border: rgba(226, 232, 240, 0.2);
-}
-.theme-ega {
-  --tui-color: #00ffff;
-  --tui-dim: #008b8b;
-  --tui-glow: rgba(0, 255, 255, 0.6);
-  --tui-border: rgba(0, 255, 255, 0.2);
-}
-</style>
-
 <style scoped>
-:deep(.terminal), :deep(.terminal span) {
-  --color: var(--tui-color) !important;
-  text-shadow: 0 0 5px var(--tui-glow) !important;
-}
-
-.homepage-wrapper {
-  background-color: #050505;
-  color: var(--tui-color);
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.theme-selector {
-  background: #111;
-  border: 1px solid var(--tui-border);
-  color: var(--tui-color);
-  font-size: 11px;
-  padding: 3px 6px;
-  outline: none;
-  cursor: pointer;
-  transition: 0.3s;
-  box-shadow: 0 0 4px var(--tui-border);
-}
-.theme-selector:hover {
-  border-color: var(--tui-color);
-  box-shadow: 0 0 8px var(--tui-glow);
-}
-
-/* --- GNB --- */
-.auth-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px 40px;
-  background: #000;
-  border-bottom: 1px solid var(--tui-border);
-}
-.nav-left { display: flex; align-items: center; gap: 15px; }
-.nav-menu { display: flex; gap: 20px; }
-.menu-btn {
-  background: none; border: none; color: var(--tui-dim);
-  font-size: 16px; cursor: pointer;
-  transition: 0.3s;
-}
-.menu-btn:hover, .menu-btn.active { color: var(--tui-color); text-shadow: 0 0 10px var(--tui-color); }
-
-.auth-group { display: flex; align-items: center; }
-
-.nav-item {
-  color: var(--tui-color) !important;
-  text-decoration: none;
-  background: none;
-  border: 1px solid var(--tui-color) !important;
-  padding: 6px 18px;
-  margin-left: 10px;
-  cursor: pointer;
-  font-size: 13px;
-  box-shadow: 0 0 5px var(--tui-border);
-  transition: 0.3s;
-}
-.nav-item:hover, .nav-item.active-auth {
-  background: var(--tui-border) !important;
-  color: var(--tui-color) !important;
-  box-shadow: 0 0 10px var(--tui-color);
-}
-.user-info { color: var(--tui-dim) !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: var(--tui-color); box-shadow: 0 0 8px var(--tui-color); }
-
-/* --- 컨텐츠 영역 --- */
-.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 var(--tui-border); padding-bottom: 10px; margin-bottom: 20px; color: var(--tui-color);}
-
-.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: inherit;
-  font-size: 14px;
-  line-height: 1.2;
-  border: none;
-  background: transparent;
-  transform-origin: center;
-  opacity: 1;
-
-  /* 클래스 지시문에는 !important 가능 */
-  animation: once-cyber-glitch-wobble 2.5s linear 1 forwards !important;
-}
-
-:deep(.bg-block) {
-  color: #050505 !important;
-  text-shadow: none !important;
-}
-
-/* 📺 유튜브 그리드 레이아웃 */
-#videos-container {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  padding: 10px 20px;
-  max-width: 1300px;
-  margin: 0 auto;
-  width: 100%;
+/* 🟢 어떤 기기나 테마에서도 절대 깨지지 않는 무적의 오리지널 고정 녹색 인프라 세팅 */
+.tui-window {
+  background-color: #000000 !important;
+  color: #00ff00 !important;
+  font-family: 'JetBrains Mono', monospace !important;
+  padding: 20px !important;
+  border-radius: 4px !important;
+  border: 1px solid #00ff00 !important;
+  box-shadow: 0 0 15px rgba(0, 255, 0, 0.3) !important;
+  display: inline-block;
+  min-width: 520px;
   box-sizing: border-box;
 }
-.video-card {
-  width: 100%;
-  background: #000;
-  padding: 10px;
-  border: 1px solid var(--tui-border);
-  position: relative;
-  cursor: pointer;
-  transition: 0.3s;
-}
-.video-card:hover { border-color: var(--tui-color); box-shadow: 0 0 10px var(--tui-border); }
-.video-title { color: var(--tui-dim); 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 var(--tui-color); padding: 35px;
-  background: #020a02; box-shadow: 0 0 15px var(--tui-border);
+.tui-header {
+  color: #008800 !important;
+  margin-bottom: 15px !important;
+  font-size: 14px !important;
 }
-.login-gate-title { color: var(--tui-color); font-size: 20px; margin-bottom: 10px; font-weight: bold;}
-.login-gate-desc { color: var(--tui-dim); 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 var(--tui-dim); padding-bottom: 5px; }
-.login-label { width: 120px; color: var(--tui-color); font-weight: bold; font-size: 14px; }
-.login-input {
-  flex: 1; background: none; border: none; color: var(--tui-color);
-  font-size: 15px; outline: none;
-}
-.login-submit-btn {
-  margin-top: 15px; background: none; border: 1px solid var(--tui-color);
-  color: var(--tui-color); padding: 12px;
-  font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.3s;
-}
-.login-submit-btn:hover { background: var(--tui-color); color: #000; box-shadow: 0 0 15px var(--tui-color); }
 
-/* 프로젝트 리스트 */
-.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
-.project-item { border: 1px solid var(--tui-border); padding: 15px; background: #080808; }
-.item-header { font-weight: bold; margin-bottom: 10px; color: var(--tui-color); }
-.about-text { line-height: 2; color: var(--tui-dim);}
-.contact-form { line-height: 2; color: var(--tui-dim);}
-
-/* 애니메이션 트랜지션 */
-.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;
+.tui-cmd {
+  color: #ffffff !important;
+  margin-left: 5px !important;
 }
-.monitor-header { background: #151515; padding: 5px 15px; color: #555; display: flex; justify-content: space-between; font-size: 12px;}
-.monitor-status { color: var(--tui-dim); 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; }
 
-/* 📱 반응형 분기점 */
-@media screen and (max-width: 1100px) {
-  #videos-container { grid-template-columns: repeat(2, 1fr); }
-  .project-grid { grid-template-columns: repeat(2, 1fr); }
+.tui-bar-row {
+  font-size: 20px !important;
+  letter-spacing: 1px !important;
+  white-space: pre !important;
+  display: flex !important;
+  align-items: center !important;
 }
+
+.tui-bracket {
+  color: #008800 !important;
+}
+
+.tui-bar {
+  color: #00ff00 !important;
+  text-shadow: 0 0 5px rgba(0, 255, 0, 0.6) !important;
+}
+
+.tui-percent {
+  color: #ffffff !important;
+  margin-left: 12px !important;
+  font-weight: bold !important;
+}
+
+.tui-status-row {
+  margin-top: 15px !important;
+  font-size: 14px !important;
+  border-top: 1px dotted rgba(0, 255, 0, 0.2) !important;
+  padding-top: 10px !important;
+}
+
+.tui-label {
+  color: #008800 !important;
+  margin-right: 8px !important;
+}
+
+.tui-message {
+  color: #ffffff !important;
+  word-break: break-all !important;
+}
+
+/* 📱 모바일 환경 최적화 다운사이징 */
 @media screen and (max-width: 650px) {
-  #videos-container { grid-template-columns: 1fr; }
-  .project-grid { grid-template-columns: 1fr; }
-
-  .auth-nav {
-    flex-direction: column;
-    gap: 15px;
-    padding: 15px 20px;
-    align-items: center;
+  .tui-window {
+    min-width: 90vw !important;
+    padding: 15px !important;
   }
-  .nav-menu {
-    display: flex;
-    gap: 12px 16px;
-    flex-wrap: wrap;
-    justify-content: center;
-    width: 100%;
+  .tui-bar-row {
+    font-size: 14px !important;
   }
-  .menu-btn { font-size: 14px; }
-  .auth-group { width: 100%; justify-content: center; margin-top: 5px; }
-  .nav-item { margin: 0 6px; }
-
-  .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;
-  }
-
-  .crt-monitor-frame {
-    height: 180px !important;
-    margin: 10px 15px 15px !important;
-  }
-  .monitor-header { padding: 4px 10px; font-size: 10px; }
-}
-@keyframes blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
-
-/* 🟢 [★완벽 교정] 내부에 있던 유해한 !important 구문들을 완전 제거하여 표준 렌더링 활성화 */
-@keyframes once-cyber-glitch-wobble {
-  0%, 25% { transform: translate(0) scale(1) skewX(0deg); text-shadow: 0 0 8px var(--tui-glow); opacity: 1; }
-  26% { transform: translate(-3px, 1.5px) scale(1.02); color: #ffffff; text-shadow: 2px 0 #ff0000, -2px 0 #0000ff; }
-  27% { transform: translate(3px, -1.5px) skewX(-2deg); color: inherit; }
-  28% { transform: translate(-5px, 0) skewX(10deg); color: #ff00ff; text-shadow: -3px 0 magenta, 3px 0 cyan;}
-  29% { transform: translate(5px, 0) skewX(-10deg); color: #00ffff; text-shadow: 3px 0 magenta, -3px 0 cyan;}
-  30% { transform: translate(0); text-shadow: 0 0 15px var(--tui-color);}
-  31%, 50% { transform: translate(0); text-shadow: 0 0 8px var(--tui-glow); }
-  51% { transform: scale(1.05) skewY(1deg); color: #ffffff; opacity: 0.05; }
-  53% { opacity: 1; transform: translate(0); text-shadow: 0 0 20px var(--tui-color), 0 0 40px var(--tui-glow); }
-  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); text-shadow: 0 0 20px var(--tui-color); }
-  100% { transform: translate(0) scale(1) skewX(0deg); text-shadow: 0 0 15px var(--tui-color), 0 0 30px var(--tui-glow); opacity: 1; }
 }
 </style>
\ No newline at end of file