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