boottent-design 0.1.255 → 0.1.258

package/dist/design-system/components/camp-card.md

@@ -0,0 +1,58 @@
+# components/camp-card.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — camp-card.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## camp-card
+
+> camp-card 조합형 컴포넌트입니다.
+
+- **분류**: assets
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/camp-card";
+```
+
+### Props
+```typescript
+export type CampCardProps = ImageLoadingProps & {
+  brandName: string;
+  title: string;
+  batchName?: string;
+  imageUrl?: string | null;
+  imageAlt?: string;
+  tuitionText?: string;
+  locationText?: string;
+  scheduleText?: string;
+  startDate?: string | null;
+  endDate?: string | null;
+  period?: number | null;
+  tuition?: number | null;
+  earlyBirdTuition?: number | null;
+  earlyBirdEndDate?: string | null;
+  isFree?: boolean;
+  onoffText?: string | null;
+  cityLabels?: string[] | null;
+  offlineRequiredText?: string | null;
+  costOptionText?: string;
+  tags?: CampCardTag[];
+  statusBadge?: CampCardBadge;
+  adBadge?: CampCardBadge;
+  adTitle?: string;
+  isAd?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  bookmarkSlot?: React.ReactNode;
+  latestBatchSlot?: React.ReactNode;
+  imageOverlaySlot?: React.ReactNode;
+  imageWrapper?: (image: React.ReactNode) => React.ReactNode;
+}
+```
+
+> 시각 예시는 Storybook(`camp-card.stories.tsx`)을 참고하세요.

package/dist/design-system/components/company-info-card.md

@@ -0,0 +1,31 @@
+# components/company-info-card.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — company-info-card.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## company-info-card
+
+> company-info-card 조합형 컴포넌트입니다.
+
+- **분류**: assets
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/company-info-card";
+```
+
+### Props
+```typescript
+export type CompanyInfoCardProps = ImageLoadingProps & {
+  intro: CompanyInfoCardData;
+  roleText?: string;
+  descriptionId?: string;
+}
+```
+
+> 시각 예시는 Storybook(`company-info-card.stories.tsx`)을 참고하세요.

package/dist/design-system/components/environment-asset-photo.md

@@ -0,0 +1,31 @@
+# components/environment-asset-photo.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — environment-asset-photo.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## environment-asset-photo
+
+> environment-asset-photo 조합형 컴포넌트입니다.
+
+- **분류**: assets
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/environment-asset-photo";
+```
+
+### Props
+```typescript
+export type EnvironmentAssetPhotoProps = ImageLoadingProps & {
+  imageUrl: string;
+  index: number;
+  onClick: () => void;
+}
+```
+
+> 시각 예시는 Storybook(`environment-asset-photo.stories.tsx`)을 참고하세요.

package/dist/design-system/components/event-asset-banner.md

@@ -0,0 +1,30 @@
+# components/event-asset-banner.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — event-asset-banner.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## event-asset-banner
+
+> event-asset-banner 조합형 컴포넌트입니다.
+
+- **분류**: assets
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/event-asset-banner";
+```
+
+### Props
+```typescript
+export type EventAssetBannerProps = ImageLoadingProps & {
+  eventValue: EventAssetBannerData;
+  buttonClass?: string;
+}
+```
+
+> 시각 예시는 Storybook(`event-asset-banner.stories.tsx`)을 참고하세요.

package/dist/design-system/components/event-card.md

@@ -0,0 +1,39 @@
+# components/event-card.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — event-card.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## event-card
+
+> event-card 조합형 컴포넌트입니다.
+
+- **분류**: ads
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/event-card";
+```
+
+### Props
+```typescript
+export type EventCardProps = ImageLoadingProps & {
+  adProduct: string;
+  logo: string;
+  title: string;
+  batchName?: string;
+  adTitle: string;
+  isLoading?: boolean;
+  startDate: string;
+  tuition: number;
+  nbCardRequired: boolean;
+  regEndDate?: string;
+  className?: string;
+}
+```
+
+> 시각 예시는 Storybook(`event-card.stories.tsx`)을 참고하세요.

package/dist/design-system/components/lecturer-card.md

@@ -0,0 +1,37 @@
+# components/lecturer-card.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — lecturer-card.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## lecturer-card
+
+> lecturer-card 조합형 컴포넌트입니다.
+
+- **분류**: assets
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/lecturer-card";
+```
+
+### Props
+```typescript
+export type LecturerCardProps = ImageLoadingProps & {
+  keyPrefix: string;
+  lecturer: LecturerAssetCardData;
+  roleLabel: string;
+  isMobile: boolean;
+  isExpanded: boolean;
+  onToggleExpand: (index: number) => void;
+  description: string[];
+  idx: number;
+  numberOfLecturers: number;
+}
+```
+
+> 시각 예시는 Storybook(`lecturer-card.stories.tsx`)을 참고하세요.

