vexplor_dev/frontend/components/messenger/MessengerModal.tsx

"use client";

import { useState } from "react";
import { X, Settings } from "lucide-react";
import { useMessengerContext } from "@/contexts/MessengerContext";
import { useRooms } from "@/hooks/useMessenger";
import { RoomList } from "./RoomList";
import { ChatPanel } from "./ChatPanel";
import { MessengerSettings } from "./MessengerSettings";

export function MessengerModal() {
  const { isOpen, closeMessenger, selectedRoomId } = useMessengerContext();
  const { data: rooms = [] } = useRooms();
  const [showSettings, setShowSettings] = useState(false);

  if (!isOpen) return null;

  const selectedRoom = rooms.find((r) => r.id === selectedRoomId) || null;

  return (
    <div
      className="fixed bottom-6 right-6 z-[9999] flex flex-col bg-background border rounded-lg shadow-2xl overflow-hidden"
      style={{ width: 720, height: 500 }}
    >
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30">
        <h2 className="text-sm font-semibold">메신저</h2>
        <div className="flex items-center gap-1">
          <button
            onClick={() => setShowSettings((p) => !p)}
            className="p-1 hover:bg-muted rounded"
            aria-label="설정"
          >
            <Settings className="h-4 w-4 text-muted-foreground" />
          </button>
          <button
            onClick={closeMessenger}
            className="p-1 hover:bg-muted rounded"
            aria-label="닫기"
          >
            <X className="h-4 w-4 text-muted-foreground" />
          </button>
        </div>
      </div>

      {/* Body */}
      <div className="flex flex-1 min-h-0 relative">
        <RoomList />
        <ChatPanel room={selectedRoom} />

        {/* Settings slide panel */}
        {showSettings && (
          <div className="absolute inset-0 bg-background z-10 flex flex-col">
            <div className="flex items-center justify-between px-4 py-2 border-b">
              <span className="text-sm font-semibold">설정</span>
              <button onClick={() => setShowSettings(false)} className="p-1 hover:bg-muted rounded">
                <X className="h-4 w-4" />
              </button>
            </div>
            <MessengerSettings />
          </div>
        )}
      </div>
    </div>
  );
}