@dotss/ui 0.0.4

package/components/Card/Card.stories.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Card from './Card';
+
+const meta = {
+  title: 'Component/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    variant: {
+      options: ['filled', 'outlined'],
+      control: {
+        type: 'radio'
+      }
+    },
+    appearance: {
+      options: ['kiosk', 'mobile'],
+      control: {
+        type: 'radio'
+      }
+    },
+    wrapperProps: {
+      control: {
+        disable: true
+      }
+    }
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// TODO: 명칭 변경 필요
+export const Kiosk: Story = {
+  args: {
+    children: 'CARD',
+    variant: 'filled',
+    disabled: false,
+    active: false,
+    appearance: 'kiosk',
+    wrapperProps: {}
+  }
+};
+
+export const Mobile: Story = {
+  args: {
+    children: 'CARD',
+    variant: 'filled',
+    disabled: false,
+    active: false,
+    appearance: 'mobile',
+    wrapperProps: {}
+  }
+};
+
+export const Toggled: Story = {
+  render: (props) => {
+    const [isSelected, setIsSelected] = useState(false);
+
+    const handleClick = () => {
+      setIsSelected((prev) => !prev);
+    };
+
+    return (
+      <Card
+        {...props}
+        variant={isSelected ? 'outlined' : 'filled'}
+        active={isSelected}
+        onClick={handleClick}
+        inlineCSS={{ cursor: 'pointer' }}
+      >
+        {props.children}
+      </Card>
+    );
+  },
+  args: {
+    children: 'CARD',
+    variant: 'filled',
+    active: false,
+    appearance: 'kiosk'
+  }
+};

package/components/Card/Card.styles.ts

@@ -0,0 +1,146 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import type { CardProps } from '@components/Card/Card';
+
+export const StyledCard = styled.div<
+  Pick<CardProps, 'variant' | 'disabled' | 'active' | 'appearance'> & { isHoverPossible: boolean }
+>`
+  display: flex;
+  flex-direction: column;
+  color: ${({ theme }) => theme.palette.grey['100']};
+  &[disabled] {
+    pointer-events: none;
+  }
+
+  ${({ theme: { spacing }, appearance, variant }): CSSObject => {
+    if (appearance === 'kiosk') {
+      let cssObject = {
+        padding: `${spacing.content(8)}px ${spacing.content(6)}px`,
+        gap: spacing.content(2),
+        borderRadius: 20,
+        borderWidth: 4,
+        borderStyle: 'solid'
+      };
+      if (variant === 'outlined') {
+        cssObject = {
+          ...cssObject,
+          padding: `calc(${spacing.content(8) - 4}px) calc(${spacing.content(6) - 4}px)`
+        };
+      }
+      return cssObject;
+    }
+    if (appearance === 'mobile') {
+      let cssObject = {
+        padding: `${spacing.content(4)}px`,
+        gap: spacing.content(1),
+        borderRadius: 12,
+        borderWidth: 2,
+        borderStyle: 'solid'
+      };
+      if (variant === 'outlined') {
+        cssObject = {
+          ...cssObject,
+          padding: `calc(${spacing.content(4) - 2}px)`
+        };
+      }
+      return cssObject;
+    }
+    return {};
+  }}
+
+  ${({
+    theme: {
+      palette: { brand, grey, background }
+    },
+    variant,
+    disabled,
+    active,
+    isHoverPossible
+  }): CSSObject => {
+    if (variant === 'outlined') {
+      if (!disabled && active) {
+        return {
+          borderColor: brand.primary.main,
+          backgroundColor: grey.white,
+          '&:active': {
+            backgroundColor: brand.primary.disable
+          },
+          ...(isHoverPossible ? { '&:hover': { backgroundColor: brand.primary.disable } } : {})
+        };
+      }
+      if (!disabled && !active) {
+        return {
+          borderWidth: 2,
+          borderColor: grey['30'],
+          backgroundColor: grey.white,
+          '&:active': {
+            backgroundColor: grey['10']
+          },
+          ...(isHoverPossible ? { '&:hover': { backgroundColor: grey['10'] } } : {})
+        };
+      }
+      if (disabled && active) {
+        return {
+          borderColor: brand.primary.disableLine,
+          backgroundColor: brand.primary.disable
+        };
+      }
+      if (disabled && !active) {
+        return {
+          borderWidth: 2,
+          borderColor: grey['30'],
+          backgroundColor: grey['10']
+        };
+      }
+    }
+    if (variant === 'filled') {
+      if (!disabled && active) {
+        return {
+          border: 'none',
+          backgroundColor: brand.primary.main,
+          '&:active': {
+            backgroundColor: brand.primary.press
+          },
+          ...(isHoverPossible ? { '&:hover': { backgroundColor: brand.primary.press } } : {})
+        };
+      }
+      if (!disabled && !active) {
+        return {
+          border: 'none',
+          backgroundColor: background.primary,
+          '&:active': {
+            backgroundColor: grey['10']
+          },
+          ...(isHoverPossible ? { '&:hover': { backgroundColor: grey['10'] } } : {})
+        };
+      }
+      if (disabled && active) {
+        return {
+          border: 'none',
+          backgroundColor: brand.primary.disable
+        };
+      }
+      if (disabled && !active) {
+        return {
+          border: 'none',
+          backgroundColor: grey['20']
+        };
+      }
+    }
+    return {};
+  }}
+
+  ${({ disabled }): CSSObject => {
+    if (disabled) {
+      return {};
+    }
+    return {};
+  }}
+`;
+
+export const StyledCardWrapper = styled.div<Pick<CardProps, 'disabled'>>`
+  &[disabled] {
+    cursor: not-allowed;
+  }
+`;

