[FEAT] 채팅방 API 연동 및 채팅 UI 구현

src/App.jsx

@@ -12,6 +12,9 @@ import {
 } from '@mui/icons-material'
 import MainLayout from './layouts/MainLayout'
 import FreetalkPeoplePage from './domains/freetalk/pages/FreetalkPeoplePage'
+import ChatRoomPage from './domains/freetalk/pages/ChatRoomPage'
+import ChatRoomModal from './domains/freetalk/components/ChatRoomModal'
+import { useChat } from './contexts/ChatContext'
 
 // 임시 대시보드 페이지
 function Dashboard() {
@@ -269,23 +272,42 @@ function NotFound() {
 }
 
 function App() {
+  const { activeRoom, closeChatRoom } = useChat()
+
+  const handleRefreshRooms = () => {
+    // 채팅방 퇴장 후 목록 새로고침 (페이지에서 처리)
+  }
+
   return (
-    <Routes>
-      {/* MainLayout 적용 라우트 */}
-      <Route element={<MainLayout />}>
-        <Route path="/" element={<Dashboard />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-        <Route path="/opic" element={<OpicPage />} />
-        <Route path="/freetalk/people" element={<FreetalkPeoplePage />} />
-        <Route path="/freetalk/ai" element={<FreetalkAiPage />} />
-        <Route path="/writing" element={<WritingPage />} />
-        <Route path="/reports" element={<ReportsPage />} />
-        <Route path="/settings" element={<SettingsPage />} />
-      </Route>
+    <>
+      <Routes>
+        {/* 채팅방 페이지 (별도 레이아웃) */}
+        <Route path="/freetalk/people/room/:roomId" element={<ChatRoomPage />} />
+
+        {/* MainLayout 적용 라우트 */}
+        <Route element={<MainLayout />}>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/opic" element={<OpicPage />} />
+          <Route path="/freetalk/people" element={<FreetalkPeoplePage />} />
+          <Route path="/freetalk/ai" element={<FreetalkAiPage />} />
+          <Route path="/writing" element={<WritingPage />} />
+          <Route path="/reports" element={<ReportsPage />} />
+          <Route path="/settings" element={<SettingsPage />} />
+        </Route>
+
+        {/* 404 */}
+        <Route path="*" element={<NotFound />} />
+      </Routes>
 
-      {/* 404 */}
-      <Route path="*" element={<NotFound />} />
-    </Routes>
+      {/* 전역 채팅 모달 */}
+      <ChatRoomModal
+        open={!!activeRoom}
+        onClose={closeChatRoom}
+        room={activeRoom}
+        onLeave={handleRefreshRooms}
+      />
+    </>
   )
 }
 

src/api/chatApi.js

@@ -0,0 +1,30 @@
+import axios from 'axios'
+
+const chatApi = axios.create({
+  baseURL: import.meta.env.VITE_CHAT_API_URL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+// Request interceptor
+chatApi.interceptors.request.use(
+  (config) => {
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// Response interceptor
+chatApi.interceptors.response.use(
+  (response) => response.data,
+  (error) => {
+    console.error('Chat API Error:', error.response?.data || error.message)
+    return Promise.reject(error)
+  }
+)
+
+export default chatApi

src/contexts/ChatContext.jsx

@@ -0,0 +1,29 @@
+import { createContext, useContext, useState, useCallback } from 'react'
+
+const ChatContext = createContext(null)
+
+export const ChatProvider = ({ children }) => {
+  const [activeRoom, setActiveRoom] = useState(null)
+
+  const openChatRoom = useCallback((room) => {
+    setActiveRoom(room)
+  }, [])
+
+  const closeChatRoom = useCallback(() => {
+    setActiveRoom(null)
+  }, [])
+
+  return (
+    <ChatContext.Provider value={{ activeRoom, openChatRoom, closeChatRoom }}>
+      {children}
+    </ChatContext.Provider>
+  )
+}
+
+export const useChat = () => {
+  const context = useContext(ChatContext)
+  if (!context) {
+    throw new Error('useChat must be used within a ChatProvider')
+  }
+  return context
+}

src/domains/chat/services/chatService.js

@@ -0,0 +1,83 @@
+import chatApi from '../../../api/chatApi'
+
+const TEMP_USER_ID = import.meta.env.VITE_TEMP_USER_ID || 'user1'
+
+// 채팅방 API
+export const chatRoomService = {
+  // 채팅방 생성
+  create: async (data) => {
+    return chatApi.post('/chat/rooms', {
+      ...data,
+      createdBy: TEMP_USER_ID,
+    })
+  },
+
+  // 채팅방 목록 조회
+  getList: async (params = {}) => {
+    const { limit = 10, level, joined, cursor } = params
+    const queryParams = new URLSearchParams()
+
+    queryParams.append('limit', limit)
+    if (level) queryParams.append('level', level)
+    if (joined) {
+      queryParams.append('joined', 'true')
+      queryParams.append('userId', TEMP_USER_ID)
+    }
+    if (cursor) queryParams.append('cursor', cursor)
+
+    return chatApi.get(`/chat/rooms?${queryParams.toString()}`)
+  },
+
+  // 채팅방 상세 조회
+  getDetail: async (roomId) => {
+    return chatApi.get(`/chat/rooms/${roomId}`)
+  },
+
+  // 채팅방 입장
+  join: async (roomId, password) => {
+    return chatApi.post(`/chat/rooms/${roomId}/join`, {
+      userId: TEMP_USER_ID,
+      ...(password && { password }),
+    })
+  },
+
+  // 채팅방 퇴장
+  leave: async (roomId) => {
+    return chatApi.post(`/chat/rooms/${roomId}/leave`, {
+      userId: TEMP_USER_ID,
+    })
+  },
+}
+
+// 메시지 API
+export const messageService = {
+  // 메시지 전송
+  send: async (roomId, content, messageType = 'TEXT') => {
+    return chatApi.post(`/chat/rooms/${roomId}/messages`, {
+      userId: TEMP_USER_ID,
+      content,
+      messageType,
+    })
+  },
+
+  // 메시지 목록 조회
+  getList: async (roomId, params = {}) => {
+    const { limit = 20, cursor } = params
+    const queryParams = new URLSearchParams()
+
+    queryParams.append('limit', limit)
+    if (cursor) queryParams.append('cursor', cursor)
+
+    return chatApi.get(`/chat/rooms/${roomId}/messages?${queryParams.toString()}`)
+  },
+}
+
+// 음성 API
+export const voiceService = {
+  // TTS 변환
+  synthesize: async (text) => {
+    return chatApi.post('/chat/voice/synthesize', { text })
+  },
+}
+
+export { TEMP_USER_ID }