jihoon87.lee
2d34d70948
app/auth/callback/route.ts - 이메일 인증 완료 판별을 세션 생성 시간 기준에서 쿼리 파라미터(auth_type=signup) 기반으로 변경 - 회원가입 인증인 경우 자동 로그인 세션 종료 후 로그인 페이지로 리다이렉트 처리 features/auth/actions.ts - 회원가입 시 이메일 리다이렉트 URL에 auth_type=signup 쿼리 파라미터 추가 app/forgot-password/page.tsx - 배경 및 카드 아이콘의 Tailwind 클래스명 일부 수정(bg-gradient-to→bg-linear-to, radial-gradient var() 구문 정리) app/login/page.tsx - 배경 및 카드 아이콘의 Tailwind 클래스명 일부 정리 및 일관화 app/reset-password/page.tsx - 배경 및 카드 아이콘의 Tailwind 클래스명 일부 정리 및 일관화 app/signup/page.tsx - 배경 및 카드 아이콘의 Tailwind 클래스명 일부 정리 및 일관화 features/auth/components/reset-password-form.tsx - 버튼 그라디언트 클래스명(bg-gradient-to-r→bg-linear-to-r) 수정
95 lines
4.1 KiB
TypeScript
95 lines
4.1 KiB
TypeScript
import FormMessage from "@/components/form-message";
|
|
import { requestPasswordReset } from "@/features/auth/actions";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import Link from "next/link";
|
|
|
|
/**
|
|
* [비밀번호 찾기 페이지]
|
|
*
|
|
* 사용자가 비밀번호를 잊어버렸을 때 재설정 링크를 요청하는 페이지입니다.
|
|
* - 이메일 입력 폼 제공
|
|
* - 서버 액션(requestPasswordReset)과 연동
|
|
*/
|
|
export default async function ForgotPasswordPage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: Promise<{ message?: string }>;
|
|
}) {
|
|
const { message } = await searchParams;
|
|
|
|
return (
|
|
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-linear-to-br from-gray-50 via-white to-gray-100 px-4 py-12 dark:from-black dark:via-gray-950 dark:to-gray-900">
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,var(--tw-gradient-stops))] from-gray-200/30 via-gray-100/15 to-transparent dark:from-gray-800/30 dark:via-gray-900/20" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,var(--tw-gradient-stops))] from-gray-300/30 via-gray-200/15 to-transparent dark:from-gray-700/30 dark:via-gray-800/20" />
|
|
|
|
<div className="absolute left-1/4 top-1/4 h-64 w-64 animate-pulse rounded-full bg-gray-300/20 blur-3xl dark:bg-gray-700/20" />
|
|
<div className="absolute bottom-1/4 right-1/4 h-64 w-64 animate-pulse rounded-full bg-gray-400/20 blur-3xl delay-700 dark:bg-gray-600/20" />
|
|
|
|
<div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
{message && <FormMessage message={message} />}
|
|
|
|
<Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
|
|
<CardHeader className="space-y-3 text-center">
|
|
<div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-linear-to-br from-gray-800 to-black shadow-lg dark:from-white dark:to-gray-200">
|
|
<span className="text-sm font-semibold">MAIL</span>
|
|
</div>
|
|
<CardTitle className="text-3xl font-bold tracking-tight">
|
|
비밀번호 재설정
|
|
</CardTitle>
|
|
<CardDescription className="text-base">
|
|
가입한 이메일 주소를 입력하시면 비밀번호 재설정 링크를
|
|
보내드립니다.
|
|
<br />
|
|
메일을 받지 못하셨다면 스팸함을 확인해 주세요.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-6">
|
|
<form className="space-y-5">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email" className="text-sm font-medium">
|
|
이메일
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
placeholder="name@example.com"
|
|
autoComplete="email"
|
|
required
|
|
className="h-11 transition-all duration-200"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
formAction={requestPasswordReset}
|
|
className="h-11 w-full bg-linear-to-r from-gray-900 to-black font-semibold text-white shadow-lg transition-all hover:from-black hover:to-gray-800 hover:shadow-xl dark:from-white dark:to-gray-100 dark:text-black dark:hover:from-gray-100 dark:hover:to-white"
|
|
>
|
|
재설정 링크 보내기
|
|
</Button>
|
|
</form>
|
|
|
|
<div className="text-center">
|
|
<Link
|
|
href="/login"
|
|
className="text-sm font-medium text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white"
|
|
>
|
|
로그인 페이지로 돌아가기
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|