A. 자동 지갑 감지
사용자의 브라우저에 어떤 지갑이 설치되어 있는지 자동으로 감지해서 해당 지갑만 보여줘. 설치되지 않은 지갑은 "설치하기" 링크와 함께 표시해.

// resources/js/wallet-connector.js
class WalletConnector {
    constructor() {
        this.availableWallets = this.detectWallets();
    }
    
    detectWallets() {
        const wallets = [];
        
        // MetaMask 감지
        if (typeof window.ethereum !== 'undefined' && window.ethereum.isMetaMask) {
            wallets.push({
                name: 'MetaMask',
                icon: '/images/metamask.svg',
                installed: true,
                connect: () => this.connectMetaMask()
            });
        } else {
            wallets.push({
                name: 'MetaMask',
                icon: '/images/metamask.svg',
                installed: false,
                installUrl: 'https://metamask.io/download/'
            });
        }
        
        // Coinbase Wallet 감지
        if (typeof window.ethereum !== 'undefined' && window.ethereum.isCoinbaseWallet) {
            wallets.push({
                name: 'Coinbase Wallet',
                icon: '/images/coinbase.svg',
                installed: true,
                connect: () => this.connectCoinbase()
            });
        }
        
        return wallets;
    }
    
    async connectMetaMask() {
        try {
            // 연결 시도 전 로딩 표시
            this.showLoading('MetaMask에 연결하는 중...');
            
            const accounts = await window.ethereum.request({ 
                method: 'eth_requestAccounts' 
            });
            
            const address = accounts[0];
            const chainId = await window.ethereum.request({ 
                method: 'eth_chainId' 
            });
            
            // 서버에 지갑 정보 저장
            await this.saveWalletToServer(address, chainId);
            
            this.hideLoading();
            this.showSuccess('지갑이 성공적으로 연결되었어요! 🎉');
            
            return { address, chainId };
            
        } catch (error) {
            this.hideLoading();
            this.handleWalletError(error);
        }
    }
    
    handleWalletError(error) {
        let message = '';
        
        if (error.code === 4001) {
            message = '지갑 연결을 취소하셨어요. 다시 시도하려면 "지갑 연결" 버튼을 눌러주세요.';
        } else if (error.code === -32002) {
            message = 'MetaMask에서 이미 연결 요청을 기다리고 있어요. MetaMask 창을 확인해주세요!';
        } else {
            message = `연결 중 문제가 발생했어요: ${error.message}. 잠시 후 다시 시도해주세요.`;
        }
        
        this.showError(message);
    }
    
    async saveWalletToServer(address, chainId) {
        const response = await fetch('/api/wallet/connect', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ address, chainId })
        });
        
        if (!response.ok) {
            throw new Error('서버 저장 실패');
        }
        
        return await response.json();
    }
}

B. 라라벨 백엔드 처리
지갑 연결 정보를 안전하게 저장하고 세션을 관리해야 해.

// app/Http/Controllers/WalletController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Wallet;
use Illuminate\Support\Facades\Auth;

class WalletController extends Controller
{
    public function connect(Request $request)
    {
        $validated = $request->validate([
            'address' => 'required|string|size:42|regex:/^0x[a-fA-F0-9]{40}$/',
            'chainId' => 'required|string'
        ]);
        
        // 체인 ID 검증 (예: 이더리움 메인넷만 허용)
        $allowedChains = ['0x1']; // 0x1 = Ethereum Mainnet
        
        if (!in_array($validated['chainId'], $allowedChains)) {
            return response()->json([
                'error' => '지원하지 않는 네트워크예요. 이더리움 메인넷으로 전환해주세요.',
                'currentChain' => $validated['chainId'],
                'requiredChain' => '0x1'
            ], 400);
        }
        
        // 지갑 정보 저장 또는 업데이트
        $wallet = Wallet::updateOrCreate(
            ['address' => strtolower($validated['address'])],
            [
                'chain_id' => $validated['chainId'],
                'last_connected_at' => now(),
                'user_id' => Auth::id() // 로그인한 경우
            ]
        );
        
        // 세션에 지갑 주소 저장
        session(['wallet_address' => $wallet->address]);
        
        // 사용자 활동 로깅
        activity()
            ->causedBy(Auth::user())
            ->performedOn($wallet)
            ->log('지갑 연결');
        
        return response()->json([
            'success' => true,
            'wallet' => [
                'address' => $wallet->address,
                'short_address' => $this->shortenAddress($wallet->address),
                'balance' => $this->getBalance($wallet->address)
            ]
        ]);
    }
    
