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

라이트 테마 강제 적용 + surface 토큰 + 텍스트 대비 개선

Browse Source 
- dark: 클래스를 class 기반으로 전환 (다크모드 비활성화)
- color-scheme: light 강제
- surface 색상 토큰 추가 (카드/패널용)
- 리스트/사이드바 배경 bg-surface로 통일
- 텍스트 대비 강화 (gray-400 → gray-500/700)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
2026-03-11 21:30:49 +09:00
parent 50018c17fa
commit 4f8b4f435e
8 changed files with 41 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/BottomSheet.tsx
View File

@@ -89,7 +89,7 @@ export default function BottomSheet({ open, onClose, children }: BottomSheetProp
{/* Sheet */}
<div
ref={sheetRef}
className="fixed bottom-0 left-0 right-0 z-50 md:hidden flex flex-col bg-white/85 dark:bg-gray-900/90 backdrop-blur-xl rounded-t-2xl shadow-2xl"
className="fixed bottom-0 left-0 right-0 z-50 md:hidden flex flex-col bg-surface/85 backdrop-blur-xl rounded-t-2xl shadow-2xl"
style={{
height: `${height * 100}vh`,
transition: dragging ? "none" : "height 0.3s cubic-bezier(0.2, 0, 0, 1)",

2
frontend/src/components/LoginMenu.tsx
View File

@@ -26,7 +26,7 @@ export default function LoginMenu({ onGoogleSuccess }: LoginMenuProps) {
style={{ zIndex: 99999 }}
onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}
>
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl p-6 mx-4 w-full max-w-xs space-y-4">
<div className="bg-surface rounded-2xl shadow-2xl p-6 mx-4 w-full max-w-xs space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-base font-semibold dark:text-gray-100">로그인</h3>
<button

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

@@ -231,7 +231,7 @@ export default function MapView({ restaurants, selected, onSelectRestaurant, onB
{onMyLocation && (
<button
onClick={onMyLocation}
className="absolute top-2 right-2 w-9 h-9 bg-white dark:bg-gray-900 rounded-lg shadow-md flex items-center justify-center text-gray-600 dark:text-gray-300 hover:text-brand-500 dark:hover:text-brand-400 transition-colors z-10"
className="absolute top-2 right-2 w-9 h-9 bg-surface rounded-lg shadow-md flex items-center justify-center text-gray-600 dark:text-gray-300 hover:text-brand-500 dark:hover:text-brand-400 transition-colors z-10"
title="내 위치"
>
<svg viewBox="0 0 24 24" className="w-5 h-5 fill-current">
@@ -240,7 +240,7 @@ export default function MapView({ restaurants, selected, onSelectRestaurant, onB
</button>
)}
{channelNames.length > 0 && (
<div className="absolute bottom-2 left-2 bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm rounded-lg shadow px-2.5 py-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] z-10">
<div className="absolute bottom-2 left-2 bg-surface/90 backdrop-blur-sm rounded-lg shadow px-2.5 py-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] z-10">
{channelNames.map((ch) => (
<div key={ch} className="flex items-center gap-1">
<span

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

@@ -40,11 +40,11 @@ export default function RestaurantList({
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
? "bg-brand-50 dark:bg-brand-900/20 border-brand-300 dark:border-brand-700 shadow-brand-100 dark:shadow-brand-900/10"
: "bg-white dark:bg-gray-900 border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800"
: "bg-surface border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800"
}`}
>
<div className="flex items-start justify-between gap-2">
<h4 className="font-semibold text-sm dark:text-gray-100">
<h4 className="font-semibold text-sm text-gray-900 dark:text-gray-100">
<span className="mr-1">{getCuisineIcon(r.cuisine_type)}</span>
{r.name}
</h4>
@@ -56,14 +56,14 @@ export default function RestaurantList({
</div>
<div className="flex flex-wrap gap-x-2 gap-y-0.5 mt-1.5 text-xs">
{r.cuisine_type && (
<span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-600 dark:text-gray-400">{r.cuisine_type}</span>
<span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-700 dark:text-gray-400">{r.cuisine_type}</span>
)}
{r.price_range && (
<span className="px-1.5 py-0.5 bg-gray-50 dark:bg-gray-800 rounded text-gray-600 dark:text-gray-400">{r.price_range}</span>
<span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-700 dark:text-gray-400">{r.price_range}</span>
)}
</div>
{r.region && (
<p className="mt-1 text-xs text-gray-400 dark:text-gray-500 truncate">{r.region}</p>
<p className="mt-1 text-xs text-gray-500 dark:text-gray-500 truncate">{r.region}</p>
)}
{r.foods_mentioned && r.foods_mentioned.length > 0 && (
<div className="flex flex-wrap gap-1 mt-1.5">
@@ -76,7 +76,7 @@ export default function RestaurantList({
</span>
))}
{r.foods_mentioned.length > 5 && (
<span className="text-[10px] text-gray-400">+{r.foods_mentioned.length - 5}</span>
<span className="text-[10px] text-gray-500">+{r.foods_mentioned.length - 5}</span>
)}
</div>
)}

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

@@ -36,7 +36,7 @@ export default function SearchBar({ onSearch, isLoading }: SearchBarProps) {
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="식당, 지역, 음식 검색..."
className="w-full pl-9 pr-3 py-2 bg-gray-100 dark:bg-gray-800 border border-transparent focus:border-brand-400 focus:bg-white dark:focus:bg-gray-900 rounded-xl text-sm outline-none transition-all dark:text-gray-200 dark:placeholder-gray-500"
className="w-full pl-9 pr-3 py-2 bg-gray-100 dark:bg-gray-800 border border-transparent focus:border-brand-400 focus:bg-surface rounded-xl text-sm outline-none transition-all dark:text-gray-200 dark:placeholder-gray-500"
/>
{isLoading && (
<div className="absolute right-3 top-1/2 -translate-y-1/2">