{
  "dependencies": {
    "ethers": "^6.9.0",
    "axios": "^1.6.0"
  }
}

npm install ethers axios
composer require web3p/web3.php

WEB3_NETWORK_NAME=Ethereum
WEB3_CHAIN_ID=1
WEB3_RPC_URL=https://mainnet.infura.io/v3/YOUR_INFURA_KEY
WEB3_EXPLORER_URL=https://etherscan.io

# 테스트넷 설정 (개발용)
WEB3_TESTNET_NAME=Sepolia
WEB3_TESTNET_CHAIN_ID=11155111
WEB3_TESTNET_RPC_URL=https://sepolia.infura.io/v3/YOUR_INFURA_KEY

<?php

return [
    'networks' => [
        'mainnet' => [
            'name' => env('WEB3_NETWORK_NAME', 'Ethereum'),
            'chain_id' => env('WEB3_CHAIN_ID', 1),
            'rpc_url' => env('WEB3_RPC_URL'),
            'explorer_url' => env('WEB3_EXPLORER_URL'),
            'currency' => [
                'name' => 'Ether',
                'symbol' => 'ETH',
                'decimals' => 18
            ]
        ],
        'testnet' => [
            'name' => env('WEB3_TESTNET_NAME', 'Sepolia'),
            'chain_id' => env('WEB3_TESTNET_CHAIN_ID', 11155111),
            'rpc_url' => env('WEB3_TESTNET_RPC_URL'),
            'currency' => [
                'name' => 'Sepolia Ether',
                'symbol' => 'SEP',
                'decimals' => 18
            ]
        ]
    ],
    
    'session_timeout' => 3600, // 1시간
    'nonce_expiry' => 300, // 5분
];

class MetaMaskConnector {
    constructor() {
        this.ethereum = window.ethereum;
        this.provider = null;
        this.signer = null;
        this.account = null;
    }

    // 메타마스크 설치 여부 확인
    isMetaMaskInstalled() {
        return typeof this.ethereum !== 'undefined' && this.ethereum.isMetaMask;
    }

    // 메타마스크 설치 유도
    promptInstall() {
        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        
        if (isMobile) {
            // 모바일: 메타마스크 앱 다운로드 또는 인앱 브라우저로 유도
            const dappUrl = window.location.href;
            window.location.href = `https://metamask.app.link/dapp/${dappUrl}`;
        } else {
            // 데스크톱: 설치 페이지로 이동
            window.open('https://metamask.io/download/', '_blank');
        }
    }

    // 사용자 친화적인 에러 메시지 생성
    getErrorMessage(error) {
        const errorMessages = {
            4001: '메타마스크에서 연결을 거부하셨습니다. 다시 시도해주세요.',
            4100: '요청한 메서드가 지원되지 않습니다.',
            4200: '메타마스크가 잠겨있습니다. 잠금을 해제해주세요.',
            4900: '메타마스크 연결이 끊어졌습니다.',
            4901: '메타마스크가 연결되지 않았습니다.',
            '-32002': '이미 메타마스크 연결 요청이 진행 중입니다. 메타마스크를 확인해주세요.',
            '-32603': '내부 오류가 발생했습니다. 페이지를 새로고침해주세요.'
        };

        const code = error.code?.toString();
        return errorMessages[code] || `연결 중 오류가 발생했습니다: ${error.message}`;
    }
}

export default MetaMaskConnector;

<div id="wallet-connect-container" class="wallet-container">
    <!-- 메타마스크 미설치 상태 -->
    <div id="install-prompt" class="wallet-state" style="display: none;">
        <div class="wallet-icon">🦊</div>
        <h3>메타마스크가 필요해요</h3>
        <p>Web3 서비스를 이용하려면 메타마스크 지갑이 필요합니다.</p>
        <button id="install-metamask-btn" class="btn-primary">
            메타마스크 설치하기
        </button>
    </div>

    <!-- 연결 대기 상태 -->
    <div id="connect-prompt" class="wallet-state" style="display: none;">
        <div class="wallet-icon">🔗</div>
        <h3>지갑 연결하기</h3>
        <p>메타마스크를 연결하여 서비스를 시작하세요.</p>
        <button id="connect-wallet-btn" class="btn-primary">
            메타마스크 연결
        </button>
    </div>

    <!-- 연결 진행 중 -->
    <div id="connecting-state" class="wallet-state" style="display: none;">
        <div class="spinner"></div>
        <h3>연결 중...</h3>
        <p>메타마스크에서 연결을 승인해주세요.</p>
    </div>

    <!-- 네트워크 전환 필요 -->
    <div id="network-switch" class="wallet-state" style="display: none;">
        <div class="wallet-icon">🔄</div>
        <h3>네트워크 전환이 필요해요</h3>
        <p id="network-message"></p>
        <button id="switch-network-btn" class="btn-primary">
            네트워크 전환하기
        </button>
    </div>

    <!-- 연결 완료 -->
    <div id="connected-state" class="wallet-state" style="display: none;">
        <div class="wallet-icon">✅</div>
        <div class="wallet-info">
            <div class="wallet-address" id="wallet-address"></div>
            <div class="wallet-balance" id="wallet-balance"></div>
        </div>
        <button id="disconnect-btn" class="btn-secondary">
            연결 해제
        </button>
    </div>

    <!-- 에러 상태 -->
    <div id="error-state" class="wallet-state" style="display: none;">
        <div class="wallet-icon">⚠️</div>
        <h3>오류가 발생했어요</h3>
        <p id="error-message"></p>
        <button id="retry-btn" class="btn-primary">
            다시 시도하기
        </button>
    </div>
</div>

import MetaMaskConnector from './metamask.js';
import { ethers } from 'ethers';

class WalletUI {
    constructor() {
        this.connector = new MetaMaskConnector();
        this.currentState = 'init';
        this.requiredChainId = window.APP_CONFIG?.chainId || 1;
        this.init();
    }

    init() {
        this.bindEvents();
        this.checkInitialState();
    }

    // 초기 상태 확인
    async checkInitialState() {
        if (!this.connector.isMetaMaskInstalled()) {
            this.showState('install-prompt');
            return;
        }

        // 이전에 연결된 계정이 있는지 확인
        try {
            const accounts = await this.connector.ethereum.request({ 
                method: 'eth_accounts' 
            });
            
            if (accounts.length > 0) {
                await this.handleConnection(accounts[0]);
            } else {
                this.showState('connect-prompt');
            }
        } catch (error) {
            console.error('Initial state check failed:', error);
            this.showState('connect-prompt');
        }
    }

    // 이벤트 바인딩
    bindEvents() {
        document.getElementById('install-metamask-btn')?.addEventListener('click', () => {
            this.connector.promptInstall();
        });

        document.getElementById('connect-wallet-btn')?.addEventListener('click', () => {
            this.connectWallet();
        });

        document.getElementById('switch-network-btn')?.addEventListener('click', () => {
            this.switchNetwork();
        });

        document.getElementById('disconnect-btn')?.addEventListener('click', () => {
            this.disconnect();
        });

        document.getElementById('retry-btn')?.addEventListener('click', () => {
            this.checkInitialState();
        });

        // 메타마스크 이벤트 리스너
        if (this.connector.ethereum) {
            this.connector.ethereum.on('accountsChanged', (accounts) => {
                if (accounts.length === 0) {
                    this.showState('connect-prompt');
                } else {
                    this.handleConnection(accounts[0]);
                }
            });

            this.connector.ethereum.on('chainChanged', () => {
                window.location.reload();
            });
        }
    }

    // 지갑 연결
    async connectWallet() {
        this.showState('connecting-state');

        try {
            const accounts = await this.connector.ethereum.request({
                method: 'eth_requestAccounts'
            });

            await this.handleConnection(accounts[0]);
        } catch (error) {
            console.error('Connection error:', error);
            this.showError(this.connector.getErrorMessage(error));
        }
    }

    // 연결 처리
    async handleConnection(account) {
        try {
            // 네트워크 확인
            const chainId = await this.connector.ethereum.request({ 
                method: 'eth_chainId' 
            });
            const currentChainId = parseInt(chainId, 16);

            if (currentChainId !== this.requiredChainId) {
                this.showNetworkSwitch(currentChainId);
                return;
            }

            // Provider 및 Signer 설정
            this.connector.provider = new ethers.BrowserProvider(this.connector.ethereum);
            this.connector.signer = await this.connector.provider.getSigner();
            this.connector.account = account;

            // 잔액 조회
            const balance = await this.connector.provider.getBalance(account);
            const balanceInEth = ethers.formatEther(balance);

            // 백엔드에 인증 요청
            await this.authenticateWithBackend(account);

            // UI 업데이트
            this.showConnected(account, balanceInEth);

        } catch (error) {
            console.error('Handle connection error:', error);
            this.showError('연결 처리 중 오류가 발생했습니다.');
        }
    }

