@weing-dev/ui-kit-primitive 0.0.0

package/src/components/ScrollCalendar/ScrollCalendar.tsx

@@ -0,0 +1,448 @@
+import React from "react";
+import dayjs from "dayjs";
+import cn from "classnames/bind";
+import styles from "./ScrollCalendar.module.scss";
+import "dayjs/locale/ko";
+import { ScrollCalendarContext } from "./ScrollCalendar.context";
+import { CalendarContext } from "../Calendar/Calendar.context";
+
+dayjs.locale("ko");
+
+const cx = cn.bind(styles);
+
+interface ScrollCalendarProps {
+  date: string;
+  visible: boolean;
+  className?: string;
+  selected: boolean;
+  onClick?: (date: string) => void;
+  disabled: boolean;
+  between: boolean;
+  both: boolean;
+  start: boolean;
+  end: boolean;
+  columns: dayjs.Dayjs[];
+  dateClassName?: string;
+  textClassName?: string;
+}
+
+const Column = (props: ScrollCalendarProps) => {
+  const {
+    date,
+    visible,
+    className,
+    selected,
+    onClick,
+    disabled,
+    between,
+    both,
+    start,
+    end,
+    dateClassName,
+    textClassName,
+  } = props;
+
+  const { columnWidth, isDragging, hasMoved } = React.useContext(
+    ScrollCalendarContext
+  );
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isDragging || hasMoved) {
+      e.preventDefault();
+      return;
+    }
+
+    onClick?.(date);
+  };
+
+  return (
+    <button
+      className={cx("Column", className, {
+        between,
+        both,
+        start,
+        end,
+        visible,
+        selected,
+      })}
+      disabled={disabled}
+      style={{
+        visibility: visible
+          ? "visible"
+          : dayjs(date).isSame(dayjs(), "month")
+          ? "visible"
+          : "hidden",
+        width: `${columnWidth}px`,
+      }}
+      onClick={handleClick}
+    >
+      <div className={cx("Date", dateClassName)}>
+        {dayjs(date).format("ddd")}
+      </div>
+      <div className={cx("Text", textClassName)}>{dayjs(date).format("D")}</div>
+    </button>
+  );
+};
+
+interface BodyProps {
+  className?: string;
+  columnWrapClassName?: string;
+  columnRender: () => React.ReactNode;
+}
+
+const Body = (props: BodyProps) => {
+  const { className, columnWrapClassName, columnRender } = props;
+
+  const {
+    isDragging,
+    startX,
+    setIsDragging,
+    setHasMoved,
+    setStartX,
+    bodyRef,
+    columnWrapRef,
+  } = React.useContext(ScrollCalendarContext);
+
+  const [dragStartX, setDragStartX] = React.useState(0);
+  const [previousTranslateX, setPreviousTranslateX] = React.useState(0);
+  const [lastTime, setLastTime] = React.useState(0);
+  const [lastClientX, setLastClientX] = React.useState(0);
+  const [velocity, setVelocity] = React.useState(0);
+  const [isOverscrolling, setIsOverscrolling] = React.useState(false);
+
+  const animationRef = React.useRef<number | null>(null);
+
+  const handleDragStart = React.useCallback(
+    (e: React.MouseEvent | React.TouchEvent) => {
+      setIsDragging(true);
+      setHasMoved(false);
+      const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+      setDragStartX(clientX);
+      setPreviousTranslateX(startX);
+      setLastTime(Date.now());
+      setLastClientX(clientX);
+      setVelocity(0);
+
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+    },
+    [
+      setIsDragging,
+      setHasMoved,
+      startX,
+      setDragStartX,
+      setPreviousTranslateX,
+      setLastTime,
+      setLastClientX,
+      setVelocity,
+    ]
+  );
+
+  const handleDragMove = React.useCallback(
+    (e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent) => {
+      if (!isDragging || !columnWrapRef?.current || !bodyRef?.current) return;
+
+      const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+      if (Math.abs(clientX - dragStartX) > 5) {
+        setHasMoved(true);
+      }
+      const currentTime = Date.now();
+      const deltaTime = currentTime - lastTime;
+
+      if (deltaTime > 0) {
+        setVelocity((clientX - lastClientX) / deltaTime);
+      }
+
+      setLastTime(currentTime);
+      setLastClientX(clientX);
+
+      const diff = clientX - dragStartX;
+      const newTranslateX = previousTranslateX + diff;
+      const maxScroll =
+        columnWrapRef.current.scrollWidth - bodyRef.current.clientWidth;
+
+      if (newTranslateX > 0 || newTranslateX < -maxScroll) {
+        setIsOverscrolling(true);
+        const overscroll =
+          newTranslateX > 0
+            ? newTranslateX / 3
+            : -maxScroll + (newTranslateX + maxScroll) / 3;
+        setStartX(overscroll);
+      } else {
+        setIsOverscrolling(false);
+        setStartX(newTranslateX);
+      }
+    },
+    [
+      isDragging,
+      columnWrapRef,
+      bodyRef,
+      dragStartX,
+      setHasMoved,
+      lastTime,
+      lastClientX,
+      previousTranslateX,
+      setStartX,
+      setIsOverscrolling,
+      setVelocity,
+    ]
+  );
+
+  const handleDragEnd = React.useCallback(() => {
+    if (!isDragging) return;
+
+    setIsDragging(false);
+
+    if (isOverscrolling && bodyRef?.current && columnWrapRef?.current) {
+      const maxScroll =
+        columnWrapRef.current.scrollWidth - bodyRef.current.clientWidth;
+      const targetPosition = startX > 0 ? 0 : -maxScroll;
+
+      let currentPosition = startX;
+      const animate = () => {
+        const diff = targetPosition - currentPosition;
+        if (Math.abs(diff) < 0.5) {
+          setStartX(targetPosition);
+          setIsOverscrolling(false);
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+          }
+          return;
+        }
+
+        currentPosition += diff * 0.2;
+        setStartX(currentPosition);
+        animationRef.current = requestAnimationFrame(animate);
+      };
+
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+      animationRef.current = requestAnimationFrame(animate);
+      return;
+    }
+
+    if (Math.abs(velocity) > 0.1) {
+      let currentVelocity = velocity * 30;
+      let currentPosition = startX;
+
+      const animate = () => {
+        if (Math.abs(currentVelocity) < 0.1) {
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+          }
+          return;
+        }
+
+        currentVelocity *= 0.8;
+        currentPosition += currentVelocity;
+
+        const maxScroll =
+          (columnWrapRef?.current?.scrollWidth ?? 0) -
+          (bodyRef?.current?.clientWidth ?? 0);
+        const boundedPosition = Math.min(
+          0,
+          Math.max(-maxScroll, currentPosition)
+        );
+
+        if (boundedPosition !== currentPosition) {
+          currentVelocity = 0;
+        }
+
+        currentPosition = boundedPosition;
+        setStartX(currentPosition);
+
+        animationRef.current = requestAnimationFrame(animate);
+      };
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+      animationRef.current = requestAnimationFrame(animate);
+    }
+
+    setTimeout(() => {
+      setHasMoved(false);
+    }, 0);
+  }, [
+    isDragging,
+    setIsDragging,
+    isOverscrolling,
+    bodyRef,
+    columnWrapRef,
+    startX,
+    setStartX,
+    setIsOverscrolling,
+    velocity,
+    setHasMoved,
+  ]);
+
+  React.useEffect(() => {
+    const onMouseMove = (event: MouseEvent) => {
+      handleDragMove(event);
+    };
+    const onMouseUp = () => {
+      handleDragEnd();
+    };
+
+    if (isDragging) {
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+    } else {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    }
+
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [isDragging, handleDragMove, handleDragEnd]);
+
+  React.useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      ref={bodyRef}
+      className={cx("Body", className)}
+      onMouseDown={handleDragStart}
+      onTouchStart={handleDragStart}
+      onTouchMove={handleDragMove}
+      onTouchEnd={handleDragEnd}
+    >
+      <div
+        ref={columnWrapRef}
+        className={cx("ColumnWrap", columnWrapClassName)}
+        style={{
+          transform: `translateX(${startX}px)`,
+          transition:
+            startX === 0 && !isDragging ? "transform 0.05s linear" : "none",
+        }}
+      >
+        {startX !== undefined ? columnRender() : null}
+      </div>
+    </div>
+  );
+};
+
+interface RootProps {
+  children: React.ReactNode;
+  columnWidth?: number;
+}
+
+const Root = (props: RootProps) => {
+  const { children, columnWidth = 48 } = props;
+  const { currentDate } = React.use(CalendarContext);
+
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [hasMoved, setHasMoved] = React.useState(false);
+  const [startX, setStartX] = React.useState(0);
+  const [isFirstRender, setIsFirstRender] = React.useState(true);
+
+  const bodyRef = React.useRef<HTMLDivElement>(null);
+  const columnWrapRef = React.useRef<HTMLDivElement>(null);
+  const animationRef = React.useRef<number | null>(null);
+  const valuesRef = React.useRef({ startX, isFirstRender });
+
+  React.useEffect(() => {
+    valuesRef.current = { startX, isFirstRender };
+  });
+
+  React.useEffect(() => {
+    const selectedIndex = dayjs(currentDate).date() - 1;
+
+    if (
+      selectedIndex !== -1 &&
+      bodyRef?.current &&
+      columnWrapRef?.current &&
+      columnWidth
+    ) {
+      const containerWidth = bodyRef.current.offsetWidth;
+      const centerPosition = containerWidth / 2;
+      const selectedPosition = selectedIndex * columnWidth;
+      const targetPosition =
+        centerPosition - selectedPosition - columnWidth / 2;
+      const maxScroll = columnWrapRef.current.scrollWidth - containerWidth;
+      const boundedPosition = Math.min(0, Math.max(-maxScroll, targetPosition));
+
+      if (valuesRef.current.isFirstRender) {
+        setStartX(boundedPosition);
+        setIsFirstRender(false);
+        return;
+      }
+
+      const startPosition = valuesRef.current.startX;
+      const distance = boundedPosition - startPosition;
+      const duration = 250;
+      const startTime = performance.now();
+
+      const animate = (currentTime: number) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const currentPosition =
+          startPosition + distance * (progress * (2 - progress));
+
+        setStartX(currentPosition);
+
+        if (progress < 1) {
+          animationRef.current = requestAnimationFrame(animate);
+        } else {
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+          }
+        }
+      };
+
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+
+      animationRef.current = requestAnimationFrame(animate);
+    }
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+    };
+  }, [currentDate, columnWidth, setIsFirstRender, setStartX]);
+
+  return (
+    <ScrollCalendarContext.Provider
+      value={{
+        columnWidth,
+        isDragging,
+        hasMoved,
+        startX,
+        setIsDragging,
+        setHasMoved,
+        setStartX,
+        bodyRef,
+        columnWrapRef,
+      }}
+    >
+      {children}
+    </ScrollCalendarContext.Provider>
+  );
+};
+
+const ScrollCalendar = {
+  Column,
+  Body,
+  Root,
+};
+
+export default ScrollCalendar;

