Add qr code

tests/components/Lobby.test.tsx

@@ -18,6 +18,12 @@ vi.mock('framer-motion', () => ({
   AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children}</>,
 }));
 
+vi.mock('qrcode.react', () => ({
+  QRCodeSVG: ({ value, size }: { value: string; size: number }) => (
+    <svg data-testid="qr-code" data-value={value} width={size} height={size} />
+  ),
+}));
+
 describe('Lobby', () => {
   const defaultProps = {
     quizTitle: 'Test Quiz',
@@ -206,6 +212,35 @@ describe('Lobby', () => {
     });
   });
 
+  describe('QR code', () => {
+    it('shows QR code for host', () => {
+      render(<Lobby {...defaultProps} />);
+      
+      const qrCode = screen.getByTestId('qr-code');
+      expect(qrCode).toBeInTheDocument();
+      expect(qrCode).toHaveAttribute('data-value', 'http://localhost:5173/play/ABC123');
+    });
+
+    it('does not show QR code for client', () => {
+      render(<Lobby {...defaultProps} role="CLIENT" />);
+      
+      expect(screen.queryByTestId('qr-code')).not.toBeInTheDocument();
+    });
+
+    it('does not show QR code when gamePin is null', () => {
+      render(<Lobby {...defaultProps} gamePin={null} />);
+      
+      expect(screen.queryByTestId('qr-code')).not.toBeInTheDocument();
+    });
+
+    it('generates correct QR code URL with game PIN', () => {
+      render(<Lobby {...defaultProps} gamePin="XYZ789" />);
+      
+      const qrCode = screen.getByTestId('qr-code');
+      expect(qrCode).toHaveAttribute('data-value', 'http://localhost:5173/play/XYZ789');
+    });
+  });
+
   describe('host participates mode', () => {
     it('shows host in player list when hostParticipates is true', () => {
       const players = [