Rails 8 + Tailwind CSS v4 + Hotwire

스마트 플래시(Toast) 알림 시스템

기존의 투박한 레일즈 플래시 박스를 탈피하여, 화면 우측 상단에 플로팅되는 반응형 토스트 알림을 구축했습니다. 부드러운 Tailwind 슬라이드 트랜지션, 남은 시간 게이지 바, 마우스 호버 시 일시 정지 기능을 직접 체험해 보세요.

✨ 슬라이드 인/아웃 트랜지션 ⏱️ 실시간 카운트다운 프로그레스 ⏸️ Hover-to-Pause (마우스 호버 정지) ⚡ Turbo Stream 실시간 스택 🌓 다크 모드 완벽 지원

1. CRUD 액션 시뮬레이션 (HTTP Redirect)

레일즈 표준 `redirect_to path, notice: ...` 동작 검증

버튼 클릭 시 백엔드 컨트롤러로 POST 요청이 전달되고, `flash`를 탑재한 후 302 리다이렉트되어 새 페이지 로드와 함께 토스트가 우아하게 나타납니다.

페이지 이동 없이 스택에 실시간 알림 추가 및 다중 누적 테스트

Turbo Stream을 통해 서버에서 응답된 토스트 카드가 화면 리로드 없이 즉시 우측 상단 알림창에 prepend 됩니다. 연속 클릭 시 자연스럽게 스택이 쌓입니다.

원하는 알림 종류와 텍스트를 입력하여 즉각 테스트할 수 있습니다.

1. Hover-to-Pause (마우스 정지) 토스트 알림에 마우스를 올리면 하단 프로그레스 바와 타이머가 일시 정지되어 긴 공지나 에러 메시지를 여유 있게 읽을 수 있습니다. 마우스가 나가면 남은 시간부터 재개됩니다.

2. 슬라이드 & 공간 축소 퇴장 닫기(×)를 누르거나 4.5초 만료 시, 우측으로 슬라이드 아웃된 후 높이가 0으로 접히며(Collapse), 아래에 대기 중이던 다음 토스트들이 부드럽게 위로 올라옵니다.

3. 다크모드 및 접근성(A11y) 시스템 및 사용자 테마 전환에 즉시 대응하며, `role="alert"`와 `aria-live="polite"`를 통해 스크린 리더 환경에서도 표준화된 알림으로 안내됩니다.