FlowBoard UI Inventory

<DsButton class="toss-btn primary-btn" type="button">저장</DsButton>
<DsButton class="toss-btn secondary-btn" type="button">취소</DsButton>
<DsButton class="toss-btn text-btn" type="button">자세히 보기</DsButton>
<DsButton type="button" aria-label="수정"><v-icon small>mdi-pencil-outline</v-icon></DsButton>

<label>
  데이터셋
  <select v-model="datasetId">
    <option value="sales">월별 매출</option>
  </select>
</label>
<label>
  자연어 설정
  <textarea v-model.trim="prompt" rows="1" />
</label>

<p class="notice-message">업로드된 파일 3개를 분석 중입니다.</p>
<p class="error-message" role="alert">이메일 또는 비밀번호를 확인해주세요.</p>
<span class="file-chip"><v-icon small>mdi-file-excel-outline</v-icon> file.xlsx</span>

<nav class="workspace-nav" aria-label="FlowBoard workspace menu">
  <DsButton class="nav-item active" type="button">
    <v-icon small>mdi-view-dashboard-outline</v-icon>
    <span><strong>대시보드</strong><small>완성된 보고서 보기</small></span>
  </DsButton>
</nav>

<article class="dashboard-slot dashboard-slot--filled">
  <header class="widget-header">...</header>
  <div class="manager-kpi">128,450,000<span>원</span></div>
</article>
<div class="data-grid" role="table">...</div>

<DsClayBarChart
  :data="[
    { label: '1월', value: 6 },
    { label: '2월', value: 5 },
    { label: '3월', value: 4 },
    { label: '4월', value: 3 },
    { label: '5월', value: 2 },
    { label: '6월', value: 1 },
  ]"
  :height="160"
/>

<section class="skeleton-pattern skeleton-pattern--white">
  <div class="skeleton-top">
    <span class="skeleton-icon"></span>
    <div>
      <i class="skeleton skeleton-title"></i>
      <i class="skeleton skeleton-subtitle"></i>
    </div>
  </div>
  <div class="skeleton-list">
    <div v-for="index in 4" :key="index" class="skeleton-row">
      <span class="skeleton-icon skeleton-icon--sm"></span>
      <div>
        <i class="skeleton skeleton-line"></i>
        <i class="skeleton skeleton-line skeleton-line--short"></i>
      </div>
    </div>
  </div>
</section>

<section class="upload-panel" @dragover.prevent @drop.prevent="dropFiles">
  <input id="dataInputFiles" class="upload-file-input" type="file" multiple @change="selectFiles" />
  <label v-if="!uploadedFileCards.length" class="upload-dropzone" for="dataInputFiles">
    <v-icon>mdi-cloud-upload-outline</v-icon>
    <strong>클릭하거나 파일을 여기로 드래그하세요</strong>
    <span>XLSX, XLS, CSV 파일 지원</span>
  </label>
  <div v-else class="upload-file-grid">
    <article v-for="file in uploadedFileCards" :key="file.id" class="upload-file-card">
      <DsButton type="button" class="upload-file-remove" @click="removeFile(file.id)">
        <v-icon x-small>mdi-close</v-icon>
      </DsButton>
      <v-icon>mdi-file-document-outline</v-icon>
      <strong>{{ file.name }}</strong>
    </article>
    <label class="upload-add-card" for="dataInputFiles"><v-icon>mdi-plus</v-icon><span>문서 추가</span></label>
  </div>
</section>

<v-dialog v-model="isDialogOpen" width="420">
  <v-card class="pa-5">...</v-card>
</v-dialog>
this.$toast.success("저장되었습니다.")

<client-only>
  <highcharts :options="chartOptions" />
</client-only>
<draggable v-model="items" handle=".drag-handle" :animation="140">...</draggable>
<swiper><swiper-slide>...</swiper-slide></swiper>
<quill-editor v-model="content" />

<DsEmptyState
  title="아직 확정된 데이터셋이 없습니다"
  description="데이터 입력에서 파일을 올리고 입력 확정을 누르면 실제 데이터와 양식이 여기에 정리됩니다."
  icon="mdi-database-off-outline"
  primary-label="데이터 입력으로 이동"
  primary-icon="mdi-tray-arrow-up"
  :steps="['파일 업로드', '컬럼 확인', '데이터 입력 확정']" />
<v-progress-circular indeterminate size="32" color="primary" />