Vite + Module Federation: 빠른 개발로 마이크로프론트엔드 구축하기

// shell-app/src/App.tsx
import { Suspense, lazy } from 'react'
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import './App.css'

// Remote 컴포넌트들을 동적 로드
const MusicPlayer = lazy(() => import('player/MusicPlayer'))
const Search = lazy(() => import('search/Search'))
const PlaylistView = lazy(() => import('playlist/PlaylistView'))

function App() {
  return (
    <BrowserRouter>
      <div className="app">
        {/* 사이드바 */}
        <aside className="sidebar">
          <h1>Spotify Clone</h1>
          <nav>
            <Link to="/search">검색</Link>
            <Link to="/library">내 라이브러리</Link>
            <Link to="/playlist">플레이리스트</Link>
          </nav>
        </aside>

        {/* 메인 콘텐츠 */}
        <main className="content">
          <Routes>
            <Route
              path="/search"
              element={
                <Suspense fallback={<LoadingSpinner />}>
                  <Search />
                </Suspense>
              }
            />

            <Route
              path="/playlist/:id?"
              element={
                <Suspense fallback={<LoadingSpinner />}>
                  <PlaylistView />
                </Suspense>
              }
            />

            <Route
              path="/"
              element={<Home />}
            />
          </Routes>
        </main>

        {/* 하단 플레이어 (항상 표시) */}
        <footer className="player-bar">
          <Suspense fallback={<div>플레이어 로딩중...</div>}>
            <MusicPlayer />
          </Suspense>
        </footer>
      </div>
    </BrowserRouter>
  )
}

function LoadingSpinner() {
  return (
    <div className="loading">
      <div className="spinner" />
      <p>로딩 중...</p>
    </div>
  )
}

function Home() {
  return (
    <div className="home">
      <h2>오늘 뭐 들을까요?</h2>
      <p>검색해서 좋아하는 음악을 찾아보세요!</p>
    </div>
  )
}

export default App

// player-app/src/MusicPlayer.tsx
import { useState, useRef, useEffect } from 'react'
import './MusicPlayer.css'

interface Song {
  id: string
  title: string
  artist: string
  albumArt: string
  url: string
  duration: number
}

