diff --git a/package-lock.json b/package-lock.json
index 7c0c646..a46262d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "eslint-plugin-prettier": "^5.5.4",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-simple-import-sort": "^12.1.1",
+        "event-source-polyfill": "^1.0.31",
         "lucide-react": "^0.545.0",
         "prettier": "^3.6.2",
         "react": "^19.0.0",
@@ -4061,6 +4062,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/event-source-polyfill": {
+      "version": "1.0.31",
+      "resolved": "https://registry.npmjs.org/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz",
+      "integrity": "sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA=="
+    },
     "node_modules/eventemitter2": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-5.0.1.tgz",
diff --git a/package.json b/package.json
index 03f3bac..b3db69e 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "event-source-polyfill": "^1.0.31",
     "lucide-react": "^0.545.0",
     "prettier": "^3.6.2",
     "react": "^19.0.0",
diff --git a/src/apis/myPage.ts b/src/apis/myPage.ts
index f0c3f84..d532cea 100644
--- a/src/apis/myPage.ts
+++ b/src/apis/myPage.ts
@@ -1,6 +1,7 @@
 import type {
   TDeleteRequest,
   TDeleteResponse,
+  TInterviewSummaryResponse,
   TMyFeedbackDetailResponse,
   TMyFeedbackRequest,
   TMyFeedbackResponse,
@@ -10,6 +11,9 @@ import type {
   TPatchProfileRequest,
   TPatchProfileResponse,
   TPatchRequest,
+  TQuestionAnswersResponse,
+  TQuestionFeedbackResponse,
+  TRandomQuestionsResponse,
 } from '@/types/myPage';
 
 import { axiosInstance } from '@/apis/axiosInstance';
@@ -46,3 +50,24 @@ export const putProfile = async (param: TPatchProfileRequest): Promise<TPatchPro
   const { data } = await axiosInstance.put<TPatchProfileResponse>('/api/myarchive/myprofile', param);
   return data;
 };
+
+// 나의 면접 상세 API
+export const getInterviewSummary = async (interviewId: number): Promise<TInterviewSummaryResponse> => {
+  const { data } = await axiosInstance.get<TInterviewSummaryResponse>(`/api/myarchive/myinterviews/${interviewId}/summary`);
+  return data;
+};
+
+export const getQuestionAnswers = async (questionId: number): Promise<TQuestionAnswersResponse> => {
+  const { data } = await axiosInstance.get<TQuestionAnswersResponse>(`/api/myarchive/myinterviews/questions/${questionId}/answers`);
+  return data;
+};
+
+export const getQuestionFeedback = async (questionId: number): Promise<TQuestionFeedbackResponse> => {
+  const { data } = await axiosInstance.get<TQuestionFeedbackResponse>(`/api/myarchive/myinterviews/questions/${questionId}/feedback`);
+  return data;
+};
+
+export const getRandomQuestions = async (questionId: number): Promise<TRandomQuestionsResponse> => {
+  const { data } = await axiosInstance.get<TRandomQuestionsResponse>(`/api/myarchive/myinterviews/questions/${questionId}/random-questions`);
+  return data;
+};
diff --git a/src/components/RandomQuestion.tsx b/src/components/RandomQuestion.tsx
index 29d63d4..e4878ef 100644
--- a/src/components/RandomQuestion.tsx
+++ b/src/components/RandomQuestion.tsx
@@ -1,16 +1,26 @@
 import { useEffect, useRef, useState } from 'react';
