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

Unify color scheme: orange primary, rose accent, gray neutral

Browse Source 
- Primary (orange): search button, active filters, selected cards,
  channel tags, links, input focus ring
- Accent (rose): favorites/heart only
- Neutral (gray): price tags, inactive buttons
- Semantic colors preserved: red for 폐업, yellow for 임시휴업

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
2026-03-09 16:00:13 +09:00
parent 2cd72d660a
commit 4a1c8cf1cd
5 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -511,7 +511,7 @@ export default function Home() {
onClick={() => setBoundsFilterOn(!boundsFilterOn)} onClick={() => setBoundsFilterOn(!boundsFilterOn)}
className={`px-3 py-1.5 text-sm border rounded-lg 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-orange-50 border-orange-300 text-orange-600"
: "hover:bg-gray-100 text-gray-600" : "hover:bg-gray-100 text-gray-600"
}`} }`}
title="지도 영역 내 식당만 표시" title="지도 영역 내 식당만 표시"
@@ -531,7 +531,7 @@ export default function Home() {
onClick={handleToggleFavorites} onClick={handleToggleFavorites}
className={`px-3.5 py-1.5 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-rose-50 border-rose-300 text-rose-600"
: "border-gray-300 text-gray-600 hover:bg-gray-100" : "border-gray-300 text-gray-600 hover:bg-gray-100"
}`} }`}
> >
@@ -541,7 +541,7 @@ export default function Home() {
onClick={handleToggleMyReviews} onClick={handleToggleMyReviews}
className={`px-3.5 py-1.5 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-orange-50 border-orange-300 text-orange-600"
: "border-gray-300 text-gray-600 hover:bg-gray-100" : "border-gray-300 text-gray-600 hover:bg-gray-100"
}`} }`}
> >
@@ -566,7 +566,7 @@ export default function Home() {
className="w-8 h-8 rounded-full border border-gray-200" className="w-8 h-8 rounded-full border border-gray-200"
/> />
) : ( ) : (
<div className="w-8 h-8 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center text-sm font-semibold border border-amber-200"> <div className="w-8 h-8 rounded-full bg-orange-100 text-orange-700 flex items-center justify-center text-sm font-semibold border border-orange-200">
{(user.nickname || user.email || "?").charAt(0).toUpperCase()} {(user.nickname || user.email || "?").charAt(0).toUpperCase()}
</div> </div>
)} )}
@@ -604,7 +604,7 @@ export default function Home() {
onClick={() => setViewMode(viewMode === "map" ? "list" : "map")} onClick={() => setViewMode(viewMode === "map" ? "list" : "map")}
className={`px-3 py-1.5 text-xs border rounded-lg 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-orange-50 border-orange-300 text-orange-600"
: "text-gray-600" : "text-gray-600"
}`} }`}
> >
@@ -614,13 +614,13 @@ export default function Home() {
onClick={() => setShowMobileFilters(!showMobileFilters)} onClick={() => setShowMobileFilters(!showMobileFilters)}
className={`px-3 py-1.5 text-xs border rounded-lg 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-orange-50 border-orange-300 text-orange-600"
: "text-gray-600" : "text-gray-600"
}`} }`}
> >
{showMobileFilters ? "✕ 필터" : "▽ 필터"} {showMobileFilters ? "✕ 필터" : "▽ 필터"}
{!showMobileFilters && (channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn) && ( {!showMobileFilters && (channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn) && (
<span className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-blue-500 text-white rounded-full text-[9px] flex items-center justify-center"> <span className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-orange-500 text-white rounded-full text-[9px] flex items-center justify-center">
{[channelFilter, cuisineFilter, priceFilter, countryFilter, boundsFilterOn].filter(Boolean).length} {[channelFilter, cuisineFilter, priceFilter, countryFilter, boundsFilterOn].filter(Boolean).length}
</span> </span>
)} )}
@@ -631,7 +631,7 @@ export default function Home() {
onClick={handleToggleFavorites} onClick={handleToggleFavorites}
className={`px-3 py-1.5 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-rose-50 border-rose-300 text-rose-600"
: "border-gray-300 text-gray-600" : "border-gray-300 text-gray-600"
}`} }`}
> >
@@ -641,7 +641,7 @@ export default function Home() {
onClick={handleToggleMyReviews} onClick={handleToggleMyReviews}
className={`px-3 py-1.5 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-orange-50 border-orange-300 text-orange-600"
: "border-gray-300 text-gray-600" : "border-gray-300 text-gray-600"
}`} }`}
> >
@@ -739,7 +739,7 @@ export default function Home() {
onClick={() => setBoundsFilterOn(!boundsFilterOn)} onClick={() => setBoundsFilterOn(!boundsFilterOn)}
className={`px-2.5 py-1.5 text-xs border rounded-lg 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-orange-50 border-orange-300 text-orange-600"
: "text-gray-600 bg-white" : "text-gray-600 bg-white"
}`} }`}
> >

10
frontend/src/components/RestaurantDetail.tsx
View File

