From fd13f65faa918b81bb3f3e3457b4123f955e5c8c Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 23 Apr 2026 14:46:54 +0900
Subject: [PATCH] =?UTF-8?q?feat(lotto):=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=E2=80=94=20=EC=8A=A4=EC=99=80?=
 =?UTF-8?q?=EC=9D=B4=ED=94=84=20=ED=83=AD=20=EC=A0=84=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/lotto/Functions.jsx | 54 +++++++++++++++++++++++++----------
 src/pages/lotto/Lotto.css     | 12 ++++++++
 2 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/pages/lotto/Functions.jsx b/src/pages/lotto/Functions.jsx
index 640c51c..9fd5608 100644
--- a/src/pages/lotto/Functions.jsx
+++ b/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>
     );
 }
diff --git a/src/pages/lotto/Lotto.css b/src/pages/lotto/Lotto.css
index 940e225..a53865d 100644
--- a/src/pages/lotto/Lotto.css
+++ b/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;
+    }
 }