ipvelo AI 디자인 시스템

<button class="toss-btn primary-btn" type="button">상표 검토 시작</button>
<button class="toss-btn secondary-btn" type="button">취소</button>
<button class="toss-btn text-btn" type="button">근거 보기</button>
<button type="button" aria-label="수정"><v-icon small>mdi-pencil-outline</v-icon></button>

<label>
  검토 대상
  <select v-model="trademarkId">
    <option value="ipvelo">IPVELO</option>
  </select>
</label>
<label>
  검토 메모
  <textarea v-model.trim="memo" rows="4" />
</label>
<DsSwitch
  v-model="autoEvidence"
  label="근거 자동 표시"
  description="분석 완료 후 핵심 근거 패널을 자동으로 엽니다."
/>
<DsSegmentedControl
  v-model="duplicateMode"
  size="large"
  aria-label="검토 방식"
  :options="duplicateOptions"
/>

<input v-model.trim="trademarkName" type="text" placeholder="상표 명칭" />
<DsTextNameBox
  :value="trademarkName"
  label="상표 명칭"
  :box-size="150"
/>

<DsScoreRing :score="96" label="추천도" />
<DsScoreRing :score="82" label="추천도" />
<DsScoreRing :score="55" label="추천도" />

<DsNumericSpinner
  v-model="candidateLimit"
  size="large"
  :min-number="1"
  :max-number="12"
  decrease-aria-label="유사 후보 수 줄이기"
  increase-aria-label="유사 후보 수 늘리기"
/>
<DsSegmentedControl
  v-model="reviewScope"
  size="large"
  alignment="fixed"
  aria-label="검토 범위"
  :options="reviewScopeOptions"
/>

<p class="notice-message">거절이유통지서 PDF를 분석 중입니다.</p>
<p class="error-message" role="alert">이메일 또는 비밀번호를 확인해주세요.</p>
<span class="file-chip"><v-icon small>mdi-file-pdf-box</v-icon> 의견제출통지서.pdf</span>

<nav class="workspace-nav" aria-label="ipvelo workspace menu">
  <button class="nav-item active" type="button">
    <v-icon small>mdi-trademark</v-icon>
    <span><strong>상표 검토</strong><small>유사 후보와 등록 가능성 확인</small></span>
  </button>
</nav>

<article class="dashboard-slot dashboard-slot--filled">
  <header class="widget-header">...</header>
  <div class="manager-kpi">42<span>건</span></div>
</article>
<div class="data-grid" role="table">...</div>

<section class="admin-list-panel">
  <div class="admin-list-toolbar">
    <label class="admin-list-search">
      <v-icon small>mdi-magnify</v-icon>
      <input type="search" placeholder="출원번호, 상표명, 출원인 또는 등록자 검색" />
    </label>
    <button class="admin-list-action" type="button">알림 추가</button>
  </div>
  <div class="admin-list-scroll">
    <div class="admin-list-table" role="table">
      <div class="admin-list-row admin-list-row--head" role="row">...</div>
      <div class="admin-list-row" role="row">
        <strong>40-2025-0120254</strong>
        <span class="class-chip">제44류</span>
        <em class="status-chip status-chip--info">출원</em>
        <DsSwitch compact aria-label="어드헤어 활성" />
      </div>
    </div>
  </div>
</section>

<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>PDF, HWP, DOCX, JPG, PNG 파일 지원</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" />

<section class="empty-state">
  <v-icon>mdi-database-off-outline</v-icon>
  <div><strong>아직 검토한 상표가 없습니다.</strong></div>
</section>
<v-progress-circular indeterminate size="32" color="primary" />