feat(progress): Progress 컴포넌트 추가

* feat(progress): 컴포넌트 작업

* fix: 타입 에러 수정

* style(comment): 주석제거

* fix: 스타일 코드 수정

---------

Co-authored-by: baegofda <[email protected]>

packages/travelmakers-design-core/src/components/Process/Process/Process.style.ts

@@ -0,0 +1,17 @@
+import { createStyles } from "@travelmakers-design-v2/styles";
+
+export default createStyles((theme) => {
+  const { spacing, colors } = theme;
+
+  return {
+    root: {
+      display: "inline-flex",
+      minWidth: "328px",
+      minHeight: "52px",
+      margin: 0,
+      padding: spacing.spacing5,
+      backgroundColor: colors.primary99,
+      borderRadius: "26px",
+    },
+  };
+});

packages/travelmakers-design-core/src/components/Process/Process/Process.tsx

@@ -0,0 +1,78 @@
+import { PolymorphicRef } from "@travelmakers-design-v2/styles";
+import { forwardRef } from "react";
+import { View } from "../../View";
+import { ProcessItem } from "../ProcessItem";
+import useStyles from "./Process.style";
+import {
+  ProcessComponent,
+  ProcessProps,
+  ProcessStatus,
+  SequenceType,
+} from "./Process.type";
+
+export interface Props {
+  status: ProcessStatus;
+}
+
+const processing = (status: ProcessStatus) => {
+  switch (status) {
+    case "extend_purchase_before":
+    case "reservation_purchase_before":
+      return "before";
+    case "extend_purchase_done":
+    case "reservation_purchase_done":
+      return "done";
+  }
+};
+
+const sequence = (status: ProcessStatus): SequenceType[] => {
+  return [
+    {
+      process: "결제 대기",
+      isProcessing: processing(status) === "before",
+    },
+    {
+      process: "결제 완료",
+      isProcessing: false,
+    },
+    {
+      processor: "호텔에삶",
+      process: "예약 전달",
+      isProcessing: processing(status) === "done",
+    },
+    {
+      processor: "호텔",
+      process: "예약 확정",
+      isProcessing: false,
+    },
+  ];
+};
+
+export const Process: ProcessComponent & {
+  displayName?: string;
+} = forwardRef(
+  <C extends React.ElementType = "ol">(
+    { status, className, ...props }: ProcessProps<C>,
+    ref: PolymorphicRef<C>
+  ) => {
+    const { classes, cx } = useStyles();
+
+    const items = sequence(status);
+    const renderer = items.map((item, idx) => (
+      <ProcessItem key={idx} item={item} hasIcon={idx + 1 !== items.length} />
+    ));
+
+    return (
+      <View<React.ElementType>
+        component={"ol"}
+        ref={ref}
+        className={cx(classes.root, className)}
+        {...props}
+      >
+        {renderer}
+      </View>
+    );
+  }
+);
+
+Process.displayName = "Process";

packages/travelmakers-design-core/src/components/Process/Process/Process.type.ts

@@ -0,0 +1,32 @@
+import {
+  ClassNames,
+  PolymorphicComponentProps,
+  TmComponentProps,
+} from "@travelmakers-design-v2/styles";
+import { Props } from "./Process";
+import useStyles from "./Process.style";
+
+export type ProcessStatus =
+  | "reservation_purchase_before"
+  | "extend_purchase_before"
+  | "extend_purchase_done"
+  | "reservation_purchase_done";
+
+export type SequenceType = {
+  processor?: string;
+  process: string;
+  isProcessing: boolean;
+};
+
+type ProcessStylesNames = ClassNames<typeof useStyles>;
+
+interface SharedProcessProps
+  extends Props,
+    TmComponentProps<ProcessStylesNames> {}
+
+export type ProcessProps<C extends React.ElementType> =
+  PolymorphicComponentProps<C, SharedProcessProps>;
+
+export type ProcessComponent = <C extends React.ElementType = "ol">(
+  props: ProcessProps<C>
+) => React.ReactElement;

packages/travelmakers-design-core/src/components/Process/Process/index.ts

@@ -0,0 +1,2 @@
+export { Process } from "./Process";
+export type { ProcessProps } from "./Process.type";

