09ファイルアップロード ドロップゾーン

<main class="stage">
  <div class="fu">
    <label class="fu__zone" tabindex="0">
      <span class="fu__ic">
        <svg viewBox="0 0 256 256" width="20" height="20"><g fill="currentColor"><path d="M216 48v160H40V48a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16" opacity=".2"/><path d="M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0M93.66 77.66L120 51.31V144a8 8 0 0 0 16 0V51.31l26.34 26.35a8 8 0 0 0 11.32-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32"/></g></svg>
      </span>
      <span class="fu__hint">ドラッグ&ドロップ、またはクリックして選択</span>
      <input class="fu__input" type="file" hidden multiple>
    </label>
    <ul class="fu__files">
      <li class="fu__file fu__file--demo is-demo" aria-hidden="true">
        <span class="fu__file-name">report.pdf</span>
        <span class="fu__track"><span class="fu__fill"></span></span>
        <span class="fu__check">
          <svg viewBox="0 0 256 256" width="12" height="12"><g fill="currentColor"><path d="M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0"/></g></svg>
        </span>
      </li>
    </ul>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-enter;
$easing: $ease-out;
$color: $subject-blue;

@include stage($stage-orange);

.fu {
  box-sizing: border-box;
  width: min(240px, 86vw);
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  color: $subject-cream;
}
.fu__zone {
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: $sp-2;
  border: 1.5px dashed rgba(255, 247, 230, .4);
  border-radius: $r-card;
  padding: $sp-4 $sp-3;
  cursor: pointer;
  transition: border-color $duration $easing, background $duration $easing;
}
.fu__zone.is-over { border-color: $color; background: rgba(47, 109, 246, .12); }
.fu__ic { color: rgba(255, 247, 230, .7); }
.fu__hint { font-size: 11px; color: $subject-ink; text-align: center; }
.fu__files { list-style: none; margin: $sp-3 0 0; padding: 0; display: flex; flex-direction: column; gap: $sp-2; }
.fu__file {
  box-sizing: border-box;
  display: flex; align-items: center; gap: $sp-2;
  background: rgba(255, 247, 230, .08);
  border-radius: $r-sm;
  padding: $sp-1 $sp-2;
}
.fu__file-name { flex: 1 1 auto; min-width: 0; font-size: 10px; color: $subject-ink; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu__track {
  position: relative;
  flex: 0 0 auto;
  width: 46px; height: 4px;
  border-radius: $r-pill;
  background: rgba(255, 247, 230, .18);
  overflow: hidden;
  transition: opacity $duration $easing;
}
.fu__fill {
  display: block; width: 100%; height: 100%;
  background: $color;
  transform-origin: left center; // 규칙8: 업로드 진행 왼쪽 채움
  transform: scaleX(0);
  transition: transform 900ms $easing;
}
.fu__check {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: $subject-mint;
  color: $stage-ink;
  display: grid; place-items: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity $duration $easing, transform $duration $easing;
}
.fu__file--done .fu__track { opacity: 0; width: 0; }
.fu__file--done .fu__check { opacity: 1; transform: scale(1); }
.fu__remove {
  flex: 0 0 auto;
  width: 16px; height: 16px; padding: 0;
  border: 0; background: transparent; color: rgba(255, 247, 230, .6);
  font-size: 12px; line-height: 1; cursor: pointer;
}

// ── 자동 루프: 진행률이 0→100 을 반복하고 끝나면 체크로 바뀐다 ──────────────
.fu__file--demo.is-demo .fu__fill { animation: fu-fill 2.6s $easing infinite; }
.fu__file--demo.is-demo .fu__track { animation: fu-track 2.6s $easing infinite; }
.fu__file--demo.is-demo .fu__check { animation: fu-check 2.6s $easing infinite; }
@keyframes fu-fill {
  0%   { transform: scaleX(0); }
  70%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@keyframes fu-track {
  0%, 75%  { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes fu-check {
  0%, 75%  { opacity: 0; transform: scale(.6); }
  90%, 100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 340px) {
  .fu__hint { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fu__file--demo.is-demo .fu__fill,
  .fu__file--demo.is-demo .fu__track,
  .fu__file--demo.is-demo .fu__check { animation: none !important; }
  .fu__zone, .fu__fill, .fu__check, .fu__track { transition: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.fu {
  box-sizing: border-box;
  width: min(240px, 86vw);
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  color: #fff7e6;
}

.fu__zone {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1.5px dashed rgba(255, 247, 230, 0.4);
  border-radius: 16px;
  padding: 16px 12px;
  cursor: pointer;
  transition: border-color 600ms ease-out, background 600ms ease-out;
}

.fu__zone.is-over {
  border-color: #2f6df6;
  background: rgba(47, 109, 246, 0.12);
}

.fu__ic {
  color: rgba(255, 247, 230, 0.7);
}

.fu__hint {
  font-size: 11px;
  color: #17141a;
  text-align: center;
}

.fu__files {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fu__file {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 247, 230, 0.08);
  border-radius: 8px;
  padding: 4px 8px;
}

.fu__file-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px;
  color: #17141a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fu__track {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 247, 230, 0.18);
  overflow: hidden;
  transition: opacity 600ms ease-out;
}

.fu__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #2f6df6;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms ease-out;
}

.fu__check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4cd4a6;
  color: #17141a;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.fu__file--done .fu__track {
  opacity: 0;
  width: 0;
}

.fu__file--done .fu__check {
  opacity: 1;
  transform: scale(1);
}

.fu__remove {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 247, 230, 0.6);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.fu__file--demo.is-demo .fu__fill {
  animation: fu-fill 2.6s ease-out infinite;
}

.fu__file--demo.is-demo .fu__track {
  animation: fu-track 2.6s ease-out infinite;
}

.fu__file--demo.is-demo .fu__check {
  animation: fu-check 2.6s ease-out infinite;
}

@keyframes fu-fill {
  0% {
    transform: scaleX(0);
  }
  70% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes fu-track {
  0%, 75% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
@keyframes fu-check {
  0%, 75% {
    opacity: 0;
    transform: scale(0.6);
  }
  90%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 340px) {
  .fu__hint {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fu__file--demo.is-demo .fu__fill,
  .fu__file--demo.is-demo .fu__track,
  .fu__file--demo.is-demo .fu__check {
    animation: none !important;
  }
  .fu__zone, .fu__fill, .fu__check, .fu__track {
    transition: none;
  }
}

// 실제 동작: 끌어다 놓거나 클릭으로 고른 파일이 실제로 목록에 추가되고, 진행률이 실제로 0→100 채워진 뒤 체크로 바뀐다.
var zone = document.querySelector('.fu__zone');
var input = document.querySelector('.fu__input');
var list = document.querySelector('.fu__files');
function addFile(name) {
  var li = document.createElement('li');
  li.className = 'fu__file';
  var nameEl = document.createElement('span'); nameEl.className = 'fu__file-name'; nameEl.textContent = name;
  var track = document.createElement('span'); track.className = 'fu__track';
  var fill = document.createElement('span'); fill.className = 'fu__fill';
  track.appendChild(fill);
  var rm = document.createElement('button'); rm.type = 'button'; rm.className = 'fu__remove';
  rm.setAttribute('aria-label', name + ' 削除'); rm.textContent = '×';
  rm.addEventListener('click', function () { li.remove(); });
  li.appendChild(nameEl); li.appendChild(track); li.appendChild(rm);
  list.appendChild(li);
  requestAnimationFrame(function () { fill.style.transform = 'scaleX(1)'; });
  setTimeout(function () { li.classList.add('fu__file--done'); }, 900);
}
zone.addEventListener('click', function (e) { if (e.target !== input) input.click(); });
input.addEventListener('change', function () {
  Array.prototype.forEach.call(input.files, function (f) { addFile(f.name); });
  input.value = '';
});
['dragover', 'dragenter'].forEach(function (ev) {
  zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.add('is-over'); });
});
['dragleave', 'drop'].forEach(function (ev) {
  zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.remove('is-over'); });
});
zone.addEventListener('drop', function (e) {
  Array.prototype.forEach.call(e.dataTransfer.files, function (f) { addFile(f.name); });
});

import { useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./FileUpload.module.scss";

export type FileUploadProps = {
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type UploadFile = { id: string; name: string; done: boolean };

export default function FileUpload({ duration = 600, easing = "ease-out", color = "#2f6df6" }: FileUploadProps) {
  const [files, setFiles] = useState<UploadFile[]>([]);
  const [over, setOver] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  function addFiles(list: FileList | null) {
    if (!list) return;
    Array.from(list).forEach((f) => {
      const id = `${f.name}-${Date.now()}-${Math.random()}`;
      setFiles((prev) => [...prev, { id, name: f.name, done: false }]);
      setTimeout(() => setFiles((prev) => prev.map((x) => (x.id === id ? { ...x, done: true } : x))), 900);
    });
  }
  function onDrop(e: any) {
    e.preventDefault(); setOver(false); addFiles(e.dataTransfer.files);
  }

  return (
    <div className={styles.fu} style={vars}>
      <label
        className={`${styles.zone} ${over ? styles.over : ""}`}
        tabIndex={0}
        onDragOver={(e: any) => { e.preventDefault(); setOver(true); }}
        onDragLeave={() => setOver(false)}
        onDrop={onDrop}
      >
        <span className={styles.ic}>⭱</span>
        <span className={styles.hint}>Drag and drop, or click to choose</span>
        <input ref={inputRef} type="file" multiple hidden onChange={(e: any) => { addFiles(e.target.files); e.target.value = ""; }} />
      </label>
      <ul className={styles.files}>
        {files.map((f) => (
          <li key={f.id} className={styles.file}>
            <span className={styles.name}>{f.name}</span>
            <span className={`${styles.track} ${f.done ? styles.trackDone : ""}`}>
              <span className={styles.fill} style={{ transform: f.done ? "scaleX(1)" : "scaleX(0)" }} />
            </span>
            <span className={`${styles.check} ${f.done ? styles.checkDone : ""}`}>✓</span>
            <button type="button" className={styles.remove} aria-label={`Remove ${f.name}`} onClick={() => setFiles((prev) => prev.filter((x) => x.id !== f.id))}>×</button>
          </li>
        ))}
      </ul>
    </div>
  );
}