From 64d58cb5535a3a531f7c369701d2d66495dfd0ce Mon Sep 17 00:00:00 2001
From: joungmin <joungmin@joungmins-Mac-mini.local>
Date: Thu, 12 Mar 2026 20:08:42 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=20UI=20pill=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- select를 둥근 칩(pill) 형태로 변경 (아이콘 + 드롭다운 화살표)
- 선택 시 브랜드 컬러 배경 + 링 하이라이트
- 장르/가격/지역 필터 모두 동일 스타일 적용

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/app/page.tsx | 152 ++++++++++++++++++++++----------------
 1 file changed, 90 insertions(+), 62 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index e615291..9e6c1a8 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -957,37 +957,49 @@ export default function Home() {
           <div className="space-y-1.5">
             {/* Line 1: 음식 장르 + 가격 + 결과수 */}
             <div className="flex items-center gap-1.5 text-xs">
-              <select
-                value={cuisineFilter}
-                onChange={(e) => { setCuisineFilter(e.target.value); if (e.target.value) setBoundsFilterOn(false); }}
-                className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
-                  cuisineFilter ? "text-brand-600 dark:text-brand-400 border-brand-300 dark:border-brand-700" : "text-gray-500 dark:text-gray-400"
-                }`}
-              >
-                <option value="">🍽 장르</option>
-                {CUISINE_TAXONOMY.map((g) => (
-                  <optgroup key={g.category} label={`── ${g.category} ──`}>
-                    <option value={g.category}>{g.category} 전체</option>
-                    {g.items.map((item) => (
-                      <option key={`${g.category}|${item}`} value={`${g.category}|${item}`}>
-                        &nbsp;&nbsp;{item}
-                      </option>
-                    ))}
-                  </optgroup>
-                ))}
-              </select>
-              <select
-                value={priceFilter}
-                onChange={(e) => { setPriceFilter(e.target.value); if (e.target.value) setBoundsFilterOn(false); }}
-                className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
-                  priceFilter ? "text-brand-600 dark:text-brand-400 border-brand-300 dark:border-brand-700" : "text-gray-500 dark:text-gray-400"
-                }`}
-              >
-                <option value="">💰 가격</option>
-                {PRICE_GROUPS.map((g) => (
-                  <option key={g.label} value={g.label}>{g.label}</option>
-                ))}
-              </select>
+              <div className={`relative inline-flex items-center rounded-full px-3 py-1.5 ${
+                cuisineFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
+              }`}>
+                <Icon name="restaurant" size={14} className={`mr-1 ${cuisineFilter ? "text-brand-500" : "text-gray-400"}`} />
+                <select
+                  value={cuisineFilter}
+                  onChange={(e) => { setCuisineFilter(e.target.value); if (e.target.value) setBoundsFilterOn(false); }}
+                  className={`bg-transparent border-none outline-none appearance-none pr-4 cursor-pointer ${
+                    cuisineFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"
+                  }`}
+                >
+                  <option value="">장르</option>
+                  {CUISINE_TAXONOMY.map((g) => (
+                    <optgroup key={g.category} label={`── ${g.category} ──`}>
+                      <option value={g.category}>{g.category} 전체</option>
+                      {g.items.map((item) => (
+                        <option key={`${g.category}|${item}`} value={`${g.category}|${item}`}>
+                          {item}
+                        </option>
+                      ))}
+                    </optgroup>
+                  ))}
+                </select>
+                <Icon name="expand_more" size={14} className="absolute right-2 text-gray-400 pointer-events-none" />
+              </div>
+              <div className={`relative inline-flex items-center rounded-full px-3 py-1.5 ${
+                priceFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
+              }`}>
+                <Icon name="payments" size={14} className={`mr-1 ${priceFilter ? "text-brand-500" : "text-gray-400"}`} />
+                <select
+                  value={priceFilter}
+                  onChange={(e) => { setPriceFilter(e.target.value); if (e.target.value) setBoundsFilterOn(false); }}
+                  className={`bg-transparent border-none outline-none appearance-none pr-4 cursor-pointer ${
+                    priceFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"
+                  }`}
+                >
+                  <option value="">가격</option>
+                  {PRICE_GROUPS.map((g) => (
+                    <option key={g.label} value={g.label}>{g.label}</option>
+                  ))}
+                </select>
+                <Icon name="expand_more" size={14} className="absolute right-2 text-gray-400 pointer-events-none" />
+              </div>
               {(cuisineFilter || priceFilter) && (
                 <button onClick={() => { setCuisineFilter(""); setPriceFilter(""); }} className="text-gray-400 hover:text-brand-500">
                   <Icon name="close" size={14} />
@@ -997,45 +1009,61 @@ export default function Home() {
             </div>
             {/* Line 2: 나라 + 시 + 구 + 내위치 */}
             <div className="flex items-center gap-1.5 text-xs">
-              <select
-                value={countryFilter}
-                onChange={(e) => handleCountryChange(e.target.value)}
-                className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
-                  countryFilter ? "text-brand-600 dark:text-brand-400 border-brand-300 dark:border-brand-700" : "text-gray-500 dark:text-gray-400"
-                }`}
-              >
-                <option value="">🌍 나라</option>
-                {countries.map((c) => (
-                  <option key={c} value={c}>{c}</option>
-                ))}
-              </select>
-              {countryFilter && cities.length > 0 && (
+              <div className={`relative inline-flex items-center rounded-full px-3 py-1.5 ${
+                countryFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
+              }`}>
+                <Icon name="public" size={14} className={`mr-1 ${countryFilter ? "text-brand-500" : "text-gray-400"}`} />
                 <select
-                  value={cityFilter}
-                  onChange={(e) => handleCityChange(e.target.value)}
-                  className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
-                    cityFilter ? "text-brand-600 dark:text-brand-400 border-brand-300 dark:border-brand-700" : "text-gray-500 dark:text-gray-400"
+                  value={countryFilter}
+                  onChange={(e) => handleCountryChange(e.target.value)}
+                  className={`bg-transparent border-none outline-none appearance-none pr-4 cursor-pointer ${
+                    countryFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"
                   }`}
                 >
-                  <option value="">시/도</option>
-                  {cities.map((c) => (
+                  <option value="">나라</option>
+                  {countries.map((c) => (
                     <option key={c} value={c}>{c}</option>
                   ))}
                 </select>
+                <Icon name="expand_more" size={14} className="absolute right-2 text-gray-400 pointer-events-none" />
+              </div>
+              {countryFilter && cities.length > 0 && (
+                <div className={`relative inline-flex items-center rounded-full px-3 py-1.5 ${
+                  cityFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
+                }`}>
+                  <select
+                    value={cityFilter}
+                    onChange={(e) => handleCityChange(e.target.value)}
+                    className={`bg-transparent border-none outline-none appearance-none pr-4 cursor-pointer ${
+                      cityFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"
+                    }`}
+                  >
+                    <option value="">시/도</option>
+                    {cities.map((c) => (
+                      <option key={c} value={c}>{c}</option>
+                    ))}
+                  </select>
+                  <Icon name="expand_more" size={14} className="absolute right-2 text-gray-400 pointer-events-none" />
+                </div>
               )}
               {cityFilter && districts.length > 0 && (
-                <select
-                  value={districtFilter}
-                  onChange={(e) => handleDistrictChange(e.target.value)}
-                  className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
-                    districtFilter ? "text-brand-600 dark:text-brand-400 border-brand-300 dark:border-brand-700" : "text-gray-500 dark:text-gray-400"
-                  }`}
-                >
-                  <option value="">구/군</option>
-                  {districts.map((d) => (
-                    <option key={d} value={d}>{d}</option>
-                  ))}
-                </select>
+                <div className={`relative inline-flex items-center rounded-full px-3 py-1.5 ${
+                  districtFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
+                }`}>
+                  <select
+                    value={districtFilter}
+                    onChange={(e) => handleDistrictChange(e.target.value)}
+                    className={`bg-transparent border-none outline-none appearance-none pr-4 cursor-pointer ${
+                      districtFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"
+                    }`}
+                  >
+                    <option value="">구/군</option>
+                    {districts.map((d) => (
+                      <option key={d} value={d}>{d}</option>
+                    ))}
+                  </select>
+                  <Icon name="expand_more" size={14} className="absolute right-2 text-gray-400 pointer-events-none" />
+                </div>
               )}
               {countryFilter && (
                 <button onClick={() => { setCountryFilter(""); setCityFilter(""); setDistrictFilter(""); setRegionFlyTo(null); }} className="text-gray-400 hover:text-brand-500">