package/dist/design-system/components/main-banner-image.md

@@ -0,0 +1,40 @@
+# components/main-banner-image.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — main-banner-image.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## main-banner-image
+
+> main-banner-image 조합형 컴포넌트입니다.
+
+- **분류**: ads
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/main-banner-image";
+```
+
+### Props
+```typescript
+type MainBannerImageProps = ImageLoadingProps & {
+  adKey: string;
+  filename: string;
+  title: string;
+  backgroundColor: string;
+  hideButton?: boolean;
+  buttonColors?: {
+    button: string;
+    buttonText: string;
+  };
+  linkType?: string;
+  isLoading?: boolean;
+  className?: string;
+}
+```
+
+> 시각 예시는 Storybook(`main-banner-image.stories.tsx`)을 참고하세요.

package/dist/design-system/components/mobile-camp-card.md

@@ -0,0 +1,60 @@
+# components/mobile-camp-card.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — mobile-camp-card.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## mobile-camp-card
+
+> mobile-camp-card 조합형 컴포넌트입니다.
+
+- **분류**: assets
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/mobile-camp-card";
+```
+
+### Props
+```typescript
+export type MobileCampCardProps = ImageLoadingProps & {
+  brandName: string;
+  title: string;
+  batchName?: string;
+  imageUrl?: string | null;
+  imageAlt?: string;
+  tuitionText?: string;
+  locationText?: string;
+  scheduleText?: string;
+  startDate?: string | null;
+  endDate?: string | null;
+  period?: number | null;
+  tuition?: number | null;
+  earlyBirdTuition?: number | null;
+  earlyBirdEndDate?: string | null;
+  isFree?: boolean;
+  onoffText?: string | null;
+  cityLabels?: string[] | null;
+  offlineRequiredText?: string | null;
+  costOptionText?: string;
+  tags?: CampCardTag[];
+  statusBadge?: CampCardBadge;
+  adBadge?: CampCardBadge;
+  adTitle?: string;
+  isAd?: boolean;
+  isShowRegTag?: boolean;
+  earlyBirdText?: React.ReactNode;
+  afterTuitionText?: React.ReactNode;
+  govtCostText?: React.ReactNode;
+  height?: string | number;
+  className?: string;
+  bookmarkSlot?: React.ReactNode;
+  imageOverlaySlot?: React.ReactNode;
+}
+```
+
+> 시각 예시는 Storybook(`mobile-camp-card.stories.tsx`)을 참고하세요.

package/dist/design-system/components/partner-list-card.md

@@ -0,0 +1,31 @@
+# components/partner-list-card.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — partner-list-card.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## partner-list-card
+
+> partner-list-card 조합형 컴포넌트입니다.
+
+- **분류**: assets
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/partner-list-card";
+```
+
+### Props
+```typescript
+export type PartnerListCardProps = ImageLoadingProps & {
+  introductionData: PartnerListCardData;
+  updatedContents?: number;
+  openBatchs?: number;
+}
+```
+
+> 시각 예시는 Storybook(`partner-list-card.stories.tsx`)을 참고하세요.

package/dist/design-system/components/portfolio-asset-card.md

@@ -0,0 +1,30 @@
+# components/portfolio-asset-card.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — portfolio-asset-card.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## portfolio-asset-card
+
+> portfolio-asset-card 조합형 컴포넌트입니다.
+
+- **분류**: assets
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/portfolio-asset-card";
+```
+
+### Props
+```typescript
+export type PortfolioAssetCardProps = ImageLoadingProps & {
+  portfolio: PortfolioAssetCardData;
+  isYoutube?: boolean;
+}
+```
+
+> 시각 예시는 Storybook(`portfolio-asset-card.stories.tsx`)을 참고하세요.

package/dist/design-system/components/premium-card.md

