feat(lotto): 모바일 반응형 — 스와이프 탭 전환

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/lotto/Functions.jsx

@@ -1,7 +1,9 @@
-import { useState } from 'react';
+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: '🗓 이번 주 브리핑' },
@@ -11,22 +13,44 @@ const TABS = [
 
 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">
-            <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>
+            {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>
     );
 }