sellmate-design-system-react 9.0.0-beta.79 → 9.0.0-beta.80

package/dist/recipes/CategoryManagePage.d.ts

@@ -0,0 +1 @@
+export default function CategoryManagePage(): import("react").JSX.Element;

package/dist/recipes/ConsultConsolePage.d.ts

@@ -0,0 +1 @@
+export default function ConsultConsolePage(): import("react").JSX.Element;

package/dist/recipes/ProductBulkUploadPage.d.ts

@@ -0,0 +1 @@
+export default function ProductBulkUploadPage(): import("react").JSX.Element;

package/dist/recipes/ProductOverlayPage.d.ts

@@ -0,0 +1 @@
+export default function ProductOverlayPage(): import("react").JSX.Element;

package/dist/recipes/SalesDashboardPage.d.ts

@@ -0,0 +1 @@
+export default function SalesDashboardPage(): import("react").JSX.Element;

package/dist/recipes/SettingsPage.d.ts

@@ -0,0 +1 @@
+export default function SettingsPage(): import("react").JSX.Element;

package/dist/recipes/StoreSetupPage.d.ts

@@ -0,0 +1 @@
+export default function StoreSetupPage(): import("react").JSX.Element;

package/dist/recipes/api.d.ts

@@ -89,3 +89,132 @@ export declare function useExcelFiles(query: {
     total: number;
     lastPage: number;
 };
+/** 대시보드 지표 — 조회 기간(`period`)을 받아 요약 값·차트 데이터를 한 번에 돌려준다 */
+export declare function useSalesDashboard(query: {
+    period: SDateRangeValue;
+    channel?: string;
+}): {
+    summary: {
+        value: number;
+        label: string;
+        unit: string;
+        change: number;
+    }[];
+    daily: {
+        categories: string[];
+        dates: string[];
+        data: number[];
+    };
+    channelShare: {
+        name: string;
+        value: number;
+    }[];
+    topProducts: {
+        categories: string[];
+        data: number[];
+    };
+};
+export declare const CHANNEL_OPTIONS: {
+    label: string;
+    value: string;
+}[];
+/** 카테고리 트리 — 대분류 아래 중분류가 달린다 */
+export interface Category {
+    id: string;
+    name: string;
+    code: string;
+    productCount: number;
+    children?: Category[];
+}
+export declare function useCategoryTree(): Category[];
+/** 고른 카테고리 하나 — 상위 이름을 경로로 붙여 돌려준다 */
+export declare function useCategory(id: string): {
+    path: string;
+    useYn: string;
+    memo: string;
+    id: string;
+    name: string;
+    code: string;
+    productCount: number;
+    children?: Category[];
+} | undefined;
+export declare function saveCategory(values: Record<string, unknown>): Promise<void>;
+export declare function removeCategory(id: string): Promise<void>;
+export declare const SETTINGS_TABS: {
+    label: string;
+    value: string;
+}[];
+/** 환경 설정 — 탭마다 따로 읽고 따로 저장한다 */
+export declare function useSettings(tab: string): Record<string, unknown>;
+export declare function saveSettings(tab: string, values: Record<string, unknown>): Promise<void>;
+/** 엑셀 일괄 등록 — 올린 파일을 검증한 결과 */
+export interface UploadRow {
+    id: number;
+    row: number;
+    name: string;
+    price: number;
+    error?: string;
+    [key: string]: unknown;
+}
+export declare function validateUpload(values: Record<string, unknown>): Promise<UploadRow[]>;
+export declare function downloadErrorRows(rows: UploadRow[]): Promise<void>;
+export declare function commitUpload(rows: UploadRow[]): Promise<number>;
+/** 초기 설정 — 단계마다 따로 저장하고, 저장한 단계는 완료로 남는다 */
+export declare const SETUP_STEPS: {
+    label: string;
+    value: string;
+    group: string;
+}[];
+/**
+ * 서버가 아는 단계별 상태 — 완료한 단계와 다시 확인해야 하는 단계.
+ * 오류는 완료한 단계에도 남을 수 있다 (연동은 끝냈지만 인증이 만료된 판매처 등).
+ */
+export declare function useSetupStatus(): {
+    completed: string[];
+    error: string[];
+};
+export declare function useSetupStep(step: string): Record<string, unknown>;
+export declare function saveSetupStep(step: string, values: Record<string, unknown>): Promise<void>;
+/** 상담 — 왼쪽 목록의 한 건 */
+export interface Consult {
+    id: string;
+    customer: string;
+    topic: string;
+    lastMessage: string;
+    status: 'waiting' | 'active' | 'closed';
+}
+export declare const CONSULTS: Consult[];
+/** 대화 한 줄 — 사람이 보낸 메시지이거나, 대화 중간에 시스템이 알리는 사실이다 */
+export type ChatEntry = {
+    kind: 'message';
+    id: string;
+    direction: 'incoming' | 'outgoing';
+    /** YYYY-MM-DD — 날짜가 바뀌는 자리에 구분선을 끼운다 */
+    date: string;
+    time: string;
+    text?: string;
+    variant?: 'default' | 'template';
+    read?: boolean;
+    file?: {
+        name: string;
+        size: number;
+    };
+} | {
+    kind: 'system';
+    id: string;
+    date: string;
+    text: string;
+};
+export declare function useConsultMessages(consultId: string): ChatEntry[];
+/** 답변 템플릿 — 분류마다 여러 개 */
+export declare const REPLY_TEMPLATES: {
+    id: string;
+    name: string;
+    items: {
+        id: string;
+        title: string;
+        body: string;
+    }[];
+}[];
+export declare function sendChatMessage(consultId: string, text: string): Promise<void>;
+export declare function closeConsult(consultId: string): Promise<void>;

package/dist/styles.css

@@ -423,6 +423,9 @@
     --animate-floating-out-bottom: floating-out-bottom 0.15s ease-in forwards;
     --animate-floating-out-left: floating-out-left 0.15s ease-in forwards;
     --animate-floating-out-right: floating-out-right 0.15s ease-in forwards;
+    --animate-skeleton-wave: skeleton-wave 1.5s linear 0.5s infinite;
+    --animate-skeleton-pulse: skeleton-pulse 1.5s ease-in-out 0.5s infinite;
+    --animate-skeleton-fade: skeleton-fade 1.5s linear 0.5s infinite;
   }
 }
 @layer base {
@@ -870,6 +873,12 @@
   .mt-\[24px\] {
     margin-top: 24px;
   }
+  .mt-\[var\(--cmp-chatMessage-group-message-gap\)\] {
+    margin-top: var(--cmp-chatMessage-group-message-gap);
+  }
+  .mt-\[var\(--cmp-chatMessage-group-system-gap\)\] {
+    margin-top: var(--cmp-chatMessage-group-system-gap);
+  }
   .mt-\[var\(--cmp-guide-contents-gap\)\] {
     margin-top: var(--cmp-guide-contents-gap);
   }
@@ -1274,6 +1283,9 @@
   .min-h-\[var\(--cmp-datepicker-calendar-day-circle-size\)\] {
     min-height: var(--cmp-datepicker-calendar-day-circle-size);
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -1487,6 +1499,9 @@
   .w-sd-8 {
     width: var(--spacing-sd-8);
   }
+  .max-w-\[280px\] {
+    max-width: 280px;
+  }
   .max-w-\[360px\] {
     max-width: 360px;
   }
@@ -1592,6 +1607,9 @@
   .flex-none {
     flex: none;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
@@ -1654,6 +1672,10 @@
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-y-50 {
+    --tw-scale-y: 50%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .scale-\[0\.3\] {
     scale: 0.3;
   }
@@ -1708,6 +1730,15 @@
   .animate-modal-shake {
     animation: var(--animate-modal-shake);
   }
+  .animate-skeleton-fade {
+    animation: var(--animate-skeleton-fade);
+  }
+  .animate-skeleton-pulse {
+    animation: var(--animate-skeleton-pulse);
+  }
+  .animate-skeleton-wave {
+    animation: var(--animate-skeleton-wave);
+  }
   .cursor-col-resize {
     cursor: col-resize;
   }
@@ -1729,6 +1760,9 @@
   .cursor-text {
     cursor: text;
   }
+  .cursor-wait {
+    cursor: wait;
+  }
   .touch-none {
     touch-action: none;
   }
@@ -1747,18 +1781,30 @@
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
+  .list-disc {
+    list-style-type: disc;
+  }
   .list-none {
     list-style-type: none;
   }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
   .grid-cols-\[200px_1fr\] {
     grid-template-columns: 200px 1fr;
   }
+  .grid-cols-\[240px_auto_1fr\] {
+    grid-template-columns: 240px auto 1fr;
+  }
   .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
     grid-template-columns: minmax(0,1fr) minmax(0,1fr);
   }
@@ -3356,6 +3402,9 @@
   .px-\(--cmp-listDraggableItem-paddingX\) {
     padding-inline: var(--cmp-listDraggableItem-paddingX);
   }
+  .px-\(--cmp-listItem-paddingX\) {
+    padding-inline: var(--cmp-listItem-paddingX);
+  }
   .px-\(--cmp-pageHeader-paddingX\) {
     padding-inline: var(--cmp-pageHeader-paddingX);
   }
@@ -3482,6 +3531,9 @@
   .px-sd-16 {
     padding-inline: var(--spacing-sd-16);
   }
+  .px-sd-24 {
+    padding-inline: var(--spacing-sd-24);
+  }
   .py-\(--cmp-calendarBoard-dayEvent-header-paddingY\) {
     padding-block: var(--cmp-calendarBoard-dayEvent-header-paddingY);
   }
@@ -3632,6 +3684,9 @@
   .py-sd-24 {
     padding-block: var(--spacing-sd-24);
   }
+  .py-sd-48 {
+    padding-block: var(--spacing-sd-48);
+  }
   .pt-\(--cmp-calendarBoard-dayCard-header-paddingTop\) {
     padding-top: var(--cmp-calendarBoard-dayCard-header-paddingTop);
   }
@@ -3677,6 +3732,9 @@
   .pr-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-right: var(--cmp-overlay-header-paddingX);
   }
+  .pr-sd-4 {
+    padding-right: var(--spacing-sd-4);
+  }
   .pb-\(--cmp-calendarBoard-dayCard-grid-paddingBottom\) {
     padding-bottom: var(--cmp-calendarBoard-dayCard-grid-paddingBottom);
   }
@@ -3743,6 +3801,12 @@
   .pl-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-left: var(--cmp-overlay-header-paddingX);
   }
+  .pl-sd-4 {
+    padding-left: var(--spacing-sd-4);
+  }
+  .pl-sd-16 {
+    padding-left: var(--spacing-sd-16);
+  }
   .pl-sd-24 {
     padding-left: var(--spacing-sd-24);
   }
@@ -4398,6 +4462,9 @@
   .text-link-accent {
     color: var(--color-link-accent);
   }
+  .text-oceanblue-75 {
+    color: var(--color-oceanblue-75);
+  }
   .text-red-75 {
     color: var(--color-red-75);
   }
@@ -5611,6 +5678,16 @@
       scrollbar-color: var(--color-grey-45) var(--color-white);
     }
   }
