[FEAT] 단어장 학습 통계 및 UI/UX 개선 (#57, #63)

src/contexts/SettingsContext.jsx

@@ -1,11 +1,13 @@
-import { createContext, useContext, useState, useCallback, useEffect } from 'react'
+import { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react'
+import { translations, LANGUAGES } from '../i18n/translations'
 
 const SettingsContext = createContext(null)
 
 const STORAGE_KEY = 'app_settings'
 
 const defaultSettings = {
   ttsVoice: 'FEMALE', // MALE | FEMALE
+  language: LANGUAGES.KO, // ko | en
 }
 
 export const SettingsProvider = ({ children }) => {
@@ -26,8 +28,39 @@ export const SettingsProvider = ({ children }) => {
     updateSettings({ ttsVoice: voice })
   }, [updateSettings])
 
+  const setLanguage = useCallback((lang) => {
+    updateSettings({ language: lang })
+  }, [updateSettings])
+
+  // Translation function
+  const t = useCallback((key) => {
+    const keys = key.split('.')
+    let value = translations[settings.language]
+
+    for (const k of keys) {
+      if (value && typeof value === 'object') {
+        value = value[k]
+      } else {
+        return key // Return key if translation not found
+      }
+    }
+
+    return value || key
+  }, [settings.language])
+
+  const value = useMemo(() => ({
+    settings,
+    updateSettings,
+    setTtsVoice,
+    setLanguage,
+    t,
+    language: settings.language,
+    isKorean: settings.language === LANGUAGES.KO,
+    isEnglish: settings.language === LANGUAGES.EN,
+  }), [settings, updateSettings, setTtsVoice, setLanguage, t])
+
   return (
-    <SettingsContext.Provider value={{ settings, updateSettings, setTtsVoice }}>
+    <SettingsContext.Provider value={value}>
       {children}
     </SettingsContext.Provider>
   )
@@ -40,3 +73,9 @@ export const useSettings = () => {
   }
   return context
 }
+
+// Convenience hook for translations
+export const useTranslation = () => {
+  const { t, language, isKorean, isEnglish } = useSettings()
+  return { t, language, isKorean, isEnglish }
+}