Merge pull request #295 from zigzagdev/chore/implement-description_ja-frontend

Chore/implement description ja frontend

Author: zigzagdev

README.md

@@ -19,7 +19,7 @@ A SPA to search UNESCO World Heritage sites.
 
 - React + TypeScript + Vite
 - React Router
-- TailwindCSS（ホワイトベーステーマポリシー / white-based theme policy）
+- TailwindCSS
 - （任意 / Optional）Jest + Testing Library
 
 ---

client/package-lock.json

@@ -41,6 +41,7 @@ const baseDto = (
   area_hectares: 107,
   buffer_zone_hectares: 143,
   short_description: "dummy",
+  short_description_jp: "ダミー",
   unesco_site_url: "https://example.com",
   state_party: null,
   state_party_codes: ["JPN"],
@@ -75,7 +76,7 @@ describe("toWorldHeritageDetailVm", () => {
     expect(vm.countryNameJp).toBe(dto.country_name_jp);
     expect(vm.region).toBe(dto.region);
 
-    // detail 差分
+    // detail
     expect(vm.primaryStatePartyCode).toBe("JPN");
     expect(vm.thumbnailUrl).toBe(dto.thumbnail_url);
 

client/src/app/features/heritages/mappers/__tests__/to-world-heritage-detail-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"],
@@ -47,6 +48,7 @@ describe("toWorldHeritageVm", () => {
       latitude: null,
       longitude: null,
       shortDescription: "desc",
+      shortDescriptionJp: "ダミー",
       unescoSiteUrl: "https://whc.unesco.org/en/list/663",
       primaryStatePartyCode: null,
       criteriaText: "ix, x",

client/src/app/features/heritages/mappers/__tests__/to-world-heritage-vm.test.ts

@@ -25,6 +25,7 @@ export function toWorldHeritageDetailVm(dto: ApiWorldHeritageDetailDto): WorldHe
     area_hectares: dto.area_hectares,
     buffer_zone_hectares: dto.buffer_zone_hectares,
     short_description: dto.short_description,
+    short_description_jp: dto.short_description_jp,
     unesco_site_url: dto.unesco_site_url,
     state_party: dto.state_party,
     state_party_codes: dto.state_party_codes,

client/src/app/features/heritages/mappers/to-world-heritage-detail-vm.ts

@@ -80,6 +80,7 @@ export function toWorldHeritageVm(data: ApiWorldHeritageDto): WorldHeritageVm {
     latitude: data.latitude,
     longitude: data.longitude,
     shortDescription: data.short_description,
+    shortDescriptionJp: data.short_description_jp,
     unescoSiteUrl: data.unesco_site_url,
     statePartyCodes: statePartyLabelsJp,
     statePartiesMeta: normalizeStatePartiesMeta(data.state_parties_meta),

client/src/app/features/heritages/mappers/to-world-heritage-vm.ts

@@ -43,6 +43,7 @@ const makeDto = (overrides: Partial<ApiWorldHeritageDto> = {}): ApiWorldHeritage
   area_hectares: null,
   buffer_zone_hectares: null,
   short_description: "",
+  short_description_jp: "",
   unesco_site_url: "https://ex.com/1",
   state_party: null,
   state_party_codes: ["JPN"],

client/src/app/features/top/apis/index.test.ts

@@ -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<SearchValues>(DEFAULT_SEARCH);
   const setLabel = useSetBreadcrumbLabel();
+  const navigate = useNavigate();
 
   const handleSubmit = (q: Partial<SearchValues>) => {
     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) {
     <div className="min-h-screen bg-zinc-50 text-zinc-900">
       <HeritageSubHeader value={search} onChange={setSearch} onSubmit={handleSubmit} />
 
-      <HeritageDetailTabs items={TABS} />
+      <div className="mx-auto w-full max-w-6xl px-4 mt-6 md:mt-8 flex items-center justify-between">
+        <HeritageDetailTabs items={TABS} />
+        <button
+          onClick={toggleLocale}
+          className="rounded-full border border-zinc-200 px-3 py-1.5 text-xs font-semibold text-zinc-700 hover:bg-zinc-100 shrink-0"
+        >
+          {locale === "ja" ? "🇯🇵" : "🇬🇧"}
+        </button>
+      </div>
 
       <div className="mx-auto w-full max-w-6xl px-4 mt-4">
         <BreadcrumbList />
@@ -136,7 +156,7 @@ export function HeritageDetailLayout({ item, locale }: Props) {
         <div className="grid gap-6 lg:gap-8 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-start">
           {/* Left: Overview → Gallery */}
           <div className="space-y-8" id="content">
-            <HeritageOverViewSection item={item} />
+            <HeritageOverViewSection item={item} locale={locale} />
             <HeritageGallery images={item.images} />
           </div>