파일 업로드 시스템 만들기

npm create vite@latest upload-app -- --template react-ts
cd upload-app
npm install connectbase-client

import ConnectBase from 'connectbase-client'

export const cb = new ConnectBase({
  publicKey: import.meta.env.VITE_CONNECT_BASE_PUBLIC_KEY
})

import { useState } from 'react'
import { cb } from '../lib/connectbase'

const STORAGE_ID = import.meta.env.VITE_STORAGE_ID as string

interface UploadedFile {
  id: string    // 파일 고유 ID (삭제할 때 사용)
  name: string  // 원본 파일 이름
  url: string   // CDN URL
  size: number  // 파일 크기 (바이트)
}

export function useFileUpload() {
  const [files, setFiles] = useState<UploadedFile[]>([])
  const [uploading, setUploading] = useState(false)

  // 파일 업로드 — file 은 <input type="file"> 에서 받은 File 객체
  // 경로 기반 (고정 URL — 같은 path 에 다시 업로드하면 URL 유지된 채로 파일 교체)
  const upload = async (file: File, path?: string) => {
    setUploading(true)
    try {
      const result = path
        ? await cb.storage.uploadByPath(STORAGE_ID, path, file)
        : await cb.storage.uploadFile(STORAGE_ID, file)
      setFiles(prev => [...prev, result as UploadedFile])
      return result
    } finally {
      setUploading(false)
    }
  }

  // 파일 목록 조회 (parentId 없으면 루트)
  const listFiles = async (parentId?: string) => {
    const result = await cb.storage.getFiles(STORAGE_ID, parentId)
    setFiles(result as UploadedFile[])
  }

  // 파일 삭제
  const removeFile = async (fileId: string) => {
    await cb.storage.deleteFile(STORAGE_ID, fileId)
    setFiles(prev => prev.filter(f => f.id !== fileId))
  }

  return { files, uploading, upload, listFiles, removeFile }
}

import { useFileUpload } from '../hooks/useFileUpload'

export function FileUploader() {
  const { files, uploading, upload, removeFile } = useFileUpload()

  // 파일을 드래그 앤 드롭했을 때 실행
  const handleDrop = async (e: React.DragEvent) => {
    e.preventDefault()
    const droppedFiles = Array.from(e.dataTransfer.files)
    for (const file of droppedFiles) {
      // 두 번째 인자에 경로를 주면 uploadByPath (고정 URL), 생략하면 uploadFile (UUID URL)
      await upload(file, `/images/${file.name}`)
    }
  }

  return (
    <div>
      {/* 드롭존 — 여기에 파일을 드래그하세요 */}
      <div
        onDrop={handleDrop}
        onDragOver={(e) => e.preventDefault()}
        style={{ border: '2px dashed #ccc', padding: 40, textAlign: 'center' }}
      >
        {uploading ? '업로드 중...' : '파일을 드래그하거나 클릭하세요'}
      </div>

      {/* 업로드된 파일 목록 */}
      <ul>
        {files.map((f) => (
          <li key={f.id}>
            <a href={f.url} target="_blank" rel="noopener noreferrer">{f.name}</a>
            <span> ({(f.size / 1024).toFixed(1)} KB)</span>
            <button onClick={() => removeFile(f.id)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

npm run dev