From bc58205fabe5fb390c443aa94c8af1db184a40c0 Mon Sep 17 00:00:00 2001
From: hyein Heo <128613248+hye-inA@users.noreply.github.com>
Date: Sat, 24 Jan 2026 01:31:20 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20:=20AI=20=ED=94=84=EB=A6=AC=ED=86=A0?=
 =?UTF-8?q?=ED=82=B9(Speaking)=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=20(#195)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat : AI 말하기 연습 화면 구현

* refactor : Rest API 변경에 따른 화면 구현 변경

* feature : AI와 대화하기 UI & STT서비스 구현
---
 src/App.jsx                                   | 161 +++++-----
 src/api/axios.js                              |  21 +-
 src/api/speakingApi.js                        |  41 +++
 .../components/SpeakingChatMessage.jsx        | 163 ++++++++++
 .../speaking/components/SpeakingInput.jsx     | 294 ++++++++++++++++++
 .../speaking/constants/speakingConstants.js   |  31 ++
 src/domains/speaking/hooks/useSpeaking.js     | 119 +++++++
 src/domains/speaking/index.js                 |  15 +
 src/domains/speaking/pages/SpeakingPage.jsx   | 222 +++++++++++++
 src/domains/speaking/services/speakingApi.js  |  68 ++++
 .../speaking/services/speakingService.js      |  29 ++
 11 files changed, 1075 insertions(+), 89 deletions(-)
 create mode 100644 src/api/speakingApi.js
 create mode 100644 src/domains/speaking/components/SpeakingChatMessage.jsx
 create mode 100644 src/domains/speaking/components/SpeakingInput.jsx
 create mode 100644 src/domains/speaking/constants/speakingConstants.js
 create mode 100644 src/domains/speaking/hooks/useSpeaking.js
 create mode 100644 src/domains/speaking/index.js
 create mode 100644 src/domains/speaking/pages/SpeakingPage.jsx
 create mode 100644 src/domains/speaking/services/speakingApi.js
 create mode 100644 src/domains/speaking/services/speakingService.js

diff --git a/src/App.jsx b/src/App.jsx
index dab5d55..d5f3895 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
-import {useState, useEffect} from 'react'
-import {Navigate, Route, Routes, useNavigate} from 'react-router-dom'
-import {Box, Button, Card, CardContent, CircularProgress, Collapse, Container, Grid, Typography} from '@mui/material'
+import { useState, useEffect } from 'react'
+import { Navigate, Route, Routes, useNavigate } from 'react-router-dom'
+import { Box, Button, Card, CardContent, CircularProgress, Collapse, Container, Grid, Typography } from '@mui/material'
 import {
     ChevronRight as ChevronRightIcon,
     Create as WritingCategoryIcon,
@@ -19,6 +19,7 @@ import {
 } from '@mui/icons-material'
 import MainLayout from './layouts/MainLayout'
 import FreetalkPeoplePage from './domains/freetalk/pages/FreetalkPeoplePage'
+import { SpeakingPage } from './domains/speaking'
 import ChatRoomPage from './domains/freetalk/pages/ChatRoomPage'
 import ChatRoomModal from './domains/freetalk/components/ChatRoomModal'
 import VocabDashboard from './domains/vocab/pages/VocabDashboard'
@@ -26,8 +27,8 @@ import DailyLearning from './domains/vocab/pages/DailyLearning'
 import TestPage from './domains/vocab/pages/TestPage'
 import WordListPage from './domains/vocab/pages/WordListPage'
 import StatsPage from './domains/vocab/pages/StatsPage'
-import {WritingPage} from './domains/grammar'
-import {BadgeSection} from './domains/badge'
+import { WritingPage } from './domains/grammar'
+import { BadgeSection } from './domains/badge'
 import CatchmindLobbyPage from './domains/games/pages/CatchmindLobbyPage'
 import CatchmindWaitingPage from './domains/games/pages/CatchmindWaitingPage'
 import CatchmindPlayPage from './domains/games/pages/CatchmindPlayPage'
@@ -41,8 +42,8 @@ import LoginPage from './pages/Login'
 import SignUpPage from './pages/SignUp'
 
 
-function ProtectedRoute({children}) {
-    const {isAuthenticated, isLoading} = useAuth()
+function ProtectedRoute({ children }) {
+    const { isAuthenticated, isLoading } = useAuth()
 
     if (isLoading) {
         return (
@@ -52,21 +53,21 @@ function ProtectedRoute({children}) {
                 alignItems: 'center',
                 justifyContent: 'center'
             }}>
-                <CircularProgress/>
+                <CircularProgress />
             </Box>
         )
     }
 
     if (!isAuthenticated) {
-        return <Navigate to="/login" replace/>
+        return <Navigate to="/login" replace />
     }
 
     return children
 }
 
 // 이미 로그인된 경우 대시보드로
-function PublicRoute({children}) {
-    const {isAuthenticated, isLoading} = useAuth()
+function PublicRoute({ children }) {
+    const { isAuthenticated, isLoading } = useAuth()
 
     if (isLoading) {
         return (
@@ -76,13 +77,13 @@ function PublicRoute({children}) {
                 alignItems: 'center',
                 justifyContent: 'center'
             }}>
-                <CircularProgress/>
+                <CircularProgress />
             </Box>
         )
     }
 
     if (isAuthenticated) {
-        return <Navigate to="/dashboard" replace/>
+        return <Navigate to="/dashboard" replace />
     }
 
     return children
@@ -92,6 +93,7 @@ function PublicRoute({children}) {
 function Dashboard() {
     const navigate = useNavigate()
     const [expandedCard, setExpandedCard] = useState(null)
+    const { t } = useSettings()
     const {t, isKorean} = useSettings()
     const [activityData, setActivityData] = useState(null)
     const [loadingActivity, setLoadingActivity] = useState(true)
@@ -286,9 +288,9 @@ function Dashboard() {
     }
 
     return (
-        <Container maxWidth="lg" sx={{pb: 6}}>
+        <Container maxWidth="lg" sx={{ pb: 6 }}>
             {/* Header */}
-            <Box sx={{mb: 5, pt: 2}}>
+            <Box sx={{ mb: 5, pt: 2 }}>
                 <Box display="flex" alignItems="center" gap={1.5} mb={1}>
                     <Box
                         sx={{
@@ -302,10 +304,10 @@ function Dashboard() {
                             boxShadow: '0 8px 16px -4px rgba(249, 115, 22, 0.3)',
                         }}
                     >
-                        <WaveIcon sx={{fontSize: 28, color: 'white'}}/>
+                        <WaveIcon sx={{ fontSize: 28, color: 'white' }} />
                     </Box>
                     <Box>
-                        <Typography variant="h4" fontWeight={800} sx={{lineHeight: 1.2}}>
+                        <Typography variant="h4" fontWeight={800} sx={{ lineHeight: 1.2 }}>
                             {t('dashboard.greeting')}
                         </Typography>
                         <Typography variant="body2" color="text.secondary">
@@ -323,7 +325,7 @@ function Dashboard() {
                     const hasChildren = mode.children && mode.children.length > 0
 
                     return (
-                        <Grid key={mode.id} size={{xs: 12, md: 6}}>
+                        <Grid key={mode.id} size={{ xs: 12, md: 6 }}>
                             <Card
                                 onMouseEnter={() => handleCardHover(mode.id)}
                                 onMouseLeave={handleCardLeave}
@@ -344,8 +346,8 @@ function Dashboard() {
                                     minHeight: isExpanded ? 'auto' : 140,
                                 }}
                             >
-                                <CardContent sx={{p: 3}}>
-                                    <Box sx={{display: 'flex', alignItems: 'flex-start', gap: 2.5}}>
+                                <CardContent sx={{ p: 3 }}>
+                                    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2.5 }}>
                                         {/* Icon */}
                                         <Box
                                             sx={{
@@ -359,11 +361,11 @@ function Dashboard() {
                                                 flexShrink: 0,
                                             }}
                                         >
-                                            <Icon sx={{fontSize: 28, color: mode.color}}/>
+                                            <Icon sx={{ fontSize: 28, color: mode.color }} />
                                         </Box>
 
                                         {/* Text */}
-                                        <Box sx={{flex: 1, minWidth: 0}}>
+                                        <Box sx={{ flex: 1, minWidth: 0 }}>
                                             <Box sx={{
                                                 display: 'flex',
                                                 alignItems: 'center',
@@ -382,7 +384,7 @@ function Dashboard() {
                                                     />
                                                 )}
                                             </Box>
-                                            <Typography variant="body2" color="text.secondary" sx={{mt: 0.5}}>
+                                            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
                                                 {mode.description}
                                             </Typography>
                                         </Box>
@@ -441,14 +443,14 @@ function Dashboard() {
                                                                     boxShadow: '0 2px 8px -2px rgba(0,0,0,0.1)',
                                                                 }}
                                                             >
-                                                                <ChildIcon sx={{color: mode.color, fontSize: 22}}/>
+                                                                <ChildIcon sx={{ color: mode.color, fontSize: 22 }} />
                                                             </Box>
                                                             <Typography variant="subtitle2" fontWeight={700}
-                                                                        sx={{mb: 0.5}}>
+                                                                sx={{ mb: 0.5 }}>
                                                                 {child.title}
                                                             </Typography>
                                                             <Typography variant="caption" color="text.secondary"
-                                                                        sx={{lineHeight: 1.3}}>
+                                                                sx={{ lineHeight: 1.3 }}>
                                                                 {child.description}
                                                             </Typography>
                                                         </Box>
@@ -655,22 +657,13 @@ function Dashboard() {
 // Placeholder Pages
 function OpicPage() {
     return (
-        <Container maxWidth="lg" sx={{py: 4}}>
+        <Container maxWidth="lg" sx={{ py: 4 }}>
             <Typography variant="h4" fontWeight={700}>OPIC Practice</Typography>
             <Typography color="text.secondary">Level-based training</Typography>
         </Container>
     )
 }
 
-function FreetalkAiPage() {
-    return (
-        <Container maxWidth="lg" sx={{py: 4}}>
-            <Typography variant="h4" fontWeight={700}>AI Conversation</Typography>
-            <Typography color="text.secondary">Free conversation with AI</Typography>
-        </Container>
-    )
-}
-
 
 function ReportsPage() {
     const {isKorean} = useSettings()
@@ -735,9 +728,9 @@ function ReportsPage() {
     }
 
     return (
-        <Container maxWidth="lg" sx={{py: 4}}>
+        <Container maxWidth="lg" sx={{ py: 4 }}>
             {/* 헤더 */}
-            <Box sx={{mb: 4}}>
+            <Box sx={{ mb: 4 }}>
                 <Box display="flex" alignItems="center" gap={2} mb={1}>
                     <Box
                         sx={{
@@ -751,7 +744,7 @@ function ReportsPage() {
                             boxShadow: '0 8px 16px -4px rgba(139, 92, 246, 0.3)',
                         }}
                     >
-                        <QuizIcon sx={{fontSize: 26, color: 'white'}}/>
+                        <QuizIcon sx={{ fontSize: 26, color: 'white' }} />
                     </Box>
                     <Box>
                         <Typography variant="h4" fontWeight={800}>
@@ -765,9 +758,9 @@ function ReportsPage() {
             </Box>
 
             {/* 통계 요약 카드 */}
-            <Grid container spacing={2} sx={{mb: 4}}>
-                <Grid size={{xs: 6, md: 3}}>
-                    <Card sx={{p: 2.5, borderRadius: '16px', height: '100%'}}>
+            <Grid container spacing={2} sx={{ mb: 4 }}>
+                <Grid size={{ xs: 6, md: 3 }}>
+                    <Card sx={{ p: 2.5, borderRadius: '16px', height: '100%' }}>
                         <Typography variant="body2" color="text.secondary" gutterBottom>
                             {isKorean ? '총 학습일' : 'Study Days'}
                         </Typography>
@@ -779,8 +772,8 @@ function ReportsPage() {
                         </Typography>
                     </Card>
                 </Grid>
-                <Grid size={{xs: 6, md: 3}}>
-                    <Card sx={{p: 2.5, borderRadius: '16px', height: '100%'}}>
+                <Grid size={{ xs: 6, md: 3 }}>
+                    <Card sx={{ p: 2.5, borderRadius: '16px', height: '100%' }}>
                         <Typography variant="body2" color="text.secondary" gutterBottom>
                             {isKorean ? '학습한 단어' : 'Words Learned'}
                         </Typography>
@@ -792,8 +785,8 @@ function ReportsPage() {
                         </Typography>
                     </Card>
                 </Grid>
-                <Grid size={{xs: 6, md: 3}}>
-                    <Card sx={{p: 2.5, borderRadius: '16px', height: '100%'}}>
+                <Grid size={{ xs: 6, md: 3 }}>
+                    <Card sx={{ p: 2.5, borderRadius: '16px', height: '100%' }}>
                         <Typography variant="body2" color="text.secondary" gutterBottom>
                             {isKorean ? '테스트 완료' : 'Tests Taken'}
                         </Typography>
@@ -805,8 +798,8 @@ function ReportsPage() {
                         </Typography>
                     </Card>
                 </Grid>
-                <Grid size={{xs: 6, md: 3}}>
-                    <Card sx={{p: 2.5, borderRadius: '16px', height: '100%'}}>
+                <Grid size={{ xs: 6, md: 3 }}>
+                    <Card sx={{ p: 2.5, borderRadius: '16px', height: '100%' }}>
                         <Typography variant="body2" color="text.secondary" gutterBottom>
                             {isKorean ? '평균 점수' : 'Average Score'}
                         </Typography>
@@ -852,12 +845,12 @@ function ReportsPage() {
             )}
 
             {/* 연속 학습 */}
-            <Card sx={{p: 3, borderRadius: '20px', mb: 4}}>
+            <Card sx={{ p: 3, borderRadius: '20px', mb: 4 }}>
                 <Typography variant="h6" fontWeight={700} gutterBottom>
                     {isKorean ? '연속 학습 기록' : 'Study Streak'}
                 </Typography>
                 <Grid container spacing={3}>
-                    <Grid size={{xs: 6}}>
+                    <Grid size={{ xs: 6 }}>
                         <Box
                             sx={{
                                 p: 2,
@@ -874,7 +867,7 @@ function ReportsPage() {
                             </Typography>
                         </Box>
                     </Grid>
-                    <Grid size={{xs: 6}}>
+                    <Grid size={{ xs: 6 }}>
                         <Box
                             sx={{
                                 p: 2,
@@ -895,22 +888,22 @@ function ReportsPage() {
             </Card>
 
             {/* 배지 섹션 */}
-            <BadgeSection/>
+            <BadgeSection />
         </Container>
     )
 }
 
 function SettingsPage() {
-    const {settings, setTtsVoice, setLanguage, t} = useSettings()
+    const { settings, setTtsVoice, setLanguage, t } = useSettings()
 
     const languageOptions = [
-        {value: 'ko', label: '한국어', flag: '🇰🇷'},
-        {value: 'en', label: 'English', flag: '🇺🇸'},
+        { value: 'ko', label: '한국어', flag: '🇰🇷' },
+        { value: 'en', label: 'English', flag: '🇺🇸' },
     ]
 
     return (
-        <Container maxWidth="md" sx={{py: 4}}>
-            <Box sx={{mb: 4}}>
+        <Container maxWidth="md" sx={{ py: 4 }}>
+            <Box sx={{ mb: 4 }}>
                 <Box display="flex" alignItems="center" gap={2} mb={1}>
                     <Box
                         sx={{
@@ -924,10 +917,10 @@ function SettingsPage() {
                             boxShadow: '0 6px 12px -3px rgba(107, 114, 128, 0.3)',
                         }}
                     >
-                        <VocabIcon sx={{fontSize: 26, color: 'white'}}/>
+                        <VocabIcon sx={{ fontSize: 26, color: 'white' }} />
                     </Box>
                     <Box>
-                        <Typography variant="h4" fontWeight={800} sx={{lineHeight: 1.2}}>
+                        <Typography variant="h4" fontWeight={800} sx={{ lineHeight: 1.2 }}>
                             {t('settings.title')}
                         </Typography>
                         <Typography variant="body2" color="text.secondary">
@@ -939,24 +932,24 @@ function SettingsPage() {
 
             <Box display="flex" flexDirection="column" gap={3}>
                 {/* Language Settings */}
-                <Card sx={{borderRadius: '20px', overflow: 'hidden'}}>
+                <Card sx={{ borderRadius: '20px', overflow: 'hidden' }}>
                     <Box
                         sx={{
                             p: 3,
                             background: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
                         }}
                     >
-                        <Typography variant="h6" fontWeight={700} sx={{color: 'white'}}>
+                        <Typography variant="h6" fontWeight={700} sx={{ color: 'white' }}>
                             {t('settings.language')}
                         </Typography>
-                        <Typography variant="body2" sx={{color: 'rgba(255,255,255,0.8)'}}>
+                        <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.8)' }}>
                             {t('settings.languageDesc')}
                         </Typography>
                     </Box>
-                    <CardContent sx={{p: 3}}>
+                    <CardContent sx={{ p: 3 }}>
                         <Grid container spacing={2}>
                             {languageOptions.map((option) => (
-                                <Grid key={option.value} size={{xs: 6}}>
+                                <Grid key={option.value} size={{ xs: 6 }}>
                                     <Box
                                         onClick={() => setLanguage(option.value)}
                                         sx={{
@@ -974,7 +967,7 @@ function SettingsPage() {
                                             },
                                         }}
                                     >
-                                        <Typography variant="h4" sx={{mb: 1}}>
+                                        <Typography variant="h4" sx={{ mb: 1 }}>
                                             {option.flag}
                                         </Typography>
                                         <Typography
@@ -992,23 +985,23 @@ function SettingsPage() {
                 </Card>
 
                 {/* TTS Voice Settings */}
-                <Card sx={{borderRadius: '20px', overflow: 'hidden'}}>
+                <Card sx={{ borderRadius: '20px', overflow: 'hidden' }}>
                     <Box
                         sx={{
                             p: 3,
                             background: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
                         }}
                     >
-                        <Typography variant="h6" fontWeight={700} sx={{color: 'white'}}>
+                        <Typography variant="h6" fontWeight={700} sx={{ color: 'white' }}>
                             {t('settings.ttsVoice')}
                         </Typography>
-                        <Typography variant="body2" sx={{color: 'rgba(255,255,255,0.8)'}}>
+                        <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.8)' }}>
                             {t('settings.ttsVoiceDesc')}
                         </Typography>
                     </Box>
-                    <CardContent sx={{p: 3}}>
+                    <CardContent sx={{ p: 3 }}>
                         <Grid container spacing={2}>
-                            <Grid size={{xs: 6}}>
+                            <Grid size={{ xs: 6 }}>
                                 <Box
                                     onClick={() => setTtsVoice('FEMALE')}
                                     sx={{
@@ -1039,7 +1032,7 @@ function SettingsPage() {
                                             mb: 1.5,
                                         }}
                                     >
-                                        <Typography sx={{fontSize: 24}}>👩</Typography>
+                                        <Typography sx={{ fontSize: 24 }}>👩</Typography>
                                     </Box>
                                     <Typography
                                         variant="body1"
@@ -1050,7 +1043,7 @@ function SettingsPage() {
                                     </Typography>
                                 </Box>
                             </Grid>
-                            <Grid size={{xs: 6}}>
+                            <Grid size={{ xs: 6 }}>
                                 <Box
                                     onClick={() => setTtsVoice('MALE')}
                                     sx={{
@@ -1081,7 +1074,7 @@ function SettingsPage() {
                                             mb: 1.5,
                                         }}
                                     >
-                                        <Typography sx={{fontSize: 24}}>👨</Typography>
+                                        <Typography sx={{ fontSize: 24 }}>👨</Typography>
                                     </Box>
                                     <Typography
                                         variant="body1"
@@ -1102,7 +1095,7 @@ function SettingsPage() {
 
 function NotFound() {
     const navigate = useNavigate()
-    const {t} = useSettings()
+    const { t } = useSettings()
 
     return (
         <Container maxWidth="sm">
@@ -1120,10 +1113,10 @@ function NotFound() {
                 >
                     404
                 </Typography>
-                <Typography variant="h5" fontWeight={600} sx={{mt: 2, mb: 1}}>
+                <Typography variant="h5" fontWeight={600} sx={{ mt: 2, mb: 1 }}>
                     {t('notFound.title')}
                 </Typography>
-                <Typography color="text.secondary" sx={{mb: 4}}>
+                <Typography color="text.secondary" sx={{ mb: 4 }}>
                     {t('notFound.message')}
                 </Typography>
                 <Button
@@ -1139,7 +1132,7 @@ function NotFound() {
 }
 
 function App() {
-    const {activeRoom, closeChatRoom} = useChat()
+    const { activeRoom, closeChatRoom } = useChat()
 
     const handleRefreshRooms = () => {
         // Refresh rooms list after leaving a room
@@ -1149,23 +1142,23 @@ function App() {
         <>
             <Routes>
                 {/* Chat room page (separate layout) */}
-                <Route path="/freetalk/people/room/:roomId" element={<ChatRoomPage/>}/>
+                <Route path="/freetalk/people/room/:roomId" element={<ChatRoomPage />} />
 
                 {/* 로그인 / 회원가입 route */}
                 <Route path="/login" element={
                     <PublicRoute>
-                        <LoginPage/>
+                        <LoginPage />
                     </PublicRoute>
-                }/>
+                } />
                 <Route path="/signup" element={
                     <PublicRoute>
-                        <SignUpPage/>
+                        <SignUpPage />
                     </PublicRoute>
-                }/>
+                } />
 
                 {/* MainLayout routes */}
                 <Route element={<ProtectedRoute>
-                    <MainLayout/>
+                    <MainLayout />
                 </ProtectedRoute>
                 }>
                     <Route path="/" element={<Dashboard/>}/>
@@ -1192,7 +1185,7 @@ function App() {
                 </Route>
 
                 {/* 404 */}
-                <Route path="*" element={<NotFound/>}/>
+                <Route path="*" element={<NotFound />} />
             </Routes>
 
             {/* Global chat modal */}
diff --git a/src/api/axios.js b/src/api/axios.js
index af5ff20..944cc96 100644
--- a/src/api/axios.js
+++ b/src/api/axios.js
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { fetchAuthSession, signOut } from 'aws-amplify/auth'
 
 const API_BASE_URL = import.meta.env.VITE_API_URL
 
@@ -14,8 +15,7 @@ const api = axios.create({
 api.interceptors.request.use(
     async (config) => {
         try {
-            // Cognito 세션에서 토큰 가져오기
-            const session = await fetchAuthSession()
+
             const token = localStorage.getItem('accessToken')
 
             if (token) {
@@ -45,16 +45,27 @@ api.interceptors.response.use(
 
             try {
                 // 토큰 갱신 시도
-                const session = await fetchAuthSession({forceRefresh: true})
+                const session = await fetchAuthSession({ forceRefresh: true })
                 const newToken = session.tokens?.accessToken?.toString()
 
                 if (newToken) {
+                    localStorage.setItem('accessToken', newToken)
                     originalRequest.headers['Authorization'] = `Bearer ${newToken}`
                     return api(originalRequest)
                 }
             } catch (refreshError) {
-                // 토큰 갱신 실패 시 로그인 페이지로 리다이렉트
-                window.location.href = '/login'
+                try {
+                    await signOut()
+                } catch (e) {
+                    console.error('[Axios] Sign out error:', e)
+                }
+
+                localStorage.removeItem('accessToken')
+
+                // 로그인 페이지로 리다이렉트 (무한 루프 방지)
+                if (window.location.pathname !== '/login') {
+                    window.location.href = '/login'
+                }
             }
         }
         return Promise.reject(error)
diff --git a/src/api/speakingApi.js b/src/api/speakingApi.js
new file mode 100644
index 0000000..64a5b17
--- /dev/null
+++ b/src/api/speakingApi.js
@@ -0,0 +1,41 @@
+import axios from 'axios'
+
+// Bedrock/Polly 사용으로 응답 시간(timeout) 제한 늘림
+const speakingApi = axios.create({
+    baseURL: import.meta.env.VITE_API_URL,
+    timeout: 30000, // 30초 
+    headers: {
+        'Content-Type': 'application/json',
+    },
+})
+
+// Request interceptor - JWT 토큰 자동 추가
+speakingApi.interceptors.request.use(
+    (config) => {
+        const token = localStorage.getItem('accessToken')
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`
+        }
+        return config
+    },
+    (error) => {
+        return Promise.reject(error)
+    }
+)
+
+// Response interceptor - 401 에러 처리 및 데이터 추출
+speakingApi.interceptors.response.use(
+    (response) => response.data, // response.data를 바로 반환하도록 설정
+    (error) => {
+        console.error('Speaking API Error:', error.response?.data || error.message)
+
+        if (error.response?.status === 401) {
+            localStorage.removeItem('accessToken')
+            window.location.href = '/login'
+        }
+
+        return Promise.reject(error)
+    }
+)
+
+export default speakingApi
\ No newline at end of file
diff --git a/src/domains/speaking/components/SpeakingChatMessage.jsx b/src/domains/speaking/components/SpeakingChatMessage.jsx
new file mode 100644
index 0000000..d22b65a
--- /dev/null
+++ b/src/domains/speaking/components/SpeakingChatMessage.jsx
@@ -0,0 +1,163 @@
+import { useState, useRef } from 'react'
+import { Avatar, Box, IconButton, Typography, Tooltip, keyframes } from '@mui/material'
+import {
+    Person as PersonIcon,
+    SmartToy as AiIcon,
+    VolumeUp as VolumeUpIcon,
+    Stop as StopIcon,
+} from '@mui/icons-material'
+import { useSettings } from '../../../contexts/SettingsContext'
+
+const pulse = keyframes`
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+`
+
+export default function SpeakingChatMessage({ message, isUser = false }) {
+    const { isKorean } = useSettings()
+    const [isPlaying, setIsPlaying] = useState(false)
+    const audioRef = useRef(null)
+
+    const {
+        content,
+        userTranscript,
+        aiText,
+        aiAudioUrl,
+        confidence,
+    } = message
+
+    const displayText = isUser ? (userTranscript || content) : (aiText || content)
+
+    /**
+     * AI 응답 음성 재생
+     */
+    const playAudio = () => {
+        if (!aiAudioUrl) return
+
+        if (audioRef.current) {
+            audioRef.current.pause()
+        }
+
+        const audio = new Audio(aiAudioUrl)
+        audioRef.current = audio
+
+        audio.onplay = () => setIsPlaying(true)
+        audio.onended = () => setIsPlaying(false)
+        audio.onerror = () => {
+            setIsPlaying(false)
+            console.error('Audio playback error')
+        }
+
+        audio.play()
+    }
+
+    const stopAudio = () => {
+        if (audioRef.current) {
+            audioRef.current.pause()
+            audioRef.current.currentTime = 0
+            setIsPlaying(false)
+        }
+    }
+
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                gap: 1.5,
+                mb: 2,
+                flexDirection: isUser ? 'row-reverse' : 'row',
+            }}
+        >
+            {/* 아바타 */}
+            <Avatar
+                sx={{
+                    width: 36,
+                    height: 36,
+                    backgroundColor: isUser ? '#3b82f6' : '#10b981',
+                }}
+            >
+                {isUser ? <PersonIcon /> : <AiIcon />}
+            </Avatar>
+
+            {/* 메시지 내용 */}
+            <Box sx={{ maxWidth: '70%' }}>
+                {/* 역할 라벨 */}
+                <Typography
+                    variant="caption"
+                    sx={{
+                        color: '#6b7280',
+                        mb: 0.5,
+                        display: 'block',
+                        textAlign: isUser ? 'right' : 'left',
+                    }}
+                >
+                    {isUser
+                        ? (isKorean ? '나' : 'You')
+                        : 'Amy (AI)'}
+                </Typography>
+
+                {/* 메시지 버블 */}
+                <Box
+                    sx={{
+                        p: 2,
+                        borderRadius: '16px',
+                        backgroundColor: isUser ? '#3b82f6' : '#f3f4f6',
+                        color: isUser ? '#fff' : '#374151',
+                        borderTopRightRadius: isUser ? 4 : 16,
+                        borderTopLeftRadius: isUser ? 16 : 4,
+                    }}
+                >
+                    <Typography sx={{ fontSize: '1rem', lineHeight: 1.6 }}>
+                        {displayText}
+                    </Typography>
+
+                    {/* STT 신뢰도 표시 (사용자 메시지) */}
+                    {isUser && confidence && (
+                        <Typography
+                            variant="caption"
+                            sx={{ opacity: 0.7, mt: 1, display: 'block' }}
+                        >
+                            {isKorean ? '인식률' : 'Confidence'}: {Math.round(confidence * 100)}%
+                        </Typography>
+                    )}
+                </Box>
+
+                {/* AI 응답 음성 재생 버튼 */}
+                {!isUser && aiAudioUrl && (
+                    <Box sx={{ mt: 1 }}>
+                        <Tooltip
+                            title={
+                                isPlaying
+                                    ? (isKorean ? '정지' : 'Stop')
+                                    : (isKorean ? '음성 듣기' : 'Listen')
+                            }
+                        >
+                            <IconButton
+                                size="small"
+                                onClick={isPlaying ? stopAudio : playAudio}
+                                sx={{
+                                    backgroundColor: isPlaying ? '#ef4444' : '#10b981',
+                                    color: '#fff',
+                                    '&:hover': {
+                                        backgroundColor: isPlaying ? '#dc2626' : '#059669',
+                                    },
+                                    animation: isPlaying ? `${pulse} 1s infinite` : 'none',
+                                }}
+                            >
+                                {isPlaying ? <StopIcon fontSize="small" /> : <VolumeUpIcon fontSize="small" />}
+                            </IconButton>
+                        </Tooltip>
+                        <Typography
+                            variant="caption"
+                            sx={{ ml: 1, color: '#6b7280' }}
+                        >
+                            {isPlaying
+                                ? (isKorean ? '재생 중...' : 'Playing...')
+                                : (isKorean ? '음성 듣기' : 'Listen')}
+                        </Typography>
+                    </Box>
+                )}
+            </Box>
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/src/domains/speaking/components/SpeakingInput.jsx b/src/domains/speaking/components/SpeakingInput.jsx
new file mode 100644
index 0000000..d90ba85
--- /dev/null
+++ b/src/domains/speaking/components/SpeakingInput.jsx
@@ -0,0 +1,294 @@
+import { useState, useRef, useEffect } from 'react'
+import {
+    Box,
+    IconButton,
+    TextField,
+    Tooltip,
+    FormControl,
+    Select,
+    MenuItem,
+    Typography,
+    CircularProgress,
+} from '@mui/material'
+import {
+    Mic as MicIcon,
+    Stop as StopIcon,
+    Send as SendIcon,
+    Refresh as RefreshIcon,
+} from '@mui/icons-material'
+import { useSettings } from '../../../contexts/SettingsContext'
+import {
+    SPEAKING_LEVELS,
+    SPEAKING_LEVEL_COLORS,
+    SPEAKING_LEVEL_LABELS,
+    AUDIO_CONFIG,
+} from '../constants/speakingConstants'
+
+export default function SpeakingInput({
+    onSendVoice,
+    onSendText,
+    onLevelChange,
+    onReset,
+    loading = false,
+    level = SPEAKING_LEVELS.INTERMEDIATE,
+}) {
+    const { isKorean } = useSettings()
+    const [message, setMessage] = useState('')
+    const [isRecording, setIsRecording] = useState(false)
+    const [recordingTime, setRecordingTime] = useState(0)
+
+    const mediaRecorderRef = useRef(null)
+    const audioChunksRef = useRef([])
+    const timerRef = useRef(null)
+
+    // 녹음 타이머
+    useEffect(() => {
+        if (isRecording) {
+            timerRef.current = setInterval(() => {
+                setRecordingTime((prev) => {
+                    if (prev >= AUDIO_CONFIG.MAX_DURATION / 1000) {
+                        stopRecording()
+                        return 0
+                    }
+                    return prev + 1
+                })
+            }, 1000)
+        } else {
+            clearInterval(timerRef.current)
+            setRecordingTime(0)
+        }
+
+        return () => clearInterval(timerRef.current)
+    }, [isRecording])
+
+    /**
+     * 녹음 시작
+     */
+    const startRecording = async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({
+                audio: {
+                    sampleRate: 16000,
+                    channelCount: 1,
+                }
+            })
+            const mediaRecorder = new MediaRecorder(stream, {
+                mimeType: AUDIO_CONFIG.MIME_TYPE || 'audio/webm;codecs=opus',
+                audioBitsPerSecond: 16000,
+            })
+
+            audioChunksRef.current = []
+
+            mediaRecorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    audioChunksRef.current.push(event.data)
+                }
+            }
+
+            mediaRecorder.onstop = async () => {
+                const audioBlob = new Blob(audioChunksRef.current, {
+                    type: AUDIO_CONFIG.MIME_TYPE,
+                })
+
+                // 용량 확인용 로그 WㅉWWWWWWWs
+                console.log(`[Recording] Final size: ${audioBlob.size} bytes`);
+
+                // Blob → Base64 변환
+                const reader = new FileReader()
+                reader.onloadend = () => {
+                    const base64 = reader.result.split(',')[1]
+                    onSendVoice?.(base64)
+                }
+                reader.readAsDataURL(audioBlob)
+
+                // 스트림 정리
+                stream.getTracks().forEach((track) => track.stop())
+            }
+
+            mediaRecorderRef.current = mediaRecorder
+            mediaRecorder.start()
+            setIsRecording(true)
+        } catch (error) {
+            console.error('Microphone access denied:', error)
+            alert(isKorean ? '마이크 접근이 거부되었습니다.' : 'Microphone access denied.')
+        }
+    }
+
+    /**
+     * 녹음 중지
+     */
+    const stopRecording = () => {
+        if (mediaRecorderRef.current && isRecording) {
+            mediaRecorderRef.current.stop()
+            setIsRecording(false)
+        }
+    }
+
+    /**
+     * 텍스트 전송
+     */
+    const handleSendText = () => {
+        console.log('[SpeakingInput] handleSendText called, message:', message)
+        if (message.trim().length < 2 || loading) {
+            console.log('[SpeakingInput] Blocked - length or loading')
+            return
+        }
+        console.log('[SpeakingInput] Calling onSendText')
+        onSendText?.(message.trim())
+        setMessage('')
+    }
+
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault()
+            handleSendText()
+        }
+    }
+
+    const levelOptions = Object.values(SPEAKING_LEVELS).map((value) => ({
+        value,
+        label: isKorean
+            ? SPEAKING_LEVEL_LABELS.ko[value]
+            : SPEAKING_LEVEL_LABELS.en[value],
+    }))
+
+    return (
+        <Box
+            sx={{
+                p: 2,
+                borderTop: '1px solid',
+                borderColor: 'divider',
+                backgroundColor: '#fff',
+            }}
+        >
+            <Box
+                sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1.5,
+                    maxWidth: 900,
+                    mx: 'auto',
+                }}
+            >
+                {/* Level Selector */}
+                <FormControl size="small" sx={{ minWidth: 90 }}>
+                    <Select
+                        value={level}
+                        onChange={(e) => onLevelChange?.(e.target.value)}
+                        disabled={loading || isRecording}
+                        sx={{
+                            '& .MuiSelect-select': {
+                                color: SPEAKING_LEVEL_COLORS[level],
+                                fontWeight: 600,
+                            },
+                        }}
+                    >
+                        {levelOptions.map((opt) => (
+                            <MenuItem key={opt.value} value={opt.value}>
+                                {opt.label}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+
+                {/* 녹음 버튼 */}
+                <Box sx={{ position: 'relative' }}>
+                    <Tooltip
+                        title={
+                            isRecording
+                                ? isKorean ? '녹음 중지' : 'Stop Recording'
+                                : isKorean ? '음성 녹음' : 'Voice Record'
+                        }
+                    >
+                        <IconButton
+                            onClick={isRecording ? stopRecording : startRecording}
+                            disabled={loading}
+                            sx={{
+                                backgroundColor: isRecording ? '#ef4444' : '#3b82f6',
+                                color: '#fff',
+                                '&:hover': {
+                                    backgroundColor: isRecording ? '#dc2626' : '#2563eb',
+                                },
+                                '&:disabled': {
+                                    backgroundColor: '#9ca3af',
+                                },
+                            }}
+                        >
+                            {isRecording ? <StopIcon /> : <MicIcon />}
+                        </IconButton>
+                    </Tooltip>
+
+                    {/* 녹음 시간 표시 */}
+                    {isRecording && (
+                        <Typography
+                            variant="caption"
+                            sx={{
+                                position: 'absolute',
+                                bottom: -20,
+                                left: '50%',
+                                transform: 'translateX(-50%)',
+                                color: '#ef4444',
+                                fontWeight: 600,
+                            }}
+                        >
+                            {recordingTime}s
+                        </Typography>
+                    )}
+                </Box>
+
+                {/* 텍스트 입력 */}
+                <TextField
+                    fullWidth
+                    size="small"
+                    placeholder={
+                        isKorean
+                            ? '영어로 말해보세요... (또는 타이핑)'
+                            : 'Speak in English... (or type)'
+                    }
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    disabled={loading || isRecording}
+                    sx={{
+                        '& .MuiOutlinedInput-root': {
+                            borderRadius: '20px',
+                        },
+                    }}
+                />
+
+                {/* 전송 버튼 */}
+                <Tooltip title={isKorean ? '전송' : 'Send'}>
+                    <span>
+                        <IconButton
+                            onClick={handleSendText}
+                            disabled={loading || isRecording || message.trim().length < 2}
+                            sx={{
+                                backgroundColor: '#10b981',
+                                color: '#fff',
+                                '&:hover': { backgroundColor: '#059669' },
+                                '&:disabled': { backgroundColor: '#d1d5db' },
+                            }}
+                        >
+                            {loading ? (
+                                <CircularProgress size={24} color="inherit" />
+                            ) : (
+                                <SendIcon />
+                            )}
+                        </IconButton>
+                    </span>
+                </Tooltip>
+
+                {/* 대화 초기화 버튼 */}
+                <Tooltip title={isKorean ? '대화 초기화' : 'Reset Conversation'}>
+                    <IconButton
+                        onClick={onReset}
+                        disabled={loading || isRecording}
+                        sx={{ color: '#6b7280' }}
+                    >
+                        <RefreshIcon />
+                    </IconButton>
+                </Tooltip>
+            </Box>
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/src/domains/speaking/constants/speakingConstants.js b/src/domains/speaking/constants/speakingConstants.js
new file mode 100644
index 0000000..99243f3
--- /dev/null
+++ b/src/domains/speaking/constants/speakingConstants.js
@@ -0,0 +1,31 @@
+export const SPEAKING_LEVELS = {
+    BEGINNER: 'BEGINNER',
+    INTERMEDIATE: 'INTERMEDIATE',
+    ADVANCED: 'ADVANCED',
+}
+
+export const SPEAKING_LEVEL_COLORS = {
+    [SPEAKING_LEVELS.BEGINNER]: '#22c55e',      // 초록
+    [SPEAKING_LEVELS.INTERMEDIATE]: '#f59e0b',  // 주황
+    [SPEAKING_LEVELS.ADVANCED]: '#ef4444',      // 빨강
+}
+
+export const SPEAKING_LEVEL_LABELS = {
+    ko: {
+        [SPEAKING_LEVELS.BEGINNER]: '초급',
+        [SPEAKING_LEVELS.INTERMEDIATE]: '중급',
+        [SPEAKING_LEVELS.ADVANCED]: '고급',
+    },
+    en: {
+        [SPEAKING_LEVELS.BEGINNER]: 'Beginner',
+        [SPEAKING_LEVELS.INTERMEDIATE]: 'Intermediate',
+        [SPEAKING_LEVELS.ADVANCED]: 'Advanced',
+    },
+}
+
+// 음성 녹음 설정
+export const AUDIO_CONFIG = {
+    MAX_DURATION: 60000,    // 최대 녹음 시간 (60초)
+    MIME_TYPE: 'audio/webm',
+    SAMPLE_RATE: 16000,
+}
\ No newline at end of file
diff --git a/src/domains/speaking/hooks/useSpeaking.js b/src/domains/speaking/hooks/useSpeaking.js
new file mode 100644
index 0000000..1702ab5
--- /dev/null
+++ b/src/domains/speaking/hooks/useSpeaking.js
@@ -0,0 +1,119 @@
+import { useCallback, useState } from 'react'
+import { speakingService } from '../services/speakingService'
+
+/**
+ * Speaking REST API 훅
+ */
+export function useSpeaking() {
+    const [isProcessing, setIsProcessing] = useState(false)
+    const [error, setError] = useState(null)
+    const [result, setResult] = useState(null)
+    const [sessionId, setSessionId] = useState(null)
+    const [currentLevel, setCurrentLevel] = useState('INTERMEDIATE')
+
+    /**
+     * 음성 전송
+     */
+    const sendVoice = useCallback(async (audioBase64) => {
+        setIsProcessing(true)
+        setResult(null)
+        setError(null)
+
+        try {
+            const response = await speakingService.chat({
+                sessionId,
+                audio: audioBase64,
+                level: currentLevel,
+            })
+
+            setSessionId(response.sessionId)
+            setResult(response)
+            return response
+        } catch (err) {
+            console.error('[useSpeaking] Voice error:', err)
+            setError(err.message || '처리 중 오류가 발생했습니다')
+            throw err
+        } finally {
+            setIsProcessing(false)
+        }
+    }, [sessionId, currentLevel])
+
+    /**
+     * 텍스트 전송
+     */
+    const sendText = useCallback(async (text) => {
+        setIsProcessing(true)
+        setResult(null)
+        setError(null)
+
+        try {
+            const response = await speakingService.chat({
+                sessionId,
+                text,
+                level: currentLevel,
+            })
+
+            setSessionId(response.sessionId)
+            setResult(response)
+            return response
+        } catch (err) {
+            console.error('[useSpeaking] Text error:', err)
+            setError(err.message || '처리 중 오류가 발생했습니다')
+            throw err
+        } finally {
+            setIsProcessing(false)
+        }
+    }, [sessionId, currentLevel])
+
+    /**
+     * 레벨 변경
+     */
+    const setLevel = useCallback((level) => {
+        setCurrentLevel(level)
+    }, [])
+
+    /**
+     * 대화 초기화
+     */
+    const resetConversation = useCallback(async () => {
+        if (!sessionId) {
+            // 세션이 없으면 로컬 상태만 초기화
+            setResult(null)
+            setError(null)
+            return
+        }
+
+        try {
+            await speakingService.reset(sessionId)
+        } catch (err) {
+            console.error('[useSpeaking] Reset error:', err)
+        } finally {
+            // 에러가 나도 로컬 상태는 초기화
+            setSessionId(null)
+            setResult(null)
+            setError(null)
+        }
+    }, [sessionId])
+
+    /**
+     * 새 세션 시작
+     */
+    const startNewSession = useCallback(() => {
+        setSessionId(null)
+        setResult(null)
+        setError(null)
+    }, [])
+
+    return {
+        isProcessing,
+        error,
+        result,
+        sessionId,
+        currentLevel,
+        sendVoice,
+        sendText,
+        setLevel,
+        resetConversation,
+        startNewSession,
+    }
+}
\ No newline at end of file
diff --git a/src/domains/speaking/index.js b/src/domains/speaking/index.js
new file mode 100644
index 0000000..342097d
--- /dev/null
+++ b/src/domains/speaking/index.js
@@ -0,0 +1,15 @@
+// Pages
+export { default as SpeakingPage } from './pages/SpeakingPage'
+
+// Components
+export { default as SpeakingChatMessage } from './components/SpeakingChatMessage'
+export { default as SpeakingInput } from './components/SpeakingInput'
+
+// Hooks
+export { useSpeaking } from './hooks/useSpeaking'
+
+// Services
+export { speakingService } from './services/speakingService'
+
+// Constants
+export * from './constants/speakingConstants'
\ No newline at end of file
diff --git a/src/domains/speaking/pages/SpeakingPage.jsx b/src/domains/speaking/pages/SpeakingPage.jsx
new file mode 100644
index 0000000..1c481f7
--- /dev/null
+++ b/src/domains/speaking/pages/SpeakingPage.jsx
@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Alert, Box, Typography } from '@mui/material'
+import { SmartToy as AiIcon } from '@mui/icons-material'
+import { useSettings } from '../../../contexts/SettingsContext' // 경로는 프로젝트 구조에 맞게 확인 필요
+import SpeakingChatMessage from '../components/SpeakingChatMessage'
+import SpeakingInput from '../components/SpeakingInput'
+import { useSpeaking } from '../hooks/useSpeaking'
+import { SPEAKING_LEVELS } from '../constants/speakingConstants'
+
+export default function SpeakingPage() {
+    const { isKorean } = useSettings()
+
+    const [messages, setMessages] = useState([])
+    const [level, setLevel] = useState(SPEAKING_LEVELS.INTERMEDIATE)
+    const [error, setError] = useState(null)
+
+    const messagesEndRef = useRef(null)
+
+    // REST API 훅 사용 (훅 내부에서 speakingService를 호출하므로 안전함)
+    const {
+        isProcessing,
+        result,
+        error: apiError,
+        sendVoice,
+        sendText,
+        setLevel: setApiLevel,
+        resetConversation,
+    } = useSpeaking()
+
+    // 스크롤 자동 이동
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+    }, [messages, isProcessing]) // isProcessing 추가: 답변 준비 중일 때도 스크롤 이동
+
+    // 결과 처리 (서버 응답이 오면 메시지 목록에 추가)
+    useEffect(() => {
+        if (result) {
+            // 1. 사용자 메시지 추가 (STT 결과가 있을 경우)
+            if (result.userTranscript) {
+                const userMessage = {
+                    id: `user-${Date.now()}`,
+                    content: result.userTranscript,
+                    userTranscript: result.userTranscript,
+                    confidence: result.confidence,
+                    isUser: true,
+                    createdAt: new Date().toISOString(),
+                }
+                setMessages((prev) => [...prev, userMessage])
+            }
+
+            // 2. AI 응답 메시지 추가
+            if (result.aiText) {
+                const aiMessage = {
+                    id: `ai-${Date.now()}`,
+                    content: result.aiText,
+                    aiText: result.aiText,
+                    aiAudioUrl: result.aiAudioUrl,
+                    isUser: false,
+                    createdAt: new Date().toISOString(),
+                }
+                setMessages((prev) => [...prev, aiMessage])
+            }
+        }
+    }, [result])
+
+    // 에러 처리
+    useEffect(() => {
+        if (apiError) {
+            setError(apiError)
+        }
+    }, [apiError])
+
+    /**
+     * 음성 전송
+     */
+    const handleSendVoice = useCallback(async (audioBase64) => {
+        setError(null)
+        try {
+            await sendVoice(audioBase64)
+        } catch (err) {
+            // 에러는 훅 상태(apiError)를 통해 처리됨
+        }
+    }, [sendVoice])
+
+    /**
+     * 텍스트 전송
+     */
+    const handleSendText = useCallback(async (text) => {
+        setError(null)
+        try {
+            await sendText(text)
+        } catch (err) {
+            // 에러는 훅 상태(apiError)를 통해 처리됨
+        }
+    }, [sendText])
+
+    /**
+     * 레벨 변경
+     */
+    const handleLevelChange = useCallback((newLevel) => {
+        setLevel(newLevel)
+        setApiLevel(newLevel)
+    }, [setApiLevel])
+
+    /**
+     * 대화 초기화
+     */
+    const handleReset = useCallback(() => {
+        setMessages([])
+        resetConversation()
+    }, [resetConversation])
+
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+            {/* 헤더 */}
+            <Box
+                sx={{
+                    p: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'divider',
+                    backgroundColor: '#fff',
+                }}
+            >
+                <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                    {isKorean ? 'AI와 대화하기' : 'Talk with AI'}
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                    {isKorean
+                        ? 'Amy와 영어로 자유롭게 대화해보세요'
+                        : 'Have a free conversation with Amy in English!'}
+                </Typography>
+            </Box>
+
+            {/* 에러 알림 */}
+            {error && (
+                <Alert severity="error" onClose={() => setError(null)} sx={{ m: 2 }}>
+                    {error}
+                </Alert>
+            )}
+
+            {/* 메시지 영역 */}
+            <Box
+                sx={{
+                    flex: 1,
+                    overflow: 'auto',
+                    p: 2,
+                    backgroundColor: '#fafafa',
+                }}
+            >
+                {messages.length === 0 ? (
+                    // 빈 상태 (안내 메시지)
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '100%',
+                            color: '#9ca3af',
+                        }}
+                    >
+                        <AiIcon sx={{ fontSize: 64, mb: 2, opacity: 0.5 }} />
+                        <Typography variant="h6" sx={{ mb: 1 }}>
+                            {isKorean ? '안녕하세요! 저는 Amy예요.' : "Hi! I'm Amy."}
+                        </Typography>
+                        <Typography variant="body2" sx={{ textAlign: 'center', maxWidth: 400 }}>
+                            {isKorean
+                                ? '마이크 버튼을 눌러 영어로 말해보세요. 제가 대화 상대가 되어드릴게요!'
+                                : 'Press the microphone button and speak in English. I\'ll be your conversation partner!'}
+                        </Typography>
+
+                        {/* 팁 박스 */}
+                        <Box sx={{ mt: 3, p: 2, backgroundColor: '#fff', borderRadius: 2, boxShadow: 1 }}>
+                            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1, fontWeight: 'bold' }}>
+                                {isKorean ? '💡 대화 예시:' : '💡 Example:'}
+                            </Typography>
+                            <Typography variant="body2" sx={{ mb: 0.5 }}>
+                                "Hello! How are you today?"
+                            </Typography>
+                            <Typography variant="body2">
+                                "What did you do last weekend?"
+                            </Typography>
+                        </Box>
+                    </Box>
+                ) : (
+                    // 메시지 목록
+                    <>
+                        {messages.map((msg) => (
+                            <SpeakingChatMessage
+                                key={msg.id}
+                                message={msg}
+                                isUser={msg.isUser}
+                            />
+                        ))}
+
+                        {/* 처리 중 표시 (로딩 인디케이터) */}
+                        {isProcessing && (
+                            <Box sx={{ display: 'flex', gap: 1, ml: 2, mt: 2, color: '#6b7280', alignItems: 'center' }}>
+                                <AiIcon fontSize="small" />
+                                <Typography variant="body2" sx={{ fontStyle: 'italic' }}>
+                                    {isKorean ? 'Amy가 답변을 생각하고 있어요...' : 'Amy is thinking...'}
+                                </Typography>
+                            </Box>
+                        )}
+
+                        <div ref={messagesEndRef} />
+                    </>
+                )}
+            </Box>
+
+            {/* 입력 영역 (컴포넌트 재사용) */}
+            <SpeakingInput
+                onSendVoice={handleSendVoice}
+                onSendText={handleSendText}
+                onLevelChange={handleLevelChange}
+                onReset={handleReset}
+                loading={isProcessing}
+                level={level}
+            />
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/src/domains/speaking/services/speakingApi.js b/src/domains/speaking/services/speakingApi.js
new file mode 100644
index 0000000..4d18b1d
--- /dev/null
+++ b/src/domains/speaking/services/speakingApi.js
@@ -0,0 +1,68 @@
+/**
+ * Speaking REST API Service
+ */
+
+const API_BASE_URL = import.meta.env.VITE_API_URL
+
+export const speakingApi = {
+    /**
+     * 대화 요청 (음성 또는 텍스트)
+     */
+    async chat({ sessionId, audio, text, level = 'INTERMEDIATE' }) {
+        const token = localStorage.getItem('accessToken')
+
+        // sessionId가 null/undefined면 body에서 제외
+        const requestBody = {
+            ...(sessionId && { sessionId }),  // null이 아닐 때만 포함
+            ...(audio && { audio }),
+            ...(text && { text }),
+            level,
+        }
+
+        console.log('[speakingApi] Request body:', {
+            hasSessionId: !!sessionId,
+            hasAudio: !!audio,
+            hasText: !!text,
+            level
+        })
+
+        const response = await fetch(`${API_BASE_URL}/api/speaking/chat`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`,
+            },
+            body: JSON.stringify(requestBody),
+        })
+
+        if (!response.ok) {
+            const error = await response.json()
+            throw new Error(error.error || '요청 처리에 실패했습니다')
+        }
+
+        return response.json()
+    },
+
+    /**
+     * 대화 초기화
+     */
+    async reset(sessionId) {
+        const token = localStorage.getItem('accessToken')
+
+        const response = await fetch(`${API_BASE_URL}/api/speaking/reset`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`,
+            },
+            body: JSON.stringify({ sessionId }),
+        })
+
+        if (!response.ok) {
+            const error = await response.json()
+            throw new Error(error.error || '초기화에 실패했습니다')
+        }
+
+        return response.json()
+    },
+}
\ No newline at end of file
diff --git a/src/domains/speaking/services/speakingService.js b/src/domains/speaking/services/speakingService.js
new file mode 100644
index 0000000..180cdbe
--- /dev/null
+++ b/src/domains/speaking/services/speakingService.js
@@ -0,0 +1,29 @@
+import speakingApi from '../../../api/speakingApi'
+
+export const speakingService = {
+    /**
+     * 대화 요청 (음성 또는 텍스트)
+     * POST /speaking/chat
+     */
+    async chat({ sessionId, audio, text, level = 'INTERMEDIATE' }) {
+        // null/undefined인 필드는 요청 바디에서 제외
+        const requestBody = {
+            ...(sessionId && { sessionId }),
+            ...(audio && { audio }),
+            ...(text && { text }),
+            level,
+        }
+
+        console.log('[speakingService] Request body:', requestBody)
+
+        return await speakingApi.post('/speaking/chat', requestBody)
+    },
+
+    /**
+     * 대화 초기화
+     * POST /speaking/reset
+     */
+    async reset(sessionId) {
+        return await speakingApi.post('/speaking/reset', { sessionId })
+    },
+}
\ No newline at end of file