From 5022fe597f6a3e2d60c5e50647aebb532c4cba88 Mon Sep 17 00:00:00 2001
From: thxforall <113906780+thxforall@users.noreply.github.com>
Date: Fri, 10 Jul 2026 17:25:56 +0900
Subject: [PATCH] =?UTF-8?q?feat(web):=20explore=20=EC=84=9C=ED=94=BC?=
 =?UTF-8?q?=EC=8A=A4=20i18n=20=E2=80=94=20Explore=20=EB=84=A4=EC=9E=84?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=20ko/en=20=EB=B0=B0?=
 =?UTF-8?q?=EC=84=A0=20(#845)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

explore surface의 하드코딩 영문을 useTranslations("Explore")로 배선
(#838 홈 baseline 패턴 복제). messages/{ko,en}.json에 Explore 네임스페이스
신설(ko는 실제 한국어 초안), 키셋 1:1 파리티 + ICU 보간 정적 테스트를
i18n/__tests__에 추가. explore는 CSR(client mutator가 URL locale 추종)
이라 RSC serverApiGet locale 전달 스텝은 불필요(홈 전용 갭).

배선: ExploreClient(헤더/검색/에러·엠프티 상태/로딩), EntityTabBar(탭
라벨+aria), ComingSoonState(타이틀/설명/배지), SortDropdown(정렬 라벨),
ExploreCardCell(alt/스팟 aria, ICU plural). 엠프티 상태 동적 카피는 ICU
이스케이프 함정을 피해 곡선따옴표(‘{query}’) 사용 + 보간 테스트로 가드.

스코프 결정:
- STYLE_TAXONOMY 스타일칩/POPULAR_SEARCH_TAGS는 미번역 — 라벨이 검색
  쿼리로 그대로 주입(setQuery)되는 검색 토큰/고유명사라 번역 시 백엔드
  검색 동작이 바뀜.
- SearchSuggestions(전역 검색 드롭다운)는 이번 스코프 제외 — 비지역화
  루트 레이아웃 Header에도 마운트되어 NextIntlClientProvider 밖이라
  useTranslations 배선 시 전역 크래시. 셸 프로바이더 커버리지 후속 필요.

#880(#843 explore 필터 interim)과 ExploreClient.tsx·SortDropdown.tsx
공유 — 문자열만 t() 교체, 필터 로직/SORT_OPTIONS 상수 shape 미변경
(나중 머지 rebase 최소화).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../(shell)/explore/ExploreClient.tsx         | 42 ++++++------
 .../__tests__/explore-messages-parity.test.ts | 55 +++++++++++++++
 .../components/explore/ComingSoonState.tsx    | 39 +++--------
 .../lib/components/explore/EntityTabBar.tsx   | 21 +++---
 .../components/explore/ExploreCardCell.tsx    |  6 +-
 .../lib/components/explore/SortDropdown.tsx   |  7 +-
 .../__tests__/EntityTabBar.locale.test.tsx    | 34 ++++++++++
 .../__tests__/ExploreCardCell.test.tsx        | 25 +++++--
 packages/web/messages/en.json                 | 68 +++++++++++++++++++
 packages/web/messages/ko.json                 | 68 +++++++++++++++++++
 10 files changed, 298 insertions(+), 67 deletions(-)
 create mode 100644 packages/web/i18n/__tests__/explore-messages-parity.test.ts
 create mode 100644 packages/web/lib/components/explore/__tests__/EntityTabBar.locale.test.tsx

diff --git a/packages/web/app/[locale]/(shell)/explore/ExploreClient.tsx b/packages/web/app/[locale]/(shell)/explore/ExploreClient.tsx
index 1bdfc613e..7f3cb2358 100644
--- a/packages/web/app/[locale]/(shell)/explore/ExploreClient.tsx
+++ b/packages/web/app/[locale]/(shell)/explore/ExploreClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useMemo, useRef, useCallback } from "react";
+import { useTranslations } from "next-intl";
 import { Search, X, ChevronDown } from "lucide-react";
 import { useDebounce, useRecentSearchesStore } from "@decoded/shared";
 import { useExploreData } from "@/lib/hooks/useExploreData";
@@ -49,6 +50,7 @@ export function ExploreClient({
   hasMagazine,
   initialQuery = "",
 }: Props) {
+  const t = useTranslations("Explore");
   const debouncedQuery = useSearchStore((state) => state.debouncedQuery);
   const query = useSearchStore((state) => state.query);
   const setQuery = useSearchStore((state) => state.setQuery);
@@ -238,9 +240,9 @@ export function ExploreClient({
     <div className="mx-auto max-w-[1400px] px-4 pb-12 md:px-6">
       {/* Page header */}
       <header className="pt-6">
-        <h1 className="text-2xl font-bold md:text-3xl">Explore</h1>
+        <h1 className="text-2xl font-bold md:text-3xl">{t("header.title")}</h1>
         <p className="mt-1 text-sm text-muted-foreground">
-          Discover looks, moods and items from the community.
+          {t("header.subtitle")}
         </p>
       </header>
 
@@ -256,7 +258,7 @@ export function ExploreClient({
             onFocus={() => query.length > 0 && setShowSuggestions(true)}
             onKeyDown={handleKeyDown}
             data-testid="explore-search-input"
-            placeholder="Search people, shows, items..."
+            placeholder={t("search.placeholder")}
             className="w-full rounded-full border border-border bg-card py-2 pl-10 pr-10 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
           />
           {query.length > 0 && (
@@ -264,7 +266,7 @@ export function ExploreClient({
               onClick={handleClear}
               className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
               type="button"
-              aria-label="Clear search"
+              aria-label={t("search.clearAria")}
             >
               <X className="h-4 w-4" />
             </button>
@@ -320,7 +322,7 @@ export function ExploreClient({
                           : "border-border text-muted-foreground hover:bg-accent"
                       )}
                     >
-                      <option value="">Context</option>
+                      <option value="">{t("search.contextLabel")}</option>
                       {contextOptions.map(([value, count]) => (
                         <option key={value} value={value}>
                           {value} ({count})
@@ -350,7 +352,7 @@ export function ExploreClient({
                     className="ml-1 flex-shrink-0 text-[10px] text-muted-foreground transition-colors hover:text-foreground"
                     type="button"
                   >
-                    Clear all
+                    {t("search.clearAll")}
                   </button>
                 )}
               </div>
@@ -375,19 +377,17 @@ export function ExploreClient({
             <div className="flex flex-col items-center justify-center px-4 py-16 text-center">
               <div className="mb-4 text-4xl">⚠️</div>
               <h2 className="mb-2 text-xl font-semibold text-foreground">
-                Failed to load posts
+                {t("loadError.title")}
               </h2>
               <p className="mb-6 max-w-md text-sm text-muted-foreground">
-                {error instanceof Error
-                  ? error.message
-                  : "Something went wrong while loading posts."}
+                {error instanceof Error ? error.message : t("loadError.body")}
               </p>
               <button
                 onClick={() => refetch()}
                 className="rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
                 type="button"
               >
-                Retry
+                {t("loadError.retry")}
               </button>
             </div>
           )}
@@ -397,14 +397,14 @@ export function ExploreClient({
             <div className="mx-auto flex max-w-md flex-col items-center justify-center px-4 py-16 text-center">
               <div className="mb-4 text-4xl">🛠️</div>
               <h2 className="mb-2 text-xl font-semibold text-foreground">
-                Search is temporarily unavailable
+                {t("searchError.title")}
               </h2>
               <p className="mb-6 text-sm text-muted-foreground">
                 {(() => {
                   const msg =
                     error instanceof Error
                       ? error.message
-                      : "Please try again in a moment.";
+                      : t("searchError.body");
                   return msg.length > 140 ? `${msg.slice(0, 140)}…` : msg;
                 })()}
               </p>
@@ -414,14 +414,14 @@ export function ExploreClient({
                   className="rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
                   type="button"
                 >
-                  Retry
+                  {t("searchError.retry")}
                 </button>
                 <button
                   type="button"
                   onClick={handleClear}
                   className="rounded-full px-4 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
                 >
-                  Clear search
+                  {t("searchError.clear")}
                 </button>
               </div>
             </div>
@@ -435,13 +435,13 @@ export function ExploreClient({
               </div>
               <h2 className="mb-2 text-xl font-semibold text-foreground">
                 {debouncedQuery.trim().length > 0
-                  ? `No results for '${debouncedQuery}'`
-                  : "No posts found yet."}
+                  ? t("empty.noResults", { query: debouncedQuery })
+                  : t("empty.noPosts")}
               </h2>
               <p className="mb-6 text-sm text-muted-foreground">
                 {debouncedQuery.trim().length > 0
-                  ? "Try different keywords or the suggestions below."
-                  : "Check back later."}
+                  ? t("empty.noResultsHint")
+                  : t("empty.noPostsHint")}
               </p>
               {debouncedQuery.trim().length > 0 && (
                 <>
@@ -462,7 +462,7 @@ export function ExploreClient({
                     onClick={handleClear}
                     className="text-xs text-muted-foreground underline underline-offset-2 transition-colors hover:text-foreground"
                   >
-                    Clear search
+                    {t("empty.clear")}
                   </button>
                 </>
               )}
@@ -490,7 +490,7 @@ export function ExploreClient({
               <div ref={sentinelRef} aria-hidden="true" className="h-px" />
               {isFetchingNextPage && (
                 <div className="flex justify-center py-6">
-                  <LoadingSpinner text="Loading more..." />
+                  <LoadingSpinner text={t("loadingMore")} />
                 </div>
               )}
             </>
diff --git a/packages/web/i18n/__tests__/explore-messages-parity.test.ts b/packages/web/i18n/__tests__/explore-messages-parity.test.ts
new file mode 100644
index 000000000..4c61dd065
--- /dev/null
+++ b/packages/web/i18n/__tests__/explore-messages-parity.test.ts
@@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import { createTranslator } from "next-intl";
+import ko from "@/messages/ko.json";
+import en from "@/messages/en.json";
+
+/**
+ * The Explore namespace (#845) copies the Home i18n baseline. ko/en must expose
+ * the identical key shape — a missing key on either side is a hard failure
+ * (untranslated string leaks the wrong language at runtime).
+ */
+function leafKeyPaths(obj: unknown, prefix = ""): string[] {
+  if (obj === null || typeof obj !== "object") return [prefix];
+  return Object.entries(obj as Record<string, unknown>).flatMap(([k, v]) =>
+    leafKeyPaths(v, prefix ? `${prefix}.${k}` : k)
+  );
+}
+
+describe("Explore messages ko/en parity", () => {
+  it("both locales define an Explore namespace", () => {
+    expect(en).toHaveProperty("Explore");
+    expect(ko).toHaveProperty("Explore");
+  });
+
+  it("ko and en expose the identical Explore key set", () => {
+    const enKeys = leafKeyPaths(
+      (en as Record<string, unknown>).Explore ?? {}
+    ).sort();
+    const koKeys = leafKeyPaths(
+      (ko as Record<string, unknown>).Explore ?? {}
+    ).sort();
+    expect(koKeys).toEqual(enKeys);
+    // Guard against an empty-vs-empty false pass.
+    expect(enKeys.length).toBeGreaterThan(0);
+  });
+
+  // ICU MessageFormat treats a straight quote before `{` as a literal escape,
+  // so `'{query}'` would render the placeholder verbatim. This guards that the
+  // dynamic empty-state title actually interpolates the query on both locales.
+  it.each([
+    ["en", en],
+    ["ko", ko],
+  ] as const)(
+    "empty.noResults interpolates {query} under %s",
+    (locale, messages) => {
+      const t = createTranslator({
+        locale,
+        messages,
+        namespace: "Explore",
+      });
+      const out = t("empty.noResults", { query: "vintage denim" });
+      expect(out).toContain("vintage denim");
+      expect(out).not.toContain("{query}");
+    }
+  );
+});
diff --git a/packages/web/lib/components/explore/ComingSoonState.tsx b/packages/web/lib/components/explore/ComingSoonState.tsx
index 8cf05c0c7..3c7f922e8 100644
--- a/packages/web/lib/components/explore/ComingSoonState.tsx
+++ b/packages/web/lib/components/explore/ComingSoonState.tsx
@@ -1,32 +1,12 @@
 import { Sparkles, Shirt, Tag, Users, Palette } from "lucide-react";
+import { useTranslations } from "next-intl";
 import type { ExploreEntity } from "./EntityTabBar";
 
-const COPY: Record<
-  Exclude<ExploreEntity, "looks">,
-  { icon: React.ReactNode; title: string; description: string }
-> = {
-  moods: {
-    icon: <Palette className="size-8" />,
-    title: "Moods are coming soon",
-    description:
-      "Curated mood collections — Minimal, Street, Y2K and more — are on the way.",
-  },
-  items: {
-    icon: <Shirt className="size-8" />,
-    title: "Items are coming soon",
-    description:
-      "Browse and search individual garments matched from decoded looks.",
-  },
-  brands: {
-    icon: <Tag className="size-8" />,
-    title: "Brands are coming soon",
-    description: "Follow brands and see every look they appear in.",
-  },
-  people: {
-    icon: <Users className="size-8" />,
-    title: "People are coming soon",
-    description: "Style icons and creators you can follow.",
-  },
+const ICON: Record<Exclude<ExploreEntity, "looks">, React.ReactNode> = {
+  moods: <Palette className="size-8" />,
+  items: <Shirt className="size-8" />,
+  brands: <Tag className="size-8" />,
+  people: <Users className="size-8" />,
 };
 
 /**
@@ -37,7 +17,10 @@ export function ComingSoonState({
 }: {
   entity: Exclude<ExploreEntity, "looks">;
 }) {
-  const { icon, title, description } = COPY[entity];
+  const t = useTranslations("Explore");
+  const icon = ICON[entity];
+  const title = t(`comingSoon.${entity}.title`);
+  const description = t(`comingSoon.${entity}.description`);
   return (
     <div className="flex min-h-[40vh] flex-col items-center justify-center gap-3 px-6 py-16 text-center">
       <span className="flex size-16 items-center justify-center rounded-2xl bg-primary/15 text-foreground">
@@ -47,7 +30,7 @@ export function ComingSoonState({
       <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
       <span className="mt-1 inline-flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
         <Sparkles className="size-3.5" />
-        Coming soon
+        {t("comingSoon.badge")}
       </span>
     </div>
   );
diff --git a/packages/web/lib/components/explore/EntityTabBar.tsx b/packages/web/lib/components/explore/EntityTabBar.tsx
index 540a984f6..93e9b8d59 100644
--- a/packages/web/lib/components/explore/EntityTabBar.tsx
+++ b/packages/web/lib/components/explore/EntityTabBar.tsx
@@ -1,15 +1,17 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { cn } from "@/lib/utils";
 
 export type ExploreEntity = "looks" | "moods" | "items" | "brands" | "people";
 
-export const EXPLORE_ENTITIES: { id: ExploreEntity; label: string }[] = [
-  { id: "looks", label: "Looks" },
-  { id: "moods", label: "Moods" },
-  { id: "items", label: "Items" },
-  { id: "brands", label: "Brands" },
-  { id: "people", label: "People" },
+// Order only — display labels come from the `Explore.entities` message namespace.
+export const EXPLORE_ENTITIES: ExploreEntity[] = [
+  "looks",
+  "moods",
+  "items",
+  "brands",
+  "people",
 ];
 
 export interface EntityTabBarProps {
@@ -28,16 +30,17 @@ export function EntityTabBar({
   onChange,
   className,
 }: EntityTabBarProps) {
+  const t = useTranslations("Explore");
   return (
     <div
       role="tablist"
-      aria-label="Explore entities"
+      aria-label={t("entities.aria")}
       className={cn(
         "flex gap-1 overflow-x-auto border-b border-border scrollbar-hide",
         className
       )}
     >
-      {EXPLORE_ENTITIES.map(({ id, label }) => {
+      {EXPLORE_ENTITIES.map((id) => {
         const isActive = id === active;
         return (
           <button
@@ -53,7 +56,7 @@ export function EntityTabBar({
                 : "border-transparent text-muted-foreground hover:text-foreground"
             )}
           >
-            {label}
+            {t(`entities.${id}`)}
           </button>
         );
       })}
diff --git a/packages/web/lib/components/explore/ExploreCardCell.tsx b/packages/web/lib/components/explore/ExploreCardCell.tsx
index e10438348..7699027df 100644
--- a/packages/web/lib/components/explore/ExploreCardCell.tsx
+++ b/packages/web/lib/components/explore/ExploreCardCell.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { memo, useState } from "react";
+import { useTranslations } from "next-intl";
 import { Link } from "@/i18n/navigation";
 import { gsap } from "gsap";
 import { Flip } from "gsap/Flip";
@@ -26,6 +27,7 @@ export const ExploreCardCell = memo(function ExploreCardCell({
   gridIndex,
   item,
 }: ExploreCardCellProps) {
+  const t = useTranslations("Explore");
   const [imageError, setImageError] = useState(false);
   const setTransition = useTransitionStore((state) => state.setTransition);
   const track = useTrackEvent();
@@ -88,7 +90,7 @@ export const ExploreCardCell = memo(function ExploreCardCell({
         >
           <PostImage
             src={imageUrl}
-            alt={`Image ${imageId}`}
+            alt={t("card.imageAlt")}
             maxHeight="60vh"
             className="h-full"
             flagKey="ExploreCardCell"
@@ -102,7 +104,7 @@ export const ExploreCardCell = memo(function ExploreCardCell({
           {typeof item?.spotCount === "number" && item.spotCount > 0 && (
             <div
               role="status"
-              aria-label={`${item.spotCount} spots`}
+              aria-label={t("card.spotsAria", { count: item.spotCount })}
               className="absolute top-2 right-2 rounded-full bg-black/60 px-2 py-0.5 text-[11px] font-medium text-white"
             >
               {item.spotCount}
diff --git a/packages/web/lib/components/explore/SortDropdown.tsx b/packages/web/lib/components/explore/SortDropdown.tsx
index 01c2d302e..859e45e0d 100644
--- a/packages/web/lib/components/explore/SortDropdown.tsx
+++ b/packages/web/lib/components/explore/SortDropdown.tsx
@@ -1,8 +1,12 @@
 "use client";
 
 import { ChevronDown } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { cn } from "@/lib/utils";
 
+// `label` retained (unused in render) to keep this exported constant's shape
+// stable for the unmerged PR #880 rebase; display text comes from the
+// `Explore.sort.*` message namespace via t(`sort.${value}`) below.
 export const SORT_OPTIONS = [
   { value: "relevant", label: "Relevant" },
   { value: "recent", label: "Recent" },
@@ -25,6 +29,7 @@ export function SortDropdown({
   onChange,
   className,
 }: SortDropdownProps) {
+  const t = useTranslations("Explore");
   return (
     <div className={cn("relative flex-shrink-0", className)}>
       <select
@@ -40,7 +45,7 @@ export function SortDropdown({
       >
         {SORT_OPTIONS.map((opt) => (
           <option key={opt.value} value={opt.value}>
-            {opt.label}
+            {t(`sort.${opt.value}`)}
           </option>
         ))}
       </select>
diff --git a/packages/web/lib/components/explore/__tests__/EntityTabBar.locale.test.tsx b/packages/web/lib/components/explore/__tests__/EntityTabBar.locale.test.tsx
new file mode 100644
index 000000000..852111864
--- /dev/null
+++ b/packages/web/lib/components/explore/__tests__/EntityTabBar.locale.test.tsx
@@ -0,0 +1,34 @@
+/**
+ * @vitest-environment jsdom
+ */
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { NextIntlClientProvider } from "next-intl";
+import ko from "@/messages/ko.json";
+import en from "@/messages/en.json";
+
+import { EntityTabBar } from "../EntityTabBar";
+
+function renderWithLocale(locale: "ko" | "en", messages: typeof en) {
+  return render(
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      <EntityTabBar active="looks" onChange={vi.fn()} />
+    </NextIntlClientProvider>
+  );
+}
+
+describe("EntityTabBar locale rendering (#845)", () => {
+  it("renders English entity tab labels under en", () => {
+    renderWithLocale("en", en);
+    expect(screen.getByRole("tab", { name: "Looks" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "People" })).toBeInTheDocument();
+  });
+
+  it("renders Korean entity tab labels under ko", () => {
+    renderWithLocale("ko", ko);
+    expect(screen.getByRole("tab", { name: "룩" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "인물" })).toBeInTheDocument();
+  });
+});
diff --git a/packages/web/lib/components/explore/__tests__/ExploreCardCell.test.tsx b/packages/web/lib/components/explore/__tests__/ExploreCardCell.test.tsx
index df02b294b..95ca901de 100644
--- a/packages/web/lib/components/explore/__tests__/ExploreCardCell.test.tsx
+++ b/packages/web/lib/components/explore/__tests__/ExploreCardCell.test.tsx
@@ -11,6 +11,8 @@ import React from "react";
 import { describe, test, expect, vi, beforeAll } from "vitest";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
+import { NextIntlClientProvider } from "next-intl";
+import en from "@/messages/en.json";
 
 // --- Mocks ---
 
@@ -96,6 +98,17 @@ vi.mock("@/lib/design-system", () => ({
 import { ExploreCardCell } from "../ExploreCardCell";
 import type { ItemConfig } from "@/lib/components/ThiingsGrid";
 
+// ExploreCardCell reads the Explore message namespace (alt/aria) via
+// useTranslations, so renders must be wrapped in the same intl provider it
+// always has under app/[locale]/(shell)/explore.
+function renderCell(config: ItemConfig) {
+  return render(
+    <NextIntlClientProvider locale="en" messages={en}>
+      <ExploreCardCell {...config} />
+    </NextIntlClientProvider>
+  );
+}
+
 function makeConfig(overrides: Partial<ItemConfig["item"]> = {}): ItemConfig {
   return {
     isMoving: false,
@@ -116,14 +129,14 @@ function makeConfig(overrides: Partial<ItemConfig["item"]> = {}): ItemConfig {
 describe("ExploreCardCell — spotCount badge pill", () => {
   test('Test 1: spotCount=5 → badge pill is rendered with text "5"', () => {
     const config = makeConfig({ spotCount: 5 });
-    render(<ExploreCardCell {...config} />);
+    renderCell(config);
     // Badge should show spot count number
     expect(screen.getByText("5")).toBeInTheDocument();
   });
 
   test("Test 2: spotCount=0 → badge pill is NOT rendered", () => {
     const config = makeConfig({ spotCount: 0 });
-    render(<ExploreCardCell {...config} />);
+    renderCell(config);
     // No numeric badge element for zero
     const badge = screen.queryByRole("presentation");
     // Should not find any element containing just "0" as a badge
@@ -133,13 +146,13 @@ describe("ExploreCardCell — spotCount badge pill", () => {
   test("Test 3: spotCount=undefined → badge pill is NOT rendered", () => {
     // spotCount not set (undefined)
     const config = makeConfig();
-    render(<ExploreCardCell {...config} />);
+    renderCell(config);
     expect(screen.queryByLabelText(/spots/)).not.toBeInTheDocument();
   });
 
   test("Test 4: editorialTitle is NOT rendered (title hidden platform-wide)", () => {
     const config = makeConfig({ editorialTitle: "Vogue Korea" });
-    render(<ExploreCardCell {...config} />);
+    renderCell(config);
     expect(screen.queryByText("Vogue Korea")).not.toBeInTheDocument();
   });
 });
@@ -147,7 +160,7 @@ describe("ExploreCardCell — spotCount badge pill", () => {
 describe("ExploreCardCell — image dimensions passthrough (#814)", () => {
   test("browse-mode dims flow to the image intrinsic size (CLS-correct ratio)", () => {
     const config = makeConfig({ imageWidth: 1200, imageHeight: 800 });
-    render(<ExploreCardCell {...config} />);
+    renderCell(config);
     const img = screen.getByTestId("fg-img");
     expect(img).toHaveAttribute("width", "1200");
     expect(img).toHaveAttribute("height", "800");
@@ -155,7 +168,7 @@ describe("ExploreCardCell — image dimensions passthrough (#814)", () => {
 
   test("missing dims (e.g. search results) fall back to the 800x1000 guess", () => {
     const config = makeConfig(); // no imageWidth/imageHeight
-    render(<ExploreCardCell {...config} />);
+    renderCell(config);
     const img = screen.getByTestId("fg-img");
     expect(img).toHaveAttribute("width", "800");
     expect(img).toHaveAttribute("height", "1000");
diff --git a/packages/web/messages/en.json b/packages/web/messages/en.json
index 574f8d10c..858209a6f 100644
--- a/packages/web/messages/en.json
+++ b/packages/web/messages/en.json
@@ -80,6 +80,74 @@
       "similarHide": "Hide similar"
     }
   },
+  "Explore": {
+    "header": {
+      "title": "Explore",
+      "subtitle": "Discover looks, moods and items from the community."
+    },
+    "search": {
+      "placeholder": "Search people, shows, items...",
+      "clearAria": "Clear search",
+      "contextLabel": "Context",
+      "clearAll": "Clear all"
+    },
+    "entities": {
+      "aria": "Explore entities",
+      "looks": "Looks",
+      "moods": "Moods",
+      "items": "Items",
+      "brands": "Brands",
+      "people": "People"
+    },
+    "sort": {
+      "relevant": "Relevant",
+      "recent": "Recent",
+      "popular": "Popular",
+      "solution_count": "Most Solutions"
+    },
+    "loadError": {
+      "title": "Failed to load posts",
+      "body": "Something went wrong while loading posts.",
+      "retry": "Retry"
+    },
+    "searchError": {
+      "title": "Search is temporarily unavailable",
+      "body": "Please try again in a moment.",
+      "retry": "Retry",
+      "clear": "Clear search"
+    },
+    "empty": {
+      "noResults": "No results for ‘{query}’",
+      "noResultsHint": "Try different keywords or the suggestions below.",
+      "noPosts": "No posts found yet.",
+      "noPostsHint": "Check back later.",
+      "clear": "Clear search"
+    },
+    "loadingMore": "Loading more...",
+    "card": {
+      "imageAlt": "Look image",
+      "spotsAria": "{count, plural, one {# spot} other {# spots}}"
+    },
+    "comingSoon": {
+      "badge": "Coming soon",
+      "moods": {
+        "title": "Moods are coming soon",
+        "description": "Curated mood collections — Minimal, Street, Y2K and more — are on the way."
+      },
+      "items": {
+        "title": "Items are coming soon",
+        "description": "Browse and search individual garments matched from decoded looks."
+      },
+      "brands": {
+        "title": "Brands are coming soon",
+        "description": "Follow brands and see every look they appear in."
+      },
+      "people": {
+        "title": "People are coming soon",
+        "description": "Style icons and creators you can follow."
+      }
+    }
+  },
   "StyleDna": {
     "card": {
       "title": "Style DNA",
diff --git a/packages/web/messages/ko.json b/packages/web/messages/ko.json
index 0e0a2adf7..498ddb520 100644
--- a/packages/web/messages/ko.json
+++ b/packages/web/messages/ko.json
@@ -80,6 +80,74 @@
       "similarHide": "Hide similar"
     }
   },
+  "Explore": {
+    "header": {
+      "title": "탐색",
+      "subtitle": "커뮤니티의 룩, 무드, 아이템을 둘러보세요."
+    },
+    "search": {
+      "placeholder": "인물, 프로그램, 아이템 검색...",
+      "clearAria": "검색어 지우기",
+      "contextLabel": "맥락",
+      "clearAll": "전체 해제"
+    },
+    "entities": {
+      "aria": "탐색 카테고리",
+      "looks": "룩",
+      "moods": "무드",
+      "items": "아이템",
+      "brands": "브랜드",
+      "people": "인물"
+    },
+    "sort": {
+      "relevant": "관련순",
+      "recent": "최신순",
+      "popular": "인기순",
+      "solution_count": "매치 많은 순"
+    },
+    "loadError": {
+      "title": "게시물을 불러오지 못했어요",
+      "body": "게시물을 불러오는 중 문제가 발생했어요.",
+      "retry": "다시 시도"
+    },
+    "searchError": {
+      "title": "검색을 일시적으로 사용할 수 없어요",
+      "body": "잠시 후 다시 시도해 주세요.",
+      "retry": "다시 시도",
+      "clear": "검색 지우기"
+    },
+    "empty": {
+      "noResults": "‘{query}’ 검색 결과가 없어요",
+      "noResultsHint": "다른 키워드나 아래 추천을 시도해 보세요.",
+      "noPosts": "아직 게시물이 없어요.",
+      "noPostsHint": "나중에 다시 확인해 주세요.",
+      "clear": "검색 지우기"
+    },
+    "loadingMore": "더 불러오는 중...",
+    "card": {
+      "imageAlt": "룩 이미지",
+      "spotsAria": "{count, plural, other {스팟 #개}}"
+    },
+    "comingSoon": {
+      "badge": "준비 중",
+      "moods": {
+        "title": "무드가 곧 찾아와요",
+        "description": "미니멀, 스트리트, Y2K 등 큐레이션된 무드 컬렉션을 준비하고 있어요."
+      },
+      "items": {
+        "title": "아이템이 곧 찾아와요",
+        "description": "디코드된 룩에서 매칭된 개별 의상을 둘러보고 검색할 수 있어요."
+      },
+      "brands": {
+        "title": "브랜드가 곧 찾아와요",
+        "description": "브랜드를 팔로우하고 그 브랜드가 등장하는 모든 룩을 확인하세요."
+      },
+      "people": {
+        "title": "인물이 곧 찾아와요",
+        "description": "팔로우할 수 있는 스타일 아이콘과 크리에이터를 만나보세요."
+      }
+    }
+  },
   "StyleDna": {
     "card": {
       "title": "Style DNA",