feat: list thumbnail (#23)

.cursor/rules/rule.mdc

@@ -0,0 +1,52 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+## Constructor Patterns
+
+### Args Structures
+- For complex constructors, use `XXXArgs` struct to group parameters
+
+```go
+type QUICArgs struct {
+    TLSConfig      *tls.Config
+    Bootstrap      *bootstrap.BootstrapAgent
+    StreamManager  *wrtc.StreamManager
+    SessionManager *streamsession.SessionManager
+    RTPRouter      *rtprouter.RTPRouter
+}
+
+func NewQUICAcceptor(config *conf.Config, args QUICArgs) (*QUICAcceptor, error) {
+    // implementation
+}
+```
+
+### Constructor Naming
+- Always use `NewXXX` pattern for constructors
+- Return pointer and error when validation is needed
+- Return pointer only when no validation is required
+
+## Language and Documentation
+
+### Language Requirements
+- **ALL comments, documentation, and messages MUST be in English**
+- Function documentation must be in English
+- Log messages must be in English
+- Error messages must be in English
+- Variable names and function names in English
+
+### Comment Style
+- Write comments only when necessary for clarity or complex logic
+- Avoid obvious comments that just repeat the code
+- Focus on explaining WHY, not WHAT
+- Use concise, clear English
+
+```go
+// ValidateArgs checks if struct fields are nil or invalid interfaces
+func ValidateArgs(args interface{}) error {
+    if !fieldVal.CanInterface() {
+        continue
+    }
+}
+```

.gitignore

@@ -0,0 +1 @@
+videos/*

front/src/App.tsx

@@ -6,6 +6,7 @@ import {
 import StreamList from "./pages/StreamList.tsx";
 import Player from "./pages/Player.tsx";
 import './App.css'
+import './styles/common.css'
 
 function App() {
   return (

front/src/pages/Player.css

@@ -0,0 +1,373 @@
+.player-container {
+  min-height: 100vh;
+  background: var(--primary-gradient);
+  font-family: var(--font-family);
+  color: var(--text-primary);
+}
+
+.player-header {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  padding: 2rem;
+  border-bottom: 1px solid var(--glass-border);
+}
+
+.back-button {
+  background: var(--glass-bg);
+  color: var(--text-primary);
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--border-radius-small);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-light);
+}
+
+.stream-meta {
+  flex: 1;
+}
+
+.stream-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin: 0 0 0.5rem 0;
+}
+
+.stream-stats {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.live-badge {
+  background: var(--live-gradient);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: var(--border-radius-large);
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  animation: pulse-live 2s infinite;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+
+@keyframes pulse-live {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0.8; }
+}
+
+.viewer-count {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.player-wrapper {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.video-container {
+  position: relative;
+  background: #000;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-heavy);
+  aspect-ratio: 16/9;
+}
+
+.video-player {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border-radius);
+}
+
+.video-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  backdrop-filter: blur(5px);
+}
+
+.video-loading-overlay p {
+  margin-top: 1rem;
+  font-size: 1.1rem;
+  color: white;
+}
+
+.player-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+
+.player-loading p {
+  font-size: 1.2rem;
+  margin: 0;
+  opacity: 0.9;
+}
+
+.player-error {
+  text-align: center;
+  padding: 3rem;
+  background: var(--glass-bg);
+  border-radius: var(--border-radius);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+}
+
+.error-icon {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+}
+
+.player-error h2,
+.player-error h3 {
+  color: #fca5a5;
+  margin-bottom: 1rem;
+  font-size: 2rem;
+}
+
+.player-error p {
+  margin-bottom: 2rem;
+  font-size: 1.1rem;
+  opacity: 0.9;
+  line-height: 1.6;
+}
+
+.error-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.retry-button {
+  background: var(--button-primary);
+  color: white;
+  border: none;
+  padding: 0.75rem 2rem;
+  border-radius: var(--border-radius-small);
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.retry-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
+}
+
+.back-link {
+  background: var(--glass-bg);
+  color: var(--text-primary);
+  text-decoration: none;
+  padding: 0.75rem 2rem;
+  border-radius: var(--border-radius-small);
+  font-size: 1rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+}
+
+.back-link:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+
+.player-info {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.stream-details,
+.player-controls-info {
+  background: var(--glass-bg);
+  padding: 2rem;
+  border-radius: var(--border-radius);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+}
+
+.stream-details h3,
+.player-controls-info h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0 0 1.5rem 0;
+  color: #e0e7ff;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.detail-item:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.detail-label {
+  font-weight: 500;
+  opacity: 0.8;
+}
+
+.detail-value {
+  font-weight: 600;
+}
+
+.status-live {
+  color: #fca5a5;
+  font-weight: 600;
+}
+
+.status-offline {
+  color: #9ca3af;
+  font-weight: 600;
+}
+
+.player-controls-info ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.player-controls-info li {
+  padding: 0.75rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.player-controls-info li:last-child {
+  border-bottom: none;
+}
+
+.player-controls-info kbd {
+  padding: 0.25rem 0.5rem;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  min-width: 3rem;
+  text-align: center;
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+  .player-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+
+  .stream-title {
+    font-size: 2rem;
+  }
+
+  .stream-stats {
+    gap: 1rem;
+  }
+
+  .player-wrapper {
+    padding: 1rem;
+  }
+
+  .player-info {
+    padding: 1rem;
+  }
+
+  .stream-details,
+  .player-controls-info {
+    padding: 1.5rem;
+  }
+
+  .error-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .stream-title {
+    font-size: 1.5rem;
+  }
+
+  .live-badge,
+  .viewer-count {
+    font-size: 0.8rem;
+    padding: 0.4rem 0.8rem;
+  }
+
+  .back-button {
+    padding: 0.6rem 1.2rem;
+    font-size: 0.9rem;
+  }
+
+  .detail-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+}
+
+/* 다크 모드 지원 */
+@media (prefers-color-scheme: dark) {
+  .video-container {
+    box-shadow: var(--shadow-heavy);
+  }
+}
+
+/* 접근성 개선 */
+@media (prefers-reduced-motion: reduce) {
+  .live-badge {
+    animation: none;
+  }
+
+  .back-button:hover,
+  .retry-button:hover,
+  .back-link:hover {
+    transform: none;
+  }
+}
+
+/* 포커스 스타일 */
+.back-button:focus,
+.retry-button:focus,
+.back-link:focus {
+  outline: 3px solid #60a5fa;
+  outline-offset: 2px;
+} 

front/src/pages/Player.tsx

@@ -1,27 +1,161 @@
 import MuxPlayer from "@mux/mux-video-react";
-import { useParams } from 'react-router-dom';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import './Player.css';
+
+interface StreamInfo {
+    id: string;
+    title: string;
+    isLive: boolean;
+    viewers?: number;
+}
 
 function Player() {
     const { streamId } = useParams<{ streamId: string }>();
+    const navigate = useNavigate();
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [streamInfo, setStreamInfo] = useState<StreamInfo | null>(null);
+    const [isPlayerReady, setIsPlayerReady] = useState(false);
+
+    useEffect(() => {
+        if (!streamId) {
+            setError('Stream ID not provided');
+            setIsLoading(false);
+            return;
+        }
+
+        // 스트림 정보 설정 (실제로는 API에서 가져올 수 있음)
+        setStreamInfo({
+            id: streamId,
+            title: streamId,
+            isLive: true,
+            viewers: Math.floor(Math.random() * 1000) + 1
+        });
+
+        setIsLoading(false);
+    }, [streamId]);
+
+    const handlePlayerLoadStart = () => {
+        setIsPlayerReady(false);
+    };
+
+    const handlePlayerLoadedData = () => {
+        setIsPlayerReady(true);
+    };
+
+    const handlePlayerError = () => {
+        setError('Failed to load stream. The stream may be offline or unavailable.');
+    };
+
+    const handleGoBack = () => {
+        navigate('/');
+    };
 
     if (!streamId) {
-        return <div>Error: Stream ID not provided.</div>;
+        return (
+            <div className="player-container">
+                <div className="error-container">
+                    <h2>Error</h2>
+                    <p>Stream ID not provided</p>
+                    <Link to="/" className="glass-button">
+                        ← Back to Streams
+                    </Link>
+                </div>
+            </div>
+        );
     }
 
     const playbackUrl = `${window.location.protocol}//${window.location.host}/hls/${streamId}/master.m3u8`;
 
     return (
-        <div>
+        <div className="player-container">
-            <h1>Playing: {streamId}</h1>
+            <div className="player-header glass-panel">
+                <button onClick={handleGoBack} className="glass-button">
+                    ← Back to Streams
+                </button>
+                <div className="stream-meta">
+                    <h1 className="stream-title title-gradient">{streamInfo?.title || streamId}</h1>
+                    <div className="stream-stats">
+                        {streamInfo?.isLive && (
+                            <span className="live-badge">● LIVE</span>
+                        )}
+                        {streamInfo?.viewers && (
+                            <span className="viewer-count">
+                                👥 {streamInfo.viewers.toLocaleString()} viewers
+                            </span>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            <div className="player-wrapper">
+                {isLoading ? (
+                    <div className="player-loading glass-panel">
+                        <div className="loading-spinner"></div>
+                        <p>Loading stream...</p>
+                    </div>
+                ) : error ? (
+                    <div className="error-container">
+                        <div className="error-icon">⚠️</div>
+                        <h3>Stream Unavailable</h3>
+                        <p>{error}</p>
+                        <div className="error-actions">
+                            <button onClick={() => window.location.reload()} className="btn-primary">
+                                🔄 Retry
+                            </button>
+                            <Link to="/" className="btn-secondary">
+                                ← Back to Streams
+                            </Link>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="video-container">
+                        {!isPlayerReady && (
+                            <div className="video-loading-overlay">
+                                <div className="loading-spinner"></div>
+                                <p>Loading video...</p>
+                            </div>
+                        )}
                         <MuxPlayer
-                style={{ width: "100%" }}
+                            className="video-player"
                             src={playbackUrl}
                             autoPlay
                             muted
                             controls
                             preferPlayback="mse"
+                            onLoadStart={handlePlayerLoadStart}
+                            onLoadedData={handlePlayerLoadedData}
+                            onError={handlePlayerError}
                         />
                     </div>
+                )}
+            </div>
+
+            <div className="player-info grid-responsive grid-2">
+                <div className="stream-details glass-panel">
+                    <h3>Stream Information</h3>
+                    <div className="detail-item">
+                        <span className="detail-label">Stream ID:</span>
+                        <span className="detail-value">{streamId}</span>
+                    </div>
+                    <div className="detail-item">
+                        <span className="detail-label">Status:</span>
+                        <span className="detail-value">
+                            {streamInfo?.isLive ? (
+                                <span className="status-live">🔴 Live</span>
+                            ) : (
+                                <span className="status-offline">⚫ Offline</span>
+                            )}
+                        </span>
+                    </div>
+                    <div className="detail-item">
+                        <span className="detail-label">Quality:</span>
+                        <span className="detail-value">Auto (HLS)</span>
+                    </div>
+                </div>
+            </div>
+        </div>
     );
 }
 

front/src/pages/StreamList.css

@@ -0,0 +1,308 @@
+.stream-list-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+  min-height: 100vh;
+  background: var(--primary-gradient);
+  font-family: var(--font-family);
+}
+
+.stream-list-header {
+  text-align: center;
+  margin-bottom: 3rem;
+  color: var(--text-primary);
+}
+
+.stream-list-header h1 {
+  margin: 0 0 0.5rem 0;
+}
+
+.stream-count {
+  opacity: 0.9;
+  margin: 0;
+  font-weight: 400;
+}
+
+.streams-grid {
+  margin-bottom: 2rem;
+}
+
+.stream-card {
+  background: white;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-light);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  text-decoration: none;
+  color: inherit;
+  position: relative;
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+}
+
+.stream-card:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: var(--shadow-medium);
+}
+
+.stream-card:active {
+  transform: translateY(-4px) scale(1.01);
+}
+
+.stream-thumbnail {
+  width: 100%;
+  height: 200px;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
+}
+
+.stream-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.stream-card:hover .stream-thumbnail img {
+  transform: scale(1.05);
+}
+
+.thumbnail-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--primary-gradient);
+  position: relative;
+}
+
+.play-icon {
+  font-size: 3rem;
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+.stream-info {
+  padding: 1.5rem;
+}
+
+.stream-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+  color: #1f2937;
+  line-height: 1.4;
+}
+
+.stream-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.live-indicator {
+  background: var(--live-gradient);
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--border-radius-large);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  animation: blink 2s infinite;
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0.7; }
+}
+
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  color: var(--text-primary);
+}
+
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top: 4px solid white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 1rem;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading p {
+  font-size: 1.2rem;
+  margin: 0;
+  opacity: 0.9;
+}
+
+.error {
+  text-align: center;
+  padding: 3rem;
+  background: var(--glass-bg);
+  border-radius: var(--border-radius);
+  color: var(--text-primary);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+}
+
+.error h2 {
+  color: #fca5a5;
+  margin-bottom: 1rem;
+  font-size: 2rem;
+}
+
+.error p {
+  margin-bottom: 2rem;
+  font-size: 1.1rem;
+  opacity: 0.9;
+}
+
+.error button {
+  background: var(--button-primary);
+  color: white;
+  border: none;
+  padding: 0.75rem 2rem;
+  border-radius: var(--border-radius-small);
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.error button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
+}
+
+.empty-state {
+  text-align: center;
+  padding: 4rem 2rem;
+  color: var(--text-primary);
+}
+
+.empty-icon {
+  font-size: 4rem;
+  margin-bottom: 1.5rem;
+  opacity: 0.8;
+}
+
+.empty-state h2 {
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.empty-state p {
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  opacity: 0.9;
+  line-height: 1.6;
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+  .stream-list-container {
+    padding: 1rem;
+  }
+  
+  .stream-list-header h1 {
+    font-size: 2.5rem;
+  }
+  
+  .streams-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+  
+  .stream-thumbnail {
+    height: 180px;
+  }
+  
+  .empty-state {
+    padding: 3rem 1rem;
+  }
+  
+  .empty-state h2 {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .stream-list-header h1 {
+    font-size: 2rem;
+  }
+  
+  .stream-count {
+    font-size: 1rem;
+  }
+  
+  .stream-thumbnail {
+    height: 160px;
+  }
+  
+  .stream-info {
+    padding: 1rem;
+  }
+  
+  .stream-title {
+    font-size: 1.1rem;
+  }
+}
+
+/* 다크 모드 지원 */
+@media (prefers-color-scheme: dark) {
+  .stream-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .stream-title {
+    color: #f9fafb;
+  }
+}
+
+/* 접근성 개선 */
+@media (prefers-reduced-motion: reduce) {
+  .stream-card,
+  .stream-thumbnail img,
+  .play-icon,
+  .live-indicator,
+  .loading-spinner {
+    animation: none;
+    transition: none;
+  }
+  
+  .stream-card:hover {
+    transform: none;
+  }
+}
+
+/* 포커스 스타일 */
+.stream-card:focus {
+  outline: 3px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+.error button:focus {
+  outline: 3px solid #60a5fa;
+  outline-offset: 2px;
+} 

front/src/pages/StreamList.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import './StreamList.css';
 
 interface StreamsResponse {
     error_code: number;
@@ -9,13 +10,53 @@ interface StreamsResponse {
     };
 }
 
+interface StreamCardProps {
+    streamId: string;
+}
+
+function StreamCard({ streamId }: StreamCardProps) {
+    // 썸네일 이미지가 로드되지 않을 경우 기본 이미지를 보여주기 위한 상태
+    const [imageError, setImageError] = useState(false);
+
+    const handleImageError = () => {
+        setImageError(true);
+    };
+
+    return (
+        <Link to={`/player/${streamId}`} className="stream-card">
+            <div className="stream-thumbnail">
+                {!imageError ? (
+                    <img 
+                        src={`/thumbnail/${streamId}`}
+                        alt={`${streamId} thumbnail`}
+                        onError={handleImageError}
+                        loading="lazy"
+                    />
+                ) : (
+                    <div className="thumbnail-placeholder">
+                        <div className="play-icon">▶</div>
+                    </div>
+                )}
+            </div>
+            <div className="stream-info">
+                <h3 className="stream-title">{streamId}</h3>
+                <div className="stream-status">
+                    <span className="live-badge">● LIVE</span>
+                </div>
+            </div>
+        </Link>
+    );
+}
+
 function StreamList() {
     const [streams, setStreams] = useState<string[]>([]);
     const [error, setError] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         const fetchStreams = async () => {
             try {
+                setLoading(true);
                 const response = await fetch('/streams');
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
@@ -26,32 +67,73 @@ function StreamList() {
                 } else {
                     throw new Error(result.message || 'Failed to fetch streams');
                 }
-            } catch (e: any) {
+            } catch (error) {
-                setError(e.message);
+                const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
-                console.error("Error fetching streams:", e);
+                setError(errorMessage);
+                console.error("Error fetching streams:", error);
+            } finally {
+                setLoading(false);
             }
         };
 
         fetchStreams();
+        
+        // 30초마다 스트림 목록을 새로고침
+        const interval = setInterval(fetchStreams, 30000);
+        
+        return () => clearInterval(interval);
     }, []);
 
+    if (loading) {
+        return (
+            <div className="stream-list-container">
+                <div className="loading">
+                    <div className="loading-spinner"></div>
+                    <p>Loading streams...</p>
+                </div>
+            </div>
+        );
+    }
+
     if (error) {
-        return <div>Error: {error}</div>;
+        return (
+            <div className="stream-list-container">
+                <div className="error-container">
+                    <h2>Error</h2>
+                    <p>{error}</p>
+                    <button onClick={() => window.location.reload()} className="btn-primary">
+                        Retry
+                    </button>
+                </div>
+            </div>
+        );
     }
 
     return (
-        <div>
+        <div className="stream-list-container">
-            <h1>Available Streams</h1>
+            <header className="stream-list-header">
+                <h1 className="title-gradient text-large">Live Streams</h1>
+                <p className="stream-count text-normal">
+                    {streams.length > 0 
+                        ? `${streams.length} active stream${streams.length > 1 ? 's' : ''}` 
+                        : 'No active streams'
+                    }
+                </p>
+            </header>
+            
             {streams.length > 0 ? (
-                <ul>
+                <div className="streams-grid grid-responsive grid-auto">
                     {streams.map(streamId => (
-                        <li key={streamId}>
+                        <StreamCard key={streamId} streamId={streamId} />
-                            <Link to={`/player/${streamId}`}>{streamId}</Link>
-                        </li>
                     ))}
-                </ul>
+                </div>
             ) : (
-                <p>No active streams found.</p>
+                <div className="empty-state">
+                    <div className="empty-icon">📺</div>
+                    <h2 className="text-medium">No Live Streams</h2>
+                    <p>There are no active streams at the moment.</p>
+                    <p>Check back later or start streaming!</p>
+                </div>
             )}
         </div>
     );

front/src/styles/common.css

@@ -0,0 +1,246 @@
+/* 공통 변수 */
+:root {
+  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --glass-bg: rgba(255, 255, 255, 0.1);
+  --glass-border: rgba(255, 255, 255, 0.2);
+  --text-primary: white;
+  --text-secondary: rgba(255, 255, 255, 0.9);
+  --text-muted: rgba(255, 255, 255, 0.7);
+  --live-gradient: linear-gradient(45deg, #ef4444, #dc2626);
+  --button-primary: linear-gradient(45deg, #3b82f6, #1d4ed8);
+  --shadow-light: 0 8px 32px rgba(0, 0, 0, 0.1);
+  --shadow-medium: 0 20px 40px rgba(0, 0, 0, 0.15);
+  --shadow-heavy: 0 20px 40px rgba(0, 0, 0, 0.3);
+  --border-radius: 16px;
+  --border-radius-small: 12px;
+  --border-radius-large: 20px;
+  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* 공통 컨테이너 */
+.app-container {
+  min-height: 100vh;
+  background: var(--primary-gradient);
+  font-family: var(--font-family);
+  color: var(--text-primary);
+}
+
+/* 공통 글래스모피즘 스타일 */
+.glass-panel {
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--border-radius);
+}
+
+.glass-button {
+  background: var(--glass-bg);
+  color: var(--text-primary);
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--border-radius-small);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+}
+
+.glass-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-light);
+}
+
+/* 공통 로딩 스피너 */
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top: 4px solid white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 공통 라이브 배지 */
+.live-badge {
+  background: var(--live-gradient);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: var(--border-radius-large);
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  animation: pulse-live 2s infinite;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+
+@keyframes pulse-live {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0.8; }
+}
+
+/* 공통 버튼 스타일 */
+.btn-primary {
+  background: var(--button-primary);
+  color: white;
+  border: none;
+  padding: 0.75rem 2rem;
+  border-radius: var(--border-radius-small);
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
+}
+
+.btn-secondary {
+  background: var(--glass-bg);
+  color: var(--text-primary);
+  border: 1px solid var(--glass-border);
+  padding: 0.75rem 2rem;
+  border-radius: var(--border-radius-small);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+
+/* 공통 타이포그래피 */
+.title-gradient {
+  background: linear-gradient(45deg, #fff, #e0e7ff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.text-large {
+  font-size: 3rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.text-medium {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.text-normal {
+  font-size: 1.2rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+/* 공통 에러 스타일 */
+.error-container {
+  text-align: center;
+  padding: 3rem;
+  background: var(--glass-bg);
+  border-radius: var(--border-radius);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+}
+
+.error-container h2,
+.error-container h3 {
+  color: #fca5a5;
+  margin-bottom: 1rem;
+}
+
+.error-container p {
+  margin-bottom: 2rem;
+  font-size: 1.1rem;
+  opacity: 0.9;
+  line-height: 1.6;
+}
+
+/* 공통 그리드 */
+.grid-responsive {
+  display: grid;
+  gap: 2rem;
+}
+
+.grid-1 { grid-template-columns: 1fr; }
+.grid-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-auto { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
+
+/* 공통 반응형 */
+@media (max-width: 1024px) {
+  .grid-3 { grid-template-columns: repeat(2, 1fr); }
+  .grid-2 { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 768px) {
+  .text-large { font-size: 2.5rem; }
+  .text-medium { font-size: 1.8rem; }
+  .grid-responsive { gap: 1.5rem; }
+  .grid-auto { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 480px) {
+  .text-large { font-size: 2rem; }
+  .text-medium { font-size: 1.5rem; }
+  .text-normal { font-size: 1rem; }
+  .grid-responsive { gap: 1rem; }
+}
+
+/* 접근성 */
+@media (prefers-reduced-motion: reduce) {
+  .loading-spinner,
+  .live-badge {
+    animation: none;
+  }
+  
+  .glass-button:hover,
+  .btn-primary:hover,
+  .btn-secondary:hover {
+    transform: none;
+  }
+}
+
+/* 포커스 스타일 */
+.glass-button:focus,
+.btn-primary:focus,
+.btn-secondary:focus {
+  outline: 3px solid #60a5fa;
+  outline-offset: 2px;
+}
+
+/* 다크 모드 지원 */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --glass-bg: rgba(255, 255, 255, 0.05);
+    --glass-border: rgba(255, 255, 255, 0.1);
+  }
+} 

main.go

@@ -113,7 +113,10 @@ func main() {
 		api.GET("/assets/*", func(c echo.Context) error {
 			return c.File("front/dist" + c.Request().URL.Path)
 		})
-		api.GET("/", func(c echo.Context) error {
+
+		// SPA fallback - serve index.html for all unmatched routes
+		// This must be registered LAST to act as a catch-all
+		api.GET("/*", func(c echo.Context) error {
 			return c.File("front/dist/index.html")
 		})