From 17489ad9b079adc5e28f5cd2356866ee7b1f5a2c Mon Sep 17 00:00:00 2001
From: joungmin <joungmin@joungmins-Mac-mini.local>
Date: Mon, 9 Mar 2026 15:55:40 +0900
Subject: [PATCH] Improve whitespace and spacing across header, filters, and
 buttons

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>
---
 frontend/src/app/page.tsx | 62 +++++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 254d11c..ab57bbc 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -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"