added localizatioon to search page

src/pages/Search/TagSelect.tsx

@@ -1,10 +1,13 @@
-import styled, { ThemeConsumer } from "styled-components"
+import { useContext } from "react"
+import styled from "styled-components"
 import Select from "react-select"
 
 import theming from "../../styles/theming"
 
 import _map from "../../data/map.json"
-import { Map } from "../../../types/types"
+import { globalContext } from "../../globalContext"
+
+import type { Map } from "../../../types/types"
 
 const map: Map = _map
 
@@ -29,20 +32,21 @@ interface TagSelectProps {
 }
 
 const TagSelect = (props: TagSelectProps) => {
+	const { globalState } = useContext(globalContext)
+	const locale = globalState.locale
+	const currentTheme = globalState.theme
 	const { onChange, defaultValue: selectedTags } = props
 
 	return (
 		<StyledReactTagsContainer>
-			<ThemeConsumer>
-				{(currentTheme) => (
 			<Select
-						placeholder="Select tags..."
+				placeholder={locale == "en" ? "Select tags..." : "태그를 선택하세요"}
 				theme={(theme) => ({
 					...theme,
 					colors: {
 						...theme.colors,
 						neutral0: theming
-									.theme(currentTheme.currentTheme, {
+							.theme(currentTheme, {
 								light: theming.light.backgroundColor1,
 								dark: theming.dark.backgroundColor1,
 							})
@@ -65,13 +69,13 @@ const TagSelect = (props: TagSelectProps) => {
 					option: (styles) => ({
 						...styles,
 						backgroundColor: theming
-									.theme(currentTheme.currentTheme, {
+							.theme(currentTheme, {
 								light: theming.light.backgroundColor1,
 								dark: theming.dark.backgroundColor1,
 							})
 							.toString(),
 						color: theming
-									.theme(currentTheme.currentTheme, {
+							.theme(currentTheme, {
 								light: theming.light.color1,
 								dark: theming.dark.color1,
 							})
@@ -80,7 +84,7 @@ const TagSelect = (props: TagSelectProps) => {
 						padding: 10,
 						":hover": {
 							backgroundColor: theming
-										.theme(currentTheme.currentTheme, {
+								.theme(currentTheme, {
 									light: theming.light.backgroundColor0,
 									dark: theming.dark.backgroundColor0,
 								})
@@ -90,12 +94,12 @@ const TagSelect = (props: TagSelectProps) => {
 					control: (styles) => ({
 						...styles,
 						backgroundColor: theming
-									.theme(currentTheme.currentTheme, {
+							.theme(currentTheme, {
 								light: theming.light.backgroundColor1,
 								dark: theming.dark.backgroundColor1,
 							})
 							.toString(),
-								border: theming.theme(currentTheme.currentTheme, {
+						border: theming.theme(currentTheme, {
 							light: "1px solid #ccc",
 							dark: "1px solid #555",
 						}),
@@ -125,8 +129,6 @@ const TagSelect = (props: TagSelectProps) => {
 				options={options}
 				isMulti
 			/>
-				)}
-			</ThemeConsumer>
 		</StyledReactTagsContainer>
 	)
 }

src/pages/Search/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 
-import { useEffect, useState } from "react"
+import { useContext, useEffect, useState } from "react"
 import styled from "styled-components"
 import { useSearchParams } from "react-router-dom"
 import { Helmet } from "react-helmet-async"
@@ -19,12 +19,13 @@ import MainContent from "../../components/MainContent"
 import SearchBar from "./SearchBar"
 import TagSelect, { TagsData } from "./TagSelect"
 import { ClearDateButton, DateRangeControl, StyledDateRange } from "./DateRange"
-
+import { globalContext } from "../../globalContext"
-import { Map } from "../../../types/types"
 
 import "react-date-range/dist/styles.css"
 import "react-date-range/dist/theme/default.css"
 
+import type { Map } from "../../../types/types"
+
 const map: Map = _map
 
 const searchIndex = elasticlunr.Index.load(searchData as never)
@@ -98,6 +99,9 @@ function isSelectedTagsInPost(selectedTags?: TagsData[], postTags?: string[]) {
 }
 
 const Search = () => {
+	const { globalState } = useContext(globalContext)
+	const locale = globalState.locale
+
 	// URL search parameters
 	const [URLSearchParams, setURLSearchParams] = useSearchParams()
 
@@ -219,11 +223,11 @@ const Search = () => {
 	return (
 		<>
 			<Helmet>
-				<title>pomp | Search</title>
+				<title>pomp | {locale == "en" ? "Search" : "검색"}</title>
 			</Helmet>
 
 			<StyledSearch>
-				<h1>Search</h1>
+				<h1>{locale == "en" ? "Search" : "검색"}</h1>
 
 				<StyledSearchContainer>
 					<DateRangeControl>
@@ -232,7 +236,7 @@ const Search = () => {
 								setDateRange(defaultDateRange)
 							}}
 						>
-							Reset range
+							{locale == "en" ? "Reset date range" : "날짜 범위 초기화"}
 						</ClearDateButton>
 						<StyledDateRange
 							editableDateInputs
@@ -253,13 +257,15 @@ const Search = () => {
 							type="search"
 							value={searchInput}
 							autoComplete="off"
-							placeholder="Search"
+							placeholder={locale == "en" ? "Search" : "검색"}
 							onChange={(event) => setSearchInput(event.target.value)}
 							onKeyPress={(event) => {
 								event.key === "Enter" && searchInput && doSearch()
 							}}
 						/>
-						{postCards.length} {postCards.length > 1 ? "results" : "result"}
+						{locale == "kr" && "결과: "}
+						{postCards.length}{" "}
+						{locale == "en" && (postCards.length > 1 ? "results" : "result")}
 						<TagSelect
 							defaultValue={selectedTags}
 							onChange={(newValue) => {