export default function MusicPlayer() {
  const [currentSong, setCurrentSong] = useState<Song | null>(null)
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [volume, setVolume] = useState(80)
  const audioRef = useRef<HTMLAudioElement>(null)

  // 재생/일시정지 토글
  const togglePlay = () => {
    if (!audioRef.current) return

    if (isPlaying) {
      audioRef.current.pause()
    } else {
      audioRef.current.play()
    }
    setIsPlaying(!isPlaying)
  }

  // 진행바 업데이트
  const handleTimeUpdate = () => {
    if (audioRef.current) {
      setCurrentTime(audioRef.current.currentTime)
    }
  }

  // 진행바 클릭 (시간 이동)
  const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!audioRef.current || !currentSong) return

    const rect = e.currentTarget.getBoundingClientRect()
    const percent = (e.clientX - rect.left) / rect.width
    const newTime = percent * currentSong.duration

    audioRef.current.currentTime = newTime
    setCurrentTime(newTime)
  }

  // 볼륨 조절
  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newVolume = parseInt(e.target.value)
    setVolume(newVolume)
    if (audioRef.current) {
      audioRef.current.volume = newVolume / 100
    }
  }

  // 시간 포맷팅 (초 → mm:ss)
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins}:${secs.toString().padStart(2, '0')}`
  }

  // 데모 곡 (실제로는 API에서 가져옴)
  useEffect(() => {
    setCurrentSong({
      id: '1',
      title: 'Bohemian Rhapsody',
      artist: 'Queen',
      albumArt: 'https://via.placeholder.com/60',
      url: 'https://example.com/song.mp3',
      duration: 354, // 5:54
    })
  }, [])

  if (!currentSong) {
    return (
      <div className="music-player empty">
        <p>재생할 곡을 선택하세요</p>
      </div>
    )
  }

  return (
    <div className="music-player">
      <audio
        ref={audioRef}
        src={currentSong.url}
        onTimeUpdate={handleTimeUpdate}
        onEnded={() => setIsPlaying(false)}
      />

      {/* 왼쪽: 앨범 정보 */}
      <div className="song-info">
        <img src={currentSong.albumArt} alt={currentSong.title} />
        <div className="song-details">
          <div className="song-title">{currentSong.title}</div>
          <div className="song-artist">{currentSong.artist}</div>
        </div>
      </div>

      {/* 중앙: 재생 컨트롤 */}
      <div className="player-controls">
        <div className="control-buttons">
          <button className="btn-control">⏮️</button>
          <button className="btn-play" onClick={togglePlay}>
            {isPlaying ? '⏸️' : '▶️'}
          </button>
          <button className="btn-control">⏭️</button>
        </div>

        {/* 진행바 */}
        <div className="progress-bar-container">
          <span className="time">{formatTime(currentTime)}</span>
          <div className="progress-bar" onClick={handleSeek}>
            <div
              className="progress-bar-fill"
              style={{
                width: `${(currentTime / currentSong.duration) * 100}%`,
              }}
            />
          </div>
          <span className="time">{formatTime(currentSong.duration)}</span>
        </div>
      </div>

      {/* 오른쪽: 볼륨 */}
      <div className="volume-control">
        <span>🔊</span>
        <input
          type="range"
          min="0"
          max="100"
          value={volume}
          onChange={handleVolumeChange}
        />
      </div>
    </div>
  )
}

// search-app/src/Search.tsx
import { useState } from 'react'
import './Search.css'

interface SearchResult {
  id: string
  type: 'track' | 'album' | 'artist'
  name: string
  artist?: string
  albumArt?: string
}

export default function Search() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState<SearchResult[]>([])
  const [isSearching, setIsSearching] = useState(false)

  const handleSearch = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!query.trim()) return

    setIsSearching(true)

    // 실제로는 API 호출
    setTimeout(() => {
      setResults([
        {
          id: '1',
          type: 'track',
          name: 'Bohemian Rhapsody',
          artist: 'Queen',
          albumArt: 'https://via.placeholder.com/60',
        },
        {
          id: '2',
          type: 'track',
          name: 'Don\'t Stop Me Now',
          artist: 'Queen',
          albumArt: 'https://via.placeholder.com/60',
        },
        {
          id: '3',
          type: 'album',
          name: 'A Night at the Opera',
          artist: 'Queen',
          albumArt: 'https://via.placeholder.com/60',
        },
      ])
      setIsSearching(false)
    }, 500)
  }

  const handlePlay = (result: SearchResult) => {
    console.log('재생:', result.name)
    // 실제로는 글로벌 상태에 곡 정보 전달
  }

  return (
    <div className="search">
      <h2>검색</h2>

      <form onSubmit={handleSearch} className="search-form">
        <input
          type="text"
          placeholder="곡, 아티스트, 앨범 검색..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="search-input"
        />
        <button type="submit" className="search-btn">
          🔍 검색
        </button>
      </form>

      {isSearching && (
        <div className="searching">
          <div className="spinner" />
          <p>검색 중...</p>
        </div>
      )}

      {!isSearching && results.length > 0 && (
        <div className="search-results">
          <h3>검색 결과</h3>
          <div className="results-list">
            {results.map((result) => (
              <div key={result.id} className="result-item">
                <img src={result.albumArt} alt={result.name} />
                <div className="result-info">
                  <div className="result-name">{result.name}</div>
                  <div className="result-artist">{result.artist}</div>
                  <div className="result-type">
                    {result.type === 'track' ? '곡' : result.type === 'album' ? '앨범' : '아티스트'}
                  </div>
                </div>
                <button
                  className="btn-play-result"
                  onClick={() => handlePlay(result)}
                >
                  ▶️ 재생
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {!isSearching && query && results.length === 0 && (
        <div className="no-results">
          <p>검색 결과가 없습니다</p>
        </div>
      )}
    </div>
  )
}

// player-app/src/MusicPlayer.tsx
import { useEffect } from 'react'
// Shell의 Store 사용
import { useMusicStore } from 'shell/store'

export default function MusicPlayer() {
  // 글로벌 상태 사용
  const currentSong = useMusicStore((state) => state.currentSong)
  const isPlaying = useMusicStore((state) => state.isPlaying)
  const setIsPlaying = useMusicStore((state) => state.setIsPlaying)
  const setCurrentTime = useMusicStore((state) => state.setCurrentTime)

  const togglePlay = () => {
    setIsPlaying(!isPlaying)  // 글로벌 상태 업데이트
  }

  useEffect(() => {
    // 오디오 재생/정지
    if (audioRef.current) {
      if (isPlaying) {
        audioRef.current.play()
      } else {
        audioRef.current.pause()
      }
    }
  }, [isPlaying])

  // 나머지 코드...
}

// search-app/src/Search.tsx
import { useMusicStore } from 'shell/store'

export default function Search() {
  const setCurrentSong = useMusicStore((state) => state.setCurrentSong)
  const setIsPlaying = useMusicStore((state) => state.setIsPlaying)

  const handlePlay = (result: SearchResult) => {
    // 곡 재생 → 글로벌 상태 업데이트
    setCurrentSong({
      id: result.id,
      title: result.name,
      artist: result.artist || '',
      albumArt: result.albumArt || '',
      url: 'https://example.com/song.mp3',
      duration: 240,
    })
    setIsPlaying(true)  // 자동 재생
  }

  // 나머지 코드...
}

// ErrorBoundary 추가
import { ErrorBoundary } from 'react-error-boundary'

function App() {
  return (
    <ErrorBoundary fallback={<ErrorFallback />}>
      <Suspense fallback={<Loading />}>
        <MusicPlayer />
      </Suspense>
    </ErrorBoundary>
  )
}

function ErrorFallback({ error }: { error: Error }) {
  return (
    <div className="error">
      <h3>플레이어를 불러올 수 없습니다</h3>
      <p>{error.message}</p>
      <button onClick={() => window.location.reload()}>
        새로고침
      </button>
    </div>
  )
}