호버 미리보기 + 0.5점 정밀도 + 키보드 + role=slider까지 갖춘 별점 입력.
한 줄 요약
별 위를 지나면 좌/우 절반으로 0.5점이 미리 채워지고, 클릭으로 확정하며 같은 값을 다시 누르면 해제되는 접근성 별점 입력입니다.
마우스와 키보드 양쪽에서 정확한 점수를 받아야 할 때 리뷰 작성, 평점 입력, 설문 만족도 등.
빈 별 위에 너비를 자른 채움 별을 겹쳐 0/0.5/1 채움을 표현한다.
별 안에서의 포인터 x로 좌(0.5)/우(1.0)를 판정한다.
hover 상태로 미리보기, 클릭으로 commit한다.
컨테이너 하나에 role=slider + aria-valuetext, 키보드 /Home/End.
별마다 버튼을 두면 SR이 5개 슬라이더로 읽는다 컨테이너 하나만 slider로.
반 칸은 포인터 좌표 기반이라 터치 정확도를 고려한다.
확정 전후를 시각적으로 구분(미리보기 vs 확정).
상품콘텐츠 리뷰 폼
만족도 설문
import type { Metadata } from "next";
import { StarRatingDemo } from "./-components/StarRatingDemo";
export const metadata: Metadata = {
title: "별점 입력 (데모)",
description:
"호버 미리보기 · 반 칸(0.5) 정밀도 · 키보드 조작 · role=slider까지 갖춘 접근성 별점 입력 컴포넌트.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-white">
<StarRatingDemo />
</main>
);
}