구글 캘린더 알고리즘의 비밀

// 1. 시간순 정렬 (Sort)
const sortedPlans = plans.sort(...); 

// 2. 그룹 묶기 (Reduce)
const planGroups = sortedPlans.reduce((acc, current) => {
  // 현재 그룹(acc.local)에 있는 일정 중 하나라도 '나'와 겹치는가?
  const hasOverlap = acc.local.some(
    (plan) => current.startAt.isBefore(plan.endAt) && 
              current.endAt.isAfter(plan.startAt)
  );

  if (hasOverlap) {
    // 겹치면 같은 그룹으로 합류!
    acc.local.push(current);
  } else {
    // 안 겹치면, 이전 그룹을 완성(commit)하고 새로운 그룹 시작
    acc.result.push(acc.local);
    acc.local = [current];
  }
  return acc;
}, ...);

// 재귀적으로 라인을 생성하는 함수
const lineUpPlans = (plans) => {
  const currentLine = [];
  const remains = [];
  plans.forEach((plan) => {
    // 현재 라인의 마지막 녀석과 겹치지 않으면 -> 이 줄에 태운다 (Push)
    if (!lastOnCurrentLine || !plan.startAt.isBefore(lastOnCurrentLine.endAt)) {
      currentLine.push(plan);
    } else {
      // 겹치면 -> 다음 줄로 토스한다 (Remains)
      remains.push(plan);
    }
  });
  return { currentLine, remains };
};

// 메인 루프 (do-while)
do {
  // 남은 녀석들끼리 다시 줄을 세운다
  const { currentLine, remains } = lineUpPlans(remainPlans);
  localPlanWithLine.push(...currentLine); // 이번 줄 확정
  lineIndex += 1;
  remainPlans = remains; // 탈락자들은 다음 라운드로
} while (remainPlans.length > 0);

// maxIndices: 총 라인 개수 (예: 3개)
// lineIndex: 내 라인 번호 (1, 2, 3)
const widthRatio = (1 + maxIndices - lineIndex) / maxIndices;
const leftOffsetRatio = 1 - widthRatio;

// 1번 라인
top: 479px; height: 46px; left: calc(0% + 0px); width: calc(85% + 0px); z-index: 5;


// 2번 라인
top: 479px; height: 46px; left: calc(50% + 0px); width: calc(50% + 0px); z-index: 6;

// 1번 라인
top: 479px; height: 46px; left: calc(0% + 0px); width: calc(56.6667% + 0px); z-index: 5;

// 2번 라인
top: 479px; height: 46px; left: calc(33.3333% + 0px); width: calc(56.6667% + 0px); z-index: 6;

// 3번 라인
top: 479px; height: 46px; left: calc(66.6667% + 0px); width: calc(33.3333% + 0px); z-index: 7;

(BaseWidth) * 1.7

// 1번 플랜 (7:00 ~)
top: 335px; height: 94px; left: calc(0% + 0px); width: calc(42.5% + 0px); z-index: 5; background-color: rgb(3, 155, 229); border-color: rgb(3, 155, 229);

// 2번 플랜 (7:00 ~)
top: 335px; height: 94px; left: calc(25% + 0px); width: calc(75% + 0px); z-index: 6; background-color: rgb(3, 155, 229); border-color: rgb(3, 155, 229);

// 3번 플랜 (7:45 ~)
top: 371px; height: 94px; left: calc(30% + 0px); width: calc(70% + 0px); z-index: 7; background-color: rgb(3, 155, 229); border-color: rgb(3, 155, 229);

// 4번 플랜 (08:45 ~)
top: 419px; height: 94px; left: calc(35% + 0px); width: calc(65% + 0px); z-index: 8; background-color: rgb(3, 155, 229); border-color: rgb(3, 155, 229);

// 만약 30분을 초과하는 일정이라면
left = prevLeft + 5%;
width = 100% - left;
zIndex = prevZIndex++;

// 1번 플랜
top: 95px; height: 142px; left: calc(0% + 0px); width: calc(85% + 0px); z-index: 5; background-color: rgb(3, 155, 229); border-color: rgb(3, 155, 229);

// 2번 플랜
top: 95px; height: 46px; left: calc(50% + 0px); width: calc(50% + 0px); background-color: rgb(3, 155, 229); border-color: rgb(3, 155, 229);

// 3번 플랜
top: 143px; height: 46px; left: calc(5% + 0px); width: calc(95% + 0px); z-index: 6; background-color: rgb(3, 155, 229); border-color: rgb(3, 155, 229);

// planId를 key로 { col: 컬럼번호, totalCols: 총 컬럼 }을 저장하는 Map
const positionMap = new Map<string, { col: number; totalCols: number }>();

for (const plan of sortedPlans) {
  // 1. 나와 겹치는 '이전 플랜들'이 몇 번 컬럼을 쓰고 있는지 확인한다.
  const takenCols = new Set<number>();
  
  for (const prevPlan of sortedPlans) {
    // 나와 겹치는가? (Overlap Check)
    if (doesOverlap(plan, prevPlan)) {
      const pos = positionMap.get(prevPlan.id);
      if (pos) {
        takenCols.add(pos.col); // "찾았다 내 자리!"
      }
    }
  }

  // 2. 0번부터 돌면서 비어있는 가장 빠른 번호를 내 자리(col)로 찜한다.
  let col = 0;
  while (takenCols.has(col)) {
    col++; // "여기 찼네. 다음 칸 확인..."
  }
  
  // "찾았다 내 자리!"
  positionMap.set(plan.id, { col, totalCols: 0 });
}

// left position을 계산하고 저장하는 Map (Memoization)
const calculatedLeftMap = new Map<string, number>();

const getLeftPosition = (plan, col, totalCols) => {
  if (calculatedLeftMap.has(plan.id)) {
    return calculatedLeftMap.get(plan.id)!;
  }

  const baseSlotWidth = 1 / totalCols;
  // 기본: Grid 위치
  let left = col * baseSlotWidth; 

  if (col > 0) {
    // 바로 왼쪽 컬럼(col-1)에서, 나와 겹치는 부모 플랜을 찾는다.
    const parentPlan = findOverlappingPlanInColumn(col - 1);

    if (parentPlan) {
			const timeDiffMinutes = ChronoUnit.MINUTES.between(parentPlan.startAt, plan.startAt);

      if (timeDiffMinutes > 30) {
        // 부모의 left에서 5%만 오른쪽으로 밀기
        const parentLeft = getLeftPosition(parentPlan, col - 1, ...);
        left = parentLeft + 0.05;
      }
    }
  }

  calculatedLeftMap.set(plan.id, left);
  return left;
};

// 오른쪽 컬럼에 나와 30분 이내로 겹치는 Blocker 탐색
let expansionStopsAtColumn = pos.totalCols;

for (let k = pos.col + 1; k < pos.totalCols; k++) {
  const hasBlockerInColumnK = sortedPlans.some((otherPlan) => {
    const otherPos = positionMap.get(otherPlan.id);

    const timeDiffMinutes = ChronoUnit.MINUTES.between(p.startAt, otherPlan.startAt);
    return otherPos?.col === k && doesOverlap(p, otherPlan) && timeDiffMinutes <= 30;
  });

  if (hasBlockerInColumnK) {
    expansionStopsAtColumn = k;
    break;
  }
}

// 어떤 경우에도 화면 밖으로 삐져나가지 않는다.
if (leftOffsetRatio + widthRatio > 1) {
  widthRatio = 1 - leftOffsetRatio;
}