Skip to content

Commit c11336c

Browse files
hailey21hailey21
committed
테마 그라데이션 적용
1 parent 65beed3 commit c11336c

9 files changed

Lines changed: 42 additions & 26 deletions

File tree

‎frontend/src/components/AddBookModal.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export default function AddBookModal({ onClose }: Props) {
105105

106106
{/* ── 선택된 책 미리보기 + 상태 선택 ── */}
107107
{selected && (
108-
<div className="mx-4 mb-3 p-4 rounded-2xl bg-brand-50 border border-brand-100 shrink-0">
108+
<div className="mx-4 mb-3 p-4 rounded-2xl gradient-brand-subtle border border-violet-200 shrink-0">
109109
<div className="flex gap-3 items-start mb-3">
110110
{selected.coverUrl ? (
111111
<img
@@ -114,7 +114,7 @@ export default function AddBookModal({ onClose }: Props) {
114114
className="w-12 h-16 object-cover rounded-lg shadow-sm shrink-0"
115115
/>
116116
) : (
117-
<div className="w-12 h-16 rounded-lg bg-brand-200 flex items-center justify-center shrink-0 text-xl font-bold text-brand-700">
117+
<div className="w-12 h-16 rounded-lg gradient-brand flex items-center justify-center shrink-0 text-xl font-bold text-white">
118118
{selected.title[0]}
119119
</div>
120120
)}
@@ -134,7 +134,7 @@ export default function AddBookModal({ onClose }: Props) {
134134
className={cn(
135135
'flex-1 flex flex-col items-center gap-0.5 py-2 rounded-xl text-xs font-semibold transition-all',
136136
status === opt.value
137-
? 'bg-brand-600 text-white shadow-sm'
137+
? 'gradient-brand text-white shadow-sm'
138138
: 'bg-white text-gray-500 border border-gray-200',
139139
)}
140140
>
@@ -147,7 +147,7 @@ export default function AddBookModal({ onClose }: Props) {
147147
<button
148148
onClick={handleAdd}
149149
disabled={createBook.isPending}
150-
className="mt-3 w-full py-3 bg-brand-600 text-white text-sm font-bold rounded-xl hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed active:scale-95 transition-all"
150+
className="mt-3 w-full py-3 gradient-brand text-white text-sm font-bold rounded-xl hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed active:scale-95 transition-all"
151151
>
152152
{createBook.isPending ? '추가 중...' : '내 서재에 추가하기'}
153153
</button>

‎frontend/src/components/InstallPrompt.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function InstallPrompt() {
1919
<button
2020
type="button"
2121
onClick={() => void promptInstall()}
22-
className="flex-1 text-xs bg-brand-600 text-white py-1.5 rounded-md hover:bg-brand-700 transition-colors"
22+
className="flex-1 text-xs gradient-brand text-white py-1.5 rounded-md hover:opacity-90 transition-all"
2323
>
2424
설치하기
2525
</button>

‎frontend/src/components/Layout.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function Layout() {
1717
{/* ── 데스크탑 사이드바 (md 이상에서만 표시) ── */}
1818
<aside className="hidden md:flex w-56 shrink-0 border-r border-gray-200 bg-white flex-col">
1919
<div className="px-6 py-5 border-b border-gray-100">
20-
<h1 className="text-lg font-bold text-brand-700">GreedyReader</h1>
20+
<h1 className="text-lg font-bold gradient-brand-text">GreedyReader</h1>
2121
<p className="text-xs text-gray-400 mt-0.5">AI 독서노트</p>
2222
</div>
2323

@@ -30,7 +30,7 @@ export default function Layout() {
3030
className={({ isActive }) =>
3131
cn(
3232
'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
33-
isActive ? 'bg-brand-50 text-brand-700' : 'text-gray-600 hover:bg-gray-100',
33+
isActive ? 'gradient-brand-active text-violet-800 font-semibold' : 'text-gray-600 hover:bg-gray-100',
3434
)
3535
}
3636
>
@@ -40,10 +40,10 @@ export default function Layout() {
4040
))}
4141
</nav>
4242

43-
<div className="m-3 p-3 rounded-lg bg-brand-50 border border-brand-100">
44-
<p className="text-xs font-medium text-brand-700">무료 플랜</p>
43+
<div className="m-3 p-3 rounded-lg gradient-brand-subtle border border-violet-200">
44+
<p className="text-xs font-medium text-violet-700">무료 플랜</p>
4545
<p className="text-xs text-gray-500 mt-0.5">AI 기능은 Pro에서</p>
46-
<button className="mt-2 w-full text-xs bg-brand-600 text-white py-1.5 rounded-md hover:bg-brand-700 transition-colors">
46+
<button className="mt-2 w-full text-xs gradient-brand text-white py-1.5 rounded-md hover:opacity-90 transition-all">
4747
업그레이드
4848
</button>
4949
</div>
@@ -59,7 +59,7 @@ export default function Layout() {
5959

6060
{/* 모바일 상단 헤더 (md 미만에서만 표시) */}
6161
<header className="md:hidden flex items-center justify-between px-5 py-4 bg-white border-b border-gray-100">
62-
<h1 className="text-base font-bold text-brand-700">GreedyReader</h1>
62+
<h1 className="text-base font-bold gradient-brand-text">GreedyReader</h1>
6363
<UserButton />
6464
</header>
6565

@@ -83,7 +83,7 @@ export default function Layout() {
8383
className={({ isActive }) =>
8484
cn(
8585
'flex-1 flex flex-col items-center gap-0.5 py-3 text-xs font-medium transition-colors',
86-
isActive ? 'text-brand-600' : 'text-gray-400',
86+
isActive ? 'text-violet-700' : 'text-gray-400',
8787
)
8888
}
8989
>

‎frontend/src/components/UpdatePrompt.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function UpdatePrompt() {
2222
<button
2323
type="button"
2424
onClick={() => void updateServiceWorker(true)}
25-
className="flex-1 text-xs bg-brand-600 text-white py-1.5 rounded-md hover:bg-brand-700 transition-colors"
25+
className="flex-1 text-xs gradient-brand text-white py-1.5 rounded-md hover:opacity-90 transition-all"
2626
>
2727
지금 업데이트
2828
</button>

‎frontend/src/index.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,18 @@
1212
@apply bg-gray-50 text-gray-900;
1313
}
1414
}
15+
16+
@layer utilities {
17+
.gradient-brand {
18+
@apply bg-gradient-to-r from-violet-700 to-indigo-700;
19+
}
20+
.gradient-brand-text {
21+
@apply bg-gradient-to-r from-violet-700 to-indigo-500 bg-clip-text text-transparent;
22+
}
23+
.gradient-brand-subtle {
24+
@apply bg-gradient-to-br from-violet-50 to-indigo-50;
25+
}
26+
.gradient-brand-active {
27+
@apply bg-gradient-to-r from-violet-100 to-indigo-50;
28+
}
29+
}

‎frontend/src/pages/AIPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function AIPage() {
2424
<br />
2525
메모 정리, 책 토론, 도서 추천 기능을 이용할 수 있습니다.
2626
</p>
27-
<button className="px-6 py-3 bg-brand-600 text-white font-medium rounded-xl hover:bg-brand-700 transition-colors">
27+
<button className="px-6 py-3 gradient-brand text-white font-medium rounded-xl hover:opacity-90 transition-all">
2828
Pro로 업그레이드
2929
</button>
3030
</div>
@@ -59,7 +59,7 @@ export default function AIPage() {
5959
className={cn(
6060
'max-w-[70%] rounded-2xl px-4 py-3 text-sm leading-relaxed',
6161
msg.role === 'user'
62-
? 'bg-brand-600 text-white'
62+
? 'gradient-brand text-white'
6363
: 'bg-white border border-gray-200 text-gray-800',
6464
)}
6565
>
@@ -83,7 +83,7 @@ export default function AIPage() {
8383
<button
8484
onClick={handleSend}
8585
disabled={!input.trim()}
86-
className="px-4 py-2.5 bg-brand-600 text-white rounded-xl text-sm font-medium hover:bg-brand-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
86+
className="px-4 py-2.5 gradient-brand text-white rounded-xl text-sm font-medium hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
8787
>
8888
전송
8989
</button>

‎frontend/src/pages/BookDetailPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ export default function BookDetailPage() {
300300
<button
301301
onClick={handleSubmitMemo}
302302
disabled={!content.trim() || createMemo.isPending}
303-
className="w-full py-2.5 bg-brand-600 text-white text-sm font-bold rounded-xl hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed active:scale-95 transition-all"
303+
className="w-full py-2.5 gradient-brand text-white text-sm font-bold rounded-xl hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed active:scale-95 transition-all"
304304
>
305305
{createMemo.isPending ? '저장 중...' : '저장'}
306306
</button>

‎frontend/src/pages/BooksPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export default function BooksPage() {
109109
</div>
110110
<button
111111
onClick={() => setShowAddModal(true)}
112-
className="flex items-center gap-1.5 px-4 py-2.5 bg-brand-600 text-white text-sm font-semibold rounded-xl hover:bg-brand-700 active:scale-95 transition-all shadow-sm"
112+
className="flex items-center gap-1.5 px-4 py-2.5 gradient-brand text-white text-sm font-semibold rounded-xl hover:opacity-90 active:scale-95 transition-all shadow-sm"
113113
>
114114
<span>+</span> 책 추가
115115
</button>
@@ -197,7 +197,7 @@ export default function BooksPage() {
197197
className={cn(
198198
'px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all',
199199
filter === tab.value
200-
? 'bg-brand-600 text-white shadow-sm'
200+
? 'gradient-brand text-white shadow-sm'
201201
: 'bg-gray-100 text-gray-500 hover:bg-gray-200',
202202
)}
203203
>

‎frontend/tailwind.config.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ export default {
66
extend: {
77
colors: {
88
brand: {
9-
50: '#fdf4ff',
10-
100: '#fae8ff',
11-
200: '#f5d0fe',
12-
400: '#e879f9',
13-
500: '#a855f7',
14-
600: '#9333ea',
15-
700: '#7e22ce',
9+
50: '#f5f3ff',
10+
100: '#ede9fe',
11+
200: '#ddd6fe',
12+
400: '#a78bfa',
13+
500: '#7c3aed',
14+
600: '#6d28d9',
15+
700: '#5b21b6',
16+
800: '#4c1d95',
1617
},
1718
},
1819
keyframes: {

0 commit comments

Comments
 (0)