find-id 디자인 수정중1

src/app/login/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import MainLogo from "@/app/svgs/mainlogosvg"
@@ -22,9 +22,43 @@ export default function LoginPage() {
 	const [idError, setIdError] = useState("");
 	const [passwordError, setPasswordError] = useState("");
 
+	// 컴포넌트 마운트 시 저장된 아이디 불러오기
+	useEffect(() => {
+		const savedId = localStorage.getItem('savedUserId');
+		if (savedId) {
+			setUserId(savedId);
+			setRememberId(true);
+		}
+	}, []);
+
+	// 아이디 기억하기 상태나 아이디가 변경될 때마다 저장 처리
+	useEffect(() => {
+		if (rememberId && userId.trim()) {
+			localStorage.setItem('savedUserId', userId);
+		} else if (!rememberId) {
+			localStorage.removeItem('savedUserId');
+		}
+	}, [rememberId, userId]);
+
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		e.preventDefault();
-		if (userId.trim().length === 0 || password.trim().length === 0) {
+
+		// 에러 초기화
+		setIdError("");
+		setPasswordError("");
+
+		// 입력 검증
+		let hasError = false;
+		if (userId.trim().length === 0) {
+			setIdError("아이디를 입력해 주세요.");
+			hasError = true;
+		}
+		if (password.trim().length === 0) {
+			setPasswordError("비밀번호를 입력해 주세요.");
+			hasError = true;
+		}
+
+		if (hasError) {
 			return;
 		}
 
@@ -74,6 +108,7 @@ export default function LoginPage() {
 				// 토큰이 없어도 로그인은 성공했으므로 진행
 			}
 
+
 			// 리다이렉트 경로 확인
 			const searchParams = new URLSearchParams(window.location.search);
 			const redirectPath = searchParams.get('redirect') || '/';
@@ -112,7 +147,7 @@ export default function LoginPage() {
 				</div>
 
 				{/* 폼 */}
-				<form onSubmit={handleSubmit} className="space-y-5">
+				<form onSubmit={handleSubmit} className="space-y-4">
 					<div className="space-y-4">
 						{/* 아이디 */}
 						<div className="relative">
@@ -123,17 +158,14 @@ export default function LoginPage() {
 								id="userId"
 								name="userId"
 								value={userId}
-								onChange={(e) => setUserId(e.target.value)}
+								onChange={(e) => {
+									setUserId(e.target.value);
+									if (idError) setIdError("");
+								}}
 								onFocus={() => setIsUserIdFocused(true)}
 								onBlur={() => setIsUserIdFocused(false)}
-								placeholder="아이디 (이메일)"
-								className="
-                h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40
-                focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
-                focus:appearance-none focus:border-neutral-700
-                text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text
-                pr-[40px]
-                "
+								placeholder="아이디(이메일)"
+								className={`h-[56px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${idError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
 							/>
 							{userId.trim().length > 0 && isUserIdFocused && (
 								<button
@@ -149,6 +181,7 @@ export default function LoginPage() {
 								</button>
 							)}
 						</div>
+						{idError && <p className="text-error text-[13px] leading-tight mt-[10px]">{idError}</p>}
 						{/* 비밀번호 */}
 						<div className="relative">
 							<label htmlFor="password" className="sr-only">
@@ -159,17 +192,14 @@ export default function LoginPage() {
 								name="password"
 								type="password"
 								value={password}
-								onChange={(e) => setPassword(e.target.value)}
+								onChange={(e) => {
+									setPassword(e.target.value);
+									if (passwordError) setPasswordError("");
+								}}
 								onFocus={() => setIsPasswordFocused(true)}
 								onBlur={() => setIsPasswordFocused(false)}
-								placeholder="비밀번호"
-								className="
-								h-[40px] px-[12px] py-[7px] rounded-[8px] w-full border border-neutral-40
-								focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
-								focus:appearance-none focus:border-neutral-700
-								text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text
-								pr-[40px]
-								"
+								placeholder="비밀번호 입력"
+								className={`h-[56px] px-[12px] py-[7px] rounded-[8px] w-full border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${passwordError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
 							/>
 							{password.trim().length > 0 && isPasswordFocused && (
 								<button
@@ -185,6 +215,7 @@ export default function LoginPage() {
 								</button>
 							)}
 						</div>
+						{passwordError && <p className="text-error text-[13px] leading-tight mt-[4px]">{passwordError}</p>}
 					</div>
 
 					{/* 체크박스들 */}
@@ -222,7 +253,7 @@ export default function LoginPage() {
 					{/* 로그인 버튼 */}
 					<button
 						type="submit"
-						className={`h-[40px] w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 ${userId.trim().length > 0 && password.trim().length > 0 ? "bg-active-button" : "bg-inactive-button"}`}
+						className={`h-[56px] w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 hover:bg-[#1F2B91] ${userId.trim().length > 0 && password.trim().length > 0 ? "bg-active-button" : "bg-inactive-button"}`}
 					>
 						로그인
 					</button>