@weing-dev/ui-kit-primitive 0.0.0 → 0.0.2

package/src/components/WeeklyCalendar/WeeklyCalendar.tsx

@@ -1,772 +0,0 @@
-/* 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;