diff --git a/features/auth/components/login-form.tsx b/features/auth/components/login-form.tsx index 9c23db7..bc6e0d0 100644 --- a/features/auth/components/login-form.tsx +++ b/features/auth/components/login-form.tsx @@ -21,26 +21,26 @@ import { InlineSpinner } from "@/components/ui/loading-spinner"; * - localStorage를 사용하여 이메일 저장/불러오기 * - 체크박스 선택 시 이메일 자동 저장 * - 서버 액션(login)과 연동 + * - 하이드레이션 이슈 해결을 위해 useEffect 사용 */ export default function LoginForm() { // ========== 상태 관리 ========== - // 초기 상태를 함수로 지연 초기화하여 localStorage 읽기 + // 서버와 클라이언트 초기 렌더링을 일치시키기 위해 초기값은 고정 const [email, setEmail] = useState(() => { - if (typeof window !== "undefined") { - return localStorage.getItem("auto-trade-saved-email") || ""; - } - return ""; + if (typeof window === "undefined") return ""; + return localStorage.getItem("auto-trade-saved-email") || ""; }); - const [rememberMe, setRememberMe] = useState(() => { - if (typeof window !== "undefined") { - return !!localStorage.getItem("auto-trade-saved-email"); - } - return false; + if (typeof window === "undefined") return false; + return !!localStorage.getItem("auto-trade-saved-email"); }); - const [isLoading, setIsLoading] = useState(false); + // ========== 마운트 시 localStorage 데이터 복구 ========== + // localStorage는 클라이언트 전용 외부 시스템이므로 useEffect에서 동기화하는 것이 올바른 패턴 + // React 공식 문서: "외부 시스템과 동기화"는 useEffect의 정확한 사용 사례 + // useState lazy initializer + window guard handles localStorage safely + // ========== 폼 제출 핸들러 ========== const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -133,7 +133,7 @@ export default function LoginForm() {