    // 네트워크 전환
    async switchNetwork() {
        const networkConfig = this.getNetworkConfig(this.requiredChainId);
        
        try {
            await this.connector.ethereum.request({
                method: 'wallet_switchEthereumChain',
                params: [{ chainId: `0x${this.requiredChainId.toString(16)}` }],
            });
        } catch (switchError) {
            // 네트워크가 메타마스크에 추가되지 않은 경우
            if (switchError.code === 4902) {
                try {
                    await this.connector.ethereum.request({
                        method: 'wallet_addEthereumChain',
                        params: [networkConfig],
                    });
                } catch (addError) {
                    this.showError('네트워크 추가에 실패했습니다.');
                }
            } else {
                this.showError('네트워크 전환에 실패했습니다.');
            }
        }
    }

    // 백엔드 인증
    async authenticateWithBackend(address) {
        try {
            // 1. 서버에서 nonce 받기
            const nonceResponse = await axios.post('/api/web3/nonce', { address });
            const nonce = nonceResponse.data.nonce;

            // 2. 메시지 서명
            const message = `재능넷 로그인 인증\n\nNonce: ${nonce}\n주소: ${address}`;
            const signature = await this.connector.signer.signMessage(message);

            // 3. 서명 검증 및 로그인
            const authResponse = await axios.post('/api/web3/verify', {
                address,
                signature,
                nonce
            });

            // 4. 토큰 저장
            localStorage.setItem('auth_token', authResponse.data.token);
            
            return true;
        } catch (error) {
            console.error('Backend authentication error:', error);
            throw error;
        }
    }

    // 상태 표시
    showState(stateName) {
        document.querySelectorAll('.wallet-state').forEach(el => {
            el.style.display = 'none';
        });
        document.getElementById(stateName).style.display = 'block';
        this.currentState = stateName;
    }

    // 네트워크 전환 UI
    showNetworkSwitch(currentChainId) {
        const networkNames = {
            1: '이더리움 메인넷',
            5: '고얼리 테스트넷',
            137: '폴리곤 메인넷',
            80001: '뭄바이 테스트넷'
        };

        const message = `현재 ${networkNames[currentChainId] || '알 수 없는 네트워크'}에 연결되어 있습니다. ${networkNames[this.requiredChainId]}으로 전환해주세요.`;
        
        document.getElementById('network-message').textContent = message;
        this.showState('network-switch');
    }

    // 연결 완료 UI
    showConnected(address, balance) {
        const shortAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
        document.getElementById('wallet-address').textContent = shortAddress;
        document.getElementById('wallet-balance').textContent = `${parseFloat(balance).toFixed(4)} ETH`;
        this.showState('connected-state');

        // 성공 토스트 메시지
        this.showToast('지갑이 성공적으로 연결되었습니다! 🎉', 'success');
    }

    // 에러 표시
    showError(message) {
        document.getElementById('error-message').textContent = message;
        this.showState('error-state');
        this.showToast(message, 'error');
    }

    // 연결 해제
    disconnect() {
        this.connector.account = null;
        this.connector.provider = null;
        this.connector.signer = null;
        localStorage.removeItem('auth_token');
        this.showState('connect-prompt');
        this.showToast('지갑 연결이 해제되었습니다.', 'info');
    }

    // 토스트 메시지
    showToast(message, type = 'info') {
        // 토스트 구현 (간단한 예시)
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.textContent = message;
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.classList.add('show');
        }, 100);

        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }

    // 네트워크 설정 가져오기
    getNetworkConfig(chainId) {
        const configs = {
            1: {
                chainId: '0x1',
                chainName: 'Ethereum Mainnet',
                nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
                rpcUrls: ['https://mainnet.infura.io/v3/'],
                blockExplorerUrls: ['https://etherscan.io']
            },
            137: {
                chainId: '0x89',
                chainName: 'Polygon Mainnet',
                nativeCurrency: { name: 'MATIC', symbol: 'MATIC', decimals: 18 },
                rpcUrls: ['https://polygon-rpc.com/'],
                blockExplorerUrls: ['https://polygonscan.com']
            }
        };

        return configs[chainId];
    }
}

// 초기화
document.addEventListener('DOMContentLoaded', () => {
    window.walletUI = new WalletUI();
});

export default WalletUI;

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::create('web3_users', function (Blueprint $table) {
            $table->id();
            $table->string('wallet_address', 42)->unique();
            $table->string('nonce')->nullable();
            $table->timestamp('nonce_expires_at')->nullable();
            $table->string('username')->nullable();
            $table->string('email')->nullable();
            $table->json('metadata')->nullable();
            $table->timestamp('last_login_at')->nullable();
            $table->timestamps();
            
            $table->index('wallet_address');
            $table->index('nonce_expires_at');
        });

        Schema::create('web3_sessions', function (Blueprint $table) {
            $table->id();
            $table->foreignId('user_id')->constrained('web3_users')->onDelete('cascade');
            $table->string('token')->unique();
            $table->string('ip_address', 45)->nullable();
            $table->text('user_agent')->nullable();
            $table->timestamp('expires_at');
            $table->timestamps();
            
            $table->index('token');
            $table->index('expires_at');
        });
    }

    public function down()
    {
        Schema::dropIfExists('web3_sessions');
        Schema::dropIfExists('web3_users');
    }
};

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Str;
use Carbon\Carbon;

class Web3User extends Model
{
    protected $fillable = [
        'wallet_address',
        'nonce',
        'nonce_expires_at',
        'username',
        'email',
        'metadata',
        'last_login_at'
    ];

    protected $casts = [
        'metadata' => 'array',
        'nonce_expires_at' => 'datetime',
        'last_login_at' => 'datetime'
    ];

    // Nonce 생성
    public function generateNonce()
    {
        $this->nonce = Str::random(32);
        $this->nonce_expires_at = Carbon::now()->addMinutes(5);
        $this->save();
        
        return $this->nonce;
    }

    // Nonce 검증
    public function validateNonce($nonce)
    {
        if ($this->nonce !== $nonce) {
            return false;
        }

        if ($this->nonce_expires_at < Carbon::now()) {
            return false;
        }

        return true;
    }

    // Nonce 무효화
    public function invalidateNonce()
    {
        $this->nonce = null;
        $this->nonce_expires_at = null;
        $this->save();
    }

    // 세션 관계
    public function sessions()
    {
        return $this->hasMany(Web3Session::class, 'user_id');
    }

    // 활성 세션만
    public function activeSessions()
    {
        return $this->sessions()->where('expires_at', '>', Carbon::now());
    }

