RoboDine 키오스크 개발 - React 기반 고객 주문 인터페이스

// App.js - 실제 구현된 라우트
function App() {
  // 키오스크에서 사용하는 WebSocket 토픽 지정
  const topics = ['menu', 'orders', 'tables'];

  return (
    <UnifiedWebSocketProvider topics={topics}>
      <CartProvider>
        <LanguageProvider>
          <Router>
            {/* 청소 완료 버튼 - 모든 페이지에서 표시 */}
            <CleaningButtonComponent />
            <Routes>
              <Route index element={<HomePage />} />
              <Route path="/order-status" element={<OrderStatusPage />} />
              <Route path="/checkout" element={<CheckoutPage />} />
              <Route path="/order-complete" element={<OrderCompletePage />} />
            </Routes>
          </Router>
        </LanguageProvider>
      </CartProvider>
    </UnifiedWebSocketProvider>
  );
}

// LanguageContext.js - 실제 구현 (100 lines)
export const LanguageProvider = ({ children }) => {
  // 로컬 스토리지에서 언어 설정 로드
  const [language, setLanguage] = useState(() => {
    const savedLanguage = localStorage.getItem('kioskLanguage');
    return savedLanguage || 'ko'; // 기본값은 한국어
  });

  // 언어 변경시 로컬 스토리지에 저장
  useEffect(() => {
    localStorage.setItem('kioskLanguage', language);
  }, [language]);

  // 현재 언어에 따른 아이콘 가져오기
  const getLanguageIcon = () => {
    switch(language) {
      case 'en': return '🇺🇸';
      case 'ja': return '🇯🇵';
      case 'zh': return '🇨🇳';
      default: return '🇰🇷';
    }
  };

  // 번역된 텍스트 가져오기 함수
  const t = (key, params = {}) => {
    // 점 표기법 키 분리 (예: 'sidebar.orderStatus')
    const keys = key.split('.');
    let translation = translations[language];
    
    // 각 키 단계별로 번역 객체 탐색
    for (const k of keys) {
      if (translation && translation[k]) {
        translation = translation[k];
      } else {
        return key; // 번역이 없으면 키 그대로 반환
      }
    }
    
    // 매개변수 치환 처리
    let result = translation;
    Object.keys(params).forEach(paramKey => {
      result = result.replace(`{${paramKey}}`, params[paramKey]);
    });
    
    return result;
  };

  return (
    <LanguageContext.Provider value=>
      {children}
    </LanguageContext.Provider>
  );
};

// UnifiedWebSocketProvider.js - 실제 구현
const UnifiedWebSocketProvider = ({ children, topics }) => {
  // 키오스크에서 사용하는 WebSocket 토픽: ['menu', 'orders', 'tables']
  const [connections, setConnections] = useState({});
  
  useEffect(() => {
    topics.forEach(topic => {
      connectToTopic(topic);
    });
  }, [topics]);
};

// CleaningButtonComponent - 실제 구현
const CleaningButtonComponent = () => {
  const handleCleaningComplete = async () => {
    try {
      // 백엔드에 청소 완료 상태 전송
      await sendCleaningCompleteSignal();
      showSuccessMessage('청소가 완료되었습니다.');
    } catch (error) {
      showErrorMessage('청소 완료 처리 중 오류가 발생했습니다.');
    }
  };
  
  return (
    <button 
      onClick={handleCleaningComplete}
      className="cleaning-complete-btn"
    >
      청소 완료
    </button>
  );
};

// LiveStreamComponent.jsx - 실제 구현 (729 lines)
const LiveStreamComponent = ({ onError, onConnected }) => {
  const videoRef = useRef(null);
  const peerConnectionRef = useRef(null);
  const [loading, setLoading] = useState(true);
  const [reconnecting, setReconnecting] = useState(false);
  const [selectedStreamId, setSelectedStreamId] = useState(null);
  const [streamList, setStreamList] = useState([]);
  const [errorMessage, setErrorMessage] = useState(null);

  // ICE 서버 설정 - STUN 서버 사용 (HTTP 환경 호환)
  const iceServers = [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:stun1.l.google.com:19302' }
  ];

  // 스트림 목록 가져오기
  const loadStreams = useCallback(async () => {
    try {
      const host = window.location.hostname;
      const url = `http://${host}:8000/streams`;
      
      const response = await fetch(url);
      const data = await response.json();
      
      if (data.streams) {
        setStreamList(data.streams);
        
        // 웹캠 스트림 찾기
        const webcamStream = data.streams.find(stream => stream.type === 'webcam');
        if (webcamStream) {
          setSelectedStreamId(webcamStream.id);
          return webcamStream.id;
        }
      }
    } catch (error) {
      setErrorMessage(`스트림 목록 가져오기 오류: ${error.message}`);
      throw error;
    }
  }, []);

  // HTTP 요청으로 WebRTC offer 전송
  const sendOfferViaHttp = useCallback(async (offer, streamId) => {
    const host = window.location.hostname;
    const url = `http://${host}:8000/webrtc/offer`;
    
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        streamId: streamId,
        sdp: offer.sdp,
        clientIp: 'kiosk-frontend' // 키오스크 클라이언트 식별자
      }),
    });

    if (!response.ok) {
      throw new Error(`서버 응답 오류: ${response.status}`);
    }

    return await response.json();
  }, []);

  return (
    <div className="live-stream-container">
      <h3>🍳 실시간 조리 영상</h3>
      {loading ? (
        <div className="stream-placeholder">조리 준비 중입니다...</div>
      ) : (
        <video 
          ref={videoRef} 
          autoPlay 
          muted 
          className="cooking-stream-video"
          onError={onError}
        />
      )}
      {errorMessage && (
        <div className="error-message">{errorMessage}</div>
      )}
    </div>
  );
};

// 3개의 주요 Context Provider
- CartProvider: 장바구니 상태 관리
- LanguageProvider: 다국어 지원
- UnifiedWebSocketProvider: 실시간 통신

// 키오스크에서 구독하는 토픽들
const topics = ['menu', 'orders', 'tables'];

// 각 토픽별 데이터 처리
- menu: 메뉴 정보 실시간 업데이트
- orders: 주문 상태 변경 알림
- tables: 테이블 상태 동기화

// 주문 ID 기반 스트림 라우팅 시스템
const StreamRouter = {
  // 주문과 쿡봇 매핑 테이블
  orderToCookbotMapping: new Map(),
  
  // 주문별 전용 스트림 채널 생성
  createPersonalizedStream: async (orderId, cookbotId) => {
    const streamChannel = `cookbot-${cookbotId}-order-${orderId}`;
    await setupWebRTCChannel(streamChannel);
    return streamChannel;
  },
  
  // 조리 단계별 카메라 앵글 자동 전환
  switchCameraAngle: (stage) => {
    const angles = {
      'prep': 'top-view',      // 재료 준비: 위에서 내려다보는 앵글
      'cooking': 'side-view',  // 조리 중: 측면 앵글
      'plating': 'close-up'    // 플레이팅: 클로즈업 앵글
    };
    return angles[stage] || 'default';
  }
};