@weing-dev/ui-kit-primitive 0.0.0

package/src/components/WeeklyCalendar/weeklyCalendar.util.ts

@@ -0,0 +1,583 @@
+import dayjs from "dayjs";
+
+interface GetNearestStepTimeParams {
+  clickOffsetY: number; // 클릭된 y좌표(상단에서부터 px)
+  columnHeight: number; // 이 컬럼 전체 높이(px)
+  date: string; // 예: "2025-01-15" (해당 칼럼의 날짜)
+  minHour?: number; // 예: 7 (07:00)
+  maxHour?: number; // 예: 22 (22:00)
+  step?: number; // 분 단위 간격, 기본 15
+}
+
+/**
+ * 클릭한 지점에 가장 가까운 시간을 계산
+ */
+export function getNearestStepTime(params: GetNearestStepTimeParams) {
+  const {
+    clickOffsetY,
+    columnHeight,
+    date,
+    minHour = 0,
+    maxHour = 24,
+    step = 15,
+  } = params;
+
+  // 1) 0~1 사이로 정규화
+  const ratio = clickOffsetY / columnHeight;
+
+  // 경계 바깥 클릭시 보정 (선택사항)
+  const clampedRatio = Math.max(0, Math.min(1, ratio));
+
+  // 2) 전체 시간 범위(시간) X ratio → 실제 몇 시간 지점인지
+  const totalHours = maxHour - minHour;
+  const hourFloat = minHour + clampedRatio * totalHours;
+
+  // 3) 시간 → 분 단위로 변환
+  const totalMinutes = hourFloat * 60;
+
+  // 4) step(분) 단위 반올림
+  //    예: step=15 → 0, 15, 30, 45
+  const remainder = totalMinutes % step;
+  const halfStep = step / 2;
+  let nearestMinutes = 0;
+  if (remainder >= halfStep) {
+    // 올림
+    nearestMinutes = totalMinutes + (step - remainder);
+  } else {
+    // 내림
+    nearestMinutes = totalMinutes - remainder;
+  }
+
+  // 5) 시간/분 재계산
+  const finalHour = Math.floor(nearestMinutes / 60);
+  const finalMinute = Math.floor(nearestMinutes % 60);
+
+  // 6) dayjs로 날짜+시간 객체 생성
+  const resultTime = dayjs(date)
+    .startOf("day") // date의 00:00
+    .add(finalHour, "hour") // 시
+    .add(finalMinute, "minute"); // 분
+
+  return resultTime;
+}
+
+interface EventItem {
+  /** 고유 ID */
+  id: string;
+  /** 제목 */
+  title?: string;
+  /** 시작 시간 */
+  startTime: string; // "2025-01-15 22:00"
+  /** 종료 시간 (없으면 종일) */
+  endTime?: string; // 없는 경우(undefined)도 가능
+  /** 생성 시간 */
+  createdAt: string; // "2025-01-10 09:00"
+  /** 실제 시작시간 */
+  realStartTime?: string; // 시작 시간
+  /** 실제 종료시간 */
+  realEndTime?: string; // 하루가 넘어가는 경우 실제 종료 시간
+  /** 종일 이벤트 여부 */
+  isAllDay?: boolean;
+}
+
+export interface SplittedEventItem extends EventItem {
+  realStartTime: string; // 시작 시간
+  realEndTime?: string; // 하루가 넘어가는 경우 실제 종료 시간
+}
+/**
+ * 하나의 이벤트를 "24시간 이상"이면 isAllDay=true (분할 없음),
+ * 24시간 미만이면 날짜별로 분할(자정단위) -> isAllDay=false
+ */
+export function splitEventConsideringAllDay(
+  event: EventItem
+): SplittedEventItem[] {
+  const { id, startTime, endTime, createdAt } = event;
+  const start = dayjs(startTime);
+
+  // (A) endTime이 없는 경우 -> 종일(All-day) 처리
+  if (!endTime) {
+    // endTime이 undefined → isAllDay = true
+    return [
+      {
+        ...event, // id, startTime, createdAt 그대로
+        isAllDay: true,
+      } as SplittedEventItem,
+    ];
+  }
+
+  // (B) endTime이 있는 경우
+  const end = dayjs(endTime);
+
+  // (1) 이상 데이터: end < start
+  if (end.isBefore(start)) {
+    // 여기서는 그냥 isAllDay=false로 1개 반환 (또는 예외처리)
+    return [
+      {
+        ...event,
+        isAllDay: false,
+        realStartTime: start.format("YYYY-MM-DD HH:mm:ss"),
+        realEndTime: end.format("YYYY-MM-DD HH:mm:ss"),
+      } as SplittedEventItem,
+    ];
+  }
+
+  // (2) 24시간 이상인지
+  const diffHours = end.diff(start, "hours", true);
+  if (diffHours >= 24) {
+    // 종일
+    return [
+      {
+        ...event,
+        isAllDay: true,
+        realStartTime: start.format("YYYY-MM-DD HH:mm:ss"),
+        realEndTime: end.format("YYYY-MM-DD HH:mm:ss"),
+      } as SplittedEventItem,
+    ];
+  }
+
+  // (3) 24h 미만 → 날짜별로 분할(자정 경계)
+  const results: SplittedEventItem[] = [];
+  let currentStart = start.clone();
+
+  while (currentStart.isBefore(end)) {
+    const endOfDay = currentStart.endOf("day"); // 23:59:59.999
+    const currentEnd = endOfDay.isBefore(end) ? endOfDay : end;
+
+    results.push({
+      ...event,
+      id,
+      createdAt,
+      // 여기서는 endTime이 존재 -> currentEnd도 잘 정의됨
+      startTime: currentStart.format("YYYY-MM-DD HH:mm:ss"),
+      endTime: currentEnd.format("YYYY-MM-DD HH:mm:ss"),
+      isAllDay: false,
+      realStartTime: start.format("YYYY-MM-DD HH:mm:ss"),
+      realEndTime: end.format("YYYY-MM-DD HH:mm:ss"),
+    });
+
+    currentStart = currentEnd.add(1, "millisecond");
+  }
+
+  return results;
+}
+
+/**
+ * 여러 이벤트 목록에 대해 splitEventConsideringAllDay을 적용
+ */
+export function splitEventsConsideringAllDay<T extends EventItem>(
+  events: T[]
+): SplittedEventItem[] {
+  const result: SplittedEventItem[] = [];
+
+  for (const ev of events) {
+    const splitted = splitEventConsideringAllDay(ev);
+
+    // console.log(splitted);
+    result.push(...splitted);
+  }
+
+  return result;
+}
+
+interface GetTopHeightPercentParams {
+  startTime: string; // 예: "2025-01-15 09:07"
+  endTime: string; // 예: "2025-01-15 10:28"
+  minHour: number; // 예: 7  (07:00)
+  maxHour: number; // 예: 22 (22:00)
+}
+
+/** 시작 시간, 끝시간, 최소시간, 최대시간 */
+function getTopHeightPercent({
+  startTime,
+  endTime,
+  minHour,
+  maxHour,
+}: GetTopHeightPercentParams) {
+  const start = dayjs(startTime);
+  const end = dayjs(endTime);
+
+  const baseDay = start.startOf("day");
+  const minTime = baseDay.add(minHour, "hour").valueOf();
+  const maxTime = baseDay.add(maxHour, "hour").valueOf();
+  const totalRange = maxTime - minTime;
+
+  let sVal = start.valueOf();
+  let eVal = end.valueOf();
+
+  // 경계 클램핑
+  if (sVal < minTime) sVal = minTime;
+  if (eVal > maxTime) eVal = maxTime;
+  if (eVal < sVal) eVal = sVal;
+
+  const startRatio = (sVal - minTime) / totalRange;
+  const endRatio = (eVal - minTime) / totalRange;
+
+  const topPercent = startRatio * 100;
+  const heightPercent = Math.max(0, endRatio - startRatio) * 100;
+
+  return { topPercent, heightPercent };
+}
+
+interface PositionedEvent {
+  id: string;
+  topPercent: number;
+  heightPercent: number;
+  widthPercent: number;
+  leftPercent: number;
+  zIndex: number;
+  title?: string;
+  startTime: string;
+  endTime?: string;
+  realStartTime?: string;
+  realEndTime?: string;
+  isAllDay?: boolean;
+}
+
+interface LayoutEventsParams {
+  events: EventItem[];
+  minHour: number;
+  maxHour: number;
+}
+
+/**
+ * 1) Line-sweep: 부분 겹침(포함관계)도 각자 다른 columnIndex
+ *    -> widthPercent = 100 / columnsCount, left = columnIndex * widthPercent
+ * 2) zIndex: 겹치는 이벤트끼리 "짧거나, 더 최신(createdAt 큰)이 더 위"
+ */
+/**
+ * - (startTime ASC) → (endTime ASC) → (title) → (createdAt ASC)
+ * - 부분 겹침(포함관계)도 각자 columnIndex 달리하여 폭 줄임
+ * - 동일 시간대(정확히 start=end)도 결국 같은 시점에 들어오면 columnIndex 분배
+ * - zIndex: 겹침 시 "짧거나(또는 createdAt 최신)"가 위
+ */
+export function layoutEventsWithColumns({
+  events,
+  minHour,
+  maxHour,
+}: LayoutEventsParams): PositionedEvent[] {
+  // 1) 정렬
+  const sorted = [...events].sort((a, b) => {
+    const aStart = dayjs(a.startTime).valueOf();
+    const bStart = dayjs(b.startTime).valueOf();
+    if (aStart !== bStart) return aStart - bStart;
+
+    // endTime이 없으면 = start
+    const aEnd = a.endTime ? dayjs(a.endTime).valueOf() : aStart;
+    const bEnd = b.endTime ? dayjs(b.endTime).valueOf() : bStart;
+    if (aEnd !== bEnd) return aEnd - bEnd;
+
+    // [추가] title 알파벳 순으로도 정렬
+    const titleA = a.title || "";
+    const titleB = b.title || "";
+    if (titleA !== titleB) {
+      return titleA.localeCompare(titleB);
+    }
+
+    // createdAt ASC
+    return dayjs(a.createdAt).valueOf() - dayjs(b.createdAt).valueOf();
+  });
+
+  // 임시 구조
+  interface TempEvent {
+    id: string;
+    title?: string;
+    startVal: number; // ms
+    endVal: number; // ms
+    duration: number;
+    created: number;
+    columnIndex: number;
+    columnsCount: number;
+    topPercent: number;
+    heightPercent: number;
+    zIndex: number;
+    startStr: string;
+    endStr: string;
+    realStartTime?: string;
+    realEndTime?: string;
+  }
+  const tempList: TempEvent[] = [];
+
+  // 현재 진행중인 이벤트
+  const active: { ev: TempEvent }[] = [];
+
+  // 끝난 이벤트 제거
+  function removeEnded(currentStart: number) {
+    for (let i = active.length - 1; i >= 0; i--) {
+      if (active[i].ev.endVal <= currentStart) {
+        active.splice(i, 1);
+      }
+    }
+  }
+
+  // 사용 중인 columnIndex 중 빈자리 찾기
+  function findAvailableColumnIndex(): number {
+    const used = new Set<number>();
+    for (const a of active) {
+      used.add(a.ev.columnIndex);
+    }
+    let c = 0;
+    while (used.has(c)) {
+      c++;
+    }
+    return c;
+  }
+
+  // 2) 순회하며 columnIndex 배정
+  for (const e of sorted) {
+    const stVal = dayjs(e.startTime).valueOf();
+    const edVal = e.endTime ? dayjs(e.endTime).valueOf() : stVal;
+
+    // 이미 끝난 이벤트 제거
+    removeEnded(stVal);
+
+    // 시간 비율 계산
+    const actualEnd = e.endTime || e.startTime;
+    const { topPercent, heightPercent } = getTopHeightPercent({
+      startTime: e.startTime,
+      endTime: actualEnd,
+      minHour,
+      maxHour,
+    });
+
+    // 새로운 임시 이벤트
+    const t: TempEvent = {
+      ...e,
+      startVal: stVal,
+      endVal: edVal,
+      duration: edVal - stVal,
+      created: dayjs(e.createdAt).valueOf(),
+      columnIndex: -1,
+      columnsCount: 1,
+      topPercent,
+      heightPercent,
+      zIndex: 1,
+      startStr: e.startTime,
+      endStr: e.endTime || e.startTime,
+      realStartTime: (e as SplittedEventItem).realStartTime,
+      realEndTime: (e as SplittedEventItem).realEndTime,
+    };
+
+    // 칼럼 할당
+    const colIndex = findAvailableColumnIndex();
+    t.columnIndex = colIndex;
+
+    // 활성화 목록에 추가
+    active.push({ ev: t });
+
+    // columnsCount = 현재 active에서 columnIndex max + 1
+    let maxCol = 0;
+    for (const a of active) {
+      if (a.ev.columnIndex > maxCol) {
+        maxCol = a.ev.columnIndex;
+      }
+    }
+    const curCount = maxCol + 1;
+
+    // active 전부 columnsCount 갱신 (동시에 겹치는 애들은 같은 colCount)
+    for (const a of active) {
+      a.ev.columnsCount = Math.max(a.ev.columnsCount, curCount);
+    }
+
+    tempList.push(t);
+  }
+
+  // 3) zIndex 계산 (부분 겹침이면 "짧거나(혹은 더 최신)"가 위)
+  //    모든 쌍 비교
+  for (let i = 0; i < tempList.length; i++) {
+    for (let j = i + 1; j < tempList.length; j++) {
+      const A = tempList[i];
+      const B = tempList[j];
+      const overlap = A.startVal < B.endVal && B.startVal < A.endVal;
+      if (!overlap) continue;
+
+      if (A.duration !== B.duration) {
+        // 더 짧은 이벤트가 위
+        if (A.duration < B.duration) {
+          if (A.zIndex <= B.zIndex) A.zIndex = B.zIndex + 1;
+        } else {
+          if (B.zIndex <= A.zIndex) B.zIndex = A.zIndex + 1;
+        }
+      } else {
+        // 길이 동일 -> createdAt 비교
+        if (A.created < B.created) {
+          // B가 더 최신
+          if (B.zIndex <= A.zIndex) B.zIndex = A.zIndex + 1;
+        } else if (A.created > B.created) {
+          // A가 더 최신
+          if (A.zIndex <= B.zIndex) A.zIndex = B.zIndex + 1;
+        }
+      }
+    }
+  }
+
+  // 4) 최종 PositionedEvent 변환
+  //    widthPercent = 100 / columnsCount,
+  //    leftPercent = columnIndex * widthPercent
+  const positioned: PositionedEvent[] = tempList.map((t) => {
+    const w = 100 / t.columnsCount;
+    const left = w * t.columnIndex;
+
+    const result = {
+      ...t,
+      leftPercent: left,
+      widthPercent: w,
+      startTime: t.startStr,
+      endTime: t.endStr,
+    };
+    return result;
+  });
+
+  return positioned;
+}
+
+// interface GetPositionsForEventsParams {
+//   events: EventItem[];
+//   minHour: number; // 예) 0 or 7
+//   maxHour: number; // 예) 24 or 22
+// }
+
+// /**
+//  * - 동일 시간대(start+end 모두 동일) → n등분 width, left = i*(100/n)
+//  * - 부분 겹침(포함관계) → 둘 다 width=100%, left=0, zIndex로만 위/아래
+//  * - zIndex: 더 짧은/또는 createdAt 최신이 더 위
+//  */
+// export function getPositionsForEvents({
+//   events,
+//   minHour,
+//   maxHour,
+// }: GetPositionsForEventsParams): PositionedEvent[] {
+//   // (1) 정렬: startTime ASC → endTime ASC → createdAt ASC
+//   const sorted = [...events].sort((a, b) => {
+//     const aStart = dayjs(a.startTime).valueOf();
+//     const bStart = dayjs(b.startTime).valueOf();
+//     if (aStart !== bStart) return aStart - bStart;
+
+//     const aEnd = a.endTime ? dayjs(a.endTime).valueOf() : aStart;
+//     const bEnd = b.endTime ? dayjs(b.endTime).valueOf() : bStart;
+//     if (aEnd !== bEnd) return aEnd - bEnd;
+
+//     return dayjs(a.createdAt).valueOf() - dayjs(b.createdAt).valueOf();
+//   });
+
+//   // (2) 각 이벤트에 top%, height%, duration, createdAtMs 세팅
+//   const extended = sorted.map((ev) => {
+//     const endTime = ev.endTime || ev.startTime;
+//     const { topPercent, heightPercent } = getTopHeightPercent({
+//       startTime: ev.startTime,
+//       endTime,
+//       minHour,
+//       maxHour,
+//     });
+//     const durationMs = dayjs(endTime).diff(dayjs(ev.startTime));
+//     const createdAtMs = dayjs(ev.createdAt).valueOf();
+
+//     return {
+//       ...ev,
+//       topPercent,
+//       heightPercent,
+//       durationMs,
+//       createdAtMs,
+
+//       // 초기
+//       widthPercent: 100,
+//       leftPercent: 0,
+//       zIndex: 1,
+//     };
+//   });
+
+//   // (3) "동일 시간대" 그룹화 (startTime+endTime 동일)
+//   const sameTimeGroups: Record<string, typeof extended> = {};
+
+//   extended.forEach((item) => {
+//     const itemEnd = item.endTime || item.startTime;
+//     const key = `${item.startTime}||${itemEnd}`;
+//     if (!sameTimeGroups[key]) {
+//       sameTimeGroups[key] = [];
+//     }
+//     sameTimeGroups[key].push(item);
+//   });
+
+//   // 그룹 내 n개 → 폭 = 100/n, left = i*(100/n)
+//   // zIndex: createdAt 최신이 더 위
+//   Object.values(sameTimeGroups).forEach((group) => {
+//     if (group.length <= 1) return;
+
+//     // n등분
+//     const n = group.length;
+//     const w = 100 / n;
+//     // createdAt ASC 정렬 → 가장 최근이 제일 뒤
+//     group.sort((a, b) => a.createdAtMs - b.createdAtMs);
+
+//     group.forEach((item, i) => {
+//       item.widthPercent = w;
+//       item.leftPercent = w * i;
+//       item.zIndex = i + 1; // i가 클수록(=createdAt 최신) → 더 높음
+//     });
+//   });
+
+//   // (4) 부분 겹침(단, 완전히 동일 start/end가 아님) → width=100%, left=0, zIndex만
+//   //     - 쌍대 비교 (O(n^2))
+//   for (let i = 0; i < extended.length; i++) {
+//     for (let j = i + 1; j < extended.length; j++) {
+//       const A = extended[i];
+//       const B = extended[j];
+
+//       const Aend = A.endTime || A.startTime;
+//       const Bend = B.endTime || B.startTime;
+//       const sA = dayjs(A.startTime).valueOf();
+//       const eA = dayjs(Aend).valueOf();
+//       const sB = dayjs(B.startTime).valueOf();
+//       const eB = dayjs(Bend).valueOf();
+
+//       const isOverlap = sA < eB && sB < eA;
+//       if (!isOverlap) continue;
+
+//       // 이미 "동일 시간대"면 위에서 폭 분할 끝.
+//       // 여기선 부분 겹침 => width=100, left=0 (기본값),
+//       // zIndex만 더 짧은(혹은 최신)이 위
+//       // (1) 길이 비교
+//       if (A.durationMs !== B.durationMs) {
+//         // 더 짧은 게 위
+//         if (A.durationMs < B.durationMs) {
+//           if (A.zIndex <= B.zIndex) {
+//             A.zIndex = B.zIndex + 1;
+//           }
+//         } else {
+//           if (B.zIndex <= A.zIndex) {
+//             B.zIndex = A.zIndex + 1;
+//           }
+//         }
+//       } else {
+//         // (2) 길이 동일 → createdAt 비교
+//         if (A.createdAtMs < B.createdAtMs) {
+//           if (B.zIndex <= A.zIndex) {
+//             B.zIndex = A.zIndex + 1;
+//           }
+//         } else if (A.createdAtMs > B.createdAtMs) {
+//           if (A.zIndex <= B.zIndex) {
+//             A.zIndex = B.zIndex + 1;
+//           }
+//         }
+//       }
+//     }
+//   }
+
+//   // (5) 최종 매핑
+//   const positioned: PositionedEvent[] = extended.map((item) => {
+//     const eEnd = item.endTime || item.startTime;
+//     return {
+//       id: item.id,
+//       title: item.title,
+//       startTime: dayjs(item.startTime).format("YYYY-MM-DDTHH:mm:ss"),
+//       endTime: dayjs(eEnd).format("YYYY-MM-DDTHH:mm:ss"),
+
+//       topPercent: item.topPercent,
+//       heightPercent: item.heightPercent,
+//       widthPercent: item.widthPercent,
+//       leftPercent: item.leftPercent,
+//       zIndex: item.zIndex,
+//     };
+//   });
+
+//   return positioned;
+// }