diff --git a/frontend/src/App.js b/frontend/src/App.js
index 0e5c892..bc1358b 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -26,19 +26,19 @@ function App() {
         {/* 라이트 헤더 페이지 */}
         <Route element={<Layout headerType="light" />}>
           <Route path="/sessions" element={<QnAMainPage />} />
-          <Route path="/sessions/questions" element={<QnAListPage />} />
-          <Route path="/sessions/questions/:id" element={<QnADetailPage />} />
+          <Route path="/sessions/:sessionId/questions" element={<QnAListPage />} />
+          <Route path="/sessions/:sessionId/questions/:questionId" element={<QnADetailPage />} />
           <Route path="/curriculum" element={<CurriculumPage />} />
         </Route>
 
         {/* 다크 헤더 페이지 */}
         <Route element={<Layout headerType="dark" />}>
-            <Route path="/pirocheck" element={<PiroCheckMain />}/>
-            <Route path="/pirocheck/attendance" element={<Attendance />}/>
-            <Route path="/pirocheck/assignment" element={<Assignment />}/>
-            <Route path="/pirocheck/deposit" element={<Deposit />}/>
-            <Route path="/pirocheck/students" element={<StudentList />}/>
-            <Route path="/pirocheck/students/:userId" element={<StudentDetail />}/>
+          <Route path="/pirocheck" element={<PiroCheckMain />} />
+          <Route path="/pirocheck/attendance" element={<Attendance />} />
+          <Route path="/pirocheck/assignment" element={<Assignment />} />
+          <Route path="/pirocheck/deposit" element={<Deposit />} />
+          <Route path="/pirocheck/students" element={<StudentList />} />
+          <Route path="/pirocheck/students/:userId" element={<StudentDetail />} />
         </Route>
 
       </Routes>
diff --git a/frontend/src/pages/login/LoginPage.js b/frontend/src/pages/login/LoginPage.js
index c025156..91a2eeb 100644
--- a/frontend/src/pages/login/LoginPage.js
+++ b/frontend/src/pages/login/LoginPage.js
@@ -24,17 +24,15 @@ function LoginPage() {
 
       if (response.ok) {
         const data = await response.json();
-        console.log('로그인 응답:', data);
         localStorage.setItem('token', data.token);
         localStorage.setItem('role', data.role);
+        localStorage.setItem('name', data.name);
         navigate('/sessions');  // 로그인 성공 시 이동할 페이지
       } else {
         const errData = await response.json();
-        console.log('로그인 실패 응답:', errData);
         alert('이름 또는 비밀번호가 올바르지 않습니다.');
       }
     } catch (error) {
-      console.log('catch 에러:', error);
       alert('서버 오류가 발생했습니다.');
     }
   };
diff --git a/frontend/src/pages/qna/QnADetailPage.js b/frontend/src/pages/qna/QnADetailPage.js
index f617a2b..a947bd9 100644
--- a/frontend/src/pages/qna/QnADetailPage.js
+++ b/frontend/src/pages/qna/QnADetailPage.js
@@ -1,245 +1,449 @@
-import '../../assets/styles/global.css';
-import { useState } from 'react';
-import styles from './QnADetailPage.module.css';
-import { FiChevronLeft, FiMoreVertical, FiCornerDownRight } from 'react-icons/fi';
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import styles from './QnAListPage.module.css';
+import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
+import { authFetch } from '../../utils/Api';
 import {
-    CommentImoji,
-    MeCuriousToo,
-    StaffCheck,
-    SumitBtn,
+    CommentImoji, MeCuriousToo, SortBtn,
+    OBtn, XBtn, CommentCommentArraw, SumitBtn,
 } from '../../components/qna_svg';
