70 lines
2.0 KiB
TypeScript
70 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={`min-h-[140px] w-[500px] rounded-xl border border-border bg-background p-6 shadow-lg ${t.visible ? "animate-enter" : "animate-leave"}`}
|
|
>
|
|
<div className="rounded-md bg-yellow-100 px-4 py-2 text-3xl font-extrabold text-red-600 shadow-md">
|
|
{message}
|
|
</div>{" "}
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
size={"sm"}
|
|
className="rounded bg-secondary px-4 py-1.5 text-sm text-secondary-foreground hover:bg-accent"
|
|
onClick={() => toast.dismiss(t.id)}
|
|
>
|
|
확인완료
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
),
|
|
{ duration: Infinity },
|
|
); // 수동 닫기
|
|
};
|