유틸리티 카드 테마 토큰화 + 호버/그림자 조정
- 카드/아이콘 박스/구분선에 semantic 토큰 적용 - 호버: emerald 색상 변화 대신 scale-[1.02] - 카드 그림자 추가로 라이트 배경과 구분 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
46ff03ced6
commit
7020794add
2 changed files with 98 additions and 15 deletions
|
|
@ -30,6 +30,25 @@
|
|||
--toggle-thumb-from: #e5e7eb;
|
||||
--toggle-thumb-to: #9ca3af;
|
||||
--toggle-thumb-icon: #0f172a;
|
||||
|
||||
--card-bg-from: rgba(17, 24, 39, 0.8);
|
||||
--card-bg-to: rgba(17, 24, 39, 0.4);
|
||||
--card-border: rgba(255, 255, 255, 0.05);
|
||||
--card-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
|
||||
--icon-box-from: #1f2937;
|
||||
--icon-box-to: #111827;
|
||||
--icon-box-border: rgba(255, 255, 255, 0.05);
|
||||
|
||||
--divider-line: rgba(255, 255, 255, 0.1);
|
||||
--skeleton-bg: rgba(255, 255, 255, 0.02);
|
||||
|
||||
--empty-bg: rgba(17, 24, 39, 0.4);
|
||||
--empty-border: rgba(255, 255, 255, 0.05);
|
||||
|
||||
--accent: #10b981;
|
||||
--accent-hover-text: #6ee7b7;
|
||||
--accent-glow: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
/* 테마 토큰 - light */
|
||||
|
|
@ -56,6 +75,25 @@
|
|||
--toggle-thumb-from: #fde68a;
|
||||
--toggle-thumb-to: #f59e0b;
|
||||
--toggle-thumb-icon: #78350f;
|
||||
|
||||
--card-bg-from: #ffffff;
|
||||
--card-bg-to: #ffffff;
|
||||
--card-border: rgba(0, 0, 0, 0.06);
|
||||
--card-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
|
||||
--icon-box-from: #f3f4f6;
|
||||
--icon-box-to: #e5e7eb;
|
||||
--icon-box-border: rgba(0, 0, 0, 0.06);
|
||||
|
||||
--divider-line: rgba(0, 0, 0, 0.1);
|
||||
--skeleton-bg: rgba(0, 0, 0, 0.05);
|
||||
|
||||
--empty-bg: rgba(249, 250, 251, 0.9);
|
||||
--empty-border: rgba(0, 0, 0, 0.06);
|
||||
|
||||
--accent: #059669;
|
||||
--accent-hover-text: #047857;
|
||||
--accent-glow: rgba(16, 185, 129, 0.12);
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
|
|
|
|||
|
|
@ -13,9 +13,20 @@ export default function Home() {
|
|||
<div className="space-y-10 max-w-5xl mx-auto pt-6">
|
||||
{/* 구분선 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<span className="text-xs text-gray-500 uppercase tracking-widest">Utilities</span>
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div
|
||||
className="h-px flex-1 transition-colors duration-300"
|
||||
style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
|
||||
/>
|
||||
<span
|
||||
className="text-xs uppercase tracking-widest transition-colors duration-300"
|
||||
style={{ color: 'var(--text-dim)' }}
|
||||
>
|
||||
Utilities
|
||||
</span>
|
||||
<div
|
||||
className="h-px flex-1 transition-colors duration-300"
|
||||
style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 메뉴 그리드 */}
|
||||
|
|
@ -23,13 +34,25 @@ export default function Home() {
|
|||
{loading ? (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="h-32 rounded-2xl bg-white/[0.02] animate-pulse" />
|
||||
<div
|
||||
key={i}
|
||||
className="h-32 rounded-2xl animate-pulse transition-colors duration-300"
|
||||
style={{ background: 'var(--skeleton-bg)' }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : menus.length === 0 ? (
|
||||
<div className="rounded-2xl border border-white/5 bg-gray-900/40 p-16 text-center">
|
||||
<div
|
||||
className="rounded-2xl border p-16 text-center transition-colors duration-300"
|
||||
style={{ background: 'var(--empty-bg)', borderColor: 'var(--empty-border)' }}
|
||||
>
|
||||
<div className="text-5xl mb-4 opacity-50">🍁</div>
|
||||
<p className="text-gray-400">아직 등록된 기능이 없습니다</p>
|
||||
<p
|
||||
className="transition-colors duration-300"
|
||||
style={{ color: 'var(--text-muted)' }}
|
||||
>
|
||||
아직 등록된 기능이 없습니다
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
|
|
@ -37,16 +60,27 @@ export default function Home() {
|
|||
<Link
|
||||
key={menu.id}
|
||||
to={menu.url}
|
||||
className="group relative overflow-hidden rounded-2xl border border-white/5 bg-gradient-to-br from-gray-900/80 to-gray-900/40 p-6 hover:border-emerald-500/30 transition-all duration-300"
|
||||
className="relative rounded-2xl border p-6 transition-transform duration-300 hover:scale-[1.02] border-[var(--card-border)]"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(to bottom right, var(--card-bg-from), var(--card-bg-to))',
|
||||
boxShadow: 'var(--card-shadow)',
|
||||
}}
|
||||
>
|
||||
<div className="absolute -top-16 -right-16 w-40 h-40 rounded-full bg-emerald-500/0 group-hover:bg-emerald-500/10 blur-3xl transition-all duration-500" />
|
||||
<div className="relative space-y-3">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-gray-800 to-gray-900 border border-white/5 flex items-center justify-center overflow-hidden group-hover:scale-110 group-hover:border-emerald-500/30 transition-all duration-300">
|
||||
<div className="space-y-3">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl border flex items-center justify-center overflow-hidden border-[var(--icon-box-border)]"
|
||||
style={{ backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))' }}
|
||||
>
|
||||
<img src={menu.image?.url || '/default.png'} alt={menu.title} className="w-9 h-9 object-contain" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-semibold group-hover:text-emerald-300 transition">{menu.title}</h2>
|
||||
<p className="text-sm text-gray-400 mt-1 leading-relaxed">{menu.description}</p>
|
||||
<h2 className="font-medium">{menu.title}</h2>
|
||||
<p
|
||||
className="text-sm mt-1 leading-relaxed transition-colors duration-300"
|
||||
style={{ color: 'var(--text-muted)' }}
|
||||
>
|
||||
{menu.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
@ -57,9 +91,20 @@ export default function Home() {
|
|||
|
||||
{/* 구분선 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<span className="text-xs text-gray-500 uppercase tracking-widest">Notices</span>
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div
|
||||
className="h-px flex-1 transition-colors duration-300"
|
||||
style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
|
||||
/>
|
||||
<span
|
||||
className="text-xs uppercase tracking-widest transition-colors duration-300"
|
||||
style={{ color: 'var(--text-dim)' }}
|
||||
>
|
||||
Notices
|
||||
</span>
|
||||
<div
|
||||
className="h-px flex-1 transition-colors duration-300"
|
||||
style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 메이플 공지 */}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue