Screen Flash

화면 테두리에 빛 효과를 주어 사용자의 주의를 끄는 컴포넌트입니다.
토스트 알림을 놓칠 수 있는 상황에서 추가적인 시각적 피드백을 제공합니다.

설치

Terminal

npx @msub-core/ui-cli add screen-flash

사용법

TSX

// 1. layout.tsx에 Provider 추가
import { ScreenFlashProvider } from "@msub-core/ui/components/screen-flash"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ScreenFlashProvider>
          {children}
        </ScreenFlashProvider>
      </body>
    </html>
  )
}

// 2. 컴포넌트에서 useScreenFlash 훅 사용
import { useScreenFlash } from "@msub-core/ui/components/screen-flash"

function MyComponent() {
  const { flash } = useScreenFlash()

  return (
    <button onClick={() => flash("success")}>
      성공 알림
    </button>
  )
}

useScreenFlash API

Prop	Type	Default	Required	Description
flash	(variant?: FlashVariant) => void	-	No	화면 플래시 효과를 발생시키는 함수

FlashVariant

"default" | "success" | "destructive" | "warning" | "info"

데모

버튼을 클릭하면 화면 테두리에 빛 효과가 나타납니다.

Variants

default

기본 흰색 플래시. 일반적인 알림에 사용

success

녹색 플래시. 성공 알림에 사용

destructive

빨간색 플래시. 에러나 경고에 사용

warning

주황색 플래시. 주의가 필요한 알림에 사용

info

파란색 플래시. 정보 알림에 사용

Toast와 함께 사용

토스트와 플래시를 동시에 발생시켜 사용자에게 더 강한 피드백을 제공합니다.

TSX

import { useToast } from "@msub-core/ui/components/toast"
import { useScreenFlash } from "@msub-core/ui/components/screen-flash"

function MyComponent() {
  const { toast } = useToast()
  const { flash } = useScreenFlash()

  const notify = () => {
    // 토스트와 플래시를 동시에 발생
    toast({
      variant: "success",
      title: "저장 완료",
      description: "변경사항이 저장되었습니다."
    })
    flash("success")
  }

  return <button onClick={notify}>저장</button>
}