[FEAT] 단어장 (Word List) 기능 구현 (#62)

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/api/vocabApi.js

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

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/contexts/SettingsContext.jsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useState, useCallback, useEffect } from 'react'
+
+const SettingsContext = createContext(null)
+
+const STORAGE_KEY = 'app_settings'
+
+const defaultSettings = {
+  ttsVoice: 'FEMALE', // MALE | FEMALE
+}
+
+export const SettingsProvider = ({ children }) => {
+  const [settings, setSettings] = useState(() => {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    return stored ? { ...defaultSettings, ...JSON.parse(stored) } : defaultSettings
+  })
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
+  }, [settings])
+
+  const updateSettings = useCallback((updates) => {
+    setSettings((prev) => ({ ...prev, ...updates }))
+  }, [])
+
+  const setTtsVoice = useCallback((voice) => {
+    updateSettings({ ttsVoice: voice })
+  }, [updateSettings])
+
+  return (
+    <SettingsContext.Provider value={{ settings, updateSettings, setTtsVoice }}>
+      {children}
+    </SettingsContext.Provider>
+  )
+}
+
+export const useSettings = () => {
+  const context = useContext(SettingsContext)
+  if (!context) {
+    throw new Error('useSettings must be used within a SettingsProvider')
+  }
+  return context
+}

src/contexts/ThemeContext.jsx

@@ -0,0 +1,79 @@
+import { createContext, useContext, useState, useEffect, useMemo } from 'react'
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles'
+import { CssBaseline } from '@mui/material'
+import { lightTheme, darkTheme } from '../theme/theme'
+
+const ThemeContext = createContext({
+  mode: 'light',
+  toggleTheme: () => {},
+  setMode: () => {},
+})
+
+export const useThemeMode = () => {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useThemeMode must be used within ThemeProvider')
+  }
+  return context
+}
+
+export const ThemeProvider = ({ children }) => {
+  // localStorage에서 테마 모드 불러오기 (시스템 설정 기본값)
+  const [mode, setMode] = useState(() => {
+    const savedMode = localStorage.getItem('themeMode')
+    if (savedMode) return savedMode
+
+    // 시스템 다크모드 감지
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+    return 'light'
+  })
+
+  // 시스템 테마 변경 감지
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = (e) => {
+      const savedMode = localStorage.getItem('themeMode')
+      if (!savedMode) {
+        setMode(e.matches ? 'dark' : 'light')
+      }
+    }
+
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [])
+
+  // 테마 변경 시 localStorage 저장
+  useEffect(() => {
+    localStorage.setItem('themeMode', mode)
+    // body 클래스 추가 (CSS 변수 등에서 활용)
+    document.body.classList.remove('light-mode', 'dark-mode')
+    document.body.classList.add(`${mode}-mode`)
+  }, [mode])
+
+  const toggleTheme = () => {
+    setMode((prev) => (prev === 'light' ? 'dark' : 'light'))
+  }
+
+  const theme = useMemo(() => {
+    return mode === 'dark' ? darkTheme : lightTheme
+  }, [mode])
+
+  const contextValue = useMemo(() => ({
+    mode,
+    toggleTheme,
+    setMode,
+  }), [mode])
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      <MuiThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </MuiThemeProvider>
+    </ThemeContext.Provider>
+  )
+}
+
+export default ThemeContext

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 (messageId, roomId, voice = 'FEMALE') => {
+    return chatApi.post('/chat/voice/synthesize', { messageId, roomId, voice })
+  },
+}
+
+export { TEMP_USER_ID }