packages/travelmakers-design-core/src/components/Process/Process/stories/Process.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta } from "@storybook/react";
+import { Process } from "../Process";
+
+export default {
+  title: "@travelmakers-design-v2/core/General/Process",
+  component: Process,
+  argTypes: {
+    status: {
+      control: {
+        type: "radio",
+        options: [
+          "reservation_purchase_before",
+          "extend_purchase_before",
+          "reservation_purchase_done",
+          "extend_purchase_done",
+        ],
+      },
+      defaultValue: "reservation_purchase_before",
+      description: "결제 진행 상황",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Default = (props) => {
+  return (
+    <div
+      style={{
+        display: "inline-block",
+        backgroundColor: "gray",
+        padding: "20px 10px",
+      }}
+    >
+      <Process status={"reservation_purchase_before"} {...props} />
+    </div>
+  );
+};

packages/travelmakers-design-core/src/components/Process/ProcessIcon/ProcessIcon.style.ts

@@ -0,0 +1,51 @@
+import { keyframes } from "@emotion/react";
+import { TmTheme, createStyles } from "@travelmakers-design-v2/styles";
+import { SequenceType } from "../Process/Process.type";
+
+const twinkle = keyframes`
+from {
+  opacity: 1;
+}
+70% {
+  opacity: 0;
+}`;
+
+const pathAni = (index: number) => {
+  const defaultDuration = 1.5;
+
+  return {
+    opacity: 0,
+    animation: `${twinkle} ${defaultDuration}s infinite`,
+    animationDelay: `${defaultDuration / (3 / index)}s`,
+  };
+};
+
+const firstProcessing = (
+  theme: TmTheme,
+  isProcessing: Pick<SequenceType, "isProcessing">["isProcessing"]
+) => {
+  const { colors } = theme;
+
+  if (isProcessing) {
+    return { ...pathAni(1), stroke: colors.primary3 };
+  }
+
+  return { stroke: colors.primary3 };
+};
+
+type StyleProp = {
+  isProcessing: Pick<SequenceType, "isProcessing">["isProcessing"];
+};
+
+export default createStyles((theme: TmTheme, { isProcessing }: StyleProp) => {
+  const { spacing, colors } = theme;
+
+  return {
+    root: {
+      marginLeft: isProcessing && spacing.spacing5,
+    },
+    first: firstProcessing(theme, isProcessing),
+    second: { ...pathAni(2), stroke: colors.primary70 },
+    third: { ...pathAni(3), stroke: colors.primary80 },
+  };
+});

packages/travelmakers-design-core/src/components/Process/ProcessIcon/ProcessIcon.tsx

@@ -0,0 +1,48 @@
+import { SequenceType } from "../Process/Process.type";
+import useStyles from "./ProcessIcon.style";
+
+type Props = {
+  isProcessing: Pick<SequenceType, "isProcessing">["isProcessing"];
+};
+
+export const ProcessIcon = ({ isProcessing }: Props) => {
+  const { classes } = useStyles({ isProcessing });
+
+  const renderPaths = () => {
+    if (isProcessing) {
+      return (
+        <>
+          <path
+            className={classes.first}
+            d="M1.84326 5L4.67169 7.82843L1.84326 10.6569"
+          />
+          <path
+            className={classes.second}
+            d="M6.5 5L9.32843 7.82843L6.5 10.6569"
+          />
+          <path
+            className={classes.third}
+            d="M11.1567 5L13.9852 7.82843L11.1567 10.6569"
+          />
+        </>
+      );
+    }
+
+    return (
+      <path className={classes.first} d="M7 5L9.82843 7.82843L7 10.6569" />
+    );
+  };
+
+  return (
+    <svg
+      className={classes.root}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {renderPaths()}
+    </svg>
+  );
+};

packages/travelmakers-design-core/src/components/Process/ProcessIcon/index.ts

@@ -0,0 +1 @@
+export { ProcessIcon } from "./ProcessIcon";

packages/travelmakers-design-core/src/components/Process/ProcessItem/ProcessItem.style.ts

@@ -0,0 +1,36 @@
+import { TmTheme, createStyles } from "@travelmakers-design-v2/styles";
+import { SequenceType } from "../Process/Process.type";
+
+type StyleProp = {
+  isProcessing: Pick<SequenceType, "isProcessing">["isProcessing"];
+};
+
+export default createStyles((theme: TmTheme, { isProcessing }: StyleProp) => {
+  const { colors, typography } = theme;
+
+  return {
+    root: {
+      display: "flex",
+      alignItems: "center",
+    },
+    process: {
+      ...typography.body3,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      height: "100%",
+      padding: "0 11px",
+      color: isProcessing ? colors.white : colors.primary3,
+      textAlign: "center",
+      backgroundColor: isProcessing ? colors.secondary00 : colors.transparent,
+      borderRadius: "22px",
+
+      ["&.process-line-height"]: {
+        lineHeight: "14px",
+      },
+    },
+    processor: {
+      fontWeight: 700,
+    },
+  };
+});

packages/travelmakers-design-core/src/components/Process/ProcessItem/ProcessItem.tsx

@@ -0,0 +1,25 @@
+import { SequenceType } from "../Process/Process.type";
+import { ProcessIcon } from "../ProcessIcon";
+import useStyles from "./ProcessItem.style";
+
+export interface Props {
+  item: SequenceType;
+  hasIcon: boolean;
+}
+
+export const ProcessItem = ({ item, hasIcon }: Props) => {
+  const { processor, process, isProcessing } = item;
+  const { classes, cx } = useStyles({ isProcessing });
+
+  return (
+    <li className={classes.root}>
+      <div
+        className={cx(classes.process, { "process-line-height": processor })}
+      >
+        {processor && <span className={classes.processor}>{processor}</span>}
+        {process}
+      </div>
+      {hasIcon && <ProcessIcon isProcessing={isProcessing} />}
+    </li>
+  );
+};

packages/travelmakers-design-core/src/components/Process/ProcessItem/index.ts

@@ -0,0 +1 @@
+export { ProcessItem } from "./ProcessItem";

packages/travelmakers-design-core/src/components/Process/index.ts

@@ -0,0 +1 @@
+export * from "./Process";