git init

2025-01-22 17:58:47 +09:00
parent ef90ee4042
commit 19a7d45b7b
63 changed files with 7108 additions and 0 deletions
--- a/app/ui/login-form.tsx
+++ b/app/ui/login-form.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import { lusitana } from '@/app/ui/fonts';
+import {
+  AtSymbolIcon,
+  KeyIcon,
+} from '@heroicons/react/24/outline';
+import {ArrowRightIcon, ExclamationCircleIcon} from '@heroicons/react/20/solid';
+import { Button } from './button';
+import {useActionState} from "react";
+import {authenticate} from "@/app/lib/actions";
+
+export default function LoginForm() {
+  const [errorMessage, formAction, isPending] = useActionState(
+      authenticate,
+      undefined,
+  );
+
+  return (
+      <form action={formAction} className="space-y-3">
+        <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
+          <h1 className={`${lusitana.className} mb-3 text-2xl`}>계속하려면 로그인하세요.</h1>
+          <div className="w-full">
+            <div>
+              <label
+                  className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+                  htmlFor="email"
+              >
+                Email
+              </label>
+              <div className="relative">
+                <input
+                    className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                    id="email"
+                    type="email"
+                    name="email"
+                    placeholder="Enter your email address"
+                    defaultValue="user@nextmail.com"
+                    required
+                />
+                <AtSymbolIcon
+                    className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900"/>
+              </div>
+            </div>
+            <div className="mt-4">
+              <label
+                  className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+                  htmlFor="password"
+              >
+                Password
+              </label>
+              <div className="relative">
+                <input
+                    className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                    id="password"
+                    type="password"
+                    name="password"
+                    placeholder="Enter password"
+                    required
+                    minLength={6}
+                    defaultValue="123456"
+                />
+                <KeyIcon
+                    className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900"/>
+              </div>
+            </div>
+          </div>
+          <Button className="mt-4 w-full" aria-disabled={isPending}>
+            로그인 <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50"/>
+          </Button>
+          <div
+              className="flex h-8 items-end space-x-1"
+              aria-live="polite"
+              aria-atomic="true"
+          >
+            {errorMessage && (
+                <>
+
+                  <ExclamationCircleIcon className="h-5 w-5 text-red-500"/>
+                  <p className="test-sm test-red-500">{errorMessage}</p>
+                </>
+            )}
+          </div>
+        </div>
+      </form>
+  );
+}