diff --git a/client/src/app/features/heritages/mappers/__tests__/to-world-heritage-vm.test.ts b/client/src/app/features/heritages/mappers/__tests__/to-world-heritage-vm.test.ts index da79ac7..00eeac2 100644 --- a/client/src/app/features/heritages/mappers/__tests__/to-world-heritage-vm.test.ts +++ b/client/src/app/features/heritages/mappers/__tests__/to-world-heritage-vm.test.ts @@ -19,6 +19,7 @@ const base: ApiWorldHeritageDto = { area_hectares: 442, buffer_zone_hectares: 320, short_description: "desc", + short_description_jp: "ダミー", unesco_site_url: "https://whc.unesco.org/en/list/663", state_party: "JPN", state_party_codes: ["JPN"], diff --git a/client/src/app/features/top/components/heritage-detail/HeritageDetailLayout.tsx b/client/src/app/features/top/components/heritage-detail/HeritageDetailLayout.tsx index 1191158..c794974 100644 --- a/client/src/app/features/top/components/heritage-detail/HeritageDetailLayout.tsx +++ b/client/src/app/features/top/components/heritage-detail/HeritageDetailLayout.tsx @@ -1,4 +1,5 @@ import { useState, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; import type { WorldHeritageDetailVm } from "../../../../../domain/types.ts"; import type { Locale } from "../../../../../domain/criteria"; import { HeritageSubHeader } from "../HeritageSubHeader.tsx"; @@ -15,6 +16,7 @@ import { BreadcrumbList } from "@shared/components/BreadcrumbList.tsx"; type Props = { item: WorldHeritageDetailVm; locale: Locale; + toggleLocale: () => void; }; const DEFAULT_SEARCH: SearchValues = { @@ -96,13 +98,23 @@ function KeyExamInfo({ item }: { item: WorldHeritageDetailVm }) { ); } -export function HeritageDetailLayout({ item, locale }: Props) { +export function HeritageDetailLayout({ item, locale, toggleLocale }: Props) { const [search, setSearch] = useState(DEFAULT_SEARCH); const setLabel = useSetBreadcrumbLabel(); + const navigate = useNavigate(); const handleSubmit = (q: Partial) => { const next = { ...search, ...q }; setSearch(next); + + const params = new URLSearchParams(); + if (next.keyword) params.set("search_query", next.keyword); + if (next.region) params.set("region", next.region); + if (next.category) params.set("category", next.category); + if (next.yearInscribedFrom) params.set("year_inscribed_from", next.yearInscribedFrom); + if (next.yearInscribedTo) params.set("year_inscribed_to", next.yearInscribedTo); + + navigate(`/heritages/results?${params.toString()}`); }; useEffect(() => { @@ -115,7 +127,15 @@ export function HeritageDetailLayout({ item, locale }: Props) {
- +
+ + +
@@ -136,7 +156,7 @@ export function HeritageDetailLayout({ item, locale }: Props) {
{/* Left: Overview → Gallery */}
- +
diff --git a/client/src/app/features/top/components/heritage-detail/HeritageHero.tsx b/client/src/app/features/top/components/heritage-detail/HeritageHero.tsx index 1f378cf..c287805 100644 --- a/client/src/app/features/top/components/heritage-detail/HeritageHero.tsx +++ b/client/src/app/features/top/components/heritage-detail/HeritageHero.tsx @@ -6,7 +6,7 @@ type Props = { locale: Locale; }; -export function HeritageHero({ item }: Props) { +export function HeritageHero({ item, locale }: Props) { const primaryImage: WorldHeritageImageVm | undefined = item.images.find((img) => img.isPrimary) ?? item.images[0]; @@ -14,8 +14,8 @@ export function HeritageHero({ item }: Props) {

- {item.heritageNameJp} - {item.name && ( + {locale === "ja" && item.heritageNameJp ? item.heritageNameJp : item.name} + {locale === "ja" && item.heritageNameJp && item.name && ( ({item.name}) diff --git a/client/src/app/features/top/components/heritage-detail/HeritageOverviewSection.tsx b/client/src/app/features/top/components/heritage-detail/HeritageOverviewSection.tsx index 2b722df..5d97514 100644 --- a/client/src/app/features/top/components/heritage-detail/HeritageOverviewSection.tsx +++ b/client/src/app/features/top/components/heritage-detail/HeritageOverviewSection.tsx @@ -3,9 +3,10 @@ import { textType } from "@shared/styles/typography.ts"; type Props = { item: WorldHeritageDetailVm; + locale: string; }; -export function HeritageOverViewSection({ item }: Props) { +export function HeritageOverViewSection({ item, locale }: Props) { return (
- {item.shortDescription} + {locale === "ja" && item.shortDescriptionJp + ? item.shortDescriptionJp + : item.shortDescription}

) : (

diff --git a/client/src/app/features/top/containers/__tests__/world-heritage-detail-container.test.tsx b/client/src/app/features/top/containers/__tests__/world-heritage-detail-container.test.tsx index f5c1945..d84a9bb 100644 --- a/client/src/app/features/top/containers/__tests__/world-heritage-detail-container.test.tsx +++ b/client/src/app/features/top/containers/__tests__/world-heritage-detail-container.test.tsx @@ -145,6 +145,7 @@ describe("WorldHeritageDetailContainer", () => { latitude: null, longitude: null, shortDescription: "dummy", + shortDescriptionJp: "ダミー", unescoSiteUrl: "https://example.com", statePartyCodes: [], statePartiesMeta: {}, diff --git a/client/src/app/features/top/containers/world-heritage-detail-container.tsx b/client/src/app/features/top/containers/world-heritage-detail-container.tsx index ea25291..9c78c75 100644 --- a/client/src/app/features/top/containers/world-heritage-detail-container.tsx +++ b/client/src/app/features/top/containers/world-heritage-detail-container.tsx @@ -13,9 +13,19 @@ function resolveLocale(raw: string | null): Locale { export function WorldHeritageDetailContainer() { const { id } = useParams<{ id: string }>(); const navigate = useNavigate(); - const [searchParams] = useSearchParams(); + const [searchParams, setSearchParams] = useSearchParams(); const locale = useMemo(() => resolveLocale(searchParams.get("lang")), [searchParams]); + const toggleLanguageLocation = () => { + const theOther = locale === "ja" ? "en" : "ja"; + setSearchParams((prev) => { + const nowLocal = new URLSearchParams(prev); + nowLocal.set("lang", theOther); + + return nowLocal; + }); + }; + useEffect(() => { if (!id) navigate("/heritages", { replace: true }); }, [id, navigate]); @@ -51,5 +61,5 @@ export function WorldHeritageDetailContainer() { ); } - return ; + return ; }