sellmate-design-system-react 9.0.0-beta.63 → 9.0.0-beta.64

package/AGENTS.md

@@ -1701,17 +1701,18 @@ useEffect(() => {
 | 연도+월 선택 리스트만 필요하다 (트리거·팝오버는 직접 조합) | `SDatePickerMonthListbox` |
 | **시작~종료** 를 값으로 받는다 | `SDateRangePicker` |
 | 달력 격자 **자체가 화면 콘텐츠** 다 (날짜를 고르게 한다) | `SCalendar` |
-| 한 달치 **일정을 읽게** 펼친다 (칸마다 여러 건) | `SCalendarBoard` |
+| 한 달치 **일정을 읽게** 펼친다 (칸마다 여러 건, 여러 날에 걸친 일정 포함) | `SCalendarBoard` |
 
 - **기간을 `SDatePicker` 두 개로 만들지 않는다.** 시작이 종료보다 뒤인 입력을 막는 검증과 한쪽만 고른 중간 상태 처리가 `SDateRangePicker` 안에 이미 있다. 두 개로 쪼개면 그게 전부 앱 몫이 된다.
 - `SDatePicker`·`SDateRangePicker` 는 내부적으로 `SCalendar` 를 팝오버로 띄운다. 값을 받는 자리에 `SCalendar` 를 직접 쓰지 않는다.
 - **`SCalendar` 와 `SCalendarBoard` 는 방향이 반대다.** `SCalendar` 는 날짜를 **고르는** 달력(칸에는 점만 찍힌다)이고, `SCalendarBoard` 는 일정을 **읽는** 달력이다 — 칸마다 일정이 줄로 쌓이고, 칸 높이에 담기는 줄 수를 넘으면 "N개 더보기" 로 접히고, **"더보기" 또는 일정이 있는 칸 아무 데나** 누르면 **그 칸을 덮으며 뜨는 판**에 그 날짜의 일정이 전부 펼쳐진다. 폭도 다르다: `SCalendar` 는 제 폭을 갖는 요소, `SCalendarBoard` 는 페이지 폭을 채우는 블록이다.
 - **`SCalendarBoard` 는 기본이 읽기 전용 판이다.** 날짜 칸을 눌러 **고르게** 하려면 `selectable` 을 켠다 — 켜야 `onValueChange(date, events)` 로 고른 날짜와 **그 날짜의 일정**이 함께 온다. 다만 **일정이 있는 칸은 `selectable` 과 무관하게 눌린다** — 그때는 목록 판이 열린다. 둘 다 켜져 있으면 고르기와 열기가 함께 일어난다. 일정 버튼과 "N개 더보기" 도 항상 눌린다.
+- **여러 날에 걸친 일정은 `events[].endDate` 로 준다.** 그날까지(그날 포함) **칸 경계를 넘어 하나의 막대로** 이어져 그려진다. 같은 일정을 날짜 수만큼 쪼개 넣지 않는다 — 쪼개면 칸마다 막대가 끊겨 보이고, 목록 판과 `onValueChange` 에도 건수가 부풀려 나간다. 줄은 **주 단위**로 정해져서, 막대가 지나가는 칸은 그 줄을 비워 두므로 다른 일정과 겹치지 않는다. 주 경계에서는 줄이 바뀌므로 조각이 나뉘고 **잘린 쪽 모서리가 평평해진다** — 앞/뒤로 이어진다는 표시다. **막대가 걸친 날은 모두 그 일정을 가진 날이다** — 어느 칸을 눌러도 목록 판에 함께 나오고 `onValueChange` 에도 실려 온다. `endDate` 가 `date` 보다 앞서면 하루짜리로 본다.
 - **칸 배경과 일정 색은 다른 층이다.** 그날의 성격(마감·완료·휴무 등)은 `dayColors` 로 **칸 전체**에 칠하고(`default` `danger` `accent` `complete` `dim`), 일정 하나의 색은 `events[].color` 로 준다. 둘을 섞어 쓰면 서로를 가리지 않고 함께 읽힌다.
 - 일정 왼쪽의 색 점은 `SBadge` 다 — `events[].color` 프리셋이 점 색까지 정하고, 따로 주려면 `dotColor` 에 `SBadge` 색(`SBadgeColor`) 중 하나를 넣는다 (§3-1).
 - **칸 본문을 통째로 바꾸려면 `dayContent` 다.** 일정으로 표현되지 않는 그날치 요약(재고·매출 같은)을 칸에 얹을 때 쓴다. **슬롯을 준 날짜는 그 날짜의 `events` 를 그리지 않고 목록 판도 열지 않는다** — 한 칸에 둘을 겹쳐 담지 않는다. 일정과 요약을 함께 보여야 하면 요약을 일정 한 건(`events[]`)으로 넣는다.
 - **`SCalendarBoard` 는 높이를 부모에게서 받는다.** 행이 그 높이를 균등하게 나눠 갖고, 칸 높이가 다시 "한 칸에 몇 줄이 보일지" 를 정한다. 그래서 **놓는 자리에 높이를 준다** — 페이지 본문의 남은 높이를 채우려면 `SPage` 안에서 스택을 `flex-1 min-h-0` 으로 두고 판에 `h-full` 을 준다. 높이를 주지 않으면 칸이 최소 높이로 주저앉아 한두 줄만 보인다.
-- **한 칸에 몇 줄을 펼칠지는 컴포넌트가 잰다.** 조절하는 prop 이 없다 — 칸 높이에서 나오는 값이라 따로 정할 것이 아니다. 줄이 넘치면 마지막 한 줄을 "N개 더보기" 에 내주므로 **접히든 아니든 칸 높이가 같다.** **소비 앱이 `events` 를 미리 잘라 넘기지 않는다.** 잘라 넘기면 "N개 더보기" 의 수가 실제 건수와 어긋나고, 눌러도 나머지가 나오지 않는다.
+- **한 칸에 몇 줄을 펼칠지는 컴포넌트가 잰다.** 조절하는 prop 이 없다 — 칸 높이에서 나오는 값이라 따로 정할 것이 아니다. 줄이 넘치면 마지막 한 줄을 "N개 더보기" 에 내주므로 **접히든 아니든 칸 높이가 같다.** 기간 막대가 접히면 **걸친 날마다 한 건으로** 세므로 날짜별 "N개" 가 서로 다를 수 있다. **소비 앱이 `events` 를 미리 잘라 넘기지 않는다.** 잘라 넘기면 "N개 더보기" 의 수가 실제 건수와 어긋나고, 눌러도 나머지가 나오지 않는다.
 - **`events[].label` 은 필수다** — 일정이 무엇인지 알리는 부분이라 비워 두지 않는다. 인라인 HTML 을 받으므로 부분 강조가 필요할 때만 태그를 쓰고, 나머지는 `description`·`value` 로 나눠 담는다. 칸이 좁아지면 `label`+`description` 이 한 덩어리로 말줄임되고 `value` 만 끝에 온전히 남는다 — **금액·수량은 반드시 `value` 에 담는다.** `description` 에 넣으면 잘린다.
 - `SDatePickerYearListbox`·`SDatePickerMonthListbox` 는 `SDatePicker` 의 mode listbox 조각만 떼어낸 컴포넌트다. 일반 폼 입력에는 `SDatePicker mode="year" | "month"` 를 우선 쓰고, 다른 트리거·팝오버 안에 리스트만 끼워 넣을 때만 직접 쓴다.
 

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

@@ -1,9 +1,10 @@
 import { type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';
+import type { CalendarBoardSegment } from './calendar-board-layout';
 import { type SCalendarBoardDayColor } from './calendarBoard.config';
 import type { SCalendarBoardEvent } from './types';
 /**
  * 달력의 날짜 한 칸 (SCalendarBoard 내부 조립 요소).
- * 위에 날짜 숫자, 아래에 일정 목록과 "N개 더보기" 가 쌓인다.
+ * 위에 날짜 숫자가 서고, 그 아래로 일정 막대가 줄 단위로 얹힌다.
  * `body` 를 받은 칸은 아래를 통째로 그것에 내준다 — 일정은 그리지 않는다.
  */
 export declare const CalendarDayCard: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
@@ -19,8 +20,13 @@ export declare const CalendarDayCard: import("react").ForwardRefExoticComponent<
     selectable: boolean;
     /** 칸 배경 */
     color: SCalendarBoardDayColor;
-    /** 이 칸에 펼쳐 그릴 일정 */
-    events: SCalendarBoardEvent[];
+    /**
+     * **이 칸에서 시작하는** 일정 막대. 여러 날에 걸친 일정은 시작 칸이 그리고 오른쪽 칸 위로 뻗는다 —
+     * 지나가는 칸은 자기 줄을 비워 두므로(배치 계산이 이미 잡아 둔다) 겹치지 않는다.
+     */
+    segments: CalendarBoardSegment[];
+    /** 이 날짜에 걸친 일정 수 — 하나라도 있으면 칸을 눌러 목록 판을 열 수 있다 */
+    dayEventCount: number;
     /**
      * 일정 자리를 대신 차지할 칸 본문 (SCalendarBoard 의 `dayContent`).
      * 주면 일정·"더보기" 를 그리지 않는다. `content` 는 HTMLAttributes 가 이미 쓰는 이름이라 피했다.
@@ -28,6 +34,8 @@ export declare const CalendarDayCard: import("react").ForwardRefExoticComponent<
     body?: ReactNode;
     /** 접혀 있는 일정 수. 0 이면 "더보기" 를 그리지 않는다 */
     hiddenCount: number;
+    /** "더보기" 가 앉는 줄. 접힌 것이 없는 주는 -1 */
+    moreLane: number;
     /** 이 칸의 일정 목록 판이 열려 있는지 */
     isOpen: boolean;
     moreLabel?: string;

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

@@ -1,4 +1,4 @@
-import { type MouseEvent } from 'react';
+import { type CSSProperties, type MouseEvent } from 'react';
 import type { SCalendarBoardEvent } from './types';
 /**
  * 달력 칸/패널 안의 일정 한 줄 (SCalendarBoard 내부 조립 요소).
@@ -6,8 +6,13 @@ import type { SCalendarBoardEvent } from './types';
  * 점 → 레이블(강조) → 설명 → `/` → 값 순서로 한 줄에 눕는다.
  * 가운데 레이블 묶음만 줄어들고 값은 끝에 고정되므로, 좁은 칸에서도 금액이 잘리지 않는다.
  */
-export declare function CalendarEventButton({ event, onSelect, className, }: {
+export declare function CalendarEventButton({ event, onSelect, flatStart, flatEnd, className, style, }: {
     event: SCalendarBoardEvent;
     onSelect?: (event: SCalendarBoardEvent, e: MouseEvent<HTMLButtonElement>) => void;
+    /** 왼쪽 끝이 잘린 조각 — 앞 주에서 이어지므로 모서리를 평평하게 한다 */
+    flatStart?: boolean;
+    /** 오른쪽 끝이 잘린 조각 — 다음 주로 이어진다 */
+    flatEnd?: boolean;
     className?: string;
+    style?: CSSProperties;
 }): import("react").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { type MouseEvent } from 'react';
+import { type CSSProperties, type MouseEvent } from 'react';
 /**
  * 칸에 다 담기지 않은 일정 수를 알리는 "N개 더보기" 줄 (SCalendarBoard 내부 조립 요소).
  * 개수는 강조색, 뒷말은 본문색으로 갈라 개수가 먼저 읽히게 한다.
@@ -9,4 +9,5 @@ export declare const CalendarMoreButton: import("react").ForwardRefExoticCompone
     label?: string;
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     className?: string;
+    style?: CSSProperties;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/SCalendarBoard/README.md

@@ -14,7 +14,7 @@
 | `defaultMonth?` | `number` | — | 처음 보여줄 월 1-12 (비제어). 없으면 오늘 |
 | `selectable?` | `boolean` | `false` | 날짜 칸을 눌러 고를 수 있게 한다. 기본은 읽기 전용 판이다 — 켜야 칸에 커서·포커스·키보드(Enter·Space)가 붙고 `onValueChange` 가 온다. 일정 버튼과 "N개 더보기" 는 이 값과 무관하게 항상 눌린다. |
 | `value?` | `string \| null` | — | 선택 날짜 (YYYY-MM-DD). `selectable` 과 별개로 강조만 주고 싶을 때도 쓴다 |
-| `events?` | `SCalendarBoardEvent[]` | — | 날짜별 일정 목록. `date` 로 칸에 배분된다 |
+| `events?` | `SCalendarBoardEvent[]` | — | 일정 목록. `date`(시작)로 칸에 배분되고, `endDate` 를 주면 그날까지 **하나의 막대로 이어져** 칸 경계를 넘어 그려진다. |
 | `dayColors?` | `Record<string, SCalendarBoardDayColor>` | — | 날짜별 칸 배경. 키는 `YYYY-MM-DD`, 없는 날짜는 `'default'` 다. 그날의 성격(마감·완료·휴무 등)을 칸 전체로 알릴 때 쓴다 — 일정 하나의 색은 `events[].color` 다. |
 | `dayContent?` | `Record<string, ReactNode>` | — | 날짜별 칸 본문. 키는 `YYYY-MM-DD`, 준 날짜는 **일정 자리를 통째로 이 내용이 차지한다** — 그날의 `events` 는 그리지 않고 목록 판도 열리지 않는다. 일정으로 표현되지 않는 것(재고 현황· 매출 요약 같은 그날치 요약)을 칸에 그대로 얹을 때 쓴다. |
 | `todayLabel?` | `string` | `'오늘'` | 헤더 오른쪽 "오늘" 버튼 레이블. 빈 문자열이면 버튼을 그리지 않는다 |
@@ -52,8 +52,17 @@ export interface SCalendarBoardView {
 export interface SCalendarBoardEvent {
   /** 고유 식별자. 없으면 목록 순서로 key 를 만든다 */
   id?: string;
-  /** 날짜 (YYYY-MM-DD) */
+  /** 시작 날짜 (YYYY-MM-DD). 하루짜리 일정은 이것만 준다 */
   date: string;
+  /**
+   * 마지막 날 (YYYY-MM-DD, **그날 포함**). 주지 않거나 `date` 보다 앞서면 하루짜리로 본다.
+   *
+   * 여러 날에 걸친 일정은 칸 경계를 넘어 **하나의 막대로 이어져** 그려진다. 주 경계에서는 줄이
+   * 바뀌므로 조각이 나뉘고, 그렇게 잘린 쪽 모서리는 평평해져 "앞/뒤로 이어진다" 가 읽힌다.
+   *
+   * 막대가 걸친 날은 **모두** 그 일정을 가진 날로 친다 — 목록 판과 `onValueChange` 에 함께 온다.
+   */
+  endDate?: string;
   /**
    * 강조 레이블 (필수) — 예: `"[입고 예정]"`.
    * 일정이 무엇인지 한눈에 알리는 부분이라 비워 두지 않는다.

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

@@ -22,7 +22,10 @@ export interface SCalendarBoardProps {
     value?: string | null;
     /** 날짜 칸 선택 — 고른 날짜와 그 날짜의 일정이 함께 온다 (`selectable` 일 때만) */
     onValueChange?: (date: string, events: SCalendarBoardEvent[]) => void;
-    /** 날짜별 일정 목록. `date` 로 칸에 배분된다 */
+    /**
+     * 일정 목록. `date`(시작)로 칸에 배분되고, `endDate` 를 주면 그날까지 **하나의 막대로 이어져**
+     * 칸 경계를 넘어 그려진다.
+     */
     events?: SCalendarBoardEvent[];
     /**
      * 날짜별 칸 배경. 키는 `YYYY-MM-DD`, 없는 날짜는 `'default'` 다.

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

@@ -0,0 +1,49 @@
+/**
+ * 달력 판의 **일정 배치**를 계산한다 (순수 함수 — 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[];
+}
+/** 일정의 마지막 날. `endDate` 가 없거나 시작보다 앞서면 하루짜리로 본다 */
+export declare function eventEndDate(event: SCalendarBoardEvent): string;
+export declare function layoutCalendarBoard({ cells, events, rowCapacity, blockedDates, }: {
+    cells: readonly DayCell[];
+    events: readonly SCalendarBoardEvent[];
+    /** 칸 하나에 담기는 줄 수 */
+    rowCapacity: number;
+    /** 일정을 그리지 않는 날짜 (`dayContent` 를 받은 칸) */
+    blockedDates: ReadonlySet<string>;
+}): CalendarBoardLayout;

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

@@ -4,8 +4,17 @@ import type { SCalendarBoardEventColor } from './calendarBoard.config';
 export interface SCalendarBoardEvent {
     /** 고유 식별자. 없으면 목록 순서로 key 를 만든다 */
     id?: string;
-    /** 날짜 (YYYY-MM-DD) */
+    /** 시작 날짜 (YYYY-MM-DD). 하루짜리 일정은 이것만 준다 */
     date: string;
+    /**
+     * 마지막 날 (YYYY-MM-DD, **그날 포함**). 주지 않거나 `date` 보다 앞서면 하루짜리로 본다.
+     *
+     * 여러 날에 걸친 일정은 칸 경계를 넘어 **하나의 막대로 이어져** 그려진다. 주 경계에서는 줄이
+     * 바뀌므로 조각이 나뉘고, 그렇게 잘린 쪽 모서리는 평평해져 "앞/뒤로 이어진다" 가 읽힌다.
+     *
+     * 막대가 걸친 날은 **모두** 그 일정을 가진 날로 친다 — 목록 판과 `onValueChange` 에 함께 온다.
+     */
+    endDate?: string;
     /**
      * 강조 레이블 (필수) — 예: `"[입고 예정]"`.
      * 일정이 무엇인지 한눈에 알리는 부분이라 비워 두지 않는다.

package/dist/index.cjs

@@ -13717,6 +13717,98 @@ function monthCells(year, month) {
 }
 var WEEK_LABELS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 
+// src/components/SCalendarBoard/calendar-board-layout.ts
+function eventEndDate(event) {
+  const end = event.endDate;
+  return end != null && end > event.date ? end : event.date;
+}
+function layoutCalendarBoard({
+  cells,
+  events,
+  rowCapacity,
+  blockedDates
+}) {
+  const count = cells.length;
+  const weekCount = Math.ceil(count / 7);
+  const segmentsByCell = Array.from({ length: count }, () => []);
+  const eventsByCell = Array.from({ length: count }, () => []);
+  const hiddenCountByCell = new Array(count).fill(0);
+  const moreLaneByWeek = new Array(weekCount).fill(-1);
+  const runs = [];
+  events.forEach((event, order) => {
+    const start = event.date;
+    const end = eventEndDate(event);
+    let from = -1;
+    let to = -1;
+    for (let i = 0; i < count; i++) {
+      const { date } = cells[i];
+      if (date < start || date > end) continue;
+      if (from < 0) from = i;
+      to = i;
+      if (!blockedDates.has(date)) eventsByCell[i].push(event);
+    }
+    if (from < 0) return;
+    let runStart = -1;
+    const flush = (endIndex) => {
+      if (runStart < 0) return;
+      runs.push({ event, order, startIndex: runStart, endIndex, lane: -1 });
+      runStart = -1;
+    };
+    for (let i = from; i <= to; i++) {
+      if (blockedDates.has(cells[i].date)) {
+        flush(i - 1);
+        continue;
+      }
+      if (runStart >= 0 && i % 7 === 0) flush(i - 1);
+      if (runStart < 0) runStart = i;
+    }
+    flush(to);
+  });
+  runs.sort(
+    (a, b) => a.startIndex - b.startIndex || b.endIndex - b.startIndex - (a.endIndex - a.startIndex) || a.order - b.order
+  );
+  const weekLanes = Array.from({ length: weekCount }, () => []);
+  for (const run of runs) {
+    const week = Math.floor(run.startIndex / 7);
+    const fromDay = run.startIndex % 7;
+    const toDay = run.endIndex % 7;
+    const lanes = weekLanes[week];
+    let lane = 0;
+    for (; ; ) {
+      if (lanes[lane] == null) lanes[lane] = new Array(7).fill(false);
+      let free = true;
+      for (let d = fromDay; d <= toDay && free; d++) if (lanes[lane][d]) free = false;
+      if (free) break;
+      lane += 1;
+    }
+    for (let d = fromDay; d <= toDay; d++) lanes[lane][d] = true;
+    run.lane = lane;
+  }
+  for (let week = 0; week < weekCount; week++) {
+    if (weekLanes[week].length > rowCapacity) moreLaneByWeek[week] = rowCapacity - 1;
+  }
+  for (const run of runs) {
+    const week = Math.floor(run.startIndex / 7);
+    const moreLane = moreLaneByWeek[week];
+    const limit = moreLane < 0 ? rowCapacity : moreLane;
+    if (run.lane >= limit) {
+      for (let i = run.startIndex; i <= run.endIndex; i++) hiddenCountByCell[i] += 1;
+      continue;
+    }
+    const { event } = run;
+    segmentsByCell[run.startIndex].push({
+      event,
+      key: `${event.id ?? `${event.date}-${run.order}`}-${run.startIndex}`,
+      startIndex: run.startIndex,
+      span: run.endIndex - run.startIndex + 1,
+      lane: run.lane,
+      startsHere: cells[run.startIndex].date === event.date,
+      endsHere: cells[run.endIndex].date === eventEndDate(event)
+    });
+  }
+  return { segmentsByCell, eventsByCell, hiddenCountByCell, moreLaneByWeek };
+}
+
 // src/components/SCalendarBoard/calendarBoard.config.ts
 var CALENDAR_BOARD_EVENT_COLORS = [
   "default",
@@ -13761,7 +13853,10 @@ var CALENDAR_BOARD_DAY_BG = {
 function CalendarEventButton({
   event,
   onSelect,
-  className
+  flatStart = false,
+  flatEnd = false,
+  className,
+  style
 }) {
   const preset = CALENDAR_BOARD_EVENT_PRESETS[event.color ?? "default"];
   const dot = event.dotColor ?? preset.dot;
@@ -13781,10 +13876,13 @@ function CalendarEventButton({
         "h-(--cmp-calendarBoard-item-height) shrink-0 rounded-(--cmp-calendarBoard-item-radius)",
         "gap-(--cmp-calendarBoard-eventButton-inline-gap) px-(--cmp-calendarBoard-item-paddingX)",
         "bg-(--ceb-bg) text-(--cmp-calendarBoard-eventButton-text-color-default)",
+        // 잘린 쪽은 평평하게 — 다음 조각과 이어 보면 한 막대가 주 경계에서 나뉜 모양이 된다.
+        flatStart && "rounded-s-none",
+        flatEnd && "rounded-e-none",
         disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
         className
       ),
-      style: { "--ceb-bg": preset.bg },
+      style: { ...style, "--ceb-bg": preset.bg },
       onClick: (e) => {
         if (disabled) return;
         onSelect?.(event, e);
@@ -13794,7 +13892,7 @@ function CalendarEventButton({
           "span",
           {
             "aria-hidden": true,
-            className: "pointer-events-none absolute inset-0 rounded-(--cmp-calendarBoard-item-radius) bg-(--cmp-calendarBoard-eventButton-hover-overlay-color) opacity-0 transition-opacity group-hover:opacity-(--cmp-calendarBoard-eventButton-hover-overlay-opacity)"
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] bg-(--cmp-calendarBoard-eventButton-hover-overlay-color) opacity-0 transition-opacity group-hover:opacity-(--cmp-calendarBoard-eventButton-hover-overlay-opacity)"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(SBadge, { "aria-hidden": true, color: dot, className: "shrink-0" }),
@@ -13828,7 +13926,7 @@ function CalendarEventButton({
     }
   );
 }
-var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className }, ref) {
+var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className, style }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -13841,6 +13939,7 @@ var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreB
         "bg-(--cmp-calendarBoard-moreButton-bg)",
         className
       ),
+      style,
       onClick,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -13859,6 +13958,9 @@ var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreB
     }
   );
 });
+var HEADER_HEIGHT = "var(--cmp-calendarBoard-dayCard-header-paddingTop) + var(--cmp-calendarBoard-daySequence-size) + var(--cmp-calendarBoard-dayCard-header-paddingBottom)";
+var laneTop = (lane) => `calc(${HEADER_HEIGHT} + ${lane} * (var(--cmp-calendarBoard-item-height) + var(--cmp-calendarBoard-dayCard-grid-gap)))`;
+var spanWidth = (span) => `calc(${span} * 100% + ${span - 1}px - 2 * var(--cmp-calendarBoard-dayCard-paddingX))`;
 var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2({
   date,
   day,
@@ -13867,9 +13969,11 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
   isSelected,
   selectable,
   color,
-  events,
+  segments,
+  dayEventCount,
   body,
   hiddenCount,
+  moreLane,
   isOpen,
   moreLabel,
   onDaySelect,
@@ -13877,7 +13981,7 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
   onOpenEvents,
   ...rest
 }, ref) {
-  const hasEvents = events.length + hiddenCount > 0;
+  const hasEvents = dayEventCount > 0;
   const interactive = selectable || hasEvents;
   const activate = () => {
     if (hasEvents) onOpenEvents?.();
@@ -13912,7 +14016,7 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
           "span",
           {
             "aria-hidden": true,
-            className: "pointer-events-none absolute inset-[1px] rounded-(--cmp-calendarBoard-dayCard-focus-border-radius) border-(length:--cmp-calendarBoard-dayCard-focus-border-width) border-solid border-(--cmp-calendarBoard-dayCard-focus-border-color)"
+            className: "pointer-events-none absolute inset-[1px] z-20 rounded-(--cmp-calendarBoard-dayCard-focus-border-radius) border-(length:--cmp-calendarBoard-dayCard-focus-border-width) border-solid border-(--cmp-calendarBoard-dayCard-focus-border-color)"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 pt-(--cmp-calendarBoard-dayCard-header-paddingTop) pb-(--cmp-calendarBoard-dayCard-header-paddingBottom)", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -13931,39 +14035,41 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
             children: day
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        body != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col pb-(--cmp-calendarBoard-dayCard-grid-paddingBottom)", children: body }),
+        body == null && segments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarEventButton,
           {
-            className: cn(
-              "flex min-h-0 flex-col gap-(--cmp-calendarBoard-dayCard-grid-gap) pb-(--cmp-calendarBoard-dayCard-grid-paddingBottom)",
-              // 슬롯은 남는 세로를 다 갖는다 — 안에서 h-full 로 칸을 채울 수 있어야 한다.
-              body != null && "flex-1"
-            ),
-            children: [
-              body,
-              body == null && events.map((event, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                CalendarEventButton,
-                {
-                  event,
-                  onSelect: (ev, e) => {
-                    e.stopPropagation();
-                    onEventClick?.(ev, e);
-                  }
-                },
-                event.id ?? `${event.date}-${i}`
-              )),
-              hiddenCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                CalendarMoreButton,
-                {
-                  count: hiddenCount,
-                  label: moreLabel,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onOpenEvents?.();
-                  }
-                }
-              )
-            ]
+            event: segment.event,
+            flatStart: !segment.startsHere,
+            flatEnd: !segment.endsHere,
+            className: "absolute z-10",
+            style: {
+              top: laneTop(segment.lane),
+              left: "var(--cmp-calendarBoard-dayCard-paddingX)",
+              width: spanWidth(segment.span)
+            },
+            onSelect: (ev, e) => {
+              e.stopPropagation();
+              onEventClick?.(ev, e);
+            }
+          },
+          segment.key
+        )),
+        body == null && hiddenCount > 0 && moreLane >= 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarMoreButton,
+          {
+            count: hiddenCount,
+            label: moreLabel,
+            className: "absolute z-10",
+            style: {
+              top: laneTop(moreLane),
+              left: "var(--cmp-calendarBoard-dayCard-paddingX)",
+              width: spanWidth(1)
+            },
+            onClick: (e) => {
+              e.stopPropagation();
+              onOpenEvents?.();
+            }
           }
         )
       ]
@@ -14097,16 +14203,14 @@ function SCalendarBoard({
     observer.observe(cell);
     return () => observer.disconnect();
   }, [rowCount]);
-  const eventMap = react.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    (events ?? []).forEach((event) => {
-      const list = map.get(event.date);
-      if (list) list.push(event);
-      else map.set(event.date, [event]);
-    });
-    return map;
-  }, [events]);
-  const openEvents = openDate ? eventMap.get(openDate) ?? [] : [];
+  const layout = react.useMemo(() => {
+    const blockedDates = new Set(
+      cells.filter((cell) => dayContent?.[cell.date] != null).map((cell) => cell.date)
+    );
+    return layoutCalendarBoard({ cells, events: events ?? [], rowCapacity, blockedDates });
+  }, [cells, events, rowCapacity, dayContent]);
+  const openIndex = openDate == null ? -1 : cells.findIndex((cell) => cell.date === openDate);
+  const openEvents = openIndex < 0 ? [] : layout.eventsByCell[openIndex];
   react.useLayoutEffect(() => {
     if (openDate == null || panelEl == null) return;
     const cell = gridRef.current?.querySelector(`[data-date="${openDate}"]`);
@@ -14247,11 +14351,9 @@ function SCalendarBoard({
                     // 행은 판 높이를 균등하게 나눠 갖는다 — 일정이 많은 주만 길어지면 격자가 깨진다.
                     gridTemplateRows: `repeat(${rowCount}, minmax(var(--cmp-calendarBoard-dayCard-minHeight), 1fr))`
                   },
-                  children: cells.map((cell) => {
+                  children: cells.map((cell, index) => {
                     const content = dayContent?.[cell.date];
-                    const list = content == null ? eventMap.get(cell.date) ?? [] : [];
-                    const folded = list.length > rowCapacity;
-                    const visible = folded ? list.slice(0, rowCapacity - 1) : list;
+                    const list = layout.eventsByCell[index];
                     const card = /* @__PURE__ */ jsxRuntime.jsx(
                       CalendarDayCard,
                       {
@@ -14262,9 +14364,11 @@ function SCalendarBoard({
                         isSelected: value != null && value === cell.date,
                         selectable,
                         color: dayColors?.[cell.date] ?? "default",
-                        events: visible,
+                        segments: layout.segmentsByCell[index],
+                        dayEventCount: list.length,
                         body: content,
-                        hiddenCount: folded ? list.length - (rowCapacity - 1) : 0,
+                        hiddenCount: layout.hiddenCountByCell[index],
+                        moreLane: layout.moreLaneByWeek[Math.floor(index / 7)],
                         isOpen: openDate === cell.date,
                         moreLabel,
                         onDaySelect: (date) => onValueChange?.(date, list),