xrlms/src/app/login/loginoption.tsx

"use client";
import React from "react";
import { useState } from "react";

type LoginOptionProps = {
  onClick?: () => void;
  className?: string;
  loginErrorModalEnabled?: boolean;
  setLoginErrorModalEnabled?: (enabled: boolean) => void;
};

export default function LoginOption({
  className,
  loginErrorModalEnabled,
  setLoginErrorModalEnabled,
}: LoginOptionProps) {

  const [isOpen, setIsOpen] = useState(false);


  return (
    <div>
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className={`fixed bottom-2 right-2 bg-red-400 cursor-pointer rounded-full w-[40px] h-[40px] shadow-xl z-100`}
      >
      </button>
      {isOpen && (
        <div className="fixed inset-0 flex items-center justify-center z-50">
          <div className="w-[500px] h-[600px] flex  bg-white/80 p-10 border rounded-lg relative">
            <button
              type="button"
              aria-label="닫기"
              onClick={() => setIsOpen(false)}
              className="absolute top-3 right-3 inline-flex items-center justify-center rounded-full w-8 h-8 bg-gray-200 hover:bg-gray-300 text-gray-700"
            >
              ×
            </button>
            <ul className="flex flex-col gap-4">
              <li className="flex items-center justify-between">
                <p className="mr-4">login error modal</p>
                <button
                  type="button"
                  aria-label="login error modal 토글"
                  aria-pressed={!!loginErrorModalEnabled}
                  onClick={() => setLoginErrorModalEnabled?.(!loginErrorModalEnabled)}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${loginErrorModalEnabled ? 'bg-blue-600' : 'bg-gray-300'}`}
                >
                  <span
                    className={`inline-block h-5 w-5 transform rounded-full bg-white transition ${loginErrorModalEnabled ? 'translate-x-5' : 'translate-x-1'}`}
                  />
                </button>
              </li>
            </ul>
          </div>
        </div>
      )}
    </div>
  );
}