@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Slider/Slider.backup.tsx

@@ -0,0 +1,477 @@
+"use client";
+/* eslint-disable react-refresh/only-export-components */
+import React from "react";
+import cn from "classnames/bind";
+import styles from "./Slider.module.scss";
+
+const cx = cn.bind(styles);
+
+type SliderProps = {
+  readOnly?: boolean;
+  disabled?: boolean;
+  invert?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  color?: React.CSSProperties["color"];
+  labelAlwaysOn?: boolean;
+  marks?: { value: number; label: string | number | React.ReactNode }[];
+  scale?: (value: number) => number;
+  label?: ((value: number) => string) | null;
+};
+
+type SingleProps = {
+  defaultValue?: number;
+  thumbChildren?: React.ReactNode;
+  onChange?: (value: number) => void;
+} & SliderProps;
+
+const Single = (props: SingleProps) => {
+  const {
+    readOnly = false,
+    disabled = false,
+    invert = false,
+    min = 0,
+    max = 100,
+    step = 10,
+    color = "#688DEE",
+    labelAlwaysOn = false,
+    marks,
+    defaultValue = 10,
+    thumbChildren,
+    label,
+    scale = (v) => v,
+    onChange,
+  } = props;
+
+  const [value, setValue] = React.useState(defaultValue);
+  const [isDragging, setIsDragging] = React.useState(false);
+
+  const sliderRef = React.useRef<HTMLDivElement>(null);
+
+  const progressRef = React.useRef<HTMLDivElement>(null);
+
+  const thumbRef = React.useRef<HTMLDivElement>(null);
+
+  const valueView = React.useMemo(() => {
+    if (label === null) return;
+    return label?.(scale(value)) ?? scale(value);
+  }, [value, label, scale]);
+
+  const calculateValueFromPosition = React.useCallback(
+    (clientX: number) => {
+      if (progressRef.current) {
+        const rect = progressRef.current.getBoundingClientRect();
+        const sliderWidth = rect.width;
+        const offsetX = clientX - rect.left;
+
+        // 비율 계산
+        const ratio = offsetX / sliderWidth;
+        let newValue = min + ratio * (max - min);
+
+        // step에 맞게 반올림
+        newValue = Math.round(newValue / step) * step;
+
+        // min, max 범위 내로 제한
+        return Math.max(min, Math.min(newValue, max));
+      }
+      return value;
+    },
+    [max, min, step, value]
+  );
+
+  const handleValueChange = React.useCallback(
+    (newValue: number) => {
+      if (readOnly || disabled) return;
+      if (onChange) return onChange?.(newValue);
+      return setValue(newValue);
+    },
+    [readOnly, disabled, onChange]
+  );
+
+  const handleMouseDown = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      if (readOnly || disabled) return;
+      setIsDragging(true);
+      const newValue = calculateValueFromPosition(e.clientX);
+      handleValueChange(newValue);
+    },
+    [readOnly, disabled, calculateValueFromPosition, handleValueChange]
+  );
+
+  const handleMouseMove = React.useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      if (readOnly || disabled) return;
+      if (isDragging) {
+        const newValue = calculateValueFromPosition(e.clientX);
+        handleValueChange(newValue);
+      }
+    },
+    [
+      readOnly,
+      disabled,
+      isDragging,
+      calculateValueFromPosition,
+      handleValueChange,
+    ]
+  );
+
+  const handleMouseUp = React.useCallback(() => {
+    if (readOnly || disabled) return;
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  }, [readOnly, disabled, isDragging]);
+
+  React.useEffect(() => {
+    if (isDragging) {
+      // 전역적으로 mousemove와 mouseup 이벤트 리스너를 등록
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      // 드래그가 끝나면 이벤트 리스너 제거
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+
+    return () => {
+      // 컴포넌트 언마운트 시 이벤트 리스너 제거
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  React.useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  React.useEffect(() => {
+    if (sliderRef.current && progressRef.current) {
+      const progressRect = progressRef.current.getBoundingClientRect();
+      const sliderWidth = progressRect.width;
+
+      // 비율에 따른 thumb 위치를 픽셀 단위로 변환
+      const thumbPositionX = ((value - min) / (max - min)) * sliderWidth;
+
+      sliderRef.current.style.cssText = `
+        --progress-value-width: ${thumbPositionX}px;
+        --progress-value-color: ${color};
+        --progress-sigle-thumb-x: ${thumbPositionX}px;
+      `;
+    }
+  }, [value, min, max, color]);
+
+  return (
+    <div ref={sliderRef} className={cx("Slider")}>
+      <div
+        ref={progressRef}
+        className={cx("Progress", { readOnly, disabled, invert })}
+        onMouseDown={handleMouseDown}
+      >
+        <div className={cx("Value")} />
+        {marks && (
+          <div className={cx("Marks")}>
+            {marks.map((mark, idx) => (
+              <div
+                key={idx}
+                className={cx("MarkWrap")}
+                style={{
+                  left: `${mark.value}%`,
+                }}
+              >
+                <div className={cx("Mark")}>
+                  <div className={cx("MarkLabel")}>{mark.label}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        <div
+          ref={thumbRef}
+          className={cx("Thumb", "Single", {
+            isDragging,
+            labelAlwaysOn,
+          })}
+        >
+          <div className={cx("Label", { hidden: label === null })}>
+            {valueView}
+          </div>
+          <div className={cx("Point")}>{thumbChildren}</div>
+          <div
+            className={cx("Label", { hidden: label === null })}
+            style={{ visibility: "hidden" }}
+          >
+            {valueView}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+type DualProps = {
+  defaultValue?: [number, number];
+  thumbChildren?: [React.ReactNode?, React.ReactNode?];
+  onChange?: (value: [number, number]) => void;
+} & SliderProps;
+
+const Dual = (props: DualProps) => {
+  const {
+    readOnly = false,
+    disabled = false,
+    invert = false,
+    min = 0,
+    max = 100,
+    step = 10,
+    color = "#688DEE",
+    marks,
+    labelAlwaysOn = false,
+    defaultValue = [0, 10],
+    thumbChildren,
+    label,
+    scale = (v) => v,
+    onChange,
+  } = props;
+
+  const [value, setValue] = React.useState<[number, number]>(defaultValue);
+  const [isDragging, setIsDragging] = React.useState<number | null>(null); // 어느 thumb이 드래그 중인지 (0: 왼쪽, 1: 오른쪽)
+
+  const progressRef = React.useRef<HTMLDivElement>(null);
+
+  const valueView = React.useCallback(
+    (idx: number) => {
+      if (label === null) return;
+      return label?.(scale(value[idx])) ?? scale(value[idx]);
+    },
+    [value, scale, label]
+  );
+
+  // 마우스 위치에 따라 값을 계산하는 함수
+  const calculateValueFromPosition = React.useCallback(
+    (clientX: number) => {
+      if (progressRef.current) {
+        const rect = progressRef.current.getBoundingClientRect();
+        const sliderWidth = rect.width;
+        const offsetX = clientX - rect.left;
+
+        // 비율 계산
+        const ratio = offsetX / sliderWidth;
+        let newValue = min + ratio * (max - min);
+
+        // step에 맞게 반올림
+        newValue = Math.round(newValue / step) * step;
+
+        // min, max 범위 내로 제한
+        return Math.max(min, Math.min(newValue, max));
+      }
+      return value[0]; // 기본값으로 반환
+    },
+    [max, min, step, value]
+  );
+
+  React.useEffect(() => {
+    if (onChange) setValue(defaultValue);
+  }, [onChange, defaultValue]);
+
+  const handleValueChange = React.useCallback(
+    (newValue: [number, number]) => {
+      if (readOnly || disabled) return;
+      if (onChange) return onChange(newValue);
+      return setValue(newValue);
+    },
+    [readOnly, disabled, onChange]
+  );
+
+  // 마우스를 클릭했을 때 처리하는 함수
+  const handleMouseDown = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      if (readOnly || disabled) return;
+      const newValue = calculateValueFromPosition(e.clientX);
+
+      // 어느 thumb이 가까운지 판단
+      const distanceToThumb1 = Math.abs(newValue - value[0]);
+      const distanceToThumb2 = Math.abs(newValue - value[1]);
+
+      // 가까운 thumb을 드래그 중인 것으로 설정
+      if (distanceToThumb1 < distanceToThumb2) {
+        setIsDragging(0);
+        handleValueChange([newValue, value[1]]);
+      } else {
+        setIsDragging(1);
+        handleValueChange([value[0], newValue]);
+      }
+    },
+    [readOnly, disabled, value, calculateValueFromPosition, handleValueChange]
+  );
+
+  // 마우스를 움직일 때 처리하는 함수
+  const handleMouseMove = React.useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      if (readOnly || disabled) return;
+      if (isDragging !== null) {
+        const newValue = calculateValueFromPosition(e.clientX);
+
+        let updatedValue: [number, number];
+
+        // 왼쪽 thumb 드래그 중일 때
+        if (isDragging === 0) {
+          const updatedLeftValue = Math.min(newValue, value[1] - step); // 오른쪽 thumb을 넘지 않도록 제한
+          // 만약 왼쪽 thumb이 오른쪽 thumb을 넘으려고 하면 오른쪽 thumb도 같이 이동
+          if (newValue > value[1] - step) {
+            const updatedRightValue = Math.min(
+              max,
+              value[1] + (newValue - value[0])
+            );
+            updatedValue = [updatedLeftValue, updatedRightValue];
+          } else {
+            updatedValue = [updatedLeftValue, value[1]];
+          }
+        }
+        // 오른쪽 thumb 드래그 중일 때
+        else if (isDragging === 1) {
+          const updatedRightValue = Math.max(newValue, value[0] + step); // 왼쪽 thumb을 넘지 않도록 제한
+          // 만약 오른쪽 thumb이 왼쪽 thumb을 넘으려고 하면 왼쪽 thumb도 같이 이동
+          if (newValue < value[0] + step) {
+            const updatedLeftValue = Math.max(
+              min,
+              value[0] - (value[1] - newValue)
+            );
+            updatedValue = [updatedLeftValue, updatedRightValue];
+          } else {
+            updatedValue = [value[0], updatedRightValue];
+          }
+        } else {
+          updatedValue = value;
+        }
+        handleValueChange(updatedValue);
+      }
+    },
+    [
+      readOnly,
+      disabled,
+      isDragging,
+      step,
+      min,
+      max,
+      value,
+      calculateValueFromPosition,
+      handleValueChange,
+    ]
+  );
+
+  const handleMouseUp = React.useCallback(() => {
+    if (readOnly || disabled) return;
+    setIsDragging(null);
+  }, [readOnly, disabled]);
+
+  React.useEffect(() => {
+    if (isDragging !== null) {
+      // 전역적으로 mousemove와 mouseup 이벤트 리스너를 등록
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      // 드래그가 끝나면 이벤트 리스너 제거
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+
+    return () => {
+      // 컴포넌트 언마운트 시 이벤트 리스너 제거
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  React.useEffect(() => {
+    if (progressRef.current) {
+      const rect = progressRef.current.getBoundingClientRect();
+      const sliderWidth = rect.width;
+
+      // 왼쪽과 오른쪽 thumb의 위치를 계산
+      const thumbPositionX1 = ((value[0] - min) / (max - min)) * sliderWidth;
+      const thumbPositionX2 = ((value[1] - min) / (max - min)) * sliderWidth;
+
+      progressRef.current.style.cssText = `
+        --progress-value-width: ${thumbPositionX2 - thumbPositionX1}px;
+        --progress-value-color: ${color};
+        --progress-dual-thumb1-x: ${thumbPositionX1}px;
+        --progress-dual-thumb2-x: ${thumbPositionX2}px;
+      `;
+    }
+  }, [value, min, max, color]);
+
+  return (
+    <div className={cx("Slider")}>
+      <div
+        ref={progressRef}
+        className={cx("Progress", { readOnly, disabled, invert })}
+        onMouseDown={handleMouseDown}
+      >
+        <div className={cx("Value")} />
+        {marks && (
+          <div className={cx("Marks")}>
+            {marks.map((mark, index) => (
+              <div
+                key={index}
+                className={cx("MarkWrap")}
+                style={{ left: `${mark.value}%` }}
+              >
+                <div className={cx("Mark")}>
+                  <div className={cx("MarkLabel")}>{mark.label}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        <div
+          className={cx("Thumb", "DualThumb1", {
+            isDragging: isDragging === 0,
+            labelAlwaysOn,
+          })}
+        >
+          <div className={cx("Label", { hidden: label === null })}>
+            {valueView(0)}
+          </div>
+          <div className={cx("Point")}>{thumbChildren?.[0]}</div>
+          <div
+            className={cx("Label", { hidden: label === null })}
+            style={{ visibility: "hidden" }}
+          >
+            {valueView(0)}
+          </div>
+        </div>
+        <div
+          className={cx("Thumb", "DualThumb2", {
+            isDragging: isDragging === 1,
+            labelAlwaysOn,
+          })}
+        >
+          <div className={cx("Label", { hidden: label === null })}>
+            {valueView(1)}
+          </div>
+          <div className={cx("Point")}>{thumbChildren?.[1]}</div>
+          <div
+            className={cx("Label", { hidden: label === null })}
+            style={{ visibility: "hidden" }}
+          >
+            {valueView(1)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface ISlider {
+  Single: typeof Single;
+  Dual: typeof Dual;
+}
+
+export default {
+  Single,
+  Dual,
+} as ISlider;

package/src/components/Slider/Slider.context.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+
+type SliderContextType = {
+  readOnly?: boolean;
+  disabled?: boolean;
+  invert?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  labelAlwaysOn?: boolean;
+  marks?: { value: number; label: string | number | React.ReactNode }[];
+  markActiveEffect?: boolean;
+  defaultValue?: number[];
+  scale?: (value: number) => number;
+  label?: ((value: number) => string) | null;
+  onChange?: (e: {
+    value: number;
+    idx: number;
+    min: number;
+    max: number;
+    step: number;
+    defaultSetChangeHandler: (curr: number[]) => number[];
+  }) => void;
+
+  // private state
+  progressRef?: React.RefObject<HTMLDivElement | null>;
+  draggingIndex?: number;
+  setDefaultValue?: React.Dispatch<React.SetStateAction<number[]>>;
+  setDraggingIndex?: React.Dispatch<React.SetStateAction<number | undefined>>;
+};
+
+const initialState: SliderContextType = {
+  readOnly: false,
+  disabled: false,
+  invert: false,
+  min: 0,
+  max: 100,
+  step: 10,
+  labelAlwaysOn: false,
+  markActiveEffect: true,
+  defaultValue: [10],
+  scale: (v) => v,
+};
+
+export const SliderContext =
+  React.createContext<SliderContextType>(initialState);
+
+export type SliderProviderProps = React.PropsWithChildren<
+  SliderContextType & {
+    className?: string;
+  }
+>;
+
+export const SliderProvider = (props: SliderProviderProps) => {
+  const { children } = props;
+
+  return (
+    <SliderContext.Provider
+      value={{
+        ...initialState,
+        ...props,
+      }}
+    >
+      {children}
+    </SliderContext.Provider>
+  );
+};

package/src/components/Slider/Slider.module.scss

@@ -0,0 +1,123 @@
+.Progress {
+  --progress-progress-height: 8px;
+  --progress-value-width: 0;
+  --progress-value-color: "#688DEE";
+
+  width: 100%;
+  height: var(--progress-progress-height);
+  border-radius: 4px;
+  position: relative;
+  background-color: var(--Gray-Gray80, #b1b3b7);
+  cursor: pointer;
+
+  .Mark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: inherit;
+    display: flex;
+    align-items: center;
+    .Point {
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background-color: #fff;
+      position: relative;
+      transform: translate(-50%, 0);
+    }
+    .Label {
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform: translate(-50%, 16px);
+      font-size: 14px;
+      color: var(--Gray-Gray80, #b1b3b7);
+      user-select: none;
+      &.active {
+        color: var(--progress-value-color);
+      }
+    }
+  }
+
+  .Value {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--progress-value-width);
+    height: inherit;
+    border-radius: 4px;
+    background-color: var(--progress-value-color);
+  }
+
+  .Thumb {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: grid;
+    place-items: center;
+    gap: 10px;
+
+    .Point {
+      transition: opacity 0.25s ease-in-out;
+      border-radius: 50%;
+      padding: 4px;
+      background-color: #fff;
+      border: 4px solid var(--progress-value-color);
+      display: grid;
+      place-items: center;
+      transition: opacity 0.25s ease-in-out;
+      opacity: 1;
+      position: relative;
+
+      &::before {
+        content: attr(data-value);
+        box-sizing: border-box;
+        padding: 4px;
+        background-color: var(--Gray-Gray10, #121416);
+        color: #fff;
+        border-radius: 4px;
+        font-size: 14px;
+        transition:
+          opacity 0.25s ease-in-out,
+          display 0.25s ease-in-out allow-discrete;
+        opacity: 0;
+        position: absolute;
+        top: -40px;
+        display: none;
+        white-space: nowrap;
+      }
+      &:hover::before {
+        opacity: 1;
+        display: flex;
+      }
+      &.labelAlwaysOn::before {
+        opacity: 1;
+        display: flex;
+      }
+      &.isDragging::before {
+        opacity: 1;
+        display: flex;
+      }
+      &.hidden::before {
+        opacity: 0;
+        display: none;
+      }
+    }
+  }
+
+  &.readOnly {
+    cursor: default;
+  }
+
+  &.disabled {
+    filter: grayscale(1);
+    cursor: not-allowed;
+  }
+
+  &.invert {
+    background-color: var(--progress-value-color);
+    .Value {
+      background-color: var(--Gray-Gray80, #b1b3b7);
+    }
+  }
+}