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