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

19
frontend/src/app/globals.css
View File

@@ -1,8 +1,12 @@
@import "tailwindcss"; @import "tailwindcss";
/* Force light mode: dark: classes only activate with .dark ancestor */
@custom-variant dark (&:is(.dark *));
:root { :root {
--background: #FFFAF5; --background: #FFFAF5;
--foreground: #171717; --foreground: #171717;
--surface: #FFFFFF;
--brand-50: #FFF8F0; --brand-50: #FFF8F0;
--brand-100: #FFEDD5; --brand-100: #FFEDD5;
--brand-200: #FFD6A5; --brand-200: #FFD6A5;
@@ -14,12 +18,13 @@
--brand-800: #9A4500; --brand-800: #9A4500;
--brand-900: #6B3000; --brand-900: #6B3000;
--brand-950: #3D1A00; --brand-950: #3D1A00;
color-scheme: light dark; color-scheme: light;
} }
@theme inline { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-surface: var(--surface);
--color-brand-50: var(--brand-50); --color-brand-50: var(--brand-50);
--color-brand-100: var(--brand-100); --color-brand-100: var(--brand-100);
--color-brand-200: var(--brand-200); --color-brand-200: var(--brand-200);
@@ -34,12 +39,14 @@
--font-sans: var(--font-pretendard), var(--font-geist), system-ui, sans-serif; --font-sans: var(--font-pretendard), var(--font-geist), system-ui, sans-serif;
} }
@media (prefers-color-scheme: dark) { /* Dark mode CSS vars (disabled — activate by adding .dark class to <html>) */
:root { /*
--background: #0a0a0a; .dark {
--foreground: #ededed; --background: #12100E;
} --foreground: #ededed;
--surface: #1C1916;
} }
*/
body { body {
background: var(--background); background: var(--background);

2
frontend/src/app/layout.tsx
View File

@@ -28,7 +28,7 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="ko" className="dark:bg-gray-950" suppressHydrationWarning> <html lang="ko" className="bg-background" suppressHydrationWarning>
<body className={`${pretendard.variable} ${geist.variable} font-sans antialiased`}> <body className={`${pretendard.variable} ${geist.variable} font-sans antialiased`}>
<Providers>{children}</Providers> <Providers>{children}</Providers>
</body> </body>

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

@@ -583,9 +583,9 @@ export default function Home() {
); );
return ( return (
<div className="h-screen flex flex-col bg-white dark:bg-gray-950"> <div className="h-screen flex flex-col bg-background">
{/* ── Header row 1: Logo + User ── */} {/* ── Header row 1: Logo + User ── */}
<header className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b dark:border-gray-800 shrink-0"> <header className="bg-surface/80 backdrop-blur-md border-b dark:border-gray-800 shrink-0">
<div className="px-5 py-3 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
@@ -600,12 +600,12 @@ export default function Home() {
</div> </div>
<button <button
onClick={handleReset} onClick={handleReset}
className="p-1.5 text-gray-400 dark:text-gray-500 hover:text-brand-500 dark:hover:text-brand-400 transition-colors" className="p-1.5 text-gray-500 dark:text-gray-500 hover:text-brand-500 dark:hover:text-brand-400 transition-colors"
title="초기화" title="초기화"
> >
<svg viewBox="0 0 24 24" className="w-4.5 h-4.5 fill-current"><path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg> <svg viewBox="0 0 24 24" className="w-4.5 h-4.5 fill-current"><path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
</button> </button>
<span className="text-xs text-gray-400 dark:text-gray-500 tabular-nums"> <span className="text-xs text-gray-500 dark:text-gray-500 tabular-nums">
{filteredRestaurants.length}개 {filteredRestaurants.length}개
</span> </span>
<div className="w-px h-4 bg-gray-200 dark:bg-gray-700" /> <div className="w-px h-4 bg-gray-200 dark:bg-gray-700" />
@@ -659,7 +659,7 @@ export default function Home() {
</span> </span>
<button <button
onClick={logout} onClick={logout}
className="px-2 py-0.5 text-[10px] text-gray-400 dark:text-gray-500 border border-gray-200 dark:border-gray-700 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 transition-colors" className="px-2 py-0.5 text-[10px] text-gray-500 dark:text-gray-500 border border-gray-200 dark:border-gray-700 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 transition-colors"
> >
로그아웃 로그아웃
</button> </button>
@@ -694,7 +694,7 @@ export default function Home() {
<p className={`text-xs font-semibold truncate ${ <p className={`text-xs font-semibold truncate ${
channelFilter === ch.channel_name ? "text-brand-600 dark:text-brand-400" : "dark:text-gray-200" channelFilter === ch.channel_name ? "text-brand-600 dark:text-brand-400" : "dark:text-gray-200"
}`}>{ch.channel_name}</p> }`}>{ch.channel_name}</p>
{ch.description && <p className="text-[10px] text-gray-400 dark:text-gray-500 truncate">{ch.description}</p>} {ch.description && <p className="text-[10px] text-gray-500 dark:text-gray-500 truncate">{ch.description}</p>}
</div> </div>
</button> </button>
))} ))}
@@ -705,7 +705,7 @@ export default function Home() {
<div className="flex items-center gap-1.5 text-xs"> <div className="flex items-center gap-1.5 text-xs">
{/* 음식 필터 그룹 */} {/* 음식 필터 그룹 */}
<div className="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-lg px-2 py-1"> <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-lg px-2 py-1">
<span className="text-gray-400 dark:text-gray-500 text-[10px] font-medium shrink-0">음식</span> <span className="text-gray-500 dark:text-gray-500 text-[10px] font-medium shrink-0">음식</span>
<select <select
value={cuisineFilter} value={cuisineFilter}
onChange={(e) => { setCuisineFilter(e.target.value); if (e.target.value) setBoundsFilterOn(false); }} onChange={(e) => { setCuisineFilter(e.target.value); if (e.target.value) setBoundsFilterOn(false); }}
@@ -750,7 +750,7 @@ export default function Home() {
</div> </div>
{/* 지역 필터 그룹 */} {/* 지역 필터 그룹 */}
<div className="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-lg px-2 py-1"> <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-lg px-2 py-1">
<span className="text-gray-400 dark:text-gray-500 text-[10px] font-medium shrink-0">지역</span> <span className="text-gray-500 dark:text-gray-500 text-[10px] font-medium shrink-0">지역</span>
<select <select
value={countryFilter} value={countryFilter}
onChange={(e) => handleCountryChange(e.target.value)} onChange={(e) => handleCountryChange(e.target.value)}
@@ -1074,7 +1074,7 @@ export default function Home() {
<div className="hidden md:flex flex-1 overflow-hidden"> <div className="hidden md:flex flex-1 overflow-hidden">
{viewMode === "map" ? ( {viewMode === "map" ? (
<> <>
<aside className="w-80 bg-white dark:bg-gray-950 border-r dark:border-gray-800 overflow-y-auto shrink-0"> <aside className="w-80 bg-surface border-r dark:border-gray-800 overflow-y-auto shrink-0">
{sidebarContent} {sidebarContent}
</aside> </aside>
<main className="flex-1 relative"> <main className="flex-1 relative">
@@ -1096,7 +1096,7 @@ export default function Home() {
</> </>
) : ( ) : (
<> <>
<aside className="flex-1 bg-white dark:bg-gray-950 overflow-y-auto"> <aside className="flex-1 bg-surface overflow-y-auto">
{sidebarContent} {sidebarContent}
</aside> </aside>
<main className="w-[40%] shrink-0 relative border-l dark:border-gray-800"> <main className="w-[40%] shrink-0 relative border-l dark:border-gray-800">
@@ -1134,7 +1134,7 @@ export default function Home() {
onMyLocation={handleMyLocation} onMyLocation={handleMyLocation}
activeChannel={channelFilter || undefined} activeChannel={channelFilter || undefined}
/> />
<div className="absolute top-2 left-2 bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm rounded-lg px-3 py-1.5 shadow-sm z-10"> <div className="absolute top-2 left-2 bg-surface/90 backdrop-blur-sm rounded-lg px-3 py-1.5 shadow-sm z-10">
<span className="text-xs font-medium text-brand-600 dark:text-brand-400"> <span className="text-xs font-medium text-brand-600 dark:text-brand-400">
내 주변 {filteredRestaurants.length}개 내 주변 {filteredRestaurants.length}개
</span> </span>
@@ -1147,7 +1147,7 @@ export default function Home() {
</div> </div>
) : mobileTab === "profile" ? ( ) : mobileTab === "profile" ? (
/* 내정보 */ /* 내정보 */
<div className="flex-1 overflow-y-auto bg-white dark:bg-gray-950"> <div className="flex-1 overflow-y-auto bg-surface">
{!user ? ( {!user ? (
<div className="flex flex-col items-center justify-center h-full gap-4 px-6"> <div className="flex flex-col items-center justify-center h-full gap-4 px-6">
<p className="text-gray-500 dark:text-gray-400 text-sm">로그인하고 리뷰와 찜 목록을 관리하세요</p> <p className="text-gray-500 dark:text-gray-400 text-sm">로그인하고 리뷰와 찜 목록을 관리하세요</p>
@@ -1207,7 +1207,7 @@ export default function Home() {
</div> </div>
) : ( ) : (
/* 홈 / 식당 목록 / 찜: 리스트 표시 */ /* 홈 / 식당 목록 / 찜: 리스트 표시 */
<div className="flex-1 overflow-y-auto bg-white dark:bg-gray-950"> <div className="flex-1 overflow-y-auto bg-surface">
{mobileTab === "favorites" && !user ? ( {mobileTab === "favorites" && !user ? (
<div className="flex flex-col items-center justify-center h-full gap-4 px-6"> <div className="flex flex-col items-center justify-center h-full gap-4 px-6">
<p className="text-gray-500 dark:text-gray-400 text-sm">로그인하고 찜 목록을 확인하세요</p> <p className="text-gray-500 dark:text-gray-400 text-sm">로그인하고 찜 목록을 확인하세요</p>
@@ -1235,7 +1235,7 @@ export default function Home() {
</div> </div>
{/* ── Mobile Bottom Nav (fixed) ── */} {/* ── Mobile Bottom Nav (fixed) ── */}
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t dark:border-gray-800 bg-white dark:bg-gray-950 safe-area-bottom"> <nav className="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t dark:border-gray-800 bg-surface safe-area-bottom">
<div className="flex items-stretch h-14"> <div className="flex items-stretch h-14">
{([ {([
{ key: "home", label: "홈", icon: ( { key: "home", label: "홈", icon: (
@@ -1260,7 +1260,7 @@ export default function Home() {
className={`flex-1 flex flex-col items-center justify-center gap-0.5 py-2 transition-colors ${ className={`flex-1 flex flex-col items-center justify-center gap-0.5 py-2 transition-colors ${
mobileTab === tab.key mobileTab === tab.key
? "text-brand-600 dark:text-brand-400" ? "text-brand-600 dark:text-brand-400"
: "text-gray-400 dark:text-gray-500" : "text-gray-500 dark:text-gray-500"
}`} }`}
> >
{tab.icon} {tab.icon}
@@ -1271,7 +1271,7 @@ export default function Home() {
</nav> </nav>
{/* Desktop Footer */} {/* Desktop Footer */}
<footer className="hidden md:flex shrink-0 border-t dark:border-gray-800 bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm py-2.5 items-center justify-center gap-2 text-[11px] text-gray-400 dark:text-gray-500 group"> <footer className="hidden md:flex shrink-0 border-t dark:border-gray-800 bg-surface/60 backdrop-blur-sm py-2.5 items-center justify-center gap-2 text-[11px] text-gray-500 dark:text-gray-500 group">
<div className="relative"> <div className="relative">
<img <img
src="/icon.jpg" src="/icon.jpg"

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

@@ -89,7 +89,7 @@ export default function BottomSheet({ open, onClose, children }: BottomSheetProp
{/* Sheet */} {/* Sheet */}
<div <div
ref={sheetRef} 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={{ style={{
height: `${height * 100}vh`, height: `${height * 100}vh`,
transition: dragging ? "none" : "height 0.3s cubic-bezier(0.2, 0, 0, 1)", 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 }} style={{ zIndex: 99999 }}
onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }} 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"> <div className="flex items-center justify-between">
<h3 className="text-base font-semibold dark:text-gray-100">로그인</h3> <h3 className="text-base font-semibold dark:text-gray-100">로그인</h3>
<button <button

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

@@ -231,7 +231,7 @@ export default function MapView({ restaurants, selected, onSelectRestaurant, onB
{onMyLocation && ( {onMyLocation && (
<button <button
onClick={onMyLocation} 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="내 위치" title="내 위치"
> >
<svg viewBox="0 0 24 24" className="w-5 h-5 fill-current"> <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> </button>
)} )}
{channelNames.length > 0 && ( {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) => ( {channelNames.map((ch) => (
<div key={ch} className="flex items-center gap-1"> <div key={ch} className="flex items-center gap-1">
<span <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 ${ 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-brand-50 dark:bg-brand-900/20 border-brand-300 dark:border-brand-700 shadow-brand-100 dark:shadow-brand-900/10" ? "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"> <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> <span className="mr-1">{getCuisineIcon(r.cuisine_type)}</span>
{r.name} {r.name}
</h4> </h4>
@@ -56,14 +56,14 @@ export default function RestaurantList({
</div> </div>
<div className="flex flex-wrap gap-x-2 gap-y-0.5 mt-1.5 text-xs"> <div className="flex flex-wrap gap-x-2 gap-y-0.5 mt-1.5 text-xs">
{r.cuisine_type && ( {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 && ( {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> </div>
{r.region && ( {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 && ( {r.foods_mentioned && r.foods_mentioned.length > 0 && (
<div className="flex flex-wrap gap-1 mt-1.5"> <div className="flex flex-wrap gap-1 mt-1.5">
@@ -76,7 +76,7 @@ export default function RestaurantList({
</span> </span>
))} ))}
{r.foods_mentioned.length > 5 && ( {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> </div>
)} )}

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

@@ -36,7 +36,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="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 && ( {isLoading && (
<div className="absolute right-3 top-1/2 -translate-y-1/2"> <div className="absolute right-3 top-1/2 -translate-y-1/2">