feat(saju-ui-v2): Me.jsx — placeholder + 비활성 4 카드

This commit is contained in:
2026-05-27 02:06:52 +09:00
parent f924c25f16
commit 9453474c69

51
src/pages/saju/Me.jsx Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import './_shell/tokens.css';
import './_shell/shell.css';
import useViewportMode from './_shell/useViewportMode';
import BottomNav from './_shell/BottomNav';
import DesktopHeader from './_shell/DesktopHeader';
import TopRibbon from './_shell/TopRibbon';
import Mascot from './_shell/Mascot';
import MascotBubble from './_shell/MascotBubble';
import OrnateFrame from './_shell/OrnateFrame';
const DISABLED_CARDS = [
{ title: '내 사주 이력', desc: '저장된 풀이를 한 번에' },
{ title: '북마크', desc: '관심 가는 해석 즐겨찾기' },
{ title: '설정', desc: '알림·테마·계정' },
{ title: '문의', desc: '호령이 듣고 있어요' },
];
export default function Me() {
const mode = useViewportMode();
return (
<div className="saju-v2">
{mode === 'desktop' && <DesktopHeader />}
<main className="page paper-bg screen-in">
<TopRibbon />
<div style={{
maxWidth: mode === 'desktop' ? 720 : 'none',
margin: '0 auto', padding: '24px 20px 40px',
textAlign: 'center',
}}>
<Mascot variant="thinking" size={140} style={{ margin: '0 auto 12px' }} />
<MascotBubble tone="purple" tail={false}
text={'마이페이지는 곧 만나요.\n조금만 기다려주세요.'}
style={{ margin: '0 auto 24px' }} />
<div style={{ display: 'grid', gap: 12 }}>
{DISABLED_CARDS.map((card) => (
<OrnateFrame key={card.title} color="#6A4C7C" bg="#FBF7EF" padding="18px 16px"
style={{ opacity: 0.55, textAlign: 'left' }}>
<div className="font-title" style={{ fontSize: 16, color: '#1F2A44' }}>
{card.title}
</div>
<div style={{ marginTop: 6, fontSize: 12, color: '#6B6B6B' }}>{card.desc}</div>
</OrnateFrame>
))}
</div>
</div>
</main>
{mode === 'mobile' && <BottomNav theme="ivory" />}
</div>
);
}