알림 대화상자

알림 대화상자는 사용자에게 정보를 전달하는 가장 간단한 형태의 대화상자입니다. 확인 버튼만 제공하며, 반환값이 없습니다.

기본 알림#

가장 간단한 형태의 알림:

grunfeld.add(() => (
  <div style={{ padding: "20px", background: "white", borderRadius: "8px" }}>
    <p>This is an alert message</p>
    <button onClick={() => grunfeld.remove()}>OK</button>
  </div>
));

성공 알림#

작업 완료를 알리는 알림:

grunfeld.add(() => ({
  element: (
    <div style={{ padding: "20px", background: "white", borderRadius: "8px" }}>
      <h3>✅ Success</h3>
      <p>Save completed!</p>
      <button onClick={() => grunfeld.remove()}>OK</button>
    </div>
  ),
  position: "top-right",
}));

오류 알림#

오류 메시지를 표시하는 알림:

grunfeld.add(() => ({
  element: (
    <div style={{
      padding: "20px",
      background: "#fee",
      borderRadius: "8px",
      border: "2px solid #c00"
    }}>
      <h3>❌ Error</h3>
      <p>Unable to perform operation</p>
      <button onClick={() => grunfeld.remove()}>OK</button>
    </div>
  ),
  backdropStyle: {
    backgroundColor: "rgba(255, 0, 0, 0.1)",
  },
}));

자동으로 닫히는 알림#

일정 시간 후 자동으로 닫히는 알림:

const showToast = (message: string) => {
  grunfeld.add(() => ({
    element: (
      <div style={{
        padding: "16px 24px",
        background: "#333",
        color: "white",
        borderRadius: "8px",
      }}>
        {message}
      </div>
    ),
    position: "bottom-center",
    lightDismiss: false,
  }));

  // Auto-remove after 3 seconds
  setTimeout(() => {
    grunfeld.remove();
  }, 3000);
};

// Usage
showToast("Copied!");

이 패턴은 토스트 알림이나 일시적인 메시지에 유용합니다.