- 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) => {
|
const QToast = (props) => {
|
||||||
|
// type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default'
|
||||||
const { message, type = 'info', options } = props
|
const { message, type = 'info', options } = props
|
||||||
const customOptions = { ...toastDefaultOptions, ...options }
|
const customOptions = { ...toastDefaultOptions, ...options }
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user