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

웹 디자인 전면 개편

Browse Source
This commit is contained in:
gahusb
2026-02-17 08:15:41 +09:00
parent 7042373448
commit 028bda551f
16 changed files with 1850 additions and 1050 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/AiInterpretationSection.tsx
View File

@@ -191,14 +191,14 @@ export default function AiInterpretationSection({ sajuData, currentDaeun, daeunL
// Loading View
if (loading || checkingRecord) {
return (
<div className="bg-white rounded-3xl shadow-xl p-8 md:p-12 mb-8 animate-pulse border border-gray-100">
<div className="glass-panel-light rounded-2xl p-8 md:p-12 mb-6 animate-pulse">
<div className="flex flex-col items-center justify-center space-y-6 py-12">
<div className="w-16 h-16 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
<div className="w-16 h-16 border-4 border-[#173658]/20 border-t-[#173658] rounded-full animate-spin"></div>
<div className="text-center space-y-2">
<h3 className="text-xl font-bold text-gray-800">
<h3 className="text-xl font-bold text-[#173658]">
{checkingRecord ? '기존 기록을 확인하고 있습니다...' : '사주를 분석하고 있습니다...'}
</h3>
<p className="text-gray-500">
<p className="text-[#5d6d7e]">
{checkingRecord
? '잠시만 기다려주세요.'
: <>천간과 지지의 조화, 대운의 흐름을 깊이 있게 해석 중입니다.<br />잠시만 기다려주세요.</>
@@ -214,30 +214,30 @@ export default function AiInterpretationSection({ sajuData, currentDaeun, daeunL
if (!isUnlocked) {
return (
<>
<div className="relative bg-white rounded-3xl shadow-2xl p-8 md:p-12 mb-8 border border-gray-100 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-white/80 to-white z-10 flex flex-col items-center justify-center pb-12">
<div className="text-center p-8 bg-white/90 backdrop-blur-md rounded-2xl shadow-xl border border-indigo-100 max-w-sm mx-auto">
<div className="relative glass-panel-light rounded-2xl p-8 md:p-12 mb-6 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#F3E7E3]/80 to-[#F3E7E3] z-10 flex flex-col items-center justify-center pb-12">
<div className="text-center p-8 bg-white/90 backdrop-blur-md rounded-2xl shadow-xl border-2 border-[#173658]/20 max-w-sm mx-auto">
<div className="text-4xl mb-4">🔐</div>
<h3 className="text-2xl font-bold text-gray-900 mb-2">전문가 심층 분석 잠금해제</h3>
<p className="text-gray-600 mb-2">
<h3 className="text-2xl font-bold text-[#173658] mb-2">전문가 심층 분석 잠금해제</h3>
<p className="text-[#5d6d7e] mb-2">
AI 명리학자의 소름 돋는 인생 해석을 확인하세요.
</p>
<p className="text-sm text-gray-500 mb-4">
토큰 1개 사용 | 보유: <span className="font-bold text-indigo-600">{credits}개</span>
<p className="text-sm text-[#5d6d7e] mb-4">
토큰 10개 사용 | 보유: <span className="font-bold text-[#173658]">{credits}개</span>
</p>
<button
onClick={handleTokenUse}
className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold py-3 px-6 rounded-xl hover:shadow-lg hover:scale-105 transition transform flex items-center justify-center gap-2"
className="w-full bg-[#173658] hover:bg-[#1e426a] text-white font-bold py-3 px-6 rounded-xl hover:shadow-lg hover:scale-105 transition transform flex items-center justify-center gap-2"
>
{credits >= 1 ? (
{credits >= 10 ? (
<>
<span>토큰 1개로 잠금해제</span>
<span>토큰 10개로 잠금해제</span>
</>
) : (
<span>토큰 충전하기</span>
)}
</button>
<p className="text-xs text-gray-400 mt-4">
<p className="text-xs text-[#5d6d7e] mt-4">
* 결제 후 평생 소장 가능합니다.<br />
* 같은 생년월일 재접근 시 토큰이 차감되지 않아요.
</p>
@@ -246,8 +246,8 @@ export default function AiInterpretationSection({ sajuData, currentDaeun, daeunL
{/* Blurred Content Placeholder */}
<div className="filter blur-sm select-none opacity-50 pointer-events-none">
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center flex items-center justify-center">
<span className="text-4xl mr-3">✨</span>
<h2 className="text-2xl font-bold text-[#173658] mb-8 text-center flex items-center justify-center">
<span className="text-3xl mr-3">✨</span>
당신을 위한 맞춤 심층 분석
</h2>
<div className="space-y-4">
@@ -290,13 +290,13 @@ export default function AiInterpretationSection({ sajuData, currentDaeun, daeunL
const sections = interpretation ? parseSections(interpretation) : [];
return (
<div className="bg-white rounded-3xl shadow-2xl p-6 md:p-10 mb-8 border border-gray-100">
<div className="glass-panel-light rounded-2xl p-6 md:p-10 mb-6">
<div className="text-center mb-8">
<h2 className="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent mb-2">
<h2 className="text-2xl md:text-3xl font-bold gradient-text mb-2">
✨ 당신을 위한 맞춤 심층 분석
</h2>
<p className="text-gray-500">AI 사주 상담사가 당신만을 위해 정성껏 풀어봤어요.</p>
{user && <span className="inline-block mt-2 px-3 py-1 bg-green-100 text-green-700 text-xs rounded-full">잠금해제 완료 / 평생 소장</span>}
<p className="text-[#5d6d7e]">AI 사주 상담사가 당신만을 위해 정성껏 풀어봤어요.</p>
{user && <span className="inline-block mt-2 px-3 py-1 bg-emerald-100 text-emerald-700 text-xs rounded-full font-bold">잠금해제 완료 / 평생 소장</span>}
</div>
{sections.length > 0 ? (
@@ -312,18 +312,18 @@ export default function AiInterpretationSection({ sajuData, currentDaeun, daeunL
))}
</div>
) : (
<article className="prose prose-lg max-w-none prose-indigo prose-headings:text-indigo-900 prose-p:text-gray-700 prose-li:text-gray-700">
<article className="prose prose-lg max-w-none prose-headings:text-[#173658] prose-p:text-[#5d6d7e] prose-li:text-[#5d6d7e]">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{interpretation || ''}
</ReactMarkdown>
</article>
)}
<div className="mt-10 p-5 bg-indigo-50/50 rounded-2xl border border-indigo-100 flex items-start gap-4">
<div className="mt-10 p-5 bg-[#F3E7E3] rounded-2xl border-2 border-[#173658]/20 flex items-start gap-4">
<span className="text-2xl pt-1">💡</span>
<div>
<h4 className="font-bold text-indigo-900 mb-1">참고하세요</h4>
<p className="text-sm text-indigo-800/80 leading-relaxed">
<h4 className="font-bold text-[#173658] mb-1">참고하세요</h4>
<p className="text-sm text-[#5d6d7e] leading-relaxed">
이 분석은 전통 명리학 알고리즘과 AI를 결합하여 만들어졌어요.
인생의 큰 흐름을 이해하는 데 도움이 되길 바라며,
모든 선택의 주인공은 언제나 당신이라는 걸 잊지 마세요.