feat(saju-ui-v2): Me.jsx — placeholder + 비활성 4 카드
This commit is contained in:
51
src/pages/saju/Me.jsx
Normal file
51
src/pages/saju/Me.jsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user