[FEAT] 문법 교정 채팅 스트리밍 UI 구현 (#128)

src/domains/grammar/components/ChatMessage.jsx

@@ -1,4 +1,4 @@
-import { Box, Typography, Chip, Collapse, IconButton } from '@mui/material'
+import { Box, Typography, Chip, Collapse, IconButton, keyframes } from '@mui/material'
 import {
   SmartToy as AiIcon,
   Person as PersonIcon,
@@ -14,7 +14,18 @@ import {
   getScoreColor,
 } from '../constants/grammarConstants'
 
-export default function ChatMessage({ message, isUser = false }) {
+// 커서 깜빡임 애니메이션
+const blink = keyframes`
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+`
+
+export default function ChatMessage({
+  message,
+  isUser = false,
+  isStreaming = false,
+  streamingText = '',
+}) {
   const { t, isKorean } = useSettings()
   const [showDetails, setShowDetails] = useState(false)
 
@@ -30,6 +41,9 @@ export default function ChatMessage({ message, isUser = false }) {
   const hasErrors = errors && errors.length > 0
   const scoreColor = grammarScore ? getScoreColor(grammarScore) : '#059669'
 
+  // 스트리밍 중일 때 표시할 텍스트
+  const displayText = isStreaming ? streamingText : (aiResponse || content)
+
   if (isUser) {
     return (
       <Box
@@ -226,15 +240,34 @@ export default function ChatMessage({ message, isUser = false }) {
             borderRadius: '20px 20px 20px 4px',
             backgroundColor: '#f3f4f6',
             border: '1px solid #e5e7eb',
+            minHeight: isStreaming ? 48 : 'auto',
           }}
         >
-          <Typography sx={{ fontSize: '1rem', lineHeight: 1.6, color: '#374151' }}>
-            {aiResponse || content}
+          <Typography
+            component="div"
+            sx={{ fontSize: '1rem', lineHeight: 1.6, color: '#374151' }}
+          >
+            {displayText}
+            {/* 스트리밍 커서 */}
+            {isStreaming && (
+              <Box
+                component="span"
+                sx={{
+                  display: 'inline-block',
+                  width: 2,
+                  height: '1.2em',
+                  backgroundColor: '#3b82f6',
+                  ml: 0.5,
+                  verticalAlign: 'text-bottom',
+                  animation: `${blink} 1s infinite`,
+                }}
+              />
+            )}
           </Typography>
         </Box>
 
-        {/* Conversation Tip */}
-        {conversationTip && (
+        {/* Conversation Tip - 스트리밍 완료 후에만 표시 */}
+        {!isStreaming && conversationTip && (
           <Box
             sx={{
               mt: 1.5,

src/domains/grammar/hooks/useGrammarStream.js

@@ -0,0 +1,146 @@
+import { useState, useCallback, useEffect, useRef } from 'react'
+import { grammarStreamService } from '../services/grammarStreamService'
+
+/**
+ * Grammar WebSocket 스트리밍 훅
+ * 실시간 AI 응답을 위한 상태 관리
+ */
+export function useGrammarStream() {
+  // 스트리밍 상태
+  const [isStreaming, setIsStreaming] = useState(false)
+  const [isConnected, setIsConnected] = useState(false)
+  const [streamingText, setStreamingText] = useState('')
+  const [sessionId, setSessionId] = useState(null)
+  const [error, setError] = useState(null)
+
+  // 최종 결과
+  const [result, setResult] = useState(null)
+
+  // 연결 상태 추적
+  const isConnectedRef = useRef(false)
+
+  /**
+   * WebSocket 연결
+   */
+  const connect = useCallback(async (token = null) => {
+    try {
+      setError(null)
+      await grammarStreamService.connect(token)
+      setIsConnected(true)
+      isConnectedRef.current = true
+    } catch (err) {
+      console.error('[useGrammarStream] Connection error:', err)
+      setError('연결에 실패했습니다')
+      setIsConnected(false)
+      isConnectedRef.current = false
+    }
+  }, [])
+
+  /**
+   * 연결 종료
+   */
+  const disconnect = useCallback(() => {
+    grammarStreamService.disconnect()
+    setIsConnected(false)
+    isConnectedRef.current = false
+  }, [])
+
+  /**
+   * 스트리밍 메시지 전송
+   */
+  const sendMessage = useCallback((message, options = {}) => {
+    // 상태 초기화
+    setIsStreaming(true)
+    setStreamingText('')
+    setResult(null)
+    setError(null)
+
+    // 콜백 설정
+    grammarStreamService.setCallbacks({
+      onStart: (data) => {
+        console.log('[useGrammarStream] Stream started:', data.sessionId)
+        setSessionId(data.sessionId)
+      },
+
+      onToken: (data) => {
+        setStreamingText((prev) => prev + data.token)
+      },
+
+      onComplete: (data) => {
+        console.log('[useGrammarStream] Stream complete')
+        setResult(data)
+        setIsStreaming(false)
+      },
+
+      onError: (data) => {
+        console.error('[useGrammarStream] Stream error:', data.message)
+        setError(data.message || '스트리밍 중 오류가 발생했습니다')
+        setIsStreaming(false)
+      },
+
+      onClose: (event) => {
+        if (event.code !== 1000) {
+          console.log('[useGrammarStream] Unexpected close:', event.code)
+        }
+      },
+    })
+
+    // 메시지 전송
+    grammarStreamService.send(message, options)
+  }, [])
+
+  /**
+   * 스트리밍 취소
+   */
+  const cancelStream = useCallback(() => {
+    setIsStreaming(false)
+    setStreamingText('')
+    // 연결은 유지하고 스트리밍만 취소
+  }, [])
+
+  /**
+   * 상태 초기화
+   */
+  const reset = useCallback(() => {
+    setIsStreaming(false)
+    setStreamingText('')
+    setResult(null)
+    setError(null)
+    setSessionId(null)
+  }, [])
+
+  /**
+   * 컴포넌트 언마운트 시 정리
+   */
+  useEffect(() => {
+    return () => {
+      if (isConnectedRef.current) {
+        grammarStreamService.disconnect()
+      }
+    }
+  }, [])
+
+  return {
+    // 상태
+    isStreaming,
+    isConnected,
+    streamingText,
+    sessionId,
+    result,
+    error,
+
+    // 액션
+    connect,
+    disconnect,
+    sendMessage,
+    cancelStream,
+    reset,
+
+    // 편의 getter
+    grammarCheck: result?.grammarCheck || null,
+    aiResponse: result?.aiResponse || streamingText,
+    conversationTip: result?.conversationTip || null,
+  }
+}
+
+export default useGrammarStream

src/domains/grammar/index.js

@@ -10,6 +10,10 @@ export { default as SessionSidebar } from './components/SessionSidebar'
 
 // Services
 export * from './services/grammarService'
+export * from './services/grammarStreamService'
+
+// Hooks
+export { useGrammarStream } from './hooks/useGrammarStream'
 
 // Constants
 export * from './constants/grammarConstants'