UI 개선

assets/styles.css

@@ -292,6 +292,31 @@ button { cursor: pointer; }
 
 /* EG-BIM Q&A list layout */
 .qa-list-page { background: #fff; }
+.qa-list-page .site-header { position: absolute; top: 0; right: 0; left: 0; z-index: 10; height: 88px; border-bottom: 0; background: transparent; color: #fff; }
+.qa-list-page .header-inner { max-width: none; padding: 0 48px; }
+.qa-list-page .brand { color: #fff; font-size: 29px; letter-spacing: -.04em; }
+.qa-list-page .brand-mark { width: 38px; height: 27px; border: 0; color: #258be0; font-size: 30px; font-style: italic; }
+.qa-list-page .header-tools { gap: 24px; }
+.qa-list-page .locale { color: #fff; }
+.qa-list-page .locale span { color: rgba(255,255,255,.55); margin: 0 7px; }
+.qa-list-page .locale a { color: #fff; }
+.qa-list-page .locale a:last-child { color: rgba(255,255,255,.55); }
+.qa-list-page .login-link { color: #fff; }
+.qa-list-page .login-link [data-auth-name] { display: none; }
+.qa-list-page .user-icon { border-color: #fff; }
+.qa-list-page .user-icon::after { border-color: #fff; }
+.qa-list-page .page-hero { position: relative; display: block; min-height: 482px; height: 482px; overflow: hidden; background: radial-gradient(circle at 53% 47%, rgba(17, 129, 178, .68) 0, rgba(17, 129, 178, .2) 20%, transparent 42%), radial-gradient(circle at 13% 35%, rgba(11, 92, 133, .58) 0, transparent 28%), radial-gradient(circle at 88% 18%, rgba(23, 76, 113, .35) 0, transparent 30%), linear-gradient(115deg, #061c2a 0%, #06121c 52%, #030509 100%); }
+.qa-list-page .page-hero::before { position: absolute; inset: 0; content: ''; opacity: .22; background-image: radial-gradient(circle, rgba(255,255,255,.75) 0 2px, transparent 3px), linear-gradient(28deg, transparent 48%, rgba(137,211,239,.45) 49%, transparent 50%), linear-gradient(151deg, transparent 48%, rgba(137,211,239,.3) 49%, transparent 50%); background-position: 8% 30%, 0 0, 0 0; background-size: 170px 135px, 240px 190px, 310px 230px; }
+.qa-list-page .hero-inner { position: relative; z-index: 1; padding: 190px 24px 0; text-align: center; }
+.qa-list-page .hero-kicker { display: none; }
+.qa-list-page .page-hero h1 { margin: 0 0 4px; color: #fff; font-size: 70px; font-weight: 700; letter-spacing: -.07em; }
+.qa-list-page .page-hero p { color: #fff; font-size: 20px; font-weight: 500; }
+.qa-list-page .sub-nav { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; background: rgba(0, 10, 17, .84); }
+.qa-list-page .sub-nav-inner { max-width: 900px; }
+.qa-list-page .sub-nav a { padding: 18px 12px; color: #fff; font-size: 16px; font-weight: 700; }
+.qa-list-page .sub-nav a[aria-current='page'] { background: rgba(0, 121, 116, .5); color: #ffc400; }
+.qa-list-page .sub-nav a.disabled-tab { cursor: default; }
+.qa-list-page .sub-nav a.disabled-tab:hover { background: transparent; color: #fff; }
 .qa-list-page .page-shell { max-width: none; padding: 51px 10px 62px; }
 .qa-list-heading { margin: 0 0 40px; text-align: center; }
 .qa-list-heading h1 { margin: 0; font-size: 30px; line-height: 1.35; letter-spacing: -.06em; }
@@ -309,8 +334,8 @@ button { cursor: pointer; }
 .qa-list-page .search-form input::placeholder { color: #b7b7b7; }
 .qa-list-page .search-button { width: 88px; height: 45px; padding: 0; border-radius: 3px; background: #292621; color: #fff; font-size: 15px; font-weight: 700; }
 .qa-list-page .search-button span { margin-right: 3px; font-size: 24px; line-height: 0; vertical-align: -2px; }
-.qa-list-page .table-wrap { border-top: 2px solid #111; }
-.qa-list-page .qa-table { min-width: 980px; }
+.qa-list-page .table-wrap { overflow-x: hidden; border-top: 2px solid #111; }
+.qa-list-page .qa-table { width: 100%; min-width: 0; }
 .qa-list-page .qa-table th { height: 48px; padding: 0 10px; border-bottom: 1px solid #111; color: #111; font-size: 14px; font-weight: 700; }
 .qa-list-page .qa-table td { height: 58px; padding: 0 10px; border-bottom: 1px solid #ededed; background: #f3f3f3; color: #3e4650; font-size: 14px; font-weight: 500; }
 .qa-list-page .qa-table tbody tr:hover { background: transparent; }
@@ -328,6 +353,17 @@ button { cursor: pointer; }
 .qa-list-page .list-footer > .button { position: absolute; top: 0; right: 0; height: 42px; padding: 0 25px; background: #292621; font-size: 14px; font-weight: 700; }
 
 @media (max-width: 820px) {
+  .qa-list-page .site-header { height: 68px; }
+  .qa-list-page .header-inner { padding: 0 18px; }
+  .qa-list-page .brand { font-size: 21px; }
+  .qa-list-page .brand-mark { width: 29px; height: 22px; font-size: 23px; }
+  .qa-list-page .header-tools { gap: 12px; }
+  .qa-list-page .page-hero { min-height: 390px; height: 390px; }
+  .qa-list-page .hero-inner { padding-top: 145px; }
+  .qa-list-page .page-hero h1 { font-size: 52px; }
+  .qa-list-page .page-hero p { font-size: 16px; }
+  .qa-list-page .sub-nav-inner { max-width: none; }
+  .qa-list-page .sub-nav a { padding: 14px 10px; font-size: 14px; }
   .qa-list-page .page-shell { padding: 39px 14px 55px; }
   .qa-list-heading { margin-bottom: 28px; }
   .qa-list-heading h1 { font-size: 26px; }

egbim/app.js

@@ -8,16 +8,6 @@
   const CATEGORY_CODES = { '오류문의': 'ERROR_QNA', '개선문의': 'IMPROVEMENT_QNA', '일반문의': 'GENERAL_QNA' };
   let authReady;
 
-  const seedPosts = [
-    { id: 'EG-1048', category: '오류문의', company: '바론컨설턴트', department: '기술연구팀', author: '홍길동', title: '도면 내보내기 중 프로그램이 종료됩니다.', date: '2026-09-17', status: '문의접수', secret: false, content: '도면 내보내기 버튼을 누르면 프로그램이 종료되는 현상이 있습니다.\n재현 절차와 사용 중인 버전을 함께 확인 부탁드립니다.' },
-    { id: 'EG-1047', category: '개선문의', company: '한맥기술', department: 'BIM팀', author: '김민지', title: '층별 도면을 한 번에 선택할 수 있으면 좋겠습니다.', date: '2026-09-16', status: '문의검토', secret: false, content: '층별 도면을 일괄 선택하여 내보낼 수 있는 기능을 제안드립니다.' },
-    { id: 'EG-1046', category: '일반문의', company: '삼안', department: '설계1팀', author: '이도윤', title: 'EG-BIM 라이선스와 설치 환경을 문의드립니다.', date: '2026-09-15', status: '답변완료', secret: true, content: '설치 가능한 운영체제와 라이선스 정책을 확인하고 싶습니다.' },
-    { id: 'EG-1045', category: '오류문의', company: '바론컨설턴트', department: '디지털전환팀', author: '박서준', title: '프로젝트 파일을 열 때 로딩이 오래 걸립니다.', date: '2026-09-12', status: '정밀검토', secret: false, content: '최근 프로젝트 파일을 열 때 약 2분 이상 로딩이 지속됩니다.' },
-    { id: 'EG-1044', category: '공지사항', company: '관리자', department: '-', author: '관리자', title: 'EG-BIM Q&A 게시판 운영 안내', date: '2026-09-10', status: '', secret: false, content: 'EG-BIM 사용 중 궁금한 점이나 개선 의견을 남겨주세요.' },
-    { id: 'EG-1043', category: '개선문의', company: '한맥기술', department: '사업관리팀', author: '최유진', title: '검색 결과에서 도면 미리보기를 제공해주세요.', date: '2026-09-09', status: '문의접수', secret: false, content: '검색 결과에 도면 미리보기 썸네일이 있으면 확인이 더 편리할 것 같습니다.' },
-    { id: 'EG-1042', category: '일반문의', company: '외부 사용자', department: '-', author: '정하늘', title: '교육 자료를 어디서 확인할 수 있나요?', date: '2026-09-08', status: '답변완료', secret: false, content: 'EG-BIM 기본 교육 자료와 사용 가이드 위치를 알려주세요.' }
-  ];
-
   function qs(selector, root) { return (root || document).querySelector(selector); }
   function qsa(selector, root) { return Array.prototype.slice.call((root || document).querySelectorAll(selector)); }
   function escapeHtml(value) {
@@ -31,10 +21,7 @@
   }
 
   function getPosts() {
-    const saved = readJson(STORAGE_KEY, []);
-    return saved.concat(seedPosts.filter(function (seed) {
-      return !saved.some(function (post) { return post.id === seed.id; });
-    }));
+    return readJson(STORAGE_KEY, []).filter(function (post) { return post.category !== '공지사항'; });
   }
 
   function savePost(post) {
@@ -361,7 +348,12 @@
     const detail = qs('#detail');
     if (!detail) return;
     const id = new URLSearchParams(window.location.search).get('id') || 'EG-1048';
-    const post = getPosts().find(function (item) { return item.id === id; }) || seedPosts[0];
+    const post = getPosts().find(function (item) { return item.id === id; });
+    if (!post) {
+      qs('[data-detail-title]').textContent = '문의 내용을 찾을 수 없습니다.';
+      qs('[data-detail-content]').textContent = '목록에 등록된 문의가 없습니다.';
+      return;
+    }
     qs('[data-detail-category]').textContent = post.category;
     qs('[data-detail-title]').textContent = post.title;
     qs('[data-detail-status]').textContent = post.status || '공지';

egbim/index.html

@@ -9,6 +9,16 @@
 </head>
 <body>
   <main class="qa-list-page">
+    <header class="site-header">
+      <div class="header-inner">
+        <a class="brand" href="index.html" aria-label="EG-BIM Q&amp;A 홈"><span class="brand-mark" aria-hidden="true">e</span><span>EG-BIM</span></a>
+        <div class="header-tools"><div class="locale"><span aria-hidden="true">◎</span><a href="#" aria-current="page">KR</a><span>/</span><a href="#">EN</a></div><a class="login-link" href="/auth/login" aria-label="로그인"><span class="user-icon" aria-hidden="true"></span><span data-auth-name>로그인</span></a></div>
+      </div>
+    </header>
+    <section class="page-hero">
+      <div class="hero-inner"><span class="hero-kicker">EG-BIM SUPPORT</span><h1>Q&amp;A</h1><p>EG-BIM 관련 문의하기</p></div>
+      <nav class="sub-nav" aria-label="EG-BIM 지원 메뉴"><div class="sub-nav-inner"><a href="index.html" aria-current="page">문의하기(Q&amp;A)</a><a href="#" aria-disabled="true" class="disabled-tab">원격지원</a></div></nav>
+    </section>
     <section class="page-shell">
       <div class="qa-list-heading"><h1>문의하기(Q&amp;A)</h1></div>
       <form class="filter-panel" id="searchForm">