@@ -0,0 +1,39 @@
+# components/premium-card.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — premium-card.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## premium-card
+
+> premium-card 조합형 컴포넌트입니다.
+
+- **분류**: ads
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/premium-card";
+```
+
+### Props
+```typescript
+export type PremiumCardProps = ImageLoadingProps & {
+  logo: string;
+  title: string;
+  subtitle: string;
+  thumbnail: string;
+  batchTitle: string;
+  batchName?: string;
+  brandName: string;
+  startDate: string;
+  tuition: number;
+  isLoading?: boolean;
+  className?: string;
+}
+```
+
+> 시각 예시는 Storybook(`premium-card.stories.tsx`)을 참고하세요.

package/dist/design-system/components/title-tag-card.md

@@ -0,0 +1,38 @@
+# components/title-tag-card.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — title-tag-card.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## title-tag-card
+
+> title-tag-card 조합형 컴포넌트입니다.
+
+- **분류**: ads
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/title-tag-card";
+```
+
+### Props
+```typescript
+export type TitleTagCardProps = ImageLoadingProps & {
+  coverImage: string;
+  brandName: string;
+  title: string;
+  batchName?: string;
+  titleTagType?: string;
+  adTitle?: string;
+  changedAspect?: string;
+  tags?: string[];
+  isLoading?: boolean;
+  className?: string;
+}
+```
+
+> 시각 예시는 Storybook(`title-tag-card.stories.tsx`)을 참고하세요.

package/dist/design-system/components/youtube-video-modal.md

