From d7338dbab4242c4bab9e78274ba65c1bfbe27c34 Mon Sep 17 00:00:00 2001 From: kkw610 Date: Fri, 19 Jun 2026 14:16:44 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20Q&A=20=EB=AA=A9=EB=A1=9D=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9E=90=EB=8F=99=20=ED=95=B4=EA=B2=B0=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EB=8C=93?= =?UTF-8?q?=EA=B8=80=20=EC=A4=91=EB=B3=B5=20=EB=B2=84=EA=B7=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/qna/QnAListPage.js | 27 ++++--------------- frontend/src/pages/qna/QnAListPage.module.css | 7 ++++- 2 files changed, 11 insertions(+), 23 deletions(-) diff --git a/frontend/src/pages/qna/QnAListPage.js b/frontend/src/pages/qna/QnAListPage.js index 7f0e696..3f40f45 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}`)}> {/* 질문 헤더 */} diff --git a/frontend/src/pages/qna/QnAListPage.module.css b/frontend/src/pages/qna/QnAListPage.module.css index 95ffedf..04e0e49 100644 --- a/frontend/src/pages/qna/QnAListPage.module.css +++ b/frontend/src/pages/qna/QnAListPage.module.css @@ -209,7 +209,7 @@ .questionCard { padding: 14px 16px; cursor: pointer; - transition: box-shadow 0.2s; + transition: box-shadow 0.2s, background-color 0.2s; border-radius: 30px; background: var(--white); box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.25); @@ -218,6 +218,11 @@ min-height: 40px; } +/* 해결된 질문: 미해결 질문과 한눈에 구분되도록 옅은 회색 배경 처리 */ +.questionCardResolved { + background: var(--gray50); +} + .questionCard:hover { box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); } From 64bd2e3feac2a156d9baf78910e54ae687f2e8df Mon Sep 17 00:00:00 2001 From: kkw610 Date: Fri, 19 Jun 2026 14:28:36 +0900 Subject: [PATCH 2/4] =?UTF-8?q?style:=20=EC=A7=88=EB=AC=B8=20=EB=B0=95?= =?UTF-8?q?=EC=8A=A4=20=ED=95=B4=EA=B2=B0/=EB=AF=B8=ED=95=B4=EA=B2=B0=20?= =?UTF-8?q?=EA=B5=AC=EB=B6=84=20=EA=B0=95=ED=99=94=20=EB=B0=8F=20=EC=9D=B4?= =?UTF-8?q?=ED=95=B4=EB=8F=84=20=EC=B2=B4=ED=81=AC=20=EB=B0=95=EC=8A=A4=20?= =?UTF-8?q?=EB=86=92=EC=9D=B4=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/qna/QnAListPage.module.css | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/frontend/src/pages/qna/QnAListPage.module.css b/frontend/src/pages/qna/QnAListPage.module.css index 04e0e49..7eb8264 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,21 +216,29 @@ .questionCard { padding: 14px 16px; cursor: pointer; - transition: box-shadow 0.2s, background-color 0.2s; + transition: box-shadow 0.2s, background-color 0.2s, opacity 0.2s; border-radius: 30px; background: var(--white); - box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.25); + border: 1px solid rgba(11, 236, 18, 0.45); + box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.25), 0 0 6px 0 rgba(11, 236, 18, 0.35); width: 95%; box-sizing: border-box; min-height: 40px; } -/* 해결된 질문: 미해결 질문과 한눈에 구분되도록 옅은 회색 배경 처리 */ +/* 해결된 질문: 미해결 질문과 한눈에 구분되도록 배경을 진하게 + 카드 전체를 흐리게 처리 (네온 테두리는 미해결 질문 전용이므로 제외) */ .questionCardResolved { - background: var(--gray50); + background: var(--gray200); + 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), 0 0 6px 0 rgba(11, 236, 18, 0.35); +} + +.questionCardResolved:hover { box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); } @@ -666,10 +681,8 @@ /* ── 이해도 바 ── */ .understandBar { - height: auto; min-height: 48px; padding: 8px 10px; - flex-wrap: wrap; } .understandName { From 1b692a599402b20b27313115753f48a4bc54665e Mon Sep 17 00:00:00 2001 From: kkw610 Date: Fri, 19 Jun 2026 14:48:26 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=EB=8C=93=EA=B8=80=20=EC=A4=91?= =?UTF-8?q?=EB=B3=B5=20=EB=8B=AC=EB=A6=BC=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/qna/QnADetailPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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} /> From d44660f3e7cf2ee2181b2b13fca0809c0ccae7d5 Mon Sep 17 00:00:00 2001 From: kkw610 Date: Fri, 19 Jun 2026 14:49:29 +0900 Subject: [PATCH 4/4] =?UTF-8?q?style:=20=ED=95=B4=EA=B2=B0/=EB=AF=B8?= =?UTF-8?q?=ED=95=B4=EA=B2=B0=20=EC=A7=88=EB=AC=B8=20=EA=B5=AC=EB=B6=84=20?= =?UTF-8?q?=EB=AA=85=ED=99=95=ED=9E=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/qna/QnAListPage.js | 10 +++++----- frontend/src/pages/qna/QnAListPage.module.css | 12 ++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/src/pages/qna/QnAListPage.js b/frontend/src/pages/qna/QnAListPage.js index 3f40f45..c0f0bf8 100644 --- a/frontend/src/pages/qna/QnAListPage.js +++ b/frontend/src/pages/qna/QnAListPage.js @@ -528,9 +528,9 @@ function QnAListPage() { if (!res.ok) throw new Error(); const json = await res.json(); if (json.isSuccess) { - // NOTE: 댓글 작성으로 인한 '해결됨' 자동 전환 없음 (해결 처리는 운영진 수동 조작만 허용) - // previewComments / commentCount UI 갱신도 SSE comment-created 이벤트에서 단일 처리 - // 여기서 직접 상태를 업데이트하면 SSE 이벤트와 중복되어 댓글이 2개 표시되므로 제거 + // NOTE: 댓글 작성으로 인한 '해결됨' 자동 전환 없음 (해결 처리는 운영진 수동 조작만 허용). + // previewComments / commentCount UI 갱신도 SSE comment-created 이벤트에서 단일 처리. + // 여기서 직접 상태를 업데이트하면 SSE 이벤트와 중복되어 댓글이 2개 표시되므로 제거. setCommentInputs(prev => ({ ...prev, [questionId]: '' })); setCommentImages(prev => ({ ...prev, [questionId]: [] })); setCommentImagePreviews(prev => ({ ...prev, [questionId]: [] })); @@ -885,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 /> @@ -943,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 7eb8264..2570c0e 100644 --- a/frontend/src/pages/qna/QnAListPage.module.css +++ b/frontend/src/pages/qna/QnAListPage.module.css @@ -216,26 +216,26 @@ .questionCard { padding: 14px 16px; cursor: pointer; - transition: box-shadow 0.2s, background-color 0.2s, opacity 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 rgba(11, 236, 18, 0.45); - box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.25), 0 0 6px 0 rgba(11, 236, 18, 0.35); + 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(--gray200); + 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), 0 0 6px 0 rgba(11, 236, 18, 0.35); + box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); } .questionCardResolved:hover {