sellmate-design-system-react 9.0.0-beta.7 → 9.0.0-beta.70

package/dist/components/SCalendarBoard/README.md

@@ -0,0 +1,148 @@
+# SCalendarBoard
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SCalendarBoard
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `year?` | `number` | — | 보이는 연도 (제어). `month` 와 함께 준다 |
+| `month?` | `number` | — | 보이는 월 1-12 (제어). `year` 와 함께 준다 |
+| `defaultYear?` | `number` | — | 처음 보여줄 연도 (비제어). 없으면 오늘 |
+| `defaultMonth?` | `number` | — | 처음 보여줄 월 1-12 (비제어). 없으면 오늘 |
+| `selectable?` | `boolean` | `false` | 날짜 칸을 눌러 고를 수 있게 한다. 기본은 읽기 전용 판이다 — 켜야 칸에 커서·포커스·키보드(Enter·Space)가 붙고 `onValueChange` 가 온다. 일정 버튼과 "N개 더보기" 는 이 값과 무관하게 항상 눌린다. |
+| `value?` | `string \| null` | — | 선택 날짜 (YYYY-MM-DD). `selectable` 과 별개로 강조만 주고 싶을 때도 쓴다 |
+| `events?` | `SCalendarBoardEvent[]` | — | 일정 목록. `date`(시작)로 칸에 배분되고, `endDate` 를 주면 그날까지 **하나의 막대로 이어져** 칸 경계를 넘어 그려진다. |
+| `dayColors?` | `Record<string, SCalendarBoardDayColor>` | — | 날짜별 칸 배경. 키는 `YYYY-MM-DD`, 없는 날짜는 `'default'` 다. 그날의 성격(마감·완료·휴무 등)을 칸 전체로 알릴 때 쓴다 — 일정 하나의 색은 `events[].color` 다. |
+| `dayContent?` | `Record<string, ReactNode>` | — | 날짜별 칸 본문. 키는 `YYYY-MM-DD`, 준 날짜는 **일정 자리를 통째로 이 내용이 차지한다** — 그날의 `events` 는 그리지 않고 목록 판도 열리지 않는다. 일정으로 표현되지 않는 것(재고 현황· 매출 요약 같은 그날치 요약)을 칸에 그대로 얹을 때 쓴다. |
+| `focusedEventId?` | `string \| null` | — | 집중할 일정의 `id`. 그 일정만 또렷하게 남고 **나머지 일정과 "N개 더보기" 는 흐려진다** — 판 밖의 무언가(목록의 행 등)에 손이 닿았을 때 판에서 그에 대응하는 일정을 짚어 주는 데 쓴다. 그 일정이 칸에 담기는 줄 수를 넘겨 **"N개 더보기" 에 접혀 있으면, 그 "더보기" 자리에 대신 그려져** 집중하는 동안만 드러난다. 이미 보이고 있으면 자리는 그대로다 — 어느 쪽이든 다른 일정의 줄 배정은 달라지지 않으므로, 집중이 오가도 판이 출렁이지 않는다. 자리를 내준 칸은 그 동안 "더보기" 를 그리지 않는다(한 줄에 둘을 넣을 수 없다). 거기 남은 일정은 칸을 눌러 목록 판으로 본다. `id` 가 없는 일정은 지목할 수 없다. |
+| `todayLabel?` | `string` | `'오늘'` | 헤더 오른쪽 "오늘" 버튼 레이블. 빈 문자열이면 버튼을 그리지 않는다 |
+| `moreLabel?` | `string` | — | "N개" 뒤에 붙는 말 |
+| `headerRight?` | `ReactNode` | — | 헤더 오른쪽 끝에 붙일 추가 컨트롤 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onViewChange` | `(view: SCalendarBoardView) => void` | 보이는 연·월 변경 |
+| `onValueChange` | `(date: string, events: SCalendarBoardEvent[]) => void` | 날짜 칸 선택 — 고른 날짜와 그 날짜의 일정이 함께 온다 (`selectable` 일 때만) |
+| `onEventClick` | `(event: SCalendarBoardEvent, e: MouseEvent<HTMLButtonElement>) => void` | 일정 클릭 |
+| `onMoreClick` | `(view: { date: string; events: SCalendarBoardEvent[] }) => void` | 그 날짜의 일정을 전부 열어 볼 때 — "N개 더보기" 를 눌렀을 때와 **일정이 있는 칸 자체를 눌렀을 때** 모두 온다. **주면 내장 일정 목록 판을 띄우지 않고 이 핸들러만 호출한다** — 그 날짜를 전용 화면·모달로 열고 싶을 때 쓴다. |
+
+## Types
+
+### SCalendarBoardView
+
+```ts
+/** 보이는 연·월 */
+export interface SCalendarBoardView {
+  year: number;
+  /** 1-12 */
+  month: number;
+}
+```
+
+### SCalendarBoardEvent
+
+```ts
+/** 달력 한 칸에 얹히는 일정 하나 */
+export interface SCalendarBoardEvent {
+  /** 고유 식별자. 없으면 목록 순서로 key 를 만든다 */
+  id?: string;
+  /** 시작 날짜 (YYYY-MM-DD). 하루짜리 일정은 이것만 준다 */
+  date: string;
+  /**
+   * 마지막 날 (YYYY-MM-DD, **그날 포함**). 주지 않거나 `date` 보다 앞서면 하루짜리로 본다.
+   *
+   * 여러 날에 걸친 일정은 칸 경계를 넘어 **하나의 막대로 이어져** 그려진다. 주 경계에서는 줄이
+   * 바뀌므로 조각이 나뉘고, 그렇게 잘린 쪽 모서리는 평평해져 "앞/뒤로 이어진다" 가 읽힌다.
+   *
+   * 막대가 걸친 날은 **모두** 그 일정을 가진 날로 친다 — 목록 판과 `onValueChange` 에 함께 온다.
+   */
+  endDate?: string;
+  /**
+   * 강조 레이블 (필수) — 예: `"[입고 예정]"`.
+   * 일정이 무엇인지 한눈에 알리는 부분이라 비워 두지 않는다.
+   * 인라인 HTML(`<b>` `<strong>` `<i>` `<em>` `<span class>` `<a href>` `<br>`)을 받으며 살균 후 렌더한다.
+   */
+  label: string;
+  /** 색상 프리셋 — 배경과 점 색이 함께 정해진다 */
+  color?: SCalendarBoardEventColor;
+  /** 왼쪽 점 색만 따로 지정 (프리셋 기본값을 덮어쓴다). 점은 `SBadge` 라 그 색(`SBadgeColor`)을 쓴다 */
+  dotColor?: SBadgeColor;
+  /** 본문 텍스트 — 예: `"RV20260728-000006"`. 평문만 받는다 */
+  description?: string;
+  /** 구분선(`/`) 뒤에 붙는 값 — 예: `"1,000"`. 평문만 받는다 */
+  value?: string;
+  /** 이 일정만 비활성 (클릭 불가) */
+  disabled?: boolean;
+}
+```
+
+### SCalendarBoardDayColor
+
+```ts
+export type SCalendarBoardDayColor = (typeof CALENDAR_BOARD_DAY_COLORS)[number];
+```
+
+### SCalendarBoardEventColor
+
+```ts
+export type SCalendarBoardEventColor = (typeof CALENDAR_BOARD_EVENT_COLORS)[number];
+```
+
+### CALENDAR_BOARD_DAY_COLORS
+
+```ts
+/** 날짜 칸 배경 — 그날의 성격을 칸 전체로 알린다 */
+export const CALENDAR_BOARD_DAY_COLORS = [
+  'default',
+  'danger',
+  'accent',
+  'complete',
+  'dim',
+] as const;
+```
+
+### CALENDAR_BOARD_EVENT_COLORS
+
+```ts
+export const CALENDAR_BOARD_EVENT_COLORS = [
+  'default',
+  'blue',
+  'oceanBlue',
+  'lightBlue',
+  'green',
+  'yellow',
+  'orange',
+  'red',
+  'purple',
+  'white',
+] as const;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SBadge](../SBadge)
+- [SButton](../SButton)
+- [SDivider](../SDivider)
+- [SGhostButton](../SGhostButton)
+- [SScrollArea](../SScrollArea)
+
+### Graph
+
+```mermaid
+graph TD;
+  SCalendarBoard --> SBadge
+  SCalendarBoard --> SButton
+  SCalendarBoard --> SDivider
+  SCalendarBoard --> SGhostButton
+  SCalendarBoard --> SScrollArea
+  style SCalendarBoard fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SCalendarBoard/SCalendarBoard.d.ts

@@ -0,0 +1,83 @@
+import { type CSSProperties, type MouseEvent, type ReactNode } from 'react';
+import { type SCalendarBoardDayColor } from './calendarBoard.config';
+import type { SCalendarBoardEvent, SCalendarBoardView } from './types';
+export interface SCalendarBoardProps {
+    /** 보이는 연도 (제어). `month` 와 함께 준다 */
+    year?: number;
+    /** 보이는 월 1-12 (제어). `year` 와 함께 준다 */
+    month?: number;
+    /** 처음 보여줄 연도 (비제어). 없으면 오늘 */
+    defaultYear?: number;
+    /** 처음 보여줄 월 1-12 (비제어). 없으면 오늘 */
+    defaultMonth?: number;
+    /** 보이는 연·월 변경 */
+    onViewChange?: (view: SCalendarBoardView) => void;
+    /**
+     * 날짜 칸을 눌러 고를 수 있게 한다. 기본은 읽기 전용 판이다 —
+     * 켜야 칸에 커서·포커스·키보드(Enter·Space)가 붙고 `onValueChange` 가 온다.
+     * 일정 버튼과 "N개 더보기" 는 이 값과 무관하게 항상 눌린다.
+     */
+    selectable?: boolean;
+    /** 선택 날짜 (YYYY-MM-DD). `selectable` 과 별개로 강조만 주고 싶을 때도 쓴다 */
+    value?: string | null;
+    /** 날짜 칸 선택 — 고른 날짜와 그 날짜의 일정이 함께 온다 (`selectable` 일 때만) */
+    onValueChange?: (date: string, events: SCalendarBoardEvent[]) => void;
+    /**
+     * 일정 목록. `date`(시작)로 칸에 배분되고, `endDate` 를 주면 그날까지 **하나의 막대로 이어져**
+     * 칸 경계를 넘어 그려진다.
+     */
+    events?: SCalendarBoardEvent[];
+    /**
+     * 날짜별 칸 배경. 키는 `YYYY-MM-DD`, 없는 날짜는 `'default'` 다.
+     * 그날의 성격(마감·완료·휴무 등)을 칸 전체로 알릴 때 쓴다 — 일정 하나의 색은 `events[].color` 다.
+     */
+    dayColors?: Record<string, SCalendarBoardDayColor>;
+    /**
+     * 날짜별 칸 본문. 키는 `YYYY-MM-DD`, 준 날짜는 **일정 자리를 통째로 이 내용이 차지한다** —
+     * 그날의 `events` 는 그리지 않고 목록 판도 열리지 않는다. 일정으로 표현되지 않는 것(재고 현황·
+     * 매출 요약 같은 그날치 요약)을 칸에 그대로 얹을 때 쓴다.
+     */
+    dayContent?: Record<string, ReactNode>;
+    /**
+     * 집중할 일정의 `id`. 그 일정만 또렷하게 남고 **나머지 일정과 "N개 더보기" 는 흐려진다** —
+     * 판 밖의 무언가(목록의 행 등)에 손이 닿았을 때 판에서 그에 대응하는 일정을 짚어 주는 데 쓴다.
+     *
+     * 그 일정이 칸에 담기는 줄 수를 넘겨 **"N개 더보기" 에 접혀 있으면, 그 "더보기" 자리에 대신
+     * 그려져** 집중하는 동안만 드러난다. 이미 보이고 있으면 자리는 그대로다 — 어느 쪽이든 다른
+     * 일정의 줄 배정은 달라지지 않으므로, 집중이 오가도 판이 출렁이지 않는다.
+     *
+     * 자리를 내준 칸은 그 동안 "더보기" 를 그리지 않는다(한 줄에 둘을 넣을 수 없다). 거기 남은
+     * 일정은 칸을 눌러 목록 판으로 본다. `id` 가 없는 일정은 지목할 수 없다.
+     */
+    focusedEventId?: string | null;
+    /** 일정 클릭 */
+    onEventClick?: (event: SCalendarBoardEvent, e: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * 그 날짜의 일정을 전부 열어 볼 때 — "N개 더보기" 를 눌렀을 때와 **일정이 있는 칸 자체를 눌렀을 때**
+     * 모두 온다. **주면 내장 일정 목록 판을 띄우지 않고 이 핸들러만 호출한다** —
+     * 그 날짜를 전용 화면·모달로 열고 싶을 때 쓴다.
+     */
+    onMoreClick?: (view: {
+        date: string;
+        events: SCalendarBoardEvent[];
+    }) => void;
+    /** 헤더 오른쪽 "오늘" 버튼 레이블. 빈 문자열이면 버튼을 그리지 않는다 */
+    todayLabel?: string;
+    /** "N개" 뒤에 붙는 말 */
+    moreLabel?: string;
+    /** 헤더 오른쪽 끝에 붙일 추가 컨트롤 */
+    headerRight?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SCalendarBoard — 한 달치 일정을 격자로 펼쳐 보여주는 달력 판.
+ *
+ * 날짜를 **고르는** 달력(`SCalendar` · `SDatePicker`)이 아니라 일정을 **읽는** 달력이다.
+ * 칸마다 일정이 줄로 쌓이고, 넘치면 "N개 더보기" 로 접혀 그 칸을 덮는 판으로 펼쳐진다.
+ *
+ * **판 높이는 부모가 정한다.** 행이 그 높이를 균등하게 나눠 갖고, 칸 높이가 다시 "한 칸에 몇 줄이
+ * 보일지" 를 정한다 — 그래서 놓는 자리에 높이를 주어야 한다 (`<div className="h-[640px]">` ·
+ * `SPage` 본문의 남은 높이 등). 높이를 주지 않으면 칸이 `dayCard.minHeight` 로 주저앉는다.
+ */
+export declare function SCalendarBoard({ year, month, defaultYear, defaultMonth, onViewChange, selectable, value, onValueChange, events, dayColors, dayContent, focusedEventId, onEventClick, onMoreClick, todayLabel, moreLabel, headerRight, className, style, }: SCalendarBoardProps): import("react").JSX.Element;

package/dist/components/SCalendarBoard/calendar-board-layout.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 달력 판의 **일정 배치**를 계산한다 (순수 함수 — DOM 을 보지 않는다).
+ *
+ * 왜 필요한가: 일정이 하루짜리뿐이면 칸마다 자기 목록을 세로로 쌓으면 그만이다. 그런데 여러 날에
+ * 걸친 일정은 **칸 경계를 넘어 하나의 막대로 이어져야** 하므로, 칸 혼자서는 자기 줄을 정할 수 없다 —
+ * 같은 주의 다른 칸에 걸친 막대가 이미 그 줄을 쓰고 있을 수 있기 때문이다. 그래서 줄(lane) 배정은
+ * **주 단위**로 한 번에 푼다.
+ *
+ * 하루짜리 일정만 있는 판은 이 계산을 거쳐도 예전과 같은 화면이 된다 — 서로 다른 날의 일정은
+ * 겹치지 않아 전부 0번 줄부터 차곡차곡 앉기 때문이다.
+ */
+import type { DayCell } from '../../lib/date';
+import type { SCalendarBoardEvent } from './types';
+/** 한 주 안에서 이어지는 막대 하나 — 일정 하나가 주 경계에서 잘리면 조각이 여럿 된다 */
+export interface CalendarBoardSegment {
+    event: SCalendarBoardEvent;
+    /** React key */
+    key: string;
+    /** 격자 칸 배열에서의 시작 인덱스 */
+    startIndex: number;
+    /** 이어지는 칸 수 (1 이상) */
+    span: number;
+    /** 그 주 안에서 몇 번째 줄인지 (0부터) */
+    lane: number;
+    /** 왼쪽 끝이 일정의 **실제 시작**인지. 아니면 앞에서 이어진 것이라 그 모서리를 평평하게 한다 */
+    startsHere: boolean;
+    /** 오른쪽 끝이 일정의 **실제 끝**인지 */
+    endsHere: boolean;
+}
+export interface CalendarBoardLayout {
+    /** 칸별로, **그 칸에서 시작하는** 막대. 막대는 시작 칸이 그린다 */
+    segmentsByCell: CalendarBoardSegment[][];
+    /** 칸별로, 그 날짜에 걸친 일정 전부 — 목록 판과 콜백에 넘기는 값 */
+    eventsByCell: SCalendarBoardEvent[][];
+    /** 칸별로 줄 수를 넘겨 접힌 일정 수 */
+    hiddenCountByCell: number[];
+    /** 주별로 "N개 더보기" 가 앉는 줄. 접힌 것이 없는 주는 -1 */
+    moreLaneByWeek: number[];
+    /**
+     * 칸별로, "더보기" 자리를 집중된 일정(`focusedEventId`)에 내줬는지.
+     * 내준 칸은 그 줄에 막대가 앉았으므로 "더보기" 를 그리지 않는다 — 한 줄에 둘을 넣을 수 없다.
+     */
+    moreReplacedByCell: boolean[];
+}
+/** 일정의 마지막 날. `endDate` 가 없거나 시작보다 앞서면 하루짜리로 본다 */
+export declare function eventEndDate(event: SCalendarBoardEvent): string;
+export declare function layoutCalendarBoard({ cells, events, rowCapacity, blockedDates, focusedEventId, }: {
+    cells: readonly DayCell[];
+    events: readonly SCalendarBoardEvent[];
+    /** 칸 하나에 담기는 줄 수 */
+    rowCapacity: number;
+    /** 일정을 그리지 않는 날짜 (`dayContent` 를 받은 칸) */
+    blockedDates: ReadonlySet<string>;
+    /**
+     * 집중할 일정의 `id`. 그 일정이 접혀 있으면 "더보기" 가 예약한 줄을 대신 차지해 노출된다 —
+     * 이미 보이고 있으면 아무것도 달라지지 않는다. 줄 배정 자체는 이 값과 무관하다.
+     */
+    focusedEventId?: string | null;
+}): CalendarBoardLayout;

package/dist/components/SCalendarBoard/calendarBoard.config.d.ts

@@ -0,0 +1,38 @@
+/**
+ * SCalendarBoard 색상 프리셋 — component.calendarBoard 토큰 기반.
+ *
+ * 배경은 `--cmp-calendarBoard-eventButton-bg-*` 로 전부 토큰화돼 있다.
+ * 점(dot)은 `SBadge` 가 그리므로 색도 `--cmp-badge-*` 를 그대로 따른다 —
+ * badge 색이 디자인 mock 의 점 hex 와 1:1 로 맞아떨어져 따로 매핑을 두지 않는다.
+ */
+import type { SBadgeColor } from '../SBadge';
+export declare const CALENDAR_BOARD_EVENT_COLORS: readonly ["default", "blue", "oceanBlue", "lightBlue", "green", "yellow", "orange", "red", "purple", "white"];
+export type SCalendarBoardEventColor = (typeof CALENDAR_BOARD_EVENT_COLORS)[number];
+export interface CalendarBoardEventPreset {
+    /** 이벤트 버튼 배경 */
+    bg: string;
+    /** 왼쪽 점(SBadge) 색 */
+    dot: SBadgeColor;
+}
+export declare const CALENDAR_BOARD_EVENT_PRESETS: Record<SCalendarBoardEventColor, CalendarBoardEventPreset>;
+/**
+ * 칸에 몇 줄이 들어가는지 아직 **재지 못했을 때** 쓰는 기본값 (SSR·첫 렌더·ResizeObserver 부재).
+ *
+ * 실제로는 칸 높이가 줄 수를 정한다 — 판 높이를 부모가 정하고, 행이 그 높이를 균등 분할하고,
+ * 칸 높이에서 `header + n·item + (n−1)·gap + paddingBottom` 이 담기는 최대 n 이 그 값이다.
+ * 그래서 이 값을 조절하는 prop 은 없다.
+ */
+export declare const CALENDAR_BOARD_MAX_VISIBLE_EVENTS = 4;
+/**
+ * 집중하지 않은 것(다른 일정과 "N개 더보기")이 물러나는 투명도.
+ * 대응 토큰이 없어 디자인 값을 그대로 쓴다 — 토큰이 생기면 여기만 갈아끼운다.
+ */
+export declare const CALENDAR_BOARD_DIM_OPACITY = 0.4;
+/** 날짜 칸 배경 — 그날의 성격을 칸 전체로 알린다 */
+export declare const CALENDAR_BOARD_DAY_COLORS: readonly ["default", "danger", "accent", "complete", "dim"];
+export type SCalendarBoardDayColor = (typeof CALENDAR_BOARD_DAY_COLORS)[number];
+/**
+ * 칸 배경색. `default` 만 컴포넌트 토큰이고 나머지는 대응 토큰이 없어 팔레트 프리미티브를 가리킨다.
+ * (토큰이 생기면 여기만 `--cmp-calendarBoard-dayCard-bg-*` 로 갈아끼운다)
+ */
+export declare const CALENDAR_BOARD_DAY_BG: Record<SCalendarBoardDayColor, string>;

package/dist/components/SCalendarBoard/index.d.ts

@@ -0,0 +1,3 @@
+export { SCalendarBoard, type SCalendarBoardProps } from './SCalendarBoard';
+export type { SCalendarBoardEvent, SCalendarBoardView } from './types';
+export { CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_DAY_BG, type SCalendarBoardEventColor, type SCalendarBoardDayColor, } from './calendarBoard.config';

package/dist/components/SCalendarBoard/types.d.ts

@@ -0,0 +1,40 @@
+import type { SBadgeColor } from '../SBadge';
+import type { SCalendarBoardEventColor } from './calendarBoard.config';
+/** 달력 한 칸에 얹히는 일정 하나 */
+export interface SCalendarBoardEvent {
+    /** 고유 식별자. 없으면 목록 순서로 key 를 만든다 */
+    id?: string;
+    /** 시작 날짜 (YYYY-MM-DD). 하루짜리 일정은 이것만 준다 */
+    date: string;
+    /**
+     * 마지막 날 (YYYY-MM-DD, **그날 포함**). 주지 않거나 `date` 보다 앞서면 하루짜리로 본다.
+     *
+     * 여러 날에 걸친 일정은 칸 경계를 넘어 **하나의 막대로 이어져** 그려진다. 주 경계에서는 줄이
+     * 바뀌므로 조각이 나뉘고, 그렇게 잘린 쪽 모서리는 평평해져 "앞/뒤로 이어진다" 가 읽힌다.
+     *
+     * 막대가 걸친 날은 **모두** 그 일정을 가진 날로 친다 — 목록 판과 `onValueChange` 에 함께 온다.
+     */
+    endDate?: string;
+    /**
+     * 강조 레이블 (필수) — 예: `"[입고 예정]"`.
+     * 일정이 무엇인지 한눈에 알리는 부분이라 비워 두지 않는다.
+     * 인라인 HTML(`<b>` `<strong>` `<i>` `<em>` `<span class>` `<a href>` `<br>`)을 받으며 살균 후 렌더한다.
+     */
+    label: string;
+    /** 색상 프리셋 — 배경과 점 색이 함께 정해진다 */
+    color?: SCalendarBoardEventColor;
+    /** 왼쪽 점 색만 따로 지정 (프리셋 기본값을 덮어쓴다). 점은 `SBadge` 라 그 색(`SBadgeColor`)을 쓴다 */
+    dotColor?: SBadgeColor;
+    /** 본문 텍스트 — 예: `"RV20260728-000006"`. 평문만 받는다 */
+    description?: string;
+    /** 구분선(`/`) 뒤에 붙는 값 — 예: `"1,000"`. 평문만 받는다 */
+    value?: string;
+    /** 이 일정만 비활성 (클릭 불가) */
+    disabled?: boolean;
+}
+/** 보이는 연·월 */
+export interface SCalendarBoardView {
+    year: number;
+    /** 1-12 */
+    month: number;
+}

package/dist/components/SCallout/README.md

@@ -8,12 +8,28 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `type?` | `SCalloutType` | `'default'` | 콜아웃 타입 (색상·아이콘·타이틀 결정) |
+| `type?` | `SCalloutType` | `'default'` | 콜아웃 타입 (색상·아이콘·타이틀 결정). - `default` — 옅은 회색 면. 흰 페이지(`background="frame"`) 위의 기본 안내. - `white` — 같은 안내인데 배경만 흰 면. 회색 면(`neutral`·`screen`) 위에서 default 가 묻힐 때. - `danger` — 좌측에 주의사항 타이틀이 붙는 경고. |
+| `showTitle?` | `boolean` | `true` | `danger` 좌측의 주의사항 타이틀(아이콘+라벨) 표시 여부. 기본 `true`. `false` 면 타이틀만 빠지고 danger 의 면·테두리·본문색은 그대로다. 다른 타입에는 영향이 없다. |
 | `message?` | `SCalloutMessage[]` | `[]` | 표시할 메시지 목록 (배열 중첩으로 depth 표현). 각 문자열은 인라인 HTML(`<b>`, `<a>` 등)을 허용하며 sanitizeInlineHtml 로 살균 후 렌더된다. |
 | `children?` | `ReactNode` | — | message 대신 직접 본문을 넣을 때 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
+## Types
+
+### SCalloutType
+
+```ts
+export type SCalloutType = 'default' | 'danger' | 'white';
+```
+
+### SCalloutMessage
+
+```ts
+/** 중첩 메시지: 문자열 또는 (한 단계 더 들어간) 문자열 배열 */
+export type SCalloutMessage = string | SCalloutMessage[];
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SCallout/SCallout.d.ts

