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,8 +13,28 @@ 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">
+            {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
@@ -27,6 +49,8 @@ export default function Functions() {
                         {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;
+    }
 }