From 70e2cb9f7da201d1fe1f1bf07866580372c38b87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=84=B1=ED=83=9C=EA=B2=BD?= <taegyeong0320@naver.com>
Date: Sun, 15 Mar 2026 16:07:40 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9E=90=EB=A7=89=20live=20=EC=97=86?=
 =?UTF-8?q?=EC=95=A0=EA=B3=A0=20final=EB=A7=8C=20=EB=82=A8=EA=B8=B0?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/recording/TranscriptArea.tsx | 31 ++-------------------
 src/hooks/useSocket.ts                      | 11 +-------
 src/pages/RecordingPage.tsx                 | 19 +------------
 3 files changed, 5 insertions(+), 56 deletions(-)

diff --git a/src/components/recording/TranscriptArea.tsx b/src/components/recording/TranscriptArea.tsx
index 3e3fe14..833f010 100644
--- a/src/components/recording/TranscriptArea.tsx
+++ b/src/components/recording/TranscriptArea.tsx
@@ -1,22 +1,19 @@
 import { useEffect, useRef } from 'react';
 import type { TranscriptEntry } from '@/types/recording';
-import participant1Image from '@/assets/avatars/participant1.png';
 import TranscriptItem from './TranscriptItem';
 
 interface TranscriptAreaProps {
   entries: TranscriptEntry[];
-  liveText?: string;
-  liveTimestamp?: string;
 }
 
-export default function TranscriptArea({ entries, liveText, liveTimestamp }: TranscriptAreaProps) {
+export default function TranscriptArea({ entries }: TranscriptAreaProps) {
   const bottomRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [entries, liveText]);
+  }, [entries]);
 
-  if (entries.length === 0 && !liveText) {
+  if (entries.length === 0) {
     return (
       <div className="px-[71px] pt-[38px]">
         <p className="text-[16px] leading-normal text-[#959595]">
@@ -33,28 +30,6 @@ export default function TranscriptArea({ entries, liveText, liveTimestamp }: Tra
       {entries.map((entry, index) => (
         <TranscriptItem key={index} entry={entry} />
       ))}
-      {liveText && (
-        <div className="flex flex-col gap-[8px]">
-          <p className="text-[16px] leading-normal font-bold text-[#c4c4c4]">
-            {liveTimestamp}
-          </p>
-          <div className="flex gap-[16px]">
-            <div className="flex shrink-0 flex-col items-center gap-[2px]">
-              <img
-                src={participant1Image}
-                alt="참석자 1"
-                className="size-[30px] rounded-full object-cover"
-              />
-              <span className="text-[10px] font-medium text-[#4A90D9]">
-                참석자 1
-              </span>
-            </div>
-            <p className="text-[14px] leading-normal font-medium whitespace-pre-wrap text-[#4A90D9]">
-              {liveText}
-            </p>
-          </div>
-        </div>
-      )}
       <div ref={bottomRef} />
     </div>
   );
diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
index a12756f..77fb939 100644
--- a/src/hooks/useSocket.ts
+++ b/src/hooks/useSocket.ts
@@ -11,19 +11,16 @@ interface UseSocketReturn {
 }
 
 export function useSocket(
-  onSubtitleLive: (text: string) => void,
   onSubtitleFinal: (text: string) => void,
 ): UseSocketReturn {
   const socketRef = useRef<SocketIOClient.Socket | null>(null);
   const [isConnected, setIsConnected] = useState(false);
 
-  const onSubtitleLiveRef = useRef(onSubtitleLive);
   const onSubtitleFinalRef = useRef(onSubtitleFinal);
 
   useEffect(() => {
-    onSubtitleLiveRef.current = onSubtitleLive;
     onSubtitleFinalRef.current = onSubtitleFinal;
-  }, [onSubtitleLive, onSubtitleFinal]);
+  }, [onSubtitleFinal]);
 
   const connect = useCallback(() => {
     if (socketRef.current?.connected) return;
@@ -44,12 +41,6 @@ export function useSocket(
       setIsConnected(false);
     });
 
-    socket.on('stt:subtitle_live', (...args: unknown[]) => {
-      const text = args[0] as string;
-      console.log('[Socket] subtitle_live:', text);
-      onSubtitleLiveRef.current(text);
-    });
-
     socket.on('stt:subtitle_final', (...args: unknown[]) => {
       const text = args[0] as string;
       console.log('[Socket] subtitle_final:', text);
diff --git a/src/pages/RecordingPage.tsx b/src/pages/RecordingPage.tsx
index 0ca7c4d..774075c 100644
--- a/src/pages/RecordingPage.tsx
+++ b/src/pages/RecordingPage.tsx
@@ -32,8 +32,6 @@ function formatElapsed(ms: number): string {
 
 export default function RecordingPage() {
   const [entries, setEntries] = useState<TranscriptEntry[]>([]);
-  const [liveText, setLiveText] = useState('');
-  const [liveTimestamp, setLiveTimestamp] = useState('');
   const [isRecording, setIsRecording] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
 
@@ -50,12 +48,6 @@ export default function RecordingPage() {
   }, [isPaused]);
 
   const { sendAudio, connect, disconnect } = useSocket(
-    // onSubtitleLive
-    (text) => {
-      setLiveText(text);
-      setLiveTimestamp((prev) => prev || formatElapsed(getElapsed()));
-    },
-    // onSubtitleFinal
     (text) => {
       const elapsed = getElapsed();
       setEntries((prev) => [
@@ -67,8 +59,6 @@ export default function RecordingPage() {
           text,
         },
       ]);
-      setLiveText('');
-      setLiveTimestamp('');
     },
   );
 
@@ -86,7 +76,6 @@ export default function RecordingPage() {
     setIsRecording(true);
     setIsPaused(false);
     setEntries([]);
-    setLiveText('');
   }, [connect, sendAudio]);
 
   const handleTogglePause = useCallback(() => {
@@ -109,7 +98,6 @@ export default function RecordingPage() {
     disconnect();
     setIsRecording(false);
     setIsPaused(false);
-    setLiveText('');
   }, [disconnect]);
 
   const handleCancel = useCallback(() => {
@@ -119,7 +107,6 @@ export default function RecordingPage() {
     setIsRecording(false);
     setIsPaused(false);
     setEntries([]);
-    setLiveText('');
   }, [disconnect]);
 
   return (
@@ -138,11 +125,7 @@ export default function RecordingPage() {
         {/* 하단 분할 영역 */}
         <div className="flex min-h-0 flex-1">
           <div className="flex-1 overflow-y-auto">
-            <TranscriptArea
-              entries={entries}
-              liveText={liveText}
-              liveTimestamp={liveTimestamp}
-            />
+            <TranscriptArea entries={entries} />
           </div>
           <RightPanel memos={[]} defaultTab="summary" />
         </div>