- Test 파일 삭제
- QToast type 종류 추가
This commit is contained in:
parent
f570d9eb6c
commit
20d29c7e33
@ -1,58 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import Hero from '@/components/Hero'
|
||||
import React from 'react'
|
||||
import QToast from '@/components/ui/Toast'
|
||||
import { ToastContainer } from 'react-toastify'
|
||||
|
||||
export default function TestPage() {
|
||||
const toastOption = {
|
||||
position: 'top-right',
|
||||
autoClose: 5000,
|
||||
draggable: true,
|
||||
hideProgressBar: true,
|
||||
rtl: false,
|
||||
pauseOnFocusLoss: true,
|
||||
pauseOnHover: true,
|
||||
theme: 'light',
|
||||
limit: 2,
|
||||
closeOnClick: true,
|
||||
}
|
||||
const toastTest = () => {
|
||||
QToast({
|
||||
type: 'info', // type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default';
|
||||
message: getContent('Toast Test'),
|
||||
option: toastOption,
|
||||
})
|
||||
}
|
||||
|
||||
const getContent = (title) => {
|
||||
return (
|
||||
<div>
|
||||
<h1>{title}</h1>
|
||||
<div>ToastMessage</div>
|
||||
<button onClick={onToastButtonClick}>BTN</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const onToastButtonClick = () => {
|
||||
console.log('on toast button click')
|
||||
}
|
||||
|
||||
const handleToast = () => {
|
||||
QToast({
|
||||
message: getContent('Toast Test'),
|
||||
options: {},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Hero title="Test Page"></Hero>
|
||||
<div className="flex flex-col justify-center my-8 pt-20 h-full">
|
||||
<button onClick={handleToast}>Test</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
import { toast } from 'react-toastify'
|
||||
/*
|
||||
* toast option
|
||||
* position: top-left | top-right(default) | top-center | bottom-left | bottom-right | bottom-center
|
||||
* autoClose: n(Milliseconds); 자동 닫힘 시간 설정; default 3000
|
||||
* draggable: 드레그로 닫기; true | false(default)
|
||||
* hideProgressBar: 진행 시간바 숨김 여부; true | false(default)
|
||||
* rtl: Toast 좌우반전 여부; true | false(default)
|
||||
* pauseOnFocusLoss: 창에서 벗어나 있으면 닫힘시간 정지; true(default) | false
|
||||
* pauseOnHover: Mouse Hover 시 닫힘시간 정지; true(default) | false
|
||||
* theme: light(default) | dark | colored
|
||||
* limit: toast 개수 제한
|
||||
* closeOnClick: Toast 클릭시 닫기
|
||||
* */
|
||||
export default function QToast(props) {
|
||||
const {message, type = '', option} = props;
|
||||
|
||||
switch(type) {
|
||||
case 'info':
|
||||
return toast.info(message, option);
|
||||
case 'success':
|
||||
return toast.success(message, option);
|
||||
case 'warning':
|
||||
return toast.warn(message, option);
|
||||
case 'error':
|
||||
return toast.error(message, option);
|
||||
default:
|
||||
return toast(message, option);
|
||||
}
|
||||
}
|
||||
@ -14,6 +14,7 @@ const toastDefaultOptions = {
|
||||
}
|
||||
|
||||
const QToast = (props) => {
|
||||
// type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default'
|
||||
const { message, type = 'info', options } = props
|
||||
const customOptions = { ...toastDefaultOptions, ...options }
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user