@@ -0,0 +1,34 @@
+# components/youtube-video-modal.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> 조합형 컴포넌트 — youtube-video-modal.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## youtube-video-modal
+
+> youtube-video-modal 조합형 컴포넌트입니다.
+
+- **분류**: assets
+- **성격**: presentational (내비게이션·모달 상태·DTO는 소비자가 소유 — [usage.md](../usage.md) §5)
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/components/youtube-video-modal";
+```
+
+### Props
+```typescript
+export type YoutubeVideoModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  url?: string | null;
+  title?: string;
+  autoPlay?: boolean;
+  className?: string;
+}
+```
+
+> 시각 예시는 Storybook(`youtube-video-modal.stories.tsx`)을 참고하세요.

package/dist/design-system/design-system.md

@@ -0,0 +1,138 @@
+# design-system.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> boottent-design 허브 — 먼저 이 문서를 읽고 필요한 스포크 문서로 이동하라.
+> 버전: boottent-design v0.1.257 · 생성: 2026. 6. 11. 오후 4:37:12
+
+## 0. 원칙 (먼저 읽어라)
+
+boottent-design은 모든 소비 앱의 **단일 진실 원천(SSOT)** 이다. UI를 만들 때 다음을 지켜라.
+
+1. **DS 우선**: 새 UI는 아래 [인벤토리](#4-인벤토리)에서 **먼저 찾아라.** DS에 있으면 그것을 쓰고, 없을 때만 조합/확장한다. 임의의 새 컴포넌트·라이브러리를 만들지 마라.
+2. **토큰 우선**: 색·타이포·간격은 반드시 토큰(Tailwind 클래스: `text-main-500`, `bg-grey-100`, `text-semibold14`)을 쓴다. `#hex`·임의 px 값을 직접 쓰지 마라.
+3. **variant 우선**: 커스텀 CSS를 작성하기 전에 컴포넌트의 `variant`/`size`/`theme` props로 해결되는지 확인하라. 클래스 조합은 `cn()`을 쓴다.
+4. **deep import**: `boottent-design/ui/button`처럼 deep import를 쓴다(배럴 import 지양).
+5. **헷갈리면**: 어떤 컴포넌트를 쓸지 모르겠으면 [when-to-use.md](./when-to-use.md)를 먼저 보라.
+
+## 1. 이 라이브러리는 무엇인가
+
+`boottent-design`은 [boottent.com](https://boottent.com)의 React 18 디자인 시스템 라이브러리다.
+컴포넌트는 **presentational** 원칙을 따른다(앱 내비게이션·라우팅·데이터 fetching을 내장하지 않음 — [usage.md](./usage.md) 참조).
+
+## 2. 네비게이션 가이드 — 무엇이 궁금한가 → 어디를 읽어라
+
+| 궁금한 것 | 읽을 문서 |
+|-----------|-----------|
+| 뭘 쓸 수 있나 / import 경로 | (이 허브) [인벤토리](#4-인벤토리) |
+| 어떤 상황에 뭘 쓰나 | [when-to-use.md](./when-to-use.md) |
+| 특정 컴포넌트의 props·variants·예시 | `ui/<name>.md` · `components/<name>.md` |
+| 색·타이포·간격 값 | [tokens.md](./tokens.md) |
+| 설치 · CSS 모드 · 소비 규칙 | [usage.md](./usage.md) |
+| 우리 앱 전용 디자인 확장 규칙 | (소비처) `../design.md` |
+
+## 3. 레이어 구조
+
+| 레이어 | 위치 | 설명 |
+|--------|------|------|
+| UI 프리미티브 | `boottent-design/ui/*` | shadcn/Radix 기반 기본 컴포넌트 |
+| 조합형 컴포넌트 | `boottent-design/components/*` | 프로덕트 특화 카드/배너 (ads · assets) |
+| 디자인 토큰 | `boottent-design/tokens` | colors · typography · ads · camps |
+
+## 4. 인벤토리
+
+### 4.1 UI 프리미티브 (44종)
+
+| 컴포넌트 | 설명 | 문서 |
+|----------|------|------|
+| `accordion` | 콘텐츠를 접었다 펼 수 있게 하여 공간을 효율적으로 활용하는 아코디언 컴포넌트입니다. | [ui/accordion.md](./ui/accordion.md) |
+| `alert-dialog` | 사용자의 확인이 반드시 필요한 중요한 정보를 전달하거나 결정을 요구할 때 사용하는 모달형 대화상자입니다. | [ui/alert-dialog.md](./ui/alert-dialog.md) |
+| `anchor` | 텍스트나 이미지에 하이퍼링크를 적용하여 외부 웹사이트나 내부 페이지로 이동하게 하는 컴포넌트입니다. | [ui/anchor.md](./ui/anchor.md) |
+| `aspect-ratio` | 콘텐츠(이미지, 비디오 등)의 가로세로 비율을 고정하여 레이아웃이 깨지지 않게 보장하는 컴포넌트입니다. | [ui/aspect-ratio.md](./ui/aspect-ratio.md) |
+| `avatar` | 사용자의 프로필 이미지나 이니셜을 원형 또는 사각형 프레임 안에 보여주는 컴포넌트입니다. | [ui/avatar.md](./ui/avatar.md) |
+| `badge` | 강조하고자 하는 상태, 카테고리, 태그 등을 표시하는 배지 컴포넌트입니다. | [ui/badge.md](./ui/badge.md) |
+| `button` | 다양한 환경에서 사용자의 액션을 유도하는 핵심 버튼 컴포넌트입니다. | [ui/button.md](./ui/button.md) |
+| `calendar` | 날짜를 시각적으로 보여주고 사용자가 특정 날짜 또는 날짜 범위를 선택할 수 있게 하는 달력 컴포넌트입니다. | [ui/calendar.md](./ui/calendar.md) |
+| `callout` | 정보, 경고, 힌트 등 사용자에게 추가적인 맥락이나 주의사항을 전달할 때 사용하는 박스형 컴포넌트입니다. | [ui/callout.md](./ui/callout.md) |
+| `card` | 관련 정보나 콘텐츠를 하나의 독립된 상자 형태로 묶어 보여주는 카드 컴포넌트입니다. | [ui/card.md](./ui/card.md) |
+| `checkbox` | 사용자가 하나 이상의 옵션을 선택할 수 있게 하는 체크박스 컴포넌트입니다. | [ui/checkbox.md](./ui/checkbox.md) |
+| `circled-check-button` | 이미지나 카드 위에 겹쳐서 표시하며, 선택 상태를 시각적으로 나타내는 원형 체크 버튼 컴포넌트입니다. | [ui/circled-check-button.md](./ui/circled-check-button.md) |
+| `command` | 명령어 입력, 검색, 리스트 선택 등을 하나의 인터페이스에서 처리할 수 있는 강력한 커맨드 메뉴 컴포넌… | [ui/command.md](./ui/command.md) |
+| `dialog` | 현재 페이지 위에 겹쳐서 나타나는 대화상자(모달) 컴포넌트입니다. | [ui/dialog.md](./ui/dialog.md) |
+| `dropdown-menu` | 클릭이나 호버 시 사용자에게 액션 목록이나 하위 메뉴를 보여주는 드롭다운 컴포넌트입니다. | [ui/dropdown-menu.md](./ui/dropdown-menu.md) |
+| `file-uploader` | 드래그 앤 드롭 또는 파일 선택 창을 통해 하나 이상의 파일을 업로드할 수 있게 하는 컴포넌트입니다. | [ui/file-uploader.md](./ui/file-uploader.md) |
+| `form` | react-hook-form과 연동하여 입력 데이터의 유효성을 검증하고 에러를 표시하는 정밀한 폼 제어… | [ui/form.md](./ui/form.md) |
+| `highlight-text` | 텍스트의 하단에 형광펜으로 칠한 듯한 하이라이트 효과를 주는 컴포넌트입니다. | [ui/highlight-text.md](./ui/highlight-text.md) |
+| `icons` | — | [ui/icons.md](./ui/icons.md) |
+| `image` | 기본적인 img 태그를 확장하여 레이지 로딩, 크기 제어, object-fit 등을 편리하게 관리하는 … | [ui/image.md](./ui/image.md) |
+| `input` | 사용자로부터 텍스트 입력을 받는 기본적인 텍스트 필드 컴포넌트입니다. | [ui/input.md](./ui/input.md) |
+| `label` | 폼 요소(Input, Checkbox 등)의 이름이나 설명을 나타내는 라벨 컴포넌트입니다. | [ui/label.md](./ui/label.md) |
+| `month-picker` | 사용자가 특정 '연도-월' 단위를 편리하게 선택할 수 있게 하는 월 선택 컴포넌트입니다. | [ui/month-picker.md](./ui/month-picker.md) |
+| `multi-select` | 여러 개의 옵션을 검색하고 칩(Badge) 형태로 다중 선택할 수 있는 컴포넌트입니다. | [ui/multi-select.md](./ui/multi-select.md) |
+| `navigation-menu` | 웹사이트 전반에 걸친 상위 내비게이션 구조를 제공하며, 호버 시 하위 메뉴를 시각적으로 풍부하게 보여주… | [ui/navigation-menu.md](./ui/navigation-menu.md) |
+| `popover` | 클릭이나 클릭 이외의 트리거로 인해 요소 근처에 부유하는 콘텐츠 박스를 보여주는 컴포넌트입니다. | [ui/popover.md](./ui/popover.md) |
+| `progress` | 작업의 완료율이나 진행 상태를 시각적으로 보여주는 프로그레스 바 컴포넌트입니다. | [ui/progress.md](./ui/progress.md) |
+| `radio-group` | 여러 옵션 중 하나만 선택할 수 있게 하는 라디오 버튼 그룹 컴포넌트입니다. | [ui/radio-group.md](./ui/radio-group.md) |
+| `scroll-area` | 브라우저 기본 스크롤바 대신 커스터마이징 가능한 세련된 스크롤바를 제공하는 컴포넌트입니다. | [ui/scroll-area.md](./ui/scroll-area.md) |
+| `select` | 사용자에게 여러 옵션 중 하나를 선택할 수 있는 드롭다운 메뉴를 제공하는 컴포넌트입니다. | [ui/select.md](./ui/select.md) |
+| `separator` | 콘텐츠 사이의 경계를 시각적으로 구분하는 수평 또는 수직 구분선 컴포넌트입니다. | [ui/separator.md](./ui/separator.md) |
+| `simple-table` | 데이터의 라벨(키)과 콘텐츠(값)를 1:1 대응하여 깔끔하게 보여주는 요약 표 컴포넌트입니다. | [ui/simple-table.md](./ui/simple-table.md) |
+| `skeleton` | 실제 콘텐츠가 로드되기 전, 해당 영역의 형태를 미리 보여주어 사용자에게 로딩 중임을 시각적으로 알리는… | [ui/skeleton.md](./ui/skeleton.md) |
+| `slider` | 사용자가 범위를 드래그하여 수치를 선택할 수 있게 하는 슬라이더 컴포넌트입니다. | [ui/slider.md](./ui/slider.md) |
+| `switch` | 상태를 즉시 On/Off로 전환할 때 사용하는 스위치(토글) 컴포넌트입니다. | [ui/switch.md](./ui/switch.md) |
+| `symbols` | — | [ui/symbols.md](./ui/symbols.md) |
+| `tabs` | 한 공간 내에서 서로 연관된 여러 개의 콘텐츠를 탭으로 구분하여 보여주는 컴포넌트입니다. | [ui/tabs.md](./ui/tabs.md) |
+| `tag` | 카테고리, 상태, 속성 등을 나타내는 작은 레이블 컴포넌트입니다. Badge보다 더 다양한 색상과 아이… | [ui/tag.md](./ui/tag.md) |
+| `text` | 텍스트의 의미(강조, 보조, 에러 등)에 따라 스타일을 적용하는 타이포그래피 기반 유틸리티 컴포넌트입니다. | [ui/text.md](./ui/text.md) |
+| `textarea` | 여러 줄의 텍스트를 입력받는 기본 텍스트에어리어 컴포넌트입니다. | [ui/textarea.md](./ui/textarea.md) |
+| `toast` | 사용자에게 짧고 간결한 피드백 메시지를 제공하는 알림 컴포넌트입니다. | [ui/toast.md](./ui/toast.md) |
+| `toggle` | 켜짐/꺼짐 두 가지 상태를 전환하는 단일 토글 버튼 컴포넌트입니다. | [ui/toggle.md](./ui/toggle.md) |
+| `toggle-group` | 여러 개의 Toggle 버튼을 단일(single) 또는 다중(multiple) 선택 그룹으로 묶는 컴포… | [ui/toggle-group.md](./ui/toggle-group.md) |
+| `tooltip` | 요소에 마우스를 올렸을 때 나타나는 툴팁 컴포넌트입니다. 방향·색상·크기·말풍선 꼬리를 지원합니다. | [ui/tooltip.md](./ui/tooltip.md) |
+
+### 4.2 조합형 컴포넌트 (15종)
+
+| 컴포넌트 | 분류 | 문서 |
+|----------|------|------|
+| `article-asset-card` | assets | [components/article-asset-card.md](./components/article-asset-card.md) |
+| `blog-review-card` | assets | [components/blog-review-card.md](./components/blog-review-card.md) |
+| `camp-card` | assets | [components/camp-card.md](./components/camp-card.md) |
+| `company-info-card` | assets | [components/company-info-card.md](./components/company-info-card.md) |
+| `environment-asset-photo` | assets | [components/environment-asset-photo.md](./components/environment-asset-photo.md) |
+| `event-asset-banner` | assets | [components/event-asset-banner.md](./components/event-asset-banner.md) |
+| `event-card` | ads | [components/event-card.md](./components/event-card.md) |
+| `lecturer-card` | assets | [components/lecturer-card.md](./components/lecturer-card.md) |
+| `main-banner-image` | ads | [components/main-banner-image.md](./components/main-banner-image.md) |
+| `mobile-camp-card` | assets | [components/mobile-camp-card.md](./components/mobile-camp-card.md) |
+| `partner-list-card` | assets | [components/partner-list-card.md](./components/partner-list-card.md) |
+| `portfolio-asset-card` | assets | [components/portfolio-asset-card.md](./components/portfolio-asset-card.md) |
+| `premium-card` | ads | [components/premium-card.md](./components/premium-card.md) |
+| `title-tag-card` | ads | [components/title-tag-card.md](./components/title-tag-card.md) |
+| `youtube-video-modal` | assets | [components/youtube-video-modal.md](./components/youtube-video-modal.md) |
+
+### 4.3 디자인 토큰 (4개 도메인) → [tokens.md](./tokens.md)
+
+| 도메인 | 주요 export |
+|--------|-------------|
+| `ads` | `adProducts`, `defaultBannerColor` |
+| `camps` | `campCategoryColors` |
+| `colors` | `colors` |
+| `typography` | `typography`, `fontWeight`, `FontSize` |
+
+## 5. import 경로 맵
+
+```txt
+# 배럴 (호환용 — 성능상 deep import 권장)
+boottent-design/ui
+boottent-design/components
+boottent-design/tokens
+
+# 스타일 / Tailwind 통합
+boottent-design/styles.css
+boottent-design/foundation.css
+boottent-design/tailwind-preset
+
+# deep import 예
+boottent-design/ui/button
+boottent-design/components/camp-card
+```