feat: Add CAD file conversion functionality to Playground component

src/components/Playground.jsx

@@ -6,6 +6,7 @@ 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'
@@ -13,7 +14,8 @@ import QSelect from '@/components/ui/QSelect'
 import styles from './playground.module.css'
 
 export default function Playground() {
-  const { get } = useAxios()
+  const fileRef = useRef(null)
+  const { get, post } = useAxios()
   const testVar = process.env.NEXT_PUBLIC_TEST
   const { getMessage } = useMessage()
 
@@ -28,6 +30,16 @@ export default function Playground() {
     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])
+
+    const result = await post({ url: process.env.CONVERTER_API_URL, data: formData })
+    await convertDwgToPng(result.Files[0].FileName, result.Files[0].FileData)
+  }
+
   const data = [
     {
       id: 1,
@@ -70,6 +82,12 @@ export default function Playground() {
           <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>
     </>
   )

src/lib/cadAction.js

@@ -0,0 +1,13 @@
+const convertDwgToPng = async (fileName, data) => {
+  console.log('fileName', fileName)
+  const imagePath = 'public/cad-images'
+  try {
+    await fs.readdir(imagePath)
+  } catch {
+    await fs.mkdir(imagePath)
+  }
+
+  return fs.writeFile(`${imagePath}/${fileName}`, data, 'base64')
+}
+
+export { convertDwgToPng }