    private function shortenAddress($address)
    {
        return substr($address, 0, 6) . '...' . substr($address, -4);
    }
    
    private function getBalance($address)
    {
        // Web3 라이브러리를 사용해서 실제 잔액 조회
        // 여기서는 예시로 간단히 처리
        return '0.0 ETH';
    }
    
    public function disconnect(Request $request)
    {
        session()->forget('wallet_address');
        
        return response()->json([
            'success' => true,
            'message' => '지갑 연결이 해제되었어요.'
        ]);
    }
}

A. 무한 스크롤 구현 (Livewire 활용)

// app/Http/Livewire/NftGallery.php
namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Nft;
use Illuminate\Support\Facades\Cache;

class NftGallery extends Component
{
    public $nfts = [];
    public $page = 1;
    public $perPage = 20;
    public $hasMore = true;
    public $filter = 'all';
    public $sortBy = 'recent';
    
    protected $listeners = ['load-more' => 'loadMore'];
    
    public function mount()
    {
        $this->loadNfts();
    }
    
    public function loadMore()
    {
        if (!$this->hasMore) {
            return;
        }
        
        $this->page++;
        $this->loadNfts();
    }
    
    private function loadNfts()
    {
        // 캐시 키 생성
        $cacheKey = "nfts_{$this->filter}_{$this->sortBy}_page_{$this->page}";
        
        // 5분간 캐시
        $newNfts = Cache::remember($cacheKey, 300, function () {
            $query = Nft::with(['creator', 'collection'])
                ->where('status', 'active');
            
            // 필터 적용
            if ($this->filter !== 'all') {
                $query->where('category', $this->filter);
            }
            
            // 정렬 적용
            switch ($this->sortBy) {
                case 'recent':
                    $query->orderBy('created_at', 'desc');
                    break;
                case 'price_low':
                    $query->orderBy('price', 'asc');
                    break;
                case 'price_high':
                    $query->orderBy('price', 'desc');
                    break;
                case 'popular':
                    $query->orderBy('view_count', 'desc');
                    break;
            }
            
            return $query->skip(($this->page - 1) * $this->perPage)
                ->take($this->perPage)
                ->get()
                ->map(function ($nft) {
                    return [
                        'id' => $nft->id,
                        'name' => $nft->name,
                        'image' => $nft->thumbnail_url, // 썸네일 사용
                        'price' => $nft->formatted_price,
                        'creator' => $nft->creator->name,
                        'likes' => $nft->likes_count,
                        'url' => route('nft.show', $nft->id)
                    ];
                });
        });
        
        if ($newNfts->count() < $this->perPage) {
            $this->hasMore = false;
        }
        
        $this->nfts = array_merge($this->nfts, $newNfts->toArray());
    }
    
    public function updateFilter($filter)
    {
        $this->filter = $filter;
        $this->resetGallery();
    }
    
    public function updateSort($sortBy)
    {
        $this->sortBy = $sortBy;
        $this->resetGallery();
    }
    
    private function resetGallery()
    {
        $this->nfts = [];
        $this->page = 1;
        $this->hasMore = true;
        $this->loadNfts();
    }
    
    public function render()
    {
        return view('livewire.nft-gallery');
    }
}

B. 프론트엔드 뷰 (Blade + Alpine.js)

{{-- resources/views/livewire/nft-gallery.blade.php --}}
<div x-data="{ 
    loading: false,
    observer: null 
}" 
x-init="
    observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting && !loading && @this.hasMore) {
                loading = true;
                @this.call('loadMore').then(() => {
                    loading = false;
                });
            }
        });
    }, { threshold: 0.5 });
    
    $nextTick(() => {
        const sentinel = document.getElementById('load-more-sentinel');
        if (sentinel) observer.observe(sentinel);
    });
