@xfilecom/front-core 0.2.28 → 0.2.31

package/dist/showcase.css

@@ -0,0 +1,235 @@
+/**
+ * @xfilecom/front-core — 디자인 시스템 쇼케이스 (npm: @xfilecom/front-core/showcase.css)
+ */
+
+.xfc-ds {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--xfc-space-xl);
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 0 var(--xfc-space-lg) var(--xfc-space-2xl);
+}
+
+.xfc-ds-nav {
+  position: sticky;
+  top: var(--xfc-space-md);
+  flex: 0 0 200px;
+  max-height: calc(100dvh - var(--xfc-space-xl));
+  overflow: auto;
+  padding: var(--xfc-space-md);
+  border-radius: var(--xfc-radius-md);
+  background: var(--xfc-bg-elevated);
+  border: 1px solid var(--xfc-border);
+  box-shadow: var(--xfc-shadow-xs);
+}
+
+.xfc-ds-nav-title {
+  margin: 0 0 var(--xfc-space-sm);
+  font-size: var(--xfc-text-small);
+  font-weight: 700;
+  color: var(--xfc-fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.xfc-ds-nav-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.xfc-ds-nav-list li {
+  margin: 0;
+}
+
+.xfc-ds-nav-link {
+  display: block;
+  padding: var(--xfc-space-xs) var(--xfc-space-sm);
+  margin: 2px 0;
+  font-size: var(--xfc-text-small);
+  font-weight: 500;
+  color: var(--xfc-fg-label);
+  text-decoration: none;
+  border-radius: var(--xfc-radius-xs);
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.xfc-ds-nav-link:hover {
+  background: var(--xfc-accent-soft);
+  color: var(--xfc-accent);
+}
+
+.xfc-ds-main {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.xfc-ds-section {
+  scroll-margin-top: var(--xfc-space-xl);
+  margin-bottom: var(--xfc-space-2xl);
+}
+
+.xfc-ds-section-head {
+  margin-bottom: var(--xfc-space-md);
+  padding-bottom: var(--xfc-space-sm);
+  border-bottom: 1px solid var(--xfc-border);
+}
+
+.xfc-ds-section-lead {
+  margin: 0 0 var(--xfc-space-lg);
+  font-size: var(--xfc-text-small);
+  line-height: 1.55;
+  color: var(--xfc-fg-muted);
+  max-width: 52rem;
+}
+
+.xfc-ds-demo-grid {
+  display: grid;
+  gap: var(--xfc-space-lg);
+  margin-top: var(--xfc-space-md);
+}
+
+@media (min-width: 720px) {
+  .xfc-ds-demo-grid--2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.xfc-ds-demo {
+  margin-bottom: var(--xfc-space-lg);
+  border: 1px solid var(--xfc-border);
+  border-radius: var(--xfc-radius-md);
+  background: var(--xfc-bg-elevated);
+  box-shadow: var(--xfc-shadow-xs);
+  overflow: hidden;
+}
+
+.xfc-ds-demo:last-child {
+  margin-bottom: 0;
+}
+
+.xfc-ds-demo__header {
+  padding: var(--xfc-space-md) var(--xfc-space-lg);
+  border-bottom: 1px solid var(--xfc-border);
+  background: linear-gradient(180deg, var(--xfc-bg-muted) 0%, var(--xfc-bg-elevated) 100%);
+}
+
+.xfc-ds-demo__title {
+  margin: 0;
+  font-size: var(--xfc-text-small);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--xfc-fg-label);
+}
+
+.xfc-ds-demo__desc {
+  margin-top: var(--xfc-space-xs);
+  font-size: var(--xfc-text-small);
+  line-height: 1.5;
+  color: var(--xfc-fg-muted);
+}
+
+.xfc-ds-demo__preview {
+  padding: var(--xfc-space-lg);
+  background: var(--xfc-bg);
+  min-height: 3rem;
+}
+
+.xfc-ds-demo__details {
+  border-top: 1px solid var(--xfc-border);
+}
+
+.xfc-ds-demo__summary {
+  list-style: none;
+  cursor: pointer;
+  padding: var(--xfc-space-sm) var(--xfc-space-lg);
+  font-size: var(--xfc-text-small);
+  font-weight: 600;
+  color: var(--xfc-accent);
+  background: var(--xfc-bg-elevated);
+  transition: background 0.15s ease;
+}
+
+.xfc-ds-demo__summary::-webkit-details-marker {
+  display: none;
+}
+
+.xfc-ds-demo__summary::before {
+  content: '';
+  display: inline-block;
+  width: 0.35em;
+  height: 0.35em;
+  margin-right: var(--xfc-space-sm);
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+  vertical-align: 0.15em;
+  transition: transform 0.2s ease;
+}
+
+details[open] > .xfc-ds-demo__summary::before {
+  transform: rotate(45deg);
+  vertical-align: 0.05em;
+}
+
+.xfc-ds-demo__summary:hover {
+  background: var(--xfc-accent-soft);
+}
+
+.xfc-ds-demo__code {
+  padding: 0 var(--xfc-space-lg) var(--xfc-space-lg);
+  background: var(--xfc-bg-muted);
+}
+
+.xfc-ds-code-wrap--embedded .xfc-ds-code {
+  margin-top: var(--xfc-space-sm);
+}
+
+.xfc-ds-code-wrap .xfc-ds-code-caption {
+  margin-top: var(--xfc-space-sm);
+}
+
+.xfc-ds-code {
+  margin: var(--xfc-space-md) 0 0;
+  padding: var(--xfc-space-md) var(--xfc-space-lg);
+  font-family: var(--xfc-font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--xfc-fg-label);
+  background: var(--xfc-bg-muted);
+  border: 1px solid var(--xfc-border);
+  border-radius: var(--xfc-radius-sm);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.xfc-ds-code-caption {
+  margin: 0 0 var(--xfc-space-xs);
+  font-size: var(--xfc-text-small);
+  font-weight: 600;
+  color: var(--xfc-fg-muted);
+}
+
+.xfc-ds-paper-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--xfc-space-md);
+  align-items: flex-start;
+}
+
+@media (max-width: 840px) {
+  .xfc-ds {
+    flex-direction: column;
+    padding-inline: var(--xfc-space-md);
+  }
+
+  .xfc-ds-nav {
+    position: relative;
+    top: 0;
+    flex: none;
+    width: 100%;
+    max-height: none;
+  }
+}

package/docs/COMPONENTS.md

@@ -94,6 +94,32 @@ import { Card, Button } from '@xfilecom/front-core';
 
 커스텀 모달에 동일한 스크롤 잠금·포커스 트랩을 쓰려면 [overlayHooks.ts](../src/components/overlays/overlayHooks.ts)의 `useFocusTrap`, `useBodyScrollLock`, `useEscapeKey`를 루트에서 import 한다.
 
+## shadcn/ui 스타일 원자
+
+[SHADCN.md](./SHADCN.md)에 **전체 매핑표**(캘린더·콤보박스 등 앱 의존 항목 포함)가 있다. 아래는 패키지에 포함된 대응 컴포넌트 요약.
+
+| 이름 | 소스 |
+|------|------|
+| `Separator` | [atoms/Separator.tsx](../src/components/atoms/Separator.tsx) |
+| `Skeleton` | [atoms/Skeleton.tsx](../src/components/atoms/Skeleton.tsx) |
+| `Label` | [atoms/Label.tsx](../src/components/atoms/Label.tsx) |
+| `Switch` | [atoms/Switch.tsx](../src/components/atoms/Switch.tsx) |
+| `Progress` | [atoms/Progress.tsx](../src/components/atoms/Progress.tsx) |
+| `Tabs` · `TabsList` · `TabsTrigger` · `TabsContent` | [atoms/Tabs.tsx](../src/components/atoms/Tabs.tsx) |
+| `Accordion` · … | [atoms/Accordion.tsx](../src/components/atoms/Accordion.tsx) |
+| `Alert` · `AlertTitle` · `AlertDescription` | [atoms/Alert.tsx](../src/components/atoms/Alert.tsx) |
+| `Avatar` · `AvatarImage` · `AvatarFallback` · `AvatarAuto` | [atoms/Avatar.tsx](../src/components/atoms/Avatar.tsx) |
+| `Breadcrumb` · … | [atoms/Breadcrumb.tsx](../src/components/atoms/Breadcrumb.tsx) |
+| `Table` · … | [atoms/Table.tsx](../src/components/atoms/Table.tsx) |
+| `ScrollArea` | [atoms/ScrollArea.tsx](../src/components/atoms/ScrollArea.tsx) |
+| `Toggle` | [atoms/Toggle.tsx](../src/components/atoms/Toggle.tsx) |
+| `RadioGroup` · `RadioGroupItem` | [atoms/RadioGroup.tsx](../src/components/atoms/RadioGroup.tsx) |
+| `AspectRatio` | [atoms/AspectRatio.tsx](../src/components/atoms/AspectRatio.tsx) |
+| `Tooltip` | [atoms/Tooltip.tsx](../src/components/atoms/Tooltip.tsx) |
+| `Collapsible` · … | [atoms/Collapsible.tsx](../src/components/atoms/Collapsible.tsx) |
+| `Slider` | [atoms/Slider.tsx](../src/components/atoms/Slider.tsx) |
+| `Pagination` · … | [atoms/Pagination.tsx](../src/components/atoms/Pagination.tsx) |
+
 ## CSS
 
 | 파일 | 용도 |

package/docs/SHADCN.md

@@ -0,0 +1,66 @@
+# shadcn/ui 대응표
+
+[shadcn/ui](https://ui.shadcn.com/)는 **Radix UI + Tailwind** 기반의 복사-붙여넣기 컴포넌트 모음이다. `@xfilecom/front-core`는 **Radix·Tailwind 없이** 동일한 **역할·이름에 가까운** API를 토큰(`--xfc-*`) + `base.css`로 제공한다. 고급 포지셔닝(드롭다운 앵커, 날짜 그리드 등)은 앱에서 전용 라이브러리를 쓰는 것을 권장한다.
+
+## 컴포넌트 매핑
+
+| shadcn | front-core | 비고 |
+|--------|------------|------|
+| Accordion | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` | single 전용; multiple는 추후 확장 가능 |
+| Alert | `Alert`, `AlertTitle`, `AlertDescription` | |
+| Alert Dialog | `ConfirmDialog` | 문구·버튼 props로 조합 |
+| Aspect Ratio | `AspectRatio` | |
+| Avatar | `Avatar`, `AvatarImage`, `AvatarFallback`, `AvatarAuto` | 이미지+대체는 `AvatarAuto` 권장 |
+| Badge | `Badge` | tone API는 shadcn과 다름 |
+| Breadcrumb | `Breadcrumb`, `BreadcrumbList`, … | |
+| Button | `Button` | variant 이름 다름 (`primary` 등) |
+| Calendar | — | 앱에서 `react-day-picker` 등 |
+| Card | `Card`, `Paper` | `Card`는 헤더/푸터 패턴 |
+| Carousel | — | 앱에서 embla 등 |
+| Chart | — | 앱에서 recharts 등 |
+| Checkbox | `Checkbox` | |
+| Collapsible | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` | |
+| Combobox | — | `Select` + 앱 로직 또는 외부 라이브러리 |
+| Command | — | 앱에서 cmdk 등 |
+| Context Menu | — | 앱에서 Radix 등 |
+| Data Table | `Table` + 앱 | 정렬·페이지네이션은 앱 상태 |
+| Date Picker | — | 앱에서 date 라이브러리 |
+| Dialog | `Dialog` | |
+| Drawer | `BottomSheet` | 모바일 퍼스트 시트 |
+| Dropdown Menu | — | 앱에서 Radix Menu 등 |
+| Form | `Field` + 앱 검증 | react-hook-form 등과 조합 |
+| Hover Card | — | `Tooltip` 단순 버전 또는 Radix |
+| Input | `Input` | |
+| Input OTP | — | 앱 전용 |
+| Label | `Label` | `Field`와 병행 가능 |
+| Menubar | — | |
+| Navigation Menu | — | |
+| Pagination | `Pagination`, `PaginationContent`, `PaginationLink`, … | |
+| Popover | — | `Dialog` 소형 또는 Radix |
+| Progress | `Progress` | |
+| Radio Group | `RadioGroup`, `RadioGroupItem` | |
+| Resizable | — | |
+| Scroll Area | `ScrollArea` | 네이티브 스크롤 |
+| Select | `Select` | 네이티브 `<select>` 스타일 |
+| Separator | `Separator` | |
+| Sheet | `BottomSheet` / `Dialog` | |
+| Skeleton | `Skeleton` | |
+| Slider | `Slider` | 네이티브 `range` |
+| Sonner / Toast | `Toast`, `ToastList` | |
+| Switch | `Switch` | |
+| Table | `Table`, `TableHeader`, `TableBody`, … | |
+| Tabs | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | |
+| Textarea | `Textarea` | |
+| Toggle | `Toggle` | |
+| Toggle Group | — | `Toggle` 여러 개 + 앱 상태 |
+| Tooltip | `Tooltip` | 인라인 단순 툴팁 |
+
+## 스타일·접근성
+
+- 포커스 링: `base.css`의 `--xfc-focus-ring` 계열.
+- 다크: `tokens.css` — `html.dark` / `data-theme="dark"`.
+- shadcn과 **클래스 이름은 다름** — 마이그레이션 시 JSX만 교체하고 앱 `app.css`에서 보정한다.
+
+## 소스 위치
+
+신규 원자는 `src/components/atoms/*.tsx` (예: `Tabs.tsx`, `Table.tsx`). 스타일은 `src/base.css`의 **shadcn/ui-style primitives** 블록.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfilecom/front-core",
-  "version": "0.2.28",
+  "version": "0.2.31",
   "description": "Shared design tokens, base CSS, and atomic React components (browser-only; no Nest dependency)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,12 @@
     "./overlays": {
       "types": "./dist/components/overlays/index.d.ts",
       "default": "./dist/components/overlays/index.js"
-    }
+    },
+    "./showcase": {
+      "types": "./dist/showcase/index.d.ts",
+      "default": "./dist/showcase/index.js"
+    },
+    "./showcase.css": "./dist/showcase.css"
   },
   "files": [
     "dist",
@@ -29,7 +34,7 @@
     "prepublishOnly": "npm run build",
     "build": "node scripts/write-version.js && npm run build:ts && npm run build:css",
     "build:ts": "tsc",
-    "build:css": "cp src/tokens.css dist/tokens.css && cp src/base.css dist/base.css"
+    "build:css": "cp src/tokens.css dist/tokens.css && cp src/base.css dist/base.css && cp src/showcase/showcase.css dist/showcase.css"
   },
   "peerDependencies": {
     "react": ">=18.0.0",