@weing-dev/ui-kit-primitive 0.0.0

package/src/components/WeeklyCalendar/WeeklyCalendar.tsx

@@ -0,0 +1,772 @@
+/* eslint-disable react-refresh/only-export-components */
+"use client";
+import React from "react";
+import styles from "./WeeklyCalendar.module.scss";
+import cn from "classnames/bind";
+import { DndContext, useDraggable, useDroppable } from "@dnd-kit/core";
+import {
+  type EventItem as EventItemType,
+  initialState,
+  WeeklyCalendarContext,
+  WeeklyCalendarProviderProps,
+} from "./WeeklyCalendar.context";
+import { getDayText, getGmtString } from "./dayjs.util";
+import dayjs from "dayjs";
+import {
+  getNearestStepTime,
+  layoutEventsWithColumns,
+  splitEventsConsideringAllDay,
+} from "./weeklyCalendar.util";
+import minmax from "dayjs/plugin/minMax";
+import { usePopper } from "react-popper";
+
+dayjs.extend(minmax);
+
+const cx = cn.bind(styles);
+
+type DateColumnRowProps = {
+  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+};
+
+type EventItemProps = React.PropsWithChildren<{
+  startTime: string;
+  endTime?: string;
+  id: string;
+  height: string | number;
+  widthPercent: number;
+  leftPercent: number;
+  topPercent: number;
+  title: string;
+  realStartTime?: string;
+  realEndTime?: string;
+}>;
+
+const EventItem = (props: EventItemProps) => {
+  const {
+    id,
+    height,
+    widthPercent,
+    leftPercent,
+    topPercent,
+    title,
+    realStartTime,
+    realEndTime,
+  } = props;
+
+  const {
+    currentDate,
+    columnCount,
+    enableMoveByDrag,
+    popperHideDelay,
+    popperOffset,
+    eventItemAs,
+    eventItemPopperAs,
+  } = React.useContext(WeeklyCalendarContext);
+
+  const {
+    setNodeRef,
+    listeners,
+    attributes: dragAttributes,
+    transform,
+    active,
+  } = useDraggable({
+    id,
+    data: {
+      supports: new Array(columnCount).fill(0).map((_, i) => {
+        return dayjs(currentDate).add(i, "day").format("YYYY-MM-DD");
+      }),
+      attributes: {
+        "data-id": id,
+      },
+    },
+  });
+
+  // (1) popper 참조 관리
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+  const [arrowElement, setArrowElement] = React.useState<HTMLDivElement | null>(
+    null
+  );
+
+  // (2) hover 상태 -> 툴팁 표시 여부 상태로 변경
+  const [showPopper, setShowPopper] = React.useState(false);
+  // 타이머 ID를 저장하기 위한 ref
+  const hidePopperTimeoutRef = React.useRef<number | null>(null);
+
+  // (3) Popper 설정
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto", // \`)
+    modifiers: [
+      { name: "arrow", options: { element: arrowElement } },
+      { name: "offset", options: { offset: popperOffset } }, // y축으로 8px 정도 띄움
+    ],
+  });
+
+  const isSame = active?.id === id;
+
+  // 툴팁을 보여주는 함수
+  const handleShowPopper = React.useCallback(() => {
+    if (hidePopperTimeoutRef.current) {
+      clearTimeout(hidePopperTimeoutRef.current);
+      hidePopperTimeoutRef.current = null;
+    }
+    setShowPopper(true);
+  }, []);
+
+  // 툴팁을 숨기는 함수 (지연 시간 적용)
+  const handleHidePopper = React.useCallback(() => {
+    hidePopperTimeoutRef.current = window.setTimeout(() => {
+      setShowPopper(false);
+    }, popperHideDelay); // 200ms 지연. 이 시간을 조절하여 반응성을 변경할 수 있습니다.
+  }, [popperHideDelay]);
+
+  const eventItemRender = () => {
+    if (eventItemAs) {
+      return React.createElement(eventItemAs, {
+        key: id,
+        ...props,
+        onMouseEnter: handleShowPopper, // 마우스가 참조 요소 위로 올라가면 툴팁 보이기
+        onMouseLeave: handleHidePopper, // 마우스가 참조 요소에서 벗어나면 툴팁 숨기기 (지연)
+        ref: setReferenceElement,
+        style: {
+          top: `${topPercent}%`,
+          height,
+          width: `min(${widthPercent}%, 100%)`,
+          left: `${leftPercent}%`,
+          color: "black",
+          overflow: "hidden",
+          alignSelf: "flex-start",
+          position: "absolute",
+          borderRadius: 4,
+          cursor: enableMoveByDrag ? "move" : "default",
+          transform:
+            enableMoveByDrag && transform
+              ? `translate(${transform.x}px, ${transform.y}px)`
+              : undefined,
+        },
+      });
+    }
+
+    return null;
+  };
+
+  const eventItemPopperRender = () => {
+    if (eventItemPopperAs) {
+      // 커스텀 Popper 컴포넌트를 사용할 때, 해당 컴포넌트가 onMouseEnter와 onMouseLeave를
+      // 내부적으로 자신의 최상위 요소에 바인딩해야 합니다.
+      // 또한, 커스텀 컴포넌트의 최상위 요소는 pointerEvents가 'none'이 아니어야 합니다.
+      return React.createElement(eventItemPopperAs, {
+        ...props,
+        popperRef: setPopperElement,
+        onMouseEnter: handleShowPopper, // 마우스가 커스텀 Popper 위로 올라가면 툴팁 보이기 (숨김 타이머 취소)
+        onMouseLeave: handleHidePopper, // 마우스가 커스텀 Popper에서 벗어나면 툴팁 숨기기 (지연)
+        popperStyle: {
+          ...styles.popper,
+          // pointerEvents: "none", // 툴팁 자체는 클릭 막기 (원한다면) -> 마우스 이벤트 유지를 위해 제거 또는 주석 해제 필요
+          zIndex: 9999,
+          background: "#333", // 기본 스타일 예시, 커스텀 컴포넌트에서 재정의 가능
+          color: "#fff",
+          padding: "6px 8px",
+          borderRadius: 4,
+          fontSize: 12,
+          boxShadow: "0 2px 4px rgba(0,0,0,0.3)",
+        },
+        popperAttributes: {
+          ...attributes.popper,
+        },
+        title,
+        realStartTime,
+        realEndTime,
+        arrowRef: setArrowElement,
+        arrowStyle: {
+          ...styles.arrow,
+          width: "8px",
+          height: "8px",
+          transform: "rotate(90deg)",
+        },
+        arrowAttributes: {
+          ...attributes.arrow,
+        },
+      });
+    }
+
+    return null;
+  };
+
+  return (
+    <div
+      {...(enableMoveByDrag ? dragAttributes : {})}
+      {...(enableMoveByDrag ? listeners : {})}
+      ref={setNodeRef}
+    >
+      {eventItemAs ? (
+        eventItemRender()
+      ) : (
+        <div
+          key={id}
+          data-id={id}
+          className={cx("EventItem", {
+            dragging: isSame && enableMoveByDrag,
+            draggable: enableMoveByDrag,
+          })}
+          ref={setReferenceElement} // Popper 참조 요소로 등록
+          style={{
+            top: `${topPercent}%`,
+            height,
+            width: `min(${widthPercent}%, 100%)`,
+            left: `${leftPercent}%`,
+            color: "white",
+            overflow: "hidden",
+            alignSelf: "flex-start",
+            position: "absolute",
+            borderRadius: 4,
+            border: "1px solid #ccc",
+            cursor: enableMoveByDrag ? "move" : "default",
+            transform:
+              enableMoveByDrag && transform
+                ? `translate(${transform.x}px, ${transform.y}px)`
+                : undefined,
+          }}
+          onMouseEnter={handleShowPopper} // 마우스가 참조 요소 위로 올라가면 툴팁 보이기
+          onMouseLeave={handleHidePopper} // 마우스가 참조 요소에서 벗어나면 툴팁 숨기기 (지연)
+          onMouseDown={(e) => {
+            if (!enableMoveByDrag) return;
+            e.stopPropagation();
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          {title}
+        </div>
+      )}
+
+      {!isSame &&
+        showPopper && // isHover 대신 showPopper 사용 -> showPopper 상태에 따라 툴팁 렌더링
+        (eventItemPopperAs ? (
+          eventItemPopperRender()
+        ) : (
+          // 기본 Popper 렌더링
+          <div
+            ref={setPopperElement}
+            onMouseEnter={handleShowPopper} // 마우스가 기본 Popper 위로 올라가면 툴팁 보이기 (숨김 타이머 취소)
+            onMouseLeave={handleHidePopper} // 마우스가 기본 Popper에서 벗어나면 툴팁 숨기기 (지연)
+            style={{
+              ...styles.popper,
+              // pointerEvents: "none", // 툴팁 자체는 클릭 막기 (원한다면) -> 이 줄이 있으면 Popper 위에서 마우스 이벤트 감지 안됨. 제거 또는 주석 처리.
+              // 사용자가 원한 동작을 위해서는 제거되어야 합니다.
+              zIndex: 9999,
+              background: "#333",
+              color: "#fff",
+              padding: "6px 8px",
+              borderRadius: 4,
+              fontSize: 12,
+              boxShadow: "0 2px 4px rgba(0,0,0,0.3)",
+            }}
+            {...attributes.popper}
+          >
+            {/* 툴팁 콘텐츠 예시 */}
+            <div style={{ whiteSpace: "nowrap" }}>
+              <div>
+                <strong>{title}</strong>
+              </div>
+              <div>
+                {dayjs(realStartTime).format("MM.DD HH:mm")}
+                {realEndTime &&
+                  ` ~ ${dayjs(realEndTime).format("MM.DD HH:mm")}`}
+              </div>
+            </div>
+            {/* 화살표 (Arrow) */}
+            <div
+              ref={setArrowElement}
+              style={{
+                ...styles.arrow,
+                width: "8px",
+                height: "8px",
+                // background: "#333",
+                transform: "rotate(90deg)",
+              }}
+              {...attributes.arrow}
+            />
+          </div>
+        ))}
+    </div>
+  );
+};
+
+type DateColumnProps = {
+  date: string;
+};
+
+const DateColumn = (props: DateColumnProps) => {
+  const { date } = props;
+  const {
+    minHour,
+    maxHour,
+    step,
+    events = [],
+    enableCreateByDrag,
+    itemHeight = 48,
+    type = "default",
+  } = React.useContext(WeeklyCalendarContext);
+
+  const [col, setCol] = React.useState<HTMLDivElement | null>(null);
+  const [topValue, setTopValue] = React.useState<number | null>(null);
+  const { setNodeRef } = useDroppable({
+    id: date,
+  });
+
+  const results = layoutEventsWithColumns({
+    events: events.filter((event) => {
+      return (
+        !event.isAllDay && dayjs(event.startTime).format("YYYY-MM-DD") === date
+      );
+    }),
+    minHour,
+    maxHour,
+  });
+
+  const nowTs = dayjs().valueOf();
+  const startOfDay = dayjs(date)
+    .startOf("day")
+    .add(minHour, "hour")
+    .format("YYYY-MM-DD HH:mm");
+  const endOfDay = dayjs(date)
+    .startOf("day")
+    .add(maxHour, "hour")
+    .subtract(1, "millisecond")
+    .format("YYYY-MM-DD HH:mm");
+
+  const startTimestamp = dayjs(startOfDay).valueOf();
+  const endTimestamp = dayjs(endOfDay).valueOf();
+
+  const totalRange = endTimestamp - startTimestamp;
+  const elapsed = nowTs - startTimestamp;
+
+  const percentage = (elapsed / totalRange) * 100;
+
+  const value = percentage > 100 ? 100 : percentage <= 0 ? 0 : percentage;
+
+  React.useEffect(() => {
+    setTopValue(value);
+  }, []);
+  const isToday = dayjs().isSame(date, "day");
+
+  const handleClick = () =>
+    // e: React.MouseEvent<HTMLDivElement>
+    {
+      // const scrollY = e.nativeEvent.offsetY;
+      // const columnHeight = e.currentTarget.clientHeight;
+      // const nearestTime = getNearestStepTime({
+      //   clickOffsetY: scrollY,
+      //   columnHeight,
+      //   date,
+      //   minHour,
+      //   maxHour,
+      //   step,
+      // });
+    };
+
+  const diff = maxHour - minHour;
+
+  const height = diff * itemHeight;
+
+  const todos = results.filter(
+    (result) =>
+      dayjs(result.startTime).format("YYYY-MM-DD") === date && !result.isAllDay
+  );
+
+  // (1) 드래그 상태를 저장할 state
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [dragStartY, setDragStartY] = React.useState<number | null>(null);
+  const [dragEndY, setDragEndY] = React.useState<number | null>(null);
+
+  // "실시간" 마우스 위치에 따른 임시 박스의 시간
+  const [tempStartTime, setTempStartTime] = React.useState<dayjs.Dayjs | null>(
+    null
+  );
+  const [tempEndTime, setTempEndTime] = React.useState<dayjs.Dayjs | null>(
+    null
+  );
+
+  const [dragStartTime, setDragStartTime] = React.useState<dayjs.Dayjs | null>(
+    null
+  );
+
+  // div 참조
+  const colRef = React.useRef<HTMLDivElement | null>(null);
+
+  // (2) onMouseDown: 드래그 시작
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!enableCreateByDrag) return;
+    if (e.button !== 0) return; // 왼클릭만
+    setIsDragging(true);
+
+    const offsetY = e.nativeEvent.offsetY;
+    setDragStartY(offsetY);
+    setDragEndY(offsetY);
+
+    // 최초 시작 시각 기록
+    if (colRef.current) {
+      const columnHeight = colRef.current.clientHeight;
+      const nearestTime = getNearestStepTime({
+        clickOffsetY: offsetY,
+        columnHeight,
+        date,
+        minHour,
+        maxHour,
+        step,
+      });
+      setDragStartTime(nearestTime);
+      // 초기엔 tempStart/End를 동일하게
+      setTempStartTime(nearestTime);
+      setTempEndTime(nearestTime);
+    }
+  };
+
+  // (3) onMouseMove: 드래그 진행 중
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!enableCreateByDrag || !isDragging) return;
+    if (!dragStartTime) return; // 아직 시작 시각이 없다면
+
+    const offsetY = e.nativeEvent.offsetY;
+    setDragEndY(offsetY);
+
+    if (!colRef.current) return;
+    const columnHeight = colRef.current.clientHeight;
+    const currentTime = getNearestStepTime({
+      clickOffsetY: offsetY,
+      columnHeight,
+      date,
+      minHour,
+      maxHour,
+      step,
+    });
+
+    // **여기가 핵심**:
+    // 항상 dragStartTime과 currentTime 중 "더 이른 시간"을 tempStartTime,
+    // "더 늦은 시간"을 tempEndTime으로 설정
+    const lowerTime = dayjs.min(dragStartTime, currentTime);
+    const upperTime = dayjs.max(dragStartTime, currentTime);
+
+    setTempStartTime(lowerTime);
+    setTempEndTime(upperTime);
+  };
+
+  // (4) onMouseUp: 드래그 끝
+  const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!enableCreateByDrag) return;
+    e.stopPropagation();
+    if (!isDragging) return;
+    setIsDragging(false);
+
+    if (tempStartTime && tempEndTime && !tempStartTime.isSame(tempEndTime)) {
+      // TODO: 일정 생성 (dispatch or setState)
+    }
+
+    // 초기화
+    setDragStartTime(null);
+    setDragStartY(null);
+    setDragEndY(null);
+    setTempStartTime(null);
+    setTempEndTime(null);
+  };
+
+  // const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+  //   e.stopPropagation();
+  //   if (isDragging) {
+  //     // 여기서 "드래그 중지" 로직
+  //     setIsDragging(false);
+  //     // pointer-events 돌려놓기(필요하다면)
+  //     console.log("DateColumn 벗어남 → 드래그 취소");
+  //   }
+  // };
+
+  // (5) "임시 박스" 렌더링용 계산
+  let selectionTop = 0;
+  let selectionHeight = 0;
+  if (dragStartY !== null && dragEndY !== null) {
+    const minY = Math.min(dragStartY, dragEndY);
+    const maxY = Math.max(dragStartY, dragEndY);
+    selectionTop = minY;
+    selectionHeight = maxY - minY;
+  }
+
+  const tempText = React.useMemo(() => {
+    const startText = tempStartTime?.format("HH:mm") ?? "";
+    const endText = tempEndTime?.format("HH:mm") ?? "";
+
+    return `(제목 없음)\n${startText} ~ ${endText}`;
+  }, [tempStartTime, tempEndTime]);
+
+  return (
+    <div
+      className={cx("DateColumn", type, {
+        dragging: isDragging && enableCreateByDrag,
+        allowCreate: enableCreateByDrag,
+      })}
+      ref={setNodeRef}
+      onClick={handleClick}
+      onMouseDown={enableCreateByDrag ? handleMouseDown : undefined}
+      onMouseMove={enableCreateByDrag ? handleMouseMove : undefined}
+      onMouseUp={enableCreateByDrag ? handleMouseUp : undefined}
+      style={
+        {
+          cursor: enableCreateByDrag ? "cell" : "default",
+          "--bg-start-white": itemHeight - 1 + "px",
+          "--bg-end-white": itemHeight - 1 + "px",
+          "--bg-line-white": itemHeight + "px",
+        } as React.CSSProperties
+      }
+    >
+      <div className={cx("DateColumnInner")} ref={colRef} style={{ height }}>
+        {isToday && topValue ? (
+          <div
+            className={cx("TodayIndicator")}
+            style={{ top: `${topValue}%` }}
+          />
+        ) : null}
+
+        {todos.map((todo) => {
+          const height = Math.max(
+            (col?.clientHeight || 0) * (todo.heightPercent / 100),
+            24
+          );
+          return (
+            <EventItem
+              key={todo.id}
+              {...todo}
+              endTime={todo.realEndTime}
+              height={height}
+              title={todo.title ?? ""}
+            />
+          );
+        })}
+
+        {isDragging && (
+          <div
+            style={{
+              position: "absolute",
+              top: selectionTop,
+              left: 0,
+              width: "100%",
+              height: selectionHeight,
+              backgroundColor: "#F4511E",
+              pointerEvents: "none",
+              fontSize: 11,
+              borderRadius: 4,
+              padding: 4,
+              boxShadow: "0 0 4px rgba(0,0,0,0.2)",
+              whiteSpace: "pre-wrap",
+              color: "white",
+              zIndex: 100,
+            }}
+          >
+            {tempText}
+          </div>
+        )}
+      </div>
+      <div
+        ref={setCol}
+        style={{
+          // flex: 1,
+          width: 8,
+          // position: "absolute",
+          height: `${height}px`,
+        }}
+      ></div>
+    </div>
+  );
+};
+
+const DateColumnRow = (props: DateColumnRowProps) => {
+  const { onScroll } = props;
+  const {
+    currentDate = dayjs().format("YYYY-MM-DD"),
+    columnCount,
+    minHour,
+    maxHour,
+  } = React.useContext(WeeklyCalendarContext);
+
+  const dateCells = Array.from({ length: columnCount }, (_, i) => {
+    return {
+      date: dayjs(currentDate).add(i, "day").format("YYYY-MM-DD"),
+      dayText: getDayText(dayjs(currentDate).add(i, "day").get("day"), "ko"),
+    };
+  });
+
+  const diff = maxHour - minHour;
+  const timeline = Array.from({ length: diff }, (_, i) => {
+    return dayjs()
+      .startOf("day")
+      .add(minHour + i, "hour")
+      .format("HH:mm");
+  });
+
+  return (
+    <div className={cx("DateColumnRow")} onScroll={onScroll}>
+      <div className={cx("DateColumnRowInner")}>
+        <div className={cx("TimeCriteria")}>
+          {timeline.map((time) => {
+            return <div key={time} className={cx("TimeCriteriaCell")}></div>;
+          })}
+        </div>
+        {dateCells.map((dateCell) => {
+          return <DateColumn key={dateCell.date} date={dateCell.date} />;
+        })}
+      </div>
+    </div>
+  );
+};
+
+const DateCellRow = () => {
+  const { currentDate = dayjs().format("YYYY-MM-DD"), columnCount } =
+    React.useContext(WeeklyCalendarContext);
+
+  const dateCells = Array.from({ length: columnCount }, (_, i) => {
+    return {
+      realDate: dayjs(currentDate).add(i, "day"),
+      date: dayjs(currentDate).add(i, "day").format("DD"),
+      dayText: getDayText(dayjs(currentDate).add(i, "day").get("day"), "ko"),
+    };
+  });
+
+  return (
+    <div className={cx("DateCellRow")}>
+      {dateCells.map((dateCell) => {
+        return (
+          <div
+            key={dateCell.date}
+            className={cx("DateCell", {
+              today: dayjs().isSame(dateCell.realDate, "day"),
+            })}
+          >
+            <div className={cx("DayText")}>{dateCell.dayText}</div>
+            <div className={cx("Date")}>{dateCell.date}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const StandardTime = () => {
+  return (
+    <div className={cx("ShrinkedColumn", "StandardTime")}>{getGmtString()}</div>
+  );
+};
+
+interface TimelinesProps {
+  className?: string;
+  as?: (props: {
+    itemHeight: number;
+    minHour: number;
+    maxHour: number;
+    time: string;
+  }) => React.ReactNode;
+}
+
+const Timelines = (props: TimelinesProps) => {
+  const { className, as } = props;
+  const {
+    minHour,
+    maxHour,
+    itemHeight = 48,
+    type = "default",
+  } = React.useContext(WeeklyCalendarContext);
+  const diff = maxHour - minHour;
+  const timeline = Array.from({ length: diff + 1 }, (_, i) => {
+    return dayjs()
+      .startOf("day")
+      .add(minHour + i, "hour")
+      .format("HH:mm");
+  });
+
+  const renderTimeline = (time: string) => {
+    if (as) {
+      return React.createElement(as, {
+        key: time.toString(),
+        itemHeight,
+        minHour,
+        maxHour,
+        time,
+      });
+    } else {
+      return (
+        <div
+          key={time}
+          className={cx("Timeline")}
+          style={{
+            height: itemHeight,
+          }}
+        >
+          <span className={cx("TimeText")}>{time}</span>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div className={cx("TimelineWrapper", className, type)}>
+      {timeline.map((time) => {
+        return renderTimeline(time);
+      })}
+    </div>
+  );
+};
+
+type RootProps<T extends EventItemType> = WeeklyCalendarProviderProps<T> & {
+  className?: string;
+};
+
+const Root = <T extends EventItemType>(props: RootProps<T>) => {
+  const {
+    children,
+    enableCreateByDrag = true,
+    enableMoveByDrag = true,
+    type = "default",
+    className,
+    events,
+    ...rest
+  } = props;
+
+  function handleDragEnd() {
+    if (!enableMoveByDrag) return;
+    // ... 드래그 앤 드롭 처리
+  }
+
+  const contextValue = {
+    ...initialState,
+    ...rest,
+    events: splitEventsConsideringAllDay(events || []),
+    type,
+    enableCreateByDrag,
+    enableMoveByDrag,
+  };
+
+  return (
+    <DndContext onDragEnd={handleDragEnd}>
+      <WeeklyCalendarContext value={contextValue}>
+        <div className={cx("WeeklyCalendarRoot", className)}>{children}</div>
+      </WeeklyCalendarContext>
+    </DndContext>
+  );
+};
+
+interface IWeeklyCalendar {
+  Root: typeof Root;
+  Timelines: typeof Timelines;
+  StandardTime: typeof StandardTime;
+  DateCellRow: typeof DateCellRow;
+  DateColumnRow: typeof DateColumnRow;
+}
+
+export default {
+  Root,
+  Timelines,
+  StandardTime,
+  DateCellRow,
+  DateColumnRow,
+} as IWeeklyCalendar;