입력 즉시 5개 조건을 채점해 강도 막대와 체크리스트로 보여주는 폼 패턴.
길이소문자대문자숫자특수문자 5개 조건을 통과 개수로 0~5점 채점하고, 점수를 4단계 색 막대와 체크리스트로 동기화합니다.
회원가입비밀번호 변경 폼에서 사용자가 왜 약한지를 즉시 알게 해 안전한 비밀번호로 유도할 때.
입력값을 useMemo로 5개 정규식에 통과시켜 결과 배열점수를 계산.
점수 레벨(약함/보통/좋음/강함) 매핑으로 막대 채움 수색라벨을 결정.
표시/숨김 토글로 type을 passwordtext 전환, aria-live로 강도 변화를 읽어줍니다.
통과 개수만으로 채점하면 길이 가중치를 못 살림 필요 시 길이 보너스 추가.
눈 아이콘만 두지 말고 aria-pressedaria-label로 토글 상태를 안내.
강도는 색뿐 아니라 라벨로도 구분(색맹 대응).
회원가입/비밀번호 변경 폼
관리자 계정 생성 화면
import type { Metadata } from "next";
import { PasswordStrengthDemo } from "./-components/PasswordStrengthDemo";
export const metadata: Metadata = {
title: "비밀번호 강도 미터 (데모)",
description:
"입력하는 즉시 길이·대소문자·숫자·특수문자 조건을 채점해 강도 막대와 체크리스트로 보여주는 비밀번호 강도 미터. 표시/숨김 토글 + 접근성(aria-live) 안내.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-emerald-50/40">
<PasswordStrengthDemo />
</main>
);
}