535281f0fb
주요 변경사항: - 🎨 가격 섹션을 CTA 섹션과 동일한 그라디언트 스타일로 변경 - 🗑️ 중복된 CTA 섹션 제거 및 페이지 구성 최적화 - 🏠 에디터 상단 로고 클릭 시 홈 이동 기능 추가 (저장 경고 포함) - 📱 인증 페이지 컴포넌트 추가 (SignIn/SignUp) - 💰 가격 정보 섹션 및 FAQ 섹션 추가 - 🔧 TopBar 컴포넌트에 로고 클릭 핸들러 추가 UI/UX 개선: - 가격 섹션: 파란색-보라색 그라디언트 배경 적용 - 카드 스타일: 반투명 배경 및 backdrop-blur 효과 - 텍스트 색상: 그라디언트 배경에 맞는 흰색/파란색 톤 적용 - 버튼 스타일: 인기 플랜 노란색 강조, 일반 플랜 반투명 스타일 기능 추가: - 에디터에서 로고 클릭 시 작업 손실 경고 및 홈 이동 - 완전한 인증 플로우 UI 구성 - 반응형 가격 정보 표시
270 lines
9.9 KiB
TypeScript
270 lines
9.9 KiB
TypeScript
import * as React from "react";
|
|
import { useState } from "react";
|
|
import { Button } from "../ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
|
|
import { cn } from "../../lib/utils";
|
|
|
|
interface SignInPageProps {
|
|
className?: string;
|
|
onSignIn?: (email: string, password: string) => void;
|
|
onSignUpClick?: () => void;
|
|
onBack?: () => void;
|
|
}
|
|
|
|
/**
|
|
* 로그인 화면 컴포넌트
|
|
* Vooster.ai 스타일의 세련된 디자인
|
|
* 실제 API 연동은 나중에 구현
|
|
*/
|
|
const SignInPage = React.forwardRef<HTMLDivElement, SignInPageProps>(
|
|
({ className, onSignIn, onSignUpClick, onBack, ...props }, ref) => {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [errors, setErrors] = useState<{
|
|
email?: string;
|
|
password?: string;
|
|
general?: string;
|
|
}>({});
|
|
|
|
// 이메일 유효성 검사
|
|
const validateEmail = (email: string) => {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
return emailRegex.test(email);
|
|
};
|
|
|
|
// 폼 제출 핸들러
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
// 유효성 검사
|
|
const newErrors: typeof errors = {};
|
|
|
|
if (!email) {
|
|
newErrors.email = "이메일을 입력해주세요.";
|
|
} else if (!validateEmail(email)) {
|
|
newErrors.email = "올바른 이메일 형식을 입력해주세요.";
|
|
}
|
|
|
|
if (!password) {
|
|
newErrors.password = "비밀번호를 입력해주세요.";
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
|
|
if (Object.keys(newErrors).length > 0) {
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
// 로그인 처리 (실제 API 호출은 나중에)
|
|
await new Promise((resolve) => setTimeout(resolve, 1500)); // 시뮬레이션
|
|
onSignIn?.(email, password);
|
|
} catch (error) {
|
|
console.error("로그인 실패:", error);
|
|
setErrors({
|
|
general: "로그인에 실패했습니다. 이메일과 비밀번호를 확인해주세요.",
|
|
});
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex items-center justify-center p-4",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{/* Background decoration */}
|
|
<div className="absolute inset-0 bg-grid-slate-100 [mask-image:linear-gradient(0deg,transparent,black)]" />
|
|
|
|
<div className="relative w-full max-w-md">
|
|
{/* 로고 및 헤더 */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
|
sheetEasy AI
|
|
</h1>
|
|
<p className="text-gray-600">
|
|
계정에 로그인하여 AI 편집을 계속하세요
|
|
</p>
|
|
</div>
|
|
|
|
{/* 로그인 폼 */}
|
|
<Card className="shadow-xl border-0 bg-white/95 backdrop-blur-sm">
|
|
<CardHeader className="text-center pb-6">
|
|
<CardTitle className="text-2xl font-semibold text-gray-900">
|
|
로그인
|
|
</CardTitle>
|
|
<p className="text-sm text-gray-600 mt-2">
|
|
계정에 다시 오신 것을 환영합니다
|
|
</p>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-6">
|
|
{/* 일반 오류 메시지 */}
|
|
{errors.general && (
|
|
<div className="p-3 bg-red-50 border border-red-200 rounded-lg">
|
|
<p className="text-sm text-red-600">{errors.general}</p>
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
{/* 이메일 입력 */}
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="email"
|
|
className="text-sm font-medium text-gray-700"
|
|
>
|
|
이메일 주소
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className={cn(
|
|
"w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors",
|
|
errors.email ? "border-red-500" : "border-gray-300",
|
|
)}
|
|
placeholder="your@email.com"
|
|
disabled={isLoading}
|
|
/>
|
|
{errors.email && (
|
|
<p className="text-sm text-red-600">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 비밀번호 입력 */}
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="password"
|
|
className="text-sm font-medium text-gray-700"
|
|
>
|
|
비밀번호
|
|
</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className={cn(
|
|
"w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors",
|
|
errors.password ? "border-red-500" : "border-gray-300",
|
|
)}
|
|
placeholder="비밀번호를 입력해주세요"
|
|
disabled={isLoading}
|
|
/>
|
|
{errors.password && (
|
|
<p className="text-sm text-red-600">{errors.password}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 비밀번호 찾기 링크 */}
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="button"
|
|
className="text-sm text-blue-600 hover:text-blue-700 hover:underline"
|
|
disabled={true} // 나중에 구현
|
|
>
|
|
비밀번호를 잊으셨나요? (준비중)
|
|
</button>
|
|
</div>
|
|
|
|
{/* 로그인 버튼 */}
|
|
<Button
|
|
type="submit"
|
|
className="w-full bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center">
|
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
|
|
로그인 중...
|
|
</div>
|
|
) : (
|
|
"로그인"
|
|
)}
|
|
</Button>
|
|
</form>
|
|
|
|
{/* 소셜 로그인 (나중에 구현) */}
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<div className="w-full border-t border-gray-300" />
|
|
</div>
|
|
<div className="relative flex justify-center text-sm">
|
|
<span className="px-2 bg-white text-gray-500">또는</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className="w-full py-3 text-gray-700 border-gray-300 hover:bg-gray-50"
|
|
disabled={true} // 나중에 구현
|
|
>
|
|
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
|
|
<path
|
|
fill="currentColor"
|
|
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
|
/>
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
|
/>
|
|
<path
|
|
fill="currentColor"
|
|
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
|
/>
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
|
/>
|
|
</svg>
|
|
Google로 로그인 (준비중)
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 가입 링크 */}
|
|
<div className="text-center">
|
|
<p className="text-sm text-gray-600">
|
|
아직 계정이 없으신가요?{" "}
|
|
<button
|
|
type="button"
|
|
onClick={onSignUpClick}
|
|
className="text-blue-600 hover:text-blue-700 font-medium hover:underline"
|
|
>
|
|
무료로 가입하기
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 뒤로가기 버튼 */}
|
|
<div className="text-center mt-6">
|
|
<button
|
|
type="button"
|
|
onClick={onBack}
|
|
className="text-gray-600 hover:text-gray-700 text-sm hover:underline"
|
|
>
|
|
← 메인화면으로 돌아가기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
SignInPage.displayName = "SignInPage";
|
|
|
|
export { SignInPage };
|