">
    {{-- 필터 및 정렬 --}}
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px;">
        <div style="display:flex;gap:10px;flex-wrap:wrap;">
            <button wire:click="updateFilter('all')" 
                    class="tx-filter-btn {{ $filter === 'all' ? 'active' : '' }}">
                전체
            </button>
            <button wire:click="updateFilter('art')" 
                    class="tx-filter-btn {{ $filter === 'art' ? 'active' : '' }}">
                🎨 아트
            </button>
            <button wire:click="updateFilter('collectible')" 
                    class="tx-filter-btn {{ $filter === 'collectible' ? 'active' : '' }}">
                🎁 컬렉터블
            </button>
            <button wire:click="updateFilter('music')" 
                    class="tx-filter-btn {{ $filter === 'music' ? 'active' : '' }}">
                🎵 음악
            </button>
        </div>
        
        <select wire:model="sortBy" wire:change="updateSort($event.target.value)" 
                style="padding:10px 15px;border:2px solid #e9ecef;border-radius:8px;">
            <option value="recent">최신순</option>
            <option value="popular">인기순</option>
            <option value="price_low">가격 낮은순</option>
            <option value="price_high">가격 높은순</option>
        </select>
    </div>
    
    {{-- NFT 그리드 --}}
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:25px;">
        @foreach($nfts as $nft)
            <div class="tx-nft-card" 
                 x-data="{ imageLoaded: false }"
                 style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform 0.3s ease,box-shadow 0.3s ease;cursor:pointer;"
                 onmouseover="this.style.transform='translateY(-5px)';this.style.boxShadow='0 8px 16px rgba(0,0,0,0.15)';"
                 onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 2px 8px rgba(0,0,0,0.1)';"
                 onclick="window.location.href='{{ $nft['url'] }}'">
                
                {{-- 이미지 영역 --}}
                <div style="position:relative;padding-top:100%;background:#f5f5f5;">
                    {{-- 로딩 스켈레톤 --}}
                    <div x-show="!imageLoaded" 
                         style="position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite;">
                    </div>
                    
                    {{-- 실제 이미지 --}}
                    <img src="{{ $nft['image'] }}" 
                         alt="{{ $nft['name'] }}"
                         loading="lazy"
                         x-on:load="imageLoaded = true"
                         x-show="imageLoaded"
                         style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;">
                </div>
                
                {{-- 정보 영역 --}}
                <div style="padding:15px;">
                    <h3 style="margin:0 0 8px 0;font-size:16px;font-weight:600;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                        {{ $nft['name'] }}
                    </h3>
                    <p style="margin:0 0 12px 0;font-size:13px;color:#666;">
                        by {{ $nft['creator'] }}
                    </p>
                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span style="font-size:18px;font-weight:700;color:#667eea;">
                            {{ $nft['price'] }}
                        </span>
                        <span style="font-size:14px;color:#999;">
                            ❤️ {{ $nft['likes'] }}
                        </span>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    
    {{-- 무한 스크롤 센티널 --}}
    @if($hasMore)
        <div id="load-more-sentinel" style="height:100px;margin-top:30px;">
            <div x-show="loading" style="text-align:center;padding:20px;">
                <div style="display:inline-block;width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;"></div>
                <p style="margin-top:15px;color:#666;">더 많은 NFT를 불러오는 중...</p>
            </div>
        </div>
    @else
        <div style="text-align:center;padding:40px;color:#999;">
            <p>모든 NFT를 확인하셨어요! 🎉</p>
        </div>
    @endif
</div>