    // 로그인 시간 업데이트
    public function updateLastLogin()
    {
        $this->last_login_at = Carbon::now();
        $this->save();
    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Str;
use Carbon\Carbon;

class Web3Session extends Model
{
    protected $fillable = [
        'user_id',
        'token',
        'ip_address',
        'user_agent',
        'expires_at'
    ];

    protected $casts = [
        'expires_at' => 'datetime'
    ];

    // 토큰 생성
    public static function createToken($userId, $request)
    {
        return self::create([
            'user_id' => $userId,
            'token' => Str::random(64),
            'ip_address' => $request->ip(),
            'user_agent' => $request->userAgent(),
            'expires_at' => Carbon::now()->addHours(24)
        ]);
    }

    // 토큰으로 세션 찾기
    public static function findByToken($token)
    {
        return self::where('token', $token)
            ->where('expires_at', '>', Carbon::now())
            ->first();
    }

    // 사용자 관계
    public function user()
    {
        return $this->belongsTo(Web3User::class, 'user_id');
    }

    // 만료 여부 확인
    public function isExpired()
    {
        return $this->expires_at < Carbon::now();
    }
}

<?php

namespace App\Services;

use App\Models\Web3User;
use App\Models\Web3Session;
use Illuminate\Support\Facades\Log;
use kornrunner\Keccak;

class Web3AuthService
{
    /**
     * Nonce 요청 처리
     */
    public function requestNonce($walletAddress)
    {
        // 주소 유효성 검증
        if (!$this->isValidAddress($walletAddress)) {
            throw new \Exception('Invalid wallet address');
        }

        // 주소 정규화 (체크섬 적용)
        $walletAddress = $this->toChecksumAddress($walletAddress);

        // 사용자 찾기 또는 생성
        $user = Web3User::firstOrCreate(
            ['wallet_address' => $walletAddress],
            ['metadata' => []]
        );

        // Nonce 생성
        $nonce = $user->generateNonce();

        return [
            'nonce' => $nonce,
            'message' => $this->generateMessage($walletAddress, $nonce)
        ];
    }

    /**
     * 서명 검증 및 로그인
     */
    public function verifySignature($walletAddress, $signature, $nonce, $request)
    {
        // 주소 정규화
        $walletAddress = $this->toChecksumAddress($walletAddress);

        // 사용자 찾기
        $user = Web3User::where('wallet_address', $walletAddress)->first();
        
        if (!$user) {
            throw new \Exception('User not found');
        }

        // Nonce 검증
        if (!$user->validateNonce($nonce)) {
            throw new \Exception('Invalid or expired nonce');
        }

        // 메시지 생성
        $message = $this->generateMessage($walletAddress, $nonce);

        // 서명 검증
        $recoveredAddress = $this->recoverAddress($message, $signature);

        if (strtolower($recoveredAddress) !== strtolower($walletAddress)) {
            Log::warning('Signature verification failed', [
                'expected' => $walletAddress,
                'recovered' => $recoveredAddress
            ]);
            throw new \Exception('Signature verification failed');
        }

        // Nonce 무효화
        $user->invalidateNonce();

        // 로그인 시간 업데이트
        $user->updateLastLogin();

        // 세션 생성
        $session = Web3Session::createToken($user->id, $request);

        return [
            'user' => $user,
            'token' => $session->token,
            'expires_at' => $session->expires_at
        ];
    }

    /**
     * 서명에서 주소 복구
     */
    private function recoverAddress($message, $signature)
    {
        // 이더리움 서명 메시지 프리픽스 추가
        $hash = Keccak::hash("\x19Ethereum Signed Message:\n" . strlen($message) . $message, 256);

        // 서명 분해
        $signature = str_replace('0x', '', $signature);
        $r = substr($signature, 0, 64);
        $s = substr($signature, 64, 64);
        $v = hexdec(substr($signature, 128, 2));

        // v 값 조정
        if ($v < 27) {
            $v += 27;
        }

        // 공개키 복구
        $pubkey = $this->recoverPublicKey($hash, $r, $s, $v);

        // 주소 추출
        $address = '0x' . substr(Keccak::hash(substr(hex2bin($pubkey), 1), 256), 24);

        return $this->toChecksumAddress($address);
    }

    /**
     * 공개키 복구 (간소화된 버전)
     */
    private function recoverPublicKey($hash, $r, $s, $v)
    {
        // 실제 프로덕션에서는 elliptic curve 라이브러리 사용 권장
        // 여기서는 개념 설명을 위한 간소화된 버전
        
        // web3p/web3.php 라이브러리 사용 예시
        $ec = new \Elliptic\EC('secp256k1');
        $signature = [
            'r' => $r,
            's' => $s,
            'recoveryParam' => $v - 27
        ];
        
        $publicKey = $ec->recoverPubKey($hash, $signature, $signature['recoveryParam']);
        return $publicKey->encode('hex');
    }

    /**
     * 로그인 메시지 생성
     */
    private function generateMessage($walletAddress, $nonce)
    {
        return "재능넷 로그인 인증\n\n" .
               "이 서명은 재능넷(jaenung.net)에 로그인하기 위한 것입니다.\n\n" .
               "Nonce: {$nonce}\n" .
               "주소: {$walletAddress}\n\n" .
               "이 서명은 어떠한 트랜잭션도 발생시키지 않으며,\n" .
               "가스 비용이 들지 않습니다.";
    }

    /**
     * 주소 유효성 검증
     */
    private function isValidAddress($address)
    {
        return preg_match('/^0x[a-fA-F0-9]{40}$/', $address);
    }

    /**
     * 체크섬 주소로 변환
     */
    private function toChecksumAddress($address)
    {
        $address = strtolower(str_replace('0x', '', $address));
        $hash = Keccak::hash($address, 256);
        $checksum = '0x';

        for ($i = 0; $i < 40; $i++) {
            $checksum .= (intval($hash[$i], 16) > 7) 
                ? strtoupper($address[$i]) 
                : $address[$i];
        }

        return $checksum;
    }

    /**
     * 토큰으로 사용자 인증
     */
    public function authenticateByToken($token)
    {
        $session = Web3Session::findByToken($token);

        if (!$session) {
            throw new \Exception('Invalid or expired token');
        }

        return $session->user;
    }

    /**
     * 로그아웃
     */
    public function logout($token)
    {
        $session = Web3Session::where('token', $token)->first();

        if ($session) {
            $session->delete();
        }
    }
}

<?php

namespace App\Http\Controllers;

use App\Services\Web3AuthService;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class Web3AuthController extends Controller
{
    protected $web3Auth;

    public function __construct(Web3AuthService $web3Auth)
    {
        $this->web3Auth = $web3Auth;
    }

    /**
     * Nonce 요청
     */
    public function requestNonce(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'address' => 'required|string|regex:/^0x[a-fA-F0-9]{40}$/'
        ]);

        if ($validator->fails()) {
            return response()->json([
                'success' => false,
                'message' => '유효하지 않은 지갑 주소입니다.',
                'errors' => $validator->errors()
            ], 400);
        }

        try {
            $result = $this->web3Auth->requestNonce($request->address);

            return response()->json([
                'success' => true,
                'nonce' => $result['nonce'],
                'message' => $result['message']
            ]);
        } catch (\Exception $e) {
            return response()->json([
                'success' => false,
                'message' => 'Nonce 생성에 실패했습니다.',
                'error' => $e->getMessage()
            ], 500);
        }
    }

    /**
     * 서명 검증 및 로그인
     */
    public function verify(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'address' => 'required|string|regex:/^0x[a-fA-F0-9]{40}$/',
            'signature' => 'required|string',
            'nonce' => 'required|string'
        ]);

        if ($validator->fails()) {
            return response()->json([
                'success' => false,
                'message' => '필수 정보가 누락되었습니다.',
                'errors' => $validator->errors()
            ], 400);
        }

        try {
            $result = $this->web3Auth->verifySignature(
                $request->address,
                $request->signature,
                $request->nonce,
                $request
            );

            return response()->json([
                'success' => true,
                'message' => '로그인에 성공했습니다.',
                'token' => $result['token'],
                'user' => [
                    'wallet_address' => $result['user']->wallet_address,
                    'username' => $result['user']->username,
                    'last_login_at' => $result['user']->last_login_at
                ],
                'expires_at' => $result['expires_at']
            ]);
        } catch (\Exception $e) {
            return response()->json([
                'success' => false,
                'message' => '인증에 실패했습니다.',
                'error' => $e->getMessage()
            ], 401);
        }
    }

    /**
     * 현재 사용자 정보
     */
    public function me(Request $request)
    {
        try {
            $token = $request->bearerToken();
            
            if (!$token) {
                return response()->json([
                    'success' => false,
                    'message' => '인증 토큰이 필요합니다.'
                ], 401);
            }

            $user = $this->web3Auth->authenticateByToken($token);

            return response()->json([
                'success' => true,
                'user' => [
                    'wallet_address' => $user->wallet_address,
                    'username' => $user->username,
                    'email' => $user->email,
                    'metadata' => $user->metadata,
                    'last_login_at' => $user->last_login_at
                ]
            ]);
        } catch (\Exception $e) {
            return response()->json([
                'success' => false,
                'message' => '인증에 실패했습니다.'
            ], 401);
        }
    }

    /**
     * 로그아웃
     */
    public function logout(Request $request)
    {
        try {
            $token = $request->bearerToken();
            
            if ($token) {
                $this->web3Auth->logout($token);
            }

            return response()->json([
                'success' => true,
                'message' => '로그아웃되었습니다.'
            ]);
        } catch (\Exception $e) {
            return response()->json([
                'success' => false,
                'message' => '로그아웃에 실패했습니다.'
            ], 500);
        }
    }
}

<?php

use App\Http\Controllers\Web3AuthController;
use Illuminate\Support\Facades\Route;

Route::prefix('web3')->group(function () {
    // 인증 불필요
    Route::post('/nonce', [Web3AuthController::class, 'requestNonce']);
    Route::post('/verify', [Web3AuthController::class, 'verify']);

    // 인증 필요
    Route::middleware('auth:web3')->group(function () {
        Route::get('/me', [Web3AuthController::class, 'me']);
        Route::post('/logout', [Web3AuthController::class, 'logout']);
    });
});

