diff --git a/frontend/src/pages/qna/QnADetailPage.js b/frontend/src/pages/qna/QnADetailPage.js index bb93229..8dbf4af 100644 --- a/frontend/src/pages/qna/QnADetailPage.js +++ b/frontend/src/pages/qna/QnADetailPage.js @@ -674,7 +674,7 @@ function QnADetailPage() { placeholder="댓글을 입력해주세요..." value={commentText} onChange={e => setCommentText(e.target.value)} - onKeyDown={e => { if (e.key === 'Enter') handleCommentSubmit(); }} + onKeyDown={e => { if (e.key === 'Enter' && !e.nativeEvent.isComposing) handleCommentSubmit(); }} onPaste={handlePaste} disabled={isSubmitting} /> diff --git a/frontend/src/pages/qna/QnAListPage.js b/frontend/src/pages/qna/QnAListPage.js index 7f0e696..c0f0bf8 100644 --- a/frontend/src/pages/qna/QnAListPage.js +++ b/frontend/src/pages/qna/QnAListPage.js @@ -528,27 +528,9 @@ function QnAListPage() { if (!res.ok) throw new Error(); const json = await res.json(); if (json.isSuccess) { - if (isStaff) { - await authFetch(`/api/questions/${questionId}/status`, { method: 'PATCH' }); - } - const newComment = { - commentId: json.result.commentId, - displayName: json.result.displayName, - content: json.result.content, - }; - const update = (list) => list.map(q => - q.questionId === questionId - ? { - ...q, - isResolved: isStaff ? true : q.isResolved, - previewComments: [...(q.previewComments ?? []), newComment], - commentCount: (q.commentCount ?? 0) + 1 - } - : q - ); - setPopularQuestions(update); - setUnresolvedQuestions(update); - setResolvedQuestions(update); + // NOTE: 댓글 작성으로 인한 '해결됨' 자동 전환 없음 (해결 처리는 운영진 수동 조작만 허용). + // previewComments / commentCount UI 갱신도 SSE comment-created 이벤트에서 단일 처리. + // 여기서 직접 상태를 업데이트하면 SSE 이벤트와 중복되어 댓글이 2개 표시되므로 제거. setCommentInputs(prev => ({ ...prev, [questionId]: '' })); setCommentImages(prev => ({ ...prev, [questionId]: [] })); setCommentImagePreviews(prev => ({ ...prev, [questionId]: [] })); @@ -790,7 +772,8 @@ function QnAListPage() { {/* ── 질문 목록 ── */}
{displayedQuestions.map(question => ( -
navigate(`/sessions/${sessionId}/questions/${question.questionId}`)}> {/* 질문 헤더 */} @@ -902,7 +885,7 @@ function QnAListPage() { placeholder="댓글을 입력해주세요..." value={commentInputs[question.questionId] || ''} onChange={e => handleCommentChange(question.questionId, e.target.value)} - onKeyDown={e => { if (e.key === 'Enter') handleCommentSubmit(e, question.questionId); }} + onKeyDown={e => { if (e.key === 'Enter' && !e.nativeEvent.isComposing) handleCommentSubmit(e, question.questionId); }} onPaste={e => handleCommentPaste(e, question.questionId)} autoFocus /> @@ -960,7 +943,7 @@ function QnAListPage() { value={newQuestion} onChange={e => setNewQuestion(e.target.value)} onKeyDown={e => { - if (e.key === 'Enter') isStaff ? handleNewUnderstandCheck() : handleNewQuestion(); + if (e.key === 'Enter' && !e.nativeEvent.isComposing) isStaff ? handleNewUnderstandCheck() : handleNewQuestion(); }} onPaste={handleNewQuestionPaste} disabled={isSubmitting} diff --git a/frontend/src/pages/qna/QnAListPage.module.css b/frontend/src/pages/qna/QnAListPage.module.css index 95ffedf..2570c0e 100644 --- a/frontend/src/pages/qna/QnAListPage.module.css +++ b/frontend/src/pages/qna/QnAListPage.module.css @@ -113,12 +113,14 @@ display: flex; align-items: center; justify-content: space-between; + gap: 10px; border-radius: 10px; border: 1px solid var(--dark); background: var(--white); box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.25); width: 100%; - height: 56px; + min-height: 56px; + padding: 10px 16px; box-sizing: border-box; } @@ -129,6 +131,8 @@ color: var(--gray600); display: flex; align-items: center; + align-self: center; + flex-shrink: 0; padding: 0; line-height: 1; } @@ -145,12 +149,15 @@ font-size: 24px; font-weight: 500; color: var(--black); + line-height: 1.4; + word-break: keep-all; } .understandCount { font-weight: 300; color: var(--black); font-size: 18px; + white-space: nowrap; } /* ── O/X 버튼 ── */ @@ -209,19 +216,32 @@ .questionCard { padding: 14px 16px; cursor: pointer; - transition: box-shadow 0.2s; + transition: box-shadow 0.2s, background-color 0.2s, opacity 0.2s, border-color 0.2s; border-radius: 30px; background: var(--white); + border: 1px solid var(--main); box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.25); width: 95%; box-sizing: border-box; min-height: 40px; } +/* 해결된 질문: 미해결 질문과 한눈에 구분되도록 배경을 연한 회색으로 + 카드 전체를 흐리게 처리 (초록 테두리는 미해결 질문 전용이므로 제외) */ +.questionCardResolved { + background: var(--gray50); + opacity: 0.6; + border-color: transparent; + box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.25); +} + .questionCard:hover { box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); } +.questionCardResolved:hover { + box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); +} + .questionHeader { display: flex; align-items: center; @@ -661,10 +681,8 @@ /* ── 이해도 바 ── */ .understandBar { - height: auto; min-height: 48px; padding: 8px 10px; - flex-wrap: wrap; } .understandName {