+import {
+  getRandomQuestion,
+  subscribeToNotifications,
+  uploadFeedbackRecordingAndGetResult,
+  type IRandomQuestion,
+  type IRandomNotificationPayload,
+} from '@/services/randomQuestionApi';
+import clockFrog from '@/assets/clockFrog.svg';
+
+type TNotification = IRandomNotificationPayload;
+const MAX_TIME = 180; // 팝업 질문 제한 시간(초)
 
 export default function RandomQuestion() {
   const [showPopup, setShowPopup] = useState(false);
-  const [currentQuestion, setCurrentQuestion] = useState(0);
+  const [notification, setNotification] = useState<TNotification | null>(null);
+  const [questionDetail, setQuestionDetail] = useState<IRandomQuestion | null>(null);
+  const [loadingQuestion, setLoadingQuestion] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  // 질문 데이터
-  const questions = [
-    { id: 1, main: '메인질문', sub: '간단히 자기소개를 해주세요.' },
-    { id: 2, main: '메인질문', sub: '이 직무를 선택한 이유는 무엇인가요?' },
-    { id: 3, main: '메인질문', sub: '본인의 강점은 무엇이라고 생각하나요?' },
-    { id: 4, main: '메인질문', sub: '입사 후 목표는 무엇인가요?' },
-  ];
+  // ===== 타이머 상태 =====
+  const [remainingTime, setRemainingTime] = useState<number>(MAX_TIME);
+  const countdownTimerRef = useRef<number | null>(null);
 
   // ===== 녹음 상태 =====
   const [isRecording, setIsRecording] = useState(false);
@@ -22,6 +32,7 @@ export default function RandomQuestion() {
   const audioChunksRef = useRef<Blob[]>([]);
   const streamRef = useRef<MediaStream | null>(null);
   const recordTimerRef = useRef<number | null>(null);
+  const latestAudioBlobRef = useRef<Blob | null>(null);
 
   // ===== 재생 상태 =====
   const audioRef = useRef<HTMLAudioElement | null>(null);
@@ -29,19 +40,142 @@ export default function RandomQuestion() {
   const [playbackTime, setPlaybackTime] = useState(0);
   const [playbackDuration, setPlaybackDuration] = useState(0);
 
-  // ===== 팝업 랜덤 등장 =====
+  // 제출 중 상태
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // ===== SSE & 요청 취소 컨트롤 =====
+  const esRef = useRef<EventSource | null>(null);
+  const reconnectTimerRef = useRef<number | null>(null);
+  const attemptsRef = useRef(0);
+  const fetchAbortRef = useRef<AbortController | null>(null); // ✅ 이전 요청 취소용
+
+  const clearReconnectTimer = () => {
+    if (reconnectTimerRef.current) {
+      clearTimeout(reconnectTimerRef.current);
+      reconnectTimerRef.current = null;
+    }
+  };
+
+  const scheduleReconnect = (why: string) => {
+    if (reconnectTimerRef.current) return;
+    const wait = Math.min(30000, 1000 * Math.pow(2, attemptsRef.current));
+    attemptsRef.current += 1;
+    console.warn(`[SSE] reconnect in ${wait}ms (${why})`);
+    reconnectTimerRef.current = window.setTimeout(() => {
+      reconnectTimerRef.current = null;
+      openSSE();
+    }, wait);
+  };
+
+  const closeSSE = () => {
+    clearReconnectTimer();
+    if (esRef.current) {
+      try {
+        esRef.current.close();
+      } catch {}
+      esRef.current = null;
+    }
+  };
+
+  const fetchRandomQuestion = async (peerFeedbackId: number) => {
+    // 이전 요청 취소
+    fetchAbortRef.current?.abort();
+    fetchAbortRef.current = new AbortController();
+
+    setLoadingQuestion(true);
+    setErrorMessage(null);
+
+    try {
+      console.log('[RQ] fetch start', { peerFeedbackId });
+      const q = await getRandomQuestion(peerFeedbackId, {
+        noCache: true, // ✅ 캐시 우회
+        signal: fetchAbortRef.current.signal, // ✅ 이전 요청 취소 대응
+      });
+      console.log('[RQ] fetch ok', q);
+      setQuestionDetail(q);
+    } catch (err: any) {
+      if (err?.name === 'CanceledError' || err?.name === 'AbortError') {
+        console.log('[RQ] fetch aborted');
+      } else {
+        console.error('[RQ] fetch error', err);
+        setErrorMessage('팝업 질문을 불러오지 못했습니다.');
+      }
+    } finally {
+      setLoadingQuestion(false);
+    }
+  };
+
+  const handleMessage = async (event: MessageEvent) => {
+    // 서버가 보내는 ping/keepalive 등 비 JSON은 무시
+    try {
+      const parsed = JSON.parse(event.data);
+      if (!parsed || typeof parsed !== 'object' || parsed.peerFeedbackId == null) {
+        return;
+      }
+      const data = parsed as TNotification;
+
+      // 새 팝업 초기화
+      setNotification(data);
+      setShowPopup(true);
+      setQuestionDetail(null);
+      setRecordedAudio((prev) => {
+        if (prev) URL.revokeObjectURL(prev);
+        return null;
+      });
+      latestAudioBlobRef.current = null;
+      setRecordingTime(0);
+      setRemainingTime(MAX_TIME);
+
+      await fetchRandomQuestion(Number(data.peerFeedbackId));
+    } catch {
+      // 무시(keepalive)
+    }
+  };
+
+  const openSSE = () => {
+    closeSSE();
+    attemptsRef.current = 0;
+
+    const es = subscribeToNotifications(handleMessage, (errorEvt) => {
+      console.error('SSE 연결 오류:', errorEvt);
+      scheduleReconnect('onerror');
+    });
+
+    (es as any).onopen = () => {
+      attemptsRef.current = 0;
+      console.log('[SSE] opened');
+    };
+
+    esRef.current = es;
+  };
+
   useEffect(() => {
-    const timeout: number = window.setTimeout(
-      () => {
-        const randomIndex = Math.floor(Math.random() * questions.length);
-        setCurrentQuestion(randomIndex);
-        setShowPopup(true);
-      },
-      Math.random() * 5000 + 3000,
-    ); // 3~8초
-
-    return () => clearTimeout(timeout);
-  }, [questions.length]);
+    const onVis = () => {
+      if (document.visibilityState === 'visible') {
+        openSSE();
+      } else {
+        closeSSE();
+      }
+    };
+    openSSE();
+    document.addEventListener('visibilitychange', onVis);
+    return () => {
+      document.removeEventListener('visibilitychange', onVis);
+      closeSSE();
+      fetchAbortRef.current?.abort();
+      if (recordedAudio) URL.revokeObjectURL(recordedAudio);
+      if (recordTimerRef.current) clearInterval(recordTimerRef.current);
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((t) => t.stop());
+        streamRef.current = null;
+      }
+      if (countdownTimerRef.current) {
+        clearInterval(countdownTimerRef.current);
+        countdownTimerRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   // ===== 유틸 =====
   const formatTime = (s: number) => {
@@ -51,14 +185,50 @@ export default function RandomQuestion() {
     return `${m}:${r.toString().padStart(2, '0')}`;
   };
 
-  const navigateTo = (path: string) => {
-    try {
-      window.history.pushState({}, '', path);
-      window.dispatchEvent(new PopStateEvent('popstate'));
-    } catch {
-      window.location.href = path;
+  // ===== 팝업 전체 제한시간 타이머 =====
+  useEffect(() => {
+    if (!showPopup) {
+      if (countdownTimerRef.current) {
+        clearInterval(countdownTimerRef.current);
+        countdownTimerRef.current = null;
+      }
+      return;
     }
-  };
+    countdownTimerRef.current = window.setInterval(() => {
+      setRemainingTime((prev) => {
+        if (prev <= 1) {
+          if (countdownTimerRef.current) {
+            clearInterval(countdownTimerRef.current);
+            countdownTimerRef.current = null;
+          }
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => {
+      if (countdownTimerRef.current) {
+        clearInterval(countdownTimerRef.current);
+        countdownTimerRef.current = null;
+      }
+    };
+  }, [showPopup]);
+
+  // 시간 종료 시 부가 처리
+  useEffect(() => {
+    if (!showPopup || remainingTime > 0) return;
+    if (isRecording && mediaRecorderRef.current) {
+      try {
+        mediaRecorderRef.current.stop();
+      } catch {}
+      setIsRecording(false);
+      setIsPausedRec(false);
+    }
+    if (audioRef.current) audioRef.current.pause();
+  }, [remainingTime, showPopup, isRecording]);
+
+  const isTimeOver = remainingTime <= 0;
 
   // ===== 녹음 타이머 =====
   useEffect(() => {
@@ -78,11 +248,16 @@ export default function RandomQuestion() {
 
   // ===== 녹음 제어 =====
   const startRecording = async () => {
+    if (isTimeOver) {
+      alert('시간이 종료되어 더 이상 녹음할 수 없습니다.');
+      return;
+    }
     try {
       if (recordedAudio) {
         URL.revokeObjectURL(recordedAudio);
         setRecordedAudio(null);
       }
+      latestAudioBlobRef.current = null;
       setPlaybackTime(0);
       setPlaybackDuration(0);
       setIsPlaying(false);
@@ -97,17 +272,14 @@ export default function RandomQuestion() {
       mediaRecorder.ondataavailable = (e) => {
         if (e.data.size > 0) audioChunksRef.current.push(e.data);
       };
-
       mediaRecorder.onstop = () => {
         const mime = mediaRecorder.mimeType || 'audio/webm';
         const blob = new Blob(audioChunksRef.current, { type: mime });
+        latestAudioBlobRef.current = blob;
         const url = URL.createObjectURL(blob);
         setRecordedAudio(url);
-
-        // 스트림 종료
         stream.getTracks().forEach((t) => t.stop());
         streamRef.current = null;
-
         setIsRecording(false);
         setIsPausedRec(false);
       };
@@ -145,6 +317,10 @@ export default function RandomQuestion() {
   };
 
   const handleRetry = () => {
+    if (isTimeOver) {
+      alert('시간이 종료되어 다시 녹음할 수 없습니다.');
+      return;
+    }
     if (audioRef.current) {
       audioRef.current.pause();
       audioRef.current.currentTime = 0;
@@ -152,13 +328,13 @@ export default function RandomQuestion() {
     setIsPlaying(false);
     setPlaybackTime(0);
     setPlaybackDuration(0);
-
     if (recordedAudio) {
       URL.revokeObjectURL(recordedAudio);
       setRecordedAudio(null);
     }
     setRecordingTime(0);
-    startRecording();
+    latestAudioBlobRef.current = null;
+    void startRecording();
   };
 
   // ===== 재생 제어 =====
@@ -179,7 +355,6 @@ export default function RandomQuestion() {
   useEffect(() => {
     const el = audioRef.current;
     if (!el) return;
-
     const onLoadedMeta = () => {
       setPlaybackDuration(Math.floor(isFinite(el.duration) ? el.duration : 0));
       setPlaybackTime(Math.floor(el.currentTime || 0));
@@ -191,15 +366,12 @@ export default function RandomQuestion() {
       setIsPlaying(false);
       setPlaybackTime(0);
     };
-
     el.addEventListener('loadedmetadata', onLoadedMeta);
     el.addEventListener('timeupdate', onTimeUpdate);
     el.addEventListener('play', onPlay);
     el.addEventListener('pause', onPause);
     el.addEventListener('ended', onEnded);
-
     if (el.readyState >= 1) onLoadedMeta();
-
     return () => {
       el.removeEventListener('loadedmetadata', onLoadedMeta);
       el.removeEventListener('timeupdate', onTimeUpdate);
@@ -209,44 +381,45 @@ export default function RandomQuestion() {
     };
   }, [recordedAudio]);
 
-  // ===== 팝업 제어/페이지 이동 =====
+  // ===== 팝업 닫기 =====
   const handleClose = () => {
     if (isRecording) stopRecording();
     if (audioRef.current) audioRef.current.pause();
     setShowPopup(false);
   };
 
-  const handleGoToInterview = () => {
-    if (isRecording) stopRecording();
-    if (audioRef.current) audioRef.current.pause();
-    navigateTo('/upload');
-    setShowPopup(false);
-  };
-  const handleNext = () => {
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion((i) => i + 1);
-    } else {
-      // 마지막이면 면접 페이지로 이동 (기존 동작 유지)
-      handleGoToInterview();
+  // ===== 답변 제출 =====
+  const handleSubmit = async () => {
+    if (isTimeOver) {
+      alert('시간이 종료되어 답변을 제출할 수 없습니다.');
+      return;
+    }
+    if (!questionDetail?.question?.questionId) {
+      alert('질문 정보를 불러오지 못했습니다.');
+      return;
+    }
+    if (!latestAudioBlobRef.current) {
+      alert('먼저 답변을 녹음해주세요.');
+      return;
     }
-  };
 
-  // 정리
-  useEffect(() => {
-    return () => {
-      if (recordedAudio) URL.revokeObjectURL(recordedAudio);
-      if (recordTimerRef.current) clearInterval(recordTimerRef.current);
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach((t) => t.stop());
-        streamRef.current = null;
-      }
-    };
-  }, [recordedAudio]);
+    try {
+      setIsSubmitting(true);
+      const feedback = await uploadFeedbackRecordingAndGetResult(questionDetail.question.questionId, latestAudioBlobRef.current);
+      alert(`AI 피드백이 도착했어요.\n\n${feedback.aiFeedback}`);
+      setShowPopup(false);
+    } catch (err) {
+      console.error('랜덤 팝업 답변 제출 실패:', err);
+      alert('답변 제출에 실패했습니다. 잠시 후 다시 시도해주세요.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
 
   if (!showPopup) return null;
 
-  const progress = ((currentQuestion + 1) / questions.length) * 100;
   const playbackPercent = playbackDuration > 0 ? Math.min(100, Math.max(0, (playbackTime / playbackDuration) * 100)) : 0;
+  const progress = 100;
 
   return (
     <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center">
@@ -258,49 +431,64 @@ export default function RandomQuestion() {
           </svg>
         </button>
 
-        {/* 질문 카드 */}
-        <h3 className="text-xl font-semibold text-gray-700 mb-6 text-center">
-          {questions[currentQuestion].id}. ({questions[currentQuestion].main})
-        </h3>
-        <p className="text-gray-700 text-center mb-8">
-          {questions[currentQuestion].id}-1. {questions[currentQuestion].sub}
+        {/* 헤더 - 알림 정보 */}
+        <p className="text-sm text-gray-500 mb-1">
+          {notification ? `${notification.jobName} · ${notification.interviewName} · 질문 ${notification.questionNumber}번` : '랜덤 팝업 질문'}
         </p>
-
-        {/* 이미지 */}
-        <div className="flex justify-center mb-8">
-          <img src="/src/assets/clockFrog.svg" alt="면접관" className="w-32 h-auto" />
+        <h3 className="text-xl font-semibold text-gray-700 mb-4 text-center">랜덤 팝업 질문이 도착했어요 🔔</h3>
+
+        {/* 질문/맥락 */}
+        {loadingQuestion ? (
+          <p className="text-center text-gray-500 mb-8">질문을 불러오는 중입니다...</p>
+        ) : errorMessage ? (
+          <p className="text-center text-red-500 mb-8">{errorMessage}</p>
+        ) : questionDetail ? (
+          <>
+            <div className="bg-gray-50 rounded-xl p-4 mb-4">
+              <p className="text-xs font-semibold text-gray-500 mb-1">맥락이 되는 질문</p>
+              <p className="text-sm text-gray-700 mb-2">{questionDetail.context.questionText}</p>
+              {questionDetail.context.sttText && <p className="text-xs text-gray-500 whitespace-pre-line">{questionDetail.context.sttText}</p>}
+            </div>
+            <p className="text-gray-700 text-center mb-8">{questionDetail.question.questionText}</p>
+          </>
+        ) : (
+          <p className="text-center text-gray-500 mb-8">질문 정보를 불러오지 못했습니다.</p>
+        )}
+
+        <div className="flex justify-center mb-4">
+          <img src={clockFrog} alt="면접관" className="w-32 h-auto" />
         </div>
 
-        {/* 질문 진행바 */}
+        <p className="text-center text-sm text-gray-500 mb-4">
+          {remainingTime > 0 ? `답변 가능 시간이 ${remainingTime}초 남았습니다.` : '시간이 종료되었습니다.'}
+        </p>
+
         <div className="mb-4">
           <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
             <div className="h-full bg-coral-500 transition-all duration-500" style={{ width: `${progress}%` }} />
           </div>
-          <p className="text-center text-sm text-gray-500 mt-2">
-            질문 {currentQuestion + 1} / {questions.length}
-          </p>
+          <p className="text-center text-sm text-gray-500 mt-2">랜덤 팝업 질문</p>
         </div>
 
-        {/* 녹음/재생 영역 */}
         <div className="bg-gray-100 rounded-2xl p-6 mb-6">
           {!recordedAudio ? (
-            // === 녹음 UI ===
             <div className="flex items-center justify-center gap-4">
               {!isRecording ? (
-                // 시작 버튼 (마이크 아이콘)
                 <button
                   onClick={startRecording}
-                  className="w-12 h-12 bg-coral-500 hover:bg-coral-600 rounded-full flex items-center justify-center shadow-md transition-colors"
+                  disabled={isTimeOver}
+                  className={`w-12 h-12 rounded-full flex items-center justify-center shadow-md transition-colors ${
+                    isTimeOver ? 'bg-gray-300 text-gray-500 cursor-not-allowed' : 'bg-coral-500 hover:bg-coral-600 text-white'
+                  }`}
                   aria-label="녹음 시작"
                 >
-                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                     <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
                     <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
                   </svg>
                 </button>
               ) : (
                 <>
-                  {/* 일시정지/재개 */}
                   <button
                     onClick={togglePauseRec}
                     className="w-12 h-12 bg-yellow-500 hover:bg-yellow-600 rounded-full flex items-center justify-center shadow-md transition-colors"
@@ -316,11 +504,7 @@ export default function RandomQuestion() {
                       </svg>
                     )}
                   </button>
-
-                  {/* 녹음 시간 */}
                   <span className="text-lg font-semibold text-coral-500">{formatTime(recordingTime)}</span>
-
-                  {/* 정지 */}
                   <button
                     onClick={stopRecording}
                     className="w-12 h-12 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center shadow-md transition-colors"
@@ -334,7 +518,6 @@ export default function RandomQuestion() {
               )}
             </div>
           ) : (
-            // === 재생 UI ===
             <div className="flex items-center gap-4">
               <button
                 onClick={toggleAudioPlayback}
@@ -351,36 +534,42 @@ export default function RandomQuestion() {
                   </svg>
                 )}
               </button>
-
               <div className="flex-1">
                 <div className="h-2 bg-gray-300 rounded-full overflow-hidden">
                   <div className="h-full bg-coral-500 rounded-full transition-all duration-150" style={{ width: `${playbackPercent}%` }} />
                 </div>
               </div>
-
               <span className="text-sm text-gray-600 font-medium flex-shrink-0">
                 {formatTime(playbackTime)} / {formatTime(playbackDuration)}
               </span>
-
               <audio ref={audioRef} src={recordedAudio || ''} preload="metadata" />
             </div>
           )}
         </div>
 
-        {/* 버튼 그룹 */}
         <div className="flex justify-between items-center">
           <button
             onClick={handleRetry}
-            className="bg-white border border-coral-500 text-coral-500 px-6 py-2 rounded-full text-sm font-medium hover:bg-coral-50 transition-colors"
+            disabled={isTimeOver}
+            className={`px-6 py-2 rounded-full text-sm font-medium transition-colors ${
+              isTimeOver
+                ? 'bg-gray-200 border border-gray-300 text-gray-400 cursor-not-allowed'
+                : 'bg-white border border-coral-500 text-coral-500 hover:bg-coral-50'
+            }`}
           >
             다시 녹음하기
           </button>
 
           <button
-            onClick={handleNext}
-            className="bg-coral-500 hover:bg-coral-600 text-white text-sm font-medium px-6 py-3 rounded-xl shadow-md transition-colors"
+            onClick={handleSubmit}
+            disabled={isSubmitting || !latestAudioBlobRef.current || !!errorMessage || loadingQuestion || isTimeOver}
+            className={`px-6 py-3 rounded-xl text-sm font-medium shadow-md transition-colors ${
+              isSubmitting || !latestAudioBlobRef.current || !!errorMessage || loadingQuestion || isTimeOver
+                ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
+                : 'bg-coral-500 hover:bg-coral-600 text-white'
+            }`}
           >
-            {currentQuestion < questions.length - 1 ? '다음' : '면접 시작하기'}
+            {isSubmitting ? '피드백 생성 중...' : '답변 제출하고 피드백 받기'}
           </button>
         </div>
       </div>
@@ -393,7 +582,6 @@ export default function RandomQuestion() {
         .border-coral-500 { border-color: #ff7f66; }
         .hover\\:bg-coral-50:hover { background-color: #fff5f5; }
         .hover\\:bg-coral-600:hover { background-color: #ff6b52; }
-        .hover\\:text-coral-500:hover { color: #ff7f66; }
       `}</style>
     </div>
   );
diff --git a/src/components/myPage/interviewCard.tsx b/src/components/myPage/interviewCard.tsx
index 1f66c97..c04a78e 100644
--- a/src/components/myPage/interviewCard.tsx
+++ b/src/components/myPage/interviewCard.tsx
@@ -1,106 +1,91 @@
 import React, { useEffect, useState } from 'react';
 
 import useDeleteInterview from '@/hooks/useDeleteInterview';
-import usePatchInterview from '@/hooks/usePatchInterview';
+import { getInterviewSummary, getRandomQuestions } from '@/apis/myPage';
 
 import Delete from '@/assets/delete.svg?react';
-import Edit from '@/assets/edit.svg?react';
 import Frog from '@/assets/frog.svg?react';
-import Check from '@/assets/o.svg?react';
 
 type TCardProps = {
   id: number;
   title: string;
+  createdAt?: string;
   onClick?: () => void;
 };
 
-export default function InterviewCard({ id, title, onClick }: TCardProps) {
-  const { mutate: updateTitle } = usePatchInterview();
+export default function InterviewCard({ id, title, createdAt, onClick }: TCardProps) {
   const { mutate: deleteInterview } = useDeleteInterview();
-  const [isEditing, setIsEditing] = useState(false);
-  const [localTitle, setLocalTitle] = useState(title);
+  const [hasRandomQuestions, setHasRandomQuestions] = useState(false);
 
+  // 랜덤 질문 여부 확인
   useEffect(() => {
-    setLocalTitle(title);
-  }, [title]);
+    const checkRandomQuestions = async () => {
+      try {
+        // 1. 면접 상세 정보 조회
+        const summary = await getInterviewSummary(id);
+        
+        if (summary.result.questionCards && summary.result.questionCards.length > 0) {
+          // 2. 첫 번째 질문의 랜덤 질문 조회
+          const firstQuestionId = summary.result.questionCards[0].questionId;
+          const randomQuestionsData = await getRandomQuestions(firstQuestionId);
+          
+          // 3. 랜덤 질문이 있으면 true
+          if (randomQuestionsData.result && randomQuestionsData.result.length > 0) {
+            setHasRandomQuestions(true);
+          }
+        }
+      } catch (error) {
+        // 에러 발생 시 무시 (랜덤 질문 없음으로 처리)
+        console.log('랜덤 질문 확인 중 오류:', error);
+      }
+    };
 
-  const handleEditClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsEditing(true);
-  };
-
-  const confirmEdit = () => {
-    setIsEditing(false);
-    if (localTitle === title) {
-      console.log('제목 안 바뀜. PATCH 안 보냄');
-      return;
-    }
-
-    console.log('PATCH 보냄', { id, localTitle });
-    updateTitle({ interviewId: id, title: localTitle });
-  };
-
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      confirmEdit();
-    }
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      setLocalTitle(title);
-      setIsEditing(false);
-    }
-  };
+    void checkRandomQuestions();
+  }, [id]);
 
   const handleDeleteClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     deleteInterview({ sessionId: id });
   };
 
+  // 날짜 포맷팅
+  const formatDate = (dateString?: string) => {
+    if (!dateString) return null;
+    const date = new Date(dateString);
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    return `${year}년 ${month}월 ${day}일`;
+  };
+
+  const formattedDate = formatDate(createdAt);
+
   return (
     <div
       onClick={onClick}
-      className="relative cursor-pointer hover:bg-gray-50 pr-5 w-90 h-50 bg-white flex justify-center items-center rounded-[20px] border border-[#F1F1F1] shadow-[0_7px_14px_0_rgba(234,234,234,1)]"
+      className="relative cursor-pointer hover:bg-gray-50 pr-5 w-90 h-50 bg-white flex flex-col justify-center items-center rounded-[20px] border border-[#F1F1F1] shadow-[0_7px_14px_0_rgba(234,234,234,1)]"
     >
-      <div className="flex items-center justify-center">
-        <Frog className="size-25" />
-        <div className="flex items-center justify-center gap-2">
-          {isEditing ? (
-            <div className="flex items-center gap-2">
-              <input
-                className="font-medium text-xl border-b border-gray-300 outline-none bg-transparent"
-                autoFocus
-                value={localTitle}
-                onChange={(e) => setLocalTitle(e.target.value)}
-                onBlur={() => setIsEditing(false)}
-                onKeyDown={handleInputKeyDown}
-                onClick={(e) => e.stopPropagation()}
-              />
-              <button
-                type="button"
-                onMouseDown={(e) => e.preventDefault()}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  confirmEdit();
-                }}
-              >
-                <Check className="size-4 text-[#E95F45]" />
-              </button>
-            </div>
-          ) : (
-            <>
-              <p className="font-medium text-xl">{title}</p>
-              <button type="button" className="p-1 cursor-pointer" onClick={handleEditClick}>
-                <Edit className="size-4" />
-              </button>
-            </>
-          )}
-        </div>
-      </div>
-
+      {/* 삭제 버튼 */}
       <button type="button" className="absolute top-5 right-5" onClick={handleDeleteClick}>
         <Delete className="size-5" />
       </button>
+
+      {/* 날짜, 랜덤 질문 뱃지 */}
+      <div className="absolute top-5 left-5 flex flex-col gap-1">
+        {formattedDate && <span className="text-xs text-gray-500">{formattedDate}</span>}
+        {hasRandomQuestions && (
+          <span className="bg-[#E95F45] text-white text-xs px-2 py-1 rounded-full font-medium w-fit">랜덤질문</span>
+        )}
+      </div>
+
+      {/* 메인 콘텐츠 */}
+      <div className="flex items-center justify-center gap-3">
+        <Frog className="size-25" />
+        <div className="flex flex-col gap-1">
+          {/* 희망직군 (수정 불가) */}
+          <p className="font-medium text-xl text-gray-900">{title}</p>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/myPage/randomQuestionCard.tsx b/src/components/myPage/randomQuestionCard.tsx
new file mode 100644
index 0000000..1fae218
--- /dev/null
+++ b/src/components/myPage/randomQuestionCard.tsx
@@ -0,0 +1,43 @@
+import OrangeFrog from '@/assets/orangeFrog.svg?react';
+
+type TRandomQuestionCardProps = {
+  questionText: string;
+  createdAt: string;
+  jobRole?: string;
+  onClick?: () => void;
+};
+
+export default function RandomQuestionCard({ questionText, createdAt, jobRole, onClick }: TRandomQuestionCardProps) {
+  // 날짜 포맷팅
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    return `${year}년 ${month}월 ${day}일`;
+  };
+
+  const formattedDate = formatDate(createdAt);
+
+  return (
+    <div
+      onClick={onClick}
+      className="relative cursor-pointer hover:bg-orange-50 pr-5 w-90 h-50 bg-gradient-to-br from-orange-50 to-white flex flex-col justify-center items-center rounded-[20px] border-2 border-[#FF9A76] shadow-[0_7px_14px_0_rgba(255,154,118,0.3)]"
+    >
+      {/* 랜덤 질문 뱃지 */}
+      <div className="absolute top-5 left-5">
+        <span className="bg-[#E95F45] text-white text-xs px-3 py-1 rounded-full font-bold">랜덤질문</span>
+      </div>
+
+      {/* 메인 콘텐츠 */}
+      <div className="flex flex-col items-center justify-center gap-2 mt-2">
+        <OrangeFrog className="size-20" />
+        <div className="text-center px-4">
+          <p className="font-bold text-lg text-gray-900 mb-1">{formattedDate}</p>
+          {jobRole && <p className="text-sm text-gray-600 mb-2">{jobRole}</p>}
+          <p className="text-xs text-gray-500 line-clamp-2">{questionText}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/hooks/useGetInterviewSummary.ts b/src/hooks/useGetInterviewSummary.ts
new file mode 100644
index 0000000..da0bb4d
--- /dev/null
+++ b/src/hooks/useGetInterviewSummary.ts
@@ -0,0 +1,9 @@
+import { getInterviewSummary } from '@/apis/myPage';
+import { useCoreQuery } from '@/hooks/customQuery';
+
+export default function useGetInterviewSummary(interviewId: number) {
+  const { data, isLoading, error } = useCoreQuery(['getInterviewSummary', interviewId], () => getInterviewSummary(interviewId), {
+    enabled: !!interviewId,
+  });
+  return { data, isLoading, error };
+}
diff --git a/src/hooks/useGetQuestionAnswers.ts b/src/hooks/useGetQuestionAnswers.ts
new file mode 100644
index 0000000..9c051e0
--- /dev/null
+++ b/src/hooks/useGetQuestionAnswers.ts
@@ -0,0 +1,9 @@
+import { getQuestionAnswers } from '@/apis/myPage';
+import { useCoreQuery } from '@/hooks/customQuery';
+
+export default function useGetQuestionAnswers(questionId: number | null) {
+  const { data, isLoading, error } = useCoreQuery(['getQuestionAnswers', questionId], () => getQuestionAnswers(questionId!), {
+    enabled: !!questionId,
+  });
+  return { data, isLoading, error };
+}
diff --git a/src/hooks/useGetQuestionFeedback.ts b/src/hooks/useGetQuestionFeedback.ts
new file mode 100644
index 0000000..cc7c243
--- /dev/null
+++ b/src/hooks/useGetQuestionFeedback.ts
@@ -0,0 +1,9 @@
+import { getQuestionFeedback } from '@/apis/myPage';
+import { useCoreQuery } from '@/hooks/customQuery';
+
+export default function useGetQuestionFeedback(questionId: number | null) {
+  const { data, isLoading, error } = useCoreQuery(['getQuestionFeedback', questionId], () => getQuestionFeedback(questionId!), {
+    enabled: !!questionId,
+  });
+  return { data, isLoading, error };
+}
diff --git a/src/hooks/useGetRandomQuestions.ts b/src/hooks/useGetRandomQuestions.ts
new file mode 100644
index 0000000..84e90e1
--- /dev/null
+++ b/src/hooks/useGetRandomQuestions.ts
@@ -0,0 +1,9 @@
+import { getRandomQuestions } from '@/apis/myPage';
+import { useCoreQuery } from '@/hooks/customQuery';
+
+export default function useGetRandomQuestions(questionId: number | null) {
+  const { data, isLoading, error } = useCoreQuery(['getRandomQuestions', questionId], () => getRandomQuestions(questionId!), {
+    enabled: !!questionId,
+  });
+  return { data, isLoading, error };
+}
diff --git a/src/pages/Interview/feedback_result.tsx b/src/pages/Interview/feedback_result.tsx
index 6a8bb9f..af97f27 100644
--- a/src/pages/Interview/feedback_result.tsx
+++ b/src/pages/Interview/feedback_result.tsx
@@ -27,13 +27,39 @@ export default function FeedbackResult() {
       navigate('/upload');
       return;
     }
+
     const fetchFeedback = async () => {
       try {
         setIsLoading(true);
+        console.log('📊 최종 피드백 조회:', sessionId);
+
         const response = await getFinalFeedback(sessionId);
-        setFeedbackData(response);
-        const states = response.feedbacks.map((_, idx: number) => ({ id: idx + 1, showAnswer: false }));
-        setQuestionStates(states);
+
+        console.log('✅ 피드백 응답:', response);
+
+        // feedbackProgressStatus 확인
+        if (response.feedbackProgressStatus === 'WORKING') {
+          // 피드백 생성 중 - 5초 후 재시도
+          setTimeout(fetchFeedback, 5000);
+          return;
+        }
+
+        if (response.feedbackProgressStatus === 'FAILED') {
+          setError('피드백 생성에 실패했습니다.');
+          setIsLoading(false);
+          return;
+        }
+
+        if (response.interviewSummary) {
+          setFeedbackData(response);
+
+          // 질문 상태 초기화
+          const states = response.interviewSummary.questionSummaries.map((_, idx) => ({
+            id: idx + 1,
+            showAnswer: false,
+          }));
+          setQuestionStates(states);
+        }
       } catch (err) {
         console.error('❌ 피드백 조회 실패:', err);
         setError('피드백을 불러오는데 실패했습니다.');
@@ -41,6 +67,7 @@ export default function FeedbackResult() {
         setIsLoading(false);
       }
     };
+
     void fetchFeedback();
   }, [navigate, sessionId]);
 
@@ -64,7 +91,7 @@ export default function FeedbackResult() {
     );
   }
 
-  if (error || !feedbackData) {
+  if (error || !feedbackData || !feedbackData.interviewSummary) {
     return (
       <InterviewLayout activeMenu="feedback">
         <div className="flex-1 flex items-center justify-center">
@@ -79,61 +106,69 @@ export default function FeedbackResult() {
     );
   }
 
-  const { feedbacks, totalQuestions, timeoutCount } = feedbackData;
+  const { interviewSummary } = feedbackData;
 
   return (
     <InterviewLayout activeMenu="feedback">
       <div className="flex-1 px-8 pt-4">
         <div className="mb-6">
           <h2 className="text-2xl font-semibold text-gray-900 mb-3">
-            <span className="inline-block bg-gray-400 text-white px-4 py-1 rounded-full text-sm mr-2">총 {totalQuestions}문항</span>에 대한 최종 피드백
+            <span className="inline-block bg-gray-400 text-white px-4 py-1 rounded-full text-sm mr-2">{interviewSummary.interviewTitle}</span>에 대한 최종
+            피드백
           </h2>
-          {timeoutCount > 0 && (
+          {interviewSummary.timeoutQuestionNumber > 0 && (
             <p className="text-gray-600">
               시간 초과로 답변하지 못한 질문{' '}
-              <span className="inline-block bg-coral-500 text-white px-3 py-1 rounded-md text-sm font-medium">{timeoutCount}개</span>
+              <span className="inline-block bg-coral-500 text-white px-3 py-1 rounded-md text-sm font-medium">{interviewSummary.timeoutQuestionNumber}개</span>
             </p>
           )}
         </div>
 
         <div className="grid grid-cols-2 gap-6 pb-8">
-          {feedbacks.map((item, index: number) => {
+          {interviewSummary.questionSummaries.map((summary, index) => {
             const isShowingAnswer = questionStates.find((q) => q.id === index + 1)?.showAnswer || false;
-            const isPositive = item.feedbackType === 'positive';
-            const feedbackTypeLabel = isPositive ? 'AI 피드백(긍정)' : 'AI 피드백(개선)';
-            const hasAnswer = !!item.answer && item.answer.trim().length > 0;
+
+            // AI 피드백과 셀프 피드백 중 표시할 것 선택
+            const feedbackText = summary.aiFeedback || summary.selfFeedback;
+            const feedbackType = summary.aiFeedback ? 'AI 피드백' : summary.selfFeedback ? '셀프 피드백' : '피드백 없음';
+
+            // 답변 텍스트 (Q&A 턴에서 ANSWER만 추출)
+            const answerTurns = summary.qnaTurns.filter((turn) => turn.turn === 'ANSWER');
+            const hasAnswer = answerTurns.length > 0;
 
             return (
-              <div
-                key={`${item.questionId}-${index}`}
-                className={`rounded-2xl p-6 shadow-sm transition-colors ${isShowingAnswer ? 'bg-gray-200' : 'bg-white'}`}
-              >
+              <div key={index} className={`rounded-2xl p-6 shadow-sm transition-colors ${isShowingAnswer ? 'bg-gray-200' : 'bg-white'}`}>
+                {/* 카드 헤더 */}
                 <div className="mb-4">
                   <h3 className="font-semibold text-gray-900 mb-2">
-                    {index + 1}. {item.question}
+                    {summary.questionNumber}. {summary.rootQuestion}
                   </h3>
-                  <p className="text-sm text-gray-500">{feedbackTypeLabel}</p>
+                  <p className="text-sm text-gray-500">{feedbackType}</p>
                 </div>
 
+                {/* 카드 내용 (스크롤 가능) */}
                 <div className="mb-4 max-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
                   {isShowingAnswer ? (
                     hasAnswer ? (
                       <div className="space-y-3">
-                        <div>
-                          <p className="text-xs font-semibold text-gray-600 mb-1">답변:</p>
-                          <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">{item.answer}</p>
-                        </div>
+                        {summary.qnaTurns.map((turn, turnIndex) => (
+                          <div key={turnIndex}>
+                            <p className="text-xs font-semibold text-gray-600 mb-1">{turn.turn === 'QUESTION' ? '질문:' : '답변:'}</p>
+                            <p className="text-sm text-gray-700 leading-relaxed">{turn.content}</p>
+                          </div>
+                        ))}
                       </div>
                     ) : (
-                      <p className="text-sm text-gray-500 italic">{item.timeout ? '시간 초과로 답변하지 못했습니다.' : '답변이 제공되지 않았습니다.'}</p>
+                      <p className="text-sm text-gray-500 italic">시간 초과로 답변하지 못했습니다.</p>
                     )
-                  ) : item.feedback ? (
-                    <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">{item.feedback}</p>
+                  ) : feedbackText ? (
+                    <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">{feedbackText}</p>
                   ) : (
                     <p className="text-sm text-gray-500 italic">피드백이 생성되지 않았습니다.</p>
                   )}
                 </div>
 
+                {/* 버튼 */}
                 <div className="flex justify-end">
                   <button
                     onClick={() => toggleAnswer(index + 1)}
@@ -151,12 +186,28 @@ export default function FeedbackResult() {
       </div>
 
       <style>{`
-        .bg-coral-500 { background-color: #ff7f66; }
-        .bg-coral-600 { background-color: #ff6b52; }
-        .hover\\:bg-coral-600:hover { background-color: #ff6b52; }
-        .scrollbar-thin::-webkit-scrollbar { width: 6px; }
-        .scrollbar-thumb-gray-300::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 3px; }
-        .scrollbar-track-gray-100::-webkit-scrollbar-track { background-color: #f3f4f6; border-radius: 3px; }
+        .bg-coral-500 {
+          background-color: #ff7f66;
+        }
+        .bg-coral-600 {
+          background-color: #ff6b52;
+        }
+        .hover\\:bg-coral-600:hover {
+          background-color: #ff6b52;
+        }
+
+        /* 스크롤바 스타일링 */
+        .scrollbar-thin::-webkit-scrollbar {
+          width: 6px;
+        }
+        .scrollbar-thumb-gray-300::-webkit-scrollbar-thumb {
+          background-color: #d1d5db;
+          border-radius: 3px;
+        }
+        .scrollbar-track-gray-100::-webkit-scrollbar-track {
+          background-color: #f3f4f6;
+          border-radius: 3px;
+        }
       `}</style>
     </InterviewLayout>
   );
diff --git a/src/pages/Interview/main_answer.tsx b/src/pages/Interview/main_answer.tsx
index 9ca8d29..1ed0bf6 100644
--- a/src/pages/Interview/main_answer.tsx
+++ b/src/pages/Interview/main_answer.tsx
@@ -5,6 +5,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import InterviewLayout from '@/layouts/InterviewLayout';
 import type { IQuestion } from '@/services/interviewApi';
 import { sendTimeout, uploadRecordingAndGetNext } from '@/services/interviewApi';
+import clockFrog from '@/assets/clockFrog.svg';
 
 export default function AnswerQuestion() {
   const navigate = useNavigate();
@@ -41,7 +42,6 @@ export default function AnswerQuestion() {
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const audioChunksRef = useRef<Blob[]>([]);
   const latestAudioBlobRef = useRef<Blob | null>(null);
-  const timerRef = useRef<number | null>(null);
 
   // 재생
   const audioRef = useRef<HTMLAudioElement | null>(null);
@@ -74,11 +74,11 @@ export default function AnswerQuestion() {
     setRecordedAudioUrl(null);
     latestAudioBlobRef.current = null;
     setRecordingTime(0);
-    setRemainingTime(180);
+    setRemainingTime(180); // 다음 질문용 기본 180초
     setRetryCount(1);
   }
 
-  /** ---------------- 녹음 중지 / 타임아웃 핸들러 (deps 안전) ---------------- */
+  /** ---------------- 녹음 중지 ---------------- */
   const stopRecording = useCallback(() => {
     if (mediaRecorderRef.current && isRecording) {
       try {
@@ -89,52 +89,67 @@ export default function AnswerQuestion() {
       setIsRecording(false);
       setIsPaused(false);
     }
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-    }
   }, [isRecording]);
 
-  const handleTimeout = useCallback(async (questionId: string) => {
+  /** ---------------- 시간초과 처리 ---------------- */
+  const handleTimeout = async (questionId: string) => {
     try {
-      await sendTimeout(questionId);
-      // 현재 스펙에선 sendTimeout이 다음 질문을 주지 않으므로 종료 처리
+      const next = await sendTimeout(questionId); // ← 다음 질문 시도
       resetForNext();
-      setShowCompleteModal(true);
+      applyNext(next); // ← next가 있으면 다음으로, 없으면 내부에서 완료 모달
     } catch (e) {
       console.error('시간초과 처리 실패:', e);
-      alert('시간초과 처리에 실패했습니다.');
+      alert('시간이 초과되었습니다. 다음 질문으로 넘어갑니다.');
     }
-  }, []);
+  };
 
-  /** ---------------- 타이머 ---------------- */
+  /** ---------------- 녹음 시간 타이머 (녹음 중일 때만 증가) ---------------- */
   useEffect(() => {
     if (isRecording && !isPaused) {
-      timerRef.current = window.setInterval(() => {
+      const id = window.setInterval(() => {
         setRecordingTime((prev) => prev + 1);
-        setRemainingTime((prev) => {
-          if (prev <= 1) {
-            stopRecording();
-            if (currentQuestion?.questionId) {
-              void handleTimeout(currentQuestion.questionId);
-            }
-            return 0;
-          }
-          return prev - 1;
-        });
       }, 1000);
-    } else if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
+
+      return () => {
+        clearInterval(id);
+      };
     }
 
+    // 녹음 중이 아니면 타이머 없음
+    return undefined;
+  }, [isRecording, isPaused]);
+
+  /** ---------------- 180초 카운트다운 (질문 뜨는 순간부터 시작) ---------------- */
+  useEffect(() => {
+    // 질문이 없거나, 이미 완료 모달이 떠 있으면 타이머 돌리지 않음
+    if (!currentQuestion || showCompleteModal) return;
+
+    // 질문이 화면에 노출되는 순간부터 1초마다 remainingTime 감소
+    const id = window.setInterval(() => {
+      setRemainingTime((prev) => {
+        if (prev <= 1) {
+          clearInterval(id);
+
+          // 녹음 중이면 강제로 정지
+          if (isRecording) {
+            stopRecording();
+          }
+
+          if (currentQuestion?.questionId) {
+            void handleTimeout(currentQuestion.questionId);
+          }
+
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    // 질문이 바뀌거나, 컴포넌트 언마운트 시 타이머 정리
     return () => {
-      if (timerRef.current) {
-        clearInterval(timerRef.current);
-        timerRef.current = null;
-      }
+      clearInterval(id);
     };
-  }, [isRecording, isPaused, currentQuestion?.questionId, stopRecording, handleTimeout]);
+  }, [currentQuestion?.questionId, isRecording, stopRecording, handleTimeout, showCompleteModal]);
 
   /** ---------------- 녹음 제어 ---------------- */
   const startRecording = async () => {
@@ -172,9 +187,8 @@ export default function AnswerQuestion() {
       setIsPaused(false);
       setRecordedAudioUrl(null);
 
-      // 타이머 초기화
+      // 녹음 시간은 새로 시작
       setRecordingTime(0);
-      setRemainingTime(180);
     } catch (error) {
       console.error('마이크 접근 오류:', error);
       alert('마이크 접근 권한이 필요합니다.');
@@ -351,7 +365,7 @@ export default function AnswerQuestion() {
 
           {/* 캐릭터 이미지 */}
           <div className="flex justify-center mb-8">
-            <img src="src/assets/clockFrog.svg" alt="면접관" className="w-48 h-auto" />
+            <img src={clockFrog} alt="면접관" className="w-48 h-auto" />
           </div>
 
           {/* 타이머 & 녹음 컨트롤 */}
diff --git a/src/pages/Interview/question_loading.tsx b/src/pages/Interview/question_loading.tsx
index b19f35c..fbc59f5 100644
--- a/src/pages/Interview/question_loading.tsx
+++ b/src/pages/Interview/question_loading.tsx
@@ -1,11 +1,12 @@
-import { useEffect } from 'react';
+// src/pages/Interview/question_loading.tsx
+import { useEffect, useRef } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import InterviewLayout from '@/layouts/InterviewLayout';
 import type { ICreateInterviewSessionResponse } from '@/services/interviewApi';
 import { createInterviewSession } from '@/services/interviewApi';
 
-const ANSWER_ROUTE = '/main-answer'; // 프로젝트 라우트에 맞게 조정
+const ANSWER_ROUTE = '/main-answer';
 
 type TLocationState = {
   fileName?: string;
@@ -18,7 +19,14 @@ export default function QuestionLoading() {
   const navigate = useNavigate();
   const location = useLocation() as { state?: TLocationState };
 
+  // ✅ 부트스트랩이 중복 실행되는 것을 막기 위한 ref 가드
+  const bootstrappedRef = useRef(false);
+
   useEffect(() => {
+    // 이미 실행된 적 있으면 다시 실행하지 않음
+    if (bootstrappedRef.current) return;
+    bootstrappedRef.current = true;
+
     const bootstrap = async () => {
       try {
         const fileName = location.state?.fileName ?? '자소서';
@@ -32,14 +40,14 @@ export default function QuestionLoading() {
           return;
         }
 
-        // 스펙에 맞게 요청
+        // 스펙에 맞게 세션 생성 요청
         const resp: ICreateInterviewSessionResponse = await createInterviewSession({
           resumeKey,
           jobTitle,
           interviewType,
         });
 
-        // 성공 → 답변 페이지로 이동 (필요값 전달)
+        // ✅ 성공 → 답변 페이지로 이동
         navigate(ANSWER_ROUTE, {
           replace: true,
           state: {
@@ -60,7 +68,8 @@ export default function QuestionLoading() {
     };
 
     void bootstrap();
-  }, [location.state, navigate]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigate]); // location.state는 초기 한 번만 쓰고, 재실행을 막기 위해 deps에서 제외
 
   return (
     <InterviewLayout activeMenu="answer">
@@ -83,8 +92,13 @@ export default function QuestionLoading() {
 
       <style>{`
         .bg-coral-500 { background-color: #ff7f66; }
-        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
-        .animate-bounce { animation: bounce 0.6s ease-in-out infinite; }
+        @keyframes bounce {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-20px); }
+        }
+        .animate-bounce {
+          animation: bounce 0.6s ease-in-out infinite;
+        }
       `}</style>
     </InterviewLayout>
   );
diff --git a/src/pages/Interview/upload.tsx b/src/pages/Interview/upload.tsx
index 6f9baa5..ad8fefb 100644
--- a/src/pages/Interview/upload.tsx
+++ b/src/pages/Interview/upload.tsx
@@ -4,6 +4,7 @@ import { Upload } from 'lucide-react';
 
 import InterviewLayout from '@/layouts/InterviewLayout';
 import { uploadResume } from '@/services/interviewApi';
+import orangeFrog from '@/assets/orangeFrog.svg';
 
 const ALLOWED_EXTENSIONS = ['.pdf', '.docx'];
 const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
@@ -148,7 +149,7 @@ export default function MyInterview() {
       </div>
 
       <div className="w-80 flex items-end justify-center">
-        <img src="src/assets/orangeFrog.svg" alt="리뷰캐릭터" className="w-64 h-auto" />
+        <img src={orangeFrog} alt="리뷰캐릭터" className="w-64 h-auto" />
       </div>
 
       <style>{`
diff --git a/src/pages/myInterviews.tsx b/src/pages/myInterviews.tsx
index 32d2106..51b16ae 100644
--- a/src/pages/myInterviews.tsx
+++ b/src/pages/myInterviews.tsx
@@ -1,8 +1,349 @@
-export default function MyInterview() {
+// src/pages/myInterviews.tsx
+import { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+import useGetInterviewSummary from '@/hooks/useGetInterviewSummary';
+import useGetQuestionAnswers from '@/hooks/useGetQuestionAnswers';
+import useGetRandomQuestions from '@/hooks/useGetRandomQuestions';
+import { getQuestionFeedback } from '@/apis/myPage';
+
+import ClockFrog from '@/assets/clockFrog.svg?react';
+
+type TabType = 'answer' | 'feedback' | 'random';
+
+type FeedbackItem = {
+  order: number;
+  questionId: number;
+  question: string;
+  aiFeedback: string;
+  selfFeedback: string;
+  peerItems: string[];
+};
+
+export default function MyInterviews() {
+  const { id } = useParams<{ id: string }>();
+  const interviewId = id ? Number(id) : 0;
+
+  const [selectedQuestionId, setSelectedQuestionId] = useState<number | null>(null);
+  const [activeTab, setActiveTab] = useState<TabType>('answer');
+  const [playingAudio, setPlayingAudio] = useState<string | null>(null);
+  const [feedbackList, setFeedbackList] = useState<FeedbackItem[]>([]);
+  const [loadingFeedback, setLoadingFeedback] = useState(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  const { data: summaryData, isLoading: summaryLoading } = useGetInterviewSummary(interviewId);
+  const { data: answersData, isLoading: answersLoading } = useGetQuestionAnswers(
+    activeTab === 'answer' || activeTab === 'feedback' ? selectedQuestionId : null,
+  );
+  const { data: randomData, isLoading: randomLoading } = useGetRandomQuestions(activeTab === 'random' ? selectedQuestionId : null);
+
+  // ---------- 안전한 디폴트 값 ----------
+  const timedOutCount = summaryData?.result?.timedOutCount ?? 0;
+  const questionCards = summaryData?.result?.questionCards ?? [];
+  const answerItems = answersData?.result ?? [];
+  const randomItems = randomData?.result ?? [];
+
+  // ---------- 제목/날짜 분리 표시 ----------
+  const pickTitle = (...vals: unknown[]) => vals.find((v) => typeof v === 'string' && (v as string).trim().length > 0) as string | undefined;
+
+  const titleText =
+    pickTitle(
+      (summaryData?.result as any)?.title,
+      (summaryData?.result as any)?.interviewTitle,
+      (summaryData?.result as any)?.interviewName,
+      (summaryData?.result as any)?.name,
+    ) ?? '나의 면접';
+
+  const rawDate = (summaryData?.result as any)?.interviewDate ?? (summaryData?.result as any)?.createdAt ?? (summaryData?.result as any)?.date ?? undefined;
+
+  const dateText = rawDate ? new Date(rawDate).toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' }) : '';
+
+  // ---------- 첫 질문 자동 선택 ----------
+  useEffect(() => {
+    if (!selectedQuestionId && questionCards.length > 0) {
+      setSelectedQuestionId(questionCards[0].questionId);
+    }
+  }, [questionCards, selectedQuestionId]);
+
+  // ---------- 피드백 탭: 모든 질문 피드백 로딩 ----------
+  useEffect(() => {
+    if (activeTab !== 'feedback' || answerItems.length === 0) return;
+
+    const fetchAllFeedback = async () => {
+      setLoadingFeedback(true);
+      try {
+        const all = await Promise.all(
+          answerItems.map(async (answer) => {
+            try {
+              const feedback = await getQuestionFeedback(answer.questionId);
+              const res = (feedback as any)?.result ?? {};
+              return {
+                order: answer.order,
+                questionId: answer.questionId,
+                question: answer.question,
+                aiFeedback: res.aiFeedback ?? '',
+                selfFeedback: res.selfFeedback ?? '',
+                peerItems: Array.isArray(res.peerItems) ? res.peerItems : [],
+              } as FeedbackItem;
+            } catch (e) {
+              console.error(`질문 ${answer.questionId} 피드백 조회 실패:`, e);
+              return {
+                order: answer.order,
+                questionId: answer.questionId,
+                question: answer.question,
+                aiFeedback: '',
+                selfFeedback: '',
+                peerItems: [],
+              } as FeedbackItem;
+            }
+          }),
+        );
+        setFeedbackList(all);
+      } catch (e) {
+        console.error('피드백 조회 중 오류:', e);
+      } finally {
+        setLoadingFeedback(false);
+      }
+    };
+
+    void fetchAllFeedback();
+  }, [activeTab, answerItems]);
+
+  // ---------- 오디오 재생 ----------
+  const handleAudioPlay = (url: string) => {
+    if (playingAudio === url) {
+      audioRef.current?.pause();
+      setPlayingAudio(null);
+      return;
+    }
+    audioRef.current?.pause();
+    audioRef.current = new Audio(url);
+    audioRef.current.play().catch(() => {});
+    setPlayingAudio(url);
+    audioRef.current.onended = () => setPlayingAudio(null);
+  };
+
+  // ---------- 로딩/에러 ----------
+  if (summaryLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <ClockFrog className="w-32 h-auto mx-auto animate-pulse" />
+          <p className="text-gray-600 text-lg mt-4">데이터를 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!summaryData?.result) {
+    return (
+      <div className="flex-1 flex items-center justify-center min-h-screen">
+        <p className="text-red-500 text-lg">면접 데이터를 찾을 수 없습니다.</p>
+      </div>
+    );
+  }
+
+  const isLoading = answersLoading || loadingFeedback || randomLoading;
+
   return (
-    <div>
-      <p>interview</p>
-      <p>hi</p>
+    <div className="min-h-screen bg-gray-50 py-8 px-4">
+      <div className="max-w-7xl mx-auto">
+        {/* 헤더 */}
+        <div className="bg-white rounded-2xl shadow-md p-6 mb-6">
+          <h1 className="text-3xl font-bold text-gray-900">{titleText}</h1>
+          {dateText && <p className="text-sm text-gray-500 mt-1">{dateText}</p>}
+
+          {timedOutCount > 0 && (
+            <p className="text-gray-600 mt-3">
+              시간 초과로 답변하지 못한 질문{' '}
+              <span className="inline-block bg-[#E95F45] text-white px-3 py-1 rounded-md text-sm font-medium">{timedOutCount}개</span>
+            </p>
+          )}
+        </div>
+
+        {/* 질문 카드 리스트 */}
+        <div className="bg-white rounded-2xl shadow-md p-6 mb-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">면접 질문</h2>
+          <div className="grid grid-cols-4 gap-4">
+            {(questionCards ?? []).map((card) => (
+              <button
+                key={card.questionId}
+                onClick={() => setSelectedQuestionId(card.questionId)}
+                className={`p-4 rounded-lg border-2 transition-all ${
+                  selectedQuestionId === card.questionId ? 'border-[#E95F45] bg-[#E95F45]/10' : 'border-gray-200 hover:border-gray-300 bg-white'
+                }`}
+              >
+                <p className="text-lg font-semibold text-gray-900">질문 {card.order}</p>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* 탭 메뉴 */}
+        <div className="bg-white rounded-t-2xl shadow-md">
+          <div className="flex border-b border-gray-200">
+            <button
+              onClick={() => setActiveTab('answer')}
+              className={`flex-1 py-4 text-center font-medium transition-colors ${
+                activeTab === 'answer' ? 'text-[#E95F45] border-b-2 border-[#E95F45]' : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              답변 확인
+            </button>
+            <button
+              onClick={() => setActiveTab('feedback')}
+              className={`flex-1 py-4 text-center font-medium transition-colors ${
+                activeTab === 'feedback' ? 'text-[#E95F45] border-b-2 border-[#E95F45]' : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              피드백 확인
+            </button>
+            <button
+              onClick={() => setActiveTab('random')}
+              className={`flex-1 py-4 text-center font-medium transition-colors ${
+                activeTab === 'random' ? 'text-[#E95F45] border-b-2 border-[#E95F45]' : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              랜덤 질문
+            </button>
+          </div>
+
+          {/* 탭 콘텐츠 */}
+          <div className="p-6 rounded-b-2xl bg-white min-h-[400px]">
+            {isLoading ? (
+              <div className="flex items-center justify-center h-64">
+                <ClockFrog className="w-24 h-auto animate-pulse" />
+              </div>
+            ) : (
+              <>
+                {/* 답변 확인 탭 */}
+                {activeTab === 'answer' && (answerItems ?? []).length > 0 && (
+                  <div className="space-y-4">
+                    {(answerItems ?? []).map((item) => (
+                      <div key={item.questionId} className="bg-gray-50 rounded-lg p-5">
+                        <div className="mb-3">
+                          <span className="inline-block bg-gray-600 text-white px-3 py-1 rounded-full text-sm font-medium mr-2">질문 {item.order}</span>
+                          <h3 className="text-lg font-semibold text-gray-900 mt-2">{item.question}</h3>
+                        </div>
+                        {item.answerText ? (
+                          <>
+                            <p className="text-gray-700 mb-3 whitespace-pre-wrap">{item.answerText}</p>
+                            <button
+                              onClick={() => handleAudioPlay(item.recordUrl)}
+                              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                                playingAudio === item.recordUrl ? 'bg-[#E95F45] text-white hover:bg-[#E95F45]/90' : 'bg-gray-600 text-white hover:bg-gray-700'
+                              }`}
+                            >
+                              {playingAudio === item.recordUrl ? '재생 중...' : '음성 재생'}
+                            </button>
+                          </>
+                        ) : (
+                          <p className="text-gray-500 italic">답변이 없습니다.</p>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {/* 피드백 확인 탭 */}
+                {activeTab === 'feedback' && (feedbackList ?? []).length > 0 && (
+                  <div className="space-y-4">
+                    {(feedbackList ?? []).map((item) => (
+                      <div key={item.questionId} className="bg-gray-50 rounded-lg p-5">
+                        <div className="mb-4">
+                          <span className="inline-block bg-gray-600 text-white px-3 py-1 rounded-full text-sm font-medium mr-2">질문 {item.order}</span>
+                          <h3 className="text-lg font-semibold text-gray-900 mt-2">{item.question}</h3>
+                        </div>
+
+                        <div className="space-y-3">
+                          {item.aiFeedback && (
+                            <div className="bg-blue-50 rounded-lg p-4">
+                              <p className="text-sm font-semibold text-blue-900 mb-2">🤖 AI 피드백</p>
+                              <p className="text-sm text-gray-700 whitespace-pre-wrap">{item.aiFeedback}</p>
+                            </div>
+                          )}
+                          {item.selfFeedback && (
+                            <div className="bg-green-50 rounded-lg p-4">
+                              <p className="text-sm font-semibold text-green-900 mb-2">✍️ 셀프 피드백</p>
+                              <p className="text-sm text-gray-700 whitespace-pre-wrap">{item.selfFeedback}</p>
+                            </div>
+                          )}
+                          {(item.peerItems?.length ?? 0) > 0 && (
+                            <div className="bg-purple-50 rounded-lg p-4">
+                              <p className="text-sm font-semibold text-purple-900 mb-2">👥 동료 피드백</p>
+                              <ul className="space-y-1">
+                                {item.peerItems!.map((peer, index) => (
+                                  <li key={index} className="text-sm text-gray-700 flex items-start">
+                                    <span className="text-purple-500 mr-2">•</span>
+                                    <span>{peer}</span>
+                                  </li>
+                                ))}
+                              </ul>
+                            </div>
+                          )}
+                          {!item.aiFeedback && !item.selfFeedback && (item.peerItems?.length ?? 0) === 0 && (
+                            <p className="text-gray-500 italic text-sm">이 질문에 대한 피드백이 없습니다.</p>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                {activeTab === 'feedback' && (feedbackList ?? []).length === 0 && !loadingFeedback && (
+                  <p className="text-gray-500 italic text-center py-8">피드백이 없습니다.</p>
+                )}
+
+                {/* 랜덤 질문 탭 */}
+                {activeTab === 'random' && (
+                  <div className="space-y-4">
+                    {(randomItems ?? []).length > 0 ? (
+                      (randomItems ?? []).map((item, index) => (
+                        <div key={index} className="bg-gray-50 rounded-lg p-5">
+                          <div className="mb-3">
+                            <span className="inline-block bg-[#E95F45] text-white px-3 py-1 rounded-full text-sm font-medium mb-2">랜덤 질문 {index + 1}</span>
+                            <h3 className="text-lg font-semibold text-gray-900">{item.question}</h3>
+                          </div>
+
+                          <div className="mb-3">
+                            <p className="text-sm font-semibold text-gray-600 mb-1">답변:</p>
+                            <p className="text-gray-700 whitespace-pre-wrap">{item.answerText}</p>
+                          </div>
+
+                          <div className="grid grid-cols-2 gap-4 mb-3">
+                            {item.aiFeedback && (
+                              <div className="bg-blue-100 rounded p-3">
+                                <p className="text-sm font-semibold text-blue-900 mb-1">AI 피드백</p>
+                                <p className="text-sm text-gray-700">{item.aiFeedback}</p>
+                              </div>
+                            )}
+                            {item.selfFeedback && (
+                              <div className="bg-green-100 rounded p-3">
+                                <p className="text-sm font-semibold text-green-900 mb-1">셀프 피드백</p>
+                                <p className="text-sm text-gray-700">{item.selfFeedback}</p>
+                              </div>
+                            )}
+                          </div>
+
+                          <button
+                            onClick={() => handleAudioPlay(item.recordingUrl)}
+                            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                              playingAudio === item.recordingUrl ? 'bg-[#E95F45] text-white hover:bg-[#E95F45]/90' : 'bg-gray-600 text-white hover:bg-gray-700'
+                            }`}
+                          >
+                            {playingAudio === item.recordingUrl ? '재생 중...' : '음성 재생'}
+                          </button>
+                        </div>
+                      ))
+                    ) : (
+                      <p className="text-gray-500 italic text-center py-8">랜덤 질문이 없습니다.</p>
+                    )}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/myPage.tsx b/src/pages/myPage.tsx
index d10611f..d01f238 100644
--- a/src/pages/myPage.tsx
+++ b/src/pages/myPage.tsx
@@ -83,15 +83,20 @@ export default function MyPage() {
                 <p className="bg-[#E95F45]/20 px-1 w-fit rounded text-2xl font-bold">{title}</p>
                 <p className="text-lg font-extralight">{description}</p>
               </div>
-              <Swiper spaceBetween={50} slidesPerView={slidesPerView}>
+              <Swiper spaceBetween={20} slidesPerView={slidesPerView}>
                 <SwiperSlide key="add-card" className="!mr-14">
                   <AddCard onClick={() => window.location.replace(title === '나의 면접,' ? route.myInterviews : route.evaluate)} />
                 </SwiperSlide>
 
                 {title === '나의 면접,'
-                  ? myInterviewData?.result.items.map(({ interviewId, jobRole }) => (
+                  ? myInterviewData?.result.items.map(({ interviewId, jobRole, createdAt }) => (
                       <SwiperSlide key={interviewId}>
-                        <InterviewCard id={interviewId} title={jobRole} onClick={() => movePage(routes, interviewId)} />
+                        <InterviewCard 
+                          id={interviewId} 
+                          title={jobRole} 
+                          createdAt={createdAt}
+                          onClick={() => movePage(routes, interviewId)} 
+                        />
                       </SwiperSlide>
                     ))
                   : myFeedbackData?.result.items.map(({ peerFeedbackId, title: jobTitle }) => (
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 43f0d0e..68cbb3a 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -32,7 +32,7 @@ export const router = createBrowserRouter([
       { path: 'community/write', element: <CommunityWrite /> },
       { path: 'community/edit/:id', element: <CommunityEdit /> },
       { path: 'community/detail/:id', element: <CommunityDetail /> },
-      { path: 'myInterview/:id', element: <MyInterviews /> },
+      { path: 'myInterviews/:id', element: <MyInterviews /> },
       { path: 'myEvaluate/:id', element: <MyEvaluate /> },
       { path: 'upload', element: <MyInterview /> }, // ← myInterview에서 upload로 변경
       { path: 'upload-done', element: <UploadDone /> },
diff --git a/src/services/api.ts b/src/services/api.ts
index 0fae877..d78c34c 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -34,6 +34,17 @@ apiClient.interceptors.response.use(
     return response;
   },
   (error) => {
+    // 특별 처리: 500 에러여도 result 데이터가 있으면 성공으로 처리
+    // (백엔드 버그: 500 코드를 보내지만 정상 데이터도 함께 보냄)
+    if (
+      error.response?.status === 500 &&
+      error.response?.data &&
+      (error.response.data.result || error.response.data.sessionId || error.response.data.interviewSummary)
+    ) {
+      // 조용히 성공으로 처리 (에러 로그 없이)
+      return error.response;
+    }
+
     // 에러 처리
     if (error.response) {
       // 서버가 응답을 반환한 경우
diff --git a/src/services/interviewApi.ts b/src/services/interviewApi.ts
index b256161..cb8332d 100644
--- a/src/services/interviewApi.ts
+++ b/src/services/interviewApi.ts
@@ -1,8 +1,9 @@
+// src/services/interviewApi.ts
 import apiClient from './api';
 
-// =====================================================
-// 공통: BE 응답(result 래핑 유무 모두 대응)
-// =====================================================
+/* ====================================================
+   공통: BE 응답(result 래핑 유무 모두 대응)
+==================================================== */
 const unwrapResult = <T>(data: any): T => {
   if (data && typeof data === 'object' && 'result' in data) {
     return (data as { result: T }).result;
@@ -10,9 +11,9 @@ const unwrapResult = <T>(data: any): T => {
   return data as T;
 };
 
-// =====================================================
-// 1. 자소서 업로드용 Presigned URL & 업로드
-// =====================================================
+/* ====================================================
+   1) 자소서 업로드용 Presigned URL & 업로드
+==================================================== */
 
 /** 자소서 업로드용 Presigned URL 응답 (POST /api/presign/resume) */
 export interface IResumePresignResponse {
@@ -23,98 +24,76 @@ export interface IResumePresignResponse {
 
 /** 자소서 업로드용 프리사인 URL 발급 */
 export const getResumePresignUrl = async (fileName: string): Promise<IResumePresignResponse> => {
-  const response = await apiClient.post('/api/presign/resume', null, {
-    params: { fileName },
-  });
-
+  const response = await apiClient.post('/api/presign/resume', null, { params: { fileName } });
   return unwrapResult<IResumePresignResponse>(response.data);
 };
 
-/** S3 공통 업로드 헬퍼 (resume / recording 둘 다 사용) */
-export const uploadToS3 = async (presignedUrl: string, file: File | Blob, extraHeaders: Record<string, string> = {}): Promise<void> => {
+/** S3 공통 업로드 헬퍼 (resume / recording 공용) */
+export const uploadToS3 = async (
+  presignedUrl: string,
+  file: File | Blob,
+  extraHeaders: Record<string, string> = {},
+): Promise<void> => {
   const baseHeaders: Record<string, string> = {};
-
-  // Blob에 type이 있으면 기본 Content-Type으로 사용
-  if ((file as any).type) {
-    baseHeaders['Content-Type'] = (file as any).type;
-  }
+  if ((file as any).type) baseHeaders['Content-Type'] = (file as any).type;
 
   const uploadResponse = await fetch(presignedUrl, {
     method: 'PUT',
     body: file,
-    headers: {
-      ...baseHeaders,
-      ...extraHeaders, // presign에서 내려준 헤더가 우선
-    },
+    headers: { ...baseHeaders, ...extraHeaders },
   });
-
-  if (!uploadResponse.ok) {
-    throw new Error(`S3 업로드 실패: ${uploadResponse.status}`);
-  }
+  if (!uploadResponse.ok) throw new Error(`S3 업로드 실패: ${uploadResponse.status}`);
 };
 
 /** S3 key에서 resumeId 추출 (예: resume/123/aaa-bbb.docx → aaa-bbb) */
 export const extractResumeId = (resumeKey: string): string => {
   const parts = resumeKey.split('/');
   const fileName = parts[parts.length - 1];
-  const nameWithoutExt = fileName.split('.').slice(0, -1).join('.');
-  return nameWithoutExt;
+  return fileName.split('.').slice(0, -1).join('.');
 };
 
 /** 자소서 업로드 전체 플로우: key 반환 */
 export const uploadResume = async (file: File): Promise<string> => {
   try {
-    const extension = file.name.split('.').pop()?.toLowerCase();
-    if (!extension || !['pdf', 'docx'].includes(extension)) {
-      throw new Error('PDF 또는 DOCX 파일만 업로드 가능합니다.');
-    }
-
+    const ext = file.name.split('.').pop()?.toLowerCase();
+    if (!ext || !['pdf', 'docx'].includes(ext)) throw new Error('PDF 또는 DOCX 파일만 업로드 가능합니다.');
     const { uploadUrl, key, requiredHeaders } = await getResumePresignUrl(file.name);
-
     await uploadToS3(uploadUrl, file, requiredHeaders);
-
     return key;
-  } catch (error) {
-    console.error('❌ 자소서 업로드 실패:', error);
-    throw error;
+  } catch (e) {
+    console.error('❌ 자소서 업로드 실패:', e);
+    throw e;
   }
 };
 
-// =====================================================
-// 2. 인터뷰 세션 생성 (자소서 기반 첫 질문 생성)
-// =====================================================
+/* ====================================================
+   2) 인터뷰 세션 생성 (자소서 기반 첫 질문 생성)
+==================================================== */
 
-/** 프론트에서 쓰는 인터뷰 타입 */
 export type TInterviewType = 'normal' | 'pressure';
-
-/** BE에서 사용하는 면접 모드 */
 export type TInterviewMode = 'NORMAL' | 'HARD';
 
-/** 프론트에서 쓰는 요청 타입 */
 export interface ICreateInterviewSessionRequest {
-  /** S3 objectKey (예: resume/123/abcd-efgh.docx) */
-  resumeKey: string;
-  /** 직무 이름 */
-  jobTitle: string;
-  /** 'normal' | 'pressure' → NORMAL | HARD 로 매핑 */
-  interviewType: TInterviewType;
+  resumeKey: string;   // S3 objectKey
+  jobTitle: string;    // 직무명
+  interviewType: TInterviewType; // 'normal' | 'pressure'
 }
 
-/** BE에 실제로 보내는 payload (mode / jobRole / resumeId) */
+/** BE에 보내는 실제 payload */
 interface ICreateInterviewSessionPayload {
   mode: TInterviewMode;
   jobRole: string;
   resumeId: string;
 }
 
-/** BE 응답 원본 타입 (result 내부) */
+/** BE 원본 응답(result 내부) */
 interface ICreateInterviewSessionApiResponse {
   sessionId: number;
   firstQuestionId: number;
   firstQuestionText: string;
 }
 
-/** 프론트에서 쓰기 좋은 형태 */
+/** 프론트 질문 타입 */
 export interface IQuestion {
   questionId: string;
   mainQuestion: string;
@@ -122,90 +101,84 @@ export interface IQuestion {
   order: number;
 }
 
-/** 프론트에서 최종으로 받는 응답 타입 */
 export interface ICreateInterviewSessionResponse {
   sessionId: string;
   firstQuestion: IQuestion;
 }
 
-/** 자소서 기반 질문 생성 및 첫번째 질문 조회 */
-export const createInterviewSession = async (data: ICreateInterviewSessionRequest): Promise<ICreateInterviewSessionResponse> => {
-  const resumeId = extractResumeId(data.resumeKey);
-  const mode: TInterviewMode = data.interviewType === 'pressure' ? 'HARD' : 'NORMAL';
-
-  const payload: ICreateInterviewSessionPayload = {
-    mode,
-    jobRole: data.jobTitle,
-    resumeId,
-  };
-
-  const response = await apiClient.post('/api/interview-sessions', payload);
-  const apiResult = unwrapResult<ICreateInterviewSessionApiResponse>(response.data);
-
-  const firstQuestion: IQuestion = {
-    questionId: String(apiResult.firstQuestionId),
-    mainQuestion: apiResult.firstQuestionText,
-    subQuestion: '',
-    order: 1,
-  };
-
-  return {
-    sessionId: String(apiResult.sessionId),
-    firstQuestion,
-  };
+export const createInterviewSession = async (
+  data: ICreateInterviewSessionRequest,
+): Promise<ICreateInterviewSessionResponse> => {
+  try {
+    const resumeId = extractResumeId(data.resumeKey);
+    const mode: TInterviewMode = data.interviewType === 'pressure' ? 'HARD' : 'NORMAL';
+
+    const payload: ICreateInterviewSessionPayload = {
+      mode,
+      jobRole: data.jobTitle,
+      resumeId,
+    };
+
+    const response = await apiClient.post('/api/interview-sessions', payload);
+    const apiResult = unwrapResult<ICreateInterviewSessionApiResponse>(response.data);
+
+    return {
+      sessionId: String(apiResult.sessionId),
+      firstQuestion: {
+        questionId: String(apiResult.firstQuestionId),
+        mainQuestion: apiResult.firstQuestionText,
+        subQuestion: '',
+        order: 1,
+      },
+    };
+  } catch (error: any) {
+    console.error('❌ createInterviewSession 에러:', {
+      message: error?.message,
+      data: error?.response?.data,
+      status: error?.response?.status,
+    });
+    throw error;
+  }
 };
 
-// =====================================================
-// 3. 녹음 업로드 Presign URL (POST /api/presign/recording)
-// =====================================================
-
-/** 녹음 Presign 요청 */
+/* ====================================================
+   3) 녹음 업로드 Presign URL
+==================================================== */
 interface IRecordingPresignRequest {
   questionId: number;
   contentType: string;
 }
-
-/** 녹음 Presign 응답 */
 export interface IRecordingPresignResponse {
   uploadUrl: string;
   key: string;
   requiredHeaders: Record<string, string>;
 }
 
-/** 녹음 업로드용 프리사인 URL 발급 */
-export const getRecordingPresignUrl = async (questionId: number, contentType: string): Promise<IRecordingPresignResponse> => {
+export const getRecordingPresignUrl = async (
+  questionId: number,
+  contentType: string,
+): Promise<IRecordingPresignResponse> => {
   const payload: IRecordingPresignRequest = { questionId, contentType };
-
   const response = await apiClient.post('/api/presign/recording', payload);
   return unwrapResult<IRecordingPresignResponse>(response.data);
 };
 
-// =====================================================
-// 4. recording 저장 (비동기 트리거) & Polling 타입들
-// =====================================================
-
-/** 녹음 제출 API 응답 status (현재 스펙상 UPLOADED 고정) */
+/* ====================================================
+   4) recording 저장 & Polling 타입
+==================================================== */
 export type TRecordingEnqueueStatus = 'UPLOADED';
-
-/** 녹음 저장 응답 (POST /api/questions/{questionId}/recordings) */
 export interface ISaveRecordingResponse {
   recordingId: number;
   status: TRecordingEnqueueStatus;
 }
-
-/** 녹음 저장 및 꼬리질문 생성 API (비동기, 바로 응답) */
 export const saveRecording = async (questionId: number): Promise<ISaveRecordingResponse> => {
   const response = await apiClient.post(`/api/questions/${questionId}/recordings`);
   return unwrapResult<ISaveRecordingResponse>(response.data);
 };
 
-/** Polling API status */
 export type TRecordingResultStatus = 'WORKING' | 'READY' | 'FAILED';
-
-/** next.type */
 export type TNextQuestionType = 'FOLLOW_UP' | 'ROOT' | 'NONE';
 
-/** Polling/Timeout 공통 next 객체 타입 */
 export interface IRecordingResultNext {
   type: TNextQuestionType;
   nextQuestionId: number | null;
@@ -215,143 +188,102 @@ export interface IRecordingResultNext {
   rootIndex: number | null;
 }
 
-/** Polling API 응답 타입 (GET /api/recordings/{recordingId}/results) */
 export interface IRecordingResultResponse {
   sessionId: number;
   status: TRecordingResultStatus;
   next: IRecordingResultNext | null;
 }
 
-/** Polling API - 한 번 조회 */
 export const getRecordingResult = async (recordingId: number): Promise<IRecordingResultResponse> => {
   const response = await apiClient.get(`/api/recordings/${recordingId}/results`);
   return unwrapResult<IRecordingResultResponse>(response.data);
 };
 
-/** next 객체 → 프론트에서 쓰는 IQuestion 로 매핑 */
+/** next 객체 → IQuestion 매핑 */
 const mapNextToQuestion = (next: IRecordingResultNext | null): IQuestion | null => {
-  if (!next || next.type === 'NONE' || next.nextQuestionId == null) {
-    return null;
-  }
-
+  if (!next || next.type === 'NONE' || next.nextQuestionId == null) return null;
   const isFollowUp = next.type === 'FOLLOW_UP';
-
   return {
     questionId: String(next.nextQuestionId),
-    mainQuestion: isFollowUp
-      ? (next.rootText ?? '') // 꼬리질문이면 rootText를 메인 질문으로
-      : (next.nextQuestionText ?? ''), // 루트 질문이면 그대로
-    subQuestion: isFollowUp
-      ? (next.nextQuestionText ?? '') // 꼬리질문 텍스트
-      : '',
+    mainQuestion: isFollowUp ? (next.rootText ?? '') : (next.nextQuestionText ?? ''),
+    subQuestion: isFollowUp ? (next.nextQuestionText ?? '') : '',
     order: next.rootIndex ?? 0,
   };
 };
 
-/** Polling 헬퍼: READY/FAILED 될 때까지 반복 조회 */
-export const pollRecordingResult = async (recordingId: number, maxAttempts: number = 60, intervalMs: number = 3000): Promise<IRecordingResultResponse> => {
+/** Polling: READY/FAILED까지 반복 조회 */
+export const pollRecordingResult = async (
+  recordingId: number,
+  maxAttempts = 60,
+  intervalMs = 3000,
+): Promise<IRecordingResultResponse> => {
   let attempts = 0;
-
   while (attempts < maxAttempts) {
     const result = await getRecordingResult(recordingId);
-
-    if (result.status === 'READY' || result.status === 'FAILED') {
-      return result;
-    }
-
-    await new Promise((resolve) => setTimeout(resolve, intervalMs));
+    if (result.status === 'READY' || result.status === 'FAILED') return result;
+    await new Promise((r) => setTimeout(r, intervalMs));
     attempts += 1;
   }
-
   throw new Error('Polling timeout - 녹음 처리 대기 시간이 너무 깁니다.');
 };
 
-// =====================================================
-// 5. 녹음 파일 업로드 & 다음 질문 받기 전체 플로우
-// =====================================================
-
-/**
- * 녹음 파일 업로드 + recording 저장 + polling 후
- * 다음 질문(IQuestion) 혹은 null(세션 종료) 반환
- */
-export const uploadRecordingAndGetNext = async (questionId: string | number, audioBlob: Blob): Promise<IQuestion | null> => {
-  const numericQuestionId = typeof questionId === 'string' ? Number(questionId) : questionId;
-
-  if (Number.isNaN(numericQuestionId)) {
-    throw new Error('유효하지 않은 questionId 입니다.');
-  }
+/* ====================================================
+   5) 녹음 파일 업로드 & 다음 질문 받기 (통합 플로우)
+==================================================== */
+export const uploadRecordingAndGetNext = async (
+  questionId: string | number,
+  audioBlob: Blob,
+): Promise<IQuestion | null> => {
+  const numericId = typeof questionId === 'string' ? Number(questionId) : questionId;
+  if (Number.isNaN(numericId)) throw new Error('유효하지 않은 questionId 입니다.');
 
   const contentType = (audioBlob as any).type || 'audio/webm';
-
-  // 1) Presign 발급
-  const { uploadUrl, requiredHeaders } = await getRecordingPresignUrl(numericQuestionId, contentType);
-
-  // 2) S3 업로드
+  const { uploadUrl, requiredHeaders } = await getRecordingPresignUrl(numericId, contentType);
   await uploadToS3(uploadUrl, audioBlob, requiredHeaders);
 
-  // 3) 녹음 저장 요청 (비동기 작업 트리거)
-  const { recordingId } = await saveRecording(numericQuestionId);
-
-  // 4) Polling 으로 꼬리질문/다음 루트질문 생성 완료까지 대기
+  const { recordingId } = await saveRecording(numericId);
   const result = await pollRecordingResult(recordingId);
+  if (result.status === 'FAILED') throw new Error('녹음 처리 중 오류가 발생했습니다.');
 
-  if (result.status === 'FAILED') {
-    throw new Error('녹음 처리 중 오류가 발생했습니다.');
-  }
-
-  // 5) next 객체 → IQuestion 으로 변환 (없으면 null)
   return mapNextToQuestion(result.next);
 };
 
-// =====================================================
-// 6. 시간초과 시 Timeout API
-// =====================================================
-
-/** Timeout API 응답 (status는 항상 READY) */
+/* ====================================================
+   6) 시간초과 Timeout
+==================================================== */
+/** BE Timeout 원본 응답 */
 export interface ITimeoutResponse {
   sessionId: number;
   status: 'READY';
   next: IRecordingResultNext | null;
 }
 
-/** 사용자가 시간초과로 답변하지 못한 경우 - Timeout API 호출 */
-export const sendTimeout = async (questionId: string | number): Promise<ITimeoutResponse> => {
-  const response = await apiClient.post(`/api/questions/${questionId}/timeout`);
-  return unwrapResult<ITimeoutResponse>(response.data);
-};
-
 /**
- * Timeout 처리 후 바로 다음 질문(IQuestion) 혹은 null(세션 종료) 반환하는 헬퍼
- * - next.type === ROOT → 다음 루트 질문
- * - next.type === NONE → 더 이상 질문 없음 (최종 피드백 조회)
+ * 시간초과 처리: 바로 다음 질문(IQuestion) 또는 null(세션 종료) 반환
+ *  - 서버가 next.type === ROOT / FOLLOW_UP / NONE 형태로 내려줌
  */
-export const timeoutAndGetNextQuestion = async (questionId: string | number): Promise<IQuestion | null> => {
-  const result = await sendTimeout(questionId);
-
-  if (!result.next || result.next.type === 'NONE') {
-    return null;
-  }
-
-  return mapNextToQuestion(result.next);
+export const sendTimeout = async (questionId: string | number): Promise<IQuestion | null> => {
+  const response = await apiClient.post(`/api/questions/${questionId}/timeout`);
+  const data = unwrapResult<ITimeoutResponse>(response.data);
+  return mapNextToQuestion(data.next); // ← 핵심: 다음 질문 매핑
 };
 
-// =====================================================
-// 7. 최종 피드백 조회 API
-// =====================================================
+/** 기존 헬퍼와의 호환 (별칭) */
+export const timeoutAndGetNextQuestion = async (
+  questionId: string | number,
+): Promise<IQuestion | null> => sendTimeout(questionId);
 
-/** 피드백 생성 진행 상태 */
+/* ====================================================
+   7) 최종 피드백 조회
+==================================================== */
 export type TFeedbackProgressStatus = 'WORKING' | 'READY' | 'FAILED';
-
-/** QnA 턴 타입 */
 export type TFeedbackTurnType = 'QUESTION' | 'ANSWER';
 
-/** 한 턴 (질문 / 답변) */
 export interface IQnaTurn {
   turn: TFeedbackTurnType;
   content: string;
 }
 
-/** 한 루트 질문에 대한 요약 정보 */
 export interface IQuestionSummary {
   questionNumber: number;
   rootQuestion: string;
@@ -360,17 +292,15 @@ export interface IQuestionSummary {
   qnaTurns: IQnaTurn[];
 }
 
-/** 인터뷰 전체 요약 */
 export interface IInterviewSummary {
   interviewTitle: string;
   timeoutQuestionNumber: number;
   questionSummaries: IQuestionSummary[];
 }
 
-/** 최종 피드백 조회 응답 */
 export interface IFinalFeedbackResponse {
   feedbackProgressStatus: TFeedbackProgressStatus;
-  interviewSummary: IInterviewSummary | null; // WORKING일 때는 null
+  interviewSummary: IInterviewSummary | null;
   feedbacks: {
     feedbackType: 'positive' | 'improvement';
     answer: string;
@@ -383,8 +313,9 @@ export interface IFinalFeedbackResponse {
   timeoutCount: number;
 }
 
-/** 최종 피드백 조회 (GET /api/interview-sesisons/{sessionId}) */
-export const getFinalFeedback = async (sessionId: string | number): Promise<IFinalFeedbackResponse> => {
-  const response = await apiClient.get(`/api/interview-sesisons/${sessionId}`);
+export const getFinalFeedback = async (
+  sessionId: string | number,
+): Promise<IFinalFeedbackResponse> => {
+  const response = await apiClient.get(`/api/interview-sessions/${sessionId}`);
   return unwrapResult<IFinalFeedbackResponse>(response.data);
 };
diff --git a/src/services/randomQuestionApi.ts b/src/services/randomQuestionApi.ts
index 5ddff10..d2a573d 100644
--- a/src/services/randomQuestionApi.ts
+++ b/src/services/randomQuestionApi.ts
@@ -1,146 +1,241 @@
+// src/services/randomQuestionApi.ts
 import apiClient from './api';
+import { EventSourcePolyfill } from 'event-source-polyfill';
 
-// ==================== 타입 정의 ====================
+// ---------------------- 공통 유틸 ----------------------
+const unwrapResult = <T>(data: any): T => {
+  if (data && typeof data === 'object' && 'result' in data) {
+    return (data as { result: T }).result;
+  }
+  return data as T;
+};
+
+// ---------------------- 타입 정의 ----------------------
 
+// 1) SSE 알림 payload
+export interface IRandomNotificationPayload {
+  jobName: string;
+  interviewName: string;
+  questionNumber: number;
+  peerFeedbackId: number; // = peerAnswerId
+}
+
+// 2) 랜덤 팝업 질문 조회 응답
+export interface IRandomQuestionContext {
+  questionId: number;
+  questionText: string;
+  presignedRecordingGetUrl: string;
+  sttText: string;
+}
 export interface IRandomQuestion {
-  questionId: string;
-  question: string;
-  peerAnswerId: string;
+  question: { questionId: number; questionText: string };
+  context: IRandomQuestionContext;
 }
 
-export interface IRandomQuestionRecordingRequest {
-  recordingKey: string;
+// 3) presign 응답
+export interface IPresignUrlResponse {
+  uploadUrl: string;
+  key: string;
+  requiredHeaders: Record<string, string>;
 }
 
+// 4) 녹음 저장 응답
 export interface IFeedbackRecordingResponse {
-  recordingId: string;
-  status: 'processing' | 'completed' | 'failed';
+  recordingId: number;
+  status: 'UPLOADED';
 }
 
-export interface IFeedbackResultResponse {
-  status: 'processing' | 'completed' | 'failed';
-  feedback?: string;
+// 5) 피드백 조회 응답
+export type TFeedbackProgressStatus = 'WORKING' | 'READY' | 'FAILED';
+export interface IFeedbackResult {
+  questionId: number;
+  questionText: string;
+  aiFeedback: string;
+  selfFeedback: string;
+  presignedRecordingGetUrl: string;
+  sttText: string;
 }
-
-export interface IPresignUrlResponse {
-  presignedUrl: string;
-  fileKey: string;
+export interface IFeedbackResultResponse {
+  progressStatus: TFeedbackProgressStatus;
+  result: IFeedbackResult | null;
 }
 
-// ==================== API 함수들 ====================
-
-/**
- * 1. 랜덤 팝업 질문 조회
- */
-export const getRandomQuestion = async (peerAnswerId: string): Promise<IRandomQuestion> => {
-  const response = await apiClient.get(`/api/random-questions/peer/${peerAnswerId}`);
-  return response.data;
+// ---------------------- API 함수들 ----------------------
+
+/** 1. 랜덤 팝업 질문 조회 (GET /api/random-questions/peer/{peerAnswerId}) */
+export const getRandomQuestion = async (
+  peerAnswerId: number | string,
+  opts?: { noCache?: boolean; signal?: AbortSignal },
+): Promise<IRandomQuestion> => {
+  const params = opts?.noCache ? { _ts: Date.now() } : undefined;
+
+  // 디버깅 참고 로그
+  // eslint-disable-next-line no-console
+  console.log('[RQ] GET /api/random-questions/peer/:id', { peerAnswerId, params });
+
+  const resp = await apiClient.get(`/api/random-questions/peer/${peerAnswerId}`, {
+    params,
+    signal: opts?.signal as any,
+    headers: opts?.noCache
+      ? { 'Cache-Control': 'no-cache', Pragma: 'no-cache' }
+      : undefined,
+  });
+  return unwrapResult<IRandomQuestion>(resp.data);
 };
 
-/**
- * 2. 랜덤 팝업 질문 - 녹음 업로드용 프리사인 URL 발급
- */
-export const getFeedbackRecordingPresignUrl = async (fileName: string): Promise<IPresignUrlResponse> => {
-  const response = await apiClient.post('/api/presign/recording/feedback-question', { fileName });
-  return response.data;
+/** 2. 녹음 업로드용 프리사인 URL */
+export const getFeedbackRecordingPresignUrl = async (
+  questionId: number,
+  contentType: string,
+): Promise<IPresignUrlResponse> => {
+  const resp = await apiClient.post('/api/presign/recording/feedback-question', {
+    questionId,
+    contentType,
+  });
+  return unwrapResult<IPresignUrlResponse>(resp.data);
 };
 
-/**
- * 3. S3에 파일 업로드
- */
-export const uploadToS3 = async (presignedUrl: string, file: Blob): Promise<void> => {
-  await fetch(presignedUrl, {
+/** 3. S3 업로드 */
+export const uploadToS3 = async (
+  presignedUrl: string,
+  file: Blob,
+  extraHeaders: Record<string, string> = {},
+): Promise<void> => {
+  const r = await fetch(presignedUrl, {
     method: 'PUT',
     body: file,
     headers: {
-      'Content-Type': file.type || 'audio/webm',
+      'Content-Type': (file as any).type || 'audio/webm',
+      ...extraHeaders,
     },
   });
+  if (!r.ok) throw new Error(`S3 업로드 실패: ${r.status}`);
 };
 
-/**
- * 4. 랜덤 질문에 대한 recording 저장 및 피드백 생성 (비동기)
- */
-export const saveFeedbackRecording = async (questionId: string, data: IRandomQuestionRecordingRequest): Promise<IFeedbackRecordingResponse> => {
-  const response = await apiClient.get(`/api/random-questions/peer/questions/${questionId}`, {
-    params: data,
-  });
-  return response.data;
+/** 4. 녹음 저장 & 피드백 생성 트리거 */
+export const saveFeedbackRecording = async (
+  questionId: number,
+): Promise<IFeedbackRecordingResponse> => {
+  const resp = await apiClient.post(`/api/random-questions/peer/questions/${questionId}`);
+  return unwrapResult<IFeedbackRecordingResponse>(resp.data);
 };
 
-/**
- * 5. 랜덤 질문에 대한 피드백 확인 (polling)
- */
-export const getFeedbackResult = async (recordingId: string): Promise<IFeedbackResultResponse> => {
-  const response = await apiClient.get(`/api/random-questions/peer/recordings/${recordingId}/feedbacks`);
-  return response.data;
+/** 5. 피드백 조회 */
+export const getFeedbackResult = async (
+  recordingId: number,
+): Promise<IFeedbackResultResponse> => {
+  const resp = await apiClient.get(
+    `/api/random-questions/peer/recordings/${recordingId}/feedbacks`,
+  );
+  return unwrapResult<IFeedbackResultResponse>(resp.data);
 };
 
-/**
- * 6. Polling 헬퍼 함수
- */
-export const pollFeedbackResult = async (recordingId: string, maxAttempts: number = 60, interval: number = 5000): Promise<IFeedbackResultResponse> => {
+/** 6. Polling 헬퍼 */
+export const pollFeedbackResult = async (
+  recordingId: number,
+  maxAttempts = 60,
+  intervalMs = 5000,
+): Promise<IFeedbackResultResponse> => {
   let attempts = 0;
-
   while (attempts < maxAttempts) {
     const result = await getFeedbackResult(recordingId);
-
-    if (result.status === 'completed' || result.status === 'failed') {
+    if (result.progressStatus === 'READY' || result.progressStatus === 'FAILED') {
       return result;
     }
-
-    await new Promise((resolve) => setTimeout(resolve, interval));
-    attempts++;
+    await new Promise((res) => setTimeout(res, intervalMs));
+    attempts += 1;
   }
-
   throw new Error('Polling timeout - 피드백 생성 시간이 너무 오래 걸립니다.');
 };
 
+// ---------------------- SSE 구독 ----------------------
+
 /**
- * 7. SSE 구독 (Server-Sent Events)
+ * 7. SSE 구독
+ * - 기본 경로: /api/subscribe (VITE_SSE_PATH로 오버라이드 가능)
+ * - baseURL 및 path가 모두 /api를 포함해도 중복되지 않도록 정규화
+ * - 절대 URL이 오면 그대로 사용
  */
-export const subscribeToNotifications = (onMessage: (event: MessageEvent) => void, onError?: (error: Event) => void): EventSource => {
-  const eventSource = new EventSource(`${apiClient.defaults.baseURL}/api/subscribe`);
+export const subscribeToNotifications = (
+  onMessage: (event: MessageEvent<string>) => void,
+  onError?: (error: unknown) => void,
+): EventSource => {
+  const base = apiClient.defaults.baseURL ?? ''; // 예: '', '/api', 'https://api.domain.com', 'https://api.domain.com/api'
+  let path = import.meta.env.VITE_SSE_PATH ?? '/api/subscribe';
+
+  // 절대 경로면 그대로 사용
+  if (/^https?:\/\//.test(path)) {
+    // eslint-disable-next-line no-console
+    console.log('[SSE] connect (absolute)', { url: path, hasToken: !!localStorage.getItem('accessToken') });
+    return new (EventSourcePolyfill as any)(
+      appendToken(path),
+      esOptions(),
+    ) as EventSource;
+  }
 
-  eventSource.onmessage = onMessage;
+  // base와 path 모두 상대라면 안전하게 합치기
+  const normBase = (base || '').replace(/\/+$/, '');     // 끝 슬래시 제거
+  let normPath = path.replace(/^\/+/, '/');              // 앞 슬래시는 하나만 유지
 
-  if (onError) {
-    eventSource.onerror = onError;
+  // base가 /api 로 끝나고, path가 /api/...로 시작하면 path의 선두 /api 제거
+  if (/\/api$/.test(normBase) && /^\/api\//.test(normPath)) {
+    normPath = normPath.replace(/^\/api/, '');
   }
 
-  return eventSource;
-};
+  // 최종 URL
+  const finalUrl = `${normBase}${normPath.startsWith('/') ? '' : '/'}${normPath || ''}` || '/api/subscribe';
 
-// ==================== 전체 플로우 헬퍼 함수 ====================
+  // 디버깅
+  // eslint-disable-next-line no-console
+  console.log('[SSE] connect', { base: normBase || '(relative)', rawPath: path, url: finalUrl, hasToken: !!localStorage.getItem('accessToken') });
 
-/**
- * 랜덤 질문 녹음 업로드 및 피드백 받기 전체 플로우
- */
-export const uploadFeedbackRecordingAndGetResult = async (questionId: string, audioBlob: Blob): Promise<string> => {
-  // 1. 프리사인 URL 받기
-  const fileName = `feedback-${questionId}-${Date.now()}.webm`;
-  const { presignedUrl, fileKey } = await getFeedbackRecordingPresignUrl(fileName);
+  const es = new (EventSourcePolyfill as any)(
+    appendToken(finalUrl),
+    esOptions(),
+  ) as EventSource;
 
-  // 2. S3에 업로드
-  await uploadToS3(presignedUrl, audioBlob);
+  (es as any).onmessage = onMessage;
+  if (onError) (es as any).onerror = onError;
 
-  // 3. 피드백 생성 시작
-  const { recordingId, status } = await saveFeedbackRecording(questionId, {
-    recordingKey: fileKey,
-  });
+  return es;
+};
 
-  // 4. 즉시 완료된 경우
-  if (status === 'completed') {
-    const result = await getFeedbackResult(recordingId);
-    return result.feedback || '피드백을 받지 못했습니다.';
-  }
+// 토큰을 쿼리스트링으로 추가(백엔드가 허용하는 경우)
+function appendToken(url: string) {
+  const token = localStorage.getItem('accessToken') ?? '';
+  if (!token) return url;
+  const sep = url.includes('?') ? '&' : '?';
+  return `${url}${sep}token=${encodeURIComponent(token)}`;
+}
 
-  // 5. 처리 중이면 polling
-  const result = await pollFeedbackResult(recordingId);
+function esOptions() {
+  const token = localStorage.getItem('accessToken') ?? '';
+  return {
+    withCredentials: true,
+    heartbeatTimeout: 120_000,
+    headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+  };
+}
+
+// ---------------------- 업로드 → 피드백 전체 플로우 ----------------------
+
+export const uploadFeedbackRecordingAndGetResult = async (
+  questionId: number,
+  audioBlob: Blob,
+): Promise<IFeedbackResult> => {
+  const contentType = (audioBlob as any).type || 'audio/webm';
+  const { uploadUrl, requiredHeaders } = await getFeedbackRecordingPresignUrl(
+    questionId,
+    contentType,
+  );
+  await uploadToS3(uploadUrl, audioBlob, requiredHeaders);
 
-  if (result.status === 'failed') {
+  const { recordingId, status } = await saveFeedbackRecording(questionId);
+  if (status !== 'UPLOADED') throw new Error(`예상치 못한 recording 상태: ${status}`);
+
+  const polled = await pollFeedbackResult(recordingId);
+  if (polled.progressStatus !== 'READY' || !polled.result) {
     throw new Error('피드백 생성에 실패했습니다.');
   }
-
-  return result.feedback || '피드백을 받지 못했습니다.';
+  return polled.result;
 };
diff --git a/src/types/event-source-polyfill.d.ts b/src/types/event-source-polyfill.d.ts
new file mode 100644
index 0000000..f51b082
--- /dev/null
+++ b/src/types/event-source-polyfill.d.ts
@@ -0,0 +1,18 @@
+// src/types/event-source-polyfill.d.ts
+declare module 'event-source-polyfill' {
+    // 기본 EventSource 옵션에 헤더 등 몇 가지 확장 옵션을 추가
+    export interface ExtendedEventSourceInit extends EventSourceInit {
+      headers?: Record<string, string>;
+      heartbeatTimeout?: number;
+      withCredentials?: boolean;
+    }
+  
+    // 브라우저 EventSource를 상속하는 Polyfill 클래스
+    export class EventSourcePolyfill extends EventSource {
+      constructor(url: string, eventSourceInitDict?: ExtendedEventSourceInit);
+    }
+  
+    // 원래의 네이티브 EventSource를 함께 export
+    export const NativeEventSource: typeof EventSource;
+  }
+  
\ No newline at end of file
diff --git a/src/types/myPage.ts b/src/types/myPage.ts
index ab9d01c..b76c986 100644
--- a/src/types/myPage.ts
+++ b/src/types/myPage.ts
@@ -23,6 +23,7 @@ export type TMyInterviewResponse = {
     items: {
       interviewId: number;
       jobRole: string;
+      createdAt?: string; // 생성 날짜
     }[];
     nextCursor: number | null;
     hasNext: boolean;
@@ -96,3 +97,73 @@ export const GROWTH_TAG_LABELS: Record<TGrowthTags, string> = {
 export const getExperienceHashTags = (tags?: TExperienceTags[]) => (tags ?? []).map((tag) => `# ${EXPERIENCE_TAG_LABELS[tag]}`);
 
 export const getGrowthHashTags = (tags?: TGrowthTags[]) => (tags ?? []).map((tag) => `# ${GROWTH_TAG_LABELS[tag]}`);
+
+// 나의 면접 상세 - 전체 요약 API
+export type TInterviewSummaryRequest = {
+  interviewId: number;
+};
+
+export type TQuestionCard = {
+  order: number;
+  questionId: number;
+};
+
+export type TAnswerCheckItem = {
+  order: number;
+  questionId: number;
+  question: string;
+  answerText: string | null;
+  recordUrl: string;
+};
+
+export type TInterviewSummaryResponse = {
+  errorCode: null | string;
+  message: string;
+  result: {
+    title: string;
+    timedOutCount: number;
+    questionCards: TQuestionCard[];
+    firstQuestionThread: TAnswerCheckItem[];
+  };
+};
+
+// 나의 면접 상세 - 질문별 답변 확인 API
+export type TQuestionAnswersRequest = {
+  questionId: number;
+};
+
+export type TQuestionAnswersResponse = {
+  errorCode: null | string;
+  message: string;
+  result: TAnswerCheckItem[];
+};
+
+// 나의 면접 상세 - 질문별 피드백 조회 API
+export type TQuestionFeedbackRequest = {
+  questionId: number;
+};
+
+export type TQuestionFeedbackResponse = {
+  errorCode: null | string;
+  message: string;
+  result: {
+    aiFeedback: string;
+    selfFeedback: string;
+    peerItems: string[];
+  };
+};
+
+// 나의 면접 상세 - 질문별 랜덤 질문 답변 확인 API
+export type TRandomQuestionItem = {
+  question: string;
+  aiFeedback: string;
+  selfFeedback: string;
+  answerText: string;
+  recordingUrl: string;
+};
+
+export type TRandomQuestionsResponse = {
+  errorCode: null | string;
+  message: string;
+  result: TRandomQuestionItem[];
+};