Skip to content

[Fix] QnA 페이지 댓글 및 답글 줄바꿈 수정 & 수강생 관리 페이지 모바일 반응형 수정 #270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
plumbestie merged 4 commits into from
Jul 11, 2026
+111 −30
Merged

[Fix] QnA 페이지 댓글 및 답글 줄바꿈 수정 & 수강생 관리 페이지 모바일 반응형 수정 #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
28860ec
[Fix] QnA List 댓글 글자 뛰쳐나가는 거 수정
plumbestie Jul 11, 2026
c09bc9a
[Fix] QnA 세부 디자인 수정
plumbestie Jul 11, 2026
61bd462
[Fix] 입력창 입력 길이에 따른 자동 줄바꿈 및 textarea 넓이 조정
plumbestie Jul 11, 2026
6779460
[Fix] 수강생 관리 검색 버튼 모바일 반응형 오류 수정
plumbestie Jul 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/pages/pirocheck/students/StudentList.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
align-items: center;
background: var(--gray600);
border-radius: 10px;
overflow: hidden;
width: 480px;
max-width: calc(100vw - 56px);
margin-bottom: 30px;
Expand All @@ -31,6 +30,7 @@

.searchInput {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
Expand Down
19 changes: 16 additions & 3 deletions frontend/src/pages/qna/QnADetailPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ function QnADetailPage() {
const [selectedImages, setSelectedImages] = useState([]); // 여러 장
const [imagePreviews, setImagePreviews] = useState([]); // 여러 장 미리보기
const fileInputRef = useRef(null);
const commentTextareaRef = useRef(null);

// ── 댓글 수정 상태 ───────────────────────────────
const [commentMenuId, setCommentMenuId] = useState(null);
Expand Down Expand Up @@ -420,6 +421,7 @@ function QnADetailPage() {
setImagePreviews([]);
// 로컬 상태에 blob URL을 직접 넣으면 새로고침 시 이미지가 깨지므로
// 등록 직후 fetchQuestion으로 서버의 정식 URL을 받아온다.
if (commentTextareaRef.current) commentTextareaRef.current.style.height = 'auto';
await fetchQuestion();
}
} catch (err) {
Expand Down Expand Up @@ -709,14 +711,25 @@ function QnADetailPage() {
style={{ display: 'none' }}
onChange={handleImageSelect}
/>
<input
<textarea
id="commentInput"
ref={commentTextareaRef}
className={styles.commentInput}
placeholder="댓글을 입력해주세요..."
value={commentText}
onChange={e => setCommentText(e.target.value)}
onKeyDown={e => { if (e.key === 'Enter' && !e.nativeEvent.isComposing) handleCommentSubmit(); }}
onChange={e => {
setCommentText(e.target.value);
e.target.style.height = 'auto';
e.target.style.height = `${Math.min(e.target.scrollHeight, 150)}px`;
}}
onKeyDown={e => {
if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
e.preventDefault();
handleCommentSubmit();
}
}}
onPaste={handlePaste}
rows={1}
disabled={isSubmitting}
/>
<button
Expand Down
12 changes: 10 additions & 2 deletions frontend/src/pages/qna/QnADetailPage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -529,7 +529,7 @@

.commentInputRow {
display: flex;
align-items: center;
align-items: flex-end;
width: 100%;
gap: 8px;
}
Expand All @@ -547,17 +547,24 @@
justify-content: center;
flex-shrink: 0;
color: var(--gray600);
margin-bottom: 2px;
}

.commentInput {
flex: 1;
min-width: 0;
resize: none;
border: none;
background: none;
font-family: var(--font-main);
font-size: 16px;
color: var(--black);
outline: none;
height: 100%;
line-height: 1.4;
padding: 7px 0;
box-sizing: border-box;
max-height: 150px;
overflow-y: auto;
}

.commentInput::placeholder {
Expand All @@ -577,6 +584,7 @@
flex-shrink: 0;
padding: 0;
transition: opacity 0.15s;
margin-bottom: 2px;
}

.submitBtn:disabled {
Expand Down
41 changes: 34 additions & 7 deletions frontend/src/pages/qna/QnAListPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,7 @@ function QnAListPage() {
// 질문별 댓글 이미지 미리보기: { [questionId]: string[] }
const [commentImagePreviews, setCommentImagePreviews] = useState({});
const commentFileRefs = useRef({});
const commentTextareaRefs = useRef({});

// ── 새 질문 / 이해도 입력 상태 ──────────────────
const [newQuestion, setNewQuestion] = useState('');
Expand All @@ -208,6 +209,7 @@ function QnAListPage() {
const [selectedImages, setSelectedImages] = useState([]);
const [imagePreviews, setImagePreviews] = useState([]);
const fileInputRef = useRef(null);
const newQuestionTextareaRef = useRef(null);

const applyQuestionGroups = useCallback((groups) => {
questionGroupsRef.current = groups;
Expand Down Expand Up @@ -519,6 +521,8 @@ function QnAListPage() {
setCommentImages(prev => ({ ...prev, [questionId]: [] }));
setCommentImagePreviews(prev => ({ ...prev, [questionId]: [] }));
setCommentOpenId(null);
const textareaEl = commentTextareaRefs.current[questionId];
if (textareaEl) textareaEl.style.height = 'auto';
}
} catch (err) {
console.error('댓글 등록 실패:', err);
Expand Down Expand Up @@ -615,6 +619,7 @@ function QnAListPage() {
setSelectedImages([]);
setImagePreviews([]);
fetchQuestions(understandingIndex);
if (newQuestionTextareaRef.current) newQuestionTextareaRef.current.style.height = 'auto';
}
} catch (err) {
console.error('질문 등록 실패:', err);
Expand All @@ -641,6 +646,7 @@ function QnAListPage() {
setNewQuestion('');
setUnderstandingIndex(0);
fetchQuestions(0);
if (newQuestionTextareaRef.current) newQuestionTextareaRef.current.style.height = 'auto';
}
} catch (err) {
console.error('이해도 등록 실패:', err);
Expand Down Expand Up @@ -842,7 +848,8 @@ function QnAListPage() {
</span>
<div className={styles.commentItem}>
<div className={styles.commentContent}>
<CommentCommentArraw /> {comment.content}
<CommentCommentArraw />
<span className={styles.commentText}>{comment.content}</span>
</div>
{comment.hasImage && (
<div
Expand Down Expand Up @@ -900,13 +907,24 @@ function QnAListPage() {
commentFileRefs.current[question.questionId].click();
}}
>+</button>
<input
<textarea
ref={el => { commentTextareaRefs.current[question.questionId] = el; }}
className={styles.commentInput}
placeholder="댓글을 입력해주세요..."
value={commentInputs[question.questionId] || ''}
onChange={e => handleCommentChange(question.questionId, e.target.value)}
onKeyDown={e => { if (e.key === 'Enter' && !e.nativeEvent.isComposing) handleCommentSubmit(e, question.questionId); }}
onChange={e => {
handleCommentChange(question.questionId, e.target.value);
e.target.style.height = 'auto';
e.target.style.height = `${Math.min(e.target.scrollHeight, 120)}px`;
}}
onKeyDown={e => {
if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
e.preventDefault();
handleCommentSubmit(e, question.questionId);
}
}}
onPaste={e => handleCommentPaste(e, question.questionId)}
rows={1}
autoFocus
/>
<button className={styles.submitBtn}
Expand Down Expand Up @@ -957,15 +975,24 @@ function QnAListPage() {
/>
</>
)}
<input
<textarea
ref={newQuestionTextareaRef}
className={`${styles.newQuestionInput} ${isStaff ? styles.newQuestionInputStaff : ''}`}
placeholder={isStaff ? '부원들의 이해도를 체크해보세요' : '질문을 남겨주세요...'}
value={newQuestion}
onChange={e => setNewQuestion(e.target.value)}
onChange={e => {
setNewQuestion(e.target.value);
e.target.style.height = 'auto';
e.target.style.height = `${Math.min(e.target.scrollHeight, 150)}px`;
}}
onKeyDown={e => {
if (e.key === 'Enter' && !e.nativeEvent.isComposing) isStaff ? handleNewUnderstandCheck() : handleNewQuestion();
if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
e.preventDefault();
isStaff ? handleNewUnderstandCheck() : handleNewQuestion();
}
}}
onPaste={handleNewQuestionPaste}
rows={1}
disabled={isSubmitting}
/>
<button
Expand Down
67 changes: 50 additions & 17 deletions frontend/src/pages/qna/QnAListPage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@
}

.scopeTabActive {
background: var(--main);
color: var(--black);
font-weight: 700;
background: var(--dark);
color: var(--white);
font-weight: 650;
}

.filterControls {
Expand Down Expand Up @@ -319,7 +319,7 @@
.qIcon {
flex-shrink: 0;
padding-top: 1px;
color: var(--main);
color: var(--dark);
font-family: var(--font-main);
font-size: 36px;
font-weight: 900;
Expand Down Expand Up @@ -358,7 +358,7 @@
color: var(--white);
font-family: var(--font-main);
font-size: 12px;
font-weight: 700;
font-weight: 650;
letter-spacing: 0;
}

Expand Down Expand Up @@ -469,8 +469,9 @@
font-weight: 400;
line-height: normal;
display: flex;
align-items: flex-start;
align-items: center;
gap: 4px;
min-width: 0;
}

.commentContent svg {
Expand All @@ -480,6 +481,14 @@
min-height: 22px;
flex-shrink: 0;
display: block;
margin-bottom: 1px;
}

.commentText {
flex: 1;
min-width: 0;
word-break: break-all;
overflow-wrap: anywhere;
}

.commentMore {
Expand Down Expand Up @@ -528,13 +537,13 @@

.commentInputInner {
display: flex;
align-items: center;
align-items: flex-end;
position: relative;
height: 44px;
border-radius: 44px;
min-height: 44px;
border-radius: 22px;
border: 1.5px solid var(--dark);
background: var(--white);
padding: 0 50px 0 15px;
padding: 5px 50px 5px 15px;
box-sizing: border-box;
}

Expand All @@ -555,33 +564,45 @@
background: var(--white);
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
margin-right: 8px;
margin-bottom: 6px;
}


.commentInput {
flex: 1;
height: 44px;
min-width: 0;
resize: none;
border: none;
background: none;
padding: 0;
padding: 7px 0;
box-sizing: border-box;
font-family: var(--font-main);
font-size: 16px;
color: var(--black);
outline: none;
outline: none !important;
box-shadow: none !important;
line-height: 1.4;
max-height: 120px;
overflow-y: auto;
}

.commentInput:focus {
outline: none !important;
box-shadow: none !important;
}

.commentInput::placeholder {
color: var(--gray200);
}

.submitBtn {
position: absolute;
position: absolute;
right: 5px;
bottom: 7.5px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #09C410;
background: var(--main);
border: none;
cursor: pointer;
display: flex;
Expand Down Expand Up @@ -633,7 +654,7 @@

.newQuestionInputRow {
display: flex;
align-items: center;
align-items: flex-end;
gap: 8px;
flex: 1;
width: 100%;
Expand All @@ -656,17 +677,29 @@
border-radius: 50%;
background: var(--white);
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
margin-bottom: 10px;
margin-left: 5px;
}

.newQuestionInput {
flex: 1;
min-width: 0;
resize: none;
border: none;
background: none;
font-family: var(--font-main);
font-size: 20px;
color: var(--black);
outline: none;
height: 100%;
line-height: 1.4;
padding: 8px 0;
box-sizing: border-box;
max-height: 150px;
overflow-y: auto;
}

.newQuestionSubmit {
margin-bottom: 2px;
}

/* 운영진일 때 왼쪽 여백 추가 (+ 버튼 없어서 간격 보정) */
Expand Down
Loading