feature: ProgressBar Label 개발

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

@@ -14,22 +14,35 @@ const meta = {
       description: "프로그래스 바의 현재 스텝을 나타냅니다.",
       table: {
         type: { summary: "number" },
-        defaultValue: { summary: "" },
       },
       control: {
         type: "number",
       },
     },
+    labels: {
+      description: "프로그래스 바 하단에 나타낼 라벨의 배열을 나타냅니다.",
+      table: {
+        type: { summary: "LabelType[]" },
+      },
+    },
     maxStep: {
       description: "프로그래스 바가 가질 수 있는 최대 스텝을 나타냅니다.",
       table: {
         type: { summary: "number" },
-        defaultValue: { summary: "" },
       },
       control: {
         type: "number",
       },
     },
+    width: {
+      description: "프로그래스 바의 너비를 지정합니다.",
+      table: {
+        type: { summary: "number" },
+      },
+      control: {
+        type: "text",
+      },
+    },
   },
 } satisfies Meta<typeof ProgressBar>;
 
@@ -48,10 +61,10 @@ export const ProgressBarWithMarkers: Story = {
   args: {
     step: 1,
     maxStep: 3,
-    markers: [
-      { value: 0, label: "Label" },
-      { value: 1, label: "Label" },
-      { value: 2, label: "Label" },
+    labels: [
+      { value: 1, text: "Label" },
+      { value: 2, text: "Label" },
+      { value: 3, text: "Label" },
     ],
   },
 };

packages/wow-ui/src/components/ProgressBar/ProgressBarCircle.tsx

@@ -1,6 +1,8 @@
 import { cva } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
 
+import { calcPercent } from "@/utils/calcPercent";
+
 const ProgressBarCircle = ({
   maxStep,
   circleNumber,
@@ -10,10 +12,6 @@ const ProgressBarCircle = ({
   circleNumber: number;
   currentStep: number;
 }) => {
-  const calcPercent = (maxValue: number, value: number) => {
-    return (value / (maxValue - 1)) * 100;
-  };
-
   const checkCurrentCircleStatus = (
     circleNumber: number,
     currentStep: number

packages/wow-ui/src/components/ProgressBar/ProgressBarLabel.tsx

@@ -0,0 +1,71 @@
+import { cva } from "@styled-system/css";
+import { styled } from "@styled-system/jsx";
+
+import { calcPercent } from "@/utils/calcPercent";
+
+export type LabelType = {
+  value: number;
+  text: string;
+};
+const ProgressBarLabel = ({
+  label,
+  maxStep,
+  currentStep,
+}: {
+  label: LabelType;
+  maxStep: number;
+  currentStep: number;
+}) => {
+  const { value, text } = label;
+
+  const checkCurrentMarkerStatus = (
+    markerValue: number,
+    currentStep: number
+  ) => {
+    if (currentStep === markerValue) return "currentStep";
+    else if (currentStep > markerValue) return "checkedStep";
+    else return "default";
+  };
+
+  return (
+    <styled.div
+      key={`${text}-marker`}
+      marginTop="14px"
+      pointerEvents="none"
+      position="absolute"
+      transform="translateX(-50%)"
+      style={{
+        left: `${calcPercent(maxStep, value - 1)}%`,
+      }}
+    >
+      <styled.span
+        className={progressBarLabelStyle({
+          status: checkCurrentMarkerStatus(label.value, currentStep),
+        })}
+      >
+        {text}
+      </styled.span>
+    </styled.div>
+  );
+};
+
+export default ProgressBarLabel;
+
+const progressBarLabelStyle = cva({
+  base: {
+    textStyle: "label2",
+  },
+  variants: {
+    status: {
+      default: {
+        color: "sub",
+      },
+      checkedStep: {
+        color: "primary",
+      },
+      currentStep: {
+        color: "textBlack",
+      },
+    },
+  },
+});

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

@@ -1,16 +1,22 @@
 import { styled } from "@styled-system/jsx";
 
 import ProgressBarCircle from "@/components/ProgressBar/ProgressBarCircle";
-import type { MarkerType } from "@/components/ProgressBar/ProgressBarMarker";
-import ProgressBarMarker from "@/components/ProgressBar/ProgressBarMarker";
+import type { LabelType } from "@/components/ProgressBar/ProgressBarLabel";
+import ProgressBarLabel from "@/components/ProgressBar/ProgressBarLabel";
 
 export interface ProgressBarProps {
   step: number;
   maxStep?: number;
-  markers?: MarkerType[];
+  labels?: LabelType[];
+  width?: number;
 }
 
-const ProgressBar = ({ step, maxStep = 3, markers }: ProgressBarProps) => {
+const ProgressBar = ({
+  step,
+  maxStep = 3,
+  labels,
+  width,
+}: ProgressBarProps) => {
   const fillProgressBar = (maxValue: number, value: number) => {
     const ratio = (value - 1) / (maxValue - 1);
     return ratio > 1 ? "100%" : `${ratio * 100}%`;
@@ -21,15 +27,16 @@ const ProgressBar = ({ step, maxStep = 3, markers }: ProgressBarProps) => {
   return (
     <div
       aria-valuemax={maxStep}
-      aria-valuemin={0}
+      aria-valuemin={1}
       aria-valuetext={String(step)}
       role="progressbar"
     >
       <styled.div
         backgroundColor="outline"
         height="1.2px"
+        minWidth="17.375rem"
         position="relative"
-        width="17.375rem"
+        style={{ width: width && width > 278 ? `${width}px` : "17.375rem" }}
       >
         <styled.div
           backgroundColor="primary"
@@ -45,14 +52,18 @@ const ProgressBar = ({ step, maxStep = 3, markers }: ProgressBarProps) => {
             />
           ))}
         </styled.div>
-        {markers && (
+        {labels && (
           <styled.div
             pointerEvents="none"
             position="relative"
             userSelect="none"
           >
-            {markers.map((marker) => (
-              <ProgressBarMarker marker={marker} maxStep={maxStep} />
+            {labels.map((label) => (
+              <ProgressBarLabel
+                currentStep={step}
+                label={label}
+                maxStep={maxStep}
+              />
             ))}
           </styled.div>
         )}

packages/wow-ui/src/utils/calcPercent.ts

@@ -0,0 +1,3 @@
+export const calcPercent = (maxValue: number, value: number) => {
+  return (value / (maxValue - 1)) * 100;
+};