[Feature] Stepper 컴포넌트를 구현해요.

apps/wow-docs/styled-system/tokens/index.js

@@ -343,6 +343,14 @@ const tokens = {
     value: 10,
     variable: "var(--z-index-dropdown)",
   },
+  "shadows.blue": {
+    value: "0px 4px 8px 0px rgba(16, 43, 74, 0.2)",
+    variable: "var(--shadows-blue)",
+  },
+  "shadows.mono": {
+    value: "0px 4px 8px 0px rgba(0, 0, 0, 0.2)",
+    variable: "var(--shadows-mono)",
+  },
   "breakpoints.sm": {
     value: "640px",
     variable: "var(--breakpoints-sm)",

apps/wow-docs/styled-system/tokens/tokens.d.ts

@@ -86,6 +86,8 @@ export type Token =
   | "borderWidths.button"
   | "borderWidths.arrow"
   | "zIndex.dropdown"
+  | "shadows.blue"
+  | "shadows.mono"
   | "breakpoints.sm"
   | "breakpoints.md"
   | "breakpoints.lg"
@@ -307,6 +309,8 @@ export type BorderWidthToken = "button" | "arrow";
 
 export type ZIndexToken = "dropdown";
 
+export type ShadowToken = "blue" | "mono";
+
 export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl";
 
 export type SizeToken =
@@ -323,6 +327,7 @@ export type Tokens = {
   radii: RadiusToken;
   borderWidths: BorderWidthToken;
   zIndex: ZIndexToken;
+  shadows: ShadowToken;
   breakpoints: BreakpointToken;
   sizes: SizeToken;
 } & { [token: string]: never };

apps/wow-docs/styled-system/types/prop-type.d.ts

@@ -459,6 +459,7 @@ export interface UtilityValues {
   textDecorationColor: Tokens["colors"];
   textEmphasisColor: Tokens["colors"];
   textIndent: Tokens["spacing"];
+  textShadow: Tokens["shadows"];
   textShadowColor: Tokens["colors"];
   textWrap: "wrap" | "balance" | "nowrap";
   truncate: boolean;
@@ -522,6 +523,7 @@ export interface UtilityValues {
   borderBottomColor: Tokens["colors"];
   borderBlockEndColor: Tokens["colors"];
   borderBlockStartColor: Tokens["colors"];
+  boxShadow: Tokens["shadows"];
   boxShadowColor: Tokens["colors"];
   filter: "auto";
   backdropFilter: "auto";

apps/wow-docs/styled-system/types/style-props.d.ts

@@ -1976,7 +1976,12 @@ export interface SystemProperties {
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
    */
-  boxShadow?: ConditionalValue<CssProperties["boxShadow"] | AnyString>;
+  boxShadow?: ConditionalValue<
+    | UtilityValues["boxShadow"]
+    | CssVars
+    | CssProperties["boxShadow"]
+    | AnyString
+  >;
   /**
    * The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.
    *
@@ -6572,7 +6577,12 @@ export interface SystemProperties {
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/text-shadow
    */
-  textShadow?: ConditionalValue<CssProperties["textShadow"] | AnyString>;
+  textShadow?: ConditionalValue<
+    | UtilityValues["textShadow"]
+    | CssVars
+    | CssProperties["textShadow"]
+    | AnyString
+  >;
   /**
    * The **`text-size-adjust`** CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.
    *
@@ -8635,7 +8645,12 @@ export interface SystemProperties {
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
    */
-  shadow?: ConditionalValue<CssProperties["boxShadow"] | AnyString>;
+  shadow?: ConditionalValue<
+    | UtilityValues["boxShadow"]
+    | CssVars
+    | CssProperties["boxShadow"]
+    | AnyString
+  >;
   shadowColor?: ConditionalValue<
     UtilityValues["boxShadowColor"] | CssVars | AnyString
   >;

packages/wow-ui/package.json

@@ -30,6 +30,11 @@
       "require": "./dist/Switch.cjs",
       "import": "./dist/Switch.js"
     },
+    "./Stepper": {
+      "types": "./dist/components/Stepper/index.d.ts",
+      "require": "./dist/Stepper.cjs",
+      "import": "./dist/Stepper.js"
+    },
     "./RadioButton": {
       "types": "./dist/components/RadioGroup/RadioButton.d.ts",
       "require": "./dist/RadioButton.cjs",

packages/wow-ui/rollup.config.js

@@ -22,6 +22,7 @@ export default {
   input: {
     TextField: "./src/components/TextField",
     Switch: "./src/components/Switch",
+    Stepper: "./src/components/Stepper",
     RadioButton: "./src/components/RadioGroup/RadioButton",
     RadioGroup: "./src/components/RadioGroup/RadioGroup",
     MultiGroup: "./src/components/MultiGroup",

packages/wow-ui/src/components/Stepper/Stepper.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Stepper from "@/components/Stepper";
+
+const meta = {
+  title: "UI/Stepper",
+  component: Stepper,
+  parameters: {
+    componentSubtitle: "스텝퍼 컴포넌트",
+    a11y: {
+      config: {
+        rules: [{ id: "color-contrast", enabled: false }],
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    step: {
+      description: "프로그래스 바의 현재 스텝을 나타냅니다.",
+      table: {
+        type: { summary: "number" },
+      },
+      control: {
+        type: "number",
+      },
+    },
+    labels: {
+      description: "프로그래스 바 하단에 나타낼 라벨의 배열을 나타냅니다.",
+      table: {
+        type: { summary: "LabelType[]" },
+      },
+      control: false,
+    },
+    maxStep: {
+      description: "프로그래스 바가 가질 수 있는 최대 스텝을 나타냅니다.",
+      table: {
+        type: { summary: "number" },
+      },
+      control: {
+        type: "number",
+      },
+    },
+    width: {
+      description: "프로그래스 바의 너비를 지정합니다.",
+      table: {
+        type: { summary: "number" },
+      },
+      control: {
+        type: "text",
+      },
+    },
+  },
+} satisfies Meta<typeof Stepper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    step: 1,
+    maxStep: 5,
+  },
+};
+
+export const ProgressBarWithMarkers: Story = {
+  args: {
+    step: 1,
+    maxStep: 3,
+    labels: [
+      { value: 1, label: "Label" },
+      { value: 2, label: "Label" },
+      { value: 3, label: "Label" },
+    ],
+  },
+};

packages/wow-ui/src/components/Stepper/index.tsx

@@ -0,0 +1,202 @@
+import { cva } from "@styled-system/css";
+import { styled } from "@styled-system/jsx";
+import type { ReactNode } from "react";
+import { useCallback, useMemo } from "react";
+
+import { calcPercent } from "@/utils/calcPercent";
+
+export interface StepperProps {
+  step: number;
+  maxStep?: number;
+  labels?: LabelType[];
+  width?: number;
+}
+
+export type LabelType = {
+  value: number;
+  label: ReactNode;
+};
+
+const checkStepperStatus = (number: number, step: number) => {
+  if (step === number) return "currentStep";
+  if (step > number) return "checkedStep";
+  return "default";
+};
+
+/**
+ * @param {number} step Stepper의 현재 스텝
+ * @param {number} [maxStep] Stepper가 가질 수 있는 최대 스텝
+ * @param {LabelType[]} [labels] Stepper에 하단에 입력할 라벨의 배열
+ * @param {number} width Stepper의 가로 길이를 자유롭게 정할 수 있어요. 단, 278px 이상이어야 합니다.
+ */
+
+const Stepper = ({ step, maxStep = 3, labels, width }: StepperProps) => {
+  const fillProgressBar = useCallback((maxStep: number, step: number) => {
+    const ratio = (step - 1) / (maxStep - 1);
+    return ratio > 1 ? "100%" : `${ratio * 100}%`;
+  }, []);
+
+  const circleNumbers = useMemo(
+    () => Array.from({ length: maxStep }, (_, i) => i + 1),
+    [maxStep]
+  );
+
+  return (
+    <div
+      aria-label="progressbar"
+      aria-valuemax={maxStep}
+      aria-valuemin={1}
+      aria-valuetext={String(step)}
+      role="progressbar"
+    >
+      <styled.div
+        backgroundColor="outline"
+        height="1.2px"
+        minWidth="17.375rem"
+        position="relative"
+        style={{ width: width && width > 278 ? `${width}px` : "17.375rem" }}
+      >
+        <styled.div
+          backgroundColor="primary"
+          height="1.2px"
+          style={{ width: fillProgressBar(maxStep, step) }}
+        />
+        <styled.ul position="relative" width="100%">
+          {circleNumbers.map((circleNumber) => (
+            <StepperCircle
+              circleNumber={circleNumber}
+              currentStep={step}
+              key={`circle-${circleNumber}`}
+              maxStep={maxStep}
+            />
+          ))}
+        </styled.ul>
+        {labels && (
+          <styled.ul pointerEvents="none" position="relative" userSelect="none">
+            {labels.map((label) => (
+              <StepperLabel
+                currentStep={step}
+                key={`label-${label.value}`}
+                labelObject={label}
+                maxStep={maxStep}
+              />
+            ))}
+          </styled.ul>
+        )}
+      </styled.div>
+    </div>
+  );
+};
+
+export default Stepper;
+
+const StepperCircle = ({
+  maxStep,
+  circleNumber,
+  currentStep,
+}: {
+  maxStep: number;
+  circleNumber: number;
+  currentStep: number;
+}) => {
+  return (
+    <styled.li
+      className={stepperCircleStyle({
+        status: checkStepperStatus(circleNumber, currentStep),
+      })}
+      style={{
+        left: `${calcPercent(maxStep, circleNumber - 1)}%`,
+        top: "-12px",
+      }}
+    >
+      {circleNumber}
+    </styled.li>
+  );
+};
+
+const stepperCircleStyle = cva({
+  base: {
+    textStyle: "label2",
+    alignItems: "center",
+    borderRadius: "full",
+    display: "flex",
+    height: "1.5rem",
+    justifyContent: "center",
+    pointerEvents: "none",
+    position: "absolute",
+    width: "1.5rem",
+    borderWidth: "1px",
+    transform: "translateX(-50%)",
+  },
+  variants: {
+    status: {
+      default: {
+        borderWidth: "0.0625rem",
+        borderColor: "outline",
+        backgroundColor: "backgroundNormal",
+        color: "sub",
+      },
+      checkedStep: {
+        borderWidth: "0.0625rem",
+        borderColor: "primary",
+        color: "primary",
+        backgroundColor: "backgroundNormal",
+      },
+      currentStep: {
+        backgroundColor: "primary",
+        color: "textWhite",
+      },
+    },
+  },
+});
+
+const StepperLabel = ({
+  labelObject,
+  maxStep,
+  currentStep,
+}: {
+  labelObject: LabelType;
+  maxStep: number;
+  currentStep: number;
+}) => {
+  const { value, label } = labelObject;
+
+  return (
+    <styled.li
+      marginTop="14px"
+      pointerEvents="none"
+      position="absolute"
+      transform="translateX(-50%)"
+      style={{
+        left: `${calcPercent(maxStep, value - 1)}%`,
+      }}
+    >
+      <styled.span
+        className={stepperLabelStyle({
+          status: checkStepperStatus(value, currentStep),
+        })}
+      >
+        {label}
+      </styled.span>
+    </styled.li>
+  );
+};
+
+const stepperLabelStyle = cva({
+  base: {
+    textStyle: "label2",
+  },
+  variants: {
+    status: {
+      default: {
+        color: "sub",
+      },
+      checkedStep: {
+        color: "primary",
+      },
+      currentStep: {
+        color: "textBlack",
+      },
+    },
+  },
+});