BizCopilot Design System

<DsButton variant="primary">다음 단계</DsButton>
<DsButton variant="secondary">임시 저장</DsButton>
<DsButton variant="ghost">이전</DsButton>
<DsButton variant="danger">삭제</DsButton>
<DsButton :loading="saving" loading-label="저장 중">저장</DsButton>

<DsField
  id="company-name"
  v-model="form.companyName"
  label="회사명"
  placeholder="회사명을 입력해주세요."
  help="사업자등록증과 같은 이름을 사용해주세요."
  :error="errors.companyName"
  required />

<DsField
  id="phone"
  v-model="form.phone"
  format="phone"
  label="전화번호"
  placeholder="010 0000 0000"
  inputmode="numeric"
  autocomplete="tel"
  required />

<DsField
  id="resident-number"
  v-model="form.residentNumber"
  format="resident-number"
  label="주민등록번호"
  inputmode="numeric"
  autocomplete="off"
  required />

<DsField id="idea" v-model="form.idea" label="아이디어 설명" multiline :rows="5" />

<DsPostcodeField
  id="postcode"
  v-model="form.zipcode"
  label="우편번호"
  help="검색 결과로 선택한 우편번호가 자동으로 입력됩니다."
  required
  @search="searchAddress" />

<DsFileUpload
  id="evidence-files"
  v-model="form.files"
  label="증빙 자료"
  accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
  :max-size-mb="10"
  multiple
  required
  @invalid="handleInvalidFile" />

<DsBadge tone="neutral" label="검토 전" dot />
<DsBadge tone="info" label="작성 중" dot />
<DsBadge tone="success" label="제출 완료" dot />
<DsBadge tone="warning" label="확인 필요" dot />
<DsBadge tone="danger" label="처리 실패" dot />

<DsButton @click="dialogOpen = true">Dialog 열기</DsButton>

<DsDialog
  id="save-data-dialog"
  v-model="dialogOpen"
  title="데이터 입력 확정"
  description="현재 데이터를 워크스페이스에 저장합니다."
  confirm-label="확정"
  cancel-label="취소"
  @confirm="saveData" />

<DsToast
  v-model="toastOpen"
  tone="success"
  message="저장이 완료되었습니다."
  action-label="확인"
  @action="toastOpen = false" />

// 전역 자동 닫기와 스택이 필요할 때
this.$toast.success("저장이 완료되었습니다.")

<DsButton :loading="generating" loading-label="AI 초안 생성 중">초안 생성</DsButton>
<DsButton :disabled="!canContinue" variant="ghost">선택 필요</DsButton>
<DsField
  id="phone"
  v-model="phone"
  format="phone"
  label="연락처"
  :error="phoneError"
  required />

<DsSkeleton :lines="4" label="문서 목록을 불러오는 중" />
<DsSkeleton variant="list-icon" :items="4" label="알림 목록을 불러오는 중" />
<DsSkeleton variant="list" :items="4" label="업무 목록을 불러오는 중" />
<DsSkeleton variant="card" :lines="3" label="출원 카드를 불러오는 중" />

<DsSkeleton
  variant="custom"
  :pattern="['title', 'subtitle', 'spacer:20', 'card', 'list-icon', 'list-icon']"
  label="대시보드를 불러오는 중" />

DOCUMENT GENERATION

문서 작성 중

입력한 내용을 분석해 출원에 필요한 문서를 구조화하고 있습니다.

AI 처리 중 · 잠시만 기다려주세요

DRAWING GENERATION

도면 생성 중

확정된 명세서를 바탕으로 이해하기 쉬운 특허 도면을 생성하고 있습니다.

AI 처리 중 · 잠시만 기다려주세요

<DsProcessLoading kind="document" />
<DsProcessLoading kind="drawing" />

<DsProcessLoading
  kind="document"
  title="명세서 작성 중"
  description="업로드한 자료를 분석해 명세서를 작성하고 있습니다." />

<DsEmptyState
  title="아직 등록된 출원이 없습니다"
  description="새 출원을 시작하면 진행 상태를 확인할 수 있습니다."
  primary-label="새 출원 시작"
  secondary-label="이용 가이드"
  @primary="startApplication"
  @secondary="openGuide" />