feat: 문의사항(Q&A) 게시판 구현 및 대시보드 활성도 분석 로직 개선
- [server.py] 문의사항 API(목록, 상세, 답변 저장/삭제) 및 라우트 추가 - [templates/inquiries.html] 문의사항 게시판 HTML 구조 구현 (Sticky 헤더, 아코디언 상세) - [js/inquiries.js] 비동기 데이터 로드, 아코디언 토글, 답변 편집 로직 구현 - [style/inquiries.css] 와이드 레이아웃, Sticky 헤더, 아코디언 및 상태 배지 스타일 적용 - [server.py, js/dashboard.js] '폴더 자동 삭제' 로그 발생 시 14일 경과 여부와 관계없이 '방치'로 분류하도록 로직 수정 - [templates/dashboard.html] 대시보드 내 문의사항 탭 활성화 및 링크 연동
This commit is contained in:
@@ -70,7 +70,7 @@ async function loadActivityAnalysis(date = "") {
|
||||
<div class="label">주의 (14일 이내)</div><div class="count">${summary.warning}</div>
|
||||
</div>
|
||||
<div class="activity-card stale" onclick="showActivityDetails('stale')">
|
||||
<div class="label">방치 (14일 초과)</div><div class="count">${summary.stale}</div>
|
||||
<div class="label">방치 (14일 초과 / 폴더자동삭제)</div><div class="count">${summary.stale}</div>
|
||||
</div>
|
||||
<div class="activity-card unknown" onclick="showActivityDetails('unknown')">
|
||||
<div class="label">데이터 없음 (파일 0개)</div><div class="count">${summary.unknown}</div>
|
||||
@@ -114,12 +114,20 @@ function createProjectHtml(p) {
|
||||
const recentLog = (!logRaw || logRaw === "X" || logRaw === "데이터 없음") ? "기록 없음" : logRaw;
|
||||
const logTime = recentLog !== "기록 없음" ? recentLog.split(',')[0] : "기록 없음";
|
||||
|
||||
// 파일이 0개 또는 NULL인 경우에만 에러(붉은색) 표시
|
||||
const statusClass = (files === 0 || files === null) ? "status-error" : "";
|
||||
// '폴더 자동 삭제' 여부 확인
|
||||
const isStaleLog = recentLog.replace(/\s/g, "").includes("폴더자동삭제");
|
||||
// 파일이 0개 또는 NULL인 경우에만 행 전체 에러(붉은색) 표시
|
||||
const isNoFiles = (files === 0 || files === null);
|
||||
const statusClass = isNoFiles ? "status-error" : "";
|
||||
|
||||
// 로그 텍스트 스타일 결정 (기록 없음 이거나 폴더자동삭제인 경우)
|
||||
const logStyleClass = (recentLog === '기록 없음' || isStaleLog) ? 'warning-text' : '';
|
||||
const logBoldStyle = isStaleLog ? 'font-weight: 800;' : '';
|
||||
|
||||
return `
|
||||
<div class="accordion-item ${statusClass}">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="repo-title" title="${name}">${name}</div><div class="repo-dept">${dept}</div><div class="repo-admin">${admin}</div><div class="repo-files ${statusClass === 'status-error' ? 'warning-text' : ''}">${files || 0}</div><div class="repo-log ${recentLog === '기록 없음' ? 'warning-text' : ''}" title="${recentLog}">${recentLog}</div>
|
||||
<div class="repo-title" title="${name}">${name}</div><div class="repo-dept">${dept}</div><div class="repo-admin">${admin}</div><div class="repo-files ${isNoFiles ? 'warning-text' : ''}">${files || 0}</div><div class="repo-log ${logStyleClass}" style="${logBoldStyle}" title="${recentLog}">${recentLog}</div>
|
||||
</div>
|
||||
<div class="accordion-body">
|
||||
<div class="detail-grid">
|
||||
|
||||
230
js/inquiries.js
Normal file
230
js/inquiries.js
Normal file
@@ -0,0 +1,230 @@
|
||||
|
||||
async function loadInquiries() {
|
||||
// Adjust sticky thead position based on header height
|
||||
const header = document.getElementById('stickyHeader');
|
||||
const thead = document.querySelector('.inquiry-table thead');
|
||||
if (header && thead) {
|
||||
const headerHeight = header.offsetHeight;
|
||||
const totalOffset = 36 + headerHeight; // topbar(36) + sticky header height
|
||||
document.querySelectorAll('.inquiry-table thead th').forEach(th => {
|
||||
th.style.top = totalOffset + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
const pmType = document.getElementById('filterPmType').value;
|
||||
const category = document.getElementById('filterCategory').value;
|
||||
const status = document.getElementById('filterStatus').value;
|
||||
const keyword = document.getElementById('searchKeyword').value;
|
||||
|
||||
const params = new URLSearchParams({
|
||||
pm_type: pmType,
|
||||
category: category,
|
||||
status: status,
|
||||
keyword: keyword
|
||||
});
|
||||
const response = await fetch(`/api/inquiries?${params}`);
|
||||
const data = await response.json();
|
||||
|
||||
const tbody = document.getElementById('inquiryList');
|
||||
tbody.innerHTML = data.map(item => `
|
||||
<tr class="inquiry-row" onclick="toggleAccordion(${item.id})">
|
||||
<td title="${item.no}">${item.no}</td>
|
||||
<td title="${item.pm_type}">${item.pm_type}</td>
|
||||
<td title="${item.browser || 'Chrome'}">${item.browser || 'Chrome'}</td>
|
||||
<td title="${item.category}">${item.category}</td>
|
||||
<td title="${item.project_nm}">${item.project_nm}</td>
|
||||
<td class="content-preview" title="${item.content}">${item.content}</td>
|
||||
<td class="content-preview" title="${item.reply || ''}" style="color: #1e5149; font-weight: 500;">${item.reply || '-'}</td>
|
||||
<td title="${item.author}">${item.author}</td>
|
||||
<td title="${item.reg_date}">${item.reg_date}</td>
|
||||
<td><span class="status-badge ${getStatusClass(item.status)}">${item.status}</span></td>
|
||||
</tr>
|
||||
<tr id="detail-${item.id}" class="detail-row">
|
||||
<td colspan="10">
|
||||
<div class="detail-container">
|
||||
<button class="btn-close-accordion" onclick="toggleAccordion(${item.id})">접기</button>
|
||||
<div class="detail-content-wrapper">
|
||||
<div class="detail-meta-grid">
|
||||
<div><span class="detail-label">작성자:</span> ${item.author}</div>
|
||||
<div><span class="detail-label">등록일:</span> ${item.reg_date}</div>
|
||||
<div><span class="detail-label">시스템:</span> ${item.pm_type}</div>
|
||||
<div><span class="detail-label">환경:</span> ${item.browser || 'Chrome'} / ${item.device || 'PC'}</div>
|
||||
</div>
|
||||
<div class="detail-q-section">
|
||||
<h4 style="margin-top:0; margin-bottom:10px; color:#1e5149;">[질문 내용]</h4>
|
||||
<div style="line-height:1.6; white-space: pre-wrap;">${item.content}</div>
|
||||
</div>
|
||||
<div class="detail-a-section">
|
||||
<h4 style="margin-top:0; margin-bottom:10px; color:#1e5149;">[조치 및 답변]</h4>
|
||||
<div id="reply-form-${item.id}" class="reply-edit-form readonly">
|
||||
<textarea id="reply-text-${item.id}" disabled placeholder="답변 내용이 없습니다.">${item.reply || ''}</textarea>
|
||||
<div style="display:flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display:flex; gap:15px; align-items:center;">
|
||||
<div class="filter-group" style="flex-direction:row; align-items:center; gap:8px;">
|
||||
<label style="margin:0;">처리상태:</label>
|
||||
<select id="reply-status-${item.id}" disabled style="padding:5px 10px;">
|
||||
<option value="완료" ${item.status === '완료' ? 'selected' : ''}>완료</option>
|
||||
<option value="작업 중" ${item.status === '작업 중' ? 'selected' : ''}>작업 중</option>
|
||||
<option value="확인 중" ${item.status === '확인 중' ? 'selected' : ''}>확인 중</option>
|
||||
<option value="개발예정" ${item.status === '개발예정' ? 'selected' : ''}>개발예정</option>
|
||||
<option value="미확인" ${item.status === '미확인' ? 'selected' : ''}>미확인</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group" style="flex-direction:row; align-items:center; gap:8px;">
|
||||
<label style="margin:0;">처리자:</label>
|
||||
<input type="text" id="reply-handler-${item.id}" disabled value="${item.handler || ''}" placeholder="이름 입력" style="padding:5px 10px; width:100px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<button class="btn-edit sync-btn" onclick="enableEdit(${item.id})" style="background:#1e5149; color:#fff; border:none;">${item.reply ? '수정하기' : '답변작성'}</button>
|
||||
<button class="btn-save sync-btn" onclick="saveReply(${item.id})" style="background:#1e5149; color:#fff; border:none;">저장</button>
|
||||
<button class="btn-delete sync-btn" onclick="deleteReply(${item.id})" style="background:#f44336; color:#fff; border:none;">삭제</button>
|
||||
<button class="btn-cancel sync-btn" onclick="cancelEdit(${item.id})" style="background:#666; color:#fff; border:none;">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
${item.handled_date ? `<div style="margin-top:10px; font-size:12px; color:#888; text-align:right;">최종 수정일: ${item.handled_date}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function enableEdit(id) {
|
||||
const form = document.getElementById(`reply-form-${id}`);
|
||||
form.classList.remove('readonly');
|
||||
form.classList.add('editable');
|
||||
|
||||
document.getElementById(`reply-text-${id}`).disabled = false;
|
||||
document.getElementById(`reply-status-${id}`).disabled = false;
|
||||
document.getElementById(`reply-handler-${id}`).disabled = false;
|
||||
document.getElementById(`reply-text-${id}`).focus();
|
||||
}
|
||||
|
||||
async function cancelEdit(id) {
|
||||
try {
|
||||
// 서버에서 해당 항목의 원래 데이터를 다시 가져옴
|
||||
const response = await fetch(`/api/inquiries/${id}`);
|
||||
const item = await response.json();
|
||||
|
||||
const form = document.getElementById(`reply-form-${id}`);
|
||||
const txt = document.getElementById(`reply-text-${id}`);
|
||||
const status = document.getElementById(`reply-status-${id}`);
|
||||
const handler = document.getElementById(`reply-handler-${id}`);
|
||||
|
||||
// 데이터 원복
|
||||
txt.value = item.reply || '';
|
||||
status.value = item.status;
|
||||
handler.value = item.handler || '';
|
||||
|
||||
// UI 상태 원복 (비활성화 및 클래스 변경)
|
||||
txt.disabled = true;
|
||||
status.disabled = true;
|
||||
handler.disabled = true;
|
||||
|
||||
form.classList.remove('editable');
|
||||
form.classList.add('readonly');
|
||||
} catch (e) {
|
||||
console.error("취소 중 오류 발생:", e);
|
||||
loadInquiries(); // 오류 시에는 전체 새로고침으로 대응
|
||||
}
|
||||
}
|
||||
|
||||
async function saveReply(id) {
|
||||
const reply = document.getElementById(`reply-text-${id}`).value;
|
||||
const status = document.getElementById(`reply-status-${id}`).value;
|
||||
const handler = document.getElementById(`reply-handler-${id}`).value;
|
||||
|
||||
if (!reply.trim()) return alert("답변 내용을 입력해 주세요.");
|
||||
if (!handler.trim()) return alert("처리자 이름을 입력해 주세요.");
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/inquiries/${id}/reply`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ reply, status, handler })
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
alert("답변이 저장되었습니다.");
|
||||
loadInquiries();
|
||||
} else {
|
||||
alert("저장에 실패했습니다: " + result.error);
|
||||
}
|
||||
} catch (e) {
|
||||
alert("오류가 발생했습니다.");
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteReply(id) {
|
||||
if (!confirm("답변을 삭제하시겠습니까? (처리 상태가 '미확인'으로 초기화됩니다.)")) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/inquiries/${id}/reply`, { method: 'DELETE' });
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
alert("답변이 삭제되었습니다.");
|
||||
loadInquiries();
|
||||
} else {
|
||||
alert("삭제에 실패했습니다: " + result.error);
|
||||
}
|
||||
} catch (e) {
|
||||
alert("오류가 발생했습니다.");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAccordion(id) {
|
||||
const detailRow = document.getElementById(`detail-${id}`);
|
||||
if (!detailRow) return;
|
||||
const inquiryRow = detailRow.previousElementSibling;
|
||||
const isActive = detailRow.classList.contains('active');
|
||||
|
||||
// Close all other active details and remove their row highlights
|
||||
document.querySelectorAll('.detail-row.active').forEach(row => {
|
||||
if (row.id !== `detail-${id}`) {
|
||||
row.classList.remove('active');
|
||||
if (row.previousElementSibling) row.previousElementSibling.classList.remove('active-row');
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current
|
||||
if (isActive) {
|
||||
detailRow.classList.remove('active');
|
||||
inquiryRow.classList.remove('active-row');
|
||||
} else {
|
||||
detailRow.classList.add('active');
|
||||
inquiryRow.classList.add('active-row');
|
||||
|
||||
// [추가] 펼쳐진 항목이 보기 편하도록 스크롤 위치 조정
|
||||
setTimeout(() => {
|
||||
const stickyHeader = document.getElementById('stickyHeader');
|
||||
const thead = document.querySelector('.inquiry-table thead');
|
||||
const topbarHeight = 36;
|
||||
const stickyHeaderHeight = stickyHeader ? stickyHeader.offsetHeight : 0;
|
||||
const theadHeight = thead ? thead.offsetHeight : 0;
|
||||
|
||||
// 모든 고정 영역의 합 (Topbar + 필터영역 + 표 헤더)
|
||||
const totalOffset = topbarHeight + stickyHeaderHeight + theadHeight;
|
||||
|
||||
const rowPosition = inquiryRow.getBoundingClientRect().top + window.pageYOffset;
|
||||
const offsetPosition = rowPosition - totalOffset;
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
if (status === '완료') return 'status-complete';
|
||||
if (status === '작업 중') return 'status-working';
|
||||
if (status === '확인 중') return 'status-checking';
|
||||
return 'status-pending';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadInquiries);
|
||||
window.addEventListener('resize', loadInquiries);
|
||||
99
server.py
99
server.py
@@ -71,6 +71,86 @@ async def get_dashboard(request: Request):
|
||||
async def get_mail_test(request: Request):
|
||||
return templates.TemplateResponse("mailTest.html", {"request": request})
|
||||
|
||||
@app.get("/inquiries")
|
||||
async def get_inquiries_page(request: Request):
|
||||
return templates.TemplateResponse("inquiries.html", {"request": request})
|
||||
|
||||
class InquiryReplyRequest(BaseModel):
|
||||
reply: str
|
||||
status: str
|
||||
handler: str
|
||||
|
||||
# --- 문의사항 API ---
|
||||
@app.get("/api/inquiries")
|
||||
async def get_inquiries(pm_type: str = None, category: str = None, status: str = None, keyword: str = None):
|
||||
# ... (existing code)
|
||||
try:
|
||||
with get_db_connection() as conn:
|
||||
with conn.cursor() as cursor:
|
||||
sql = "SELECT * FROM inquiries WHERE 1=1"
|
||||
params = []
|
||||
if pm_type:
|
||||
sql += " AND pm_type = %s"
|
||||
params.append(pm_type)
|
||||
if category:
|
||||
sql += " AND category = %s"
|
||||
params.append(category)
|
||||
if status:
|
||||
sql += " AND status = %s"
|
||||
params.append(status)
|
||||
if keyword:
|
||||
sql += " AND (content LIKE %s OR author LIKE %s OR project_nm LIKE %s)"
|
||||
params.extend([f"%{keyword}%", f"%{keyword}%", f"%{keyword}%"])
|
||||
|
||||
sql += " ORDER BY no DESC"
|
||||
cursor.execute(sql, params)
|
||||
return cursor.fetchall()
|
||||
except Exception as e:
|
||||
return {"error": str(e)}
|
||||
|
||||
@app.get("/api/inquiries/{id}")
|
||||
async def get_inquiry_detail(id: int):
|
||||
try:
|
||||
with get_db_connection() as conn:
|
||||
with conn.cursor() as cursor:
|
||||
cursor.execute("SELECT * FROM inquiries WHERE id = %s", (id,))
|
||||
return cursor.fetchone()
|
||||
except Exception as e:
|
||||
return {"error": str(e)}
|
||||
|
||||
@app.post("/api/inquiries/{id}/reply")
|
||||
async def update_inquiry_reply(id: int, req: InquiryReplyRequest):
|
||||
try:
|
||||
with get_db_connection() as conn:
|
||||
with conn.cursor() as cursor:
|
||||
handled_date = datetime.now().strftime("%Y. %m. %d")
|
||||
sql = """
|
||||
UPDATE inquiries
|
||||
SET reply = %s, status = %s, handler = %s, handled_date = %s
|
||||
WHERE id = %s
|
||||
"""
|
||||
cursor.execute(sql, (req.reply, req.status, req.handler, handled_date, id))
|
||||
conn.commit()
|
||||
return {"success": True}
|
||||
except Exception as e:
|
||||
return {"error": str(e)}
|
||||
|
||||
@app.delete("/api/inquiries/{id}/reply")
|
||||
async def delete_inquiry_reply(id: int):
|
||||
try:
|
||||
with get_db_connection() as conn:
|
||||
with conn.cursor() as cursor:
|
||||
sql = """
|
||||
UPDATE inquiries
|
||||
SET reply = '', status = '미확인', handled_date = ''
|
||||
WHERE id = %s
|
||||
"""
|
||||
cursor.execute(sql, (id,))
|
||||
conn.commit()
|
||||
return {"success": True}
|
||||
except Exception as e:
|
||||
return {"error": str(e)}
|
||||
|
||||
# --- 분석 및 수집 API ---
|
||||
@app.get("/available-dates")
|
||||
async def get_available_dates():
|
||||
@@ -153,14 +233,19 @@ async def get_project_activity(date: str = None):
|
||||
# [핵심] 파일이 0개면 무조건 "데이터 없음"
|
||||
status = "unknown"
|
||||
elif has_log:
|
||||
# 로그 날짜가 있는 경우 정밀 분석
|
||||
match = re.search(r'(\d{4})\.(\d{2})\.(\d{2})', log)
|
||||
if match:
|
||||
diff = (target_date_dt - datetime.strptime(match.group(0), "%Y.%m.%d")).days
|
||||
status = "active" if diff <= 7 else "warning" if diff <= 14 else "stale"
|
||||
days = diff
|
||||
else:
|
||||
if "폴더자동삭제" in log.replace(" ", ""):
|
||||
# [추가] 폴더 자동 삭제인 경우 날짜 상관없이 무조건 "방치"
|
||||
status = "stale"
|
||||
days = 999
|
||||
else:
|
||||
# 로그 날짜가 있는 경우 정밀 분석
|
||||
match = re.search(r'(\d{4})\.(\d{2})\.(\d{2})', log)
|
||||
if match:
|
||||
diff = (target_date_dt - datetime.strptime(match.group(0), "%Y.%m.%d")).days
|
||||
status = "active" if diff <= 7 else "warning" if diff <= 14 else "stale"
|
||||
days = diff
|
||||
else:
|
||||
status = "stale"
|
||||
else:
|
||||
# 파일은 있지만 로그가 없는 경우
|
||||
status = "stale"
|
||||
|
||||
293
style/inquiries.css
Normal file
293
style/inquiries.css
Normal file
@@ -0,0 +1,293 @@
|
||||
|
||||
.inquiry-board {
|
||||
padding: 0 20px 32px 20px;
|
||||
max-width: 98%; /* Expanded from 1400px to use most of the screen */
|
||||
margin: 0 auto;
|
||||
margin-top: 36px; /* topbar height */
|
||||
}
|
||||
|
||||
/* Sticky Header Wrapper */
|
||||
.board-sticky-header {
|
||||
position: sticky;
|
||||
top: 36px;
|
||||
background: #fff;
|
||||
z-index: 1000;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.board-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.notice-container {
|
||||
background: #fdfdfd;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
background: #f8f9fa;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.filter-group select,
|
||||
.filter-group input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inquiry-table {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.inquiry-table thead th {
|
||||
position: sticky;
|
||||
top: 310px; /* Adjust this value based on header height or use dynamic JS */
|
||||
background: #f8f9fa;
|
||||
padding: 14px 16px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
border-bottom: 2px solid #eee;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.inquiry-table td {
|
||||
padding: 14px 16px;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #eee;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 0; /* Necessary for text-overflow to work in table-cells with percentage or flex-like behavior */
|
||||
}
|
||||
|
||||
/* Specific overrides for columns that need more or less space */
|
||||
.inquiry-table td:nth-child(1) { max-width: 50px; } /* No */
|
||||
.inquiry-table td:nth-child(2) { max-width: 120px; } /* PM Type */
|
||||
.inquiry-table td:nth-child(3) { max-width: 100px; } /* Env */
|
||||
.inquiry-table td:nth-child(4) { max-width: 150px; } /* Category */
|
||||
.inquiry-table td:nth-child(5) { max-width: 200px; } /* Project */
|
||||
.inquiry-table td:nth-child(6) { max-width: 400px; } /* Content */
|
||||
.inquiry-table td:nth-child(7) { max-width: 400px; } /* Reply */
|
||||
.inquiry-table td:nth-child(8) { max-width: 100px; } /* Author */
|
||||
.inquiry-table td:nth-child(9) { max-width: 120px; } /* Date */
|
||||
.inquiry-table td:nth-child(10) { max-width: 100px; } /* Status */
|
||||
|
||||
/* Reset max-width for detail row to allow it to span full width */
|
||||
.detail-row td {
|
||||
max-width: none;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status-complete {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.status-working {
|
||||
background: #e3f2fd;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
.status-checking {
|
||||
background: #fff3e0;
|
||||
color: #ef6c00;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background: #f5f5f5;
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.inquiry-row:hover {
|
||||
background: #fcfcfc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Expanded Row Highlight */
|
||||
.inquiry-row.active-row {
|
||||
background-color: #f0f7f6 !important; /* Very light mint gray */
|
||||
}
|
||||
|
||||
.inquiry-row.active-row td {
|
||||
font-weight: 600;
|
||||
color: #1e5149;
|
||||
border-bottom-color: transparent; /* Seamless connection with detail */
|
||||
}
|
||||
|
||||
.content-preview {
|
||||
max-width: 500px; /* Increased from 300px */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Accordion Detail Row Style */
|
||||
.detail-row {
|
||||
display: none;
|
||||
background: #fdfdfd;
|
||||
}
|
||||
|
||||
.detail-row.active {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
padding: 24px;
|
||||
border-left: 6px solid #1e5149;
|
||||
background: #f9fafb; /* Slightly different background for grouping */
|
||||
box-shadow: inset 0 4px 15px rgba(0,0,0,0.08);
|
||||
position: relative; /* For positioning the close button */
|
||||
border-bottom: 2px solid #eee;
|
||||
}
|
||||
|
||||
.detail-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: #fff;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.btn-close-accordion {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 45px;
|
||||
background: #eee;
|
||||
border: none;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
transition: all 0.2s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn-close-accordion:hover {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-close-accordion::after {
|
||||
content: "▲";
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.detail-q-section {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.detail-a-section {
|
||||
background: #f1f8f7;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
border-left: 5px solid #1e5149;
|
||||
}
|
||||
|
||||
.detail-meta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Reply Form Enhancement */
|
||||
.reply-edit-form textarea {
|
||||
width: 100%;
|
||||
height: 120px; /* Fixed height */
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
resize: none; /* Disable resizing */
|
||||
background: #fff;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.reply-edit-form textarea:disabled,
|
||||
.reply-edit-form select:disabled,
|
||||
.reply-edit-form input:disabled {
|
||||
background: #fcfcfc;
|
||||
color: #666;
|
||||
border-color: #eee;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.reply-edit-form.readonly .btn-save,
|
||||
.reply-edit-form.readonly .btn-delete,
|
||||
.reply-edit-form.readonly .btn-cancel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reply-edit-form.editable .btn-edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reply-edit-form.editable textarea {
|
||||
border-color: #1e5149;
|
||||
box-shadow: 0 0 0 2px rgba(30, 81, 73, 0.1);
|
||||
}
|
||||
@@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item active" onclick="location.href='/dashboard'">대시보드</li>
|
||||
<li class="nav-item" onclick="alert('준비 중입니다.')">문의사항</li>
|
||||
<li class="nav-item" onclick="location.href='/inquiries'">문의사항</li>
|
||||
<li class="nav-item" onclick="alert('준비 중입니다.')">로그관리</li>
|
||||
<li class="nav-item" onclick="alert('준비 중입니다.')">파일관리</li>
|
||||
<li class="nav-item" onclick="alert('준비 중입니다.')">인원관리</li>
|
||||
|
||||
138
templates/inquiries.html
Normal file
138
templates/inquiries.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>문의사항 관리 - Project Master</title>
|
||||
<link rel="stylesheet" as="style" crossorigin
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
|
||||
<link rel="stylesheet" href="style/common.css">
|
||||
<link rel="stylesheet" href="style/dashboard.css">
|
||||
<link rel="stylesheet" href="style/inquiries.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="topbar">
|
||||
<div class="topbar-header">
|
||||
<a href="/">
|
||||
<h2>Project Master Test</h2>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item" onclick="location.href='/dashboard'">대시보드</li>
|
||||
<li class="nav-item active" onclick="location.href='/inquiries'">문의사항</li>
|
||||
<li class="nav-item" onclick="alert('준비 중입니다.')">로그관리</li>
|
||||
<li class="nav-item" onclick="alert('준비 중입니다.')">파일관리</li>
|
||||
<li class="nav-item" onclick="alert('준비 중입니다.')">인원관리</li>
|
||||
<li class="nav-item" onclick="alert('준비 중입니다.')">공지사항</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main class="inquiry-board">
|
||||
<div id="stickyHeader" class="board-sticky-header">
|
||||
<div class="board-header">
|
||||
<div>
|
||||
<h2>문의사항</h2>
|
||||
<p style="font-size: 13px; color: #666; margin-top: 4px;">시스템 운영 관련 불편사항 및 개선 요청 관리</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="sync-btn" onclick="loadInquiries()">새로고침</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 시트 상단 공지 영역 재현 (통합 박스) -->
|
||||
<div class="notice-container">
|
||||
<div style="margin-bottom: 12px; display: flex; gap: 20px;">
|
||||
<div style="flex: 1;">
|
||||
<h4
|
||||
style="color: #d32f2f; margin-bottom: 5px; font-size: 14px; display: flex; align-items: center; gap: 6px;">
|
||||
<span style="font-size: 16px;">📢</span> <공지>
|
||||
</h4>
|
||||
<ul style="font-size: 12px; line-height: 1.6; color: #444; padding-left: 20px; margin: 0;">
|
||||
<li>파워포인트 파일에 읽기전용포함(제한)글꼴이 있는 경우 컨버팅이 되지 않습니다. 제한된 글꼴 제거 후 업로드 권장.</li>
|
||||
<li>이미지는 '문의사항 이미지' 시트에 문의사항 번호와 함께 업로드 부탁드립니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="flex: 2; border-left: 1px dashed #ddd; padding-left: 20px;">
|
||||
<h4
|
||||
style="color: #1976d2; margin-bottom: 5px; font-size: 14px; display: flex; align-items: center; gap: 6px;">
|
||||
<span style="font-size: 16px;">📂</span> <이전 문의사항 요약>
|
||||
</h4>
|
||||
<div
|
||||
style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 11px; color: #666; line-height: 1.4;">
|
||||
<div><strong>1. 폴더트리:</strong> 하위폴더 권한, 숨김 기능 등 (완료)</div>
|
||||
<div><strong>2. 뷰어:</strong> 변환 오류, 특정 문서 깨짐 등 (완료)</div>
|
||||
<div><strong>3. 업로드/다운로드:</strong> 대용량 전송 오류 등 (완료)</div>
|
||||
<div><strong>4. 기타:</strong> 정렬, 화면 개선 등 (완료)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-section">
|
||||
<div class="filter-group">
|
||||
<label>시스템(PM 종류)</label>
|
||||
<select id="filterPmType" onchange="loadInquiries()">
|
||||
<option value="">전체</option>
|
||||
<option value="Overseas">Overseas</option>
|
||||
<option value="기술개발센터">기술개발센터</option>
|
||||
<option value="장헌">장헌</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label>구분(카테고리)</label>
|
||||
<select id="filterCategory" onchange="loadInquiries()">
|
||||
<option value="">전체</option>
|
||||
<option value="업로드">업로드</option>
|
||||
<option value="다운로드">다운로드</option>
|
||||
<option value="폴더트리">폴더트리</option>
|
||||
<option value="뷰어">뷰어</option>
|
||||
<option value="기타">기타</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label>처리여부</label>
|
||||
<select id="filterStatus" onchange="loadInquiries()">
|
||||
<option value="">전체</option>
|
||||
<option value="완료">완료</option>
|
||||
<option value="작업 중">작업 중</option>
|
||||
<option value="확인 중">확인 중</option>
|
||||
<option value="개발예정">개발예정</option>
|
||||
<option value="미확인">미확인</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label>검색(내용/작성자/프로젝트)</label>
|
||||
<input type="text" id="searchKeyword" placeholder="검색어 입력 후 Enter..."
|
||||
onkeyup="if(event.key==='Enter') loadInquiries()" style="width: 250px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="inquiry-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50">No</th>
|
||||
<th width="120">PM 종류</th>
|
||||
<th width="100">환경</th>
|
||||
<th width="150">구분</th>
|
||||
<th>프로젝트</th>
|
||||
<th width="400">문의내용</th>
|
||||
<th width="400">답변내용</th>
|
||||
<th width="100">작성자</th>
|
||||
<th width="120">날짜</th>
|
||||
<th width="100">상태</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="inquiryList">
|
||||
<!-- Data will be loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
|
||||
<script src="js/common.js"></script>
|
||||
<script src="js/inquiries.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user