@@ -56,7 +56,7 @@ export default function RestaurantDetail({
onClick={handleToggleFavorite} onClick={handleToggleFavorite}
disabled={favLoading} disabled={favLoading}
className={`text-xl leading-none transition-colors ${ className={`text-xl leading-none transition-colors ${
favorited ? "text-red-500" : "text-gray-300 hover:text-red-400" favorited ? "text-rose-500" : "text-gray-300 hover:text-rose-400"
}`} }`}
title={favorited ? "찜 해제" : "찜하기"} title={favorited ? "찜 해제" : "찜하기"}
> >
@@ -116,7 +116,7 @@ export default function RestaurantDetail({
{restaurant.phone && ( {restaurant.phone && (
<p> <p>
<span className="text-gray-500">전화:</span>{" "} <span className="text-gray-500">전화:</span>{" "}
<a href={`tel:${restaurant.phone}`} className="text-blue-600 hover:underline"> <a href={`tel:${restaurant.phone}`} className="text-orange-600 hover:underline">
{restaurant.phone} {restaurant.phone}
</a> </a>
</p> </p>
@@ -127,7 +127,7 @@ export default function RestaurantDetail({
href={`https://www.google.com/maps/place/?q=place_id:${restaurant.google_place_id}`} href={`https://www.google.com/maps/place/?q=place_id:${restaurant.google_place_id}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-blue-600 hover:underline text-xs" className="text-orange-600 hover:underline text-xs"
> >
Google Maps에서 보기 Google Maps에서 보기
</a> </a>
@@ -161,7 +161,7 @@ export default function RestaurantDetail({
<div key={v.video_id} className="border rounded-lg p-3"> <div key={v.video_id} className="border rounded-lg p-3">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
{v.channel_name && ( {v.channel_name && (
<span className="inline-block px-1.5 py-0.5 bg-red-50 text-red-600 rounded text-[10px] font-medium"> <span className="inline-block px-1.5 py-0.5 bg-orange-50 text-orange-600 rounded text-[10px] font-medium">
{v.channel_name} {v.channel_name}
</span> </span>
)} )}
@@ -175,7 +175,7 @@ export default function RestaurantDetail({
href={v.url} href={v.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="block text-sm font-medium text-blue-600 hover:underline" className="block text-sm font-medium text-orange-600 hover:underline"
> >
{v.title} {v.title}
</a> </a>

6
frontend/src/components/RestaurantList.tsx
View File

@@ -37,7 +37,7 @@ export default function RestaurantList({
onClick={() => onSelect(r)} onClick={() => onSelect(r)}
className={`w-full text-left p-3 rounded-xl shadow-sm border transition-all hover:shadow-md hover:-translate-y-0.5 ${ className={`w-full text-left p-3 rounded-xl shadow-sm border transition-all hover:shadow-md hover:-translate-y-0.5 ${
selectedId === r.id selectedId === r.id
? "bg-blue-50 border-blue-300 shadow-blue-100" ? "bg-orange-50 border-orange-300 shadow-orange-100"
: "bg-white border-gray-100 hover:bg-gray-50" : "bg-white border-gray-100 hover:bg-gray-50"
}`} }`}
> >
@@ -57,7 +57,7 @@ export default function RestaurantList({
<span className="px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">{r.cuisine_type}</span> <span className="px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">{r.cuisine_type}</span>
)} )}
{r.price_range && ( {r.price_range && (
<span className="px-1.5 py-0.5 bg-green-50 rounded text-green-700">{r.price_range}</span> <span className="px-1.5 py-0.5 bg-gray-50 rounded text-gray-600">{r.price_range}</span>
)} )}
</div> </div>
{r.region && ( {r.region && (
@@ -83,7 +83,7 @@ export default function RestaurantList({
{r.channels.map((ch) => ( {r.channels.map((ch) => (
<span <span
key={ch} key={ch}
className="px-1.5 py-0.5 bg-red-50 text-red-600 rounded-full text-[10px] font-medium" className="px-1.5 py-0.5 bg-orange-50 text-orange-600 rounded-full text-[10px] font-medium"
> >
{ch} {ch}
</span> </span>

4
frontend/src/components/ReviewSection.tsx
View File

@@ -124,7 +124,7 @@ function ReviewForm({
<button <button
type="submit" type="submit"
disabled={submitting} disabled={submitting}
className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 disabled:opacity-50" className="px-3 py-1 bg-orange-500 text-white text-sm rounded hover:bg-orange-600 disabled:opacity-50"
> >
{submitting ? "저장 중..." : submitLabel} {submitting ? "저장 중..." : submitLabel}
</button> </button>
@@ -225,7 +225,7 @@ export default function ReviewSection({ restaurantId }: ReviewSectionProps) {
{user && !myReview && !showForm && ( {user && !myReview && !showForm && (
<button <button
onClick={() => setShowForm(true)} onClick={() => setShowForm(true)}
className="mb-3 px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700" className="mb-3 px-3 py-1 bg-orange-500 text-white text-sm rounded hover:bg-orange-600"
> >
리뷰 작성 리뷰 작성
</button> </button>

4
frontend/src/components/SearchBar.tsx
View File

@@ -25,7 +25,7 @@ export default function SearchBar({ onSearch, isLoading }: SearchBarProps) {
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
placeholder="식당, 지역, 음식..." placeholder="식당, 지역, 음식..."
className="flex-1 min-w-0 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" className="flex-1 min-w-0 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400 text-sm"
/> />
<select <select
value={mode} value={mode}
@@ -39,7 +39,7 @@ export default function SearchBar({ onSearch, isLoading }: SearchBarProps) {
<button <button
type="submit" type="submit"
disabled={isLoading || !query.trim()} disabled={isLoading || !query.trim()}
className="shrink-0 px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm" className="shrink-0 px-3 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 disabled:opacity-50 text-sm"
> >
{isLoading ? "..." : "검색"} {isLoading ? "..." : "검색"}
</button> </button>