@@ -1,10 +1,20 @@
 import { type CSSProperties, type ReactNode } from 'react';
-export type SCalloutType = 'default' | 'danger';
+export type SCalloutType = 'default' | 'danger' | 'white';
 /** 중첩 메시지: 문자열 또는 (한 단계 더 들어간) 문자열 배열 */
 export type SCalloutMessage = string | SCalloutMessage[];
 export interface SCalloutProps {
-    /** 콜아웃 타입 (색상·아이콘·타이틀 결정) */
+    /**
+     * 콜아웃 타입 (색상·아이콘·타이틀 결정).
+     * - `default` — 옅은 회색 면. 흰 페이지(`background="frame"`) 위의 기본 안내.
+     * - `white` — 같은 안내인데 배경만 흰 면. 회색 면(`neutral`·`screen`) 위에서 default 가 묻힐 때.
+     * - `danger` — 좌측에 주의사항 타이틀이 붙는 경고.
+     */
     type?: SCalloutType;
+    /**
+     * `danger` 좌측의 주의사항 타이틀(아이콘+라벨) 표시 여부. 기본 `true`.
+     * `false` 면 타이틀만 빠지고 danger 의 면·테두리·본문색은 그대로다. 다른 타입에는 영향이 없다.
+     */
+    showTitle?: boolean;
     /**
      * 표시할 메시지 목록 (배열 중첩으로 depth 표현).
      * 각 문자열은 인라인 HTML(`<b>`, `<a>` 등)을 허용하며 sanitizeInlineHtml 로 살균 후 렌더된다.
@@ -17,8 +27,8 @@ export interface SCalloutProps {
 }
 /**
  * SCallout — sd-callout 포팅.
- * default/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시.
- * 색상은 `--cmp-callout-*` 토큰 참조.
+ * default/white/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시(showTitle 로 끌 수 있다).
+ * 색상은 `--cmp-callout-*` 토큰 참조(white 만 예외 — SURFACE 주석 참고).
  * message 각 항목은 sanitizeInlineHtml 로 살균한 뒤 innerHTML 로 렌더한다 (원본 sd-callout 과 동일).
  */
 export declare const SCallout: import("react").ForwardRefExoticComponent<SCalloutProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SCard/README.md

@@ -9,4 +9,21 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `bordered?` | `boolean` | `false` | 테두리 표시 여부 |
+| `footerLeft?` | `ReactNode` | — | 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다. `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다. |
+| `button?` | `SFooterButton` | — | 하단 액션 영역 우측 주 액션 버튼 |
+| `footerSize?` | `SFooterSize` | `'md'` | 하단 액션 영역 크기. 기본은 `md`. 한 화면 안에서 **부분만 확정하는 카드**(옆 패널·분할 영역처럼 화면의 일부를 맡는 카드)일 때만 `sm`. 카드가 화면의 주 액션을 쥐고 있으면 모달·페이지와 같은 `md` 다 (AGENTS.md §3-5-2). `footerLeft` 슬롯의 버튼도 같이 맞춘다 — `sm` 이면 슬롯 버튼도 `size="sm"`. |
+| `footerClassName?` | `string` | — | 하단 액션 영역 클래스 |
 
+## Dependencies
+
+### Depends on
+
+- [SFooter](../SFooter)
+
+### Graph
+
+```mermaid
+graph TD;
+  SCard --> SFooter
+  style SCard fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SCard/SCard.d.ts

@@ -1,7 +1,31 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type SFooterButton, type SFooterSize } from '../SFooter';
 export interface SCardProps extends HTMLAttributes<HTMLDivElement> {
     /** 테두리 표시 여부 */
     bordered?: boolean;
+    /**
+     * 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다.
+     * `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다.
+     */
+    footerLeft?: ReactNode;
+    /** 하단 액션 영역 우측 주 액션 버튼 */
+    button?: SFooterButton;
+    /**
+     * 하단 액션 영역 크기. 기본은 `md`.
+     *
+     * 한 화면 안에서 **부분만 확정하는 카드**(옆 패널·분할 영역처럼 화면의 일부를 맡는 카드)일 때만
+     * `sm`. 카드가 화면의 주 액션을 쥐고 있으면 모달·페이지와 같은 `md` 다 (AGENTS.md §3-5-2).
+     *
+     * `footerLeft` 슬롯의 버튼도 같이 맞춘다 — `sm` 이면 슬롯 버튼도 `size="sm"`.
+     */
+    footerSize?: SFooterSize;
+    /** 하단 액션 영역 클래스 */
+    footerClassName?: string;
 }
