joungmin/tasteby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve whitespace and spacing across header, filters, and buttons

Browse Source 
Increased padding, wider gaps between elements, rounded-lg corners,
and more breathing room in mobile filter panel for better visual rhythm.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
2026-03-09 15:55:40 +09:00
parent 08ea282baf
commit 17489ad9b0
1 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/app/page.tsx
View File

@@ -421,15 +421,15 @@ export default function Home() {
<div className="h-screen flex flex-col">
{/* ── Header row 1: Logo + User ── */}
<header className="bg-white border-b shrink-0">
<div className="px-4 py-2 flex items-center justify-between">
<div className="px-5 py-3 flex items-center justify-between">
<button onClick={handleReset} className="text-lg font-bold whitespace-nowrap">
Tasteby
</button>
{/* Desktop: search + filters — two rows */}
<div className="hidden md:flex flex-col gap-1.5 mx-4">
<div className="hidden md:flex flex-col gap-2.5 mx-6">
{/* Row 1: Search + dropdown filters */}
<div className="flex items-center gap-2">
<div className="flex items-center gap-3">
<div className="w-96 shrink-0">
<SearchBar onSearch={handleSearch} isLoading={loading} />
</div>
@@ -440,7 +440,7 @@ export default function Home() {
setSelected(null);
setShowDetail(false);
}}
className="border rounded px-2 py-1 text-sm text-gray-600"
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
>
<option value="">전체 채널</option>
{channels.map((ch) => (
@@ -452,7 +452,7 @@ export default function Home() {
<select
value={cuisineFilter}
onChange={(e) => setCuisineFilter(e.target.value)}
className="border rounded px-2 py-1 text-sm text-gray-600"
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
>
<option value="">전체 장르</option>
{CUISINE_GROUPS.map((g) => (
@@ -462,7 +462,7 @@ export default function Home() {
<select
value={priceFilter}
onChange={(e) => setPriceFilter(e.target.value)}
className="border rounded px-2 py-1 text-sm text-gray-600"
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
>
<option value="">전체 가격</option>
{PRICE_GROUPS.map((g) => (
@@ -472,7 +472,7 @@ export default function Home() {
<select
value={countryFilter}
onChange={(e) => handleCountryChange(e.target.value)}
className="border rounded px-2 py-1 text-sm text-gray-600"
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
>
<option value="">전체 나라</option>
{countries.map((c) => (
@@ -483,7 +483,7 @@ export default function Home() {
<select
value={cityFilter}
onChange={(e) => handleCityChange(e.target.value)}
className="border rounded px-2 py-1 text-sm text-gray-600"
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
>
<option value="">전체 시/도</option>
{cities.map((c) => (
@@ -495,7 +495,7 @@ export default function Home() {
<select
value={districtFilter}
onChange={(e) => handleDistrictChange(e.target.value)}
className="border rounded px-2 py-1 text-sm text-gray-600"
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
>
<option value="">전체 구/군</option>
{districts.map((d) => (
@@ -505,10 +505,10 @@ export default function Home() {
)}
</div>
{/* Row 2: Toggle buttons + count */}
<div className="flex items-center gap-2">
<div className="flex items-center gap-3">
<button
onClick={() => setBoundsFilterOn(!boundsFilterOn)}
className={`px-2.5 py-1 text-sm border rounded transition-colors ${
className={`px-3 py-1.5 text-sm border rounded-lg transition-colors ${
boundsFilterOn
? "bg-blue-50 border-blue-300 text-blue-600"
: "hover:bg-gray-100 text-gray-600"
@@ -519,7 +519,7 @@ export default function Home() {
</button>
<button
onClick={() => setViewMode(viewMode === "map" ? "list" : "map")}
className="px-2.5 py-1 text-sm border rounded transition-colors hover:bg-gray-100 text-gray-600"
className="px-3 py-1.5 text-sm border rounded-lg transition-colors hover:bg-gray-100 text-gray-600"
title={viewMode === "map" ? "리스트 우선" : "지도 우선"}
>
{viewMode === "map" ? "🗺" : "☰"}
@@ -528,7 +528,7 @@ export default function Home() {
<>
<button
onClick={handleToggleFavorites}
className={`px-3 py-1 text-sm rounded-full border transition-colors ${
className={`px-3.5 py-1.5 text-sm rounded-full border transition-colors ${
showFavorites
? "bg-red-50 border-red-300 text-red-600"
: "border-gray-300 text-gray-600 hover:bg-gray-100"
@@ -538,7 +538,7 @@ export default function Home() {
</button>
<button
onClick={handleToggleMyReviews}
className={`px-3 py-1 text-sm rounded-full border transition-colors ${
className={`px-3.5 py-1.5 text-sm rounded-full border transition-colors ${
showMyReviews
? "bg-blue-50 border-blue-300 text-blue-600"
: "border-gray-300 text-gray-600 hover:bg-gray-100"
@@ -594,14 +594,14 @@ export default function Home() {
</div>
{/* ── Header row 2 (mobile only): search + toolbar ── */}
<div className="md:hidden px-4 pb-2 space-y-1.5">
<div className="md:hidden px-4 pb-3 space-y-2">
{/* Row 1: Search */}
<SearchBar onSearch={handleSearch} isLoading={loading} />
{/* Row 2: Toolbar */}
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-2">
<button
onClick={() => setViewMode(viewMode === "map" ? "list" : "map")}
className={`px-2.5 py-1 text-xs border rounded transition-colors ${
className={`px-3 py-1.5 text-xs border rounded-lg transition-colors ${
viewMode === "map"
? "bg-blue-50 border-blue-300 text-blue-600"
: "text-gray-600"
@@ -611,7 +611,7 @@ export default function Home() {
</button>
<button
onClick={() => setShowMobileFilters(!showMobileFilters)}
className={`px-2.5 py-1 text-xs border rounded transition-colors relative ${
className={`px-3 py-1.5 text-xs border rounded-lg transition-colors relative ${
showMobileFilters || channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn
? "bg-blue-50 border-blue-300 text-blue-600"
: "text-gray-600"
@@ -628,7 +628,7 @@ export default function Home() {
<>
<button
onClick={handleToggleFavorites}
className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
className={`px-3 py-1.5 text-xs rounded-full border transition-colors ${
showFavorites
? "bg-red-50 border-red-300 text-red-600"
: "border-gray-300 text-gray-600"
@@ -638,7 +638,7 @@ export default function Home() {
</button>
<button
onClick={handleToggleMyReviews}
className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
className={`px-3 py-1.5 text-xs rounded-full border transition-colors ${
showMyReviews
? "bg-blue-50 border-blue-300 text-blue-600"
: "border-gray-300 text-gray-600"
@@ -655,9 +655,9 @@ export default function Home() {
{/* Collapsible filter panel */}
{showMobileFilters && (
<div className="bg-gray-50 rounded-lg p-3 space-y-2 border">
<div className="bg-gray-50 rounded-xl p-3.5 space-y-3 border">
{/* Dropdown filters */}
<div className="flex items-center gap-1.5 flex-wrap">
<div className="flex items-center gap-2 flex-wrap">
<select
value={channelFilter}
onChange={(e) => {
@@ -665,7 +665,7 @@ export default function Home() {
setSelected(null);
setShowDetail(false);
}}
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
>
<option value="">전체 채널</option>
{channels.map((ch) => (
@@ -677,7 +677,7 @@ export default function Home() {
<select
value={cuisineFilter}
onChange={(e) => setCuisineFilter(e.target.value)}
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
>
<option value="">전체 장르</option>
{CUISINE_GROUPS.map((g) => (
@@ -687,7 +687,7 @@ export default function Home() {
<select
value={priceFilter}
onChange={(e) => setPriceFilter(e.target.value)}
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
>
<option value="">전체 가격</option>
{PRICE_GROUPS.map((g) => (
@@ -696,11 +696,11 @@ export default function Home() {
</select>
</div>
{/* Region filters */}
<div className="flex items-center gap-1.5 flex-wrap">
<div className="flex items-center gap-2 flex-wrap">
<select
value={countryFilter}
onChange={(e) => handleCountryChange(e.target.value)}
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
>
<option value="">전체 나라</option>
{countries.map((c) => (
@@ -711,7 +711,7 @@ export default function Home() {
<select
value={cityFilter}
onChange={(e) => handleCityChange(e.target.value)}
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
>
<option value="">전체 시/도</option>
{cities.map((c) => (
@@ -723,7 +723,7 @@ export default function Home() {
<select
value={districtFilter}
onChange={(e) => handleDistrictChange(e.target.value)}
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
>
<option value="">전체 구/군</option>
{districts.map((d) => (
@@ -733,10 +733,10 @@ export default function Home() {
)}
</div>
{/* Toggle buttons */}
<div className="flex items-center gap-1.5 flex-wrap">
<div className="flex items-center gap-2 flex-wrap">
<button
onClick={() => setBoundsFilterOn(!boundsFilterOn)}
className={`px-2 py-1 text-xs border rounded transition-colors ${
className={`px-2.5 py-1.5 text-xs border rounded-lg transition-colors ${
boundsFilterOn
? "bg-blue-50 border-blue-300 text-blue-600"
: "text-gray-600 bg-white"