-import profileImg from '../../assets/images/profile.png';
-
-
-
-// ── 목업 데이터 ──────────────────────────────────────────
-const MOCK_QUESTION = {
-    id: 2,
-    author: '익명',
-    isStaff: false,
-    avatarUrl: null,
-    date: '2025/04/25 13:20',
-    text: '오류 났어요',
-    image: 'https://dora-guide.com/wp-content/uploads/2019/11/Visual-studio-code-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95.png',
-    likes: 7,
-    iLiked: false,
-    isSolved: true,
-    comments: [
-        {
-            id: 1,
-            author: '운영진1',
-            isStaff: true,
-            avatarUrl: null,
-            date: '2025/04/25 13:28',
-            content: '사진 참고하세요',
-            image: 'https://dora-guide.com/wp-content/uploads/2019/11/Visual-studio-code-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95.png',
-        },
-        {
-            id: 2,
-            author: '작성자',
-            isStaff: false,
-            avatarUrl: null,
-            date: '2025/04/25 13:28',
-            content: '감사합니다',
-            image: null,
-        },
-        {
-            id: 3,
-            author: '익명1',
-            isStaff: false,
-            avatarUrl: null,
-            date: '2025/04/25 13:28',
-            content: '감사합니다',
-            image: null,
-        },
-    ],
+
+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();
+    const location = useLocation();
+    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({});
 
-// ── 메인 컴포넌트 ────────────────────────────────────────
-function QnADetailPage({
-    question: initialQuestion = MOCK_QUESTION,
-    isStaff = false,
-    onBack,
-}) {
-    const [question, setQuestion] = useState(initialQuestion);
-    const [commentText, setCommentText] = 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 [newQuestion, setNewQuestion] = useState('');
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitError, setSubmitError] = useState(null);
+
+    const fetchQuestions = useCallback(async (index) => {
+        try {
+            const res = await authFetch(`/api/sessions/${sessionId}/questions?understandingIndex=${index}`);
+            if (!res.ok) throw new Error(`서버 오류: ${res.status}`);
+            const json = await res.json();
+            if (!json.isSuccess) throw new Error(json.message);
+
+            const { session, understanding, questions } = json.result;
+
+            setSessionTitle(`${session.week}주차 ${DAY_OF_WEEK_KO[session.dayOfWeek]}요일 ${DAY_PART_KO[session.dayPart]} (${session.title})`);
+            setUnderstanding(understanding);
+
+            const allQ = [
+                ...(questions.popularQuestions ?? []),
+                ...(questions.unresolvedQuestions ?? []),
+                ...(questions.resolvedQuestions ?? []),
+            ];
+
+            const withLiked = await Promise.all(
+                allQ.map(async (q) => {
+                    try {
+                        const r = await authFetch(`/api/questions/${q.questionId}`);
+                        const j = await r.json();
+                        return { ...q, iLiked: j.result?.isLiked ?? false };
+                    } catch {
+                        return { ...q, iLiked: false };
+                    }
+                })
+            );
+
+            const idSet = (list) => new Set(list.map(q => q.questionId));
+            const popularIds = idSet(questions.popularQuestions ?? []);
+            const unresolvedIds = idSet(questions.unresolvedQuestions ?? []);
+            const resolvedIds = idSet(questions.resolvedQuestions ?? []);
 
-    // 좋아요 토글
-    const toggleLike = () => {
-        setQuestion(prev => ({
-            ...prev,
-            iLiked: !prev.iLiked,
-            likes: prev.iLiked ? prev.likes - 1 : prev.likes + 1,
-        }));
+            setPopularQuestions(withLiked.filter(q => popularIds.has(q.questionId)));
+            setUnresolvedQuestions(withLiked.filter(q => unresolvedIds.has(q.questionId)));
+            setResolvedQuestions(withLiked.filter(q => resolvedIds.has(q.questionId)));
+
+        } catch (err) {
+            console.error('질문 불러오기 실패:', err);
+        }
+    }, [sessionId]);
+
+    useEffect(() => {
+        if (sessionId) fetchQuestions(understandingIndex);
+    }, [sessionId, understandingIndex, fetchQuestions]);
+
+    const goPrevUnderstand = () => {
+        if (understanding?.hasOlder) setUnderstandingIndex(prev => prev + 1);
+    };
+    const goNextUnderstand = () => {
+        if (understanding?.hasNewer) setUnderstandingIndex(prev => prev - 1);
+    };
+
+    const handleUnderstandChoice = async (choice) => {
+        if (!understanding?.current?.checkId) return;
+        const checkId = understanding.current.checkId;
+        const newChoice = myChoices[checkId] === choice ? null : choice;
+        setMyChoices(prev => ({ ...prev, [checkId]: newChoice }));
+        if (!newChoice) return;
+        try {
+            const res = await authFetch(
+                `/api/sessions/${sessionId}/understanding-checks/${checkId}/responses`,
+                { method: 'POST', body: JSON.stringify({ choice: newChoice }) }
+            );
+            if (!res.ok) throw new Error();
+            const json = await res.json();
+            if (json.isSuccess) {
+                setUnderstanding(prev => ({
+                    ...prev,
+                    current: {
+                        ...prev.current,
+                        understoodCount: json.result.understoodCount,
+                        notUnderstoodCount: json.result.notUnderstoodCount,
+                    }
+                }));
+            }
+        } catch (err) {
+            console.error('이해도 응답 실패:', err);
+        }
     };
 
-    // 댓글 제출
-    const handleCommentSubmit = async () => {
-        const text = commentText.trim();
+    const toggleLike = async (e, questionId) => {
+        e.stopPropagation();
+        try {
+            const res = await authFetch(`/api/questions/${questionId}/like`, { method: 'POST' });
+            if (!res.ok) throw new Error();
+            const json = await res.json();
+            if (json.isSuccess) {
+                const update = (list) => list.map(q =>
+                    q.questionId === questionId
+                        ? { ...q, likeCount: json.result.likeCount, iLiked: json.result.isLiked }
+                        : q
+                );
+                setPopularQuestions(update);
+                setUnresolvedQuestions(update);
+                setResolvedQuestions(update);
+            }
+        } catch (err) {
+            console.error('좋아요 실패:', err);
+        }
+    };
+
+    const toggleCommentInput = (e, questionId) => {
+        e.stopPropagation();
+        if (isPast) return;
+        setCommentOpenId(prev => prev === questionId ? null : questionId);
+    };
+
+    const handleCommentChange = (questionId, value) => {
+        setCommentInputs(prev => ({ ...prev, [questionId]: value }));
+    };
+
+    const handleCommentSubmit = async (e, questionId) => {
+        e.stopPropagation();
+        const text = (commentInputs[questionId] || '').trim();
         if (!text) return;
+        try {
+            const res = await authFetch(`/api/questions/${questionId}/comments`, {
+                method: 'POST',
+                body: JSON.stringify({ content: text, parentCommentId: null }),
+            });
+            if (!res.ok) throw new Error();
+            const json = await res.json();
+            if (json.isSuccess) {
+                if (isStaff) {
+                    await authFetch(`/api/questions/${questionId}/status`, { method: 'PATCH' });
+                }
+                const newComment = {
+                    commentId: json.result.commentId,
+                    displayName: json.result.displayName,
+                    content: json.result.content,
+                };
+                const update = (list) => list.map(q =>
+                    q.questionId === questionId
+                        ? {
+                            ...q,
+                            isResolved: isStaff ? true : q.isResolved,
+                            previewComments: [...(q.previewComments ?? []), newComment],
+                            commentCount: (q.commentCount ?? 0) + 1
+                        }
+                        : q
+                );
+                setPopularQuestions(update);
+                setUnresolvedQuestions(update);
+                setResolvedQuestions(update);
+                setCommentInputs(prev => ({ ...prev, [questionId]: '' }));
+                setCommentOpenId(null);
+            }
+        } catch (err) {
+            console.error('댓글 등록 실패:', err);
+        }
+    };
 
+    const handleNewQuestion = async () => {
+        const text = newQuestion.trim();
+        if (!text) return;
         setIsSubmitting(true);
+        setSubmitError(null);
         try {
-            const newComment = {
-                id: Date.now(),
-                author: isStaff ? '운영진' : '나',
-                isStaff,
-                avatarUrl: null,
-                date: new Date().toLocaleDateString('ko-KR', {
-                    year: 'numeric',
-                    month: '2-digit',
-                    day: '2-digit',
-                    hour: '2-digit',
-                    minute: '2-digit',
-                }).replace(/\. /g, '/').replace('.', ''),
-                content: text,
-                image: null,
-            };
-            setQuestion(prev => ({
-                ...prev,
-                comments: [...prev.comments, newComment],
-            }));
-            setCommentText('');
+            const res = await authFetch(`/api/sessions/${sessionId}/questions`, {
+                method: 'POST',
+                body: JSON.stringify({ content: text }),
+            });
+            if (!res.ok) throw new Error();
+            const json = await res.json();
+            if (json.isSuccess) {
+                setNewQuestion('');
+                fetchQuestions(understandingIndex);
+            }
         } catch (err) {
-            console.error('댓글 등록 실패:', err);
+            console.error('질문 등록 실패:', err);
+            setSubmitError('질문 등록에 실패했어요.');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const handleNewUnderstandCheck = async () => {
+        const text = newQuestion.trim();
+        if (!text) return;
+        setIsSubmitting(true);
+        setSubmitError(null);
+        try {
+            const res = await authFetch(`/api/sessions/${sessionId}/understanding-checks`, {
+                method: 'POST',
+                body: JSON.stringify({ content: text }),
+            });
+            if (!res.ok) throw new Error();
+            const json = await res.json();
+            if (json.isSuccess) {
+                setNewQuestion('');
+                setUnderstandingIndex(0);
+                fetchQuestions(0);
+            }
+        } catch (err) {
+            console.error('이해도 등록 실패:', err);
+            setSubmitError('이해도 등록에 실패했어요.');
         } finally {
             setIsSubmitting(false);
         }
     };
 
+    const allQuestions = [
+        ...popularQuestions,
+        ...unresolvedQuestions.filter(q => !popularQuestions.some(p => p.questionId === q.questionId)),
+        ...resolvedQuestions.filter(q => !popularQuestions.some(p => p.questionId === q.questionId)),
+    ];
+
+    const displayedQuestions = (() => {
+        let list = allQuestions;
+        if (isStaff && filterUnsolved) list = unresolvedQuestions;
+        if (!isStaff && filterCurious) list = allQuestions.filter(q => q.iLiked);
+
+        if (sortOrder === '최신순') {
+            list = [...list].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+        } else if (sortOrder === '저도궁금해요순') {
+            list = [...list].sort((a, b) => b.likeCount - a.likeCount);
+        }
+
+        return list;
+    })();
+
+    const currentChoice = myChoices[understanding?.current?.checkId];
+
     return (
         <div className={styles.page}>
+            <h1 className={styles.title}>{sessionTitle}</h1>
 
-            {/* ── 상단 바:해결 여부 ── */}
-            <div className={styles.topBar}>
-                {question.isSolved ? (
-                    <span className={styles.solvedBadge}>해결 질문</span>
+            <div className={styles.filterRow}>
+                {isStaff ? (
+                    <label className={styles.curiousLabel}>
+                        <input type="checkbox" checked={filterUnsolved}
+                            onChange={e => setFilterUnsolved(e.target.checked)}
+                            className={styles.curiousCheckbox} />
+                        미해결 질문
+                    </label>
                 ) : (
-                    <span className={styles.unsolvedBadge}>미해결 질문</span>
+                    <label className={styles.curiousLabel}>
+                        <input type="checkbox" checked={filterCurious}
+                            onChange={e => setFilterCurious(e.target.checked)}
+                            className={styles.curiousCheckbox} />
+                        저도 궁금해요
+                    </label>
                 )}
-            </div>
-
-            {/* ── 작성자 행 ── */}
-            <div className={styles.authorRow}>
-                <div className={styles.avatar}>
-                    <img src={profileImg} alt={question.author} className={styles.avatarImg} />
+                <div className={styles.sortWrapper}>
+                    <button className={styles.sortBtn} onClick={() => setShowSortMenu(prev => !prev)}>
+                        {sortOrder} <SortBtn />
+                    </button>
+                    {showSortMenu && (
+                        <ul className={styles.sortMenu}>
+                            {['기본', '최신순', '저도궁금해요순'].map(option => (
+                                <li key={option} className={styles.sortOption}
+                                    onClick={() => { setSortOrder(option); setShowSortMenu(false); }}>
+                                    {option}
+                                </li>
+                            ))}
+                        </ul>
+                    )}
                 </div>
-                <div className={styles.authorInfo}>
-                    <span className={styles.authorName}>
-                        {question.author}
-                        {question.isStaff && (
-                            <span className={styles.staffBadge}><StaffCheck /></span>
-                        )}
-                    </span>
-                    <span className={styles.authorDate}>{question.date}</span>
-                </div>
-                <button className={styles.menuBtn} aria-label="더보기">
-                    <FiMoreVertical size={20} />
-                </button>
             </div>
+            <hr className={styles.divider} />
 
-            {/* ── 질문 제목 ── */}
-            <div className={styles.questionTitle}>
-                <span className={styles.qIcon}>Q.</span>
-                <span className={styles.questionText}>{question.text}</span>
-            </div>
-
-            {/* ── 첨부 이미지 ── */}
-            {question.image && (
-                <img
-                    src={question.image}
-                    alt="첨부 이미지"
-                    className={styles.questionImage}
-                />
-            )}
-
-            {/* ── 액션 버튼 (저도 궁금해요 / 댓글달기) ── */}
-            <div className={styles.actionRow}>
+            {/* 이해도 */}
+            <div className={styles.understandBar}>
+                <button className={styles.arrowBtn} onClick={goPrevUnderstand}
+                    disabled={!understanding?.hasOlder}>
+                    <FiChevronLeft size={30} />
+                </button>
+                <span className={styles.understandName}>
+                    {understanding?.current?.content ?? '이해도 없음'}
+                    <span className={styles.understandCount}>
+                        ({understanding?.current?.understoodCount ?? 0}/
+                        {(understanding?.current?.understoodCount ?? 0) + (understanding?.current?.notUnderstoodCount ?? 0)})
+                    </span>
+                </span>
                 <button
-                    className={`${styles.likeBtn} ${question.iLiked ? styles.liked : ''}`}
-                    onClick={toggleLike}
+                    className={`${styles.oxBtn} ${styles.oxO} ${currentChoice === 'UNDERSTOOD' ? styles.oxActive : ''}`}
+                    onClick={() => handleUnderstandChoice('UNDERSTOOD')}
+                    disabled={isStaff}
                 >
-                    <MeCuriousToo /> 저도 궁금해요&nbsp;{question.likes}
+                    <OBtn />
+                    {isStaff && <span className={styles.oxCount}>{understanding?.current?.understoodCount ?? 0}</span>}
                 </button>
                 <button
-                    className={styles.commentBtn}
-                    onClick={() => document.getElementById('commentInput')?.focus()}
+                    className={`${styles.oxBtn} ${styles.oxX} ${currentChoice === 'NOT_UNDERSTOOD' ? styles.oxActive : ''}`}
+                    onClick={() => handleUnderstandChoice('NOT_UNDERSTOOD')}
+                    disabled={isStaff}
                 >
-                    <CommentImoji />&nbsp;댓글달기
+                    <XBtn />
+                    {isStaff && <span className={styles.oxCount}>{understanding?.current?.notUnderstoodCount ?? 0}</span>}
+                </button>
+                <button className={styles.arrowBtn} onClick={goNextUnderstand}
+                    disabled={!understanding?.hasNewer}>
+                    <FiChevronRight size={30} />
                 </button>
             </div>
 
-            <hr className={styles.divider} />
-
-            {/* ── 댓글 목록 ── */}
-            <div className={styles.commentList}>
-                {question.comments.map(comment => (
-                    <div key={comment.id} className={styles.commentBlock}>
-
-                        {/* 댓글 작성자 */}
-                        <div className={styles.commentAuthorRow}>
-                            <div className={styles.commentAvatar}>
-                                <img src={profileImg} alt={comment.author} className={styles.commentAvatarImg} />
-                            </div>
-                            <span className={styles.commentAuthorName}>
-                                {comment.author}
-                                {comment.isStaff && (
-                                    <span className={styles.staffBadge}><StaffCheck /></span>
+            {/* 질문 목록 */}
+            <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}
+                                style={{ color: question.isResolved ? 'var(--gray600)' : '' }}
+                            >Q.</span>
+                            <span className={styles.questionText}>{question.content}</span>
+                            <div className={styles.questionActions}>
+                                <button
+                                    className={`${styles.likeBtn} ${question.iLiked ? styles.liked : ''}`}
+                                    onClick={e => toggleLike(e, question.questionId)}
+                                >
+                                    <MeCuriousToo />{question.likeCount}
+                                </button>
+                                {!isPast && (
+                                    <button className={styles.commentBtn}
+                                        onClick={e => toggleCommentInput(e, question.questionId)}>
+                                        <CommentImoji />&nbsp;댓글달기
+                                    </button>
                                 )}
-                            </span>
+                            </div>
                         </div>
 
-                        {/* 댓글 말풍선 */}
-                        <div className={styles.commentBubble}>
-                            <div className={styles.commentContent}>
-                                <FiCornerDownRight size={14} className={styles.commentArrow} />
-                                {comment.content}
+                        {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 => (
+                                    <div key={comment.commentId} className={styles.commentWrapper}>
+                                        <span className={styles.commentAuthor}>{comment.displayName}</span>
+                                        <div className={styles.commentItem}>
+                                            <div className={styles.commentContent}>
+                                                <CommentCommentArraw /> {comment.content}
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                                {question.commentCount > MAX_VISIBLE_COMMENTS && (
+                                    <span className={styles.commentMore}>
+                                        외 {question.commentCount - MAX_VISIBLE_COMMENTS}개 댓글
+                                    </span>
+                                )}
                             </div>
-                            {comment.image && (
-                                <img
-                                    src={comment.image}
-                                    alt="댓글 첨부 이미지"
-                                    className={styles.commentImage}
-                                />
-                            )}
-                        </div>
+                        )}
 
-                        {/* 타임스탬프 */}
-                        <p className={styles.commentDate}>{comment.date}</p>
+                        {commentOpenId === question.questionId && (
+                            <div className={styles.commentInputRow} onClick={e => e.stopPropagation()}>
+                                <input
+                                    className={styles.commentInput}
+                                    placeholder="댓글을 입력해주세요..."
+                                    value={commentInputs[question.questionId] || ''}
+                                    onChange={e => handleCommentChange(question.questionId, e.target.value)}
+                                    onKeyDown={e => { if (e.key === 'Enter') handleCommentSubmit(e, question.questionId); }}
+                                    autoFocus
+                                />
+                                <button className={styles.submitBtn}
+                                    onClick={e => handleCommentSubmit(e, question.questionId)}>
+                                    <SumitBtn />
+                                </button>
+                            </div>
+                        )}
                     </div>
                 ))}
             </div>
 
-            {/* ── 하단 그라디언트 커버 ── */}
             <div className={styles.bottomCover} />
 
-            {/* ── 댓글 입력 바 (하단 고정) ── */}
-            <div className={styles.commentInputBar}>
-                <input
-                    id="commentInput"
-                    className={styles.commentInput}
-                    placeholder="댓글을 입력해주세요..."
-                    value={commentText}
-                    onChange={e => setCommentText(e.target.value)}
-                    onKeyDown={e => {
-                        if (e.key === 'Enter') handleCommentSubmit();
-                    }}
-                    disabled={isSubmitting}
-                />
-                <button
-                    className={styles.submitBtn}
-                    onClick={handleCommentSubmit}
-                    disabled={!commentText.trim() || isSubmitting}
-                    aria-label="댓글 제출"
-                >
-                    {isSubmitting ? '⏳' : <SumitBtn />}
-                </button>
-            </div>
-
+            {!isPast && (
+                <div className={styles.newQuestionBar}>
+                    {submitError && <p className={styles.errorMsg}>{submitError}</p>}
+                    <div className={styles.newQuestionInputRow}>
+                        <button className={styles.newQuestionPlus}>+</button>
+                        <input
+                            className={styles.newQuestionInput}
+                            placeholder={isStaff ? '부원들의 이해도를 체크해보세요' : '질문을 남겨주세요...'}
+                            value={newQuestion}
+                            onChange={e => setNewQuestion(e.target.value)}
+                            onKeyDown={e => {
+                                if (e.key === 'Enter') isStaff ? handleNewUnderstandCheck() : handleNewQuestion();
+                            }}
+                            disabled={isSubmitting}
+                        />
+                        <button
+                            className={styles.newQuestionSubmit}
+                            onClick={isStaff ? handleNewUnderstandCheck : handleNewQuestion}
+                            disabled={isSubmitting}
+                        >
+                            {isSubmitting ? '⏳' : <SumitBtn />}
+                        </button>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }
 
-export default QnADetailPage;
\ No newline at end of file
+export default QnAListPage;
\ No newline at end of file
diff --git a/frontend/src/pages/qna/QnADetailPage.module.css b/frontend/src/pages/qna/QnADetailPage.module.css
index 1f24ed2..9df34c4 100644
--- a/frontend/src/pages/qna/QnADetailPage.module.css
+++ b/frontend/src/pages/qna/QnADetailPage.module.css
@@ -44,9 +44,10 @@
 /* ── 작성자 행 ── */
 .authorRow {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+
     gap: 10px;
-    margin-bottom: 16px;
+    margin-bottom: 5px;
 }
 
 .avatar {
@@ -75,8 +76,8 @@
 
 .authorName {
     font-family: var(--font-main);
-    font-size: 0.95rem;
-    font-weight: 600;
+    font-size: 16px;
+    font-weight: 500;
     color: var(--black);
     display: flex;
     align-items: center;
@@ -97,6 +98,75 @@
     padding: 4px;
     display: flex;
     align-items: center;
+
+}
+
+.dropdownMenu {
+    position: absolute;
+    right: 0;
+    top: 100%;
+    background: var(--white);
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    min-width: 100px;
+    overflow: hidden;
+}
+
+.dropdownItem {
+    display: block;
+    width: 100%;
+    padding: 10px 16px;
+    border: none;
+    background: none;
+    font-family: var(--font-main);
+    font-size: 0.9rem;
+    color: var(--black);
+    cursor: pointer;
+    text-align: left;
+}
+
+.dropdownItem:hover {
+    background: var(--gray20);
+}
+
+.editInput {
+    flex: 1;
+    font-family: var(--font-main);
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--black);
+    border: 1px solid var(--gray200);
+    border-radius: 8px;
+    padding: 4px 8px;
+    resize: none;
+    outline: none;
+    line-height: 1.3;
+    width: 100%;
+}
+
+.editConfirmBtn {
+    background: var(--main);
+    color: var(--white);
+    border: none;
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-family: var(--font-main);
+    font-size: 0.85rem;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.editCancelBtn {
+    background: var(--gray20);
+    color: var(--black);
+    border: none;
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-family: var(--font-main);
+    font-size: 0.85rem;
+    cursor: pointer;
+    white-space: nowrap;
 }
 
 /* ── 질문 본문 ── */
@@ -104,12 +174,12 @@
     display: flex;
     align-items: flex-start;
     gap: 6px;
-    margin-bottom: 18px;
+    padding-bottom: 5px;
 }
 
 .qIcon {
     font-family: var(--font-main);
-    font-size: 2rem;
+    font-size: 36px;
     font-weight: 900;
     color: var(--main);
     line-height: 1.1;
@@ -188,6 +258,7 @@
     height: 1px;
     border: none;
     margin: 4px 0 0;
+    margin-bottom: 20px;
 }
 
 /* ── 댓글 목록 ── */
@@ -195,19 +266,14 @@
     display: flex;
     flex-direction: column;
     gap: 0;
-    padding-top: 4px;
 }
 
-.commentBlock {
-    padding: 16px 0;
-}
 
 /* 댓글 작성자 행 */
 .commentAuthorRow {
     display: flex;
     align-items: center;
     gap: 8px;
-    margin-bottom: 10px;
 }
 
 .commentAvatar {
diff --git a/frontend/src/pages/qna/QnADetailePage.js b/frontend/src/pages/qna/QnADetailePage.js
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/pages/qna/QnADetailePage.module.css b/frontend/src/pages/qna/QnADetailePage.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/pages/qna/QnAListPage.js b/frontend/src/pages/qna/QnAListPage.js
index 83e66ca..6666a3f 100644
--- a/frontend/src/pages/qna/QnAListPage.js
+++ b/frontend/src/pages/qna/QnAListPage.js
@@ -1,151 +1,148 @@
-import { useState } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
 import styles from './QnAListPage.module.css';
 import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
+import { authFetch } from '../../utils/Api';
 import {
-    CommentImoji,
-    MeCuriousToo,
-    StaffCheck,
-    SortBtn,
-    OBtn,
-    XBtn,
-    CommentCommentArraw,
-    SumitBtn,
+    CommentImoji, MeCuriousToo, SortBtn,
+    OBtn, XBtn, CommentCommentArraw, SumitBtn,
 } from '../../components/qna_svg';
 
-const UNDERSTAND = ['이해했다', '성공했다'];
-
-// 댓글 최대 표시 개수 (카드에서 항상 노출)
 const MAX_VISIBLE_COMMENTS = 3;
 
-// 질문 목록 데이터
-const MOCK_QUESTIONS = [
-    {
-        id: 1,
-        text: '벤브 어떻게 활성화 시켜요?',
-        likes: 7,
-        iLiked: false,    // 내가 좋아요 눌렀는지
-        isSolved: false, // 운영진이 해결 표시했는지
-        image: null,      // 첨부 이미지 없음
-        comments: [],     // 댓글 없음
-    },
-    {
-        id: 2,
-        text: '오류났어요',
-        likes: 7,
-        iLiked: false,
-        isSolved: false,
-        image: 'https://dora-guide.com/wp-content/uploads/2019/11/Visual-studio-code-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95.png',
-        comments: [
-            { id: 1, author: '운영진1', isStaff: true, content: '사진 참고하세요' },
-            { id: 2, author: '작성자', isStaff: false, content: '감사합니다' },
-            { id: 3, author: '익명1', isStaff: false, content: '감사합니다' },
-        ],
-    },
-    {
-        id: 3,
-        text: '벤브 어떻게 활성화 시켜요?',
-        likes: 7,
-        iLiked: false,
-        isSolved: false,
-        image: null,
-        comments: [],
-    },
-    {
-        id: 4,
-        text: '벤브 어떻게 활성화 시켜요?',
-        likes: 7,
-        iLiked: false,
-        isSolved: true,
-        image: null,
-        comments: [],
-    },
-    {
-        id: 5,
-        text: '벤브 어떻게 활성화 시켜요?',
-        likes: 7,
-        iLiked: false,
-        isSolved: true,
-        image: null,
-        comments: [],
-    },
-];
-
-
-
-
-
-function QnAListPage({
-    sessionTitle = '1주차 화요일 오전 세션(HTML/CSS)',
-    sessionId = 1,
-    isStaff = true,
-    onBack,
-    onCardClick, // 카드 클릭 시 상세 페이지 이동 (questionId를 인자로 받아)
-}) {
-
-
-
-    // 현재 보고 있는 이해도 체크 인덱스 (0 = '이해했다')
-    const [understandIndex, setUnderstandIndex] = useState(0);
-
-    // 저도 궁금해요 필터 켜져 있는지(부원)
-    const [filterCurious, setFilterCurious] = useState(false);
-
-    // 미해결 질문 필터 켜져 있는지(운영진)
-    const [filterUnsolved, setFilterUnsolved] = useState(false);
+const DAY_PART_KO = { AM: '오전', PM: '오후' };
+const DAY_OF_WEEK_KO = {
+    MONDAY: '월', TUESDAY: '화', WEDNESDAY: '수',
+    THURSDAY: '목', FRIDAY: '금', SATURDAY: '토', SUNDAY: '일',
+};
 
-    // 정렬 방식
-    const [sortOrder, setSortOrder] = useState('정렬');
+function QnAListPage() {
+    const { sessionId } = useParams();
+    const navigate = useNavigate();
+    const isStaff = localStorage.getItem('role') === 'ADMIN';
 
-    // 정렬 드롭다운 열려 있는지
-    const [showSortMenu, setShowSortMenu] = useState(false);
+    const [sessionTitle, setSessionTitle] = useState('');
+    const [understanding, setUnderstanding] = useState(null);
+    const [understandingIndex, setUnderstandingIndex] = useState(0);
+    const [myChoices, setMyChoices] = useState({});
 
-    // 질문 목록 (좋아요 토글 등 변경사항 반영하려고 state로 관리)
-    const [questions, setQuestions] = useState(MOCK_QUESTIONS);
+    const [popularQuestions, setPopularQuestions] = useState([]);
+    const [unresolvedQuestions, setUnresolvedQuestions] = useState([]);
+    const [resolvedQuestions, setResolvedQuestions] = useState([]);
 
-    // 내가 이해했는지 여부: true = O 누름, false = X 누름, null = 아직 안 누름
-    const [myUnderstand, setMyUnderstand] = useState(null);
+    const [filterCurious, setFilterCurious] = useState(false);
+    const [filterUnsolved, setFilterUnsolved] = useState(false);
+    const [sortOrder, setSortOrder] = useState('정렬');
+    const [showSortMenu, setShowSortMenu] = useState(false);
 
-    // 댓글 입력창이 열려 있는 질문 id
-    // null이면 아무 질문도 댓글 입력창이 안 열려 있는 상태
-    // '댓글달기' 버튼을 누른 질문의 id가 들어옴
     const [commentOpenId, setCommentOpenId] = useState(null);
-
-    // 각 질문별 댓글 입력창 텍스트 (객체로 관리: { 질문id: 입력된텍스트 })
     const [commentInputs, setCommentInputs] = useState({});
-
-    // 새 질문 입력창 텍스트x
     const [newQuestion, setNewQuestion] = useState('');
-
-    // API 요청 중인지 여부 (true면 버튼 비활성화 → 중복 제출 방지)
     const [isSubmitting, setIsSubmitting] = useState(false);
-
-    // 에러 메시지 (null이면 에러 없음)
     const [submitError, setSubmitError] = useState(null);
 
+    const fetchQuestions = useCallback(async (index) => {
+        try {
+            const res = await authFetch(`/api/sessions/${sessionId}/questions?understandingIndex=${index}`);
+            if (!res.ok) throw new Error(`서버 오류: ${res.status}`);
+            const json = await res.json();
+            if (!json.isSuccess) throw new Error(json.message);
+
+            const { session, understanding, questions } = json.result;
+
+            setSessionTitle(`${session.week}주차 ${DAY_OF_WEEK_KO[session.dayOfWeek]}요일 ${DAY_PART_KO[session.dayPart]} (${session.title})`);
+            setUnderstanding(understanding);
+
+            const allQ = [
+                ...(questions.popularQuestions ?? []),
+                ...(questions.unresolvedQuestions ?? []),
+                ...(questions.resolvedQuestions ?? []),
+            ];
+
+            const withLiked = await Promise.all(
+                allQ.map(async (q) => {
+                    try {
+                        const r = await authFetch(`/api/questions/${q.questionId}`);
+                        const j = await r.json();
+                        return { ...q, iLiked: j.result?.isLiked ?? false };
+                    } catch {
+                        return { ...q, iLiked: false };
+                    }
+                })
+            );
+
+            const idSet = (list) => new Set(list.map(q => q.questionId));
+            const popularIds = idSet(questions.popularQuestions ?? []);
+            const unresolvedIds = idSet(questions.unresolvedQuestions ?? []);
+            const resolvedIds = idSet(questions.resolvedQuestions ?? []);
+
+            setPopularQuestions(withLiked.filter(q => popularIds.has(q.questionId)));
+            setUnresolvedQuestions(withLiked.filter(q => unresolvedIds.has(q.questionId)));
+            setResolvedQuestions(withLiked.filter(q => resolvedIds.has(q.questionId)));
+
+        } catch (err) {
+            console.error('질문 불러오기 실패:', err);
+        }
+    }, [sessionId]);
+
+    useEffect(() => {
+        if (sessionId) fetchQuestions(understandingIndex);
+    }, [sessionId, understandingIndex, fetchQuestions]);
 
-    // 이해도
     const goPrevUnderstand = () => {
-        if (understandIndex > 0) setUnderstandIndex(prev => prev - 1);
+        if (understanding?.hasOlder) setUnderstandingIndex(prev => prev + 1);
     };
     const goNextUnderstand = () => {
-        if (understandIndex < UNDERSTAND.length - 1) setUnderstandIndex(prev => prev + 1);
+        if (understanding?.hasNewer) setUnderstandingIndex(prev => prev - 1);
     };
 
-    // 질문
-    const toggleLike = (e, id) => {
-        e.stopPropagation();
-
-        setQuestions(prev =>
-            prev.map(q =>
-                q.id === id
-                    ? {
-                        ...q,
-                        iLiked: !q.iLiked,
-                        likes: q.iLiked ? q.likes - 1 : q.likes + 1,
+    const handleUnderstandChoice = async (choice) => {
+        if (!understanding?.current?.checkId) return;
+        const checkId = understanding.current.checkId;
+        const newChoice = myChoices[checkId] === choice ? null : choice;
+        setMyChoices(prev => ({ ...prev, [checkId]: newChoice }));
+        if (!newChoice) return;
+        try {
+            const res = await authFetch(
+                `/api/sessions/${sessionId}/understanding-checks/${checkId}/responses`,
+                { method: 'POST', body: JSON.stringify({ choice: newChoice }) }
+            );
+            if (!res.ok) throw new Error();
+            const json = await res.json();
+            if (json.isSuccess) {
+                setUnderstanding(prev => ({
+                    ...prev,
+                    current: {
+                        ...prev.current,
+                        understoodCount: json.result.understoodCount,
+                        notUnderstoodCount: json.result.notUnderstoodCount,
                     }
-                    : q
-            )
-        );
+                }));
+            }
+        } catch (err) {
+            console.error('이해도 응답 실패:', err);
+        }
+    };
+
+    const toggleLike = async (e, questionId) => {
+        e.stopPropagation();
+        try {
+            const res = await authFetch(`/api/questions/${questionId}/like`, { method: 'POST' });
+            if (!res.ok) throw new Error();
+            const json = await res.json();
+            if (json.isSuccess) {
+                const update = (list) => list.map(q =>
+                    q.questionId === questionId
+                        ? { ...q, likeCount: json.result.likeCount, iLiked: json.result.isLiked }
+                        : q
+                );
+                setPopularQuestions(update);
+                setUnresolvedQuestions(update);
+                setResolvedQuestions(update);
+            }
+        } catch (err) {
+            console.error('좋아요 실패:', err);
+        }
     };
 
     const toggleCommentInput = (e, questionId) => {
@@ -154,124 +151,150 @@ function QnAListPage({
     };
 
     const handleCommentChange = (questionId, value) => {
-        setCommentInputs(prev => ({
-            ...prev,
-            [questionId]: value,
-        }));
+        setCommentInputs(prev => ({ ...prev, [questionId]: value }));
     };
 
-    const handleCommentSubmit = (e, questionId) => {
+    const handleCommentSubmit = async (e, questionId) => {
         e.stopPropagation();
-
         const text = (commentInputs[questionId] || '').trim();
         if (!text) return;
-
-        setQuestions(prev =>
-            prev.map(q =>
-                q.id === questionId
-                    ? {
-                        ...q,
-                        comments: [
-                            ...q.comments,
-                            { id: Date.now(), author: '나', isStaff: false, content: text },
-                        ],
-                    }
-                    : q
-            )
-        );
-        setCommentInputs(prev => ({ ...prev, [questionId]: '' }));
-        setCommentOpenId(null);
+        try {
+            const res = await authFetch(`/api/questions/${questionId}/comments`, {
+                method: 'POST',
+                body: JSON.stringify({ content: text, parentCommentId: null }),
+            });
+            if (!res.ok) throw new Error();
+            const json = await res.json();
+            if (json.isSuccess) {
+                if (isStaff) {
+                    await authFetch(`/api/questions/${questionId}/status`, { method: 'PATCH' });
+                }
+                const newComment = {
+                    commentId: json.result.commentId,
+                    displayName: json.result.displayName,
+                    content: json.result.content,
+                };
+                const update = (list) => list.map(q =>
+                    q.questionId === questionId
+                        ? {
+                            ...q,
+                            isResolved: isStaff ? true : q.isResolved,
+                            previewComments: [...(q.previewComments ?? []), newComment],
+                            commentCount: (q.commentCount ?? 0) + 1
+                        }
+                        : q
+                );
+                setPopularQuestions(update);
+                setUnresolvedQuestions(update);
+                setResolvedQuestions(update);
+                setCommentInputs(prev => ({ ...prev, [questionId]: '' }));
+                setCommentOpenId(null);
+            }
+        } catch (err) {
+            console.error('댓글 등록 실패:', err);
+        }
     };
 
-
-
     const handleNewQuestion = async () => {
         const text = newQuestion.trim();
         if (!text) return;
-
         setIsSubmitting(true);
         setSubmitError(null);
-
         try {
-            setQuestions(prev => [
-                { id: Date.now(), text, likes: 0, iLiked: false, image: null, comments: [] },
-                ...prev,
-            ]);
-            setNewQuestion('');
-
-        } catch (error) {
-            console.error('질문 등록 실패:', error);
+            const res = await authFetch(`/api/sessions/${sessionId}/questions`, {
+                method: 'POST',
+                body: JSON.stringify({ content: text }),
+            });
+            if (!res.ok) throw new Error();
+            const json = await res.json();
+            if (json.isSuccess) {
+                setNewQuestion('');
+                fetchQuestions(understandingIndex);
+            }
+        } catch (err) {
+            console.error('질문 등록 실패:', err);
             setSubmitError('질문 등록에 실패했어요.');
         } finally {
             setIsSubmitting(false);
         }
     };
 
+    const handleNewUnderstandCheck = async () => {
+        const text = newQuestion.trim();
+        if (!text) return;
+        setIsSubmitting(true);
+        setSubmitError(null);
+        try {
+            const res = await authFetch(`/api/sessions/${sessionId}/understanding-checks`, {
+                method: 'POST',
+                body: JSON.stringify({ content: text }),
+            });
+            if (!res.ok) throw new Error();
+            const json = await res.json();
+            if (json.isSuccess) {
+                setNewQuestion('');
+                setUnderstandingIndex(0);
+                fetchQuestions(0);
+            }
+        } catch (err) {
+            console.error('이해도 등록 실패:', err);
+            setSubmitError('이해도 등록에 실패했어요.');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
 
+    const allQuestions = [
+        ...popularQuestions,
+        ...unresolvedQuestions.filter(q => !popularQuestions.some(p => p.questionId === q.questionId)),
+        ...resolvedQuestions.filter(q => !popularQuestions.some(p => p.questionId === q.questionId)),
+    ];
 
-
-    const currentUnderstand = UNDERSTAND[understandIndex];
-
-    // 저도 궁금해요 필터가 켜져 있으면 필터링
     const displayedQuestions = (() => {
-        if (isStaff && filterUnsolved) return questions.filter(q => q.comments.length === 0 && !q.isSolved);
-        if (!isStaff && filterCurious) return questions.filter(q => q.iLiked);
-        return questions;
-    })();
-
-
-
+        let list = allQuestions;
+        if (isStaff && filterUnsolved) list = unresolvedQuestions;
+        if (!isStaff && filterCurious) list = allQuestions.filter(q => q.iLiked);
+
+        if (sortOrder === '최신순') {
+            list = [...list].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+        } else if (sortOrder === '저도궁금해요순') {
+            list = [...list].sort((a, b) => b.likeCount - a.likeCount);
+        }
 
+        return list;
+    })();
 
+    const currentChoice = myChoices[understanding?.current?.checkId];
 
     return (
-        // 상단
         <div className={styles.page}>
-
             <h1 className={styles.title}>{sessionTitle}</h1>
 
             <div className={styles.filterRow}>
                 {isStaff ? (
                     <label className={styles.curiousLabel}>
-                        <input
-                            type="checkbox"
-                            checked={filterUnsolved}
+                        <input type="checkbox" checked={filterUnsolved}
                             onChange={e => setFilterUnsolved(e.target.checked)}
-                            className={styles.curiousCheckbox}
-                        />
+                            className={styles.curiousCheckbox} />
                         미해결 질문
                     </label>
                 ) : (
                     <label className={styles.curiousLabel}>
-                        <input
-                            type="checkbox"
-                            checked={filterCurious}
+                        <input type="checkbox" checked={filterCurious}
                             onChange={e => setFilterCurious(e.target.checked)}
-                            className={styles.curiousCheckbox}
-                        />
+                            className={styles.curiousCheckbox} />
                         저도 궁금해요
                     </label>
                 )}
-
                 <div className={styles.sortWrapper}>
-                    <button
-                        className={styles.sortBtn}
-                        onClick={() => setShowSortMenu(prev => !prev)} // 토글
-                    >
+                    <button className={styles.sortBtn} onClick={() => setShowSortMenu(prev => !prev)}>
                         {sortOrder} <SortBtn />
                     </button>
-
                     {showSortMenu && (
                         <ul className={styles.sortMenu}>
                             {['기본', '최신순', '저도궁금해요순'].map(option => (
-                                <li
-                                    key={option}
-                                    className={styles.sortOption}
-                                    onClick={() => {
-                                        setSortOrder(option);
-                                        setShowSortMenu(false);
-                                    }}
-                                >
+                                <li key={option} className={styles.sortOption}
+                                    onClick={() => { setSortOrder(option); setShowSortMenu(false); }}>
                                     {option}
                                 </li>
                             ))}
@@ -281,92 +304,77 @@ function QnAListPage({
             </div>
             <hr className={styles.divider} />
 
-
             {/* 이해도 */}
             <div className={styles.understandBar}>
-
-                <button className={styles.arrowBtn} onClick={goPrevUnderstand} disabled={understandIndex === 0}>
+                <button className={styles.arrowBtn} onClick={goPrevUnderstand}
+                    disabled={!understanding?.hasOlder}>
                     <FiChevronLeft size={30} />
                 </button>
                 <span className={styles.understandName}>
-                    {currentUnderstand}
-                    <span className={styles.understandCount}> (13/29)</span>
-
+                    {understanding?.current?.content ?? '이해도 없음'}
+                    <span className={styles.understandCount}>
+                        ({understanding?.current?.understoodCount ?? 0}/
+                        {(understanding?.current?.understoodCount ?? 0) + (understanding?.current?.notUnderstoodCount ?? 0)})
+                    </span>
                 </span>
                 <button
-                    className={`${styles.oxBtn} ${styles.oxO} ${myUnderstand === true ? styles.oxActive : ''}`}
-                    onClick={() => setMyUnderstand(prev => prev === true ? null : true)}
-                    title="이해했어요"
+                    className={`${styles.oxBtn} ${styles.oxO} ${currentChoice === 'UNDERSTOOD' ? styles.oxActive : ''}`}
+                    onClick={() => handleUnderstandChoice('UNDERSTOOD')}
                     disabled={isStaff}
                 >
                     <OBtn />
-                    {isStaff && <span className={styles.oxCount}>7</span>}
+                    {isStaff && <span className={styles.oxCount}>{understanding?.current?.understoodCount ?? 0}</span>}
                 </button>
                 <button
-                    className={`${styles.oxBtn} ${styles.oxX} ${myUnderstand === false ? styles.oxActive : ''}`}
-                    onClick={() => setMyUnderstand(prev => prev === false ? null : false)}
-                    title="모르겠어요"
+                    className={`${styles.oxBtn} ${styles.oxX} ${currentChoice === 'NOT_UNDERSTOOD' ? styles.oxActive : ''}`}
+                    onClick={() => handleUnderstandChoice('NOT_UNDERSTOOD')}
                     disabled={isStaff}
                 >
                     <XBtn />
-                    {isStaff && <span className={styles.oxCount}>6</span>}
+                    {isStaff && <span className={styles.oxCount}>{understanding?.current?.notUnderstoodCount ?? 0}</span>}
                 </button>
-                <button className={styles.arrowBtn} onClick={goNextUnderstand} disabled={understandIndex === UNDERSTAND.length - 1}>
+                <button className={styles.arrowBtn} onClick={goNextUnderstand}
+                    disabled={!understanding?.hasNewer}>
                     <FiChevronRight size={30} />
                 </button>
             </div>
 
-
-            {/* ── 질문 목록 ── */}
+            {/* 질문 목록 */}
             <div className={styles.questionList}>
                 {displayedQuestions.map(question => (
-                    <div
-                        key={question.id}
-                        className={styles.questionCard}
-                        onClick={() => onCardClick?.(question.id)}
-                    >
-
+                    <div key={question.questionId} className={styles.questionCard}
+                        onClick={() => navigate(`/sessions/${sessionId}/questions/${question.questionId}`)}>
                         <div className={styles.questionHeader}>
-                            <span className={styles.qIcon}>Q.</span>
-                            <span className={styles.questionText}>{question.text}</span>
-
+                            <span
+                                className={styles.qIcon}
+                                style={{ color: question.isResolved ? 'var(--gray600)' : '' }}
+                            >Q.</span>
+                            <span className={styles.questionText}>{question.content}</span>
                             <div className={styles.questionActions}>
                                 <button
                                     className={`${styles.likeBtn} ${question.iLiked ? styles.liked : ''}`}
-                                    onClick={e => toggleLike(e, question.id)}
+                                    onClick={e => toggleLike(e, question.questionId)}
                                 >
-                                    <MeCuriousToo />{question.likes}
+                                    <MeCuriousToo />{question.likeCount}
                                 </button>
-                                <button
-                                    className={styles.commentBtn}
-                                    onClick={e => toggleCommentInput(e, question.id)}
-                                >
-                                    <CommentImoji />
-                                    &nbsp;댓글달기
+                                <button className={styles.commentBtn}
+                                    onClick={e => toggleCommentInput(e, question.questionId)}>
+                                    <CommentImoji />&nbsp;댓글달기
                                 </button>
                             </div>
                         </div>
-                        {question.image && (
-                            <img
-                                src={question.image}
-                                alt="첨부 이미지"
+
+                        {question.imageUrl && (
+                            <img src={question.imageUrl} alt="첨부 이미지"
                                 className={styles.questionImage}
-                                onClick={e => e.stopPropagation()}
-                            />
+                                onClick={e => e.stopPropagation()} />
                         )}
 
-
-                        {question.comments.length > 0 && (
+                        {question.previewComments?.length > 0 && (
                             <div className={styles.commentPreview}>
-                                {question.comments.slice(0, MAX_VISIBLE_COMMENTS).map(comment => (
-                                    <div key={comment.id} className={styles.commentWrapper}>
-                                        <span className={styles.commentAuthor}>
-                                            {comment.author}
-                                            {comment.isStaff && (
-                                                <span className={styles.staffBadge}><StaffCheck /></span>
-                                            )}
-                                        </span>
-                                        {/* 댓글 내용 */}
+                                {question.previewComments.slice(0, MAX_VISIBLE_COMMENTS).map(comment => (
+                                    <div key={comment.commentId} className={styles.commentWrapper}>
+                                        <span className={styles.commentAuthor}>{comment.displayName}</span>
                                         <div className={styles.commentItem}>
                                             <div className={styles.commentContent}>
                                                 <CommentCommentArraw /> {comment.content}
@@ -374,35 +382,26 @@ function QnAListPage({
                                         </div>
                                     </div>
                                 ))}
-
-
-                                {question.comments.length > MAX_VISIBLE_COMMENTS && (
+                                {question.commentCount > MAX_VISIBLE_COMMENTS && (
                                     <span className={styles.commentMore}>
-                                        외 {question.comments.length - MAX_VISIBLE_COMMENTS}개 댓글
+                                        외 {question.commentCount - MAX_VISIBLE_COMMENTS}개 댓글
                                     </span>
                                 )}
                             </div>
                         )}
-                        {commentOpenId === question.id && (
-                            <div
-                                className={styles.commentInputRow}
-                                onClick={e => e.stopPropagation()}
-                            >
+
+                        {commentOpenId === question.questionId && (
+                            <div className={styles.commentInputRow} onClick={e => e.stopPropagation()}>
                                 <input
                                     className={styles.commentInput}
                                     placeholder="댓글을 입력해주세요..."
-                                    value={commentInputs[question.id] || ''}
-                                    onChange={e => handleCommentChange(question.id, e.target.value)}
-                                    // 엔터 누르면 제출
-                                    onKeyDown={e => {
-                                        if (e.key === 'Enter') handleCommentSubmit(e, question.id);
-                                    }}
+                                    value={commentInputs[question.questionId] || ''}
+                                    onChange={e => handleCommentChange(question.questionId, e.target.value)}
+                                    onKeyDown={e => { if (e.key === 'Enter') handleCommentSubmit(e, question.questionId); }}
                                     autoFocus
                                 />
-                                <button
-                                    className={styles.submitBtn}
-                                    onClick={e => handleCommentSubmit(e, question.id)}
-                                >
+                                <button className={styles.submitBtn}
+                                    onClick={e => handleCommentSubmit(e, question.questionId)}>
                                     <SumitBtn />
                                 </button>
                             </div>
@@ -411,36 +410,30 @@ function QnAListPage({
                 ))}
             </div>
 
-
             <div className={styles.bottomCover} />
             <div className={styles.newQuestionBar}>
-
-                {submitError && (
-                    <p className={styles.errorMsg}>{submitError}</p>
-                )}
-
+                {submitError && <p className={styles.errorMsg}>{submitError}</p>}
                 <div className={styles.newQuestionInputRow}>
                     <button className={styles.newQuestionPlus}>+</button>
                     <input
                         className={styles.newQuestionInput}
-                        placeholder="질문을 남겨주세요..."
+                        placeholder={isStaff ? '부원들의 이해도를 체크해보세요' : '질문을 남겨주세요...'}
                         value={newQuestion}
                         onChange={e => setNewQuestion(e.target.value)}
                         onKeyDown={e => {
-                            if (e.key === 'Enter') handleNewQuestion();
+                            if (e.key === 'Enter') isStaff ? handleNewUnderstandCheck() : handleNewQuestion();
                         }}
                         disabled={isSubmitting}
                     />
                     <button
                         className={styles.newQuestionSubmit}
-                        onClick={handleNewQuestion}
+                        onClick={isStaff ? handleNewUnderstandCheck : handleNewQuestion}
                         disabled={isSubmitting}
                     >
                         {isSubmitting ? '⏳' : <SumitBtn />}
                     </button>
                 </div>
             </div>
-
         </div>
     );
 }
diff --git a/frontend/src/pages/qna/QnAMainPage.js b/frontend/src/pages/qna/QnAMainPage.js
index 4e611ea..c750fb9 100644
--- a/frontend/src/pages/qna/QnAMainPage.js
+++ b/frontend/src/pages/qna/QnAMainPage.js
@@ -1,27 +1,22 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styles from './QnAMainPage.module.css';
 import { FiLogIn } from 'react-icons/fi';
+import { authFetch } from '../../utils/Api';
 
-// ─────────────────────────────────────────────
-// 📌 목업 데이터 
-// ─────────────────────────────────────────────
-// const MOCK_DATA = {
-//     activeSessions: [
-//         { sessionId: 1, week: 1, dayOfWeek: '화요일', dayPart: '오전', sessionDate: '2026.05.23', title: 'HTML/CSS' }
-//     ],
-//     pastSessions: [
-//         { sessionId: 1, week: 1, dayOfWeek: '화요일', dayPart: '오전', sessionDate: '2026.05.23', title: 'HTML/CSS' },
-//         { sessionId: 2, week: 1, dayOfWeek: '화요일', dayPart: '오후', sessionDate: '2026.05.23', title: 'Git 기초' },
-//     ]
-// };
-// ─────────────────────────────────────────────
+const DAY_PART_KO = { AM: '오전', PM: '오후' };
 
-const BASE_URL = '';
+const DAY_OF_WEEK_KO = {
+    MONDAY: '월요일', TUESDAY: '화요일', WEDNESDAY: '수요일',
+    THURSDAY: '목요일', FRIDAY: '금요일', SATURDAY: '토요일', SUNDAY: '일요일',
+};
 
-const getIcon = (dayPart) => dayPart === '오전' ? '☀' : '☾';
-const getTime = (dayPart) => dayPart === '오전' ? '10:00 ~ 13:00' : '14:00 ~ 17:00';
+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);
@@ -31,31 +26,16 @@ function QNAMainPage() {
         const fetchSessions = async () => {
             try {
                 setLoading(true);
-
-                const token = localStorage.getItem('token');
-
-                const res = await fetch(`${BASE_URL}/api/sessions`, {
-                    method: 'GET',
-                    headers: {
-                        'Authorization': `Bearer ${token}`,
-                        'Content-Type': 'application/json',
-                    }
-                });
-
+                const res = await authFetch('/api/sessions');
                 if (!res.ok) throw new Error(`서버 오류: ${res.status}`);
-
                 const json = await res.json();
-
                 if (!json.isSuccess) throw new Error(json.message);
 
-                // DB에 데이터 없으면 목업으로 대체
-                // setActiveSessions(json.result.activeSessions.length > 0 ? json.result.activeSessions : MOCK_DATA.activeSessions);
-                // setPastSessions(json.result.pastSessions.length > 0 ? json.result.pastSessions : MOCK_DATA.pastSessions);
-
+                setActiveSessions(json.result.activeSessions ?? []);
+                setPastSessions(json.result.pastSessions ?? []);
             } catch (err) {
                 console.error('세션 불러오기 실패:', err);
-                // setActiveSessions(MOCK_DATA.activeSessions);
-                // setPastSessions(MOCK_DATA.pastSessions);
+                setError(err.message);
             } finally {
                 setLoading(false);
             }
@@ -70,19 +50,26 @@ function QNAMainPage() {
     return (
         <div className={styles.page}>
 
-            {/* 진행 중인 세션 있을 때만 표시 */}
+            {/* 진행 중인 세션 */}
             {activeSessions.length > 0 && (
                 <>
                     <section className={styles.section}>
                         <h2 className={styles.sectionTitle}>Q&A</h2>
                         {activeSessions.map(session => (
-                            <div key={session.sessionId} className={styles.card}>
+                            <div
+                                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>
                                     {session.title}
                                 </p>
-                                <p className={styles.cardWeek}>{session.week}주차 {session.dayOfWeek} {session.dayPart}</p>
-                                <p className={styles.cardDate}>{session.sessionDate}</p>
+                                <p className={styles.cardWeek}>
+                                    {session.week}주차 {DAY_OF_WEEK_KO[session.dayOfWeek]} {DAY_PART_KO[session.dayPart]}
+                                </p>
+                                <p className={styles.cardDate}>{formatDate(session.sessionDate)}</p>
                                 <p className={styles.cardTime}>{getTime(session.dayPart)}</p>
                             </div>
                         ))}
@@ -92,7 +79,7 @@ function QNAMainPage() {
             )}
 
             {/* 지난 세션 */}
-            {pastSessions.length > 0 ? (
+            {pastSessions.length > 0 && (
                 <section className={styles.section}>
                     <h2 className={styles.sectionTitle}>지난 세션</h2>
                     <div className={styles.list}>
@@ -101,20 +88,27 @@ function QNAMainPage() {
                                 <span>
                                     <span className={styles.icon}>{getIcon(session.dayPart)}</span>
                                     <span className={styles.listTitle}>{session.title}</span>
-                                    <span className={styles.listWeek}> •{session.week}주차 {session.dayOfWeek} {session.dayPart}</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>
+                                <button
+                                    className={styles.enterBtn}
+                                    onClick={() => navigate(`/sessions/${session.sessionId}/questions`, { state: { status: 'AFTER_SESSION' } })}
+                                >
+                                    <FiLogIn size={25} />
+                                </button>
                             </div>
                         ))}
                     </div>
                 </section>
-            ) : (
-                /* 진행 중인 세션도 없고 지난 세션도 없을 때 */
-                activeSessions.length === 0 && (
-                    <section className={styles.section}>
-                        <p className={styles.empty}>아직 생성된 Q&A가 없어요</p>
-                    </section>
-                )
+            )}
+
+            {/* 둘 다 없을 때 */}
+            {activeSessions.length === 0 && pastSessions.length === 0 && (
+                <section className={styles.section}>
+                    <p className={styles.empty}>아직 생성된 Q&A가 없어요</p>
+                </section>
             )}
 
         </div>