package/src/components/ScrollSpy/README.md

@@ -0,0 +1,62 @@
+# ScrollSpy Hook
+
+## Contents List
+
+1. [Quick Start](#QuickStart)
+2. [Reference](#Reference)
+3. [Example](#Example)
+
+## Quick Start
+
+```ts
+import { ScrollSpy } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+  const containerRef = React.useRef();
+
+  const sectionRef = React.useRef();
+
+  const scrollSpy = ScrollSpy.useScrollSpy(
+    containerRef.current,
+    sectionRefs.current
+  );
+
+  return (
+    <div ref={containerRef}>
+      <div id={"first"} ref={(el) => (sectionRef.current[0] = el)}></div>
+      <div id={"second"} ref={(el) => (sectionRef.current[1] = el)}></div>
+      <div id={"third"} ref={(el) => (sectionRef.current[2] = el)}></div>
+    </div>
+  );
+};
+```
+
+## Reference
+
+### useScrollSpy
+
+`useScrollSpy`는 `container`영역내의 `section`들이 화면에 들어오는지 확인해서 `id` 혹은 `index`를 리턴합니다.
+
+| Prop                        |                   Type                    | Required | Default Value |
+| :-------------------------- | :---------------------------------------: | :------: | :-----------: |
+| [containerEl](#containerEl) |  React.RefObject<HTMLElement>["current"]  |   true   |       -       |
+| [spyRefEls](#spyRefEls)     | React.RefObject<HTMLElement>["current"][] |   true   |       -       |
+| [returnType](#returnType)   |              "id" or "index"              |    -     |     "id"      |
+
+#### containerEl
+
+`useScrollSpy`에 첫 번째 인수로 들어가며 스크롤을 감지할 `element`가 들어갑니다.
+
+#### spyRefEls
+
+`useScrollSpy`에 두 번째 인수로 들어가며 `containerEl`내에서 화면에 들어오는걸 감지할 `element`가 배열로 들어갑니다.
+
+#### returnType
+
+`useScrollSpy`에 세 번째 인수로 들어가며 `containerEl`에서 감지된 `element`의 `id`나 `index`를 리턴하기 위해 지정됩니다.
+
+기본값은 `id`입니다.
+
+## Example
+
+프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/ScrollSpy)에서 확인할 수 있습니다.

package/src/components/ScrollSpy/ScrollSpy.tsx

@@ -0,0 +1,130 @@
+"use client";
+import React from "react";
+
+export function useScrollSpy(
+  containerEl: React.RefObject<HTMLElement | null>["current"],
+  spyRefEls: React.RefObject<HTMLElement | null>["current"][],
+  returnType?: "id"
+): string | null;
+export function useScrollSpy(
+  containerEl: React.RefObject<HTMLElement | null>["current"],
+  spyRefEls: React.RefObject<HTMLElement | null>["current"][],
+  returnType?: "index"
+): number | null;
+export function useScrollSpy(
+  containerEl: React.RefObject<HTMLElement | null>["current"],
+  spyRefEls: React.RefObject<HTMLElement | null>["current"][],
+  returnType?: "id" | "index"
+): string | number | null {
+  const [activeSection, setActiveSection] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    const scrollElement = containerEl || window;
+
+    const handleScroll = () => {
+      let maxScore: { id: string | null; score: number } = {
+        id: null,
+        score: -Infinity,
+      };
+
+      const containerRect = containerEl?.getBoundingClientRect() || {
+        top: 0,
+        left: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
+      };
+
+      // 컨테이너의 중심점 계산
+      const containerCenterX = containerRect.left + containerRect.width / 2;
+      const containerCenterY = containerRect.top + containerRect.height / 2;
+
+      spyRefEls.forEach((el) => {
+        if (!el) return;
+
+        const element = el;
+        const rect = element.getBoundingClientRect();
+
+        // 요소의 중심점 계산
+        const elementCenterX = rect.left + rect.width / 2;
+        const elementCenterY = rect.top + rect.height / 2;
+
+        // 컨테이너 중심점과 요소 중심점 사이의 거리 계산
+        const distanceX = Math.abs(containerCenterX - elementCenterX);
+        const distanceY = Math.abs(containerCenterY - elementCenterY);
+
+        // 거리를 0~1 사이로 정규화 (0은 중심에 있을 때)
+        const normalizedDistanceX = distanceX / (containerRect.width / 2);
+        const normalizedDistanceY = distanceY / (containerRect.height / 2);
+
+        // 화면에 보이는 영역 계산
+        const visibleLeft = Math.max(rect.left, containerRect.left);
+        const visibleRight = Math.min(
+          rect.right,
+          containerRect.left + containerRect.width
+        );
+        const visibleTop = Math.max(rect.top, containerRect.top);
+        const visibleBottom = Math.min(
+          rect.bottom,
+          containerRect.top + containerRect.height
+        );
+
+        // 보이는 영역의 크기와 전체 영역 대비 비율 계산
+        const visibleWidth = Math.max(0, visibleRight - visibleLeft);
+        const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+        const visibleArea = visibleWidth * visibleHeight;
+        const totalArea = rect.width * rect.height;
+
+        const visibility = visibleArea / totalArea;
+
+        // 가시성과 중심점 가중치를 결합하여 최종 점수 계산
+        // 중심에 가까울수록 높은 점수를 받음
+        const distanceScore =
+          1 - Math.min(1, (normalizedDistanceX + normalizedDistanceY) / 2);
+        const finalScore = visibility * (1 + distanceScore);
+
+        // 최소 가시성(0.1)을 넘고 최고 점수를 가진 요소를 선택
+        if (finalScore > maxScore.score && visibility > 0.1) {
+          maxScore = {
+            id: element.id,
+            score: finalScore,
+          };
+        }
+      });
+
+      if (maxScore.score > 0) {
+        setActiveSection(maxScore.id);
+      }
+    };
+
+    // 초기 렌더링 시 약간의 딜레이를 두고 체크
+    const initialCheckTimeout = setTimeout(handleScroll, 100);
+
+    // 주기적으로 체크 (500ms 간격)
+    const checkInterval = setInterval(handleScroll, 500);
+
+    scrollElement.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleScroll);
+    handleScroll();
+
+    return () => {
+      scrollElement.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleScroll);
+      clearTimeout(initialCheckTimeout);
+      clearInterval(checkInterval);
+    };
+  }, [containerEl, spyRefEls]);
+
+  if (returnType === "index" && activeSection) {
+    return spyRefEls.findIndex((el) => el?.id === activeSection);
+  }
+
+  return activeSection;
+}
+
+interface IScrollSpy {
+  useScrollSpy: typeof useScrollSpy;
+}
+
+export default {
+  useScrollSpy,
+} as IScrollSpy;