package/components/Card/Card.tsx

@@ -0,0 +1,54 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { StyledCard, StyledCardWrapper } from '@components/Card/Card.styles';
+import useCheckHoverPossible from '@hooks/useCheckHoverPossible/useCheckHoverPossible';
+import type { GeneralComponentProps, PolymorphicComponentProps, Variant } from '@typings/component';
+
+export type CardProps<T extends ElementType = 'div'> = PolymorphicComponentProps<T> & {
+  variant?: Extract<Variant, 'filled' | 'outlined'>;
+  active?: boolean;
+  disabled?: boolean;
+  appearance?: 'kiosk' | 'mobile'; // TODO: 명칭 변경 필요
+  wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+};
+
+type CardComponent<DT extends ElementType> = <T extends ElementType = DT>(
+  props: CardProps<T>
+) => ReactNode;
+
+const Card: CardComponent<'div'> = forwardRef(function Card(
+  {
+    children,
+    tag,
+    inlineCSS,
+    variant = 'filled',
+    active = false,
+    disabled = false,
+    appearance = 'mobile',
+    wrapperProps = {},
+    ...props
+  },
+  ref
+) {
+  const { isHoverPossible } = useCheckHoverPossible();
+  return (
+    <StyledCardWrapper disabled={disabled} {...wrapperProps} css={wrapperProps?.inlineCSS}>
+      <StyledCard
+        as={tag}
+        variant={variant}
+        active={active}
+        disabled={disabled}
+        appearance={appearance}
+        isHoverPossible={isHoverPossible}
+        {...props}
+        css={inlineCSS}
+        ref={ref}
+      >
+        {children}
+      </StyledCard>
+    </StyledCardWrapper>
+  );
+});
+
+export default Card;

package/components/Card/index.ts

@@ -0,0 +1,3 @@
+import Card from './Card';
+
+export default Card;