-/** SCard — sd-card 포팅. 라운드 8px, 흰 배경, 옵션 테두리. */
+/**
+ * SCard — sd-card 포팅. 라운드 8px, 흰 배경, 옵션 테두리. 콘텐츠는 라운드 경계에서 잘린다.
+ *
+ * 하단 액션은 `children` 에 직접 두지 않고 `footerLeft`·`button` 으로 넘긴다 — 배경·구분선·여백과
+ * 양끝 분리가 컴포넌트 규칙대로 잡히는 자리다.
+ */
 export declare const SCard: import("react").ForwardRefExoticComponent<SCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SChatAttachedFile/README.md

@@ -0,0 +1,33 @@
+# SChatAttachedFile
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SChatAttachedFile
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | — | 파일명. 칸을 넘치면 말줄임된다 — 칸의 폭은 부모가 정한다. |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onRemove` | `() => void` | 제거 버튼을 눌렀을 때. 주지 않으면 버튼이 서지 않는다. 입력창 위의 첨부는 보내기 전까지 뺄 수 있어야 하므로 대개 준다 — 버튼을 세우지 않는 것은 보내는 중처럼 무를 수 없는 짧은 순간뿐이다. |
+
+## Dependencies
+
+### Depends on
+
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SChatAttachedFile --> SGhostButton
+  SChatAttachedFile --> SIcon
+  style SChatAttachedFile fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SChatAttachedFile/SChatAttachedFile.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from 'react';
+export interface SChatAttachedFileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 파일명. 칸을 넘치면 말줄임된다 — 칸의 폭은 부모가 정한다. */
+    name: string;
+    /**
+     * 제거 버튼을 눌렀을 때. 주지 않으면 버튼이 서지 않는다.
+     *
+     * 입력창 위의 첨부는 보내기 전까지 뺄 수 있어야 하므로 대개 준다 —
+     * 버튼을 세우지 않는 것은 보내는 중처럼 무를 수 없는 짧은 순간뿐이다.
+     */
+    onRemove?: () => void;
+}
+export declare const SChatAttachedFile: import("react").ForwardRefExoticComponent<SChatAttachedFileProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SChatAttachedFile/chatAttachedFile.config.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 보내기 전 첨부 칸이 쓰는 값. `component.chatAttachedFile` 토큰 한 세트가 여백·면·선·칩을
+ * 모두 쥔다.
+ *
+ * 높이는 고정하지 않고 세로 패딩(`paddingY`)과 내용이 정한다 — 예전에 스케일에 안 떨어져
+ * 값으로 두던 높이(30)·타일(20)은 `paddingY` + `icon.wrapper.padding` + 아이콘 크기로 따라온다.
+ */
+export declare const CHAT_ATTACHED_FILE_CONFIG: {
+    /** 바깥 상자 — 좌우·상하 여백·면·선·라운드 */
+    readonly box: "px-(--cmp-chatAttachedFile-paddingX) py-(--cmp-chatAttachedFile-paddingY) rounded-(--cmp-chatAttachedFile-radius) border-(length:--cmp-chatAttachedFile-border-width) border-(--cmp-chatAttachedFile-border-color) bg-(--cmp-chatAttachedFile-bg)";
+    /** 콘텐츠 묶음 ↔ 제거 버튼 간격 */
+    readonly outerGap: "gap-(--cmp-chatAttachedFile-gap)";
+    /** 아이콘 칩 ↔ 파일명 간격 */
+    readonly contentGap: "gap-(--cmp-chatAttachedFile-content-gap)";
+    /** 클립 아이콘이 앉는 칩 — 내부 패딩·면·라운드 (높이는 아이콘+패딩이 정한다) */
+    readonly tile: "p-(--cmp-chatAttachedFile-icon-wrapper-padding) rounded-(--cmp-chatAttachedFile-icon-wrapper-radius) bg-(--cmp-chatAttachedFile-icon-wrapper-bg)";
+    /** 칩 안 클립 아이콘 크기(px). SVG width/height 는 속성값이라 CSS 변수를 못 받아 값으로 둔다 (토큰 값과 동일) */
+    readonly iconSize: 16;
+    /** 파일명 타이포 프리셋 */
+    readonly nameTypo: "typo-body-sm-default";
+    /** 파일명 텍스트색 */
+    readonly textColor: "text-(--cmp-chatAttachedFile-filename-color)";
+};

package/dist/components/SChatAttachedFile/index.d.ts

@@ -0,0 +1,2 @@
+export { SChatAttachedFile, type SChatAttachedFileProps } from './SChatAttachedFile';
+export { CHAT_ATTACHED_FILE_CONFIG } from './chatAttachedFile.config';

package/dist/components/SChatFile/README.md

@@ -0,0 +1,33 @@
+# SChatFile
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SChatFile
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | — | 파일명. 칸을 넘치면 말줄임된다 — 칸의 폭은 부모가 정한다. |
+| `extension?` | `string` | — | 보조 줄에 쓸 형식. 주지 않으면 **파일명의 마지막 점 뒤**를 쓴다. 파일명에서 뽑는 것이 틀리는 자리에서만 준다 — 확장자가 없거나(`README`), 확장자처럼 안 생겼거나(`backup.2026` → `2026`), 두 마디인 경우(`archive.tar.gz` → `gz`). 그 밖에는 주지 않는 편이 낫다. 파일명과 어긋난 형식이 적히는 일을 막는다. 앞의 점과 대소문자는 알아서 정리한다 — `'.CSV'` 와 `'csv'` 가 같게 나온다. |
+| `size` | `number` | — | 파일 크기(바이트). 형식(`extension`)과 묶어 `csv / 9.4KB` 로 그린다. **바이트 수를 그대로 넘긴다** — `'9.4KB'` 같은 완성된 문자열이 아니다. 표기를 앱이 만들면 같은 파일이 화면마다 다른 크기로 읽히므로 서식은 디자인 시스템이 쥔다. 서버가 준 바이트 수를 그대로 넘기면 된다. **필수다** — 보낸 파일은 확장자와 크기를 반드시 밝힌다. 선택으로 두면 빠뜨려도 타입이 통과하고 화면에서 보조 줄만 조용히 사라진다. |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onFileClick` | `() => void` | 칸을 눌렀을 때 — 파일을 여는 자리다. **필수다** — 보낸 파일은 언제나 열 수 있다. 선택으로 두면 빠뜨려도 타입이 통과하고, 커서·hover 면까지 갖춘 칸이 눌러도 아무 일이 없는 화면이 조용히 나간다. 루트가 `div` 라 `role="button"`·`tabIndex`·Enter/Space 를 DS 가 함께 붙인다 — 앱이 `onClick` 만 직접 달면 키보드로 닿지 않는 칸이 되므로 그 대신 이걸 쓴다. |
+
+## Dependencies
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SChatFile --> SIcon
+  style SChatFile fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SChatFile/SChatFile.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from 'react';
+export interface SChatFileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 파일명. 칸을 넘치면 말줄임된다 — 칸의 폭은 부모가 정한다. */
+    name: string;
+    /**
+     * 보조 줄에 쓸 형식. 주지 않으면 **파일명의 마지막 점 뒤**를 쓴다.
+     *
+     * 파일명에서 뽑는 것이 틀리는 자리에서만 준다 — 확장자가 없거나(`README`),
+     * 확장자처럼 안 생겼거나(`backup.2026` → `2026`), 두 마디인 경우(`archive.tar.gz` → `gz`).
+     * 그 밖에는 주지 않는 편이 낫다. 파일명과 어긋난 형식이 적히는 일을 막는다.
+     *
+     * 앞의 점과 대소문자는 알아서 정리한다 — `'.CSV'` 와 `'csv'` 가 같게 나온다.
+     */
+    extension?: string;
+    /**
+     * 파일 크기(바이트). 형식(`extension`)과 묶어 `csv / 9.4KB` 로 그린다.
+     *
+     * **바이트 수를 그대로 넘긴다** — `'9.4KB'` 같은 완성된 문자열이 아니다. 표기를 앱이 만들면
+     * 같은 파일이 화면마다 다른 크기로 읽히므로 서식은 디자인 시스템이 쥔다. 서버가 준 바이트 수를
+     * 그대로 넘기면 된다.
+     *
+     * **필수다** — 보낸 파일은 확장자와 크기를 반드시 밝힌다. 선택으로 두면 빠뜨려도 타입이
+     * 통과하고 화면에서 보조 줄만 조용히 사라진다.
+     */
+    size: number;
+    /**
+     * 칸을 눌렀을 때 — 파일을 여는 자리다.
+     *
+     * **필수다** — 보낸 파일은 언제나 열 수 있다. 선택으로 두면 빠뜨려도 타입이 통과하고,
+     * 커서·hover 면까지 갖춘 칸이 눌러도 아무 일이 없는 화면이 조용히 나간다.
+     *
+     * 루트가 `div` 라 `role="button"`·`tabIndex`·Enter/Space 를 DS 가 함께 붙인다 — 앱이
+     * `onClick` 만 직접 달면 키보드로 닿지 않는 칸이 되므로 그 대신 이걸 쓴다.
+     */
+    onFileClick: () => void;
+}
+export declare const SChatFile: import("react").ForwardRefExoticComponent<SChatFileProps & import("react").RefAttributes<HTMLDivElement>>;