@weing-dev/ui-kit-primitive 0.0.0

package/src/components/TimeInput/TimeInput.module.scss

@@ -0,0 +1,211 @@
+$Basis: 105px;
+
+@layer TimeInput {
+  .InputWrapper {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 4px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color, var(--componentTextfieldOutline));
+    color: var(--color, var(--textPrimary, #1c252e));
+    background-color: var(--background-color, transparent);
+    height: 40px;
+    flex: 1;
+    @include bodyRegularSmall;
+
+    &.row {
+      flex-direction: row;
+      flex-grow: 1;
+    }
+
+    &.contained {
+      background-color: var(--componentTextfieldFilled, #edeff2);
+    }
+
+    &.large {
+      @include bodyRegularMedium;
+      height: 48px;
+    }
+
+    &.error {
+      border-color: var(--textError, #f5222d);
+    }
+
+    &.warning {
+      border-color: var(--textWarning, #ffab00);
+    }
+
+    &.success {
+      border-color: var(--textSuccess, #1cc95c);
+    }
+
+    &.focused {
+      border-color: var(--border-color, var(--componentTextfieldOutline));
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+    }
+
+    .Input {
+      border: none;
+      outline: none;
+      background: none;
+      font: inherit;
+      text-align: center;
+      appearance: none;
+      display: inline-block;
+      flex: 1;
+      color: var(--color, inherit);
+
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      &::placeholder {
+        color: var(--placeholder-color, var(--textTertiary, #919eab));
+        font: inherit;
+      }
+
+      &.error {
+        color: var(--textError, #f5222d);
+
+        &::placeholder {
+          color: var(--textError, #f5222d);
+        }
+      }
+
+      // &.warning {
+      //   color: var(--textWarning, #ffab00);
+
+      //   &::placeholder {
+      //     color: var(--textWarning, #ffab00);
+      //   }
+      // }
+
+      // &.success {
+      //   color: var(--textSuccess, #1cc95c);
+
+      //   &::placeholder {
+      //     color: var(--textSuccess, #1cc95c);
+      //   }
+      // }
+
+      &.readOnly {
+        cursor: default;
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+        color: var(--textDisabled, #c4cdd5);
+        &::placeholder {
+          color: var(--textDisabled, #c4cdd5);
+        }
+      }
+    }
+
+    .TimeRange {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex: 1;
+    }
+  }
+
+  .Colon {
+    color: #919eab;
+    &.error {
+      color: var(--textError, #f5222d);
+    }
+    &.warning {
+      color: var(--textWarning, #ffab00);
+    }
+    &.success {
+      color: var(--textSuccess, #1cc95c);
+    }
+    &.disabled {
+      color: var(--textDisabled, #c4cdd5);
+    }
+  }
+
+  .Separator {
+    color: #919eab;
+
+    &.error {
+      color: var(--textError, #f5222d);
+    }
+    &.warning {
+      color: var(--textWarning, #ffab00);
+    }
+    &.success {
+      color: var(--textSuccess, #1cc95c);
+    }
+    &.disabled {
+      color: var(--textDisabled, #c4cdd5);
+    }
+  }
+
+  .HelperText {
+    color: var(--textTertiary, #919eab);
+    &.error {
+      color: var(--textError, #f5222d);
+    }
+    &.warning {
+      color: var(--textWarning, #ffab00);
+    }
+    &.success {
+      color: var(--textSuccess, #1cc95c);
+    }
+  }
+
+  .TimeInputLabel {
+    @include captionBoldMedium;
+    color: var(--textSecondary, #637381);
+    margin-bottom: 4px;
+
+    &.focused {
+      color: var(--actionAction);
+    }
+
+    &.error {
+      color: var(--textError, #f5222d);
+    }
+
+    &.warning {
+      color: var(--textWarning, #ffab00);
+    }
+
+    &.success {
+      color: var(--textSuccess, #1cc95c);
+    }
+
+    &.row {
+      margin-bottom: 0;
+      margin-right: 8px;
+      flex: 0 0 var(--basis, $Basis);
+    }
+
+    &.large,
+    &.row.small {
+      @include bodyBoldSmall;
+    }
+
+    &.row.large {
+      @include bodyBoldMedium;
+    }
+  }
+
+  .TimeInputRoot {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+
+    &.row {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+}

package/src/components/TimeInput/TimeInput.tsx

@@ -0,0 +1,411 @@
+"use client";
+import React from "react";
+import styles from "./TimeInput.module.scss";
+import cn from "classnames/bind";
+import { TimeInputContext, TimeInputContextType } from "./TimeInput.context";
+import HelperTextComponent from "../HelperText/HelperText";
+import useTimeInputColors from "./TimeInput.colors";
+
+const cx = cn.bind(styles);
+
+type InputProps = {
+  index: number;
+  placeholder: string;
+} & React.JSX.IntrinsicElements["input"];
+const Input = (props: InputProps) => {
+  const { index, placeholder, ...rest } = props;
+  const {
+    inputRefs,
+    status,
+    disabled,
+    readOnly,
+    focused,
+    handleChange,
+    handleBlur,
+    handleKeyDown,
+    handleFocus,
+  } = React.use(TimeInputContext);
+  const max = index % 2 === 0 ? 23 : 59;
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const numValue = parseInt(value);
+
+    // 빈 값이거나 NaN인 경우 그대로 통과
+    if (!value || isNaN(numValue)) {
+      handleChange?.(e, index);
+      return;
+    }
+
+    // 최대값을 초과하는 경우 최대값으로 설정
+    if (numValue > max) {
+      e.target.value = max.toString();
+    }
+
+    handleChange?.(e, index);
+
+    // 두 자리 수가 입력되면 다음 입력으로 포커스
+    if (value.length === 2 && index < 3) {
+      inputRefs?.current[index + 1]?.focus();
+    }
+  };
+
+  return (
+    <input
+      {...rest}
+      className={cx("Input", rest.className, status, {
+        disabled,
+        readOnly,
+        focused,
+      })}
+      type="number"
+      ref={(el) => {
+        if (el) inputRefs!.current[index] = el;
+      }}
+      onChange={handleInputChange}
+      onBlur={() => handleBlur?.(inputRefs!.current[index].value, max, index)}
+      onFocus={handleFocus}
+      placeholder={placeholder}
+      onKeyDown={(e) => handleKeyDown?.(e, index)}
+      readOnly={readOnly}
+      disabled={disabled}
+      min={0}
+      max={max}
+    />
+  );
+};
+
+type TimeRangeProps = React.PropsWithChildren<
+  React.JSX.IntrinsicElements["div"]
+>;
+const TimeRange = (props: TimeRangeProps) => {
+  const { children, ...rest } = props;
+  return (
+    <div {...rest} className={cx("TimeRange", rest.className)}>
+      {children}
+    </div>
+  );
+};
+
+type ColonProps = React.JSX.IntrinsicElements["span"];
+const Colon = (props: ColonProps) => {
+  const { ...rest } = props;
+  const { status, disabled } = React.use(TimeInputContext);
+  return (
+    <span
+      {...rest}
+      className={cx("Colon", rest.className, status, { disabled })}
+    >
+      :
+    </span>
+  );
+};
+
+type SeparatorProps = React.JSX.IntrinsicElements["span"];
+const Separator = (props: SeparatorProps) => {
+  const { ...rest } = props;
+  const { status, disabled } = React.use(TimeInputContext);
+  return (
+    <span
+      {...rest}
+      className={cx("Separator", rest.className, status, { disabled })}
+    >
+      -
+    </span>
+  );
+};
+
+type HelperTextProps = React.PropsWithChildren<{
+  className?: string;
+  warningColor?: string;
+  errorColor?: string;
+  successColor?: string;
+  defaultColor?: string;
+  infoColor?: string;
+  size?: number;
+  iconVisible?: boolean;
+}>;
+
+const HelperText = (props: HelperTextProps) => {
+  const { children, ...rest } = props;
+  const { status, disabled } = React.use(TimeInputContext);
+
+  if (!status || disabled) return null;
+
+  return (
+    <HelperTextComponent {...rest} status={status}>
+      {children ?? "종료 시간이 시작 시간보다 커야 합니다."}
+    </HelperTextComponent>
+  );
+};
+
+type InputWrapperProps = React.PropsWithChildren<
+  React.JSX.IntrinsicElements["div"]
+>;
+const InputWrapper = (props: InputWrapperProps) => {
+  const { children, ...rest } = props;
+  const { size, variant, status, focused, disabled, direction } =
+    React.use(TimeInputContext);
+  const timeInputColors = useTimeInputColors();
+  const colorSet = timeInputColors[variant ?? "outlined"];
+
+  return (
+    <div
+      {...rest}
+      className={cx(
+        "InputWrapper",
+        rest.className,
+        size,
+        variant,
+        status,
+        direction,
+        {
+          focused,
+          disabled,
+        }
+      )}
+      style={{
+        "--background-color": disabled
+          ? colorSet.disabled.backgroundColor
+          : colorSet.inactive.backgroundColor,
+        "--border-color": focused
+          ? colorSet.focused.borderColor
+          : colorSet.inactive.borderColor,
+        "--color": disabled ? colorSet.disabled.color : colorSet.inactive.color,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+type LabelProps = React.PropsWithChildren<{
+  className?: string;
+  focusedColor?: string;
+}>;
+
+const Label = (props: LabelProps) => {
+  const { className, children, focusedColor } = props;
+  const { focused, status, size, direction, flexBasis } =
+    React.use(TimeInputContext);
+
+  return (
+    <span
+      className={cx("TimeInputLabel", className, status, size, direction, {
+        focused,
+      })}
+      style={{
+        color: focused ? focusedColor : undefined,
+        ...(flexBasis ? { "--basis": flexBasis } : {}),
+      }}
+    >
+      {children}
+    </span>
+  );
+};
+
+type RootProps = React.PropsWithChildren<
+  Omit<
+    TimeInputContextType,
+    "inputRefs" | "handleChange" | "handleBlur" | "handleKeyDown"
+  > & {
+    className?: string;
+  }
+>;
+
+const Root = (props: RootProps) => {
+  const {
+    children,
+    className,
+    value = "",
+    size = "small",
+    disabled = false,
+    readOnly = false,
+    focused: externalFocused,
+    variant = "outlined",
+    direction = "column",
+    flexBasis,
+    status: externalStatus,
+    onChange,
+  } = props;
+
+  const [time, setTime] = React.useState<string>(value);
+  const [internalStatus, setInternalStatus] = React.useState<
+    "error" | "warning" | "success"
+  >();
+  const [internalFocused, setInternalFocused] = React.useState(externalFocused);
+  const inputRefs = React.useRef<HTMLInputElement[]>([]);
+
+  const padTime = (value: string, max: number) => {
+    if (!value) return "";
+    const numValue = parseInt(value);
+    return numValue <= max ? String(numValue).padStart(2, "0") : "";
+  };
+
+  const handleFocus = React.useCallback(() => {
+    if (disabled || readOnly) return;
+    setInternalFocused(true);
+  }, [disabled, readOnly]);
+
+  const handleBlur = React.useCallback(
+    (value: string, max: number, index: number) => {
+      const newTime = padTime(value, max);
+      setTime(newTime);
+      inputRefs.current[index].value = newTime;
+      setInternalFocused(false);
+    },
+    []
+  );
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+      const currentInput = inputRefs.current[index];
+      const currentValue = currentInput.value;
+
+      switch (e.key) {
+        case "Backspace":
+          // 현재 입력이 비어있고, 이전 입력이 존재할 때만 이전으로 이동
+          if (currentValue === "" && index > 0) {
+            e.preventDefault();
+            inputRefs.current[index - 1].focus();
+          }
+          break;
+
+        case "Tab":
+          if (e.shiftKey) {
+            if (index > 0) {
+              e.preventDefault();
+              inputRefs.current[index - 1].focus();
+            }
+          } else {
+            if (index < 3) {
+              e.preventDefault();
+              // 현재 값이 한 자리 수일 경우 두 자리로 패딩
+              if (currentValue && currentValue.length === 1) {
+                const max = index % 2 === 0 ? 23 : 59;
+                handleBlur(currentValue, max, index);
+              }
+              inputRefs.current[index + 1].focus();
+            }
+          }
+          break;
+      }
+    },
+    [handleBlur]
+  );
+
+  const validateTimeRange = React.useCallback(() => {
+    const time = inputRefs.current.map((el) => el.value);
+    const startTime = `${time[0]}:${time[1]}`;
+    const endTime = `${time[2]}:${time[3]}`;
+
+    if (parseInt(time[2] + time[3]) <= parseInt(time[0] + time[1])) {
+      setInternalStatus("error");
+    } else {
+      setInternalStatus(undefined);
+      if (onChange) onChange({ start: startTime, end: endTime });
+    }
+  }, [onChange]);
+
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+      const value = e.target.value;
+      setTime(value);
+
+      // 값이 비어있지 않고 두 자리 수인 경우에만 다음 입력으로 포커스
+      if (value && value.length === 2 && index < 3) {
+        const max = index % 2 === 0 ? 23 : 59;
+        const numValue = parseInt(value);
+
+        // 최대값을 초과하는 경우 최대값으로 설정
+        if (numValue > max) {
+          inputRefs.current[index].value = max.toString();
+        }
+
+        inputRefs.current[index + 1].focus();
+      }
+
+      // 모든 입력값이 있을 때만 검증 실행
+      if (inputRefs.current.every((input) => input.value)) {
+        validateTimeRange();
+      } else if (inputRefs.current.every((input) => input.value === "")) {
+        if (onChange) onChange({ start: "", end: "" });
+        setInternalStatus(undefined);
+      }
+    },
+    [validateTimeRange, onChange]
+  );
+
+  const contextValue = React.useMemo<TimeInputContextType>(
+    () => ({
+      value: time,
+      disabled,
+      readOnly,
+      inputRefs,
+      status: externalStatus ?? internalStatus,
+      size,
+      variant,
+      focused: internalFocused,
+      direction,
+      flexBasis,
+      onChange,
+      handleChange,
+      handleBlur,
+      handleKeyDown,
+      handleFocus,
+    }),
+    [
+      time,
+      disabled,
+      readOnly,
+      size,
+      variant,
+      internalFocused,
+      direction,
+      flexBasis,
+      externalStatus,
+      internalStatus,
+      onChange,
+      handleChange,
+      handleBlur,
+      handleKeyDown,
+      handleFocus,
+    ]
+  );
+
+  React.useEffect(() => {
+    setInternalFocused(externalFocused);
+  }, [externalFocused]);
+
+  return (
+    <TimeInputContext.Provider value={contextValue}>
+      <div className={cx("TimeInputRoot", className, direction)}>
+        {children}
+      </div>
+    </TimeInputContext.Provider>
+  );
+};
+
+interface ITimeInput {
+  Root: typeof Root;
+  Label: typeof Label;
+  Input: typeof Input;
+  TimeRange: typeof TimeRange;
+  Colon: typeof Colon;
+  Separator: typeof Separator;
+  HelperText: typeof HelperText;
+  InputWrapper: typeof InputWrapper;
+}
+
+const TimeInput = {
+  Root,
+  Label,
+  Input,
+  TimeRange,
+  Colon,
+  Separator,
+  HelperText,
+  InputWrapper,
+} as ITimeInput;
+
+export default TimeInput;

package/src/components/WeeklyCalendar/WeeklyCalendar.context.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+
+export interface EventItem {
+  id: string;
+  startTime: string; // 예: "2025-01-15 22:00"
+  endTime?: string; // 예: "2025-01-16 02:00"
+  createdAt: string; // 예: "2025-01-10 09:00"
+  isAllDay?: boolean;
+  title?: string;
+}
+
+export type EventItemAsProps<T extends EventItem = EventItem> = {
+  id: string;
+  startTime: string;
+  endTime?: string;
+  title: string;
+  style?: React.CSSProperties;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  ref?: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+} & Omit<T, keyof EventItem>;
+
+export type EventItemPopperAsProps<T extends EventItem = EventItem> = {
+  id: string;
+  popperRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
+  popperStyle: React.CSSProperties;
+  popperAttributes: {
+    [key: string]: string;
+  };
+  title: string;
+  realStartTime?: string;
+  realEndTime?: string;
+  arrowRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
+  arrowStyle: React.CSSProperties;
+  arrowAttributes: {
+    [key: string]: string;
+  };
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+} & Omit<T, keyof EventItem>;
+
+export type WeeklyCalendarContextType<T extends EventItem> = {
+  /** start hour (하루 최소 시간)*/
+  minHour: number;
+  /** end hour (하루 최대 시간) */
+  maxHour: number;
+  /** current date */
+  currentDate?: string;
+  /** date count */
+  columnCount: number;
+  /** min step */
+  step: number;
+  /** Event List */
+  events?: Array<T>;
+  /** 새 일정 생성을 위한 드래그 기능 활성화 */
+  enableCreateByDrag?: boolean;
+  /** 기존 일정 이동을 위한 드래그 기능 활성화 */
+  enableMoveByDrag?: boolean;
+  /** 이벤트 아이템 컴포넌트 */
+  eventItemAs?: (props: EventItemAsProps<T>) => React.ReactNode;
+  /** 이벤트 아이템 popper 컴포넌트 */
+  eventItemPopperAs?: (props: EventItemPopperAsProps<T>) => React.ReactNode;
+  /** 이벤트 아이템 높이 */
+  itemHeight?: number;
+  /** 타입 */
+  type?: "default" | "noLines";
+  /** 툴팁 숨김 지연 시간 */
+  popperHideDelay?: number;
+  /** 툴팁 오프셋 */
+  popperOffset?: [number, number];
+};
+
+export const initialState: WeeklyCalendarContextType<EventItem> = {
+  minHour: 0,
+  maxHour: 24,
+  columnCount: 5,
+  step: 15,
+  enableCreateByDrag: true,
+  enableMoveByDrag: true,
+  popperHideDelay: 200,
+  popperOffset: [0, 0],
+};
+
+export const WeeklyCalendarContext =
+  React.createContext<WeeklyCalendarContextType<any>>(initialState);
+
+export type WeeklyCalendarProviderProps<T extends EventItem> =
+  React.PropsWithChildren<WeeklyCalendarContextType<T>>;