<style>
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tx-filter-btn {
    padding: 10px 20px;
    border: 2px solid #e9ecef;
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.tx-filter-btn:hover {
    border-color: #667eea;
    color: #667eea;
}

.tx-filter-btn.active {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
}
</style>

구매 모달 컴포넌트 (Livewire)

// app/Http/Livewire/NftPurchaseModal.php
namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Nft;
use App\Services\BlockchainService;
use Illuminate\Support\Facades\DB;

class NftPurchaseModal extends Component
{
    public $nft;
    public $step = 1; // 1: 확인, 2: 처리중, 3: 완료
    public $transactionHash;
    public $estimatedGasFee;
    public $totalCost;
    public $error;
    
    protected $listeners = ['openPurchaseModal' => 'open'];
    
    public function mount($nftId)
    {
        $this->nft = Nft::with('creator')->findOrFail($nftId);
        $this->calculateCosts();
    }
    
    private function calculateCosts()
    {
        $blockchainService = app(BlockchainService::class);
        
        // 현재 가스비 추정
        $this->estimatedGasFee = $blockchainService->estimateGasFee();
        
        // 총 비용 계산 (NFT 가격 + 가스비 + 플랫폼 수수료 2.5%)
        $platformFee = $this->nft->price * 0.025;
        $this->totalCost = $this->nft->price + $this->estimatedGasFee + $platformFee;
    }
    
    public function purchase()
    {
        try {
            // 지갑 연결 확인
            if (!session('wallet_address')) {
                $this->error = '먼저 지갑을 연결해주세요!';
                return;
            }
            
            // 2단계로 이동
            $this->step = 2;
            
            // 블록체인 트랜잭션 시작
            $blockchainService = app(BlockchainService::class);
            
            DB::beginTransaction();
            
            // 트랜잭션 생성
            $transaction = $blockchainService->createPurchaseTransaction(
                $this->nft,
                session('wallet_address')
            );
            
            $this->transactionHash = $transaction['hash'];
            
            // 트랜잭션 상태를 비동기로 모니터링
            dispatch(new \App\Jobs\MonitorTransaction($this->transactionHash, $this->nft->id));
            
            DB::commit();
            
            // 3단계로 이동 (트랜잭션 제출 완료)
            $this->step = 3;
            
            // 실시간 업데이트를 위한 이벤트 발생
            $this->emit('transactionSubmitted', $this->transactionHash);
            
        } catch (\Exception $e) {
            DB::rollBack();
            $this->error = $this->formatError($e);
            $this->step = 1;
        }
    }
    
    private function formatError($exception)
    {
        $message = $exception->getMessage();
        
        // 일반적인 에러를 사용자 친화적으로 변환
        if (str_contains($message, 'insufficient funds')) {
            return '지갑 잔액이 부족해요. 현재 필요한 금액: ' . $this->totalCost . ' ETH';
        } elseif (str_contains($message, 'user rejected')) {
            return '트랜잭션을 취소하셨어요. 다시 시도하려면 "구매하기" 버튼을 눌러주세요.';
        } elseif (str_contains($message, 'nonce too low')) {
            return '이전 트랜잭션이 아직 처리 중이에요. 잠시 후 다시 시도해주세요.';
        } else {
            return '구매 중 문제가 발생했어요. 고객센터에 문의해주세요. (에러: ' . substr($message, 0, 50) . '...)';
        }
    }
    
    public function cancel()
    {
        $this->step = 1;
        $this->error = null;
        $this->emit('closePurchaseModal');
    }
    
    public function render()
    {
        return view('livewire.nft-purchase-modal');
    }
}

구매 모달 뷰

{{-- resources/views/livewire/nft-purchase-modal.blade.php --}}
<div x-data="{ show: @entangle('step').defer }" 
     x-show="show > 0"
     style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:9999;"
     x-transition>
    
    <div style="background:#fff;border-radius:16px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3);">
        
        {{-- 1단계: 구매 확인 --}}
        @if($step === 1)
            <div style="padding:30px;">
                <h2 style="margin:0 0 20px 0;font-size:24px;color:#333;">NFT 구매 확인</h2>
                
                {{-- NFT 정보 --}}
                <div style="display:flex;gap:20px;margin-bottom:25px;padding:15px;background:#f8f9fa;border-radius:10px;">
                    <img src="{{ $nft->thumbnail_url }}" 
                         alt="{{ $nft->name }}"
                         style="width:100px;height:100px;object-fit:cover;border-radius:8px;">
                    <div>
                        <h3 style="margin:0 0 8px 0;font-size:18px;">{{ $nft->name }}</h3>
                        <p style="margin:0;color:#666;font-size:14px;">by {{ $nft->creator->name }}</p>
                    </div>
                </div>
                
                {{-- 비용 상세 --}}
                <div style="background:#f8f9fa;padding:20px;border-radius:10px;margin-bottom:20px;">
                    <h3 style="margin:0 0 15px 0;font-size:16px;color:#333;">💰 비용 상세</h3>
                    
                    <div style="display:flex;justify-content:space-between;margin-bottom:10px;">
                        <span style="color:#666;">NFT 가격</span>
                        <span style="font-weight:600;">{{ $nft->formatted_price }}</span>
                    </div>
                    
                    <div style="display:flex;justify-content:space-between;margin-bottom:10px;">
                        <span style="color:#666;">예상 가스비</span>
                        <span style="font-weight:600;">{{ $estimatedGasFee }} ETH</span>
                    </div>
                    
                    <div style="display:flex;justify-content:space-between;margin-bottom:10px;">
                        <span style="color:#666;">플랫폼 수수료 (2.5%)</span>
                        <span style="font-weight:600;">{{ $nft->price * 0.025 }} ETH</span>
                    </div>
                    
                    <div style="border-top:2px solid #dee2e6;margin:15px 0;padding-top:15px;display:flex;justify-content:space-between;">
                        <span style="font-size:18px;font-weight:700;">총 비용</span>
                        <span style="font-size:18px;font-weight:700;color:#667eea;">{{ $totalCost }} ETH</span>
                    </div>
                </div>
                
                {{-- 에러 메시지 --}}
                @if($error)
                    <div style="background:#fee;border:1px solid #fcc;padding:15px;border-radius:8px;margin-bottom:20px;color:#c33;">
                        ⚠️ {{ $error }}
                    </div>
                @endif
                
                {{-- 안내 메시지 --}}
                <div style="background:#e8f5e9;padding:15px;border-radius:8px;margin-bottom:20px;font-size:14px;color:#2e7d32;">
                    ℹ️ 구매 버튼을 누르면 지갑에서 트랜잭션 승인을 요청해요. 승인 전까지는 언제든 취소할 수 있어요!
                </div>
                
                {{-- 버튼 --}}
                <div style="display:flex;gap:10px;">
                    <button wire:click="cancel" 
                            style="flex:1;padding:15px;border:2px solid #e9ecef;background:#fff;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;">
                        취소
                    </button>
                    <button wire:click="purchase" 
                            style="flex:2;padding:15px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;">
                        구매하기
                    </button>
                </div>
            </div>
        @endif
        
        {{-- 2단계: 처리 중 --}}
        @if($step === 2)
            <div style="padding:50px 30px;text-align:center;">
                <div style="width:80px;height:80px;border:6px solid #f3f3f3;border-top:6px solid #667eea;border-radius:50%;margin:0 auto 30px;animation:spin 1s linear infinite;"></div>
                
                <h2 style="margin:0 0 15px 0;font-size:24px;color:#333;">트랜잭션 처리 중...</h2>
                <p style="color:#666;font-size:16px;line-height:1.6;">
                    지갑에서 트랜잭션을 승인해주세요.<br>
                    보통 30초~1분 정도 걸려요 ☕
                </p>
                
                <div style="margin-top:30px;padding:20px;background:#f8f9fa;border-radius:10px;">
                    <p style="margin:0;font-size:14px;color:#666;">
                        💡 <strong>팁:</strong> 이 창을 닫아도 트랜잭션은 계속 처리돼요. 
                        마이페이지에서 진행 상황을 확인할 수 있어요!
                    </p>
                </div>
            </div>
        @endif
        
        {{-- 3단계: 완료 --}}
        @if($step === 3)
            <div style="padding:50px 30px;text-align:center;">
                <div style="width:80px;height:80px;background:#4caf50;border-radius:50%;margin:0 auto 30px;display:flex;align-items:center;justify-content:center;font-size:40px;">
                    ✓
                </div>
                
                <h2 style="margin:0 0 15px 0;font-size:24px;color:#333;">구매 완료! 🎉</h2>
                <p style="color:#666;font-size:16px;line-height:1.6;margin-bottom:25px;">
                    축하해요! NFT가 당신의 지갑으로 전송되었어요.<br>
                    블록체인에 기록되는 데 몇 분 정도 걸릴 수 있어요.
                </p>
                
                <div style="background:#f8f9fa;padding:20px;border-radius:10px;margin-bottom:25px;text-align:left;">
                    <h3 style="margin:0 0 15px 0;font-size:16px;">📝 트랜잭션 정보</h3>
                    <div style="display:flex;justify-content:space-between;margin-bottom:10px;font-size:14px;">
                        <span style="color:#666;">트랜잭션 해시</span>
                        <a href="https://etherscan.io/tx/{{ $transactionHash }}" 
                           target="_blank"
                           style="color:#667eea;text-decoration:none;">
                            {{ substr($transactionHash, 0, 10) }}...
                        </a>
                    </div>
                    <div style="display:flex;justify-content:space-between;font-size:14px;">
                        <span style="color:#666;">NFT</span>
                        <span style="font-weight:600;">{{ $nft->name }}</span>
                    </div>
                </div>
                
                <div style="display:flex;gap:10px;">
                    <button wire:click="cancel" 
                            style="flex:1;padding:15px;border:2px solid #e9ecef;background:#fff;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;">
                        닫기
                    </button>
                    <button onclick="window.location.href='/my-nfts'" 
                            style="flex:1;padding:15px;border:none;background:#667eea;color:#fff;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;">
                        내 NFT 보기
                    </button>
                </div>
            </div>
        @endif
        
    </div>
</div>