선택을 기억하는 쿠키 동의 배너

제작 과정

한 줄 요약

전체 수락거부세부 설정을 제공하고, 사용자의 선택을 localStorage에 기억해 다시 묻지 않는 쿠키 동의 배너입니다.

이럴 때 필요해요

개인정보추적 규제 때문에 분석마케팅 쿠키는 사용자 동의가 필요합니다. 그런데 매 방문마다 배너가 다시 뜨면 거슬리죠. 한 번 결정한 선택을 저장해두고, 카테고리별로 켜고 끌 수 있게 하면 규정도 지키고 경험도 해치지 않습니다.

어떻게 동작하나

저장된 동의 상태가 없으면 배너를 띄웁니다.
전체 수락/거부는 모든 카테고리를 한 번에 정하고, 설정은 분석마케팅을 개별 토글합니다(필수는 잠금).
선택을 localStorage에 저장해, 새로고침재방문 시 배너를 다시 띄우지 않습니다.

놓치기 쉬운 것

필수 쿠키는 끌 수 없게 잠가야 서비스가 정상 동작합니다.
배너는 role=dialog로 알리고, ESC 같은 키보드 탈출 경로를 제공합니다.
저장 키 구조를 버전 관리해 두면 나중에 항목이 늘어도 안전하게 마이그레이션할 수 있습니다.

이런 곳에 써요

GDPR개인정보 동의가 필요한 웹사이트
분석광고 스크립트 로드 전 동의 게이트

import type { Metadata } from "next"; import { CookieConsentDemo } from "./-components/CookieConsentDemo"; export const metadata: Metadata = { title: "쿠키 동의 배너 (데모)", description: "하단 고정 쿠키 동의 배너 — 전체 수락/거부/설정, 카테고리별 토글, localStorage 기억(useLocalStorage). role=dialog · ESC 거부 · 초기화 제공.", 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-violet-50/40"> <CookieConsentDemo /> </main> ); }