design: 전 사이트 AI 템플릿 그라디언트 완전 제거 (Round 5)

- services/website: featured 가격 카드 linear-gradient → #0d1240 솔리드
- saju/input: blur-3xl orb + radial-gradient 도트 패턴 제거, bg-gradient-to-br → 솔리드+대각 패턴
- payment/fail + success: 헤더 그라디언트→#04102b, 로고 아이콘→#1a56db, 버튼→#1a56db 솔리드
- mypage: 탭 활성 상태·액센트 라인·버튼 전체 gradient → 솔리드 (#1a56db/amber-500)
  amber 알림 카드 gradient → bg-amber-50, 사주 결과 버튼 → #04102b

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-02 02:25:10 +09:00
parent a45256deb6
commit 6a6c73e7c9
5 changed files with 19 additions and 21 deletions

View File

@@ -301,7 +301,7 @@ export default function MyPage() {
onClick={() => setTab(t.key)} onClick={() => setTab(t.key)}
className={`flex-1 flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${ className={`flex-1 flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
tab === t.key tab === t.key
? 'bg-gradient-to-r from-blue-600 to-violet-600 text-white shadow' ? 'bg-[#1a56db] text-white shadow'
: 'text-slate-500 hover:text-slate-700' : 'text-slate-500 hover:text-slate-700'
}`} }`}
> >
@@ -324,7 +324,7 @@ export default function MyPage() {
<div className="space-y-4"> <div className="space-y-4">
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6"> <div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
<h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2"> <h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
<div className="w-1 h-5 bg-gradient-to-b from-blue-600 to-violet-600 rounded-full" /> <div className="w-1 h-5 bg-[#1a56db] rounded-full" />
</h2> </h2>
<div className="space-y-3"> <div className="space-y-3">
@@ -349,7 +349,7 @@ export default function MyPage() {
{/* 구독 중인 서비스 - 요약 (탭으로 유도) */} {/* 구독 중인 서비스 - 요약 (탭으로 유도) */}
{activeSubs.length > 0 && ( {activeSubs.length > 0 && (
<div className="bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl border border-amber-200 p-5 flex items-center justify-between gap-3"> <div className="bg-amber-50 rounded-2xl border border-amber-200 p-5 flex items-center justify-between gap-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl">{PLAN_LABELS[activeSubs[0].product_id]?.emoji ?? '🎟'}</span> <span className="text-2xl">{PLAN_LABELS[activeSubs[0].product_id]?.emoji ?? '🎟'}</span>
<div> <div>
@@ -372,7 +372,7 @@ export default function MyPage() {
{/* 텔레그램 연동 카드 */} {/* 텔레그램 연동 카드 */}
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6"> <div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
<h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2"> <h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
<div className="w-1 h-5 bg-gradient-to-b from-sky-500 to-blue-600 rounded-full" /> <div className="w-1 h-5 bg-[#1a56db] rounded-full" />
<button <button
onClick={() => setShowTelegramGuide(true)} onClick={() => setShowTelegramGuide(true)}
@@ -464,7 +464,7 @@ export default function MyPage() {
<button <button
onClick={handleTelegramConnect} onClick={handleTelegramConnect}
disabled={telegramLinkState === 'generating'} disabled={telegramLinkState === 'generating'}
className="px-5 py-2.5 text-sm font-bold text-white bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-400 hover:to-blue-500 rounded-xl shadow-sm shadow-sky-200 transition disabled:opacity-60" className="px-5 py-2.5 text-sm font-bold text-white bg-[#1a56db] hover:bg-[#1e4fc2] rounded-xl shadow-sm shadow-sky-200 transition disabled:opacity-60"
> >
{telegramLinkState === 'generating' ? '생성 중...' : '텔레그램 연결하기'} {telegramLinkState === 'generating' ? '생성 중...' : '텔레그램 연결하기'}
</button> </button>
@@ -474,7 +474,7 @@ export default function MyPage() {
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6"> <div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
<h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2"> <h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
<div className="w-1 h-5 bg-gradient-to-b from-blue-600 to-violet-600 rounded-full" /> <div className="w-1 h-5 bg-[#1a56db] rounded-full" />
</h2> </h2>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
@@ -606,7 +606,7 @@ export default function MyPage() {
{/* 액션 버튼 */} {/* 액션 버튼 */}
<div className="flex gap-2 flex-wrap"> <div className="flex gap-2 flex-wrap">
<a href="/services/lotto/recommend" <a href="/services/lotto/recommend"
className="flex-1 text-center py-2 text-sm font-bold text-white bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 rounded-xl transition shadow-sm"> className="flex-1 text-center py-2 text-sm font-bold text-white bg-amber-500 hover:bg-amber-400 rounded-xl transition shadow-sm">
</a> </a>
{isActive && ( {isActive && (
@@ -721,7 +721,7 @@ export default function MyPage() {
)} )}
<Link <Link
href={buildSajuResultUrl(rec)} href={buildSajuResultUrl(rec)}
className="block w-full text-center py-2 rounded-xl text-xs font-bold bg-gradient-to-r from-[#04102b] to-[#0a2060] text-white hover:from-[#0a1f5c] hover:to-[#1a3a7a] transition" className="block w-full text-center py-2 rounded-xl text-xs font-bold bg-[#04102b] hover:bg-[#0a1f5c] text-white transition"
> >
{rec.is_paid && rec.interpretation ? 'AI 해석 다시 보기 →' : '결과 보기 →'} {rec.is_paid && rec.interpretation ? 'AI 해석 다시 보기 →' : '결과 보기 →'}
</Link> </Link>
@@ -828,7 +828,7 @@ function EmptyState({
<div className="text-slate-500 text-sm mb-6">{desc}</div> <div className="text-slate-500 text-sm mb-6">{desc}</div>
<Link <Link
href={linkHref} href={linkHref}
className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-6 py-3 rounded-xl font-semibold text-sm hover:opacity-90 transition-all shadow-lg shadow-blue-600/20" className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-6 py-3 rounded-xl font-semibold text-sm transition-all shadow-lg shadow-blue-600/20"
> >
{linkLabel} {linkLabel}
</Link> </Link>

View File

@@ -26,7 +26,7 @@ function FailContent() {
<div className="flex justify-center gap-3 flex-wrap"> <div className="flex justify-center gap-3 flex-wrap">
<button <button
onClick={() => window.history.back()} onClick={() => window.history.back()}
className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20" className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20 transition"
> >
</button> </button>
@@ -45,9 +45,9 @@ export default function PaymentFailPage() {
return ( return (
<div className="min-h-full bg-[#f0f5ff] flex items-center justify-center px-6 py-16"> <div className="min-h-full bg-[#f0f5ff] flex items-center justify-center px-6 py-16">
<div className="w-full max-w-md bg-white rounded-2xl border border-[#dbe8ff] shadow-lg overflow-hidden"> <div className="w-full max-w-md bg-white rounded-2xl border border-[#dbe8ff] shadow-lg overflow-hidden">
<div className="bg-gradient-to-r from-[#04102b] to-[#0a1f5c] px-6 py-4"> <div className="bg-[#04102b] px-6 py-4" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-xs"> <div className="w-7 h-7 rounded-lg bg-[#1a56db] flex items-center justify-center text-white font-bold text-xs">
</div> </div>
<span className="text-white font-bold text-sm"> </span> <span className="text-white font-bold text-sm"> </span>

View File

@@ -70,7 +70,7 @@ function SuccessContent() {
<Link href="/mypage" className="inline-flex items-center gap-2 bg-white border border-[#dbe8ff] text-slate-600 px-5 py-2.5 rounded-xl font-semibold text-sm hover:bg-slate-50 transition"> <Link href="/mypage" className="inline-flex items-center gap-2 bg-white border border-[#dbe8ff] text-slate-600 px-5 py-2.5 rounded-xl font-semibold text-sm hover:bg-slate-50 transition">
</Link> </Link>
<Link href="/" className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-5 py-2.5 rounded-xl font-semibold text-sm"> <Link href="/" className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-5 py-2.5 rounded-xl font-semibold text-sm transition">
</Link> </Link>
</div> </div>
@@ -98,7 +98,7 @@ function SuccessContent() {
<div className="flex justify-center gap-3 flex-wrap"> <div className="flex justify-center gap-3 flex-wrap">
<Link <Link
href="/mypage?tab=payments" href="/mypage?tab=payments"
className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20" className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20 transition"
> >
</Link> </Link>
@@ -117,9 +117,9 @@ export default function PaymentSuccessPage() {
return ( return (
<div className="min-h-full bg-[#f0f5ff] flex items-center justify-center px-6 py-16"> <div className="min-h-full bg-[#f0f5ff] flex items-center justify-center px-6 py-16">
<div className="w-full max-w-md bg-white rounded-2xl border border-[#dbe8ff] shadow-lg overflow-hidden"> <div className="w-full max-w-md bg-white rounded-2xl border border-[#dbe8ff] shadow-lg overflow-hidden">
<div className="bg-gradient-to-r from-[#04102b] to-[#0a1f5c] px-6 py-4"> <div className="bg-[#04102b] px-6 py-4" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-xs"> <div className="w-7 h-7 rounded-lg bg-[#1a56db] flex items-center justify-center text-white font-bold text-xs">
</div> </div>
<span className="text-white font-bold text-sm"> </span> <span className="text-white font-bold text-sm"> </span>

View File

@@ -4,10 +4,8 @@ export default function SajuInputPage() {
return ( return (
<div className="min-h-full bg-[#f0f5ff]"> <div className="min-h-full bg-[#f0f5ff]">
{/* Hero */} {/* Hero */}
<div className="relative overflow-hidden bg-gradient-to-br from-[#04102b] via-[#0a1f5c] to-[#04102b] px-6 py-12"> <div className="relative overflow-hidden px-6 py-12"
<div className="absolute inset-0 opacity-[0.05]" style={{ background: '#04102b', backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}>
style={{ backgroundImage: 'radial-gradient(circle, #a78bfa 1px, transparent 1px)', backgroundSize: '28px 28px' }} />
<div className="absolute right-0 top-0 w-72 h-72 rounded-full bg-violet-500/10 blur-3xl -translate-y-1/2 translate-x-1/3" />
<div className="relative max-w-xl mx-auto text-center"> <div className="relative max-w-xl mx-auto text-center">
<div className="inline-flex items-center gap-2 bg-violet-400/10 border border-violet-400/25 text-violet-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-4 tracking-wide"> <div className="inline-flex items-center gap-2 bg-violet-400/10 border border-violet-400/25 text-violet-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-4 tracking-wide">

View File

@@ -798,7 +798,7 @@ export default function WebsiteServicePage() {
{plans.map((plan) => ( {plans.map((plan) => (
<div key={plan.name} className="ws-plan-card" style={{ <div key={plan.name} className="ws-plan-card" style={{
padding: 32, borderRadius: 20, padding: 32, borderRadius: 20,
background: plan.featured ? 'linear-gradient(135deg, #1e1b4b, #312e81)' : '#080d1a', background: plan.featured ? '#0d1240' : '#080d1a',
border: `1px solid ${plan.featured ? plan.color + '40' : 'rgba(255,255,255,0.05)'}`, border: `1px solid ${plan.featured ? plan.color + '40' : 'rgba(255,255,255,0.05)'}`,
position: 'relative', overflow: 'hidden', position: 'relative', overflow: 'hidden',
boxShadow: plan.featured ? `0 24px 64px ${plan.color}12` : 'none', boxShadow: plan.featured ? `0 24px 64px ${plan.color}12` : 'none',