qcast-front/src/components/Playground.jsx

'use client'

import { useRef, useState } from 'react'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { FaAnglesUp } from 'react-icons/fa6'
import { FaAnglesDown } from 'react-icons/fa6'

import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import { convertDwgToPng } from '@/lib/cadAction'
import { cadFileNameState, googleMapFileNameState, useCadFileState, useGoogleMapFileState } from '@/store/canvasAtom'

import QSelect from '@/components/ui/QSelect'
import { Button } from '@nextui-org/react'
import ColorPicker from './common/color-picker/ColorPicker'
import { useSwal } from '@/hooks/useSwal'

import styles from './playground.module.css'
import Image from 'next/image'

export default function Playground() {
  const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
  const [cadFileName, setCadFileName] = useRecoilState(cadFileNameState)
  const [useGoogleMapFile, setUseGoogleMapFile] = useRecoilState(useGoogleMapFileState)
  const [googleMapFileName, setGoogleMapFileName] = useRecoilState(googleMapFileNameState)
  const fileRef = useRef(null)
  const queryRef = useRef(null)
  const [zoom, setZoom] = useState(20)
  const { get, promisePost } = useAxios()
  const testVar = process.env.NEXT_PUBLIC_TEST
  const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
  const { getMessage } = useMessage()
  const { swalFire } = useSwal()

  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)
        swalFire({ text: '파일 변환 완료' })
      })
      .catch((err) => {
        console.error(err)
        swalFire({ text: '파일 변환 실패' })
      })
  }

  const handleDownImage = async (fileName = '') => {
    const fileNm = fileName === '' ? uuidv4() : fileName
    const queryString = queryRef.current.value === '' ? '서울시 서대문구 연세로5다길 22-3 발리빌라 3층' : queryRef.current.value
    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryString}&fileNm=${fileNm}&zoom=${zoom}` })
    console.log('res', res)
    setGoogleMapFileName(res.fileNm)
    swalFire({ text: '이미지 저장 완료' })
    setUseGoogleMapFile(true)
  }

  const handleZoom = async (type) => {
    if (type === 'up') {
      setZoom((prevState) => prevState + 1)
    } else {
      setZoom((prevState) => prevState - 1)
    }

    await handleDownImage()
  }

  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: '',
    },
  ]

  const handleSwalAlert = () => {
    swalFire({
      text: '알림 테스트입니다.',
    })
  }

  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 dangerouslySetInnerHTML={{ __html: getMessage('welcome', ['<span style="color: red">test</span>']) }}></div>
        <div>
          <h1>React ColorPicker</h1>
          <ColorPicker color={color} setColor={setColor} />
          <div className="p-4">{color}</div>
        </div>
        <div>
          <h1 className="text-2xl">캐드 파일 이미지 사용</h1>
          <input type="file" name="file" ref={fileRef} />
          <div>
            <Button onClick={handleConvert}>Convert</Button>
          </div>
        </div>
        <div>
          <h1 className="text-2xl">구글 맵 이미지 사용</h1>
          <input type="text" ref={queryRef} className="w-80 border-medium my-2" />
          <div>
            <Button onClick={handleDownImage}>Google map Download to Image</Button>
          </div>
          {useGoogleMapFile && (
            <>
              <div className="my-2">
                <p className="text-lg">Zoom Controller : {zoom}</p>
                <Button startContent={<FaAnglesUp />} className="mx-2" onClick={() => handleZoom('up')}></Button>
                <Button startContent={<FaAnglesDown />} className="mx-2" onClick={() => handleZoom('down')}></Button>
              </div>
              <div className="my-2">
                <Image src={`/mapImages/${googleMapFileName}`} width={640} height={640} />
              </div>
            </>
          )}
        </div>
        <div className="my-2">
          <Button onClick={() => swalFire({ text: 'alert 테스트입니다.' })}>Sweetalert - alert</Button>
        </div>
        <div className="my-2">
          <Button onClick={() => swalFire({ text: 'alert 아이콘 테스트입니다.', icon: 'error' })}>Sweetalert - alert - error</Button>
        </div>
        <div className="my-2">
          <Button
            onClick={() =>
              swalFire({
                html: `confirm 테스트입니다.<br />당신은 바보입니까?`,
                type: 'confirm',
                confirmFn: () => {
                  alert('test')
                },
              })
            }
          >
            Sweetalert - confirm
          </Button>
        </div>
      </div>
    </>
  )
}