실제 구현한 인터랙티브 섹션과 프론트엔드 작업물을 확인하세요.
Fullscreen API를 감싼 커스텀 훅. ref 엘리먼트(없으면 문서 전체)를 전체화면으로 토글하고, 사용자가 ESC로 빠져나와도 상태가 어긋나지 않습니다.
값 하나가 아니라 거쳐온 값들의 배열과 현재 위치를 함께 들고 있어, 어떤 상태든 undo/redo를 자유롭게 오갈 수 있는 커스텀 훅.
setTimeout을 컴포넌트 상태에 맞춰 안전하게 쓰는 훅. "삭제 되돌리기"처럼 예약했다가 되돌리는 흐름을 몇 줄로 만듭니다.
leading+trailing 합성으로, 첫 변경은 즉시·이후엔 delay마다 한 번씩 반영하는 throttle 훅.
isRunning 동안 1초씩 줄고 0에서 자동 정지하는 재사용 타이머 훅.
resize로 viewport width·height를 추적하는 SSR 안전 커스텀 훅.
모달이 열린 동안 배경 스크롤을 막고 스크롤바 폭을 보정해 레이아웃 점프를 방지.
navigator.onLine과 online/offline 이벤트로 연결 상태를 SSR 안전하게 추적.
Pointer Events 하나로 터치·마우스 드래그의 상하좌우 스와이프를 감지하는 훅.
Pointer Events로 press-and-hold를 감지하고, 일찍 떼거나 움직이면 취소하는 재사용 훅.
window·document·엘리먼트에 이벤트를 선언적으로 붙이고, 언마운트 시 자동으로 정리하는 훅. ref 패턴으로 stale closure까지 막습니다.
boolean 상태를 반전(toggle)하거나 원하는 값으로 지정(set)하는 작은 훅. 모달·다크모드·아코디언처럼 켜고 끄는 모든 곳의 기본기.
delay만 바꾸면 주기가 즉시 갱신되고 null이면 멈추는 setInterval 훅
API 호출과 비동기 작업의 로딩·에러·데이터 상태를 자동으로 관리하는 필수 훅입니다.
IntersectionObserver를 React 훅으로 추상화. 카드가 화면에 진입할 때 페이드인되고, 누적/현재 가시 카드 수도 실시간 추적합니다.