<?php

namespace App\Http\Middleware;

use Closure;
use App\Services\Web3AuthService;
use Illuminate\Http\Request;

class Web3Authenticate
{
    protected $web3Auth;

    public function __construct(Web3AuthService $web3Auth)
    {
        $this->web3Auth = $web3Auth;
    }

    public function handle(Request $request, Closure $next)
    {
        $token = $request->bearerToken();

        if (!$token) {
            return response()->json([
                'success' => false,
                'message' => '인증 토큰이 필요합니다.'
            ], 401);
        }

        try {
            $user = $this->web3Auth->authenticateByToken($token);
            $request->merge(['web3_user' => $user]);
            
            return $next($request);
        } catch (\Exception $e) {
            return response()->json([
                'success' => false,
                'message' => '유효하지 않은 토큰입니다.'
            ], 401);
        }
    }
}

protected $middlewareAliases = [
    // ... 기존 미들웨어들
    'auth:web3' => \App\Http\Middleware\Web3Authenticate::class,
];

class ConnectionCache {
    constructor() {
        this.CACHE_KEY = 'web3_connection_cache';
        this.CACHE_DURATION = 24 * 60 * 60 * 1000; // 24시간
    }

    // 연결 정보 저장
    save(data) {
        const cacheData = {
            ...data,
            timestamp: Date.now()
        };
        localStorage.setItem(this.CACHE_KEY, JSON.stringify(cacheData));
    }

    // 연결 정보 불러오기
    load() {
        try {
            const cached = localStorage.getItem(this.CACHE_KEY);
            if (!cached) return null;

            const data = JSON.parse(cached);
            
            // 캐시 만료 확인
            if (Date.now() - data.timestamp > this.CACHE_DURATION) {
                this.clear();
                return null;
            }

            return data;
        } catch (error) {
            console.error('Cache load error:', error);
            return null;
        }
    }

    // 캐시 삭제
    clear() {
        localStorage.removeItem(this.CACHE_KEY);
    }

    // 빠른 재연결 시도
    async quickReconnect(connector) {
        const cached = this.load();
        if (!cached || !cached.address) return false;

        try {
            // 메타마스크에 저장된 계정 확인
            const accounts = await connector.ethereum.request({ 
                method: 'eth_accounts' 
            });

            if (accounts.length > 0 && 
                accounts[0].toLowerCase() === cached.address.toLowerCase()) {
                return cached.address;
            }
        } catch (error) {
            console.error('Quick reconnect failed:', error);
        }

        return false;
    }
}

export default ConnectionCache;

class RequestDebouncer {
    constructor() {
        this.pending = new Map();
    }

    // 디바운스된 요청 실행
    async execute(key, fn, delay = 300) {
        // 이미 진행 중인 요청이 있으면 대기
        if (this.pending.has(key)) {
            return this.pending.get(key);
        }

        // 새 요청 생성
        const promise = new Promise(async (resolve, reject) => {
            try {
                await new Promise(r => setTimeout(r, delay));
                const result = await fn();
                resolve(result);
            } catch (error) {
                reject(error);
            } finally {
                this.pending.delete(key);
            }
        });

        this.pending.set(key, promise);
        return promise;
    }

    // 특정 키의 요청 취소
    cancel(key) {
        this.pending.delete(key);
    }

    // 모든 요청 취소
    cancelAll() {
        this.pending.clear();
    }
}

export default new RequestDebouncer();

class Web3Preloader {
    constructor(connector) {
        this.connector = connector;
        this.preloadStarted = false;
    }

    // 호버 시 프리로드
    onButtonHover() {
        if (this.preloadStarted) return;
        this.preloadStarted = true;

        // 메타마스크 준비 상태 확인
        if (this.connector.isMetaMaskInstalled()) {
            // Provider 미리 초기화
            this.preloadProvider();
        }
    }

    // Provider 프리로드
    async preloadProvider() {
        try {
            // 가벼운 요청으로 연결 준비
            await this.connector.ethereum.request({ 
                method: 'eth_chainId' 
            });
            
            console.log('Provider preloaded');
        } catch (error) {
            // 에러는 무시 (실제 연결 시 처리)
            console.log('Preload skipped:', error.message);
        }
    }

    // 네트워크 정보 프리페치
    async prefetchNetworkInfo() {
        try {
            const [chainId, accounts] = await Promise.all([
                this.connector.ethereum.request({ method: 'eth_chainId' }),
                this.connector.ethereum.request({ method: 'eth_accounts' })
            ]);

            return { chainId, accounts };
        } catch (error) {
            return null;
        }
    }
}

export default Web3Preloader;

<?php

namespace App\Services;

use Illuminate\Support\Facades\Redis;
use Illuminate\Support\Facades\Cache;

class Web3CacheService
{
    private $noncePrefix = 'web3:nonce:';
    private $sessionPrefix = 'web3:session:';
    private $userPrefix = 'web3:user:';

    /**
     * Nonce 캐싱
     */
    public function cacheNonce($address, $nonce, $ttl = 300)
    {
        $key = $this->noncePrefix . strtolower($address);
        Cache::put($key, $nonce, $ttl);
    }

    public function getNonce($address)
    {
        $key = $this->noncePrefix . strtolower($address);
        return Cache::get($key);
    }

    public function deleteNonce($address)
    {
        $key = $this->noncePrefix . strtolower($address);
        Cache::forget($key);
    }

    /**
     * 세션 캐싱
     */
    public function cacheSession($token, $userId, $ttl = 86400)
    {
        $key = $this->sessionPrefix . $token;
        Cache::put($key, $userId, $ttl);
    }

    public function getSession($token)
    {
        $key = $this->sessionPrefix . $token;
        return Cache::get($key);
    }

    public function deleteSession($token)
    {
        $key = $this->sessionPrefix . $token;
        Cache::forget($key);
    }

    /**
     * 사용자 정보 캐싱
     */
    public function cacheUser($address, $userData, $ttl = 3600)
    {
        $key = $this->userPrefix . strtolower($address);
        Cache::put($key, $userData, $ttl);
    }

    public function getUser($address)
    {
        $key = $this->userPrefix . strtolower($address);
        return Cache::get($key);
    }

    public function invalidateUser($address)
    {
        $key = $this->userPrefix . strtolower($address);
        Cache::forget($key);
    }

    /**
     * Rate Limiting
     */
    public function checkRateLimit($address, $maxAttempts = 5, $decayMinutes = 1)
    {
        $key = 'rate_limit:' . strtolower($address);
        $attempts = Cache::get($key, 0);

        if ($attempts >= $maxAttempts) {
            return false;
        }

        Cache::put($key, $attempts + 1, $decayMinutes * 60);
        return true;
    }
}

<?php

namespace App\Services;

use App\Models\Web3User;
use Illuminate\Support\Facades\DB;

class OptimizedWeb3AuthService extends Web3AuthService
{
    protected $cache;

    public function __construct(Web3CacheService $cache)
    {
        $this->cache = $cache;
    }

    /**
     * 최적화된 Nonce 요청
     */
    public function requestNonce($walletAddress)
    {
        // Rate Limiting 체크
        if (!$this->cache->checkRateLimit($walletAddress)) {
            throw new \Exception('Too many requests. Please try again later.');
        }

        // 캐시에서 먼저 확인
        $cachedNonce = $this->cache->getNonce($walletAddress);
        if ($cachedNonce) {
            return [
                'nonce' => $cachedNonce,
                'message' => $this->generateMessage($walletAddress, $cachedNonce)
            ];
        }

        // DB 조회 (캐시 미스)
        $walletAddress = $this->toChecksumAddress($walletAddress);
        
        $user = Web3User::firstOrCreate(
            ['wallet_address' => $walletAddress],
            ['metadata' => []]
        );

        $nonce = $user->generateNonce();

        // 캐시에 저장
        $this->cache->cacheNonce($walletAddress, $nonce, 300);

        return [
            'nonce' => $nonce,
            'message' => $this->generateMessage($walletAddress, $nonce)
        ];
    }

