From 093871db5ccab31ac0991eb4a230c04eaf49286e Mon Sep 17 00:00:00 2001
From: kdhye1119 <kdhye1119@naver.com>
Date: Sat, 30 May 2026 21:32:03 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[feat]=ED=95=B4=EA=B2=B0=EB=90=A8=20->=20?=
 =?UTF-8?q?=EB=AF=B8=ED=95=B4=EA=B2=B0=20api=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/qna/QnADetailPage.js       | 39 ++++++--------
 .../src/pages/qna/QnADetailPage.module.css    | 54 +++++++++++++++++++
 frontend/src/pages/qna/QnAListPage.js         |  5 +-
 frontend/src/pages/qna/QnAListPage.module.css |  9 ++++
 4 files changed, 81 insertions(+), 26 deletions(-)

diff --git a/frontend/src/pages/qna/QnADetailPage.js b/frontend/src/pages/qna/QnADetailPage.js
index c25d29f..1421b9d 100644
--- a/frontend/src/pages/qna/QnADetailPage.js
+++ b/frontend/src/pages/qna/QnADetailPage.js
@@ -87,7 +87,6 @@ function QnADetailPage() {
         }
     };
 
-
     useEffect(() => {
         const fetchQuestion = async () => {
             try {
@@ -138,7 +137,7 @@ function QnADetailPage() {
     useEffect(() => {
         const handleClickOutside = () => {
             setShowMenu(false);
-            setCommentMenuId(null);  // ← 추가
+            setCommentMenuId(null);
         };
         if (showMenu || commentMenuId) document.addEventListener('click', handleClickOutside);
         return () => document.removeEventListener('click', handleClickOutside);
@@ -260,13 +259,8 @@ function QnADetailPage() {
             if (!res.ok) throw new Error();
             const json = await res.json();
             if (json.isSuccess) {
-                if (isStaff) {
-                    await authFetch(`/api/questions/${questionId}/status`, { method: 'PATCH' });
-                    setQuestion(prev => ({ ...prev, isResolved: true }));
-                } else if (question.isResolved) {
-                    await authFetch(`/api/questions/${questionId}/status`, { method: 'PATCH' });
-                    setQuestion(prev => ({ ...prev, isResolved: false }));
-                }
+                // isResolved를 응답값으로 직접 반영
+                setQuestion(prev => ({ ...prev, isResolved: json.result.isResolved }));
 
                 const newComment = {
                     commentId: json.result.commentId,
@@ -274,6 +268,7 @@ function QnADetailPage() {
                     content: json.result.content,
                     createdAt: json.result.createdAt,
                     imageUrl: imagePreview,
+                    isMine: true,
                 };
                 setQuestion(prev => ({
                     ...prev,
@@ -308,7 +303,7 @@ function QnADetailPage() {
                     <span className={styles.authorDate}>{formatDate(question.createdAt)}</span>
                 </div>
                 {(isMyQuestion || isStaff) && (
-                    <div style={{ position: 'relative' }}>
+                    <div className={styles.menuWrapper}>
                         <button className={styles.menuBtn} aria-label="더보기" onClick={(e) => { e.stopPropagation(); setShowMenu(prev => !prev); }}>
                             <FiMoreVertical size={20} />
                         </button>
@@ -345,19 +340,16 @@ function QnADetailPage() {
 
             {/* 질문 내용 */}
             <div className={styles.questionTitle}>
-                <span
-                    className={styles.qIcon}
-                    style={{ color: question.isResolved ? 'var(--gray600)' : 'var(--main)' }}
-                >Q.</span>
+                <span className={`${styles.qIcon} ${question.isResolved ? styles.qIconResolved : ''}`}>Q.</span>
                 {isEditing ? (
-                    <div style={{ flex: 1, display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
+                    <div className={styles.editWrapper}>
                         <textarea
                             className={styles.editInput}
                             value={editText}
                             onChange={e => setEditText(e.target.value)}
                             autoFocus
                         />
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                        <div className={styles.editButtons}>
                             <button className={styles.editConfirmBtn} onClick={handleEditSubmit}>완료</button>
                             <button className={styles.editCancelBtn} onClick={() => setIsEditing(false)}>취소</button>
                         </div>
@@ -404,9 +396,8 @@ function QnADetailPage() {
                                     <span className={styles.staffBadge}><StaffCheck /></span>
                                 )}
                             </span>
-                            {/* 본인 댓글이면 메뉴 버튼 표시 */}
-                            {comment.displayName === '작성자' && (
-                                <div style={{ position: 'relative', marginLeft: 'auto' }}>
+                            {comment.isMine && (
+                                <div className={styles.commentMenuWrapper}>
                                     <button
                                         className={styles.menuBtn}
                                         onClick={(e) => { e.stopPropagation(); setCommentMenuId(prev => prev === comment.commentId ? null : comment.commentId); }}
@@ -415,8 +406,8 @@ function QnADetailPage() {
                                     </button>
                                     {commentMenuId === comment.commentId && (
                                         <div className={styles.dropdownMenu}>
-                                            <button className={styles.dropdownItem} onClick={() => handleCommentEditStart(comment)}>수정</button>
-                                            <button className={styles.dropdownItem} onClick={() => handleCommentDelete(comment.commentId)}>삭제</button>
+                                            <button className={styles.dropdownItem} onClick={(e) => { e.stopPropagation(); handleCommentEditStart(comment); }}>수정</button>
+                                            <button className={styles.dropdownItem} onClick={(e) => { e.stopPropagation(); handleCommentDelete(comment.commentId); }}>삭제</button>
                                         </div>
                                     )}
                                 </div>
@@ -424,14 +415,14 @@ function QnADetailPage() {
                         </div>
                         <div className={styles.commentBubble}>
                             {editingCommentId === comment.commentId ? (
-                                <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
+                                <div className={styles.commentEditWrapper}>
                                     <textarea
-                                        className={styles.editInput}
+                                        className={styles.editCommentInput}
                                         value={editCommentText}
                                         onChange={e => setEditCommentText(e.target.value)}
                                         autoFocus
                                     />
-                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                                    <div className={styles.commentEditButtons}>
                                         <button className={styles.editConfirmBtn} onClick={() => handleCommentEditSubmit(comment.commentId)}>완료</button>
                                         <button className={styles.editCancelBtn} onClick={() => setEditingCommentId(null)}>취소</button>
                                     </div>
diff --git a/frontend/src/pages/qna/QnADetailPage.module.css b/frontend/src/pages/qna/QnADetailPage.module.css
index 161d608..b79c687 100644
--- a/frontend/src/pages/qna/QnADetailPage.module.css
+++ b/frontend/src/pages/qna/QnADetailPage.module.css
@@ -478,4 +478,58 @@
 .staffBadge {
     display: inline-flex;
     align-items: center;
+}
+
+
+.editCommentInput {
+    flex: 1;
+    font-family: var(--font-main);
+    font-size: 0.9rem;
+    font-weight: 400;
+    color: var(--black);
+    border: 1px solid var(--gray200);
+    border-radius: 8px;
+    padding: 4px 8px;
+    resize: none;
+    outline: none;
+    line-height: 1.5;
+    width: 100%;
+}
+
+.commentEditWrapper {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.commentEditButtons {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.menuWrapper {
+    position: relative;
+}
+
+.commentMenuWrapper {
+    position: relative;
+    margin-left: auto;
+}
+
+.qIconResolved {
+    color: var(--gray600);
+}
+
+.editWrapper {
+    flex: 1;
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.editButtons {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
 }
\ No newline at end of file
diff --git a/frontend/src/pages/qna/QnAListPage.js b/frontend/src/pages/qna/QnAListPage.js
index 4fa8b21..e4ff1ef 100644
--- a/frontend/src/pages/qna/QnAListPage.js
+++ b/frontend/src/pages/qna/QnAListPage.js
@@ -132,6 +132,7 @@ function QnAListPage() {
                         understoodCount: json.result.understoodCount,
                         notUnderstoodCount: json.result.notUnderstoodCount,
                         attendanceCount: json.result.attendanceCount,
+                        respondedCount: json.result.respondedCount,
                     }
                 }));
             }
@@ -463,9 +464,8 @@ function QnAListPage() {
                                                         e.stopPropagation();
                                                         navigate(`/sessions/${sessionId}/questions/${question.questionId}`);
                                                     }}
-                                                    style={{ cursor: 'pointer' }}
                                                 >
-                                                    <span><ImgPreview /> 사진 보기</span>
+                                                    <ImgPreview /><span>사진보기</span>
                                                 </div>
                                             )}
                                         </div>
@@ -560,6 +560,7 @@ function QnAListPage() {
                         )}
                         <input
                             className={styles.newQuestionInput}
+                            style={isStaff ? { paddingLeft: '10px' } : {}}
                             placeholder={isStaff ? '부원들의 이해도를 체크해보세요' : '질문을 남겨주세요...'}
                             value={newQuestion}
                             onChange={e => setNewQuestion(e.target.value)}
diff --git a/frontend/src/pages/qna/QnAListPage.module.css b/frontend/src/pages/qna/QnAListPage.module.css
index 5a93029..c861038 100644
--- a/frontend/src/pages/qna/QnAListPage.module.css
+++ b/frontend/src/pages/qna/QnAListPage.module.css
@@ -442,9 +442,16 @@
     outline: none;
 }
 
+.commentImagePreview svg {
+    display: block;
+}
+
 .commentImagePreview {
     display: flex;
+    flex-direction: row;
     align-items: center;
+    justify-content: center;
+
     gap: 4px;
     font-family: var(--font-main);
     font-size: 0.78rem;
@@ -454,6 +461,8 @@
     padding: 3px 8px;
     width: fit-content;
     margin-top: 4px;
+    cursor: pointer;
+    line-height: 1;
 }
 
 .commentInput::placeholder {

From 8316fb0909d0869cc82149d89b975fc129678c55 Mon Sep 17 00:00:00 2001
From: kdhye1119 <kdhye1119@naver.com>
Date: Sat, 30 May 2026 22:05:53 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[refactor]=20QnA=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EB=93=A4=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/qna/QnADetailPage.js       | 177 +++++-----
 .../src/pages/qna/QnADetailPage.module.css    | 331 +++++++++---------
 frontend/src/pages/qna/QnAListPage.js         |  84 ++---
 frontend/src/pages/qna/QnAListPage.module.css | 185 +++++-----
 frontend/src/pages/qna/QnAMainPage.js         |  65 ++--
 frontend/src/pages/qna/QnAMainPage.module.css |  56 ++-
 .../qna_svg.js => utils/qnaUtils.js}          |  45 ++-
 7 files changed, 493 insertions(+), 450 deletions(-)
 rename frontend/src/{components/qna_svg.js => utils/qnaUtils.js} (93%)

diff --git a/frontend/src/pages/qna/QnADetailPage.js b/frontend/src/pages/qna/QnADetailPage.js
index 1421b9d..a23ba91 100644
--- a/frontend/src/pages/qna/QnADetailPage.js
+++ b/frontend/src/pages/qna/QnADetailPage.js
@@ -8,85 +8,49 @@ import {
     MeCuriousToo,
     StaffCheck,
     SumitBtn,
-} from '../../components/qna_svg';
+    uploadImage,
+} from '../../utils/qnaUtils';
 import profileImg from '../../assets/images/profile.png';
 import { authFetch } from '../../utils/Api';
 
+// 시간만 표시하는 포맷 함수 (HH:MM)
+const formatTime = (dateStr) => {
+    if (!dateStr) return '';
+    const d = new Date(dateStr);
+    return d.toLocaleTimeString('ko-KR', {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    });
+};
+
 function QnADetailPage() {
     const { questionId } = useParams();
     const navigate = useNavigate();
     const isStaff = localStorage.getItem('role') === 'ADMIN';
 
+    // ── 질문 / 로딩 상태 ─────────────────────────────
     const [question, setQuestion] = useState(null);
-    const [commentText, setCommentText] = useState('');
-    const [isSubmitting, setIsSubmitting] = useState(false);
     const [loading, setLoading] = useState(true);
+
+    // ── 질문 수정 상태 ───────────────────────────────
     const [showMenu, setShowMenu] = useState(false);
     const [isEditing, setIsEditing] = useState(false);
     const [editText, setEditText] = useState('');
+
+    // ── 댓글 입력 상태 ───────────────────────────────
+    const [commentText, setCommentText] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
     const [selectedImage, setSelectedImage] = useState(null);
     const [imagePreview, setImagePreview] = useState(null);
     const fileInputRef = useRef(null);
 
+    // ── 댓글 수정 상태 ───────────────────────────────
     const [commentMenuId, setCommentMenuId] = useState(null);
     const [editingCommentId, setEditingCommentId] = useState(null);
     const [editCommentText, setEditCommentText] = useState('');
 
-    const formatDate = (dateStr) => {
-        if (!dateStr) return '';
-        const d = new Date(dateStr);
-        return d.toLocaleTimeString('ko-KR', {
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: false,
-        });
-    };
-
-    const handleCommentDelete = async (commentId) => {
-        if (!window.confirm('댓글을 삭제할까요?')) return;
-        try {
-            const res = await authFetch(`/api/comments/${commentId}`, { method: 'DELETE' });
-            if (!res.ok) throw new Error();
-            setQuestion(prev => ({
-                ...prev,
-                comments: prev.comments.filter(c => c.commentId !== commentId),
-            }));
-        } catch (err) {
-            console.error('댓글 삭제 실패:', err);
-        }
-        setCommentMenuId(null);
-    };
-
-    const handleCommentEditStart = (comment) => {
-        setEditingCommentId(comment.commentId);
-        setEditCommentText(comment.content);
-        setCommentMenuId(null);
-    };
-
-    const handleCommentEditSubmit = async (commentId) => {
-        const text = editCommentText.trim();
-        if (!text) return;
-        try {
-            const res = await authFetch(`/api/comments/${commentId}`, {
-                method: 'PATCH',
-                body: JSON.stringify({ content: text }),
-            });
-            if (!res.ok) throw new Error();
-            const json = await res.json();
-            if (json.isSuccess) {
-                setQuestion(prev => ({
-                    ...prev,
-                    comments: prev.comments.map(c =>
-                        c.commentId === commentId ? { ...c, content: text } : c
-                    ),
-                }));
-                setEditingCommentId(null);
-            }
-        } catch (err) {
-            console.error('댓글 수정 실패:', err);
-        }
-    };
-
+    // ── 질문 불러오기 ────────────────────────────────
     useEffect(() => {
         const fetchQuestion = async () => {
             try {
@@ -98,6 +62,7 @@ function QnADetailPage() {
 
                 const result = json.result;
 
+                // 질문 이미지 blob 변환
                 if (result.imageUrl) {
                     try {
                         const imgRes = await authFetch(result.imageUrl);
@@ -108,6 +73,7 @@ function QnADetailPage() {
                     }
                 }
 
+                // 댓글 이미지 blob 변환
                 if (result.comments) {
                     result.comments = await Promise.all(
                         result.comments.map(async (comment) => {
@@ -134,6 +100,7 @@ function QnADetailPage() {
         if (questionId) fetchQuestion();
     }, [questionId]);
 
+    // ── 메뉴 외부 클릭 시 닫기 ──────────────────────
     useEffect(() => {
         const handleClickOutside = () => {
             setShowMenu(false);
@@ -143,6 +110,7 @@ function QnADetailPage() {
         return () => document.removeEventListener('click', handleClickOutside);
     }, [showMenu, commentMenuId]);
 
+    // ── 좋아요 토글 ──────────────────────────────────
     const toggleLike = async () => {
         try {
             const res = await authFetch(`/api/questions/${questionId}/like`, { method: 'POST' });
@@ -160,6 +128,7 @@ function QnADetailPage() {
         }
     };
 
+    // ── 질문 수정 ────────────────────────────────────
     const handleEditStart = () => {
         setEditText(question.content);
         setIsEditing(true);
@@ -185,6 +154,7 @@ function QnADetailPage() {
         }
     };
 
+    // ── 질문 삭제 ────────────────────────────────────
     const handleDelete = async () => {
         if (!window.confirm('질문을 삭제할까요?')) return;
         try {
@@ -197,6 +167,7 @@ function QnADetailPage() {
         setShowMenu(false);
     };
 
+    // ── 질문 해결됨 처리 (운영진 전용) ──────────────
     const handleResolve = async () => {
         try {
             const res = await authFetch(`/api/questions/${questionId}/status`, { method: 'PATCH' });
@@ -208,6 +179,7 @@ function QnADetailPage() {
         setShowMenu(false);
     };
 
+    // ── 댓글 이미지 선택 / 붙여넣기 ─────────────────
     const handleImageSelect = (e) => {
         const file = e.target.files[0];
         if (!file) return;
@@ -215,19 +187,6 @@ function QnADetailPage() {
         setImagePreview(URL.createObjectURL(file));
     };
 
-    const uploadImage = async (file) => {
-        const formData = new FormData();
-        formData.append('file', file);
-        const token = localStorage.getItem('token');
-        const res = await fetch('/api/images', {
-            method: 'POST',
-            headers: { 'Authorization': `Bearer ${token}` },
-            body: formData,
-        });
-        const json = await res.json();
-        return json.imageUrl;
-    };
-
     const handlePaste = (e) => {
         const items = e.clipboardData?.items;
         if (!items) return;
@@ -243,6 +202,7 @@ function QnADetailPage() {
         }
     };
 
+    // ── 댓글 등록 ────────────────────────────────────
     const handleCommentSubmit = async () => {
         const text = commentText.trim();
         if (!text) return;
@@ -259,7 +219,7 @@ function QnADetailPage() {
             if (!res.ok) throw new Error();
             const json = await res.json();
             if (json.isSuccess) {
-                // isResolved를 응답값으로 직접 반영
+                // 댓글 등록 응답값으로 해결 상태 반영
                 setQuestion(prev => ({ ...prev, isResolved: json.result.isResolved }));
 
                 const newComment = {
@@ -285,6 +245,53 @@ function QnADetailPage() {
         }
     };
 
+    // ── 댓글 삭제 ────────────────────────────────────
+    const handleCommentDelete = async (commentId) => {
+        if (!window.confirm('댓글을 삭제할까요?')) return;
+        try {
+            const res = await authFetch(`/api/comments/${commentId}`, { method: 'DELETE' });
+            if (!res.ok) throw new Error();
+            setQuestion(prev => ({
+                ...prev,
+                comments: prev.comments.filter(c => c.commentId !== commentId),
+            }));
+        } catch (err) {
+            console.error('댓글 삭제 실패:', err);
+        }
+        setCommentMenuId(null);
+    };
+
+    // ── 댓글 수정 ────────────────────────────────────
+    const handleCommentEditStart = (comment) => {
+        setEditingCommentId(comment.commentId);
+        setEditCommentText(comment.content);
+        setCommentMenuId(null);
+    };
+
+    const handleCommentEditSubmit = async (commentId) => {
+        const text = editCommentText.trim();
+        if (!text) return;
+        try {
+            const res = await authFetch(`/api/comments/${commentId}`, {
+                method: 'PATCH',
+                body: JSON.stringify({ content: text }),
+            });
+            if (!res.ok) throw new Error();
+            const json = await res.json();
+            if (json.isSuccess) {
+                setQuestion(prev => ({
+                    ...prev,
+                    comments: prev.comments.map(c =>
+                        c.commentId === commentId ? { ...c, content: text } : c
+                    ),
+                }));
+                setEditingCommentId(null);
+            }
+        } catch (err) {
+            console.error('댓글 수정 실패:', err);
+        }
+    };
+
     if (loading) return <div className={styles.page}>불러오는 중...</div>;
     if (!question) return <div className={styles.page}>질문을 찾을 수 없어요</div>;
 
@@ -293,18 +300,19 @@ function QnADetailPage() {
     return (
         <div className={styles.page}>
 
-            {/* 작성자 행 */}
+            {/* ── 작성자 행 ── */}
             <div className={styles.authorRow}>
                 <div className={styles.avatar}>
                     <img src={profileImg} alt={question.displayName} className={styles.avatarImg} />
                 </div>
                 <div className={styles.authorInfo}>
                     <span className={styles.authorName}>익명</span>
-                    <span className={styles.authorDate}>{formatDate(question.createdAt)}</span>
+                    <span className={styles.authorDate}>{formatTime(question.createdAt)}</span>
                 </div>
                 {(isMyQuestion || isStaff) && (
                     <div className={styles.menuWrapper}>
-                        <button className={styles.menuBtn} aria-label="더보기" onClick={(e) => { e.stopPropagation(); setShowMenu(prev => !prev); }}>
+                        <button className={styles.menuBtn} aria-label="더보기"
+                            onClick={(e) => { e.stopPropagation(); setShowMenu(prev => !prev); }}>
                             <FiMoreVertical size={20} />
                         </button>
                         {showMenu && (
@@ -329,7 +337,7 @@ function QnADetailPage() {
                 )}
             </div>
 
-            {/* 상단 바: 해결 여부 */}
+            {/* ── 해결 여부 뱃지 ── */}
             <div className={styles.topBar}>
                 {question.isResolved ? (
                     <span className={styles.solvedBadge}>해결 질문</span>
@@ -338,7 +346,7 @@ function QnADetailPage() {
                 )}
             </div>
 
-            {/* 질문 내용 */}
+            {/* ── 질문 본문 ── */}
             <div className={styles.questionTitle}>
                 <span className={`${styles.qIcon} ${question.isResolved ? styles.qIconResolved : ''}`}>Q.</span>
                 {isEditing ? (
@@ -359,12 +367,12 @@ function QnADetailPage() {
                 )}
             </div>
 
-            {/* 첨부 이미지 */}
+            {/* ── 질문 첨부 이미지 ── */}
             {question.imageUrl && (
                 <img src={question.imageUrl} alt="첨부 이미지" className={styles.questionImage} />
             )}
 
-            {/* 액션 버튼 */}
+            {/* ── 액션 버튼 (좋아요 / 댓글달기) ── */}
             <div className={styles.actionRow}>
                 <button
                     className={`${styles.likeBtn} ${question.isLiked ? styles.liked : ''}`}
@@ -382,10 +390,12 @@ function QnADetailPage() {
 
             <hr className={styles.divider} />
 
-            {/* 댓글 목록 */}
+            {/* ── 댓글 목록 ── */}
             <div className={styles.commentList}>
                 {question.comments?.map(comment => (
                     <div key={comment.commentId} className={styles.commentBlock}>
+
+                        {/* 댓글 작성자 행 */}
                         <div className={styles.commentAuthorRow}>
                             <div className={styles.commentAvatar}>
                                 <img src={profileImg} alt={comment.displayName} className={styles.commentAvatarImg} />
@@ -396,6 +406,7 @@ function QnADetailPage() {
                                     <span className={styles.staffBadge}><StaffCheck /></span>
                                 )}
                             </span>
+                            {/* 본인 댓글만 수정/삭제 메뉴 표시 */}
                             {comment.isMine && (
                                 <div className={styles.commentMenuWrapper}>
                                     <button
@@ -413,6 +424,8 @@ function QnADetailPage() {
                                 </div>
                             )}
                         </div>
+
+                        {/* 댓글 말풍선 */}
                         <div className={styles.commentBubble}>
                             {editingCommentId === comment.commentId ? (
                                 <div className={styles.commentEditWrapper}>
@@ -437,14 +450,14 @@ function QnADetailPage() {
                                 <img src={comment.imageUrl} alt="댓글 첨부 이미지" className={styles.commentImage} />
                             )}
                         </div>
-                        <p className={styles.commentDate}>{formatDate(comment.createdAt)}</p>
+                        <p className={styles.commentDate}>{formatTime(comment.createdAt)}</p>
                     </div>
                 ))}
             </div>
 
             <div className={styles.bottomCover} />
 
-            {/* 댓글 입력 바 */}
+            {/* ── 하단 댓글 입력바 ── */}
             <div className={styles.commentInputBar}>
                 {imagePreview && (
                     <div className={styles.imagePreviewWrapper}>
diff --git a/frontend/src/pages/qna/QnADetailPage.module.css b/frontend/src/pages/qna/QnADetailPage.module.css
index b79c687..e75dca6 100644
--- a/frontend/src/pages/qna/QnADetailPage.module.css
+++ b/frontend/src/pages/qna/QnADetailPage.module.css
@@ -1,4 +1,4 @@
-/* ── 전체 페이지 ── */
+/* ── 페이지 레이아웃 ── */
 .page {
     display: flex;
     flex-direction: column;
@@ -12,40 +12,10 @@
     box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.25);
 }
 
-/* ── 상단 헤더 (해결 여부 뱃지) ── */
-.topBar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 0 10px;
-}
-
-.solvedBadge {
-    font-family: var(--font-main);
-    font-size: 0.78rem;
-    font-weight: 600;
-    color: var(--black);
-    background: var(--gray20);
-    border-radius: 20px;
-    padding: 3px 10px;
-    letter-spacing: 0.01em;
-}
-
-.unsolvedBadge {
-    font-family: var(--font-main);
-    font-size: 0.78rem;
-    font-weight: 600;
-    color: var(--black);
-    background: var(--light);
-    border-radius: 20px;
-    padding: 3px 10px;
-}
-
 /* ── 작성자 행 ── */
 .authorRow {
     display: flex;
     align-items: flex-start;
-
     gap: 10px;
     margin-bottom: 5px;
 }
@@ -86,10 +56,15 @@
 
 .authorDate {
     font-family: var(--font-main);
-    font-size: 0.75rem;
+    font-size: 12px;
     color: var(--gray200);
 }
 
+/* ── 질문 메뉴 (점 세 개) ── */
+.menuWrapper {
+    position: relative;
+}
+
 .menuBtn {
     background: none;
     border: none;
@@ -98,7 +73,6 @@
     padding: 4px;
     display: flex;
     align-items: center;
-
 }
 
 .dropdownMenu {
@@ -120,7 +94,7 @@
     border: none;
     background: none;
     font-family: var(--font-main);
-    font-size: 0.9rem;
+    font-size: 14px;
     color: var(--black);
     cursor: pointer;
     text-align: left;
@@ -130,6 +104,80 @@
     background: var(--gray20);
 }
 
+/* ── 해결 여부 뱃지 ── */
+.topBar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 0 10px;
+}
+
+.solvedBadge {
+    font-family: var(--font-main);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--black);
+    background: var(--gray20);
+    border-radius: 20px;
+    padding: 3px 10px;
+    letter-spacing: 0.01em;
+}
+
+.unsolvedBadge {
+    font-family: var(--font-main);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--black);
+    background: var(--light);
+    border-radius: 20px;
+    padding: 3px 10px;
+}
+
+/* ── 질문 본문 ── */
+.questionTitle {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    padding-bottom: 5px;
+}
+
+.qIcon {
+    font-family: var(--font-main);
+    font-size: 36px;
+    font-weight: 900;
+    color: var(--main);
+    line-height: 1.1;
+    flex-shrink: 0;
+}
+
+.qIconResolved {
+    color: var(--gray600);
+}
+
+.questionText {
+    font-family: var(--font-main);
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--black);
+    line-height: 1.3;
+    word-break: keep-all;
+    padding-top: 4px;
+}
+
+/* ── 질문 수정 입력창 ── */
+.editWrapper {
+    flex: 1;
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.editButtons {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
 .editInput {
     flex: 1;
     font-family: var(--font-main);
@@ -152,7 +200,7 @@
     border-radius: 6px;
     padding: 4px 10px;
     font-family: var(--font-main);
-    font-size: 0.85rem;
+    font-size: 14px;
     cursor: pointer;
     white-space: nowrap;
 }
@@ -164,39 +212,12 @@
     border-radius: 6px;
     padding: 4px 10px;
     font-family: var(--font-main);
-    font-size: 0.85rem;
+    font-size: 14px;
     cursor: pointer;
     white-space: nowrap;
 }
 
-/* ── 질문 본문 ── */
-.questionTitle {
-    display: flex;
-    align-items: flex-start;
-    gap: 6px;
-    padding-bottom: 5px;
-}
-
-.qIcon {
-    font-family: var(--font-main);
-    font-size: 36px;
-    font-weight: 900;
-    color: var(--main);
-    line-height: 1.1;
-    flex-shrink: 0;
-}
-
-.questionText {
-    font-family: var(--font-main);
-    font-size: 24px;
-    font-weight: 600;
-    color: var(--black);
-    line-height: 1.3;
-    word-break: keep-all;
-    padding-top: 4px;
-}
-
-/* ── 첨부 이미지 ── */
+/* ── 질문 첨부 이미지 ── */
 .questionImage {
     width: 100%;
     border-radius: 12px;
@@ -205,7 +226,7 @@
     margin-bottom: 18px;
 }
 
-/* ── 액션 버튼 행 ── */
+/* ── 액션 버튼 행 (좋아요 / 댓글달기) ── */
 .actionRow {
     display: flex;
     align-items: center;
@@ -221,7 +242,7 @@
     border: none;
     cursor: pointer;
     font-family: var(--font-main);
-    font-size: 0.85rem;
+    font-size: 14px;
     color: var(--gray600);
     padding: 4px 10px 4px 8px;
     background: var(--gray50);
@@ -242,7 +263,7 @@
     border: none;
     cursor: pointer;
     font-family: var(--font-main);
-    font-size: 0.85rem;
+    font-size: 14px;
     color: var(--gray600);
     padding: 4px 10px;
     background: var(--gray50);
@@ -257,8 +278,7 @@
     width: 100%;
     height: 1px;
     border: none;
-    margin: 4px 0 0;
-    margin-bottom: 20px;
+    margin: 4px 0 20px;
 }
 
 /* ── 댓글 목록 ── */
@@ -268,8 +288,11 @@
     gap: 0;
 }
 
+.commentBlock {
+    padding: 8px 0;
+}
 
-/* 댓글 작성자 행 */
+/* ── 댓글 작성자 행 ── */
 .commentAuthorRow {
     display: flex;
     align-items: center;
@@ -295,7 +318,7 @@
 
 .commentAuthorName {
     font-family: var(--font-main);
-    font-size: 0.9rem;
+    font-size: 14px;
     font-weight: 600;
     color: var(--black);
     display: flex;
@@ -303,6 +326,17 @@
     gap: 4px;
 }
 
+.staffBadge {
+    display: inline-flex;
+    align-items: center;
+}
+
+/* ── 댓글 메뉴 (점 세 개) ── */
+.commentMenuWrapper {
+    position: relative;
+    margin-left: auto;
+}
+
 /* ── 댓글 말풍선 ── */
 .commentBubble {
     margin-left: 42px;
@@ -318,7 +352,7 @@
 
 .commentContent {
     font-family: var(--font-main);
-    font-size: 0.9rem;
+    font-size: 14px;
     color: var(--black);
     font-weight: 400;
     line-height: 1.5;
@@ -341,17 +375,43 @@
     display: block;
 }
 
-
-/* 댓글 타임스탬프 */
 .commentDate {
     margin-left: 42px;
     font-family: var(--font-main);
-    font-size: 0.72rem;
+    font-size: 11px;
     color: var(--gray200);
     margin-top: 6px;
 }
 
-/* ── 댓글 입력 바 (하단 고정) ── */
+/* ── 댓글 수정 입력창 ── */
+.commentEditWrapper {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.commentEditButtons {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.editCommentInput {
+    flex: 1;
+    font-family: var(--font-main);
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--black);
+    border: 1px solid var(--gray200);
+    border-radius: 8px;
+    padding: 4px 8px;
+    resize: none;
+    outline: none;
+    line-height: 1.5;
+    width: 100%;
+}
+
+/* ── 하단 댓글 입력바 ── */
 .bottomCover {
     position: fixed;
     bottom: 0;
@@ -380,10 +440,6 @@
     gap: 4px;
 }
 
-.commentBlock {
-    padding: 8px 0;
-}
-
 .commentInputRow {
     display: flex;
     align-items: center;
@@ -398,7 +454,7 @@
     background: var(--gray20);
     border: none;
     cursor: pointer;
-    font-size: 1.2rem;
+    font-size: 19px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -406,45 +462,12 @@
     color: var(--gray600);
 }
 
-.imagePreviewWrapper {
-    position: relative;
-    display: inline-block;
-    margin: 4px 0 0 12px;
-    overflow: visible;
-    align-self: flex-start;
-}
-
-.imagePreview {
-    width: 80px;
-    height: 80px;
-    object-fit: cover;
-    border-radius: 8px;
-}
-
-.imageRemoveBtn {
-    position: absolute;
-    top: -6px;
-    right: -6px;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background: var(--gray600);
-    color: var(--white);
-    border: none;
-    cursor: pointer;
-    font-size: 0.7rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 101;
-}
-
 .commentInput {
     flex: 1;
     border: none;
     background: none;
     font-family: var(--font-main);
-    font-size: 1rem;
+    font-size: 16px;
     color: var(--black);
     outline: none;
     height: 100%;
@@ -474,62 +497,36 @@
     cursor: default;
 }
 
-/* ── 스태프 뱃지 ── */
-.staffBadge {
-    display: inline-flex;
-    align-items: center;
-}
-
-
-.editCommentInput {
-    flex: 1;
-    font-family: var(--font-main);
-    font-size: 0.9rem;
-    font-weight: 400;
-    color: var(--black);
-    border: 1px solid var(--gray200);
-    border-radius: 8px;
-    padding: 4px 8px;
-    resize: none;
-    outline: none;
-    line-height: 1.5;
-    width: 100%;
-}
-
-.commentEditWrapper {
-    display: flex;
-    gap: 8px;
-    align-items: flex-start;
-}
-
-.commentEditButtons {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.menuWrapper {
-    position: relative;
-}
-
-.commentMenuWrapper {
+/* ── 이미지 미리보기 ── */
+.imagePreviewWrapper {
     position: relative;
-    margin-left: auto;
-}
-
-.qIconResolved {
-    color: var(--gray600);
+    display: inline-block;
+    margin: 4px 0 0 12px;
+    overflow: visible;
+    align-self: flex-start;
 }
 
-.editWrapper {
-    flex: 1;
-    display: flex;
-    gap: 8px;
-    align-items: flex-start;
+.imagePreview {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 8px;
 }
 
-.editButtons {
+.imageRemoveBtn {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--gray600);
+    color: var(--white);
+    border: none;
+    cursor: pointer;
+    font-size: 11px;
     display: flex;
-    flex-direction: column;
-    gap: 4px;
+    align-items: center;
+    justify-content: center;
+    z-index: 101;
 }
\ No newline at end of file
diff --git a/frontend/src/pages/qna/QnAListPage.js b/frontend/src/pages/qna/QnAListPage.js
index e4ff1ef..5afae11 100644
--- a/frontend/src/pages/qna/QnAListPage.js
+++ b/frontend/src/pages/qna/QnAListPage.js
@@ -6,16 +6,11 @@ import { authFetch } from '../../utils/Api';
 import {
     CommentImoji, MeCuriousToo, SortBtn,
     OBtn, XBtn, CommentCommentArraw, SumitBtn, StaffCheck, ImgPreview,
-} from '../../components/qna_svg';
+    DAY_PART_KO, DAY_OF_WEEK_KO, uploadImage,
+} from '../../utils/qnaUtils';
 
 const MAX_VISIBLE_COMMENTS = 3;
 
-const DAY_PART_KO = { AM: '오전', PM: '오후' };
-const DAY_OF_WEEK_KO = {
-    MONDAY: '월', TUESDAY: '화', WEDNESDAY: '수',
-    THURSDAY: '목', FRIDAY: '금', SATURDAY: '토', SUNDAY: '일',
-};
-
 function QnAListPage() {
     const { sessionId } = useParams();
     const navigate = useNavigate();
@@ -23,34 +18,39 @@ function QnAListPage() {
     const isPast = location.state?.status === 'AFTER_SESSION';
     const isStaff = localStorage.getItem('role') === 'ADMIN';
 
+    // ── 세션 / 이해도 상태 ──────────────────────────
     const [sessionTitle, setSessionTitle] = useState('');
     const [understanding, setUnderstanding] = useState(null);
     const [understandingIndex, setUnderstandingIndex] = useState(0);
     const [myChoices, setMyChoices] = useState({});
 
+    // ── 질문 목록 상태 ───────────────────────────────
     const [popularQuestions, setPopularQuestions] = useState([]);
     const [unresolvedQuestions, setUnresolvedQuestions] = useState([]);
     const [resolvedQuestions, setResolvedQuestions] = useState([]);
 
+    // ── 필터 / 정렬 상태 ─────────────────────────────
     const [filterCurious, setFilterCurious] = useState(false);
     const [filterUnsolved, setFilterUnsolved] = useState(false);
     const [sortOrder, setSortOrder] = useState('정렬');
     const [showSortMenu, setShowSortMenu] = useState(false);
 
+    // ── 댓글 입력 상태 ───────────────────────────────
     const [commentOpenId, setCommentOpenId] = useState(null);
     const [commentInputs, setCommentInputs] = useState({});
+    const [commentImages, setCommentImages] = useState({});
+    const [commentImagePreviews, setCommentImagePreviews] = useState({});
+    const commentFileRefs = useRef({});
+
+    // ── 새 질문 / 이해도 입력 상태 ──────────────────
     const [newQuestion, setNewQuestion] = useState('');
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [submitError, setSubmitError] = useState(null);
     const [selectedImage, setSelectedImage] = useState(null);
     const [imagePreview, setImagePreview] = useState(null);
-    const [commentImages, setCommentImages] = useState({});
-    const [commentImagePreviews, setCommentImagePreviews] = useState({});
-    const commentFileRefs = useRef({});
-
     const fileInputRef = useRef(null);
 
-
+    // ── 질문 목록 불러오기 ───────────────────────────
     const fetchQuestions = useCallback(async (index) => {
         try {
             const res = await authFetch(`/api/sessions/${sessionId}/questions?understandingIndex=${index}`);
@@ -69,7 +69,7 @@ function QnAListPage() {
                 ...(questions.resolvedQuestions ?? []),
             ];
 
-            // 이미지 blob URL 변환만 처리 (개별 API 호출 제거)
+            // 질문 이미지 blob URL 변환
             const withBlob = await Promise.all(
                 allQ.map(async (q) => {
                     let blobImageUrl = null;
@@ -104,6 +104,7 @@ function QnAListPage() {
         if (sessionId) fetchQuestions(understandingIndex);
     }, [sessionId, understandingIndex, fetchQuestions]);
 
+    // ── 이해도 네비게이션 ────────────────────────────
     const goPrevUnderstand = () => {
         if (understanding?.hasOlder) setUnderstandingIndex(prev => prev + 1);
     };
@@ -111,6 +112,7 @@ function QnAListPage() {
         if (understanding?.hasNewer) setUnderstandingIndex(prev => prev - 1);
     };
 
+    // ── 이해도 O/X 선택 ──────────────────────────────
     const handleUnderstandChoice = async (choice) => {
         if (!understanding?.current?.checkId) return;
         const checkId = understanding.current.checkId;
@@ -141,6 +143,7 @@ function QnAListPage() {
         }
     };
 
+    // ── 좋아요 토글 ──────────────────────────────────
     const toggleLike = async (e, questionId) => {
         e.stopPropagation();
         if (isPast) return;
@@ -163,6 +166,7 @@ function QnAListPage() {
         }
     };
 
+    // ── 댓글 입력창 토글 ─────────────────────────────
     const toggleCommentInput = (e, questionId) => {
         e.stopPropagation();
         if (isPast) return;
@@ -173,6 +177,7 @@ function QnAListPage() {
         setCommentInputs(prev => ({ ...prev, [questionId]: value }));
     };
 
+    // ── 댓글 등록 ────────────────────────────────────
     const handleCommentSubmit = async (e, questionId) => {
         e.stopPropagation();
         const text = (commentInputs[questionId] || '').trim();
@@ -220,25 +225,7 @@ function QnAListPage() {
         }
     };
 
-    const handleImageSelect = (e) => {
-        const file = e.target.files[0];
-        if (!file) return;
-        setSelectedImage(file);
-        setImagePreview(URL.createObjectURL(file));
-    };
-
-    const uploadImage = async (file) => {
-        const formData = new FormData();
-        formData.append('file', file);
-        const token = localStorage.getItem('token');
-        const res = await fetch('/api/images', {
-            method: 'POST',
-            headers: { 'Authorization': `Bearer ${token}` },
-            body: formData,
-        });
-        const json = await res.json();
-        return json.imageUrl;
-    };
+    // ── 댓글 이미지 선택 / 붙여넣기 ─────────────────
     const handleCommentImageSelect = (e, questionId) => {
         const file = e.target.files[0];
         if (!file) return;
@@ -260,6 +247,16 @@ function QnAListPage() {
             }
         }
     };
+
+    // ── 질문 이미지 선택 ─────────────────────────────
+    const handleImageSelect = (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+        setSelectedImage(file);
+        setImagePreview(URL.createObjectURL(file));
+    };
+
+    // ── 새 질문 등록 ─────────────────────────────────
     const handleNewQuestion = async () => {
         const text = newQuestion.trim();
         if (!text) return;
@@ -290,6 +287,7 @@ function QnAListPage() {
         }
     };
 
+    // ── 이해도 체크 등록 (운영진 전용) ──────────────
     const handleNewUnderstandCheck = async () => {
         const text = newQuestion.trim();
         if (!text) return;
@@ -315,6 +313,7 @@ function QnAListPage() {
         }
     };
 
+    // ── 질문 목록 필터 / 정렬 ────────────────────────
     const allQuestions = [
         ...popularQuestions,
         ...unresolvedQuestions.filter(q => !popularQuestions.some(p => p.questionId === q.questionId)),
@@ -341,6 +340,7 @@ function QnAListPage() {
         <div className={styles.page}>
             <h1 className={styles.title}>{sessionTitle}</h1>
 
+            {/* ── 필터 / 정렬 행 ── */}
             <div className={styles.filterRow}>
                 {isStaff ? (
                     <label className={styles.curiousLabel}>
@@ -375,7 +375,7 @@ function QnAListPage() {
             </div>
             <hr className={styles.divider} />
 
-            {/* 이해도 */}
+            {/* ── 이해도 바 ── */}
             <div className={styles.understandBar}>
                 <button className={styles.arrowBtn} onClick={goPrevUnderstand}
                     disabled={!understanding?.hasOlder}>
@@ -391,7 +391,7 @@ function QnAListPage() {
                 <button
                     className={`${styles.oxBtn} ${styles.oxO} ${currentChoice === 'UNDERSTOOD' ? styles.oxActive : ''}`}
                     onClick={() => handleUnderstandChoice('UNDERSTOOD')}
-                    disabled={isStaff || isPast}  // ← isPast 추가
+                    disabled={isStaff || isPast}
                 >
                     <OBtn />
                     {isStaff && <span className={styles.oxCount}>{understanding?.current?.understoodCount ?? 0}</span>}
@@ -399,7 +399,7 @@ function QnAListPage() {
                 <button
                     className={`${styles.oxBtn} ${styles.oxX} ${currentChoice === 'NOT_UNDERSTOOD' ? styles.oxActive : ''}`}
                     onClick={() => handleUnderstandChoice('NOT_UNDERSTOOD')}
-                    disabled={isStaff || isPast}  // ← isPast 추가
+                    disabled={isStaff || isPast}
                 >
                     <XBtn />
                     {isStaff && <span className={styles.oxCount}>{understanding?.current?.notUnderstoodCount ?? 0}</span>}
@@ -410,11 +410,13 @@ function QnAListPage() {
                 </button>
             </div>
 
-            {/* 질문 목록 */}
+            {/* ── 질문 목록 ── */}
             <div className={styles.questionList}>
                 {displayedQuestions.map(question => (
                     <div key={question.questionId} className={styles.questionCard}
                         onClick={() => navigate(`/sessions/${sessionId}/questions/${question.questionId}`)}>
+
+                        {/* 질문 헤더 */}
                         <div className={styles.questionHeader}>
                             <span
                                 className={styles.qIcon}
@@ -437,12 +439,14 @@ function QnAListPage() {
                             </div>
                         </div>
 
+                        {/* 질문 첨부 이미지 */}
                         {question.imageUrl && (
                             <img src={question.imageUrl} alt="첨부 이미지"
                                 className={styles.questionImage}
                                 onClick={e => e.stopPropagation()} />
                         )}
 
+                        {/* 댓글 미리보기 */}
                         {question.previewComments?.length > 0 && (
                             <div className={styles.commentPreview}>
                                 {question.previewComments.slice(0, MAX_VISIBLE_COMMENTS).map(comment => (
@@ -479,6 +483,7 @@ function QnAListPage() {
                             </div>
                         )}
 
+                        {/* 댓글 입력창 */}
                         {commentOpenId === question.questionId && (
                             <div className={styles.commentInputRow} onClick={e => e.stopPropagation()}>
                                 {commentImagePreviews[question.questionId] && (
@@ -530,6 +535,7 @@ function QnAListPage() {
 
             <div className={styles.bottomCover} />
 
+            {/* ── 하단 입력바 (지난 세션이면 숨김) ── */}
             {!isPast && (
                 <div className={styles.newQuestionBar}>
                     {submitError && <p className={styles.errorMsg}>{submitError}</p>}
@@ -543,7 +549,8 @@ function QnAListPage() {
                         </div>
                     )}
                     <div className={styles.newQuestionInputRow}>
-                        {!isStaff && (  // ← 스태프일 때 + 버튼 숨김
+                        {/* 운영진일 때 + 버튼 숨김 */}
+                        {!isStaff && (
                             <>
                                 <button
                                     className={styles.newQuestionPlus}
@@ -559,8 +566,7 @@ function QnAListPage() {
                             </>
                         )}
                         <input
-                            className={styles.newQuestionInput}
-                            style={isStaff ? { paddingLeft: '10px' } : {}}
+                            className={`${styles.newQuestionInput} ${isStaff ? styles.newQuestionInputStaff : ''}`}
                             placeholder={isStaff ? '부원들의 이해도를 체크해보세요' : '질문을 남겨주세요...'}
                             value={newQuestion}
                             onChange={e => setNewQuestion(e.target.value)}
diff --git a/frontend/src/pages/qna/QnAListPage.module.css b/frontend/src/pages/qna/QnAListPage.module.css
index c861038..9b32d7a 100644
--- a/frontend/src/pages/qna/QnAListPage.module.css
+++ b/frontend/src/pages/qna/QnAListPage.module.css
@@ -1,3 +1,4 @@
+/* ── 페이지 레이아웃 ── */
 .page {
     display: flex;
     flex-direction: column;
@@ -5,15 +6,15 @@
     max-width: 780px;
     margin: 0 auto;
     padding-bottom: 140px;
-    padding-left: 1rem;
-    padding-right: 1rem;
+    padding-left: 16px;
+    padding-right: 16px;
     box-sizing: border-box;
 }
 
-/* 상단 */
+/* ── 상단 타이틀 ── */
 .title {
     font-family: var(--font-main);
-    font-size: 2rem;
+    font-size: 32px;
     text-align: center;
     margin: 10px;
     color: var(--black);
@@ -22,21 +23,21 @@
     line-height: normal;
 }
 
-
+/* ── 필터 / 정렬 행 ── */
 .filterRow {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 0.75rem;
-    padding: 0.5rem 1rem;
+    gap: 12px;
+    padding: 8px 16px;
 }
 
 .curiousLabel {
     display: flex;
     align-items: center;
-    gap: 0.3rem;
+    gap: 5px;
     font-family: var(--font-main);
-    font-size: 0.8rem;
+    font-size: 13px;
     color: var(--gray600);
     cursor: pointer;
 }
@@ -55,14 +56,13 @@
 .sortBtn {
     background: none;
     border: 1px solid var(--gray600);
-    border-radius: 6px;
-    padding: 0.25rem 0.6rem;
+    border-radius: 20px;
+    padding: 4px 10px;
     font-family: var(--font-main);
-    font-size: 0.8rem;
+    font-size: 13px;
     color: var(--gray600);
     cursor: pointer;
     white-space: nowrap;
-    border-radius: 20px;
 }
 
 .sortMenu {
@@ -75,15 +75,15 @@
     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
     list-style: none;
     margin: 0;
-    padding: 0.25rem 0;
+    padding: 4px 0;
     z-index: 10;
     min-width: 110px;
 }
 
 .sortOption {
-    padding: 0.5rem 1rem;
+    padding: 8px 16px;
     font-family: var(--font-main);
-    font-size: 0.85rem;
+    font-size: 14px;
     color: var(--black);
     cursor: pointer;
     white-space: nowrap;
@@ -98,6 +98,7 @@
     background: var(--gray200);
 }
 
+/* ── 구분선 ── */
 .divider {
     background: var(--gray200);
     width: 100%;
@@ -105,13 +106,13 @@
     border: none;
 }
 
-/*이해도*/
+/* ── 이해도 바 ── */
 .understandBar {
     margin-top: 20px;
+    margin-bottom: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 20px;
     border-radius: 10px;
     border: 1px solid var(--dark);
     background: var(--white);
@@ -152,16 +153,17 @@
     font-size: 18px;
 }
 
+/* ── O/X 버튼 ── */
 .oxBtn {
     border: none;
-    font-size: 0.85rem;
+    font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.15s, border-color 0.15s;
-    margin: 0 0.2rem;
+    margin: 0 3px;
     width: 36px;
     height: 36px;
     aspect-ratio: 1/1;
@@ -180,15 +182,12 @@
     color: var(--dark);
 }
 
-
-
-/*질문*/
-.questionList {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    align-items: center;
-
+.oxBtn:disabled {
+    cursor: default;
+    background: var(--pale);
+    width: 70px;
+    height: 36px;
+    color: var(--dark);
 }
 
 .oxCount {
@@ -199,16 +198,16 @@
     font-weight: 500;
 }
 
-.oxBtn:disabled {
-    cursor: default;
-    background: var(--pale);
-    width: 70px;
-    height: 36px;
-    color: var(--dark);
+/* ── 질문 목록 ── */
+.questionList {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    align-items: center;
 }
 
 .questionCard {
-    padding: 0.85rem 1rem;
+    padding: 14px 16px;
     cursor: pointer;
     transition: box-shadow 0.2s;
     border-radius: 30px;
@@ -223,11 +222,10 @@
     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
 }
 
-
 .questionHeader {
     display: flex;
     align-items: center;
-    gap: 0.4rem;
+    gap: 6px;
 }
 
 .qIcon {
@@ -253,14 +251,14 @@
 .questionActions {
     display: flex;
     align-items: center;
-    gap: 0.6rem;
+    gap: 10px;
     flex-shrink: 0;
-    margin-left: 0.5rem;
+    margin-left: 8px;
 }
 
 .likeBtn {
-    justify-content: center;
     display: flex;
+    justify-content: center;
     align-items: center;
     gap: 7px;
     border: none;
@@ -270,11 +268,10 @@
     color: var(--gray600);
     padding: 0 3px 0 0;
     transition: color 0.15s;
-    width: 37.5px;
+    width: 38px;
     height: 25px;
     background-color: var(--gray50);
     border-radius: 10px;
-
 }
 
 .likeBtn.liked {
@@ -283,8 +280,8 @@
 }
 
 .commentBtn {
-    justify-content: center;
     display: flex;
+    justify-content: center;
     align-items: center;
     gap: 2px;
     border: none;
@@ -298,10 +295,8 @@
     background: var(--gray50);
     width: 87px;
     height: 25px;
-
 }
 
-
 .questionImage {
     width: 100%;
     border-radius: 8px;
@@ -310,7 +305,6 @@
     display: block;
 }
 
-
 /* ── 댓글 미리보기 ── */
 .commentPreview {
     margin-top: 26px;
@@ -320,33 +314,27 @@
     padding-left: 20px;
     border-top: 1px solid var(--gray200);
     padding-top: 17px;
-
 }
 
 .commentWrapper {
     display: flex;
     flex-direction: column;
-    gap: 0.15rem;
-
+    gap: 2px;
 }
 
-
-
 .commentItem {
     display: flex;
     flex-direction: column;
-    gap: 0.15rem;
+    gap: 2px;
     border-radius: 5px 20px 20px 20px;
     background: var(--gray50);
-    padding: 0.5rem 0.8rem;
+    padding: 8px 13px;
     max-width: 93%;
-
-
 }
 
 .commentAuthorName {
     font-family: var(--font-main);
-    font-size: 0.78rem;
+    font-size: 12px;
     font-weight: 500;
     color: var(--black);
     display: flex;
@@ -362,7 +350,7 @@
 
 .commentContent {
     font-family: var(--font-main);
-    font-size: 0.82rem;
+    font-size: 13px;
     color: var(--black);
     font-weight: 400;
     line-height: normal;
@@ -371,32 +359,54 @@
     gap: 4px;
 }
 
+.commentContent svg {
+    flex-shrink: 0;
+}
+
 .commentMore {
     font-family: var(--font-main);
-    font-size: 0.78rem;
+    font-size: 12px;
     color: var(--gray600);
     cursor: pointer;
     text-decoration: underline;
-    margin-top: 0.1rem;
+    margin-top: 2px;
 }
 
 .commentMore:hover {
     color: var(--black);
 }
 
+/* ── 댓글 이미지 미리보기 태그 ── */
+.commentImagePreview {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    font-family: var(--font-main);
+    font-size: 12px;
+    color: var(--gray600);
+    background: var(--gray200);
+    border-radius: 6px;
+    padding: 3px 8px;
+    width: fit-content;
+    margin-top: 4px;
+    cursor: pointer;
+    line-height: 1;
+    height: 22px;
+}
 
+.commentImagePreview svg {
+    display: block;
+    flex-shrink: 0;
+}
 
-/* ── 댓글 입력 행 ── */
+/* ── 댓글 입력창 ── */
 .commentInputRow {
     display: flex;
     flex-direction: column;
     margin-top: 19px;
 }
 
-.commentContent svg {
-    flex-shrink: 0;
-}
-
 .commentInputInner {
     display: flex;
     align-items: center;
@@ -442,29 +452,6 @@
     outline: none;
 }
 
-.commentImagePreview svg {
-    display: block;
-}
-
-.commentImagePreview {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-
-    gap: 4px;
-    font-family: var(--font-main);
-    font-size: 0.78rem;
-    color: var(--gray600);
-    background: var(--gray200);
-    border-radius: 6px;
-    padding: 3px 8px;
-    width: fit-content;
-    margin-top: 4px;
-    cursor: pointer;
-    line-height: 1;
-}
-
 .commentInput::placeholder {
     color: var(--gray200);
 }
@@ -489,8 +476,7 @@
     display: block;
 }
 
-/* ── 하단 새 질문 입력바 ── */
-
+/* ── 하단 새 질문 / 이해도 입력바 ── */
 .newQuestionBar {
     position: fixed;
     bottom: 20px;
@@ -515,23 +501,21 @@
     left: 0;
     right: 0;
     height: 80px;
-    background: linear-gradient(to bottom,
-            transparent,
-            var(--white) 60%);
+    background: linear-gradient(to bottom, transparent, var(--white) 60%);
     z-index: 99;
 }
 
 .errorMsg {
     font-family: var(--font-main);
-    font-size: 0.78rem;
+    font-size: 12px;
     color: #e53935;
-    margin: 0 0 0.3rem 0.5rem;
+    margin: 0 0 5px 8px;
 }
 
 .newQuestionInputRow {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 8px;
     flex: 1;
     width: 100%;
     height: 40px;
@@ -566,6 +550,11 @@
     height: 100%;
 }
 
+/* 운영진일 때 왼쪽 여백 추가 (+ 버튼 없어서 간격 보정) */
+.newQuestionInputStaff {
+    padding-left: 10px;
+}
+
 .newQuestionInput::placeholder {
     color: var(--gray200);
 }
@@ -583,12 +572,12 @@
     transition: background 0.15s;
 }
 
-
 .newQuestionSubmit:disabled {
     background: var(--gray200);
     cursor: default;
 }
 
+/* ── 이미지 미리보기 (질문/댓글 공통) ── */
 .imagePreviewWrapper {
     position: relative;
     display: inline-block;
@@ -615,7 +604,7 @@
     color: var(--white);
     border: none;
     cursor: pointer;
-    font-size: 0.7rem;
+    font-size: 11px;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/frontend/src/pages/qna/QnAMainPage.js b/frontend/src/pages/qna/QnAMainPage.js
index 15f1720..db1dcb2 100644
--- a/frontend/src/pages/qna/QnAMainPage.js
+++ b/frontend/src/pages/qna/QnAMainPage.js
@@ -3,25 +3,19 @@ import { useNavigate } from 'react-router-dom';
 import styles from './QnAMainPage.module.css';
 import { FiLogIn } from 'react-icons/fi';
 import { authFetch } from '../../utils/Api';
+import { getIcon, getTime, formatDate, DAY_OF_WEEK_KO, DAY_PART_KO } from '../../utils/qnaUtils';
 
-const DAY_PART_KO = { AM: '오전', PM: '오후' };
-
-const DAY_OF_WEEK_KO = {
-    MONDAY: '월요일', TUESDAY: '화요일', WEDNESDAY: '수요일',
-    THURSDAY: '목요일', FRIDAY: '금요일', SATURDAY: '토요일', SUNDAY: '일요일',
-};
-
-const formatDate = (dateStr) => dateStr?.replace(/-/g, '.') ?? '';
-const getIcon = (dayPart) => dayPart === 'AM' ? '☀' : '☾';
-const getTime = (dayPart) => dayPart === 'AM' ? '10:00 ~ 13:00' : '14:00 ~ 17:00';
 
 function QNAMainPage() {
     const navigate = useNavigate();
+
+    // ── 세션 목록 상태 ──────────────────────────────
     const [activeSessions, setActiveSessions] = useState([]);
     const [pastSessions, setPastSessions] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
 
+    // ── 세션 목록 불러오기 ──────────────────────────
     useEffect(() => {
         const fetchSessions = async () => {
             try {
@@ -50,7 +44,7 @@ function QNAMainPage() {
     return (
         <div className={styles.page}>
 
-            {/* 진행 중인 세션 */}
+            {/* ── 진행 중인 세션 ── */}
             {activeSessions.length > 0 && (
                 <>
                     <section className={styles.section}>
@@ -60,7 +54,6 @@ function QNAMainPage() {
                                 key={session.sessionId}
                                 className={styles.card}
                                 onClick={() => navigate(`/sessions/${session.sessionId}/questions`, { state: { status: 'IN_SESSION' } })}
-                                style={{ cursor: 'pointer' }}
                             >
                                 <p className={styles.cardTitle}>
                                     <span className={styles.icon}>{getIcon(session.dayPart)}</span>
@@ -78,28 +71,34 @@ function QNAMainPage() {
                 </>
             )}
 
-            {/* 지난 세션 */}
-            {pastSessions.map(session => (
-                <div key={session.sessionId} className={styles.listItem}
-                    onClick={() => navigate(`/sessions/${session.sessionId}/questions`, { state: { status: 'AFTER_SESSION' } })}
-                >
-                    <span>
-                        <span className={styles.icon}>{getIcon(session.dayPart)}</span>
-                        <span className={styles.listTitle}>{session.title}</span>
-                        <span className={styles.listWeek}>
-                            &nbsp;• {session.week}주차 {DAY_OF_WEEK_KO[session.dayOfWeek]} {DAY_PART_KO[session.dayPart]}
-                        </span>
-                    </span>
-                    <button
-                        className={styles.enterBtn}
-                        onClick={() => navigate(`/sessions/${session.sessionId}/questions`, { state: { status: 'AFTER_SESSION' } })}
-                    >
-                        <FiLogIn size={25} />
-                    </button>
-                </div>
-            ))}
+            {/* ── 지난 세션 ── */}
+            {pastSessions.length > 0 && (
+                <section className={styles.section}>
+                    <h2 className={styles.sectionTitle}>지난 세션</h2>
+                    <div className={styles.list}>
+                        {pastSessions.map(session => (
+                            <div
+                                key={session.sessionId}
+                                className={styles.listItem}
+                                onClick={() => navigate(`/sessions/${session.sessionId}/questions`, { state: { status: 'AFTER_SESSION' } })}
+                            >
+                                <span>
+                                    <span className={styles.icon}>{getIcon(session.dayPart)}</span>
+                                    <span className={styles.listTitle}>{session.title}</span>
+                                    <span className={styles.listWeek}>
+                                        &nbsp;• {session.week}주차 {DAY_OF_WEEK_KO[session.dayOfWeek]} {DAY_PART_KO[session.dayPart]}
+                                    </span>
+                                </span>
+                                <button className={styles.enterBtn}>
+                                    <FiLogIn size={25} />
+                                </button>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+            )}
 
-            {/* 둘 다 없을 때 */}
+            {/* ── 세션 없을 때 ── */}
             {activeSessions.length === 0 && pastSessions.length === 0 && (
                 <section className={styles.section}>
                     <p className={styles.empty}>아직 생성된 Q&A가 없어요</p>
diff --git a/frontend/src/pages/qna/QnAMainPage.module.css b/frontend/src/pages/qna/QnAMainPage.module.css
index 655d5cb..af7ee0f 100644
--- a/frontend/src/pages/qna/QnAMainPage.module.css
+++ b/frontend/src/pages/qna/QnAMainPage.module.css
@@ -1,29 +1,30 @@
+/* ── 페이지 레이아웃 ── */
 .page {
     min-height: 100vh;
     max-width: 880px;
     margin: 0 auto;
 }
 
-/*다가오는 세션*/
+/* ── 섹션 공통 ── */
 .section {
-    margin-bottom: 2rem;
+    margin-bottom: 32px;
 }
 
 .sectionTitle {
     text-align: center;
     font-family: var(--font-main);
-    font-size: 2rem;
+    font-size: 32px;
     font-weight: 700;
     color: var(--black);
-    padding: 1rem 10rem;
-    margin-bottom: 2rem;
+    padding: 16px 160px;
+    margin-bottom: 32px;
 }
 
-
+/* ── 진행 중인 세션 카드 ── */
 .card {
     background: var(--white);
     border-radius: 10px;
-    padding: 1rem;
+    padding: 16px;
     text-align: center;
     width: 356px;
     height: 148px;
@@ -41,54 +42,52 @@
     color: var(--dark);
 }
 
-
 .cardTitle {
     font-family: var(--font-main);
-    font-size: 1.5rem;
+    font-size: 24px;
     font-weight: 500;
     color: var(--black);
-    margin: 1rem 0;
+    margin: 16px 0;
 }
 
 .cardWeek {
     font-family: var(--font-main);
-    font-size: 1.1rem;
+    font-size: 18px;
     color: var(--gray600);
-    margin: 0.5rem 0;
+    margin: 8px 0;
 }
 
 .cardDate,
 .cardTime {
     font-family: var(--font-main);
-    font-size: 1.1rem;
+    font-size: 18px;
     font-weight: 500;
     color: var(--gray600);
     margin: 0;
 }
 
-
-
-/* 지난 세션 */
-.icon {
-    margin-right: 1.25rem;
-}
-
+/* ── 구분선 ── */
 .divider {
     border: none;
     border-top: 1px solid var(--gray200);
-    margin: 2rem 0;
+    margin: 32px 0;
+}
+
+/* ── 지난 세션 목록 ── */
+.icon {
+    margin-right: 20px;
 }
 
 .list {
     display: flex;
     flex-direction: column;
-    gap: 1.25rem;
+    gap: 20px;
 }
 
 .listItem {
     background: var(--white);
-    border-radius: 0.625rem;
-    padding: 1rem 1rem;
+    border-radius: 10px;
+    padding: 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -103,14 +102,14 @@
 
 .listTitle {
     font-family: var(--font-main);
-    font-size: 1.5rem;
+    font-size: 24px;
     font-weight: 500;
     color: var(--black);
 }
 
 .listWeek {
     font-family: var(--font-main);
-    font-size: 1.125rem;
+    font-size: 18px;
     font-weight: 500;
     color: var(--gray600);
 }
@@ -122,14 +121,13 @@
     color: var(--black);
 }
 
-
-
 .listItem:hover .enterBtn {
     color: var(--dark);
 }
 
+/* ── 빈 상태 ── */
 .empty {
     text-align: center;
-    color: #888;
+    color: var(--gray400);
     margin-top: 40px;
 }
\ No newline at end of file
diff --git a/frontend/src/components/qna_svg.js b/frontend/src/utils/qnaUtils.js
similarity index 93%
rename from frontend/src/components/qna_svg.js
rename to frontend/src/utils/qnaUtils.js
index b80a483..8190c0e 100644
--- a/frontend/src/components/qna_svg.js
+++ b/frontend/src/utils/qnaUtils.js
@@ -1,3 +1,6 @@
+// ── SVG 아이콘 컴포넌트 ────────────────────────────────
+
+// 댓글 아이콘
 export const CommentImoji = () => (<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
     <path d="M3.95833 4.24177C3.38304 4.24177 2.91667 4.70814 2.91667 5.28344C2.91667 5.85874 3.38304 6.32511 3.95833 6.32511C4.53363 6.32511 5 5.85874 5 5.28344C5 4.70814 4.53363 4.24177 3.95833 4.24177Z" fill="currentColor" />
     <path d="M7.29167 4.24177C6.71637 4.24177 6.25 4.70814 6.25 5.28344C6.25 5.85874 6.71637 6.32511 7.29167 6.32511C7.86696 6.32511 8.33333 5.85874 8.33333 5.28344C8.33333 4.70814 7.86696 4.24177 7.29167 4.24177Z" fill="currentColor" />
@@ -5,6 +8,7 @@ export const CommentImoji = () => (<svg xmlns="http://www.w3.org/2000/svg" width
     <path fillRule="evenodd" clipRule="evenodd" d="M10.7089 0.152431C8.46378 -0.0390355 6.20689 -0.0501471 3.95995 0.119203L3.79892 0.13134C1.65617 0.292838 0 2.07853 0 4.22736V11.3251C0 11.545 0.115555 11.7487 0.30429 11.8616C0.493026 11.9744 0.727171 11.9797 0.920865 11.8756L4.17986 10.1242C4.33145 10.0427 4.50087 10.0001 4.67297 10.0001H12.1533C13.0967 10.0001 13.9052 9.32561 14.0743 8.39749C14.417 6.51646 14.4441 4.59149 14.1544 2.70156L14.0691 2.14462C13.9136 1.13067 13.0841 0.354988 12.0621 0.267824L10.7089 0.152431ZM4.0539 1.36567C6.23419 1.20134 8.42415 1.21212 10.6027 1.39791L11.9558 1.5133C12.4028 1.55142 12.7655 1.89062 12.8335 2.33402L12.9189 2.89095C13.1875 4.64369 13.1624 6.42893 12.8446 8.17342C12.7837 8.5074 12.4928 8.75011 12.1533 8.75011H4.67297C4.29435 8.75011 3.92163 8.84391 3.58813 9.02315L1.25 10.2797V4.22736C1.25 2.73244 2.40218 1.49016 3.89287 1.3778L4.0539 1.36567Z" fill="currentColor" />
 </svg>);
 
+// 나도 궁금해요 아이콘
 export const MeCuriousToo = () => (<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
     <g clipPath="url(#clip0_245_1198)">
         <path d="M8.35213 0.0807455C8.37068 0.092755 8.38922 0.104764 8.40832 0.117138C8.42657 0.128543 8.44481 0.139948 8.4636 0.151699C8.64017 0.281158 8.76296 0.488324 8.79918 0.704012C8.8152 0.869963 8.81209 1.03635 8.81043 1.20287C8.81053 1.25859 8.8107 1.3143 8.81095 1.37002C8.81131 1.48934 8.81113 1.60864 8.81051 1.72796C8.80954 1.91671 8.80981 2.10544 8.81025 2.29419C8.81081 2.59266 8.81054 2.89111 8.80992 3.18958C8.80882 3.72439 8.8087 4.25919 8.80948 4.794C8.80972 4.98158 8.80946 5.16914 8.80882 5.35671C8.80849 5.47333 8.80852 5.58995 8.80864 5.70657C8.80862 5.76058 8.80844 5.81458 8.8081 5.86859C8.80766 5.9424 8.80776 6.0162 8.80798 6.09001C8.80772 6.11129 8.80746 6.13256 8.80719 6.15449C8.80844 6.30341 8.83926 6.40298 8.90637 6.53315C8.97989 6.59399 9.01575 6.59207 9.11145 6.58809C9.21562 6.5577 9.25042 6.53073 9.31653 6.44526C9.33407 6.34935 9.33407 6.34935 9.33114 6.23981C9.3313 6.21912 9.33146 6.19843 9.33162 6.17712C9.33201 6.10778 9.33156 6.03847 9.33113 5.96912C9.33124 5.91941 9.3314 5.86969 9.33162 5.81997C9.33197 5.71287 9.33195 5.60577 9.33166 5.49866C9.3312 5.3291 9.3316 5.15954 9.33213 4.98998C9.33303 4.66035 9.33307 4.33072 9.33302 4.00109C9.33298 3.58226 9.33328 3.16343 9.33444 2.7446C9.33488 2.57627 9.33487 2.40795 9.33451 2.23962C9.33437 2.13451 9.3346 2.02941 9.33491 1.92431C9.33498 1.87583 9.3349 1.82736 9.33466 1.77888C9.33308 1.44548 9.33314 1.11241 9.55697 0.843265C9.75752 0.643587 9.96154 0.572527 10.2375 0.547436C10.528 0.572914 10.731 0.682029 10.9352 0.886181C11.1259 1.18582 11.1202 1.46817 11.1182 1.81192C11.1183 1.86768 11.1185 1.92343 11.1187 1.97918C11.1191 2.09876 11.1191 2.21832 11.1188 2.3379C11.1183 2.527 11.1187 2.71609 11.1192 2.9052C11.1201 3.2723 11.1202 3.6394 11.1201 4.0065C11.1201 4.47421 11.1204 4.94191 11.1215 5.40961C11.122 5.59758 11.122 5.78555 11.1216 5.97352C11.1215 6.09036 11.1217 6.2072 11.122 6.32404C11.1221 6.37821 11.122 6.43237 11.1218 6.48653C11.1215 6.56048 11.1217 6.63442 11.122 6.70837C11.1218 6.72977 11.1216 6.75118 11.1214 6.77323C11.1228 6.90957 11.1473 7.00401 11.2208 7.11909C11.3169 7.16922 11.3691 7.18345 11.4753 7.16121C11.5602 7.10847 11.5866 7.06172 11.631 6.97261C11.6439 6.8921 11.6439 6.8921 11.6419 6.8057C11.6421 6.7724 11.6423 6.73909 11.6425 6.70478C11.6422 6.66851 11.642 6.63224 11.6418 6.59487C11.642 6.53591 11.6421 6.47694 11.6423 6.41797C11.6424 6.35471 11.6423 6.29145 11.6421 6.22818C11.6418 6.09604 11.6421 5.9639 11.6426 5.83176C11.6437 5.50345 11.6438 5.17513 11.6438 4.84681C11.6437 4.5918 11.6439 4.33678 11.6449 4.08177C11.6454 3.95064 11.6454 3.81953 11.6449 3.68841C11.6447 3.58724 11.6453 3.48608 11.6457 3.38492C11.6454 3.34895 11.6451 3.31297 11.6448 3.27591C11.6472 2.99064 11.7036 2.74725 11.9038 2.53505C12.1126 2.34563 12.3424 2.2734 12.6234 2.28511C12.8653 2.31862 13.0875 2.42787 13.2441 2.61653C13.4113 2.83987 13.4309 3.08842 13.4291 3.35842C13.4292 3.39191 13.4293 3.4254 13.4294 3.45991C13.4297 3.5717 13.4293 3.68348 13.429 3.79527C13.429 3.87561 13.4292 3.95594 13.4293 4.03628C13.4296 4.23164 13.4294 4.42699 13.4291 4.62234C13.4286 4.85026 13.4287 5.07818 13.4288 5.30609C13.4289 5.71317 13.4285 6.12025 13.4279 6.52733C13.4274 6.92142 13.4272 7.3155 13.4273 7.70959C13.4275 8.1394 13.4275 8.56921 13.4272 8.99902C13.4271 9.04498 13.4271 9.09094 13.4271 9.1369C13.427 9.17081 13.427 9.17081 13.427 9.2054C13.4269 9.36385 13.4269 9.52229 13.427 9.68074C13.427 9.87432 13.4269 10.0679 13.4265 10.2615C13.4262 10.36 13.4262 10.4586 13.4263 10.5571C13.4267 11.0664 13.4169 11.5621 13.2936 12.0593C13.2873 12.085 13.281 12.1108 13.2745 12.1374C13.1221 12.7373 12.8388 13.2968 12.4117 13.7453C12.3329 13.8273 12.3329 13.8273 12.2619 13.9175C11.804 14.4502 11.0361 14.7373 10.3712 14.8883C10.3515 14.8928 10.3317 14.8973 10.3114 14.902C9.87696 14.9957 9.45139 15.0107 9.00891 15.0091C8.96402 15.009 8.96402 15.009 8.91822 15.0089C8.48863 15.0077 8.06872 14.9995 7.64661 14.9121C7.62075 14.9069 7.5949 14.9017 7.56826 14.8964C6.85195 14.7492 6.18979 14.4926 5.59582 14.0624C5.57109 14.0449 5.54635 14.0273 5.52087 14.0092C5.35393 13.8834 5.20493 13.7378 5.05566 13.5919C5.03575 13.5727 5.01583 13.5536 4.99531 13.5338C4.67755 13.2171 4.43762 12.8296 4.19382 12.4554C4.14755 12.3844 4.10113 12.3134 4.05467 12.2425C3.98781 12.1405 3.921 12.0384 3.85422 11.9363C3.6767 11.665 3.49824 11.3943 3.31982 11.1236C3.30195 11.0965 3.28407 11.0693 3.26565 11.0414C3.0424 10.7025 2.81835 10.3642 2.59296 10.0268C2.49201 9.87565 2.39121 9.72442 2.29045 9.57316C2.26767 9.53898 2.24488 9.5048 2.22209 9.47062C2.15008 9.36264 2.07842 9.25442 2.00696 9.14607C1.98993 9.12056 1.9729 9.09506 1.95536 9.06878C1.70984 8.69467 1.51004 8.32083 1.5968 7.86193C1.6755 7.57085 1.82995 7.34881 2.0802 7.17768C2.40717 7.01888 2.70771 7.02574 3.04688 7.14106C3.46078 7.3133 3.71301 7.75095 3.96252 8.10218C4.0639 8.24376 4.16794 8.38339 4.27171 8.52322C4.37488 8.66264 4.47629 8.80324 4.57699 8.94445C4.59049 8.96337 4.60399 8.98228 4.6179 9.00177C4.65092 9.04803 4.68392 9.0943 4.71692 9.14057C4.71696 9.1031 4.717 9.06562 4.71705 9.02701C4.7181 8.13679 4.71974 7.24657 4.72213 6.35635C4.72242 6.24671 4.72271 6.13707 4.723 6.02742C4.72308 5.99468 4.72308 5.99468 4.72317 5.96128C4.72408 5.60816 4.72458 5.25503 4.72492 4.90191C4.72529 4.5394 4.72609 4.17689 4.72731 3.81438C4.72804 3.5908 4.72844 3.36724 4.72839 3.14366C4.72839 2.97204 4.729 2.80042 4.72984 2.6288C4.73009 2.55853 4.73014 2.48826 4.72998 2.41799C4.72978 2.32187 4.73031 2.22577 4.73101 2.12964C4.73078 2.102 4.73056 2.07435 4.73032 2.04587C4.73322 1.82032 4.79496 1.63493 4.91284 1.44282C5.10958 1.2514 5.32523 1.13496 5.60315 1.13154C5.85841 1.13619 6.06704 1.2096 6.25409 1.38606C6.52217 1.68149 6.51268 2.02471 6.51151 2.40571C6.51159 2.44973 6.5117 2.49374 6.51183 2.53776C6.51207 2.63196 6.51213 2.72616 6.51207 2.82036C6.51198 2.96933 6.51241 3.11829 6.51292 3.26725C6.51429 3.69064 6.515 4.11403 6.51519 4.53742C6.5153 4.77169 6.51582 5.00596 6.5168 5.24023C6.51739 5.38833 6.51746 5.53643 6.51714 5.68453C6.51707 5.7765 6.51748 5.86846 6.51802 5.96043C6.51818 6.00309 6.51814 6.04575 6.51788 6.08841C6.51755 6.14659 6.51801 6.20479 6.51851 6.26297C6.51855 6.29554 6.51858 6.3281 6.51861 6.36166C6.5368 6.46499 6.56857 6.49887 6.65051 6.56245C6.75846 6.5969 6.80527 6.60156 6.90869 6.5533C6.97539 6.50925 6.97539 6.50925 7.00207 6.44526C7.00504 6.37225 7.00623 6.30006 7.00612 6.22704C7.0062 6.20426 7.00628 6.18149 7.00637 6.15803C7.00661 6.0813 7.00665 6.00457 7.0067 5.92783C7.00683 5.87298 7.00698 5.81812 7.00715 5.76326C7.00748 5.64487 7.00772 5.52648 7.00791 5.40809C7.00822 5.22068 7.00882 5.03327 7.00947 4.84587C7.01128 4.31285 7.01286 3.77984 7.01383 3.24682C7.01437 2.95264 7.01522 2.65845 7.01641 2.36427C7.01703 2.20863 7.01748 2.053 7.01755 1.89737C7.01761 1.75073 7.01808 1.6041 7.01885 1.45746C7.01906 1.40385 7.01912 1.35023 7.01902 1.29662C7.0178 0.513443 7.0178 0.513443 7.29504 0.234325C7.58174 -0.0220407 8.00007 -0.110807 8.35213 0.0807455Z" fill="currentColor" />
@@ -16,6 +20,7 @@ export const MeCuriousToo = () => (<svg xmlns="http://www.w3.org/2000/svg" width
     </defs>
 </svg>);
 
+// 운영진 체크 뱃지
 export const StaffCheck = () => (<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
     <circle cx="3.9" cy="9.10019" r="3.9" fill="#09C410" />
     <circle cx="9.10019" cy="3.9" r="3.9" fill="#09C410" />
@@ -24,10 +29,12 @@ export const StaffCheck = () => (<svg xmlns="http://www.w3.org/2000/svg" width="
     <path fillRule="evenodd" clipRule="evenodd" d="M9.87698 4.12922C10.041 4.30151 10.041 4.58085 9.87698 4.75314L5.95698 8.87078C5.79296 9.04307 5.52704 9.04307 5.36302 8.87078L3.12302 6.51784C2.95899 6.34555 2.95899 6.06621 3.12302 5.89392C3.28704 5.72163 3.55296 5.72163 3.71698 5.89392L5.66 7.93491L9.28302 4.12922C9.44703 3.95693 9.71297 3.95693 9.87698 4.12922Z" fill="#F0FFF1" />
 </svg>);
 
+// 정렬 드롭다운 화살표
 export const SortBtn = () => (<svg xmlns="http://www.w3.org/2000/svg" width="11" height="6" viewBox="0 0 11 6" fill="none">
     <path fillRule="evenodd" clipRule="evenodd" d="M10.7456 0.23964C11.0848 0.55916 11.0848 1.0772 10.7456 1.39672L6.11407 5.76036C5.77493 6.07988 5.22507 6.07988 4.88593 5.76036L0.254355 1.39672C-0.0847849 1.0772 -0.0847849 0.55916 0.254355 0.23964C0.593494 -0.0798796 1.14335 -0.0798796 1.48249 0.23964L5.5 4.02473L9.51751 0.23964C9.85665 -0.07988 10.4065 -0.07988 10.7456 0.23964Z" fill="currentColor" />
 </svg>);
 
+// 이해도 O/X 버튼
 export const OBtn = () => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
     <g clipPath="url(#clip0_245_1011)">
         <path d="M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519943 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.8071 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0866C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0V0ZM12 21C10.22 21 8.47992 20.4722 6.99987 19.4832C5.51983 18.4943 4.36628 17.0887 3.68509 15.4442C3.0039 13.7996 2.82567 11.99 3.17294 10.2442C3.5202 8.49836 4.37737 6.89471 5.63604 5.63604C6.89472 4.37737 8.49836 3.5202 10.2442 3.17293C11.99 2.82567 13.7996 3.0039 15.4442 3.68508C17.0887 4.36627 18.4943 5.51983 19.4832 6.99987C20.4722 8.47991 21 10.22 21 12C20.9974 14.3861 20.0483 16.6738 18.361 18.361C16.6738 20.0483 14.3861 20.9974 12 21Z" fill="currentColor" />
@@ -46,16 +53,18 @@ export const XBtn = () => (
     </svg>
 );
 
+// 댓글 화살표
 export const CommentCommentArraw = () => (<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
     <path d="M0.98226 0.021232C1.18517 0.114543 1.3289 0.247655 1.41782 0.452652C1.44292 0.614873 1.44058 0.775259 1.43877 0.9391C1.43892 0.988297 1.43907 1.03749 1.43922 1.08818C1.43951 1.25313 1.43855 1.41805 1.4376 1.583C1.43745 1.7012 1.43757 1.8194 1.43768 1.9376C1.43777 2.19213 1.43722 2.44664 1.43624 2.70117C1.43483 3.06916 1.43437 3.43715 1.43415 3.80515C1.43377 4.40222 1.43261 4.99928 1.43097 5.59635C1.42937 6.17629 1.44605 1.77316 1.44531 2.35311C1.44526 2.38923 1.44522 2.42535 1.44517 2.46257C1.44481 2.74506 1.44447 3.02756 1.44413 3.31006C1.44249 4.6944 1.43898 6.07872 1.43574 7.46306C6.41617 7.4417 6.41617 7.4417 11.4972 7.41991C10.5054 6.43757 9.51367 5.45523 8.49184 4.44312C8.37409 4.20985 8.37691 4.00978 8.40473 3.75285C8.50351 3.54211 8.62754 3.41927 8.84029 3.32143C9.10543 3.28607 9.31932 3.27634 9.54491 3.43156C9.72458 3.57285 9.8828 3.73814 10.0444 3.89896C10.0864 3.94037 10.1283 3.98177 10.1703 4.02315C10.2837 4.13508 10.3968 4.24728 10.5099 4.35955C10.6284 4.47717 10.7471 4.59458 10.8659 4.71203C11.065 4.90916 11.264 5.10648 11.4629 5.3039C11.6928 5.53207 11.923 5.75992 12.1534 5.98762C12.3514 6.18334 12.5492 6.37922 12.7469 6.57524C12.8649 6.69224 12.9829 6.80917 13.1011 6.92595C13.2121 7.03567 13.3229 7.1456 13.4336 7.25569C13.4936 7.31529 13.5538 7.37467 13.614 7.43405C13.6496 7.46961 13.6853 7.50517 13.722 7.54181C13.7686 7.588 13.7686 7.588 13.8162 7.63513C13.9623 7.80061 13.9935 7.9297 13.9963 8.14793C13.9975 8.19142 13.9987 8.23491 14 8.27972C13.9486 8.61861 13.6301 8.85714 13.3968 9.08715C13.355 9.12869 13.3132 9.17024 13.2715 9.21181C13.1585 9.32413 13.0452 9.43618 12.9318 9.54817C12.8131 9.66557 12.6945 9.78319 12.576 9.90077C12.3769 10.0981 12.1777 10.2952 11.9784 10.4922C11.7481 10.7199 11.518 10.9479 11.2881 11.176C11.0905 11.3722 10.8928 11.5681 10.6949 11.7639C10.5768 11.8807 10.4587 11.9977 10.3408 12.1147C10.23 12.2247 10.119 12.3345 10.0079 12.444C9.94772 12.5035 9.88777 12.5631 9.82782 12.6228C9.79192 12.6581 9.75601 12.6934 9.71902 12.7298C9.68793 12.7605 9.65684 12.7913 9.62481 12.823C9.41785 13.0023 9.23464 13.0039 8.96722 12.9987C8.73631 12.9742 8.62949 12.8653 8.47551 12.7048C8.37323 12.4866 8.36244 12.2726 8.40473 12.0361C8.53157 11.8221 8.68909 11.6563 8.86662 11.4825C8.89511 11.4543 8.9236 11.426 8.95295 11.397C9.04654 11.3043 9.14044 11.212 9.23434 11.1197C9.29954 11.0552 9.36472 10.9908 9.42988 10.9263C9.60097 10.7572 9.77231 10.5883 9.94372 10.4195C10.1188 10.247 10.2936 10.0743 10.4684 9.90158C10.8111 9.56306 11.1541 9.22482 11.4972 8.88674C11.4407 8.88668 11.3841 8.88661 11.3259 8.88655C9.98357 8.88501 8.6413 8.88258 7.29903 8.87906C7.13383 8.87863 6.96864 8.87821 6.80345 8.87779C6.77056 8.8777 6.73767 8.87762 6.70379 8.87753C6.17121 8.87619 5.63863 8.87546 5.10605 8.87495C4.55962 8.87442 4.01319 8.87323 3.46676 8.87144C3.12956 8.87036 2.79235 8.86978 2.45514 8.86985C2.19662 8.86985 1.9381 8.86895 1.67958 8.86771C1.57349 8.86734 1.4674 8.86726 1.36131 8.86751C1.21662 8.86779 1.07197 8.86702 0.927282 8.86599C0.864108 8.86649 0.864108 8.86649 0.799658 8.867C0.555039 8.8639 0.405418 8.83962 0.216166 8.67103C-0.00544828 8.43725 0.0174342 8.19461 0.019818 7.89144C0.0195462 7.83855 0.0192744 7.78566 0.0189943 7.73117C0.0184201 7.58467 0.0186262 7.43822 0.0191662 7.29173C0.0195606 7.13362 0.0189519 6.97553 0.0184728 6.81742C0.0176981 6.50783 0.0178654 6.19825 0.0183704 5.88865C0.0187639 5.63704 0.0188173 5.38543 0.0186276 5.13381C0.0186009 5.098 0.0185742 5.06219 0.0185467 5.0253C0.018491 4.95255 0.0184346 4.8798 0.0183773 4.80705C0.0178805 4.12488 0.0184517 3.44272 0.0193879 2.76056C0.0201663 2.17522 0.0021129 6.57297 0.00130964 5.98764C0.00037728 5.30791 1.01653e-05 4.62819 0.000545169 3.94847C0.000600668 3.87599 0.00065546 3.80351 0.000709495 3.73103C0.000736373 3.69536 0.000763217 3.6597 0.00079091 3.62296C0.000941341 3.37165 0.000687459 3.12034 0.000277495 2.86903C-0.000211133 2.56276 -7.89659e-05 2.25651 0.000849064 1.95024C0.00130696 1.79398 0.00148625 1.63773 0.000910208 1.48146C0.000295307 1.3121 0.0010295 1.14275 0.00189982 0.97339C0.00151117 0.923962 0.00112255 0.874533 0.000722122 0.823607C0.00339206 0.556575 0.0167576 0.396372 0.198248 0.1938C0.427847 -0.0222449 0.682075 -0.0187933 0.98226 0.021232Z" fill="#555555" />
 </svg>);
 
+// 제출 버튼
 export const SumitBtn = () => (<svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 39 39" fill="none">
     <circle cx="19.5" cy="19.5" r="19.5" fill="#0BEC12" />
     <path d="M19.4952 7.24787C19.5489 7.24616 19.6026 7.24444 19.658 7.24268C20.0765 7.32022 20.3861 7.63405 20.6763 7.92651C20.7135 7.96339 20.7508 8.00027 20.7891 8.03827C20.9129 8.16104 21.0361 8.2844 21.1593 8.40777C21.2483 8.49627 21.3373 8.58475 21.4264 8.67319C21.6675 8.91284 21.9081 9.15302 22.1486 9.39332C22.4005 9.64489 22.6528 9.89606 22.905 10.1473C23.3554 10.5961 23.8055 11.0453 24.2553 11.4947C24.663 11.9019 25.0711 12.3087 25.4795 12.7152C25.9543 13.1877 26.4289 13.6606 26.903 14.1338C27.1538 14.3841 27.4047 14.6343 27.6559 14.8843C27.892 15.1191 28.1276 15.3544 28.3629 15.59C28.4493 15.6764 28.5359 15.7627 28.6226 15.8488C28.741 15.9663 28.8587 16.0843 28.9764 16.2025C29.0109 16.2364 29.0453 16.2704 29.0808 16.3054C29.3578 16.5854 29.5278 16.8388 29.5283 17.2448C29.5179 17.6259 29.4268 17.8277 29.1498 18.0966C28.8558 18.2851 28.6083 18.3295 28.2652 18.2817C27.8127 18.1728 27.4625 17.785 27.1459 17.4654C27.102 17.4217 27.0581 17.3781 27.0129 17.3331C26.8692 17.1899 26.726 17.0462 26.5829 16.9024C26.4824 16.8021 26.3819 16.7017 26.2814 16.6015C26.0712 16.3917 25.8614 16.1816 25.6517 15.9714C25.3838 15.7026 25.1153 15.4343 24.8467 15.1662C24.5894 14.9095 24.3325 14.6524 24.0755 14.3954C24.0268 14.3468 23.9782 14.2982 23.928 14.2481C23.7895 14.1095 23.6512 13.9708 23.5129 13.8321C23.4724 13.7917 23.432 13.7514 23.3904 13.7098C23.3522 13.6714 23.3141 13.6331 23.2748 13.5935C23.2422 13.5609 23.2096 13.5282 23.176 13.4946C23.0744 13.3869 22.9776 13.2771 22.8808 13.1651C22.6586 12.9107 22.4217 12.6728 22.1817 12.4351C22.1366 12.3902 22.0915 12.3453 22.0451 12.2991C21.9026 12.1573 21.7598 12.0157 21.6171 11.8741C21.5198 11.7774 21.4226 11.6806 21.3253 11.5839C21.0882 11.348 20.8509 11.1124 20.6135 10.8768C20.6134 10.9523 20.6134 10.9523 20.6133 11.0294C20.6101 14.0121 20.606 16.9948 20.6007 19.9775C20.6001 20.3356 20.5995 20.6936 20.5989 21.0517C20.5988 21.1229 20.5986 21.1942 20.5985 21.2677C20.5965 22.4222 20.5952 23.5768 20.594 24.7313C20.5928 25.9158 20.5847 23.5316 20.5823 24.7161C20.5808 25.4471 20.5798 26.1781 20.5794 26.9091C20.5791 27.4103 20.5782 27.9114 20.5769 28.4125C20.5761 28.7017 20.5756 28.9909 20.5758 29.2802C20.576 29.545 20.5754 29.8098 20.5742 30.0747C20.5739 30.1704 20.5739 30.2662 20.5742 30.3619C20.5773 31.4686 20.5773 31.4686 20.3082 31.7726C19.9889 32.0534 19.739 32.0959 19.3242 32.0874C19.0278 32.0624 18.8829 31.9612 18.6763 31.7551C18.4592 31.4426 18.4262 31.1405 18.4256 30.7666C18.4253 30.7258 18.4251 30.6851 18.4249 30.6431C18.4243 30.5067 18.4245 30.3704 18.4246 30.2341C18.4244 30.1353 18.424 30.0364 18.4237 29.9376C18.4228 29.6662 18.4226 29.3948 18.4225 29.1234C18.4223 28.8307 18.4215 28.538 18.4207 28.2453C18.4195 27.7382 18.4186 27.2311 18.4181 26.724C18.4173 25.9908 18.4158 25.2576 18.4143 24.5244C18.4117 23.3349 18.416 25.7139 18.4143 24.5244C18.4126 23.3688 18.4107 22.2133 18.4085 21.0578C18.4083 20.9509 18.4083 20.9509 18.4081 20.8419C18.4074 20.4846 18.4067 20.1273 18.406 19.77C18.4002 16.8056 18.3953 13.8412 18.3908 10.8768C18.3537 10.9141 18.3166 10.9513 18.2784 10.9897C17.3753 11.8963 16.4714 12.8022 15.5666 13.7071C15.1291 14.1448 14.6918 14.5827 14.2552 15.0213C13.8746 15.4035 13.4935 15.7853 13.1118 16.1665C12.9098 16.3683 12.708 16.5704 12.5068 16.773C12.3173 16.9638 12.1271 17.154 11.9365 17.3437C11.8667 17.4133 11.7972 17.4832 11.7279 17.5533C11.6331 17.6493 11.5374 17.7443 11.4415 17.8392C11.4145 17.867 11.3874 17.8947 11.3596 17.9233C11.1193 18.1578 10.8518 18.2866 10.5139 18.3128C10.1366 18.2688 9.90996 18.1696 9.64961 17.8819C9.50763 17.6775 9.48758 17.5092 9.47944 17.2656C9.47672 17.2105 9.474 17.1555 9.47119 17.0987C9.53817 16.6776 9.85923 16.3674 10.1531 16.0776C10.1901 16.0404 10.2271 16.0033 10.2652 15.965C10.3883 15.8416 10.5121 15.7188 10.6358 15.5959C10.7246 15.5072 10.8133 15.4184 10.902 15.3296C11.1423 15.0892 11.3832 14.8493 11.6242 14.6096C11.8765 14.3584 12.1284 14.1068 12.3804 13.8554C12.8305 13.4062 13.2811 12.9575 13.7318 12.509C14.1402 12.1025 14.5481 11.6956 14.9558 11.2884C15.4297 10.8149 15.904 10.3417 16.3786 9.86899C16.6296 9.61892 16.8806 9.36875 17.1312 9.11828C17.3668 8.88293 17.6027 8.648 17.839 8.41337C17.9257 8.32719 18.0122 8.24087 18.0985 8.1544C18.2164 8.03642 18.3348 7.91897 18.4533 7.80163C18.4874 7.76728 18.5214 7.73293 18.5566 7.69754C18.8354 7.42327 19.091 7.25215 19.4952 7.24787Z" fill="white" />
 </svg>);
 
-
+// 이미지 미리보기 아이콘
 export const ImgPreview = () => (<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
     <g clipPath="url(#clip0_245_1277)">
         <path d="M5.56104 6.26829C5.42174 6.1289 5.25634 6.01833 5.07429 5.94289C4.89224 5.86744 4.69711 5.82861 4.50004 5.82861C4.30298 5.82861 4.10785 5.86744 3.9258 5.94289C3.74374 6.01833 3.57834 6.1289 3.43904 6.26829L0.019043 9.68829C0.0652733 10.3153 0.346497 10.9018 0.806479 11.3305C1.26646 11.7591 1.8713 11.9983 2.50004 12.0003H9.50004C9.9899 12.0002 10.4688 11.8553 10.8765 11.5838L5.56104 6.26829Z" fill="#555555" />
@@ -67,4 +76,36 @@ export const ImgPreview = () => (<svg xmlns="http://www.w3.org/2000/svg" width="
             <rect width="12" height="12" fill="white" />
         </clipPath>
     </defs>
-</svg>);
\ No newline at end of file
+</svg>);
+
+
+// ── 날짜/시간 유틸 ────────────────────────────────────
+
+export const DAY_PART_KO = { AM: '오전', PM: '오후' };
+export const DAY_OF_WEEK_KO = {
+    MONDAY: '월', TUESDAY: '화', WEDNESDAY: '수',
+    THURSDAY: '목', FRIDAY: '금', SATURDAY: '토', SUNDAY: '일',
+};
+export const formatDate = (dateStr) => dateStr?.replace(/-/g, '.') ?? '';
+export const getIcon = (dayPart) => dayPart === 'AM' ? '☀' : '☾';
+export const getTime = (dayPart) => dayPart === 'AM' ? '10:00 ~ 13:00' : '14:00 ~ 17:00';
+
+
+// ── 공통 유틸 함수 ────────────────────────────────────
+
+// 운영진 여부 판단 (displayName이 '운영진'으로 시작하면 true)
+export const isStaffDisplay = (displayName) => displayName?.startsWith('운영진') ?? false;
+
+// 이미지 업로드 후 서버 URL 반환
+export const uploadImage = async (file) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    const token = localStorage.getItem('token');
+    const res = await fetch('/api/images', {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}` },
+        body: formData,
+    });
+    const json = await res.json();
+    return json.imageUrl;
+};
\ No newline at end of file