gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(phase2.6): 사주 랜딩 라이트 재스킨 — gradient/보라→--jsm, 텍스처 제거

Browse Source 
app/work/saju/page.tsx 순수 시각 변경(className/style만). 히어로·MY RECORDS·
바로시작 CTA·PRICING 비교표·FAQ 전 구간의 #04102b/violet/gradient 하드코드를
--jsm-navy/ink/accent/accent-soft/line/surface-alt 토큰으로 치환하고
repeating-linear-gradient 텍스처와 다크 카드 테두리(#1a3a7a)를 제거해
result 페이지(Phase 2.5)와 동일한 navy 밴드 무테두리 flat 관용구로 정렬.
데이터 조회·상태·JSX 구조는 변경 없음.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-07-03 11:18:43 +09:00
parent fc55e6a928
commit abec100a73
1 changed files with 32 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
app/work/saju/page.tsx
View File

@@ -74,14 +74,14 @@ export default function SajuPage() {
}, []); }, []);
return ( return (
<div className="min-h-full bg-[#f0f5ff]"> <div className="min-h-full bg-[var(--jsm-bg)]">
{/* ─── Hero ─── */} {/* ─── Hero ─── */}
<div className="relative overflow-hidden bg-[#04102b] px-6 py-14 lg:px-12" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px)' }}> <div className="relative overflow-hidden bg-[var(--jsm-navy)] px-6 py-14 lg:px-12">
<div className="relative max-w-3xl mx-auto"> <div className="relative max-w-3xl mx-auto">
<div className="flex items-center gap-2 mb-5"> <div className="flex items-center gap-2 mb-5">
<span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" /> <span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
<span className="text-violet-300/70 text-xs font-mono tracking-widest uppercase">전통 명리학 × AI 해석 · 무료</span> <span className="text-[var(--jsm-accent-soft)] text-xs font-mono tracking-widest uppercase">전통 명리학 × AI 해석 · 무료</span>
</div> </div>
<h1 className="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-5 tracking-tight"> <h1 className="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-5 tracking-tight">
AI가 분석하는<br /> AI가 분석하는<br />
@@ -97,7 +97,7 @@ export default function SajuPage() {
<div className="flex flex-col sm:flex-row items-center justify-center gap-3"> <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
<Link <Link
href="/work/saju/input" href="/work/saju/input"
className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all" className="inline-flex items-center gap-2 bg-[var(--jsm-accent)] hover:bg-[var(--jsm-accent-hover)] text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all"
> >
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
@@ -117,7 +117,7 @@ export default function SajuPage() {
) : ( ) : (
<Link <Link
href="/work/saju/input" href="/work/saju/input"
className="inline-flex items-center gap-2 bg-gradient-to-r from-[#1a56db] to-[#7c3aed] hover:from-[#1e4fc2] hover:to-[#6d28d9] text-white px-8 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-violet-900/40" className="inline-flex items-center gap-2 bg-[var(--jsm-accent)] hover:bg-[var(--jsm-accent-hover)] text-white px-8 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg"
> >
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
@@ -135,19 +135,19 @@ export default function SajuPage() {
{hasPaid && paidRecords.length > 0 && ( {hasPaid && paidRecords.length > 0 && (
<div id="past-records"> <div id="past-records">
<div className="text-center mb-6"> <div className="text-center mb-6">
<p className="text-violet-600 text-xs font-bold uppercase tracking-widest mb-2">MY RECORDS</p> <p className="text-[var(--jsm-accent)] text-xs font-bold uppercase tracking-widest mb-2">MY RECORDS</p>
<h2 className="text-2xl font-extrabold text-[#04102b]">이전 AI 사주 기록</h2> <h2 className="text-2xl font-extrabold text-[var(--jsm-ink)]">이전 AI 사주 기록</h2>
<p className="text-slate-500 text-sm mt-1">결제한 사주 기록을 다시 확인하세요</p> <p className="text-slate-500 text-sm mt-1">결제한 사주 기록을 다시 확인하세요</p>
</div> </div>
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
{paidRecords.map((rec) => ( {paidRecords.map((rec) => (
<div key={rec.id} className="bg-white rounded-2xl border border-[#dbe8ff] p-5 hover:border-violet-300 transition-colors"> <div key={rec.id} className="bg-white rounded-2xl border border-[var(--jsm-line)] p-5 hover:border-[var(--jsm-accent-soft)] transition-colors">
<div className="flex items-start justify-between mb-3"> <div className="flex items-start justify-between mb-3">
<div> <div>
<div className="text-xs text-slate-400 mb-1"> <div className="text-xs text-slate-400 mb-1">
{new Date(rec.created_at).toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' })} {new Date(rec.created_at).toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' })}
</div> </div>
<div className="font-bold text-[#04102b] text-base"> <div className="font-bold text-[var(--jsm-ink)] text-base">
{rec.saju_data.birth_year ?? '?'}년{' '} {rec.saju_data.birth_year ?? '?'}년{' '}
{rec.saju_data.birth_month ?? '?'}월{' '} {rec.saju_data.birth_month ?? '?'}월{' '}
{rec.saju_data.birth_day ?? '?'}일생 {rec.saju_data.birth_day ?? '?'}일생
@@ -168,7 +168,7 @@ export default function SajuPage() {
)} )}
<Link <Link
href={buildResultUrl(rec)} href={buildResultUrl(rec)}
className="block w-full text-center py-2 rounded-xl text-sm font-bold bg-[#04102b] hover:bg-[#0a1f5c] text-white border border-[#1a3a7a] transition" className="block w-full text-center py-2 rounded-xl text-sm font-bold bg-[var(--jsm-navy)] hover:opacity-90 text-white transition"
> >
다시 보기 → 다시 보기 →
</Link> </Link>
@@ -179,18 +179,12 @@ export default function SajuPage() {
)} )}
{/* ─── 바로 시작하기 CTA ─── */} {/* ─── 바로 시작하기 CTA ─── */}
<div <div className="rounded-2xl p-8 text-center bg-[var(--jsm-navy)]">
className="rounded-2xl border border-[#1a3a7a] p-8 text-center"
style={{
background: '#04102b',
backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 30px)',
}}
>
<h3 className="text-2xl font-extrabold text-white mb-2">지금 무료로 시작하세요</h3> <h3 className="text-2xl font-extrabold text-white mb-2">지금 무료로 시작하세요</h3>
<p className="text-blue-200/60 text-sm mb-6">회원가입 없이, 생년월일만 입력하면 바로 확인 가능합니다</p> <p className="text-blue-200/60 text-sm mb-6">회원가입 없이, 생년월일만 입력하면 바로 확인 가능합니다</p>
<Link <Link
href="/work/saju/input" href="/work/saju/input"
className="inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-300 text-[#04102b] px-8 py-3.5 rounded-xl font-bold text-base transition-all" className="inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-300 text-[var(--jsm-ink)] px-8 py-3.5 rounded-xl font-bold text-base transition-all"
> >
사주 입력하러 가기 → 사주 입력하러 가기 →
</Link> </Link>
@@ -199,23 +193,23 @@ export default function SajuPage() {
{/* ─── 무료 vs 유료 비교표 ─── */} {/* ─── 무료 vs 유료 비교표 ─── */}
<div> <div>
<div className="text-center mb-8"> <div className="text-center mb-8">
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p> <p className="text-[var(--jsm-accent)] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p>
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b] tracking-tight">무엇을 분석해드리나요</h2> <h2 className="text-2xl md:text-3xl font-extrabold text-[var(--jsm-ink)] tracking-tight">무엇을 분석해드리나요</h2>
<p className="text-slate-500 text-sm mt-2">기본 원국은 무료, AI 상세 해석은 1,000원</p> <p className="text-slate-500 text-sm mt-2">기본 원국은 무료, AI 상세 해석은 1,000원</p>
</div> </div>
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
{/* 무료 */} {/* 무료 */}
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6 shadow-sm"> <div className="bg-white rounded-2xl border border-[var(--jsm-line)] p-6 shadow-sm">
<div className="flex items-center gap-3 mb-5"> <div className="flex items-center gap-3 mb-5">
<div className="w-10 h-10 rounded-xl bg-[#f0f5ff] border border-[#dbe8ff] flex items-center justify-center"> <div className="w-10 h-10 rounded-xl bg-[var(--jsm-surface-alt)] border border-[var(--jsm-line)] flex items-center justify-center">
<svg className="w-5 h-5 text-[#1a56db]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5 text-[var(--jsm-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
</div> </div>
<div> <div>
<div className="text-xs font-bold text-slate-500 uppercase tracking-wide">FREE</div> <div className="text-xs font-bold text-slate-500 uppercase tracking-wide">FREE</div>
<div className="text-lg font-extrabold text-[#04102b]">무료 기본 분석</div> <div className="text-lg font-extrabold text-[var(--jsm-ink)]">무료 기본 분석</div>
</div> </div>
</div> </div>
<ul className="space-y-3"> <ul className="space-y-3">
@@ -229,18 +223,18 @@ export default function SajuPage() {
].map((item) => ( ].map((item) => (
<li key={item} className="flex items-center gap-2.5 text-sm text-slate-700"> <li key={item} className="flex items-center gap-2.5 text-sm text-slate-700">
<div className="w-4 h-4 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center flex-shrink-0"> <div className="w-4 h-4 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center flex-shrink-0">
<div className="w-1.5 h-1.5 rounded-full bg-[#1a56db]" /> <div className="w-1.5 h-1.5 rounded-full bg-[var(--jsm-accent)]" />
</div> </div>
{item} {item}
</li> </li>
))} ))}
</ul> </ul>
<div className="mt-6 pt-5 border-t border-slate-100"> <div className="mt-6 pt-5 border-t border-slate-100">
<div className="text-2xl font-extrabold text-[#04102b]">무료</div> <div className="text-2xl font-extrabold text-[var(--jsm-ink)]">무료</div>
<div className="text-xs text-slate-500 mt-1">회원가입 불필요</div> <div className="text-xs text-slate-500 mt-1">회원가입 불필요</div>
<Link <Link
href="/work/saju/input" href="/work/saju/input"
className="mt-4 block w-full text-center py-2.5 rounded-xl text-sm font-bold bg-[#f0f5ff] border border-[#dbe8ff] text-[#1a56db] hover:bg-blue-50 transition" className="mt-4 block w-full text-center py-2.5 rounded-xl text-sm font-bold bg-[var(--jsm-surface-alt)] border border-[var(--jsm-line)] text-[var(--jsm-accent)] hover:bg-blue-50 transition"
> >
무료로 시작하기 무료로 시작하기
</Link> </Link>
@@ -248,24 +242,18 @@ export default function SajuPage() {
</div> </div>
{/* AI 해석 (현재 무료) */} {/* AI 해석 (현재 무료) */}
<div <div className="rounded-2xl p-6 shadow-lg relative overflow-hidden bg-[var(--jsm-navy)]">
className="rounded-2xl border border-[#1a3a7a] p-6 shadow-lg relative overflow-hidden" <div className="absolute top-4 right-4 bg-amber-400 text-[var(--jsm-ink)] text-xs font-bold px-2 py-0.5 rounded-lg">
style={{
background: '#04102b',
backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 30px)',
}}
>
<div className="absolute top-4 right-4 bg-amber-400 text-[#04102b] text-xs font-bold px-2 py-0.5 rounded-lg">
1,000원 1,000원
</div> </div>
<div className="flex items-center gap-3 mb-5 relative"> <div className="flex items-center gap-3 mb-5 relative">
<div className="w-10 h-10 rounded-xl bg-violet-500/20 border border-violet-400/30 flex items-center justify-center"> <div className="w-10 h-10 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center">
<svg className="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg> </svg>
</div> </div>
<div> <div>
<div className="text-xs font-bold text-violet-300 uppercase tracking-wide">AI PREMIUM</div> <div className="text-xs font-bold text-[var(--jsm-accent-soft)] uppercase tracking-wide">AI PREMIUM</div>
<div className="text-lg font-extrabold text-white">AI 상세 해석</div> <div className="text-lg font-extrabold text-white">AI 상세 해석</div>
</div> </div>
</div> </div>
@@ -294,7 +282,7 @@ export default function SajuPage() {
<div className="text-xs text-blue-300/70 mt-1 mb-4">로그인 후 결제 · 12가지 항목 AI 해석</div> <div className="text-xs text-blue-300/70 mt-1 mb-4">로그인 후 결제 · 12가지 항목 AI 해석</div>
<Link <Link
href="/work/saju/input" href="/work/saju/input"
className="block w-full text-center py-3 rounded-xl text-sm font-bold transition bg-amber-400 text-[#04102b] hover:bg-amber-300" className="block w-full text-center py-3 rounded-xl text-sm font-bold transition bg-amber-400 text-[var(--jsm-ink)] hover:bg-amber-300"
> >
사주 분석 시작하기 → 사주 분석 시작하기 →
</Link> </Link>
@@ -306,18 +294,18 @@ export default function SajuPage() {
{/* ─── FAQ ─── */} {/* ─── FAQ ─── */}
<div> <div>
<div className="text-center mb-8"> <div className="text-center mb-8">
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">FAQ</p> <p className="text-[var(--jsm-accent)] text-xs font-bold uppercase tracking-widest mb-2">FAQ</p>
<h2 className="text-2xl font-extrabold text-[#04102b]">자주 묻는 질문</h2> <h2 className="text-2xl font-extrabold text-[var(--jsm-ink)]">자주 묻는 질문</h2>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
{faqItems.map((item, i) => ( {faqItems.map((item, i) => (
<div key={i} className="bg-white rounded-2xl border border-[#dbe8ff] p-6"> <div key={i} className="bg-white rounded-2xl border border-[var(--jsm-line)] p-6">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="w-6 h-6 rounded-full bg-[#f0f5ff] border border-[#dbe8ff] flex items-center justify-center flex-shrink-0 mt-0.5"> <div className="w-6 h-6 rounded-full bg-[var(--jsm-surface-alt)] border border-[var(--jsm-line)] flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-[#1a56db] text-xs font-bold">Q</span> <span className="text-[var(--jsm-accent)] text-xs font-bold">Q</span>
</div> </div>
<div> <div>
<p className="font-bold text-[#04102b] text-sm mb-2">{item.q}</p> <p className="font-bold text-[var(--jsm-ink)] text-sm mb-2">{item.q}</p>
<p className="text-slate-600 text-sm leading-relaxed">{item.a}</p> <p className="text-slate-600 text-sm leading-relaxed">{item.a}</p>
</div> </div>
</div> </div>