    /**
     * 최적화된 서명 검증
     */
    public function verifySignature($walletAddress, $signature, $nonce, $request)
    {
        $walletAddress = $this->toChecksumAddress($walletAddress);

        // 캐시에서 Nonce 확인
        $cachedNonce = $this->cache->getNonce($walletAddress);
        if ($cachedNonce !== $nonce) {
            throw new \Exception('Invalid or expired nonce');
        }

        // 캐시에서 사용자 정보 확인
        $userData = $this->cache->getUser($walletAddress);
        
        if (!$userData) {
            $user = Web3User::where('wallet_address', $walletAddress)->first();
            if (!$user) {
                throw new \Exception('User not found');
            }
            
            // 캐시에 저장
            $this->cache->cacheUser($walletAddress, $user->toArray());
        } else {
            $user = Web3User::find($userData['id']);
        }

        // 서명 검증
        $message = $this->generateMessage($walletAddress, $nonce);
        $recoveredAddress = $this->recoverAddress($message, $signature);

        if (strtolower($recoveredAddress) !== strtolower($walletAddress)) {
            throw new \Exception('Signature verification failed');
        }

        // Nonce 무효화
        $this->cache->deleteNonce($walletAddress);

        // 트랜잭션으로 묶어서 처리
        DB::transaction(function () use ($user) {
            $user->invalidateNonce();
            $user->updateLastLogin();
        });

        // 세션 생성
        $session = Web3Session::createToken($user->id, $request);

        // 세션 캐싱
        $this->cache->cacheSession($session->token, $user->id, 86400);

        return [
            'user' => $user,
            'token' => $session->token,
            'expires_at' => $session->expires_at
        ];
    }

    /**
     * 최적화된 토큰 인증
     */
    public function authenticateByToken($token)
    {
        // 캐시에서 먼저 확인
        $userId = $this->cache->getSession($token);
        
        if ($userId) {
            $user = Web3User::find($userId);
            if ($user) {
                return $user;
            }
        }

        // 캐시 미스 - DB 조회
        $session = Web3Session::findByToken($token);
        if (!$session) {
            throw new \Exception('Invalid or expired token');
        }

        // 캐시 업데이트
        $this->cache->cacheSession($token, $session->user_id, 86400);

        return $session->user;
    }
}

<div class="progress-container">
    <div class="progress-steps">
        <div class="progress-step" data-step="1">
            <div class="step-icon">🦊</div>
            <div class="step-label">메타마스크 연결</div>
            <div class="step-status"></div>
        </div>
        
        <div class="progress-line"></div>
        
        <div class="progress-step" data-step="2">
            <div class="step-icon">🔐</div>
            <div class="step-label">서명 요청</div>
            <div class="step-status"></div>
        </div>
        
        <div class="progress-line"></div>
        
        <div class="progress-step" data-step="3">
            <div class="step-icon">✅</div>
            <div class="step-label">인증 완료</div>
            <div class="step-status"></div>
        </div>
    </div>
    
    <div class="progress-message" id="progress-message">
        메타마스크를 열어주세요...
    </div>
</div>

class ProgressTracker {
    constructor() {
        this.currentStep = 0;
        this.steps = [
            { id: 1, message: '메타마스크를 열어주세요...' },
            { id: 2, message: '메시지에 서명해주세요...' },
            { id: 3, message: '인증을 완료하는 중...' }
        ];
    }

    // 단계 진행
    advance(stepId) {
        this.currentStep = stepId;
        this.updateUI();
    }

    // UI 업데이트
    updateUI() {
        const steps = document.querySelectorAll('.progress-step');
        const lines = document.querySelectorAll('.progress-line');
        
        steps.forEach((step, index) => {
            const stepNum = index + 1;
            const status = step.querySelector('.step-status');
            
            if (stepNum < this.currentStep) {
                // 완료된 단계
                step.classList.add('completed');
                step.classList.remove('active', 'pending');
                status.textContent = '✓';
                status.style.color = '#00b894';
            } else if (stepNum === this.currentStep) {
                // 현재 진행 중
                step.classList.add('active');
                step.classList.remove('completed', 'pending');
                status.innerHTML = '<div class="spinner-small"></div>';
            } else {
                // 대기 중
                step.classList.add('pending');
                step.classList.remove('completed', 'active');
                status.textContent = '';
            }
        });

        // 연결선 애니메이션
        lines.forEach((line, index) => {
            if (index < this.currentStep - 1) {
                line.classList.add('completed');
            } else {
                line.classList.remove('completed');
            }
        });

        // 메시지 업데이트
        const step = this.steps.find(s => s.id === this.currentStep);
        if (step) {
            document.getElementById('progress-message').textContent = step.message;
        }
    }

    // 에러 표시
    showError(stepId, message) {
        const step = document.querySelector(`[data-step="${stepId}"]`);
        if (step) {
            step.classList.add('error');
            const status = step.querySelector('.step-status');
            status.textContent = '✗';
            status.style.color = '#ff7675';
        }
        
        document.getElementById('progress-message').textContent = message;
        document.getElementById('progress-message').style.color = '#ff7675';
    }

    // 리셋
    reset() {
        this.currentStep = 0;
        document.querySelectorAll('.progress-step').forEach(step => {
            step.classList.remove('completed', 'active', 'pending', 'error');
        });
        document.querySelectorAll('.progress-line').forEach(line => {
            line.classList.remove('completed');
        });
    }
}

export default ProgressTracker;

class ErrorRecovery {
    constructor(connector) {
        this.connector = connector;
        this.recoveryStrategies = {
            4001: this.handleUserRejection.bind(this),
            4100: this.handleUnsupportedMethod.bind(this),
            4200: this.handleLockedWallet.bind(this),
            4900: this.handleDisconnected.bind(this),
            '-32002': this.handlePendingRequest.bind(this),
            '-32603': this.handleInternalError.bind(this)
        };
    }

    // 에러 복구 시도
    async recover(error, context) {
        const code = error.code?.toString();
        const strategy = this.recoveryStrategies[code];

        if (strategy) {
            return await strategy(error, context);
        }

        return this.handleGenericError(error);
    }

    // 사용자 거부 처리
    async handleUserRejection(error, context) {
        return {
            canRetry: true,
            message: '연결을 거부하셨습니다. 다시 시도하시겠어요?',
            action: 'retry',
            actionLabel: '다시 시도',
            tips: [
                '메타마스크 팝업에서 "연결" 버튼을 눌러주세요',
                '팝업이 보이지 않으면 브라우저 상단을 확인해주세요'
            ]
        };
    }

    // 지갑 잠금 처리
    async handleLockedWallet(error, context) {
        return {
            canRetry: true,
            message: '메타마스크가 잠겨있습니다',
            action: 'unlock',
            actionLabel: '잠금 해제 안내',
            tips: [
                '메타마스크 확장 프로그램을 클릭하세요',
                '비밀번호를 입력하여 잠금을 해제하세요',
                '잠금 해제 후 다시 연결을 시도하세요'
            ],
            autoRetry: true,
            retryDelay: 2000
        };
    }

    // 대기 중인 요청 처리
    async handlePendingRequest(error, context) {
        return {
            canRetry: false,
            message: '이미 메타마스크 요청이 진행 중입니다',
            action: 'open_metamask',
            actionLabel: '메타마스크 열기',
            tips: [
                '메타마스크 팝업을 확인해주세요',
                '팝업이 보이지 않으면 확장 프로그램 아이콘을 클릭하세요',
                '이전 요청을 완료하거나 취소한 후 다시 시도하세요'
            ],
            highlight: true
        };
    }

    // 연결 끊김 처리
    async handleDisconnected(error, context) {
        // 자동 재연결 시도
        try {
            await this.connector.ethereum.request({ 
                method: 'eth_requestAccounts' 
            });
            
            return {
                recovered: true,
                message: '연결이 복구되었습니다!'
            };
        } catch (reconnectError) {
            return {
                canRetry: true,
                message: '메타마스크 연결이 끊어졌습니다',
                action: 'reconnect',
                actionLabel: '재연결',
                tips: [
                    '인터넷 연결을 확인해주세요',
                    '메타마스크가 실행 중인지 확인해주세요'
                ]
            };
        }
    }

    // 내부 오류 처리
    async handleInternalError(error, context) {
        // 페이지 새로고침 제안
        return {
            canRetry: true,
            message: '일시적인 오류가 발생했습니다',
            action: 'refresh',
            actionLabel: '페이지 새로고침',
            tips: [
                '페이지를 새로고침하면 해결될 수 있습니다',
                '문제가 계속되면 브라우저를 재시작해보세요'
            ],
            severity: 'high'
        };
    }