+  .motion-reduce\:hidden {
+    @media (prefers-reduced-motion: reduce) {
+      display: none;
+    }
+  }
+  .motion-reduce\:animate-none {
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
   .motion-reduce\:transition-none {
     @media (prefers-reduced-motion: reduce) {
       transition-property: none;
@@ -6454,6 +6531,11 @@
       flex: 1;
     }
   }
+  .\[\&\>div\:last-child\]\:overflow-y-auto {
+    &>div:last-child {
+      overflow-y: auto;
+    }
+  }
   .\[\&\>svg\]\:w-full\! {
     &>svg {
       width: 100% !important;
@@ -9415,6 +9497,30 @@
     transform: translateX(-4px);
   }
 }
+@keyframes skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes skeleton-pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.85);
+  }
+}
+@keyframes skeleton-fade {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
 @property --tw-border-spacing-x {
   syntax: "<length>";
   inherits: false;
@@ -9440,6 +9546,21 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -9626,6 +9747,9 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;

package/dist/theme.css

@@ -2446,6 +2446,11 @@
   --animate-floating-out-bottom: floating-out-bottom 0.15s ease-in forwards;
   --animate-floating-out-left: floating-out-left 0.15s ease-in forwards;
   --animate-floating-out-right: floating-out-right 0.15s ease-in forwards;
+
+  /* 스켈레톤 (Quasar QSkeleton 포팅). 속도는 SSkeleton 이 animation-duration 으로 덮어쓴다 */
+  --animate-skeleton-wave: skeleton-wave 1.5s linear 0.5s infinite;
+  --animate-skeleton-pulse: skeleton-pulse 1.5s ease-in-out 0.5s infinite;
+  --animate-skeleton-fade: skeleton-fade 1.5s linear 0.5s infinite;
 }
 @keyframes linear-indeterminate {
   0% { transform: translateX(-100%) scaleX(0.2); }
@@ -2491,3 +2496,7 @@
 @keyframes floating-out-bottom { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } }
 @keyframes floating-out-left { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(4px); } }
 @keyframes floating-out-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-4px); } }
+/* 스켈레톤: wave 는 하이라이트 띠가 왼→오로 지나가고, pulse 는 크기, fade 는 투명도가 숨쉬듯 바뀐다 */
+@keyframes skeleton-wave { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
+@keyframes skeleton-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.85); } }
+@keyframes skeleton-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.79",
+  "version": "9.0.0-beta.80",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [