File Drag & Drop 업로드 UX

'use client'

import { useEffect, useId, useMemo, useRef, useState } from 'react'

function isFileDrag(event) {
  const dt = event.dataTransfer
  if (!dt) return false

  // Files 드래그 여부를 최대한 안전하게 판별
  if (Array.from(dt.types || []).includes('Files')) return true
  if (dt.items && Array.from(dt.items).some((item) => item.kind === 'file')) return true

  return false
}

export default function FileDropZone({
  multiple = false,
  accept,
  onFiles,
}) {
  const inputId = useId()
  const inputRef = useRef(null)
  const zoneRef = useRef(null)

  const [isDragActive, setIsDragActive] = useState(false)
  const dragDepth = useRef(0)

  const zoneStyle = useMemo(() => {
    const base = {
      border: '2px dashed #bbb',
      borderRadius: 12,
      padding: 20,
      cursor: 'pointer',
      userSelect: 'none',
      outline: 'none',
      transition: 'transform 120ms ease, border-color 120ms ease',
    }

    if (!isDragActive) return base

    return {
      ...base,
      borderColor: '#666',
      transform: 'scale(1.01)',
    }
  }, [isDragActive])

  useEffect(() => {
    // 전역 안전장치: 드롭존 밖으로 떨어져도 브라우저 기본 동작(열기/이동)을 막는다.
    const preventDefaultIfFile = (e) => {
      if (!isFileDrag(e)) return
      e.preventDefault()
    }

    document.addEventListener('dragover', preventDefaultIfFile, { capture: true })
    document.addEventListener('drop', preventDefaultIfFile, { capture: true })

    return () => {
      document.removeEventListener('dragover', preventDefaultIfFile, { capture: true })
      document.removeEventListener('drop', preventDefaultIfFile, { capture: true })
    }
  }, [])

  const emitFiles = (fileList) => {
    const files = Array.from(fileList || [])
    if (files.length === 0) return
    onFiles?.(files)
  }

  const onClickZone = () => inputRef.current?.click()

  const onKeyDownZone = (e) => {
    if (e.key !== 'Enter' && e.key !== ' ') return
    e.preventDefault()
    inputRef.current?.click()
  }

  const onDragEnter = (e) => {
    if (!isFileDrag(e)) return
    e.preventDefault()

    dragDepth.current += 1
    setIsDragActive(true)
  }

  const onDragOver = (e) => {
    if (!isFileDrag(e)) return
    // drop이 성립하려면 dragover에서 기본 동작을 막아야 한다.
    e.preventDefault()
    e.dataTransfer.dropEffect = 'copy'
  }

  const onDragLeave = (e) => {
    if (!isFileDrag(e)) return
    e.preventDefault()

    dragDepth.current -= 1
    if (dragDepth.current <= 0) {
      dragDepth.current = 0
      setIsDragActive(false)
    }
  }

  const onDrop = (e) => {
    if (!isFileDrag(e)) return
    e.preventDefault()

    dragDepth.current = 0
    setIsDragActive(false)

    emitFiles(e.dataTransfer.files)
  }

  const onChangeInput = (e) => {
    emitFiles(e.target.files)

    // 같은 파일을 다시 선택할 수 있도록 value 초기화
    e.target.value = ''
  }

  return (
    <div
      ref={zoneRef}
      role="button"
      tabIndex={0}
      aria-label="파일을 드래그 앤 드롭하거나 클릭하여 선택"
      onClick={onClickZone}
      onKeyDown={onKeyDownZone}
      onDragEnter={onDragEnter}
      onDragOver={onDragOver}
      onDragLeave={onDragLeave}
      onDrop={onDrop}
      style={zoneStyle}
    >
      <input
        id={inputId}
        ref={inputRef}
        type="file"
        accept={accept}
        multiple={multiple}
        onChange={onChangeInput}
        style={{ display: 'none' }}
      />

      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <strong>{isDragActive ? '여기에 놓아서 업로드' : '파일을 드래그하거나 클릭해서 선택'}</strong>
        <span style={{ opacity: 0.7 }}>
          {multiple ? '여러 개 선택 가능' : '하나 선택'}
        </span>
      </div>

      <div style={{ marginTop: 8, opacity: 0.75, fontSize: 14 }}>
        드롭존 밖에 놓아도 브라우저가 파일을 열지 않도록 기본 동작을 차단합니다.
      </div>
    </div>
  )
}

'use client'

import { useState } from 'react'
import FileDropZone from './FileDropZone'

export default function UploadDemo() {
  const [lastFileName, setLastFileName] = useState('')
  const [status, setStatus] = useState('idle')

  const onFiles = async (files) => {
    const [file] = files
    setLastFileName(file.name)
    setStatus('uploading')

    const formData = new FormData()
    formData.append('file', file)

    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    })

    setStatus(res.ok ? 'done' : 'error')
  }

  return (
    <div style={{ maxWidth: 560 }}>
      <FileDropZone
        accept="image/*"
        onFiles={onFiles}
      />

      <div style= marginTop: 8, opacity: 0.75, fontSize: 14 >
        <div>마지막 선택: {lastFileName || '-'}</div>
        <div>상태: {status}</div>
      </div>
    </div>
  )
}

export async function POST(request) {
  const formData = await request.formData()
  const file = formData.get('file')

  // 런타임에 따라 File 인스턴스 체크가 다르게 동작할 수 있어, 메서드 기반으로도 방어합니다.
  if (!file || typeof file.arrayBuffer !== 'function') {
    return Response.json({ error: 'file is required' }, { status: 400 })
  }

  const bytes = await file.arrayBuffer()

  //TODO:
  // - bytes를 스토리지에 저장(S3, GCS 등)
  // - 파일명/타입/사이즈 검증
  // - 인증/인가 적용

  return Response.json({
    name: file.name,
    type: file.type,
    size: file.size,
  })
}