package/components/ChainPicker/ChainPicker.stories.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Flexbox, Typography } from '@components';
+
+import ChainPicker from './ChainPicker';
+
+const meta = {
+  title: 'Component/ChainPicker',
+  component: ChainPicker,
+  tags: ['autodocs']
+} satisfies Meta<typeof ChainPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (props) => {
+    const [value, setValue] = useState(props.value);
+
+    const handleChange = (newValue: number) => {
+      setValue(newValue);
+    };
+
+    useEffect(() => {
+      setValue(props.value);
+    }, [props.value]);
+
+    return (
+      <Flexbox flexDirection="column" justifyContent="center" alignItems="center" gap={2}>
+        <Typography variant="h1B">[ Selected Value: {value} ]</Typography>
+        <ChainPicker column={props.column} onChange={handleChange} value={value} />
+      </Flexbox>
+    );
+  },
+  args: {
+    onChange: () => {},
+    column: [
+      { label: '남아', value: 0 },
+      { label: '여아', value: 1 }
+    ],
+    value: 0
+  }
+};
+
+export const Custom: Story = {
+  render: (props) => {
+    const [value, setValue] = useState(props.value);
+
+    const handleChange = (newValue: number) => {
+      setValue(newValue);
+    };
+
+    useEffect(() => {
+      setValue(props.value);
+    }, [props.value]);
+
+    return (
+      <Flexbox flexDirection="column" justifyContent="center" alignItems="center" gap={2}>
+        <Typography variant="h1B">[ Selected Value: {value} ]</Typography>
+        <ChainPicker
+          column={props.column}
+          onChange={handleChange}
+          value={value}
+          renderLabel={props.renderLabel}
+          wrapperProps={{ inlineCSS: { width: '100%' } }}
+        />
+      </Flexbox>
+    );
+  },
+  args: {
+    onChange: () => {},
+    column: [
+      { label: '07:00', value: 7 },
+      { label: '07:30', value: 7.5 },
+      { label: '08:00', value: 8 },
+      { label: '08:30', value: 8.5 },
+      { label: '09:00', value: 9 },
+      { label: '09:30', value: 9.5 },
+      { label: '10:00', value: 10 },
+      { label: '10:30', value: 10.5 },
+      { label: '11:00', value: 11 },
+      { label: '11:30', value: 11.5 },
+      { label: '12:00', value: 12 },
+      { label: '12:30', value: 12.5 },
+      { label: '13:00', value: 13 },
+      { label: '13:30', value: 13.5 },
+      { label: '14:00', value: 14 },
+      { label: '14:30', value: 14.5 },
+      { label: '15:00', value: 15 },
+      { label: '15:30', value: 15.5 },
+      { label: '16:00', value: 16 },
+      { label: '16:30', value: 16.5 },
+      { label: '17:00', value: 17 },
+      { label: '17:30', value: 17.5 },
+      { label: '18:00', value: 18 },
+      { label: '18:30', value: 18.5 },
+      { label: '19:00', value: 19 },
+      { label: '19:30', value: 19.5 },
+      { label: '20:00', value: 20 },
+      { label: '20:30', value: 20.5 },
+      { label: '21:00', value: 21 },
+      { label: '21:30', value: 21.5 }
+    ],
+    value: 7,
+    renderLabel: (item, isSelected) => {
+      return (
+        <Flexbox gap={1} alignItems="center" justifyContent="center">
+          <Typography tag="span" variant={isSelected ? 'h5M' : 'b5M'}>
+            {item.value < 12 ? '오전' : '오후'}
+          </Typography>
+          <Typography tag="span" variant={isSelected ? 'h2M' : 'h4M'}>
+            {item.label}
+          </Typography>
+        </Flexbox>
+      );
+    }
+  }
+};

package/components/ChainPicker/ChainPicker.styles.ts

@@ -0,0 +1,88 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+export const StyledChainPicker = styled.ul`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 162px;
+  position: relative;
+  cursor: grab;
+  transition: transform 0.3s ease-out;
+`;
+
+export const StyledChainPickerWrapper = styled.div`
+  position: relative;
+  width: auto;
+  height: fit-content;
+  overflow: hidden;
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: translateY(-100%);
+    background: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(255, 255, 255, 0.6) 10%,
+      rgba(255, 255, 255, 0) 20%,
+      rgba(255, 255, 255, 0) 80%,
+      rgba(255, 255, 255, 0.6) 90%,
+      rgba(255, 255, 255, 1) 100%
+    );
+    pointer-events: none;
+  }
+`;
+
+export const StyledChainPickerItem = styled.li<{ selected: boolean; distance: number }>`
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  scroll-snap-align: start;
+  position: relative;
+
+  ${({
+    theme: {
+      palette: { grey },
+      typography: { h2M },
+      spacing: { content }
+    }
+  }): CSSObject => ({
+    fontSize: h2M.size,
+    fontWeight: h2M.weight,
+    lineHeight: h2M.lineHeight,
+    letterSpacing: h2M.letterSpacing,
+    color: grey['100'],
+    padding: content(3)
+  })};
+
+  ${({
+    selected,
+    theme: {
+      palette: { grey },
+      typography: { h4M }
+    }
+  }) => {
+    if (selected) {
+      return {
+        '&, & *': {
+          color: `${grey['100']} !important`
+        }
+      };
+    }
+    return {
+      color: `${grey['30']} !important`,
+      fontSize: `${h4M.size} !important`,
+      fontWeight: `${h4M.weight} !important`,
+      lineHeight: `${h4M.lineHeight} !important`,
+      letterSpacing: `${h4M.letterSpacing} !important`,
+      '& *': {
+        color: `${grey['30']} !important`
+      }
+    };
+  }}
+`;