    // 일반 에러 처리
    handleGenericError(error) {
        return {
            canRetry: true,
            message: `오류가 발생했습니다: ${error.message}`,
            action: 'retry',
            actionLabel: '다시 시도',
            tips: [
                '잠시 후 다시 시도해주세요',
                '문제가 계속되면 고객센터에 문의해주세요'
            ]
        };
    }

    // 복구 UI 표시
    showRecoveryUI(recovery) {
        const container = document.createElement('div');
        container.className = 'recovery-modal';
        
        container.innerHTML = `
            <div class="recovery-content ${recovery.severity === 'high' ? 'high-severity' : ''}">
                <div class="recovery-icon">${recovery.recovered ? '✅' : '⚠️'}</div>
                <h3>${recovery.message}</h3>
                
                ${recovery.tips ? `
                    <div class="recovery-tips">
                        <p><strong>해결 방법:</strong></p>
                        <ul>
                            ${recovery.tips.map(tip => `<li>${tip}</li>`).join('')}
                        </ul>
                    </div>
                ` : ''}
                
                ${recovery.canRetry ? `
                    <button class="recovery-action" data-action="${recovery.action}">
                        ${recovery.actionLabel}
                    </button>
                ` : ''}
                
                <button class="recovery-close">닫기</button>
            </div>
        `;
        
        document.body.appendChild(container);
        
        // 자동 재시도
        if (recovery.autoRetry) {
            setTimeout(() => {
                this.executeRecoveryAction(recovery.action);
                container.remove();
            }, recovery.retryDelay);
        }
        
        return container;
    }

    // 복구 액션 실행
    async executeRecoveryAction(action) {
        switch (action) {
            case 'retry':
                window.walletUI.connectWallet();
                break;
            case 'reconnect':
                window.walletUI.connectWallet();
                break;
            case 'refresh':
                window.location.reload();
                break;
            case 'open_metamask':
                // 메타마스크 열기 시도
                try {
                    await this.connector.ethereum.request({ 
                        method: 'wallet_requestPermissions',
                        params: [{ eth_accounts: {} }]
                    });
                } catch (e) {
                    console.log('Could not open MetaMask');
                }
                break;
        }
    }
}

export default ErrorRecovery;

/* 페이드 인 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 스피너 애니메이션 */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 펄스 애니메이션 */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* 슬라이드 인 */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 바운스 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* 상태 전환 */
.wallet-state {
    animation: fadeIn 0.3s ease-out;
}

/* 버튼 호버 효과 */
.btn-primary {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(108, 92, 231, 0.3);
}

/* 프로그레스 라인 */
.progress-line {
    position: relative;
    width: 60px;
    height: 2px;
    background: #e1e8ed;
    margin: 0 10px;
}

.progress-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
    transition: width 0.5s ease-out;
}

.progress-line.completed::after {
    width: 100%;
}

/* 스피너 */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #6c5ce7;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

/* 토스트 알림 */
.toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: bottom 0.3s ease-out;
    z-index: 9999;
}

.toast.show {
    bottom: 30px;
}

.toast-success {
    border-left: 4px solid #00b894;
}

.toast-error {
    border-left: 4px solid #ff7675;
}

.toast-info {
    border-left: 4px solid #74b9ff;
}

/* 지갑 주소 복사 효과 */
.wallet-address {
    cursor: pointer;
    transition: all 0.2s;
}

.wallet-address:hover {
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
}

.wallet-address.copied {
    animation: pulse 0.5s;
}

/* 연결 성공 축하 효과 */
@keyframes celebrate {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

.celebration-icon {
    animation: celebrate 0.6s ease-out;
}

class DeviceDetector {
    constructor() {
        this.userAgent = navigator.userAgent || navigator.vendor || window.opera;
        this.isMobile = this.detectMobile();
        this.isMetaMaskBrowser = this.detectMetaMaskBrowser();
        this.platform = this.detectPlatform();
    }

    // 모바일 기기 감지
    detectMobile() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
    }

    // 메타마스크 인앱 브라우저 감지
    detectMetaMaskBrowser() {
        return typeof window.ethereum !== 'undefined' && 
               window.ethereum.isMetaMask && 
               this.isMobile;
    }

    // 플랫폼 감지
    detectPlatform() {
        if (/iPad|iPhone|iPod/.test(this.userAgent)) {
            return 'ios';
        } else if (/Android/.test(this.userAgent)) {
            return 'android';
        }
        return 'desktop';
    }

    // 딥링크 생성
    getDeepLink(url) {
        const dappUrl = encodeURIComponent(url || window.location.href);
        
        if (this.platform === 'ios') {
            return `https://metamask.app.link/dapp/${dappUrl}`;
        } else if (this.platform === 'android') {
            return `https://metamask.app.link/dapp/${dappUrl}`;
        }
        
        return null;
    }

    // 메타마스크 앱 설치 링크
    getInstallLink() {
        if (this.platform === 'ios') {
            return 'https://apps.apple.com/app/metamask/id1438144202';
        } else if (this.platform === 'android') {
            return 'https://play.google.com/store/apps/details?id=io.metamask';
        }
        return 'https://metamask.io/download/';
    }

    // 모바일 최적화 설정 적용
    applyMobileOptimizations() {
        if (!this.isMobile) return;

        // 뷰포트 설정
        const viewport = document.querySelector('meta[name="viewport"]');
        if (viewport) {
            viewport.setAttribute('content', 
                'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
            );
        }

        // 터치 이벤트 최적화
        document.body.style.touchAction = 'manipulation';
        
        // 모바일 전용 클래스 추가
        document.body.classList.add('mobile-device');
        document.body.classList.add(`platform-${this.platform}`);
    }
}

export default DeviceDetector;

import DeviceDetector from '../utils/device-detector.js';
import MetaMaskConnector from '../web3/metamask.js';

class MobileWalletUI {
    constructor() {
        this.detector = new DeviceDetector();
        this.connector = new MetaMaskConnector();
        this.init();
    }

    init() {
        if (!this.detector.isMobile) return;

        this.detector.applyMobileOptimizations();
        this.setupMobileUI();
        this.handleDeepLinking();
    }

    // 모바일 UI 설정
    setupMobileUI() {
        // 풀스크린 모달 사용
        const container = document.getElementById('wallet-connect-container');
        if (container) {
            container.classList.add('mobile-fullscreen');
        }

        // 터치 제스처 추가
        this.addSwipeGestures();
        
        // 하단 시트 스타일 적용
        this.applyBottomSheetStyle();
    }

    // 딥링킹 처리
    handleDeepLinking() {
        // 일반 브라우저에서 접속한 경우
        if (!this.detector.isMetaMaskBrowser && !window.ethereum) {
            this.showDeepLinkPrompt();
        }
    }

    // 딥링크 안내 표시
    showDeepLinkPrompt() {
        const prompt = document.createElement('div');
        prompt.className = 'deeplink-prompt';
        prompt.innerHTML = `
            <div class="deeplink-content">
                <div class="deeplink-icon">🦊</div>
                <h3>메타마스크 앱에서 열기</h3>
                <p>이 페이지를 메타마스크 앱의 브라우저에서 열어야 합니다.</p>
                
                <button id="open-in-metamask" class="btn-primary btn-large">
                    메타마스크에서 열기
                </button>
                
                <div class="deeplink-divider">또는</div>
                
                <button id="install-metamask-mobile" class="btn-secondary btn-large">
                    메타마스크 앱 설치하기
                </button>
                
                <div class="deeplink-help">
                    <p><strong>사용 방법:</strong></p>
                    <ol>
                        <li>메타마스크 앱을 설치합니다</li>
                        <li>앱 내 브라우저를 엽니다</li>
                        <li>이 페이지 주소를 입력합니다</li>
                    </ol>
                </div>
            </div>
        `;

        document.body.appendChild(prompt);

        // 이벤트 바인딩
        document.getElementById('open-in-metamask').addEventListener('click', () => {
            const deepLink = this.detector.getDeepLink();
            if (deepLink) {
                window.location.href = deepLink;
            }
        });

        document.getElementById('install-metamask-mobile').addEventListener('click', () => {
            window.location.href = this.detector.getInstallLink();
        });
    }

    // 스와이프 제스처 추가
    addSwipeGestures() {
        let touchStartY = 0;
        let touchEndY = 0;

        const modal = document.querySelector('.wallet-container');
        if (!modal) return;

        modal.addEventListener('touchstart', (e) => {
            touchStartY = e.changedTouches[0].screenY;
        }, { passive: true });

        modal.addEventListener('touchend', (e) => {
            touchEndY = e.changedTouches[0].screenY;
            this.handleSwipe(touchStartY, touchEndY);
        }, { passive: true });
    }

