143 lines
4.2 KiB
JavaScript
143 lines
4.2 KiB
JavaScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
import Link from 'next/link'
|
|
|
|
import { useRecoilState } from 'recoil'
|
|
import { modalContent, modalState } from '@/store/modalAtom'
|
|
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
|
|
import { Button } from '@nextui-org/react'
|
|
|
|
import SingleDatePicker from './common/datepicker/SingleDatePicker'
|
|
import RangeDatePicker from './common/datepicker/RangeDatePicker'
|
|
import QGrid from './common/grid/QGrid'
|
|
import { useSwal } from '@/hooks/useSwal'
|
|
|
|
export default function Intro() {
|
|
const { get } = useAxios()
|
|
const { swalFire } = useSwal()
|
|
|
|
// const [open, setOpen] = useState(false)
|
|
const [startDate, setStartDate] = useState(new Date())
|
|
const singleDatePickerProps = {
|
|
startDate,
|
|
setStartDate,
|
|
}
|
|
|
|
const [dateRange, setDateRange] = useState([null, null])
|
|
const [startRangeDate, endRangeDate] = dateRange
|
|
const rangeDatePickerProps = {
|
|
startRangeDate,
|
|
endRangeDate,
|
|
setDateRange,
|
|
}
|
|
|
|
// const gridProps = {
|
|
// isPageable: false,
|
|
// }
|
|
const [gridProps, setGridProps] = useState({
|
|
gridData: [],
|
|
isPageable: false,
|
|
})
|
|
|
|
const [open, setOpen] = useRecoilState(modalState)
|
|
const [contents, setContent] = useRecoilState(modalContent)
|
|
|
|
const modelProps = {
|
|
open,
|
|
setOpen,
|
|
}
|
|
|
|
const ipsum = (
|
|
<>
|
|
<p className="text-2xl">title</p>
|
|
<p>
|
|
저작자·발명가·과학기술자와 예술가의 권리는 법률로써 보호한다. 이 헌법은 1988년 2월 25일부터 시행한다. 다만, 이 헌법을 시행하기 위하여 필요한
|
|
법률의 제정·개정과 이 헌법에 의한 대통령 및 국회의원의 선거 기타 이 헌법시행에 관한 준비는 이 헌법시행 전에 할 수 있다.
|
|
</p>
|
|
<p>
|
|
국가는 주택개발정책등을 통하여 모든 국민이 쾌적한 주거생활을 할 수 있도록 노력하여야 한다. 통신·방송의 시설기준과 신문의 기능을 보장하기
|
|
위하여 필요한 사항은 법률로 정한다.
|
|
</p>
|
|
<p>
|
|
국회에서 의결된 법률안은 정부에 이송되어 15일 이내에 대통령이 공포한다. 선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는
|
|
후보자에게 부담시킬 수 없다.
|
|
</p>
|
|
</>
|
|
)
|
|
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
// const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json')
|
|
// const data = await response.json()
|
|
const data = await get({ url: 'https://www.ag-grid.com/example-assets/space-mission-data.json' })
|
|
setGridProps({ ...gridProps, gridData: data })
|
|
}
|
|
fetchData()
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<div className="text-2xl">
|
|
<Link href={'/login'}>
|
|
<Button color="primary">로그인 페이지로 이동</Button>
|
|
</Link>
|
|
</div>
|
|
<div className="my-2">
|
|
<div className="text-2xl">Single Date Picker</div>
|
|
<div>
|
|
<SingleDatePicker {...singleDatePickerProps} />
|
|
</div>
|
|
</div>
|
|
<div className="my-2">
|
|
<div className="text-2xl">Range Date Picker</div>
|
|
<div>
|
|
<RangeDatePicker {...rangeDatePickerProps} />
|
|
</div>
|
|
</div>
|
|
<div className="my-2">
|
|
<div className="text-2xl">QGrid</div>
|
|
<div>
|
|
<QGrid {...gridProps} />
|
|
</div>
|
|
</div>
|
|
<div className="my-2">
|
|
<div className="text-2xl">QModal</div>
|
|
<div>
|
|
{/* <Button color="primary" onClick={() => setOpen(true)}>
|
|
Open Modal
|
|
</Button>
|
|
<QModal {...modelProps}>{ipsum}</QModal> */}
|
|
<Button
|
|
color="primary"
|
|
onClick={() => {
|
|
setContent(ipsum)
|
|
setOpen(true)
|
|
}}
|
|
>
|
|
Open Modal
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="my-2">
|
|
<div className="text-2xl">QToast</div>
|
|
<div>
|
|
<Button
|
|
color="primary"
|
|
onClick={() => {
|
|
swalFire({
|
|
text: 'This is a toast message',
|
|
})
|
|
}}
|
|
>
|
|
Open Toast
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|