82 lines
3.6 KiB
JavaScript
82 lines
3.6 KiB
JavaScript
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';
|
|
import DesktopHero from './_shell/DesktopHero';
|
|
import DesktopFooter from './_shell/DesktopFooter';
|
|
import PrimaryButton from './_shell/PrimaryButton';
|
|
import { IconPaw } from './_shell/Icons';
|
|
|
|
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 />}
|
|
{mode === 'desktop' ? (
|
|
<main className="page paper-bg screen-in" style={{ marginTop: -78, paddingTop: 78 }}>
|
|
<DesktopHero
|
|
title="상담안내"
|
|
subtitle="필요할 때 언제든 1:1 상담으로 함께 합니다."
|
|
accent="#1F2A44"
|
|
bubble={<div>걱정 마세요!<br />저와 함께 차근차근<br />풀어가요.</div>}
|
|
/>
|
|
<div style={{ maxWidth: 1000, margin: '0 auto', padding: '0 36px 32px' }}>
|
|
<div className="k-frame" style={{ padding: '42px 48px', textAlign: 'center' }}>
|
|
<div className="font-title" style={{ fontSize: 24, color: '#1F2A44', letterSpacing: '-0.03em' }}>
|
|
전문가와 1:1 맞춤 상담
|
|
</div>
|
|
<div style={{ marginTop: 12, fontSize: 15, color: '#6B6B6B', lineHeight: 1.75 }}>
|
|
사주풀이를 넘어, 인생의 큰 결정 앞에서 길잡이가 필요하실 때<br />
|
|
검증된 명리학 전문가가 30분간 깊이 있게 풀어드립니다.
|
|
</div>
|
|
<PrimaryButton color="#1F2A44" full={false} style={{ margin: '24px auto 0', borderRadius: 999 }}>
|
|
상담 신청하기 <IconPaw size={13} color="#E8C76B" />
|
|
</PrimaryButton>
|
|
</div>
|
|
</div>
|
|
<DesktopFooter />
|
|
</main>
|
|
) : (
|
|
<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>
|
|
);
|
|
}
|