Design System Guide

// React/Next.js
<Button variant="primary" size="md">버튼</Button>

// Angular (동일한 클래스)
<button class="inline-flex items-center justify-center font-medium transition-colors
  bg-primary-900 hover:bg-primary-800 text-white px-4 py-2 text-base">
  버튼
</button>

// Input
<Input label="이메일" placeholder="example@email.com" />

// Select
<Select label="과일" options={[{ value: "apple", label: "사과" }]} value={v} onChange={setV} />

// Password / Number / Date
<PasswordInput label="비밀번호" />
<NumberInput label="수량" value={n} onChange={setN} min={0} />
<DateInput label="예약 날짜" />

// Checkbox
<Checkbox label="동의합니다" checked={c} onChange={(e) => setC(e.target.checked)} />

// Radio
<RadioGroup name="opt" value={v} onChange={setV} options={[{ value: "a", label: "A" }]} />

// Toggle
<Toggle label="알림" checked={t} onChange={(e) => setT(e.target.checked)} />

// FileUpload
<FileUpload
  label="이미지"
  accept="image/*"
  multiple
  maxSize={5 * 1024 * 1024}
  onChange={(files) => console.log(files)}
/>

// React/Next.js
<Card variant="elevated" padding="md">내용</Card>

// Angular (동일한 클래스)
<div class="bg-white border border-gray-200 shadow-sm p-6">내용</div>

// React/Next.js
<Badge variant="success">완료</Badge>

// Angular (동일한 클래스)
<span class="inline-flex items-center font-medium bg-success-500 text-white px-2.5 py-0.5 text-sm">
  완료
</span>

// Underline (기본)
<Tabs defaultValue="tab1">
  ...
</Tabs>

// Button
<Tabs defaultValue="tab1" variant="button">
  ...
</Tabs>

// Large (전체 너비, 중앙 정렬)
<Tabs defaultValue="tab1" size="lg">
  ...
</Tabs>

// Button + Large
<Tabs defaultValue="tab1" variant="button" size="lg">
  ...
</Tabs>

// 반응형 (모바일에서 컬럼 숨기기)
<TableHead hideOnMobile>연락처</TableHead>
<TableCell hideOnMobile>010-1234-5678</TableCell>

// 정렬
<TableSortHead
  sortDirection={sortKey === "name" ? sortDirection : null}
  onSort={() => handleSort("name")}
>
  이름
</TableSortHead>

// 체크박스 선택
<TableRow selected={selectedRows.includes(id)}>
  <TableCell>
    <TableCheckbox
      checked={selectedRows.includes(id)}
      indeterminate={isIndeterminate}
      onChange={() => toggle(id)}
    />
  </TableCell>
</TableRow>

// colSpan (빈 결과)
<TableCell colSpan={3}>결과 없음</TableCell>

<Pagination
  currentPage={currentPage}
  totalPages={20}
  onPageChange={setCurrentPage}
  siblingCount={1} // 현재 페이지 좌우로 표시할 페이지 수
/>

// React/Next.js
<Tooltip content="툴팁 내용" position="top">
  <Button>호버하세요</Button>
</Tooltip>

// 복잡한 콘텐츠
<Tooltip
  content={
    <div>
      <p className="font-semibold">제목</p>
      <p className="text-xs">설명</p>
    </div>
  }
>
  <span>호버하세요</span>
</Tooltip>

// Alert
<Alert
  isOpen={showAlert}
  onClose={() => setShowAlert(false)}
  title="알림"
  message="작업이 완료되었습니다."
/>

// Confirm
<Confirm
  isOpen={showConfirm}
  onClose={() => setShowConfirm(false)}
  onConfirm={() => handleConfirm()}
  title="확인"
  message="진행하시겠습니까?"
  variant="danger" // optional
/>

// Toast
<Toast
  isOpen={showToast}
  onClose={() => setShowToast(false)}
  message="저장되었습니다."
  variant="success"
  duration={3000}
  position="top-right"
/>

// ImagePopup
<ImagePopup
  isOpen={showImagePopup}
  onClose={() => setShowImagePopup(false)}
  src="/image.jpg"
  alt="이미지 설명"
/>

// 스피너
<Spinner size="md" variant="primary" />
<Spinner size="lg" label="로딩 중..." />

// 스피너 오버레이
<div className="relative">
  <Content />
  <SpinnerOverlay isVisible={isLoading} label="불러오는 중..." />
</div>

// 버튼 로딩
<Button disabled>
  <Spinner size="sm" variant="white" />
  저장 중...
</Button>

// 스켈레톤
<Skeleton width={200} height={20} />
<Skeleton variant="circular" width={40} height={40} />
<SkeletonCard hasImage />
<SkeletonTable rows={5} columns={4} />