package/components/ChainPicker/ChainPicker.tsx

@@ -0,0 +1,211 @@
+import type { HTMLAttributes, MouseEvent, ReactNode, TouchEvent } from 'react';
+import { Fragment, forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';
+
+import {
+  StyledChainPicker,
+  StyledChainPickerItem,
+  StyledChainPickerWrapper
+} from '@components/ChainPicker/ChainPicker.styles';
+import useCheckHoverPossible from '@hooks/useCheckHoverPossible/useCheckHoverPossible';
+import type { GeneralComponentProps } from '@typings/component';
+
+export const SCROLL_POSITION_THRESHOLD = 3;
+
+export interface ChainPickerItem {
+  label: string;
+  value: number;
+}
+
+export interface ChainPickerProps
+  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLUListElement>, 'onChange'>> {
+  column: ChainPickerItem[];
+  value?: number;
+  onChange: (selectedValue: number) => void;
+  renderLabel?: (item: ChainPickerItem, isSelected: boolean) => ReactNode;
+  wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+}
+
+const ChainPicker = forwardRef<HTMLUListElement, ChainPickerProps>(function PickerWheel(
+  { column, value = column[0].value, onChange, renderLabel, inlineCSS, wrapperProps, ...props },
+  ref
+) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const itemHeight = 54;
+  const defaultIndex = column.findIndex((item) => item.value === value);
+  const [scrollPosition, setScrollPosition] = useState(defaultIndex * itemHeight);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startDragScrollPosition, setStartDragScrollPosition] = useState(0);
+  const [startDragY, setStartDragY] = useState(0);
+  const id = useId();
+
+  const { isHoverPossible: isWeb } = useCheckHoverPossible();
+
+  const handleStart = (clientY: number) => {
+    setIsDragging(true);
+    setStartDragY(clientY);
+    setStartDragScrollPosition(scrollPosition);
+  };
+
+  const handleMove = (clientY: number) => {
+    if (!isDragging) return;
+    const deltaY = startDragY - clientY;
+    let newScrollPosition = startDragScrollPosition + deltaY;
+    const maxScrollPosition = itemHeight * (column.length - 1);
+
+    // 최소, 최대값 제한
+    if (newScrollPosition < 0) {
+      newScrollPosition = 0;
+    } else if (newScrollPosition > maxScrollPosition) {
+      newScrollPosition = maxScrollPosition;
+    }
+
+    setScrollPosition(newScrollPosition);
+    if (wrapperRef.current) {
+      wrapperRef.current.children[0].scrollTop = newScrollPosition;
+    }
+  };
+
+  const handleMouseDown = (event: MouseEvent<HTMLUListElement>) => handleStart(event.clientY);
+
+  const handleTouchStart = (event: TouchEvent<HTMLUListElement>) =>
+    handleStart(event.touches[0].clientY);
+
+  const handleMouseMove = (event: MouseEvent<HTMLUListElement>) => handleMove(event.clientY);
+
+  const handleTouchMove = (event: TouchEvent<HTMLUListElement>) =>
+    handleMove(event.touches[0].clientY);
+
+  const handleEnd = (e: MouseEvent | TouchEvent) => {
+    if (!isDragging) return;
+    setIsDragging(false);
+
+    // 클릭처럼 처리
+    if (!isWeb && e.type === 'mouseup') return;
+    if (Math.abs(startDragScrollPosition - scrollPosition) < SCROLL_POSITION_THRESHOLD) {
+      const target = e.target as HTMLElement;
+
+      const item = target.closest('[data-index]') as HTMLElement;
+      if (item) {
+        const index = Number(item.dataset.index);
+        if (column[index]) {
+          if (wrapperRef.current) {
+            const scrollContainer = wrapperRef.current.children[0] as HTMLElement;
+
+            scrollContainer.scrollTo({
+              top: index * itemHeight,
+              behavior: 'smooth'
+            });
+
+            const handleScrollEnd = () => {
+              if (Math.abs(scrollContainer.scrollTop - index * itemHeight) < 1) {
+                onChange(column[index].value);
+                scrollContainer.removeEventListener('scroll', handleScrollEnd);
+              }
+            };
+
+            scrollContainer.addEventListener('scroll', handleScrollEnd);
+          }
+        }
+      }
+      return;
+    }
+
+    let index = Math.round(scrollPosition / itemHeight);
+    let closestValue = index * itemHeight;
+    const maxScrollPosition = itemHeight * (column.length - 1);
+
+    if (closestValue < 0) {
+      closestValue = 0;
+      index = 0;
+    } else if (closestValue > maxScrollPosition) {
+      closestValue = maxScrollPosition;
+      index = column.length - 1;
+    }
+
+    const animateScroll = (currentValue: number) => {
+      if (Math.abs(currentValue - closestValue) < 1) {
+        setScrollPosition(closestValue);
+        if (wrapperRef.current) {
+          wrapperRef.current.children[0].scrollTop = closestValue;
+        }
+      } else {
+        const newValue = currentValue + (closestValue - currentValue) / 5;
+        setScrollPosition(newValue);
+        if (wrapperRef.current) {
+          wrapperRef.current.children[0].scrollTop = newValue;
+        }
+        requestAnimationFrame(() => animateScroll(newValue));
+      }
+    };
+
+    requestAnimationFrame(() => animateScroll(scrollPosition));
+
+    if (column[index]) {
+      onChange(column[index].value);
+    }
+  };
+
+  useLayoutEffect(() => {
+    const index = column.findIndex((item) => item.value === value);
+    const newScrollPosition = index * itemHeight;
+    setScrollPosition(newScrollPosition);
+    if (wrapperRef.current) {
+      wrapperRef.current.children[0].scrollTop = newScrollPosition;
+    }
+  }, [value, column, itemHeight]);
+
+  return (
+    <StyledChainPickerWrapper ref={wrapperRef} {...wrapperProps} css={wrapperProps?.inlineCSS}>
+      <StyledChainPicker
+        ref={ref}
+        css={inlineCSS}
+        {...props}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleEnd}
+        onMouseLeave={handleEnd}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleEnd}
+        onTouchCancel={handleEnd}
+      >
+        {column.map((item, index) => {
+          const selectedPosition = column.findIndex((columnItem) => columnItem.value === value);
+          const scrollIndex = selectedPosition === 0 ? 0 : Math.round(scrollPosition / itemHeight);
+          const isSelected = index === scrollIndex;
+          return (
+            <Fragment key={`${id}_${item.label}`}>
+              {index === 0 && (
+                <StyledChainPickerItem
+                  className="chain-picker-item"
+                  data-index={index}
+                  selected={false}
+                  distance={(selectedPosition + 1) * -1}
+                />
+              )}
+              <StyledChainPickerItem
+                className="chain-picker-item"
+                data-index={index}
+                data-selected={isSelected}
+                selected={isSelected}
+                distance={index - selectedPosition}
+              >
+                {renderLabel ? renderLabel(item, isSelected) : item.label}
+              </StyledChainPickerItem>
+              {index === column.length - 1 && (
+                <StyledChainPickerItem
+                  className="chain-picker-item"
+                  data-index={index}
+                  selected={false}
+                  distance={column.length - selectedPosition}
+                />
+              )}
+            </Fragment>
+          );
+        })}
+      </StyledChainPicker>
+    </StyledChainPickerWrapper>
+  );
+});
+
+export default ChainPicker;