111 lines
3.2 KiB
JavaScript
111 lines
3.2 KiB
JavaScript
'use client'
|
|
|
|
import { useRef, useState } from 'react'
|
|
import { Button } from '@nextui-org/react'
|
|
import ColorPicker from './common/color-picker/ColorPicker'
|
|
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { convertDwgToPng } from '@/lib/cadAction'
|
|
// import { get } from '@/lib/Axios'
|
|
|
|
import QSelect from '@/components/ui/QSelect'
|
|
|
|
import styles from './playground.module.css'
|
|
import { useRecoilState } from 'recoil'
|
|
import { cadFileNameState, useCadFileState } from '@/store/canvasAtom'
|
|
import { toastUp } from '@/hooks/useToast'
|
|
|
|
export default function Playground() {
|
|
const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
|
|
const [cadFileName, setCadFileName] = useRecoilState(cadFileNameState)
|
|
const fileRef = useRef(null)
|
|
const { get, promisePost } = useAxios()
|
|
const testVar = process.env.NEXT_PUBLIC_TEST
|
|
const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
|
|
const { getMessage } = useMessage()
|
|
|
|
const [color, setColor] = useState('#ff0000')
|
|
|
|
const handleUsers = async () => {
|
|
// const users = await get('/api/user/find-all')
|
|
const params = {
|
|
url: '/api/user/find-all',
|
|
}
|
|
const users = await get(params)
|
|
console.log('users', users)
|
|
}
|
|
|
|
const handleConvert = async () => {
|
|
console.log('file', fileRef.current.files[0])
|
|
|
|
const formData = new FormData()
|
|
formData.append('file', fileRef.current.files[0])
|
|
|
|
await promisePost({ url: converterUrl, data: formData })
|
|
.then((res) => {
|
|
console.log('response: ', res)
|
|
convertDwgToPng(res.data.Files[0].FileName, res.data.Files[0].FileData)
|
|
setUseCadFile(true)
|
|
setCadFileName(res.data.Files[0].FileName)
|
|
toastUp({ message: '파일 변환 완료', type: 'success' })
|
|
})
|
|
.catch((err) => {
|
|
console.error(err)
|
|
toastUp({ message: '파일 변환 실패', type: 'error' })
|
|
})
|
|
}
|
|
|
|
const data = [
|
|
{
|
|
id: 1,
|
|
author: 'SWYOO',
|
|
contents: '버튼 정리(템플릿 적용)',
|
|
date: '2024.07.16',
|
|
},
|
|
{
|
|
id: 2,
|
|
author: 'SWYOO',
|
|
contents: 'README.md 파일 이미지 경로 수정',
|
|
date: '2024.07.17',
|
|
},
|
|
{
|
|
id: 3,
|
|
author: 'SWYOO',
|
|
contents: '',
|
|
date: '',
|
|
},
|
|
]
|
|
return (
|
|
<>
|
|
<div className="container mx-auto p-4 m-4 border">
|
|
<div className={styles.test}>이 영역은 테스트입니다.</div>
|
|
<div className="m-2">
|
|
<QSelect />
|
|
</div>
|
|
<div className="w-full bg-orange-300 m-2">{testVar}</div>
|
|
<div>
|
|
<div className="m-2">
|
|
<Button onClick={handleUsers}>Button</Button>
|
|
</div>
|
|
</div>
|
|
<div className="test">
|
|
<p className="text-white">Sass 테스트입니다.</p>
|
|
</div>
|
|
<div>{getMessage('hi')}</div>
|
|
<div>
|
|
<h1>React ColorPicker</h1>
|
|
<ColorPicker color={color} setColor={setColor} />
|
|
<div className="p-4">{color}</div>
|
|
</div>
|
|
<div>
|
|
<input type="file" name="file" ref={fileRef} />
|
|
<div>
|
|
<Button onClick={handleConvert}>Convert</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|