로그인 페이지 완성

2025-11-18 01:37:56 +09:00
parent 78b7cc2d3c
commit 851fec4096
5 changed files with 188 additions and 628 deletions
--- a/src/app/login/loginoption.tsx
+++ b/src/app/login/loginoption.tsx
@@ -0,0 +1,53 @@
+"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">
+          <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>
+	);
+}