Lobby 컴포넌트를 Zustand를 사용하도록 수정하겠습니다. 먼저, 이전에 제시한 useSocketStore를 사용한다고 가정하고 코드를 수정하겠습니다.

javascript
Copy
'use client'

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Room from '@/components/lobby/Room';
import RoomButton from '@/components/lobby/RoomButton';
import RoomModal from '@/components/lobby/RoomModal';
import useSocketStore from '../../store/useSocketStore';// 경로는 실제 위치에 맞게 조정하세요

export default function Lobby() {
  const router = useRouter();
  const { initSocket, closeSocket, rooms, addRoom, joinRoom } = useSocketStore();
  const [showRoomModal, setShowRoomModal] = useState(false);

  useEffect(() => {
    initSocket('<http://localhost:7777>');
    return () => closeSocket();
  }, [initSocket, closeSocket]);

  useEffect(() => {
    console.log('Rooms updated', rooms);
  }, [rooms]);

  const goGame = (roomId) => {
    joinRoom(roomId);
    router.push(`/game?roomId=${roomId}`);
  };

  const handleCreateRoom = (roomData) => {
    addRoom(roomData, (newRoom) => {
      goGame(newRoom.roomId);
    });
  };

  return (
    <div className="relative flex flex-col items-center justify-between min-h-screen p-6 bg-cover bg-center" style={{ backgroundImage: "url('/images/ring.jpg')" }}>
      <div className="absolute top-16 w-full flex flex-col items-center gap-4 font-bold">
        <h1 className="text-8xl">로비</h1>
      </div>
      <div className="flex flex-col items-center w-full max-w-screen-md mt-60 mb-30">
        <div className="w-full p-6 bg-blue-100 rounded-lg shadow-lg">
          <div className="flex justify-between mb-6">
            <button className="bg-gray-300 px-4 py-2 rounded-lg">필터</button>
            <input className="border border-gray-300 p-2 rounded-lg flex-grow mx-4" placeholder="검색창" />
            <button className="bg-gray-300 px-4 py-2 rounded-lg">검색</button>
          </div>
          <div className="max-h-96 overflow-y-auto">
            {rooms.map((room, index) => (
              <Room
                key={index}
                title={room.title}
                participants={`${room.participants}/2`}
                status={room.status || '참가하기'}
                onClick={() => goGame(room.roomId)}
              />
            ))}
          </div>
          <RoomButton onClick={() => setShowRoomModal(true)} />
        </div>
      </div>
      {showRoomModal && (
        <RoomModal
          onClose={() => setShowRoomModal(false)}
          onCreate={handleCreateRoom}
        />
      )}
    </div>
  );
}

주요 변경 사항:

1. useSocket 훅 대신 useSocketStore를 임포트하고 사용합니다.
2. useEffect를 사용하여 컴포넌트 마운트 시 소켓을 초기화하고, 언마운트 시 소켓을 닫습니다.
3. 소켓 관련 함수들(initSocket, closeSocket, addRoom, joinRoom)을 useSocketStore에서 직접 가져와 사용합니다.
4. rooms 상태도 useSocketStore에서 가져옵니다.

이렇게 수정하면 소켓 관련 로직이 Zustand 스토어로 중앙 집중화되어 관리됩니다. 이를 통해 다른 컴포넌트에서도 동일한 소켓 연결과 상태를 쉽게 공유할 수 있게 됩니다.

또한, 소켓 연결이 컴포넌트 생명주기와 분리되어 관리되므로, 페이지 전환 시에도 연결을 유지할 수 있습니다. 필요하다면 _app.js 또는 레이아웃 컴포넌트에서 소켓 초기화를 수행하여 앱 전체에서 하나의 소켓 연결을 사용할 수도 있습니다.