    // 스와이프 처리
    handleSwipe(startY, endY) {
        const swipeDistance = startY - endY;
        const threshold = 50;

        if (Math.abs(swipeDistance) > threshold) {
            if (swipeDistance > 0) {
                // 위로 스와이프
                this.expandModal();
            } else {
                // 아래로 스와이프
                this.minimizeModal();
            }
        }
    }

    // 하단 시트 스타일
    applyBottomSheetStyle() {
        const style = document.createElement('style');
        style.textContent = `
            .mobile-fullscreen {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                max-height: 90vh;
                background: white;
                border-radius: 20px 20px 0 0;
                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
                transition: transform 0.3s ease-out;
                z-index: 9999;
            }

            .mobile-fullscreen::before {
                content: '';
                display: block;
                width: 40px;
                height: 4px;
                background: #ddd;
                border-radius: 2px;
                margin: 12px auto;
            }

            .btn-large {
                min-height: 56px;
                font-size: 18px;
                padding: 16px 32px;
                width: 100%;
                margin: 8px 0;
            }

            .deeplink-prompt {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: flex-end;
                z-index: 10000;
                animation: fadeIn 0.3s;
            }

            .deeplink-content {
                background: white;
                border-radius: 20px 20px 0 0;
                padding: 32px 24px;
                width: 100%;
                max-height: 90vh;
                overflow-y: auto;
            }

            .deeplink-icon {
                font-size: 64px;
                text-align: center;
                margin-bottom: 16px;
            }

            .deeplink-divider {
                text-align: center;
                color: #999;
                margin: 24px 0;
                position: relative;
            }

            .deeplink-divider::before,
            .deeplink-divider::after {
                content: '';
                position: absolute;
                top: 50%;
                width: 40%;
                height: 1px;
                background: #ddd;
            }

            .deeplink-divider::before {
                left: 0;
            }

            .deeplink-divider::after {
                right: 0;
            }

            .deeplink-help {
                margin-top: 32px;
                padding: 20px;
                background: #f8f9fa;
                border-radius: 12px;
            }

            .deeplink-help ol {
                margin: 12px 0 0 20px;
                padding: 0;
            }

            .deeplink-help li {
                margin: 8px 0;
                color: #666;
            }
        `;
        document.head.appendChild(style);
    }

    // 모달 확장
    expandModal() {
        const modal = document.querySelector('.mobile-fullscreen');
        if (modal) {
            modal.style.maxHeight = '95vh';
        }
    }

    // 모달 최소화
    minimizeModal() {
        const modal = document.querySelector('.mobile-fullscreen');
        if (modal) {
            modal.style.maxHeight = '70vh';
        }
    }
}

export default MobileWalletUI;

class NetworkMonitor {
    constructor() {
        this.isOnline = navigator.onLine;
        this.connectionType = this.getConnectionType();
        this.listeners = [];
        this.init();
    }

    init() {
        window.addEventListener('online', () => this.handleOnline());
        window.addEventListener('offline', () => this.handleOffline());

        // 연결 타입 변경 감지
        if ('connection' in navigator) {
            navigator.connection.addEventListener('change', () => {
                this.handleConnectionChange();
            });
        }
    }

    // 연결 타입 확인
    getConnectionType() {
        if ('connection' in navigator) {
            return navigator.connection.effectiveType;
        }
        return 'unknown';
    }

    // 온라인 상태로 전환
    handleOnline() {
        this.isOnline = true;
        this.showToast('인터넷에 연결되었습니다', 'success');
        this.notifyListeners('online');
        
        // 대기 중인 요청 재시도
        this.retryPendingRequests();
    }

    // 오프라인 상태로 전환
    handleOffline() {
        this.isOnline = false;
        this.showToast('인터넷 연결이 끊어졌습니다', 'warning');
        this.notifyListeners('offline');
    }

    // 연결 타입 변경
    handleConnectionChange() {
        const newType = this.getConnectionType();
        
        if (newType !== this.connectionType) {
            this.connectionType = newType;
            
            // 느린 연결 경고
            if (newType === 'slow-2g' || newType === '2g') {
                this.showToast('네트워크 속도가 느립니다', 'warning');
            }
            
            this.notifyListeners('connection-change', newType);
        }
    }

    // 리스너 등록
    addListener(callback) {
        this.listeners.push(callback);
    }

    // 리스너 알림
    notifyListeners(event, data) {
        this.listeners.forEach(callback => {
            callback(event, data);
        });
    }

    // 대기 중인 요청 재시도
    retryPendingRequests() {
        const pending = JSON.parse(localStorage.getItem('pending_requests') || '[]');
        
        pending.forEach(async (request) => {
            try {
                await this.executeRequest(request);
                this.removePendingRequest(request.id);
            } catch (error) {
                console.error('Retry failed:', error);
            }
        });
    }

    // 요청 실행
    async executeRequest(request) {
        // 요청 재실행 로직
        return axios(request.config);
    }

    // 대기 요청 제거
    removePendingRequest(id) {
        const pending = JSON.parse(localStorage.getItem('pending_requests') || '[]');
        const filtered = pending.filter(r => r.id !== id);
        localStorage.setItem('pending_requests', JSON.stringify(filtered));
    }

    // 토스트 표시
    showToast(message, type) {
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.textContent = message;
        document.body.appendChild(toast);

        setTimeout(() => toast.classList.add('show'), 100);
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }
}

export default NetworkMonitor;

class Web3Debugger {
    constructor() {
        this.enabled = process.env.NODE_ENV === 'development';
        this.logs = [];
        this.maxLogs = 100;
        
        if (this.enabled) {
            this.init();
        }
    }

    init() {
        // 디버그 패널 생성
        this.createDebugPanel();
        
        // 전역 에러 핸들러
        window.addEventListener('error', (e) => {
            this.logError('Global Error', e.error);
        });

        // Promise rejection 핸들러
        window.addEventListener('unhandledrejection', (e) => {
            this.logError('Unhandled Promise Rejection', e.reason);
        });
    }

    // 디버그 패널 생성
    createDebugPanel() {
        const panel = document.createElement('div');
        panel.id = 'web3-debug-panel';
        panel.innerHTML = `
            <div class="debug-header">
                <span>🔍 Web3 Debugger</span>
                <button id="debug-toggle">_</button>
                <button id="debug-clear">Clear</button>
            </div>
            <div class="debug-content">
                <div class="debug-tabs">
                    <button class="debug-tab active" data-tab="logs">Logs</button>
                    <button class="debug-tab" data-tab="state">State</button>
                    <button class="debug-tab" data-tab="network">Network</button>
                </div>
                <div class="debug-body">
                    <div id="debug-logs" class="debug-section active"></div>
                    <div id="debug-state" class="debug-section"></div>
                    <div id="debug-network" class="debug-section"></div>
                </div>
            </div>
        `;

        document.body.appendChild(panel);
        this.bindDebugEvents();
        this.applyDebugStyles();
    }

    // 이벤트 바인딩
    bindDebugEvents() {
        document.getElementById('debug-toggle').addEventListener('click', () => {
            const content = document.querySelector('.debug-content');
            content.style.display = content.style.display === 'none' ? 'block' : 'none';
        });

        document.getElementById('debug-clear').addEventListener('click', () => {
            this.clearLogs();
        });

        document.querySelectorAll('.debug-tab').forEach(tab => {
            tab.addEventListener('click', (e) => {
                this.switchTab(e.target.dataset.tab);
            });
        });
    }

    // 탭 전환
    switchTab(tabName) {
        document.querySelectorAll('.debug-tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.debug-section').forEach(s => s.classList.remove('active'));
        
        document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
        document.getElementById(`debug-${tabName}`).classList.add('active');

        if (tabName === 'state') {
            this.updateStateView();
        } else if (tabName === 'network') {
            this.updateNetworkView();
        }
    }

    // 로그 기록
    log(type, message, data = null) {
        if (!this.enabled) return;

        const timestamp = new Date().toLocaleTimeString();
        const logEntry = {
            type,
            message,
            data,
            timestamp
        };

        this.logs.push(logEntry);
        
        if (this.logs.length > this.maxLogs) {
            this.logs.shift();
        }

        this.updateLogsView();
        
        // 콘솔에도 출력
        console.log(`[Web3 ${type}]`, message, data);
    }

    logError(message, error) {
        this.log('ERROR', message, {
            message: error.message,
            stack: error.stack,
            code: error.code
        });
    }

    logEvent(event, data) {
        this.log('EVENT', event, data);
    }

