@weing-dev/ui-kit-primitive 0.0.0

package/src/components/MobilePicker/MobilePicker.context.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export type DefaultContextType = { [key: string]: string };
+
+export type MobilePickerContextType<
+  T extends DefaultContextType = DefaultContextType
+> = {
+  selectedValue: T;
+  itemHeight: number;
+  itemViewCount: number;
+  onChange: React.Dispatch<React.SetStateAction<T>>;
+};
+
+const initialState: MobilePickerContextType = {
+  selectedValue: {},
+  itemHeight: 36,
+  itemViewCount: 5,
+  onChange: () => {},
+};
+
+export const MobilePickerContext =
+  React.createContext<MobilePickerContextType<any>>(initialState);

package/src/components/MobilePicker/MobilePicker.module.scss

@@ -0,0 +1,57 @@
+@layer MobilePicker {
+  @property --item-height {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 36px;
+  }
+
+  .Root {
+    display: flex;
+    width: 100%;
+    height: auto;
+    position: relative;
+  }
+  .Column {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    mask-image: linear-gradient(to top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
+  }
+  .Item {
+    height: var(--item-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 500;
+    color: #ccc;
+    flex-shrink: 0;
+    user-select: none;
+
+    &.isSelected {
+      color: #333;
+    }
+  }
+  .ItemWrap {
+    position: absolute;
+    width: 100%;
+    transition: transform 0.2s ease-out;
+
+    &.isDragging {
+      transition: none;
+    }
+  }
+  .Divider {
+    width: 100%;
+    height: var(--item-height);
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    box-sizing: border-box;
+    border-block: 2px solid #ebebeb;
+    z-index: -1;
+  }
+}

package/src/components/MobilePicker/MobilePicker.tsx

@@ -0,0 +1,336 @@
+import React from "react";
+import styles from "./MobilePicker.module.scss";
+import cn from "classnames/bind";
+import {
+  DefaultContextType,
+  MobilePickerContext,
+} from "./MobilePicker.context";
+
+const cx = cn.bind(styles);
+
+type ItemWrapProps = React.PropsWithChildren<
+  { isDragging: boolean } & React.JSX.IntrinsicElements["div"]
+>;
+const ItemWrap = (props: ItemWrapProps) => {
+  const { children, isDragging, ...rest } = props;
+
+  return (
+    <div {...rest} className={cx("ItemWrap", rest.className, { isDragging })}>
+      {children}
+    </div>
+  );
+};
+
+type ItemAsProps = {
+  onClick: () => void;
+  isSelected: boolean;
+  defaultClassName: string;
+  defaultStyle: React.CSSProperties;
+};
+type ItemProps = {
+  as?: (props: ItemAsProps) => React.ReactNode;
+  name: string;
+  value: string;
+} & React.JSX.IntrinsicElements["div"];
+const Item = (props: ItemProps) => {
+  const { as, name, value, ...rest } = props;
+  const { selectedValue, itemHeight, onChange } =
+    React.use(MobilePickerContext);
+
+  const handleClick = () => {
+    onChange((prev: DefaultContextType) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const isSelected = selectedValue[name] === value;
+
+  const defaultClassName = cx("Item", rest.className, { isSelected });
+
+  const defaultStyle = {
+    "--item-height": `${itemHeight}px`,
+    ...rest.style,
+  };
+
+  return as ? (
+    as({
+      onClick: handleClick,
+      isSelected,
+      defaultClassName,
+      defaultStyle,
+    })
+  ) : (
+    <div
+      {...rest}
+      onClick={handleClick}
+      className={defaultClassName}
+      style={defaultStyle}
+    >
+      {value}
+    </div>
+  );
+};
+
+type ColumnAsProps = {
+  onWheel: (e: React.WheelEvent) => void;
+  onTouchStart: (e: React.TouchEvent) => void;
+  onTouchMove: (e: React.TouchEvent) => void;
+  onTouchEnd: (e: React.TouchEvent) => void;
+  defaultClassName: string;
+  defaultStyle: React.CSSProperties;
+  children: React.ReactNode;
+};
+
+type ColumnProps = React.PropsWithChildren<
+  {
+    as?: (props: ColumnAsProps) => React.ReactNode;
+  } & React.JSX.IntrinsicElements["div"]
+>;
+
+const Column = (props: ColumnProps) => {
+  const { as, children, ...rest } = props;
+  const { itemHeight, itemViewCount, selectedValue, onChange } =
+    React.use(MobilePickerContext);
+
+  const columnRef = React.useRef<HTMLDivElement>(null);
+
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [startY, setStartY] = React.useState(0);
+  const [offsetY, setOffsetY] = React.useState(0);
+
+  const centerOffset = (itemViewCount / 2 - 0.5) * itemHeight;
+  const childrenArray = React.Children.toArray(children);
+
+  const selectedIndex = childrenArray.findIndex((child) => {
+    if (React.isValidElement<ItemProps>(child)) {
+      const { name, value } = child.props;
+      return selectedValue[name] === value;
+    }
+    return false;
+  });
+
+  const handleDragStart = (e: React.MouseEvent | React.TouchEvent) => {
+    setIsDragging(true);
+    setStartY("touches" in e ? e.touches[0].clientY : e.clientY);
+  };
+
+  const handleDragMove = (e: React.MouseEvent | React.TouchEvent) => {
+    if (!isDragging) return;
+
+    const currentY = "touches" in e ? e.touches[0].clientY : e.clientY;
+    const delta = currentY - startY;
+
+    // 최대 이동 가능한 범위 계산
+    const maxOffset = selectedIndex * itemHeight;
+    const minOffset = -(childrenArray.length - 1 - selectedIndex) * itemHeight;
+
+    // 최대 초과 가능 거리 (아이템 높이의 120%로 제한)
+    const maxOverflow = itemHeight * 1.2;
+    const elasticFactor = 0.2;
+    let boundedDelta = delta;
+
+    if (delta > maxOffset) {
+      const overflow = delta - maxOffset;
+      boundedDelta =
+        maxOffset + Math.min(maxOverflow, overflow * elasticFactor);
+    } else if (delta < minOffset) {
+      const overflow = minOffset - delta;
+      boundedDelta =
+        minOffset - Math.min(maxOverflow, overflow * elasticFactor);
+    }
+
+    setOffsetY(boundedDelta);
+  };
+
+  const handleDragEnd = () => {
+    if (!isDragging) return;
+
+    setIsDragging(false);
+    setOffsetY(0);
+
+    const delta = Math.round(offsetY / itemHeight);
+    const nextIndex = Math.min(
+      Math.max(0, selectedIndex - delta),
+      childrenArray.length - 1
+    );
+
+    const nextChild = childrenArray[nextIndex];
+    if (React.isValidElement<ItemProps>(nextChild)) {
+      const { name, value } = nextChild.props;
+      onChange((prev: DefaultContextType) => ({
+        ...prev,
+        [name]: value,
+      }));
+    }
+  };
+
+  // 컴포넌트 마운트 시 wheel 이벤트 리스너 추가
+  React.useEffect(() => {
+    const handleWheelEvent = (e: WheelEvent | TouchEvent) => {
+      e.preventDefault();
+    };
+
+    const el = columnRef.current;
+    if (el) {
+      el.addEventListener("wheel", handleWheelEvent, { passive: false });
+      el.addEventListener("touchmove", handleWheelEvent, { passive: false });
+    }
+
+    return () => {
+      if (el) {
+        el.removeEventListener("wheel", handleWheelEvent);
+        el.removeEventListener("touchmove", handleWheelEvent);
+      }
+    };
+  }, []);
+
+  const handleWheel = (e: React.WheelEvent) => {
+    e.stopPropagation();
+
+    const direction = e.deltaY > 0 ? 1 : -1;
+    const nextIndex = selectedIndex + direction;
+
+    if (nextIndex >= 0 && nextIndex < childrenArray.length) {
+      const nextChild = childrenArray[nextIndex];
+      if (React.isValidElement<ItemProps>(nextChild)) {
+        const { name, value } = nextChild.props;
+        onChange((prev: DefaultContextType) => ({
+          ...prev,
+          [name]: value,
+        }));
+      }
+    }
+  };
+
+  const defaultClassName = cx("Column", rest.className);
+  const defaultStyle = {
+    height: `${itemHeight * itemViewCount}px`,
+    ...rest.style,
+  };
+
+  return as ? (
+    as({
+      onWheel: handleWheel,
+      onTouchStart: handleDragStart,
+      onTouchMove: handleDragMove,
+      onTouchEnd: handleDragEnd,
+      defaultClassName,
+      defaultStyle,
+      children: (
+        <ItemWrap
+          isDragging={isDragging}
+          style={{
+            transform: `translateY(${
+              centerOffset -
+              selectedIndex * itemHeight +
+              (isDragging ? offsetY : 0)
+            }px)`,
+          }}
+        >
+          {children}
+        </ItemWrap>
+      ),
+    })
+  ) : (
+    <div
+      {...rest}
+      ref={columnRef}
+      className={defaultClassName}
+      style={defaultStyle}
+      onWheel={handleWheel}
+      onTouchStart={handleDragStart}
+      onTouchMove={handleDragMove}
+      onTouchEnd={handleDragEnd}
+    >
+      <ItemWrap
+        isDragging={isDragging}
+        style={{
+          transform: `translateY(${
+            centerOffset -
+            selectedIndex * itemHeight +
+            (isDragging ? offsetY : 0)
+          }px)`,
+        }}
+      >
+        {children}
+      </ItemWrap>
+    </div>
+  );
+};
+
+type RootAsProps = {
+  defaultClassName: string;
+  children: React.ReactNode;
+  divider: React.ReactNode;
+};
+
+type RootProps<T extends DefaultContextType> = React.PropsWithChildren<
+  {
+    selectedValue: T;
+    onChange: React.Dispatch<React.SetStateAction<T>>;
+    itemHeight?: number;
+    itemViewCount?: number;
+    as?: (props: RootAsProps) => React.ReactNode;
+  } & Omit<React.JSX.IntrinsicElements["div"], "onChange">
+>;
+
+const Root = <T extends DefaultContextType>(props: RootProps<T>) => {
+  const {
+    children,
+    selectedValue,
+    itemHeight = 36,
+    itemViewCount = 5,
+    onChange,
+    as,
+    ...rest
+  } = props;
+
+  const contextValue = {
+    selectedValue,
+    itemHeight,
+    itemViewCount,
+    onChange,
+  };
+
+  const defaultClassName = cx("Root", rest.className);
+  const divider = (
+    <div
+      className={cx("Divider")}
+      style={{
+        "--item-height": `${itemHeight}px`,
+      }}
+    />
+  );
+
+  return (
+    <MobilePickerContext value={contextValue}>
+      {as ? (
+        as({
+          defaultClassName,
+          children,
+          divider,
+        })
+      ) : (
+        <div {...rest} className={defaultClassName}>
+          {children}
+          {divider}
+        </div>
+      )}
+    </MobilePickerContext>
+  );
+};
+
+interface IMobilePicker {
+  Root: typeof Root;
+  Column: typeof Column;
+  Item: typeof Item;
+}
+
+const MobilePicker = {
+  Root,
+  Column,
+  Item,
+} as IMobilePicker;
+
+export default MobilePicker;

package/src/components/MobilePicker/README.md

@@ -0,0 +1,159 @@
+# MobilePicker UI
+
+## Contents List
+
+1. [Quick Start](#QuickStart)
+2. [Reference](#Reference)
+3. [Example](#Example)
+
+## Quick Start
+
+```tsx
+import { MobilePicker } from "@weing-dev/ui-kit-primitive";
+import React from "react";
+
+const Example = () => {
+  const [selectedValue, setSelectedValue] = React.useState({
+    title: "Mr.",
+    name: "John",
+  });
+
+  const selections = {
+    title: ["Mr.", "Mrs.", "Ms.", "Dr."],
+    name: ["John", "Jane", "Mike"],
+  };
+
+  return (
+    <MobilePicker.Root
+      selectedValue={selectedValue}
+      onChange={setSelectedValue}
+      itemHeight={36}
+      itemViewCount={5}
+    >
+      <MobilePicker.Column>
+        {selections.title.map((title) => (
+          <MobilePicker.Item key={title} name="title" value={title} />
+        ))}
+      </MobilePicker.Column>
+      <MobilePicker.Column>
+        {selections.name.map((name) => (
+          <MobilePicker.Item key={name} name="name" value={name} />
+        ))}
+      </MobilePicker.Column>
+    </MobilePicker.Root>
+  );
+};
+```
+
+## Reference
+
+### Root
+
+`MobilePicker.Root`는 전체 Picker UI를 감싸는 컨테이너 컴포넌트입니다.
+
+| Prop                            |                   Type                    | Required | Default Value |
+| :------------------------------ | :---------------------------------------: | :------: | :-----------: |
+| [selectedValue](#selectedValue) |   `T extends { [key: string]: string }`   |    ✓     |       -       |
+| [onChange](#onChange)           | `React.Dispatch<React.SetStateAction<T>>` |    ✓     |       -       |
+| [itemHeight](#itemHeight)       |                 `number`                  |    -     |      36       |
+| [itemViewCount](#itemViewCount) |                 `number`                  |    -     |       5       |
+| [as](#Root-as)                  | `(props: RootAsProps) => React.ReactNode` |    -     |       -       |
+
+#### selectedValue
+
+현재 선택된 값들을 관리하기 위한 객체입니다. 각 Column의 Item들의 name을 key로, value를 value로 가집니다.
+
+```tsx
+const [selectedValue, setSelectedValue] = React.useState({
+  title: "Mr.",
+  name: "John",
+});
+```
+
+#### onChange
+
+선택된 값이 변경될 때 호출되는 함수입니다.
+
+#### itemHeight
+
+각 Item의 높이를 지정하는 값입니다. 픽셀 단위로 설정됩니다.
+
+#### itemViewCount
+
+한 번에 보여질 Item의 개수입니다. 홀수값을 권장합니다.
+
+#### Root-as
+
+Root 컴포넌트의 렌더링을 커스터마이징하기 위한 prop입니다.
+
+##### RootAsProps
+
+| Prop             |       Type        | Required |
+| :--------------- | :---------------: | :------: |
+| defaultClassName |     `string`      |    ✓     |
+| children         | `React.ReactNode` |    ✓     |
+| divider          | `React.ReactNode` |    ✓     |
+
+### Column
+
+`MobilePicker.Column`은 세로로 배치되는 Item들의 컨테이너입니다.
+
+| Prop                         |                    Type                     | Required | Default Value |
+| :--------------------------- | :-----------------------------------------: | :------: | :-----------: |
+| [children](#Column-children) |              `React.ReactNode`              |    ✓     |       -       |
+| [as](#Column-as)             | `(props: ColumnAsProps) => React.ReactNode` |    -     |       -       |
+
+#### Column-children
+
+Column 내부에 들어갈 Item 컴포넌트들입니다.
+
+#### Column-as
+
+Column 컴포넌트의 렌더링을 커스터마이징하기 위한 prop입니다.
+
+##### ColumnAsProps
+
+| Prop             |              Type               | Required |
+| :--------------- | :-----------------------------: | :------: |
+| onWheel          | `(e: React.WheelEvent) => void` |    ✓     |
+| onTouchStart     | `(e: React.TouchEvent) => void` |    ✓     |
+| onTouchMove      | `(e: React.TouchEvent) => void` |    ✓     |
+| onTouchEnd       | `(e: React.TouchEvent) => void` |    ✓     |
+| defaultClassName |            `string`             |    ✓     |
+| defaultStyle     |      `React.CSSProperties`      |    ✓     |
+| children         |        `React.ReactNode`        |    ✓     |
+
+### Item
+
+`MobilePicker.Item`은 선택 가능한 개별 항목을 나타냅니다.
+
+| Prop            |                   Type                    | Required | Default Value |
+| :-------------- | :---------------------------------------: | :------: | :-----------: |
+| [name](#name)   |                 `string`                  |    ✓     |       -       |
+| [value](#value) |                 `string`                  |    ✓     |       -       |
+| [as](#Item-as)  | `(props: ItemAsProps) => React.ReactNode` |    -     |       -       |
+
+#### name
+
+Item이 속한 Column을 구분하기 위한 식별자입니다.
+
+#### value
+
+Item의 실제 값입니다.
+
+#### Item-as
+
+Item 컴포넌트의 렌더링을 커스터마이징하기 위한 prop입니다.
+
+##### ItemAsProps
+
+| Prop             |         Type          | Required |
+| :--------------- | :-------------------: | :------: |
+| onClick          |     `() => void`      |    ✓     |
+| isSelected       |       `boolean`       |    ✓     |
+| defaultClassName |       `string`        |    ✓     |
+| defaultStyle     | `React.CSSProperties` |    ✓     |
+
+## Example
+
+프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/mobile-picker)에서 확인할 수 있습니다.

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,77 @@
+"use client";
+import React from "react";
+import ReactDOM from "react-dom";
+
+type DimmedProps = React.PropsWithChildren<{
+  dimmedColor: "transparent" | "light" | "dark";
+  onClose?: () => void;
+}>;
+
+const Dimmed = (props: DimmedProps) => {
+  const { children, dimmedColor, onClose } = props;
+
+  const backgroundColor = {
+    transparent: "transparent",
+    light: "#00000033",
+    dark: "#0000007a",
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100dvw",
+        height: "100dvh",
+        zIndex: 9999,
+        backgroundColor: backgroundColor[dimmedColor],
+      }}
+      onClick={onClose}
+    >
+      {children}
+    </div>
+  );
+};
+
+type ModalProps = React.PropsWithChildren<{
+  visible?: boolean;
+  dimmedColor?: "transparent" | "light" | "dark";
+  selector?: string;
+  onClose?: () => void;
+}>;
+
+const Modal = (props: ModalProps) => {
+  const {
+    children,
+    visible,
+    dimmedColor = "dark",
+    selector = "body",
+    onClose,
+  } = props;
+
+  const [portalElement, setPortalElement] = React.useState<Element | null>(
+    null
+  );
+
+  React.useEffect(() => {
+    setPortalElement(document.querySelector(selector));
+  }, [selector]);
+
+  return (
+    <React.Fragment>
+      {portalElement && visible ? (
+        ReactDOM.createPortal(
+          <Dimmed onClose={onClose} dimmedColor={dimmedColor}>
+            {children}
+          </Dimmed>,
+          portalElement
+        )
+      ) : (
+        <React.Fragment />
+      )}
+    </React.Fragment>
+  );
+};
+
+export default Modal;