b24014/baron_qa_write
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI 개선
Deploy EG-BIM QA Gateway / deploy (push) Successful in 40s
Details

Browse Source
This commit is contained in:
root
2026-09-21 18:41:24 +09:00
parent 9bbd9ed8ce
commit aa1cd8ad5c
3 changed files with 59 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles.css
+50
View File
@@ -290,6 +290,56 @@ button { cursor: pointer; }
.toast.show { opacity: 1; transform: translateY(0); }
.mobile-menu { display: none; }
/* EG-BIM Q&A list layout */
.qa-list-page { background: #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; }
.qa-list-page .filter-panel { padding: 0; margin: 0 0 40px; border: 0; background: transparent; }
.qa-list-page .filter-row { gap: 8px; flex-wrap: nowrap; }
.qa-list-page .chip-group { gap: 8px; flex: 0 0 auto; }
.qa-list-page .chip { width: 60px; height: 45px; justify-content: center; padding: 0; border-color: #ddd; border-radius: 3px; color: #222; font-size: 15px; }
.qa-list-page .chip:has(input:checked) { border-color: #e8ad00; background: #ffc400; color: #111; }
.qa-list-page .chip input { position: absolute; opacity: 0; pointer-events: none; }
.qa-list-page .check { flex: 0 0 auto; margin-left: 24px; color: #222; font-size: 14px; white-space: nowrap; }
.qa-list-page .check input { width: 16px; height: 16px; margin: 0 7px 0 0; accent-color: #222; }
.qa-list-page .filter-spacer { min-width: 18px; }
.qa-list-page .search-form { width: 450px; min-width: 450px; gap: 7px; }
.qa-list-page .search-form input { height: 45px; padding: 0 12px; border-color: #d8d8d8; color: #333; font-size: 13px; }
.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 .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; }
.qa-list-page .qa-table tbody tr:hover td { background: #ededed; }
.qa-list-page .qa-table .subject { color: #39434f; }
.qa-list-page .qa-table .subject-link { font-weight: 500; }
.qa-list-page .qa-table .category-cell { white-space: nowrap; }
.qa-list-page .qa-table .category,
.qa-list-page .qa-table .status { padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; }
.qa-list-page .qa-table .status { min-width: 0; }
.qa-list-page .qa-table .notice-row td { background: #f3f3f3; color: #3e4650; }
.qa-list-page .table-empty { background: #f3f3f3; }
.qa-list-page .list-footer { position: relative; min-height: 42px; margin-top: 25px; }
.qa-list-page .list-footer .pagination { margin: 0; }
.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 .page-shell { padding: 39px 14px 55px; }
.qa-list-heading { margin-bottom: 28px; }
.qa-list-heading h1 { font-size: 26px; }
.qa-list-page .filter-row { flex-wrap: wrap; }
.qa-list-page .check { margin-left: 8px; }
.qa-list-page .filter-spacer { display: none; }
.qa-list-page .search-form { width: 100%; min-width: 0; margin-top: 5px; }
.qa-list-page .list-footer { display: flex; min-height: 84px; flex-direction: column; align-items: stretch; gap: 18px; }
.qa-list-page .list-footer .pagination { order: 2; }
.qa-list-page .list-footer > .button { position: static; order: 1; align-self: flex-end; }
}
@media (max-width: 1100px) {
.global-nav { gap: 18px; margin-right: 20px; }
.nav-item { font-size: 14px; }
egbim/app.js
+4 -3
View File
@@ -275,11 +275,12 @@
function render() {
const query = (qs('#query').value || '').trim().toLowerCase();
const checkedCategories = qsa('input[name="category"]:checked').map(function (input) { return input.value; });
const selectedCategory = qs('input[name="category"]:checked');
const categoryFilter = selectedCategory ? selectedCategory.value : '전체';
const onlyMine = qs('#onlyMine').checked;
const user = getAuthUser();
const filtered = getPosts().filter(function (post) {
const matchesCategory = !checkedCategories.length || checkedCategories.indexOf(post.category) > -1;
const matchesCategory = categoryFilter === '전체' || categoryFilter === post.category;
const haystack = [post.title, post.content, post.company, post.department, post.author].join(' ').toLowerCase();
const matchesQuery = !query || haystack.indexOf(query) > -1;
const matchesMine = !onlyMine || (user && (post.author === user.name || post.author === user.loginId));
@@ -296,7 +297,7 @@
const number = isNotice ? '공지' : filtered.length - ((page - 1) * pageSize + index);
const statusClass = post.status === '답변완료' ? 'done' : (post.status === '문의검토' || post.status === '정밀검토' ? 'review' : '');
return '<tr class="' + (isNotice ? 'notice-row' : '') + '" data-id="' + escapeHtml(post.id) + '">' +
'<td>' + number + '</td><td><span class="category ' + (isNotice ? 'notice' : '') + '">' + escapeHtml(post.category.replace('문의', '')) + '</span></td>' +
'<td>' + number + '</td><td class="category-cell">' + escapeHtml(post.category.replace('문의', '')) + '</td>' +
'<td>' + escapeHtml(post.company) + '</td><td>' + escapeHtml(post.department) + '</td><td>' + escapeHtml(post.author) + '</td>' +
'<td class="subject"><span class="subject-link">' + (post.secret ? '<span class="lock">🔒</span>' : '') + escapeHtml(post.title) + '</span>' + (!isNotice && post.date === '2026-09-17' ? '<span class="new-mark">N</span>' : '') + '</td>' +
'<td>' + escapeHtml(post.date) + '</td><td>' + (post.status ? '<span class="status ' + statusClass + '">' + escapeHtml(post.status) + '</span>' : '-') + '</td></tr>';
egbim/index.html
+5 -8
View File
@@ -8,17 +8,14 @@
<link rel="stylesheet" href="../assets/styles.css">
</head>
<body>
<main>
<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></section>
<main class="qa-list-page">
<section class="page-shell">
<div class="section-heading"><div><h2>문의하기(Q&amp;A)</h2><p>EG-BIM 사용 중 궁금한 점과 개선 의견을 남겨주세요.</p></div><a class="button button-primary" href="write.html">문의 등록</a></div>
<div class="qa-list-heading"><h1>문의하기(Q&amp;A)</h1></div>
<form class="filter-panel" id="searchForm">
<div class="filter-row"><span class="filter-label">구분</span><div class="chip-group"><label class="chip"><input type="checkbox" name="category" value="오류문의">오류</label><label class="chip"><input type="checkbox" name="category" value="개선문의">개선</label><label class="chip"><input type="checkbox" name="category" value="일반문의">일반</label><label class="chip"><input type="checkbox" name="category" value="공지사항">공지</label></div><span class="filter-spacer"></span><label class="check"><input type="checkbox" id="onlyMine">내가 작성한 글</label></div>
<div class="filter-row"><span class="filter-label">검색</span><div class="search-form"><input id="query" type="search" placeholder="제목, 내용, 회사명으로 검색" aria-label="게시글 검색"><button class="button button-primary" type="submit">검색</button></div></div>
<div class="filter-row"><div class="chip-group"><label class="chip"><input type="radio" name="category" value="전체" checked>전체</label><label class="chip"><input type="radio" name="category" value="일반문의">일반</label><label class="chip"><input type="radio" name="category" value="개선문의">개선</label><label class="chip"><input type="radio" name="category" value="오류문의">오류</label></div><label class="check"><input type="checkbox" id="onlyMine">내가 작성한 글</label><span class="filter-spacer"></span><div class="search-form"><input id="query" type="search" placeholder="제목+내용 검색어를 입력하세요" aria-label="게시글 검색"><button class="button search-button" type="submit"><span aria-hidden="true">⌕</span> 검색</button></div></div>
</form>
<div class="table-actions"><span class="result-count" id="resultCount">총 0건</span><span class="help-text">문의 내용에 개인정보를 입력하지 마세요.</span></div>
<div class="table-wrap"><table class="qa-table"><caption class="sr-only">EG-BIM 문의 목록</caption><colgroup><col style="width:6%"><col style="width:10%"><col style="width:15%"><col style="width:12%"><col style="width:9%"><col><col style="width:12%"><col style="width:11%"></colgroup><thead><tr><th>번호</th><th>구분</th><th>회사</th><th>부서</th><th>작성자</th><th>제목</th><th>등록일</th><th>상태</th></tr></thead><tbody id="qaRows"></tbody></table><div class="table-empty" id="tableEmpty">검색 조건에 맞는 문의가 없습니다.</div></div>
<div class="pagination" id="pagination" aria-label="페이지 이동"></div>
<div class="table-wrap"><table class="qa-table"><caption class="sr-only">EG-BIM 문의 목록</caption><colgroup><col style="width:6%"><col style="width:8%"><col style="width:13%"><col style="width:11%"><col style="width:7%"><col style="width:38%"><col style="width:11%"><col style="width:6%"></colgroup><thead><tr><th>번호</th><th>구분</th><th>회사</th><th>부서</th><th>작성자</th><th>제목</th><th>등록일</th><th>상태</th></tr></thead><tbody id="qaRows"></tbody></table><div class="table-empty" id="tableEmpty">검색 조건에 맞는 문의가 없습니다.</div></div>
<div class="list-footer"><div class="pagination" id="pagination" aria-label="페이지 이동"></div><a class="button button-primary" href="write.html">문의등록</a></div>
</section>
</main>
<div id="toast" class="toast" role="status" aria-live="polite"></div>