상세페이지 UI 수정

2026-09-22 15:23:00 +09:00
parent f196791191
commit c6b430a197
5 changed files with 141 additions and 15 deletions
@@ -46,6 +46,19 @@
    localStorage.setItem(STORAGE_KEY, JSON.stringify(posts));
  }

+  function removeStoredPost(id) {
+    const posts = readJson(STORAGE_KEY, []).filter(function (post) { return post.id !== id; });
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(posts));
+  }
+
+  function isPostOwner(post, user) {
+    if (!post || !user) return false;
+    const postIds = [post.requesterId, post.requesterUuid].filter(Boolean);
+    const userIds = [user.requesterId, user.ssoSubject, user.userUuid].filter(Boolean);
+    if (postIds.length && userIds.length) return postIds.some(function (id) { return userIds.indexOf(id) > -1; });
+    return Boolean(post.author && [user.name, user.loginId, user.email].filter(Boolean).indexOf(post.author) > -1);
+  }
+
  function normalizeStatus(value) {
    if (value && typeof value === 'object') value = value.code || value.key || value.value || value.name || '';
    const raw = String(value || '').trim();
@@ -365,7 +378,7 @@
      if (!qs('#category').value || !title || !content) { errorBox.textContent = '구분, 제목, 내용을 모두 입력해주세요.'; errorBox.style.display = 'block'; return; }
      const feedbackId = makeUuid();
      const createdAt = new Date().toISOString();
-      const post = { id: feedbackId, feedbackId: feedbackId, category: qs('#category').value, company: currentUser.familyCompany || currentUser.company || '외부 사용자', department: currentUser.department || '-', author: currentUser.name || currentUser.loginId, title: title, date: createdAt.slice(0, 10), createdAt: createdAt, status: '접수', secret: qs('#secret').checked, content: content };
+      const post = { id: feedbackId, feedbackId: feedbackId, requesterId: currentUser.requesterId, requesterTenantId: currentUser.requesterTenantId, category: qs('#category').value, company: currentUser.familyCompany || currentUser.company || '외부 사용자', department: currentUser.department || '-', author: currentUser.name || currentUser.loginId, title: title, date: createdAt.slice(0, 10), createdAt: createdAt, status: '접수', secret: qs('#secret').checked, content: content };
      const submitButton = qs('#submitButton');
      submitButton.disabled = true;
      submitButton.textContent = '등록 중...';
@@ -413,6 +426,83 @@
    if (attachmentBox) attachmentBox.innerHTML = attachments.length ? attachments.map(function (attachment) {
      return '<div class="attachment-item">📎 ' + escapeHtml(attachment.originalFileName || '첨부파일') + '</div>';
    }).join('') : '<span class="help-text">첨부된 파일이 없습니다.</span>';
+    const editButton = qs('#editButton');
+    const deleteButton = qs('#deleteButton');
+    const editForm = qs('#editForm');
+    const editError = qs('#editError');
+    const ownerActions = function () {
+      const owner = isPostOwner(post, getAuthUser());
+      if (editButton) editButton.hidden = !owner;
+      if (deleteButton) deleteButton.hidden = !owner;
+    };
+    ownerActions();
+    if (authReady) authReady.then(ownerActions);
+    if (editButton && editForm) editButton.addEventListener('click', function () {
+      qs('#editCategory').value = post.category || '일반문의';
+      qs('#editTitle').value = post.title || '';
+      qs('#editContent').value = post.content || '';
+      qs('#editSecret').checked = Boolean(post.secret);
+      editError.hidden = true;
+      editError.style.display = 'none';
+      editForm.hidden = false;
+      editForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+    const editCancel = qs('#editCancel');
+    if (editCancel && editForm) editCancel.addEventListener('click', function () { editForm.hidden = true; });
+    if (editForm) editForm.addEventListener('submit', async function (event) {
+      event.preventDefault();
+      editError.hidden = true;
+      editError.style.display = 'none';
+      const title = qs('#editTitle').value.trim();
+      const content = qs('#editContent').value.trim();
+      const category = qs('#editCategory').value;
+      if (!title || !content || !category) {
+        editError.textContent = '구분, 제목, 내용을 모두 입력해주세요.';
+        editError.hidden = false;
+        editError.style.display = 'block';
+        return;
+      }
+      const saveButton = qs('button[type="submit"]', editForm);
+      saveButton.disabled = true;
+      saveButton.textContent = '저장 중...';
+      try {
+        await requestJson('/api/feedbacks/' + encodeURIComponent(post.id), {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ title: title, contents: content, Category: CATEGORY_CODES[category], is_secret: qs('#editSecret').checked ? 'true' : 'false' })
+        });
+        post.category = category;
+        post.title = title;
+        post.content = content;
+        post.secret = qs('#editSecret').checked;
+        updateStoredPost(post);
+        qs('[data-detail-category]').textContent = post.category;
+        qs('[data-detail-title]').textContent = post.title;
+        qs('[data-detail-content]').textContent = post.content;
+        qs('[data-detail-secret]').hidden = !post.secret;
+        editForm.hidden = true;
+        showToast('문의가 수정되었습니다.');
+      } catch (error) {
+        editError.textContent = error.message || '문의 수정에 실패했습니다.';
+        editError.hidden = false;
+        editError.style.display = 'block';
+      } finally {
+        saveButton.disabled = false;
+        saveButton.textContent = '수정 저장';
+      }
+    });
+    if (deleteButton) deleteButton.addEventListener('click', async function () {
+      if (!window.confirm('이 문의를 삭제하시겠습니까?')) return;
+      deleteButton.disabled = true;
+      try {
+        await requestJson('/api/feedbacks/' + encodeURIComponent(post.id), { method: 'DELETE' });
+        removeStoredPost(post.id);
+        window.location.href = 'index.html';
+      } catch (error) {
+        deleteButton.disabled = false;
+        showToast(error.message || '문의 삭제에 실패했습니다.');
+      }
+    });
    function safeMediaUrl(value) {
      value = String(value || '');
      return /^(https?:\/\/|\/|blob:)/i.test(value) ? value : '';
@@ -3,6 +3,6 @@
 <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>문의 상세 | EG-BIM Q&amp;A</title><link rel="stylesheet" href="../assets/styles.css?v=20260921-4"></head>
 <body>
  <main class="egbim-page"><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" id="detail"><div class="section-heading"><div><h2>문의 상세</h2><p>문의 내용과 답변을 확인할 수 있습니다.</p></div></div><article class="detail-card"><div class="detail-head"><div class="detail-title-line"><h2><span class="category" data-detail-category>문의</span> <span data-detail-title>문의 제목</span></h2><span class="status review" data-detail-status>문의접수</span></div><div class="detail-meta"><span data-detail-date>2026-09-17</span><span data-detail-author>작성자</span><span data-detail-company>회사</span><span data-detail-department>부서</span><span data-detail-secret hidden>🔒 비밀글</span></div></div><div class="detail-body" data-detail-content></div><div class="attachments"><h3>첨부파일</h3><div data-detail-attachments><span class="help-text">첨부된 파일이 없습니다.</span></div></div><div class="detail-actions"><a class="button button-outline" href="index.html">목록</a></div></article><section class="comment-box"><h3>답변 <span id="commentCount">0</span></h3><div id="comments"></div><form id="commentForm" class="comment-form"><label class="sr-only" for="commentContent">댓글 내용</label><textarea id="commentContent" class="textarea" maxlength="5000" placeholder="답변 또는 추가 문의를 입력해주세요" required></textarea><div class="comment-attachment-input"><label for="commentImages">이미지 첨부</label><input id="commentImages" type="file" accept="image/*" multiple><div id="commentImagePreview" class="comment-image-preview"></div><span class="help-text">이미지 파일만 등록할 수 있으며, 파일당 최대 30MB입니다.</span></div><div class="comment-form-actions"><span id="commentError" class="form-error" role="alert" hidden></span><button class="button button-primary" id="commentSubmit" type="submit">댓글 등록</button></div></form></section><div class="form-footer"><button class="button button-outline" id="backButton" type="button">목록으로</button></div></section>
+    <section class="page-shell" id="detail"><div class="section-heading"><div><h2>문의 상세</h2><p>문의 내용과 답변을 확인할 수 있습니다.</p></div></div><article class="detail-card"><div class="detail-head"><div class="detail-title-line"><h2><span class="category" data-detail-category>문의</span> <span data-detail-title>문의 제목</span></h2><span class="status review" data-detail-status>문의접수</span></div><div class="detail-meta"><span data-detail-date>2026-09-17</span><span data-detail-author>작성자</span><span data-detail-company>회사</span><span data-detail-department>부서</span><span data-detail-secret hidden>🔒 비밀글</span></div></div><div class="detail-body" data-detail-content></div><div class="attachments"><h3>첨부파일</h3><div data-detail-attachments><span class="help-text">첨부된 파일이 없습니다.</span></div></div><div class="detail-actions"><div class="owner-actions"><button class="button button-outline" id="editButton" type="button" hidden>수정</button><button class="button button-danger" id="deleteButton" type="button" hidden>삭제</button></div><a class="button button-outline" href="index.html">목록</a></div></article><form id="editForm" class="edit-form" hidden><h3>문의 수정</h3><div class="form-row"><label class="form-label" for="editCategory">구분</label><div class="form-control"><select id="editCategory" class="select"><option value="오류문의">오류문의</option><option value="개선문의">개선문의</option><option value="일반문의">일반문의</option></select></div></div><div class="form-row"><label class="form-label" for="editTitle">제목</label><div class="form-control"><input id="editTitle" class="input" maxlength="200" required></div></div><div class="form-row"><label class="form-label" for="editContent">내용</label><div class="form-control column"><textarea id="editContent" class="textarea" maxlength="10000" required></textarea></div></div><div class="form-row"><div class="form-label">설정</div><div class="form-control"><label class="check"><input id="editSecret" type="checkbox"> 비밀글</label></div></div><div class="form-footer"><button class="button button-outline" id="editCancel" type="button">취소</button><button class="button button-primary" type="submit">수정 저장</button></div><div id="editError" class="form-error" role="alert" hidden></div></form><section class="comment-box"><h3>답변 <span id="commentCount">0</span></h3><div id="comments"></div><form id="commentForm" class="comment-form"><label class="sr-only" for="commentContent">댓글 내용</label><textarea id="commentContent" class="textarea" maxlength="5000" placeholder="답변 또는 추가 문의를 입력해주세요" required></textarea><div class="comment-attachment-input"><label class="button button-outline comment-image-button" for="commentImages">이미지 첨부</label><input id="commentImages" type="file" accept="image/*" multiple><div id="commentImagePreview" class="comment-image-preview"></div></div><div class="comment-form-actions"><span id="commentError" class="form-error" role="alert" hidden></span><button class="button button-primary" id="commentSubmit" type="submit">댓글 등록</button></div></form></section><div class="form-footer"><button class="button button-outline" id="backButton" type="button">목록으로</button></div></section>
  </main><script src="config.js?v=20260921-3"></script><script src="app.js?v=20260921-3"></script>
 </body></html>