diff --git a/solution/frontend/src/features/marketing/ShowcaseGrid.tsx b/solution/frontend/src/features/marketing/ShowcaseGrid.tsx index 3b76429..9405014 100644 --- a/solution/frontend/src/features/marketing/ShowcaseGrid.tsx +++ b/solution/frontend/src/features/marketing/ShowcaseGrid.tsx @@ -130,11 +130,11 @@ export function ShowcasePeeks({limit = 10}: {limit?: number}) { return (
{[...items, ...items].map((item, index) => ( @@ -146,7 +146,7 @@ export function ShowcasePeeks({limit = 10}: {limit?: number}) { // 두 벌째는 첫 벌의 복제다 — 스크린리더가 같은 목록을 두 번 읽지 않게 한다. aria-hidden={index >= items.length} tabIndex={index >= items.length ? -1 : undefined} - className="w-52 shrink-0 overflow-hidden rounded-xl border border-border bg-card text-left transition-transform hover:-translate-y-0.5" + className="w-40 shrink-0 overflow-hidden rounded-lg border border-border bg-card text-left transition-transform hover:-translate-y-0.5" >
{item.thumbnailUrl ? ( @@ -160,9 +160,9 @@ export function ShowcasePeeks({limit = 10}: {limit?: number}) { )}
-
-

{item.name}

-

+

+

{item.name}

+

{[item.region, CATEGORY_LABEL[item.category]].filter(Boolean).join(' · ')}

diff --git a/solution/frontend/src/pages/LandingPage.tsx b/solution/frontend/src/pages/LandingPage.tsx index 1eaa876..8f657f6 100644 --- a/solution/frontend/src/pages/LandingPage.tsx +++ b/solution/frontend/src/pages/LandingPage.tsx @@ -55,8 +55,8 @@ export function LandingPage() { return ( {/* ── 상단 ─────────────────────────────────────── */} -
-
+
+

{/* 앞말만 돈다. 마지막 항목은 첫 항목의 복제다 — 되감을 때 글자가 튀지 않게(index.css). */} @@ -70,14 +70,14 @@ export function LandingPage() { 홈페이지

-

+

가게 이름 한 줄로 시작해 보세요

-
+
setQuery(e.target.value)} placeholder="가게 이름을 입력하세요" aria-label="가게 이름" - className="h-12 w-full rounded-lg border border-border bg-card pr-4 pl-11 text-sm shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus:border-ring focus:ring-1 focus:ring-ring" + className="h-13 w-full rounded-full border border-border bg-card pr-5 pl-12 text-sm shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus:border-ring focus:ring-1 focus:ring-ring" />
-
{/* 업종은 고르지 않아도 된다 — 여기 있는 건 "누구를 위한 서비스인가" 를 말하기 위한 것이다. */} -
+
{INDUSTRIES.map(({id, label, icon: Icon}) => (