    logRequest(method, params) {
        this.log('REQUEST', method, params);
    }

    logResponse(method, result) {
        this.log('RESPONSE', method, result);
    }

    // 로그 뷰 업데이트
    updateLogsView() {
        const container = document.getElementById('debug-logs');
        container.innerHTML = this.logs.map(log => `
            <div class="debug-log debug-log-${log.type.toLowerCase()}">
                <span class="log-time">${log.timestamp}</span>
                <span class="log-type">[${log.type}]</span>
                <span class="log-message">${log.message}</span>
                ${log.data ? `<pre class="log-data">${JSON.stringify(log.data, null, 2)}</pre>` : ''}
            </div>
        `).reverse().join('');
    }

    // 상태 뷰 업데이트
    updateStateView() {
        const container = document.getElementById('debug-state');
        const state = {
            ethereum: {
                isMetaMask: window.ethereum?.isMetaMask,
                chainId: window.ethereum?.chainId,
                selectedAddress: window.ethereum?.selectedAddress
            },
            localStorage: {
                authToken: !!localStorage.getItem('auth_token'),
                connectionCache: !!localStorage.getItem('web3_connection_cache')
            },
            session: {
                isConnected: !!window.walletUI?.connector?.account,
                currentState: window.walletUI?.currentState
            }
        };

        container.innerHTML = `<pre>${JSON.stringify(state, null, 2)}</pre>`;
    }

    // 네트워크 뷰 업데이트
    updateNetworkView() {
        const container = document.getElementById('debug-network');
        const networkInfo = {
            online: navigator.onLine,
            connectionType: navigator.connection?.effectiveType,
            downlink: navigator.connection?.downlink,
            rtt: navigator.connection?.rtt,
            saveData: navigator.connection?.saveData
        };

        container.innerHTML = `<pre>${JSON.stringify(networkInfo, null, 2)}</pre>`;
    }

    // 로그 초기화
    clearLogs() {
        this.logs = [];
        this.updateLogsView();
    }

    // 스타일 적용
    applyDebugStyles() {
        const style = document.createElement('style');
        style.textContent = `
            #web3-debug-panel {
                position: fixed;
                bottom: 20px;
                right: 20px;
                width: 400px;
                max-height: 500px;
                background: #1e1e1e;
                color: #d4d4d4;
                border-radius: 8px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
                font-family: 'Courier New', monospace;
                font-size: 12px;
                z-index: 99999;
                overflow: hidden;
            }

            .debug-header {
                background: #2d2d2d;
                padding: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #3e3e3e;
            }

            .debug-header button {
                background: #3e3e3e;
                border: none;
                color: #d4d4d4;
                padding: 4px 8px;
                border-radius: 4px;
                cursor: pointer;
                margin-left: 5px;
            }

            .debug-header button:hover {
                background: #4e4e4e;
            }

            .debug-content {
                max-height: 450px;
                overflow: hidden;
            }

            .debug-tabs {
                display: flex;
                background: #2d2d2d;
                border-bottom: 1px solid #3e3e3e;
            }

            .debug-tab {
                flex: 1;
                background: transparent;
                border: none;
                color: #888;
                padding: 8px;
                cursor: pointer;
                transition: all 0.2s;
            }

            .debug-tab.active {
                color: #4ec9b0;
                border-bottom: 2px solid #4ec9b0;
            }

            .debug-body {
                height: 400px;
                overflow-y: auto;
            }

            .debug-section {
                display: none;
                padding: 10px;
            }

            .debug-section.active {
                display: block;
            }

            .debug-log {
                padding: 8px;
                margin: 4px 0;
                border-left: 3px solid #4ec9b0;
                background: #252526;
                border-radius: 4px;
            }

            .debug-log-error {
                border-left-color: #f48771;
            }

            .debug-log-event {
                border-left-color: #4fc1ff;
            }

            .log-time {
                color: #858585;
                margin-right: 8px;
            }

            .log-type {
                color: #4ec9b0;
                margin-right: 8px;
                font-weight: bold;
            }

            .log-message {
                color: #d4d4d4;
            }

            .log-data {
                margin-top: 8px;
                padding: 8px;
                background: #1e1e1e;
                border-radius: 4px;
                overflow-x: auto;
                font-size: 11px;
            }

            .debug-body::-webkit-scrollbar {
                width: 8px;
            }

            .debug-body::-webkit-scrollbar-track {
                background: #1e1e1e;
            }

            .debug-body::-webkit-scrollbar-thumb {
                background: #3e3e3e;
                border-radius: 4px;
            }

            .debug-body::-webkit-scrollbar-thumb:hover {
                background: #4e4e4e;
            }
        `;
        document.head.appendChild(style);
    }
}

// 전역 인스턴스 생성
window.web3Debugger = new Web3Debugger();

export default Web3Debugger;

class PerformanceMonitor {
    constructor() {
        this.metrics = {};
        this.marks = {};
    }

    // 측정 시작
    start(name) {
        this.marks[name] = performance.now();
        window.web3Debugger?.log('PERF', `Started: ${name}`);
    }

    // 측정 종료
    end(name) {
        if (!this.marks[name]) {
            console.warn(`No start mark for: ${name}`);
            return;
        }

        const duration = performance.now() - this.marks[name];
        
        if (!this.metrics[name]) {
            this.metrics[name] = [];
        }
        
        this.metrics[name].push(duration);
        delete this.marks[name];

        window.web3Debugger?.log('PERF', `Completed: ${name}`, {
            duration: `${duration.toFixed(2)}ms`
        });

        return duration;
    }

    // 통계 조회
    getStats(name) {
        const measurements = this.metrics[name];
        if (!measurements || measurements.length === 0) {
            return null;
        }

        const sorted = [...measurements].sort((a, b) => a - b);
        const sum = sorted.reduce((a, b) => a + b, 0);

        return {
            count: sorted.length,
            min: sorted[0],
            max: sorted[sorted.length - 1],
            avg: sum / sorted.length,
            median: sorted[Math.floor(sorted.length / 2)],
            p95: sorted[Math.floor(sorted.length * 0.95)]
        };
    }

    // 모든 통계 출력
    printStats() {
        console.table(
            Object.keys(this.metrics).reduce((acc, name) => {
                acc[name] = this.getStats(name);
                return acc;
            }, {})
        );
    }

    // 리포트 생성
    generateReport() {
        const report = {
            timestamp: new Date().toISOString(),
            metrics: {}
        };

        Object.keys(this.metrics).forEach(name => {
            report.metrics[name] = this.getStats(name);
        });

        return report;
    }

    // 서버로 전송
    async sendToServer() {
        const report = this.generateReport();
        
        try {
            await axios.post('/api/analytics/performance', report);
            console.log('Performance report sent');
        } catch (error) {
            console.error('Failed to send performance report:', error);
        }
    }
}

// 전역 인스턴스
window.perfMonitor = new PerformanceMonitor();

export default PerformanceMonitor;

// 사용 예시
perfMonitor.start('wallet-connection');
await connectWallet();
perfMonitor.end('wallet-connection');

perfMonitor.start('signature-verification');
await verifySignature();
perfMonitor.end('signature-verification');

// 통계 확인
perfMonitor.printStats();

// 낙관적 업데이트 예시
async function optimisticConnect(address) {
    // 1. 먼저 UI 업데이트
    showConnected(address, '0.00'); // 임시 잔액
    
    try {
        // 2. 실제 데이터 가져오기
        const balance = await getBalance(address);
        updateBalance(balance);
    } catch (error) {
        // 3. 실패 시 롤백
        showConnectPrompt();
        showError(error.message);
    }
}

// 배칭 예시
async function batchRequests(address) {
    const [balance, nonce, chainId] = await Promise.all([
        provider.getBalance(address),
        provider.getTransactionCount(address),
        provider.getNetwork().then(n => n.chainId)
    ]);
    
    return { balance, nonce, chainId };
}

// 인터랙티브 로딩 예시
function showInteractiveLoading() {
    const tips = [
        '💡 메타마스크는 가스비가 들지 않는 서명만 요청합니다',
        '🔐 개인키는 절대 외부로 전송되지 않습니다',
        '⚡ 로그인 후 모든 기능을 이용할 수 있습니다'
    ];
    
    let currentTip = 0;
    const interval = setInterval(() => {
        document.getElementById('loading-tip').textContent = tips[currentTip];
        currentTip = (currentTip + 1) % tips.length;
    }, 3000);
    
    return () => clearInterval(interval);
}