From 0bdfcd176882ba8c112b149fa3ad900fc888b69e Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sat, 26 Mar 2022 21:34:40 +0900
Subject: [PATCH] added localizatioon to search page

---
 src/pages/Search/TagSelect.tsx | 194 +++++++++++++++++----------------
 src/pages/Search/index.tsx     |  22 ++--
 2 files changed, 112 insertions(+), 104 deletions(-)

diff --git a/src/pages/Search/TagSelect.tsx b/src/pages/Search/TagSelect.tsx
index cef8e8d..d4a8daa 100644
--- a/src/pages/Search/TagSelect.tsx
+++ b/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,104 +32,103 @@ 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..."
-						theme={(theme) => ({
-							...theme,
-							colors: {
-								...theme.colors,
-								neutral0: theming
-									.theme(currentTheme.currentTheme, {
-										light: theming.light.backgroundColor1,
-										dark: theming.dark.backgroundColor1,
-									})
-									.toString(),
-								neutral5: "hsl(0, 0%, 20%)",
-								neutral10: "hsl(0, 0%, 30%)",
-								neutral20: "hsl(0, 0%, 40%)",
-								neutral30: "hsl(0, 0%, 50%)",
-								neutral40: "hsl(0, 0%, 60%)",
-								neutral50: "hsl(0, 0%, 70%)",
-								neutral60: "hsl(0, 0%, 80%)",
-								neutral70: "hsl(0, 0%, 90%)",
-								neutral80: "hsl(0, 0%, 95%)",
-								neutral90: "hsl(0, 0%, 100%)",
-								primary25: "hotpink",
-								primary: "black",
-							},
-						})}
-						styles={{
-							option: (styles) => ({
-								...styles,
-								backgroundColor: theming
-									.theme(currentTheme.currentTheme, {
-										light: theming.light.backgroundColor1,
-										dark: theming.dark.backgroundColor1,
-									})
-									.toString(),
-								color: theming
-									.theme(currentTheme.currentTheme, {
-										light: theming.light.color1,
-										dark: theming.dark.color1,
-									})
-									.toString(),
-								cursor: "pointer",
-								padding: 10,
-								":hover": {
-									backgroundColor: theming
-										.theme(currentTheme.currentTheme, {
-											light: theming.light.backgroundColor0,
-											dark: theming.dark.backgroundColor0,
-										})
-										.toString(),
-								},
-							}),
-							control: (styles) => ({
-								...styles,
-								backgroundColor: theming
-									.theme(currentTheme.currentTheme, {
-										light: theming.light.backgroundColor1,
-										dark: theming.dark.backgroundColor1,
-									})
-									.toString(),
-								border: theming.theme(currentTheme.currentTheme, {
-									light: "1px solid #ccc",
-									dark: "1px solid #555",
-								}),
-							}),
-							multiValue: (styles) => ({
-								...styles,
-								color: "white",
-								backgroundColor: theming.light.linkColor,
-								borderRadius: "5px",
-							}),
-							multiValueLabel: (styles) => ({
-								...styles,
-								marginLeft: "0.2rem",
-								marginRight: "0.2rem",
-							}),
-							multiValueRemove: (styles) => ({
-								...styles,
-								marginLeft: "0.2rem",
-								":hover": {
-									backgroundColor: "white",
-									color: theming.light.linkColor,
-								},
-							}),
-						}}
-						defaultValue={selectedTags}
-						onChange={onChange}
-						options={options}
-						isMulti
-					/>
-				)}
-			</ThemeConsumer>
+			<Select
+				placeholder={locale == "en" ? "Select tags..." : "태그를 선택하세요"}
+				theme={(theme) => ({
+					...theme,
+					colors: {
+						...theme.colors,
+						neutral0: theming
+							.theme(currentTheme, {
+								light: theming.light.backgroundColor1,
+								dark: theming.dark.backgroundColor1,
+							})
+							.toString(),
+						neutral5: "hsl(0, 0%, 20%)",
+						neutral10: "hsl(0, 0%, 30%)",
+						neutral20: "hsl(0, 0%, 40%)",
+						neutral30: "hsl(0, 0%, 50%)",
+						neutral40: "hsl(0, 0%, 60%)",
+						neutral50: "hsl(0, 0%, 70%)",
+						neutral60: "hsl(0, 0%, 80%)",
+						neutral70: "hsl(0, 0%, 90%)",
+						neutral80: "hsl(0, 0%, 95%)",
+						neutral90: "hsl(0, 0%, 100%)",
+						primary25: "hotpink",
+						primary: "black",
+					},
+				})}
+				styles={{
+					option: (styles) => ({
+						...styles,
+						backgroundColor: theming
+							.theme(currentTheme, {
+								light: theming.light.backgroundColor1,
+								dark: theming.dark.backgroundColor1,
+							})
+							.toString(),
+						color: theming
+							.theme(currentTheme, {
+								light: theming.light.color1,
+								dark: theming.dark.color1,
+							})
+							.toString(),
+						cursor: "pointer",
+						padding: 10,
+						":hover": {
+							backgroundColor: theming
+								.theme(currentTheme, {
+									light: theming.light.backgroundColor0,
+									dark: theming.dark.backgroundColor0,
+								})
+								.toString(),
+						},
+					}),
+					control: (styles) => ({
+						...styles,
+						backgroundColor: theming
+							.theme(currentTheme, {
+								light: theming.light.backgroundColor1,
+								dark: theming.dark.backgroundColor1,
+							})
+							.toString(),
+						border: theming.theme(currentTheme, {
+							light: "1px solid #ccc",
+							dark: "1px solid #555",
+						}),
+					}),
+					multiValue: (styles) => ({
+						...styles,
+						color: "white",
+						backgroundColor: theming.light.linkColor,
+						borderRadius: "5px",
+					}),
+					multiValueLabel: (styles) => ({
+						...styles,
+						marginLeft: "0.2rem",
+						marginRight: "0.2rem",
+					}),
+					multiValueRemove: (styles) => ({
+						...styles,
+						marginLeft: "0.2rem",
+						":hover": {
+							backgroundColor: "white",
+							color: theming.light.linkColor,
+						},
+					}),
+				}}
+				defaultValue={selectedTags}
+				onChange={onChange}
+				options={options}
+				isMulti
+			/>
 		</StyledReactTagsContainer>
 	)
 }
diff --git a/src/pages/Search/index.tsx b/src/pages/Search/index.tsx
index 0614d63..8b6ba4d 100644
--- a/src/pages/Search/index.tsx
+++ b/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 { Map } from "../../../types/types"
+import { globalContext } from "../../globalContext"
 
 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) => {