diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx new file mode 100644 index 0000000000000000000000000000000000000000..999fca0afca01b8a07a0978212b0aef481f9c98b --- /dev/null +++ b/src/components/login-form.tsx @@ -0,0 +1,41 @@ +import { cn } from '@/lib/utils'; +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; + +export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) { + return ( + <div className={cn('flex flex-col gap-6', className)} {...props}> + <Card> + <CardHeader> + <CardTitle className="text-2xl">로그인</CardTitle> + <CardDescription>아올다 통합 계정을 사용하여 로그인합니다</CardDescription> + </CardHeader> + <CardContent> + <form> + <div className="flex flex-col gap-6"> + <div className="grid gap-2"> + <Label htmlFor="username">사용자 이름</Label> + <Input id="username" type="text" placeholder="사용자 이름" required /> + </div> + <div className="grid gap-2"> + <Label htmlFor="password">비밀번호</Label> + <Input id="password" type="password" placeholder="비밀번호" required /> + </div> + <Button type="submit" className="w-full"> + 로그인 + </Button> + </div> + <div className="mt-4 text-center text-sm"> + 계정이 없으신가요? + <a href="#" className="ml-2 underline underline-offset-4"> + 아올다 프로젝트 신청하기 + </a> + </div> + </form> + </CardContent> + </Card> + </div> + ); +} diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx new file mode 100644 index 0000000000000000000000000000000000000000..cddce64281e586a7facc54f37bb732f1a547fd20 --- /dev/null +++ b/src/pages/Login.tsx @@ -0,0 +1,11 @@ +import { LoginForm } from '@/components/login-form'; + +export default function Page() { + return ( + <div className="flex min-h-svh w-full justify-center p-6 md:p-10"> + <div className="w-full max-w-sm"> + <LoginForm /> + </div> + </div> + ); +} diff --git a/src/routes.tsx b/src/routes.tsx index 0d9719dba1c6a69adf89094e42a2a4a7a708585c..91344997ec71ec9db0c8d244d11f7335d3af5c97 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,12 +1,14 @@ import { Routes, Route } from 'react-router'; import Root from '@/pages/Root'; import Home from '@/pages/Home'; +import Login from '@/pages/Login'; export default function AppRoutes() { return ( <Routes> <Route path="/" element={<Root />}> <Route index element={<Home />} /> + <Route path="login" element={<Login />} /> </Route> </Routes> );