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">
+            {isMobile ? (
-                {TABS.map(t => (
+                <SwipeableView
-                    <button
+                    tabs={TABS.map(t => ({
-                        key={t.id}
+                        key: t.id,
-                        className={tab === t.id ? 'active' : ''}
+                        label: t.label,
-                        onClick={() => setTab(t.id)}
+                        content: t.id === 'briefing' ? <BriefingTab /> : t.id === 'analysis' ? <AnalysisTab /> : <PurchaseTab />,
-                    >{t.label}</button>
+                    }))}
-                ))}
+                    activeIndex={tabIndex}
-            </nav>
+                    onTabChange={handleTabChange}
-            <div className="lotto-tab-body">
+                />
-                {tab === 'briefing' && <BriefingTab />}
+            ) : (
-                {tab === 'analysis' && <AnalysisTab />}
+                <>
-                {tab === 'purchase' && <PurchaseTab />}
+                    <nav className="lotto-tabs">
-            </div>
+                        {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>
     );
 }

src/pages/lotto/Lotto.css

@@ -1513,4 +1513,16 @@
 @media (max-width: 768px) {
     .lotto-tabs { overflow-x: auto; }
     .lotto-tabs button { white-space: nowrap; }
+
+    /* 구매 이력 테이블 가로 스크롤 */
+    .purchase-list {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .lotto-ball {
+        width: 32px;
+        height: 32px;
+        font-size: 13px;
+    }
 }