added basic localization to theme toggle button

src/components/Navbar/ThemeToggleButton.tsx

@@ -1,4 +1,5 @@
-import styled, { ThemeConsumer } from "styled-components"
+import { useContext } from "react"
+import styled from "styled-components"
 import { isMobile } from "react-device-detect"
 import ReactTooltip from "react-tooltip"
 
@@ -6,6 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"
 
 import theming from "../../styles/theming"
+import { ActionsEnum, globalContext } from "../../globalContext"
 
 const StyledThemeButton = styled.div`
 	${theming.styles.navbarButtonStyle}
@@ -17,26 +19,35 @@ const StyledThemeButton = styled.div`
 `
 
 const ThemeToggleButton = () => {
+	const { globalState, dispatch } = useContext(globalContext)
+	const theme = globalState.theme
+
 	return (
-		<ThemeConsumer>
-			{({ currentTheme, setTheme }) => (
 		<>
 			<StyledThemeButton
 				data-tip
 				data-for="theme"
-						onClick={() => setTheme(currentTheme === "dark" ? "light" : "dark")}
+				onClick={() =>
+					dispatch({
+						type: ActionsEnum.UPDATE_THEME,
+						payload: theme === "dark" ? "light" : "dark",
+					})
+				}
 			>
-						{currentTheme == "dark" && <FontAwesomeIcon icon={faMoon} />}
-						{currentTheme == "light" && <FontAwesomeIcon icon={faSun} />}
+				{theme == "dark" && <FontAwesomeIcon icon={faMoon} />}
+				{theme == "light" && <FontAwesomeIcon icon={faSun} />}
 			</StyledThemeButton>
+
 			{!isMobile && (
 				<ReactTooltip id="theme" type="dark" effect="solid">
-							<span>Using {currentTheme} theme</span>
+					{globalState.locale == "en" ? (
+						<span>Using {theme} theme</span>
+					) : (
+						<span>{theme == "dark" ? "어두운" : "밝은"} 테마 사용중</span>
+					)}
 				</ReactTooltip>
 			)}
 		</>
-			)}
-		</ThemeConsumer>
 	)
 }