57 lines
2.0 KiB
JavaScript
57 lines
2.0 KiB
JavaScript
import { useCallback, useState } from 'react';
|
|
import BriefingTab from './tabs/BriefingTab';
|
|
import AnalysisTab from './tabs/AnalysisTab';
|
|
import PurchaseTab from './tabs/PurchaseTab';
|
|
import { useIsMobile } from '../../hooks/useIsMobile';
|
|
import SwipeableView from '../../components/SwipeableView';
|
|
|
|
const TABS = [
|
|
{ id: 'briefing', label: '🗓 이번 주 브리핑' },
|
|
{ id: 'analysis', label: '📊 분석·통계' },
|
|
{ id: 'purchase', label: '💰 구매·성과' },
|
|
];
|
|
|
|
export default function Functions() {
|
|
const [tab, setTab] = useState('briefing');
|
|
const isMobile = useIsMobile();
|
|
|
|
const tabIndex = TABS.findIndex(t => t.id === tab);
|
|
|
|
const handleTabChange = useCallback((index) => {
|
|
setTab(TABS[index].id);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="lotto-functions">
|
|
{isMobile ? (
|
|
<SwipeableView
|
|
tabs={TABS.map(t => ({
|
|
key: t.id,
|
|
label: t.label,
|
|
content: t.id === 'briefing' ? <BriefingTab /> : t.id === 'analysis' ? <AnalysisTab /> : <PurchaseTab />,
|
|
}))}
|
|
activeIndex={tabIndex}
|
|
onTabChange={handleTabChange}
|
|
/>
|
|
) : (
|
|
<>
|
|
<nav className="lotto-tabs">
|
|
{TABS.map(t => (
|
|
<button
|
|
key={t.id}
|
|
className={tab === t.id ? 'active' : ''}
|
|
onClick={() => setTab(t.id)}
|
|
>{t.label}</button>
|
|
))}
|
|
</nav>
|
|
<div className="lotto-tab-body">
|
|
{tab === 'briefing' && <BriefingTab />}
|
|
{tab === 'analysis' && <AnalysisTab />}
|
|
{tab === 'purchase' && <PurchaseTab />}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|