66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
/**
|
|
* 📄 Toast Component
|
|
* 토스트 알림 컴포넌트
|
|
*
|
|
* - 확인/취소 버튼이 있는 토스트 표시 기능
|
|
* - 메시지 표시 토스트 기능
|
|
* - react-hot-toast 라이브러리 기반 구현
|
|
* - 중복 토스트 방지 및 수동 닫기 지원
|
|
* - 커스텀 스타일링 및 애니메이션 적용
|
|
* - 사용자 상호작용을 위한 버튼 이벤트 핸들링
|
|
*/
|
|
import { Button } from "@common/components/ui";
|
|
import toast from "react-hot-toast";
|
|
|
|
export const confirmToast = (content: string, saveFunc: () => void, contentClass?:string) => {
|
|
toast(
|
|
(t) => (
|
|
<span className="flex flex-col items-center">
|
|
<div className={`mb-6 ${contentClass}`} >{content}</div>
|
|
<div className="flex flex-row space-x-2">
|
|
<Button
|
|
size={"sm"}
|
|
onClick={() => {
|
|
saveFunc();
|
|
toast.dismiss(t.id);
|
|
}}
|
|
>
|
|
확인
|
|
</Button>
|
|
<Button size={"sm"} onClick={() => toast.dismiss(t.id)}>
|
|
취소
|
|
</Button>
|
|
</div>
|
|
</span>
|
|
),
|
|
{
|
|
id: "global-confirm-toast", // 중복 토스트 방지
|
|
duration: Infinity, // 자동 사라짐 방지
|
|
}
|
|
);
|
|
};
|
|
|
|
export const showConfirmToast = (message: string) => {
|
|
toast.custom(
|
|
(t) => (
|
|
<div
|
|
className={`w-[500px] min-h-[140px] bg-white shadow-lg rounded-xl p-6 border border-gray-200
|
|
${t.visible ? "animate-enter" : "animate-leave"}`}
|
|
>
|
|
<div className="text-3xl font-extrabold text-red-600 bg-yellow-100 px-4 py-2 rounded-md shadow-md">
|
|
{message}
|
|
</div>{" "}
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
size={"sm"}
|
|
className="px-4 py-1.5 rounded bg-gray-200 text-sm hover:bg-gray-300"
|
|
onClick={() => toast.dismiss(t.id)}
|
|
>
|
|
확인완료
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
),
|
|
{ duration: Infinity }
|
|
); // 수동 닫기
|
|
}; |