feat : 실시간 요약

src/components/recording/RightPanel.tsx

@@ -7,11 +7,13 @@ type Tab = 'summary' | 'memo';
 
 interface RightPanelProps {
   memos: MemoEntry[];
+  summaries: string[];
   defaultTab?: Tab;
 }
 
 export default function RightPanel({
   memos,
+  summaries,
   defaultTab = 'summary',
 }: RightPanelProps) {
   const [activeTab, setActiveTab] = useState<Tab>(defaultTab);
@@ -52,7 +54,7 @@ export default function RightPanel({
 
       {/* 탭 콘텐츠 */}
       <div className="flex-1 overflow-y-auto">
-        {activeTab === 'summary' ? <SummaryTab /> : <MemoTab memos={memos} />}
+        {activeTab === 'summary' ? <SummaryTab summaries={summaries} /> : <MemoTab memos={memos} />}
       </div>
     </div>
   );

src/components/recording/SummaryTab.tsx

@@ -1,11 +1,28 @@
-export default function SummaryTab() {
+interface SummaryTabProps {
+  summaries: string[];
+}
+
+export default function SummaryTab({ summaries }: SummaryTabProps) {
+  if (summaries.length === 0) {
+    return (
+      <div className="px-[32px] pt-[35px]">
+        <p className="text-[16px] leading-normal font-medium text-black">
+          중요한 내용만
+          <br />
+          실시간으로 정리해드릴게요! 📝
+        </p>
+      </div>
+    );
+  }
+
   return (
-    <div className="px-[32px] pt-[35px]">
-      <p className="text-[16px] leading-normal font-medium text-black">
-        중요한 내용만
-        <br />
-        실시간으로 정리해드릴게요! 📝
-      </p>
+    <div className="flex flex-col gap-[24px] px-[32px] pt-[35px] pb-[32px]">
+      {summaries.map((summary, index) => (
+        <div key={index} className="flex flex-col gap-[8px]">
+          <p className="text-[12px] font-medium text-[#959595]">{index + 1}분</p>
+          <p className="text-[14px] leading-normal font-medium text-black whitespace-pre-wrap">{summary}</p>
+        </div>
+      ))}
     </div>
   );
 }

src/hooks/useSocket.ts

@@ -12,15 +12,18 @@ interface UseSocketReturn {
 
 export function useSocket(
   onSubtitleFinal: (text: string) => void,
+  onSummary: (text: string) => void,
 ): UseSocketReturn {
   const socketRef = useRef<SocketIOClient.Socket | null>(null);
   const [isConnected, setIsConnected] = useState(false);
 
   const onSubtitleFinalRef = useRef(onSubtitleFinal);
+  const onSummaryRef = useRef(onSummary);
 
   useEffect(() => {
     onSubtitleFinalRef.current = onSubtitleFinal;
-  }, [onSubtitleFinal]);
+    onSummaryRef.current = onSummary;
+  }, [onSubtitleFinal, onSummary]);
 
   const connect = useCallback(() => {
     if (socketRef.current?.connected) return;
@@ -47,6 +50,12 @@ export function useSocket(
       onSubtitleFinalRef.current(text);
     });
 
+    socket.on('stt:summary', (...args: unknown[]) => {
+      const text = args[0] as string;
+      console.log('[Socket] summary:', text);
+      onSummaryRef.current(text);
+    });
+
     socketRef.current = socket;
   }, []);
 

src/pages/RecordingPage.tsx

@@ -32,6 +32,7 @@ function formatElapsed(ms: number): string {
 
 export default function RecordingPage() {
   const [entries, setEntries] = useState<TranscriptEntry[]>([]);
+  const [summaries, setSummaries] = useState<string[]>([]);
   const [isRecording, setIsRecording] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
 
@@ -60,6 +61,9 @@ export default function RecordingPage() {
         },
       ]);
     },
+    (text) => {
+      setSummaries((prev) => [...prev, text]);
+    },
   );
 
   const handleStart = useCallback(async () => {
@@ -127,7 +131,7 @@ export default function RecordingPage() {
           <div className="flex-1 overflow-y-auto">
             <TranscriptArea entries={entries} />
           </div>
-          <RightPanel memos={[]} defaultTab="summary" />
+          <RightPanel memos={[]} summaries={summaries} defaultTab="summary" />
         </div>
       </div>